/* KOVE — system.css: спільний шар компонентів (витягнуто з Головної та Створення сайтів).
   Тут живуть: стани/фокус, CTA V6, рядок кошторису з рамкою, картка аргументу, картка послуги,
   пластина технології, поле форми і кастомний селект, шапка з меню-аркушем, футер з підписом знака,
   FAQ-розкриття, блок процесу (спільний для сторінок послуг). Сторінкам лишається лише їхня верстка.
   Скоуп компонентів — .dv-card (контейнер сторінки). Кожна сторінка лінкує цей файл ПЕРЕД власним <style>,
   тож локальне правило тієї ж специфічності свідомо виграє. */
body{margin:0;background:#EFE8DF;font-family:'Golos Text',sans-serif}
/* ВИДІЛЕННЯ ТЕКСТУ. Системний блакитний — чужий колір: він ламає і темні, і паперові
   екрани й читається як збій. У метафорі файлу виділений текст це виділений ШАР, тож
   заливка — той самий помаранч, що на хендлах і марках обрізу, а чорнило — темне.
   Три ґрунти сайту → три правила: темний артборд (ставиться на .dv-card і успадковується
   всім), папір (стаття, форма, меню-аркуш — світлий фон з темним чорнилом) і помаранчеві
   плашки (стрічка, кнопки): там помаранч на помаранчі невидимий, тому інверсія — темна
   заливка, світле чорнило. Правила прив'язані до фону через атрибутні селектори на
   інлайн-стилі, як і решта шару: жодних класів у сторінках. */
.dv-card ::selection{background:#FF511A;color:#191613}
/* React серіалізує інлайн-фон як rgb(...) з пробілами — hex у атрибутному селекторі не збігається ні з чим */
.dv-card [style*="rgb(253, 250, 246)"] ::selection,.dv-card [style*="rgb(253, 250, 246)"]::selection,
.dv-card [style*="rgb(239, 232, 223)"] ::selection,.dv-card .artbody ::selection,.dv-card .fcard ::selection,.dv-card .msheet ::selection,
.dv-card .ddp-paper ::selection,.dv-card .ddp-paper::selection,.dv-card .tgv::selection,.dv-card .tgv ::selection{background:#FF511A;color:#FDFAF6}
.dv-card [style*="background: rgb(255, 81, 26)"] ::selection,.dv-card [style*="background: rgb(255, 81, 26)"]::selection,
.dv-card [style*="background: rgb(216, 67, 15)"] ::selection,.dv-card [style*="background: rgb(216, 67, 15)"]::selection,
.dv-card .htick ::selection,.dv-card .btns::selection,.dv-card .ball::selection,.dv-card .gball::selection,.dv-card .gball ::selection,
.dv-card .btnh::selection,.dv-card .btnh ::selection,.dv-card .kbdg::selection,.dv-card .kbdg ::selection,.dv-card .tfx::selection,.dv-card .tfx ::selection,
.dv-card .skiplink::selection,.dv-card .skiplink ::selection{background:#191613;color:#FDFAF6}
.dv-card img::selection,.dv-card svg::selection,.dv-card svg *::selection{background:rgba(255,81,26,.35)}
a{color:#FF511A}a:hover{color:#FF511A}
.dv-turn{padding:clamp(12px,3.2vw,40px) clamp(8px,3.6vw,44px) clamp(12px,2.6vw,32px);scroll-margin-top:16px;box-sizing:border-box}
.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 20px}
.dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#191613;color:#fff;border-radius:4px;text-decoration:none}
.dv-tname{font:600 13px/1.2 'Golos Text',sans-serif;color:#191613}
.dv-opts{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.dv-opt{flex:none;display:flex;flex-direction:column;gap:9px;scroll-margin-top:16px}
.dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:rgba(25,22,19,.76);color:#191613;border-radius:5px;text-decoration:none}
.dv-olabel{display:flex;align-items:baseline;gap:8px;font:400 12px/1.3 'Golos Text',sans-serif;color:rgba(25,22,19,.76)}
.dv-card{max-width:100%;background:#FDFAF6;border:1px solid rgba(25,22,19,.5);border-radius:8px;box-shadow:0 2px 10px rgba(25,22,19,.76);overflow:hidden}
.dv-opt:target .dv-oid{background:#D8430F;color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.tfr{position:relative}
/* Панель складається по вертикалі, тож overflow:hidden обов'язковий — але він ріже
   й по горизонталі. Кільце CTA у панелі має пунктирну обводку, що виступає ~6px за
   свій блок, і саме її зрізало на 6px. Загальний відступ вмісту лишається 24px,
   але 8px із них тепер ПАДІНГ усередині блока клипу, а не поле зовні: обводка має
   куди вийти, а розкладка не зсувається ні на піксель. */
.tfr .tfd{max-height:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-height .5s ease,opacity .35s ease,visibility .5s;margin:0 16px;padding:0 8px}
.tf7.tfo .tfd{max-height:520px;opacity:1;visibility:visible}
/* РЯДОК КОШТОРИСУ виходить за поле секції, щоб рамка читалась на всю ширину, а на
   його кутах стоять марки обрізу — ще на 7px далі. Виліт був константою −24px під
   поле 24px, тож марки лягали рівно на край артборда й зрізались: саме це на знімку
   «треба відступ від країв екрану».

   Виліт знято ЗОВСІМ. Виводити його з --gxpad не вийшло: поле секції нижче 1024
   задане літералом (padding:26px 14px у посторінкових правилах), а --gxpad у цій
   точці дерева дорівнює 22px — два числа розходяться, і марки знову виїжджали.
   Без виліту рядок стоїть у полі секції, марки сидять усередині, і на кожній
   ширині між рамкою та краєм екрана є відступ — те, що й просили. */
.tfr{margin-left:0!important;margin-right:0!important}
.tfr .tfh{opacity:0;transition:opacity .25s}
.tf7.tfo .tfh{opacity:1}
.tf7{transition:background .3s,border-color .3s;cursor:pointer}
.tf7:hover:not(.tfo){background:rgba(255,81,26,.05);border-top-color:rgba(255,81,26,.22)!important;border-bottom-color:rgba(255,81,26,.22)!important}
.tf7:hover:not(.tfo)+.tf7{border-top-color:rgba(255,81,26,.22)!important}
.tf7.tfo{outline:1px solid rgba(255,81,26,.55);outline-offset:5px;background:rgba(255,81,26,.14);border-top-color:transparent!important;border-bottom-color:transparent!important}
.tf7.tfo+.tf7{border-top-color:transparent!important}
.tfr .tfx{transition:transform .3s,background .3s}
.tf7.tfo .tfx{transform:rotate(45deg);background:#FF511A;border-color:#FF511A;color:#fff}
.dv-card :where(a,button):focus-visible{outline:2px solid #FDFAF6;outline-offset:3px}
:where(button.btnp){background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.tfhd{display:block;width:100%;box-sizing:border-box;background:none;border:none;font:inherit;color:inherit;text-align:left;padding:20px 24px;cursor:pointer}
.tpl{position:relative;display:inline-flex;align-items:center;border:1px solid rgba(253,250,246,.32);padding:14px 20px;font:700 clamp(13px,1.111cqw,17px)/1 'Onest',sans-serif;color:rgba(253,250,246,.9);white-space:nowrap;transition:background .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1),border-color .18s cubic-bezier(.2,.7,.2,1),transform .18s cubic-bezier(.2,.7,.2,1)}
.tpl .ck{position:absolute;width:6px;height:6px;transition:border-color .18s cubic-bezier(.2,.7,.2,1)}
.tpl .ck.a{left:-1px;top:-1px;border-left:1px solid rgba(253,250,246,.55);border-top:1px solid rgba(253,250,246,.55)}
.tpl .ck.b{right:-1px;bottom:-1px;border-right:1px solid rgba(253,250,246,.55);border-bottom:1px solid rgba(253,250,246,.55)}
.tpl:hover{background:#FF511A;border-color:#FF511A;color:#191613;transform:translateY(-2px)}
.tpl:hover .ck{border-color:#fff}
.stkg{display:flex;flex-direction:column;gap:14px;margin:16px 0 0;padding-left:42px}
.stkr{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.stkl{flex:none;width:110px;font:400 clamp(10px,.694cqw,12px)/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:rgba(253,250,246,.55)}
.stkp{display:flex;flex-wrap:wrap;gap:10px}
@media (prefers-reduced-motion:reduce){.tpl,.tpl .ck{transition:none;transform:none}}
:where(button.btns){border:none;cursor:pointer;font:inherit}
.btnh,.lnk,.hnav,.flk,.soc,.btns{transition:color .18s cubic-bezier(.2,.7,.2,1),background .18s cubic-bezier(.2,.7,.2,1),border-color .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1),transform .18s cubic-bezier(.2,.7,.2,1)}
/* СТАНИ ЗАЛИТОЇ КНОПКИ. Задум специфікації: при наведенні підпис стає БІЛИМ разом
   із кільцем і стрілкою. Оригінальні заливки його не витримували — біле на #FF6B2E
   дає 2.84 — тож наведення тепер ТЕМНИТЬ помаранчевий, а не світлить:
     спокій   #FF511A + #191613 = 5.53
     наведення #CE3E0B + білий  = 4.86
     натиск   #B33200 + білий  = 6.23
   Прогресія односпрямована: кожен крок глибший і контрастніший. */
.btnh:hover{background:#CE3E0B!important;color:#fff!important}
.btnh:active{background:#B33200!important;color:#fff!important;transform:translateY(1px)}
.cta6{position:relative;padding-right:14px;cursor:pointer}
.cta6 *{cursor:pointer}
.cta6 .pill{position:absolute;left:5px;top:50%;transform:translateY(-50%);height:var(--ball,34px);width:var(--ball,34px);border-radius:99px;background:#FF511A;transition:width .5s cubic-bezier(.3,.9,.3,1),height .3s,background .3s,box-shadow .3s;z-index:0}
.cta6 .ring{z-index:1;flex:none;transition:transform .5s cubic-bezier(.3,.9,.3,1)}
.cta6 .ring svg circle{transition:stroke .35s}
.cta6 .ball{background:transparent!important}
.cta6 .arr{display:inline-block;transition:transform .5s cubic-bezier(.3,.9,.3,1)}
.cta6 .word{position:relative;z-index:1;transition:color .35s,border-color .35s,transform .5s cubic-bezier(.3,.9,.3,1)}
/* Ховер НЕ темнішає: пігулка росте, лишаючись #FF511A — рішення студії; активний стан темнішим лишається */
.cta6:hover .pill{width:calc(100% - 10px)}
/* --shift і --wshift ОБЧИСЛЮЄ логіка з фактичної геометрії кнопки: пігулка при
   наведенні займає [pillL, W−pillL], кільце сідає правим краєм на правий край
   пігулки, слово стає посередині вільної зони, що лишилась. Обидва враховують
   довжину підпису, тому не залежать від неї. Зашитих 94px і −34px більше немає.
   Запасне значення — НУЛЬ: без логіки кнопка стоїть у спокої завершеною, а не
   з кільцем повз край. У CSS це не виводиться: container-type:inline-size зробив
   би ширину незалежною від вмісту й склав flex-елемент до падінгів. */
.cta6:hover .ring{transform:translateX(var(--shift,0px)) scale(.62)}
.cta6:hover .ring svg circle{stroke:#FDFAF6}
.cta6:hover .arr{transform:rotate(-45deg) scale(1.3)}
.cta6:hover .word{transform:translateX(var(--wshift,0px));color:#fff!important;border-color:#fff!important}
.cta6:active .pill{background:#201C17;box-shadow:inset 0 0 0 1px rgba(253,250,246,.55)}
.cta6:active .ring svg circle{stroke:#FDFAF6}
.cta6:active .ball{background:#FF511A!important}
.cta6:active .word{color:#FDFAF6!important;border-color:#FDFAF6!important}
.cta6:active .arr{color:#fff!important}
.cta6:has(:focus-visible){outline:2px solid #FDFAF6;outline-offset:3px;border-radius:99px}
.dv-card .cta6:has(:focus-visible) :focus-visible{outline:none}
a[href^="tel:"]:not(.crow),a[href^="mailto:"]:not(.crow){border-bottom:1px solid rgba(253,250,246,.28);padding-bottom:2px;transition:color .2s,border-color .2s}
a[href^="tel:"]:hover:not(.crow),a[href^="mailto:"]:hover:not(.crow),a[href^="tel:"]:active:not(.crow),a[href^="mailto:"]:active:not(.crow){color:#FF511A!important;border-color:#FF511A!important}
.mside a[href^="tel:"],.mside a[href^="mailto:"]{border-bottom-color:rgba(25,22,19,.3)}
.lnk:hover{color:#FF511A!important;border-color:#FF511A!important}
.lnk:active{color:#FF511A!important;border-color:#FF511A!important}
.hnav:hover{color:#FDFAF6!important}
.hnav:active{color:#FF813A!important}
.flk:hover{color:#FDFAF6!important}
.flk:active{color:#FF813A!important}
.soc:hover{border-color:#FF813A!important;color:#FF813A!important}
.soc:active{background:#FF511A;border-color:#FF511A!important;color:#191613!important}
.btns:hover{background:#CE3E0B!important;color:#fff!important}
.btns:active{background:#B33200!important;color:#fff!important;transform:translateY(1px)}
.tf7:active:not(.tfo){background:rgba(255,81,26,.10)!important}
@media (prefers-reduced-motion:reduce){.btnh,.lnk,.hnav,.flk,.soc,.btns,.cta6 .pill,.cta6 .ring,.cta6 .arr,.cta6 .word{transition:none}}
.fq{border-top:1px solid rgba(253,250,246,.15)}
.fq.fqlast{border-bottom:1px solid rgba(253,250,246,.15)}
.fqh{display:flex;align-items:center;justify-content:space-between;gap:32px;width:100%;box-sizing:border-box;background:none;border:none;color:inherit;text-align:left;padding:26px 4px 26px 0;cursor:pointer;font:600 clamp(15.36px,1.25cqw,20px)/1.35 'Onest',sans-serif}
.fq.fqo .fqh{padding-bottom:8px}
.fqh,.fqp p{transition:padding .3s ease}
.fqm{flex:none;width:22px;text-align:center;font:300 clamp(19px,1.667cqw,26px)/1 'Onest',sans-serif;color:rgba(253,250,246,.5);transition:transform .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1)}
.fqh:hover .fqm{color:#FF813A}
.fq.fqo .fqm{transform:rotate(45deg);color:#FF813A}
.fqp{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .46s cubic-bezier(.22,.75,.2,1),opacity .34s ease,visibility .46s}
.fqi{min-height:0;overflow:hidden}
.fq.fqo .fqp{grid-template-rows:1fr;opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.fqm,.fqp{transition:none}}
.svc .svcc{transition:color .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.svc:hover .svcc{color:rgba(255,81,26,.30)!important;transform:translate(-10px,-10px)}
.svc .svcn{transition:color .3s,-webkit-text-stroke-color .3s}
.svc:hover .svcn{color:#FF511A!important;-webkit-text-stroke-color:#FF511A!important}
.svc .svct{transition:transform .4s ease}
.svc:hover .svct{transform:translateX(6px)}
.svc:active .svcn{color:#D8430F!important;-webkit-text-stroke-color:#D8430F!important}
.dv-card a.svc:focus-visible{outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.svc .svcc,.svc .svcn,.svc .svct{transition:none}}
.csel{position:relative;margin-bottom:28px}
.cselb{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;background:none;border:none;border-bottom:1px solid rgba(25,22,19,.5);font:500 clamp(14px,1.042cqw,16px)/1.4 'Onest',sans-serif;color:#191613;padding:2px 0 10px;cursor:pointer;text-align:left;border-radius:0}
.cselv.ph{color:rgba(25,22,19,.76)}
.cselc{flex:none;width:8px;height:8px;box-sizing:border-box;border-right:1.5px solid rgba(25,22,19,.6);border-bottom:1.5px solid rgba(25,22,19,.6);transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.csel.o .cselc{transform:rotate(225deg) translate(-3px,-3px)}
.csel.o .cselb{border-bottom-color:#FF511A;box-shadow:0 1px 0 #FF511A}
.cselp{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;background:#FDFAF6;border:1px solid rgba(25,22,19,.5);border-radius:4px;box-shadow:0 18px 44px rgba(25,22,19,.76);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:opacity .18s cubic-bezier(.2,.7,.2,1),transform .18s cubic-bezier(.2,.7,.2,1),visibility .18s}
.csel.o .cselp{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.cselp [role="option"]{display:block;width:100%;box-sizing:border-box;background:none;border:none;text-align:left;font:500 clamp(13px,.972cqw,15px)/1.2 'Onest',sans-serif;color:#191613;padding:13px 18px;min-height:44px;cursor:pointer;transition:background .18s cubic-bezier(.2,.7,.2,1)}
.cselp [role="option"]:hover{background:rgba(255,81,26,.08)}
.cselp [role="option"][aria-selected="true"]{color:#C63A08;font-weight:600}
@media (prefers-reduced-motion:reduce){.cselc,.cselp,.cselp [role="option"]{transition:none}}
.dv-card :where(input,select,textarea):focus-visible{outline:none}
.dv-card :where(input,select,textarea):focus{border-bottom-color:#FF511A!important;box-shadow:0 1px 0 #FF511A}
.tfr .tfn{transition:color .3s,-webkit-text-stroke-color .3s}
.tfr:hover .tfn,.tfr.tfo .tfn{color:#FF511A!important;-webkit-text-stroke-color:#FF511A!important}
.tfr .tff{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .5s ease .08s}
.tfr:hover .tff,.tfr.tfo .tff{clip-path:inset(0 0 0 0)}
.tfr .tfg{opacity:.75;transition:opacity .3s ease}
.tfr:hover .tfg,.tfr.tfo .tfg{opacity:1}
/* флагманський кейс: кнопка йде одразу під текстом, не притиснута до низу вікна —
   рішення студії: авто-зазор посередині колонки відривав кнопку від її тексту гнеться */
.cmora{justify-content:flex-start!important}
.cgr{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0 32px}
/* ПРОЦЕС ×5 — СХОДИНКИ ВІД ШИРИНИ КОЛОНКИ. П'ять колонок живуть, доки колонка
   ≥ ~150px (назва етапу 16px у два рядки без розриву слова) — це до 900. Нижче 900
   ілюстрований ряд .imr і шкала .tl9 знімаються, номерні картки йдуть у дві колонки
   з власними ілюстраціями; нижче 560 — одна. Раніше все це стрибало на 1023,
   де колонка ще мала 163px і читалась нормально. */
@container (max-width:899.98px){
.cgr{grid-template-columns:1fr 1fr!important;gap:var(--gy48) 24px!important}
.cstp{--col:0s!important}
.imr{display:none!important}
.tl9{display:none}
/* ЕТАП У СТЕКУ — тією самою будовою, що й «Що ви отримаєте» (.dl-item): велика
   рамка з хендлами на всю ширину колонки → лінійка → «01 Назва» одним рядком →
   опис. Раніше рамка трималась у max-height 120px (пів ширини екрана), а фігури
   всередині мають пікселі (точки 5px, лінії 1px) — збільшена рамка лишала б їх
   дрібними. Тому мініатюра малюється в десктопному розмірі 240×150 і масштабується
   до ширини рамки: tan(atan2(100cqw, 240px)) — безрозмірне відношення довжин. */
.numr .cstp{display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline}
.pmob{display:block!important;grid-column:1/-1}
.pmart{position:relative;container-type:inline-size;aspect-ratio:8/5;border:1px solid rgba(253,250,246,.18);background:rgba(253,250,246,.03)}
.pmart .dl-h{position:absolute;z-index:1;width:7px;height:7px;box-sizing:border-box;background:#FDFAF6;border:1px solid #26211B}
.pmart .cab{position:absolute;inset:0;height:auto;min-height:0;border:none}
@supports (scale:tan(atan2(1px,1px))){
.pmart .cab{right:auto;bottom:auto;width:240px;height:150px;transform-origin:0 0;scale:tan(atan2(100cqw,240px))}
}
.pmrul{display:flex;align-items:center;gap:8px;margin-top:12px}
.pmrul span{width:1px;height:7px;background:rgba(253,250,246,.4)}
.pmrul span:nth-child(2){flex:1;width:auto;height:1px}
.numr .pnum{grid-column:1;margin-top:11px!important;font-size:15px;line-height:1;letter-spacing:0;-webkit-text-stroke-width:1.1px}
.numr .pnm{grid-column:2;margin-top:11px;font:800 clamp(16px,1.32cqw,19px)/1.2 'Onest',sans-serif}
.numr .pds{grid-column:1/-1;margin-top:7px;font:400 13px/1.55 'Onest',sans-serif;color:rgba(253,250,246,.62)}
}
@container (max-width:559.98px){
.cgr{grid-template-columns:1fr!important;gap:var(--gy48) 0!important}
}
.cstp{min-width:0;--col:0s}
.cgr .cstp:nth-child(2){--col:.16s}
.cgr .cstp:nth-child(3){--col:.32s}
.cgr .cstp:nth-child(4){--col:.48s}
.cgr .cstp:nth-child(5){--col:.64s}
.cab{position:relative;height:9cqw;min-height:96px;border:1px solid rgba(253,250,246,.32);overflow:hidden}
.cab .ck{position:absolute;width:6px;height:6px}
.cab .ck.a{left:-1px;top:-1px;border-left:1px solid rgba(253,250,246,.55);border-top:1px solid rgba(253,250,246,.55)}
.cab .ck.b{right:-1px;top:-1px;border-right:1px solid rgba(253,250,246,.55);border-top:1px solid rgba(253,250,246,.55)}
.cab .ck.c{left:-1px;bottom:-1px;border-left:1px solid rgba(253,250,246,.55);border-bottom:1px solid rgba(253,250,246,.55)}
.cab .ck.d{right:-1px;bottom:-1px;border-right:1px solid rgba(253,250,246,.55);border-bottom:1px solid rgba(253,250,246,.55)}
.pnum{display:block;margin-top:16px;font:800 clamp(28px,2.5cqw,40px)/0.9 'Onest',sans-serif;letter-spacing:-.04em;-webkit-text-stroke:1.2px rgba(253,250,246,.4);color:transparent}
.pnm{font:800 clamp(14px,1.111cqw,17px)/1.25 'Onest',sans-serif;margin-top:14px}
.pds{margin:10px 0 0;font:400 clamp(11.5px,.868cqw,13.5px)/1.6 'Onest',sans-serif;color:rgba(253,250,246,.75);text-wrap:pretty}
.cab.nb{border:none}
.numr .cstp{border-top:none!important;padding:0!important}
.pmob{display:none}
.tl9{position:relative;height:30px;margin:12px 0 24px}
.tl9 .base{position:absolute;left:0;right:0;top:13px;height:1px;background:linear-gradient(90deg,rgba(214,203,193,.16),rgba(255,81,26,.28))}
.tl9 .colslot{position:absolute;top:0;height:30px}
.tl9 .bar{position:absolute;left:0;top:12px;height:2px;transform-origin:left}
.tl9 .hnd{position:absolute;top:8px;width:9px;height:9px;box-sizing:border-box;background:#FDFAF6;border:1px solid #191613}
.tl9 .dl{position:absolute;top:-12px;left:0;width:1px;height:10px;background:rgba(253,250,246,.16)}
.tl9 .dnum{position:absolute;top:19px;left:0;font:400 clamp(10px,.694cqw,11px)/1 ui-monospace,Menlo,monospace;white-space:nowrap}
.tl9 .pole{position:absolute;top:19px;font:400 clamp(10px,.694cqw,11px)/1 ui-monospace,Menlo,monospace;color:rgba(253,250,246,.32);white-space:nowrap}
.tl9 .pole.r{right:0;color:#FF511A}
@keyframes spin{to{transform:rotate(360deg)}}
.aoff{opacity:0}
.a5r{opacity:0}
.a1fr{box-sizing:border-box}
.ad1{--st:.06s}.ad2{--st:.12s}.ad3{--st:.18s}.ad4{--st:.24s}.ad5{--st:.3s}
.od2{--st:.09s}.od3{--st:.18s}.od4{--st:.27s}.od5{--st:.36s}
@keyframes aOff{0%,22%{opacity:1}48%,100%{opacity:0}}
@keyframes aTgtSq{0%,46%{background:rgba(253,250,246,.3);transform:scale(.55)}64%,100%{background:#FF511A;transform:scale(1)}}
@keyframes aFrIn{0%,62%{opacity:0}80%,100%{opacity:1}}
@keyframes aBar{0%{transform:scaleY(0)}58%,100%{transform:scaleY(1)}}
@keyframes aH{0%,52%{opacity:0}72%,100%{opacity:1}}
@keyframes g3r{0%{opacity:0;transform:scale(.4)}10%,100%{opacity:1;transform:scale(1)}}
@keyframes g3t{0%,8%{transform:scaleY(0)}28%,100%{transform:scaleY(1)}}
@keyframes g3d{0%,26%{transform:scaleX(0)}46%,100%{transform:scaleX(1)}}
@keyframes g3o{0%,44%{transform:scaleY(0)}60%,100%{transform:scaleY(1)}}
@keyframes g3nk{0%,58%{opacity:0;transform:scale(.4)}74%,100%{opacity:1;transform:scale(1)}}
@keyframes g3p{0%,72%{opacity:0}88%,100%{opacity:1}}
@keyframes aPl1{0%{transform:translate(-36%,14%);opacity:0}10%{opacity:1}45%,100%{transform:translate(0,0);opacity:1}}
@keyframes aPl2{0%,14%{transform:translate(38%,-16%);opacity:0}24%{opacity:1}60%,100%{transform:translate(0,0);opacity:1}}
@keyframes aPl3{0%,62%{opacity:0}80%,100%{opacity:1}}
@keyframes aCore{0%{transform:scale(.2);opacity:0}26%,100%{transform:scale(1);opacity:1}}
@keyframes aFd{0%,12%{opacity:0}34%,100%{opacity:1}}
@keyframes aRadar{0%,14%{transform:scale(.6);opacity:0}26%{opacity:.45}54%{transform:scale(1.25);opacity:0}54.01%{transform:scale(.6);opacity:0}66%{opacity:.45}94%,100%{transform:scale(1.25);opacity:0}}
@keyframes aChkL{0%,58%{transform:scaleX(0)}82%,100%{transform:scaleX(1)}}
@keyframes aChkM{0%,80%{opacity:0;transform:scale(.4)}96%,100%{opacity:1;transform:scale(1)}}
.pl .aoff,.pl .a1t,.pl .a1fr,.pl .a2,.pl .a2h,.pl .g3r,.pl .g3t,.pl .g3d,.pl .g3o,.pl .g3n,.pl .g3p,
.pl .a4a,.pl .a4b,.pl .a4c,.pl .a5c,.pl .a5s,.pl .a5l,.pl .a5r,.pl .pchkl,.pl .pchkm{animation-duration:2.4s;animation-fill-mode:both;animation-iteration-count:1;animation-delay:calc(var(--col,0s) + var(--st,0s))}
.pl .cstp.rp *{animation:none!important}
.cstp.rnow{--col:0s!important}
.pl .aoff{animation-name:aOff;animation-timing-function:ease}
.pl .a1t{animation-name:aTgtSq;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.pl .a1fr{animation-name:aFrIn;animation-timing-function:ease}
.pl .a2{transform-origin:bottom;animation-name:aBar;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.pl .a2h{animation-name:aH;animation-timing-function:ease}
.pl .g3r{animation-name:g3r;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.pl .g3t{transform-origin:top;animation-name:g3t;animation-timing-function:ease}
.pl .g3d{transform-origin:left;animation-name:g3d;animation-timing-function:ease}
.pl .g3o{transform-origin:top;animation-name:g3o;animation-timing-function:ease}
.pl .g3n{animation-name:g3nk;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.pl .g3p{animation-name:g3p;animation-timing-function:ease}
.pl .a4a{animation-name:aPl1;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.pl .a4b{animation-name:aPl2;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.pl .a4c{animation-name:aPl3;animation-timing-function:ease}
.pl .a5c{transform-box:fill-box;transform-origin:center;animation-name:aCore;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.pl .a5s{transform-box:fill-box;transform-origin:center;animation-name:spin,aFd;animation-timing-function:cubic-bezier(.2,.7,.2,1),ease}
.pl .a5l{animation-name:aFd;animation-timing-function:ease}
.pl .a5r{transform-box:fill-box;transform-origin:center;animation-name:aRadar;animation-timing-function:linear}
.pl .pchkl{animation-name:aChkL;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.pl .pchkm{animation-name:aChkM;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
@media (prefers-reduced-motion:reduce){.pl *{animation:none!important}}
.ls{stroke-dasharray:200;stroke-dashoffset:0}
/* КОНТЕЙНЕР КРЕСЛЕННЯ ЗНАКА. Саме креслення ширше за знак на 5.714% — це виноси
   обміру, вони мусять кудись іти. Контейнер на 100% (правило є на всіх 16 сторінках,
   кожне зі своїм #id) виводив виноси за поле футера: 15px на 768, 9px на 560. Місце
   під виноси тримає max-width, а не width — інакше довелось би переписувати 16 правил
   із вищою специфічністю. 100/1.05714 = 94.596%. */
.dv-card .dimset{max-width:94.596%}
.dimsig .ln{transform-box:fill-box;transform-origin:left center;transition:transform .55s ease .05s}
.dimsig .lnv{transform-box:fill-box;transform-origin:center top;transition:transform .55s ease .05s}
.dimsig .lb{transition:opacity .4s ease .5s}
.dimsig.armed .ln{transform:scaleX(0)}
.dimsig.armed .lnv{transform:scaleY(0)}
.dimsig.armed .lb{opacity:0}
.dimsig.armed.go .ln,.dimsig.armed.go .lnv{transform:none}
.dimsig.armed.go .lb{opacity:1}
.dimsig.armed.go .dm2 .ln,.dimsig.armed.go .dm2 .lnv{transition-delay:.28s}
.dimsig.armed.go .dm2 .lb{transition-delay:.72s}
.dimsig.armed.go .dm3 .ln,.dimsig.armed.go .dm3 .lnv{transition-delay:.52s}
.dimsig.armed.go .dm3 .lb{transition-delay:.95s}
.dv-card{container-type:inline-size;--gxpad:max(20px, min(max(40px + (100cqw - 1024px)*0.05769, 64px + (100cqw - 1440px)*0.2), 96px), (100cqw - 1600px)/2);--gy44:clamp(24.2px, 12.02px + 3.124cqw, 44px);--gy48:clamp(26.4px, 13.11px + 3.408cqw, 48px);--gy52:clamp(28.6px, 14.2px + 3.692cqw, 52px);--gy56:clamp(30.8px, 15.29px + 3.976cqw, 56px);--gy64:clamp(35.2px, 17.48px + 4.544cqw, 64px);--gy72:clamp(39.6px, 19.66px + 5.112cqw, 72px);--gy80:clamp(44px, 21.85px + 5.68cqw, 80px);--gy88:clamp(48.4px, 24.03px + 6.248cqw, 88px)}
.skiplink{position:absolute;left:14px;top:14px;z-index:9;background:#FF511A;color:#191613;font:600 12px/1 ui-monospace,Menlo,monospace;padding:14px 18px;border-radius:2px;text-decoration:none;clip-path:inset(50%)}
.skiplink:focus-visible{clip-path:none}
.tgv{position:relative;display:none;align-items:center;gap:7px;height:44px;padding:0 12px;border-radius:2px;cursor:pointer;font:500 12px/1 ui-monospace,Menlo,monospace;background:#FDFAF6;color:#191613;border:1px solid #FDFAF6;transition:background .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1),border-color .18s cubic-bezier(.2,.7,.2,1),box-shadow .32s cubic-bezier(.25,.8,.3,1),transform .32s cubic-bezier(.25,.8,.3,1)}
.tgv .fold{position:absolute;top:-1px;right:-1px;width:0;height:0;border-style:solid;border-width:0 16px 16px 0;border-color:transparent #191613 transparent transparent;transform:scale(.5625);transform-origin:100% 0;transition:transform .32s cubic-bezier(.25,.8,.3,1),opacity .32s cubic-bezier(.25,.8,.3,1)}
.tgv .gl{display:inline-block;font:300 17px/1 'Onest',sans-serif;color:rgba(25,22,19,.76);transition:transform .32s cubic-bezier(.25,.8,.3,1),color .18s cubic-bezier(.2,.7,.2,1)}
.tgv:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.tgv:hover .fold{transform:scale(.8125)}
.tgv:active{transform:translateY(1px);box-shadow:none;background:#EFE8DF;border-color:#EFE8DF}
.tgv:active .fold{transform:scale(1)}
.tgv.on{background:#26211B;color:#FDFAF6;border-color:rgba(253,250,246,.35)}
.tgv.on .fold{opacity:0;transform:scale(.5625)}
.tgv.on .gl{transform:rotate(45deg);color:#FDFAF6}
.tgv.on:hover{transform:none;box-shadow:none;border-color:rgba(253,250,246,.65)}
.tgv.on:hover .gl{color:#FF813A}
.tgv.on:active{transform:translateY(1px);background:#201C17;border-color:rgba(253,250,246,.55)}
@keyframes sheetIn{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.msheet{animation:sheetIn .32s cubic-bezier(.25,.8,.3,1)}
.mrow{transition:color .18s cubic-bezier(.2,.7,.2,1)}
.mrow:hover{color:#FF511A!important}
.mrow:active{color:#FF511A!important}
.msub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.25,.8,.3,1)}
.msub.oo{grid-template-rows:1fr}
/* ЗГОРНУТИЙ ПІДРОЗДІЛ мусить бути недосяжним, а не лише невидимим. grid-template-rows:0fr
   давав висоту 0, але шість посилань усередині лишались у порядку табуляції: з клавіатури
   фокус їхав у невидиме, і зчитувач їх оголошував. Спадне меню шапки цю саму задачу вже
   вирішило через visibility:hidden (.ddp) — аркуш лишився єдиним місцем, де правило
   не застосували. Затримка 0s .32s знімає видимість після згортання, щоб не рвати рух. */
.msub>div{overflow:hidden;min-height:0;visibility:hidden;transition-property:visibility;transition-duration:0s;transition-delay:.32s}
.msub.oo>div{visibility:visible;transition-delay:0s}
.mplus{transition:transform .32s cubic-bezier(.25,.8,.3,1),color .18s cubic-bezier(.2,.7,.2,1);background:none;border:none;cursor:pointer;width:44px;height:44px;font:300 clamp(22px,1.806cqw,28px)/1 'Onest',sans-serif;color:rgba(25,22,19,.76)}
.mplus.oo{transform:rotate(45deg);color:#FF511A}
.mlang{transition:background .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1)}
.mtitle{font:800 clamp(21px,1.806cqw,28px)/1 'Onest',sans-serif;letter-spacing:-.02em;min-height:56px}
.mgrid{display:grid;grid-template-columns:1fr;gap:0;padding:10px 24px 4px}
.mside{display:none}
@container (min-width:700px){.msheet-wrap{display:none}}
/* ПЕРЕМИКАЧ ШАПКИ. Це правило стояло на кожній із шістнадцяти сторінок окремо, як
   #t26 .hd-d, #t27 .hd-d, #t35 .hd-d … — посторінкове судження про спільний компонент,
   до того ж двічі під одним і тим самим #t30. Тепер воно тут, один раз, за роллю. */
/* ДЕ ШАПКА СПРАВДІ ПЕРЕСТАЄ ВМІЩАТИСЯ. Обмір: знак + навігація + мова + кнопка
   потребують ~625px. Згортання на 1024 залишало 319px вільного місця — половину
   ширини — і виглядало стрибком у мобільну там, де десктоп ще спокійно живе.
   Тепер три кроки, виведені з обміру:
     ≥1024   — як є: gap 24, кегль до 14px
     700–1023 — та сама навігація, gap 16: потрібно ~590, доступно від 660
     <700    — тумблер «зміст» і аркуш. Формально стиснута шапка влазить і на 660,
               але там знак і «головна» вже сходяться впритул — межа стоїть на
               виміряному мінімумі плюс один крок відступу, а не на самому мінімумі */
@container (max-width:1023.98px){.dv-card .hd-d{gap:16px!important}}
@container (max-width:699.98px){.dv-card .hd-d{display:none!important}.dv-card .tgv{display:flex}}
/* РЯДОК КОШТОРИСУ НА ВУЗЬКОМУ. Рядок стає стеком: (1) номер і назва, (2) шкала
   терміну, (3) ціна. Тумблер «+/×» стояв у третьому рядку разом із ціною, тобто
   по НИЖНІЙ лінії — на знімку видно, що він висить під назвою. Керування рядком
   належить його заголовку, а не ціні, тож тумблер іде на ВЕРХНЮ лінію, поруч із
   номером і назвою; ціна після цього забирає всю ширину. Правило стояло
   дванадцять разів як #tNN .krow .tfx — тепер один раз, за роллю.

   Чому перший трек має ЯВНУ висоту. У рядка з позначкою «обирають найчастіше»
   позначка переноситься під назву всередині .kc1, і блок .kc1 стає 54px замість
   20px. align-self:center центрує тумблер у БЛОЦІ, тож на таких рядках він сідав
   на 17px нижче за назву — тобто рівно між назвою та позначкою. Тому перший трек
   дорівнює рядку набору назви (той самий clamp, що задає її кегль, × міжрядковий
   1.1), а .kc1 займає два треки: назва лягає в перший, позначка — у другий.
   Тумблер центрується в першому й потрапляє на назву на будь-якому рядку,
   з позначкою чи без. Магічних чисел немає: висота виведена з типографіки. */
.krow{--ktitle:clamp(18.49px,1.8056cqw,28.89px)}
/* ДЕ РЯДОК КОШТОРИСУ СПРАВДІ ПЕРЕСТАЄ ВМІЩАТИСЯ. Обмір найширшого рядка
   («Корпоративний сайт» + позначка + шкала 156 + ціна 130 + тумблер + 3 гапи):
   808px. На 1024 доступно 894 — рядок лежав у чотири колонки із запасом 86px,
   і стек на 1023 був стрибком без причини. Стек вмикається нижче 840, де
   доступно ~760 і рядок справді не влазить. Між 840 і 1024 — проміжна сходинка:
   гап 24 замість 32, і все на місці.
   Нижня межа 840 обов'язкова: :has() дає правилам нижче вищу специфічність,
   і без неї вони перебивали стек — шкала й ціна рядка з позначкою лягали на назву. */
@container (min-width:840px) and (max-width:1023.98px){
.krow{gap:0 24px!important}
/* Позначка йде під назву (правило нижче), і .kc1 стає двострічковим. Але .krow має
   інлайновий align-items:center, тож тумблер, ціна і шкала центрувались у ВСЬОМУ
   блоці назва+позначка й сідали на 17px нижче за назву — та сама хвороба, що була
   нижче 840. Лікується так само: перший трек рядка дорівнює рядку набору назви,
   .kc1 займає два треки й тримається верху, а решта стоїть у першому треку й
   центрується в ньому. Число одне — той самий clamp, що задає кегль назви. */
.krow:has(.kbdg){grid-template-rows:calc(var(--ktitle) * 1.1) auto!important}
.krow:has(.kbdg) .kc1{grid-row:1/3;align-self:start}
.krow:has(.kbdg) .kc2,.krow:has(.kbdg) .kc3,.krow:has(.kbdg) .tfx{grid-row:1}
}
@container (max-width:839.98px){
.krow{grid-template-columns:minmax(0,1fr) 44px!important;gap:16px 12px!important}
.krow .kc1{flex-wrap:wrap;row-gap:8px}
/* justify-content:flex-start — у рядках без шкали (hide_scale) термін інлайном
   притиснутий праворуч; у стеку він висів самотнім підписом біля правого краю */
.krow .kc2{grid-column:1/-1;width:100%;justify-content:flex-start!important}
.krow .ksw{width:calc((100% - 88px)*var(--kf))}
.krow .ksl{flex:1 1 auto;width:auto!important}
.krow .kc3{text-align:left!important;font-size:20px!important}
.tfd p{padding-left:0!important}
.tfd>div{padding-left:0!important}
.krow{grid-template-rows:calc(var(--ktitle) * 1.1) auto auto auto!important}
.krow .kc1{grid-column:1;grid-row:1/3;align-self:start}
.krow .kc2{grid-row:3}
.krow .kc3{grid-column:1/-1;grid-row:4;align-self:center}
.krow .tfx{grid-column:2;grid-row:1;justify-self:end;align-self:center}
}
/* На 320–360 назва не влазила поруч із номером і йшла на власний рядок — тумблер
   лишався на верхній лінії, але в парі з самотнім «02». Причина не в min-width, а
   в flex-basis: перенос у flex рахується за ПРЕФЕРОВАНОЮ шириною елемента (~200px
   для назви), а не за тим, до чого він міг би стиснутись. Латати flex тут марно:
   базис 0 стискав назву до 3px (позначка flex:none місця не віддає), а базис 100%
   на позначці робив із неї помаранчеву смугу на всю ширину.
   Тому на цих ширинах .kc1 стає СІТКОЮ, де структура задана прямо: номер і назва
   в першому рядку (назва в minmax(0,1fr), тобто зі своїм обрізанням), позначка —
   у другому, власним розміром. Нічого не тягнеться й не стискається силою. */
/* Позначка «обирають найчастіше» на середніх ширинах (840–1024) тиснула назву:
   «Корпоративни…» обрізалась, а позначка лишалась на повній ширині. Назва важливіша
   за позначку, тож позначка переноситься під назву вже тут — тією самою сіткою,
   що й на вузьких. */
@container (max-width:1023.98px){
.krow .kc1:has(.kbdg){display:grid!important;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:16px;row-gap:8px}
.krow .kc1:has(.kbdg)>span:nth-child(2){min-width:0!important}
.krow .kc1 .kbdg{grid-column:1/-1;justify-self:start}
}
/* Діапазон — увесь стек (<840), а не лише <390: на 390–839 довгі назви
   («Дизайн застосунку до 10 екранів») різались трикрапкою до «Дизайн застосунку …». */
@container (max-width:839.98px){
.krow .kc1{display:grid!important;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:16px;row-gap:8px}
.krow .kc1>span:nth-child(2){min-width:0!important}
.krow .kbdg{grid-column:1/-1;justify-self:start}
/* позначка тепер має власний рядок, тож назві є куди перенестись — обрізання
   трьома точками (інлайнове) більше не потрібне */
.krow .kc1>span:nth-child(2){white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
}
@media (prefers-reduced-motion:reduce){.tgv,.tgv .fold,.tgv .gl,.mrow,.msub,.mplus,.mlang{transition:none}.msheet{animation:none}}
.tfq{opacity:.35}
.svc .svci{transition:color .3s}
.svc:hover .svci{color:#FF511A!important}
.dv-card .hvB-sheet :where(a,button):focus-visible,.dv-card .fcard :where(a,button,input,select,textarea):focus-visible{outline:2px solid #191613;outline-offset:3px}
/* Спадне меню шапки (1024+): пункт розділу + тумблер + аркуш-панель.
   Нижче 1024 приховується разом із .hd-d — там працює тумблер «зміст» і меню-аркуш */
.ddw{position:relative;display:flex;align-items:center;gap:6px}
/* ціль тумблера ширша за сам знак: 30×30 при глифі 15px, від'ємні поля тримають ритм бару */
.ddt{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:-6px -6px -6px 0;padding:0;background:none;border:none;cursor:pointer;color:rgba(253,250,246,.6);font:300 15px/1 'Onest',sans-serif;transition:color .18s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1)}
.ddw:hover .ddt,.ddt:hover{color:#FF813A}
.ddw.o .ddt{color:#FF813A;transform:rotate(45deg)}
/* opacity і visibility перемикаються миттєво, поза списком переходів: інакше в придушених
   кадрах панель лишається невидимою й нефокусованою. Анімується тільки зсув на 6px */
.ddp{position:absolute;top:calc(100% + 14px);z-index:9;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:transform .26s cubic-bezier(.2,.75,.2,1)}
.ddw.o .ddp{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* місток через 14px розриву між пунктом і панеллю: без нього курсор виходить з обгортки на півдорозі */
.ddp::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.ddrow{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;box-sizing:border-box;text-decoration:none;transition:background .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1),padding .2s cubic-bezier(.2,.7,.2,1)}
/* A — аркуш: ті самі рядки, що в мобільному меню */
.ddp-paper{background:#FDFAF6;color:#191613;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.ddp-paper .ddrow{color:#191613;padding:0 22px}
.ddp-paper .ddrow+.ddrow{border-top:1px solid rgba(25,22,19,.5)}
.ddp-paper .ddrow:hover{background:rgba(255,81,26,.08);padding-left:28px}
.ddp-paper .ddrow:hover .ddnm{color:#FF511A}
.ddp-paper .ddrow:focus-visible{outline:2px solid #191613;outline-offset:-3px}
/* ціновий якір і код мови — зміст, не декор: .5 на папері давало 3.39:1, .7 дає ≈5.3:1 */
.ddp-paper .ddpr{color:rgba(25,22,19,.76)}
/* мова: той самий механізм, але тумблером є сам підпис — хаба в мови немає */
.ddtl{width:auto;min-width:30px;height:30px;margin:-6px -4px -6px 0;padding:0 6px;gap:7px;font:500 12px/1 ui-monospace,Menlo,monospace}
.ddw.o .ddtl{transform:none;color:#FF813A}
.ddtl .ddc{display:inline-block;font:300 14px/1 'Onest',sans-serif;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.ddw.o .ddtl .ddc{transform:rotate(45deg)}
button.ddrow{width:100%;box-sizing:border-box;background:none;border:none;cursor:pointer;font:inherit;text-align:left}
.ddp-lang{width:186px;left:auto;right:-6px}
.ddcur{position:relative}
.ddcur .ddnm{font-weight:700}
@media (prefers-reduced-motion:reduce){.ddp,.ddt,.ddrow{transition:none!important}}
.ddnote{display:none}
/* Тонкі рядки з розділювачами (принципи, фактори ціни, перелік складників): назва ліворуч,
   уточнення праворуч. Правило згортання живе в спільному шарі, а не в режимному блоці
   сторінки — саме тому воно й пропало, коли донорську секцію 04 переробили на артборди */
/* РЯДОК РОЛІ (.grow): назва 1fr + опис 1.6fr живуть у ряд, доки назва ≥ ~200 (двослівна
   роль 18px без розриву) — до 640. Раніше стек на 1023, де назва мала 389px. */
@container (max-width:639.98px){
.grow{grid-template-columns:1fr!important;gap:8px!important}
}
/* ПЛОЩА ДОТИКУ. Слово лишається 19px і читається як зараз — росте лише ціль:
   44px там, де ймовірний дотик (<1024), і 24px там, де вказівник гарантований (мінімум WCAG).
   Розширення накладкою ::after, тому композиція семи сторінок не рухається на жоден піксель.
   Змінна живе на дітях .dv-card, бо сама картка — контейнер, і @container її не бачить */
.dv-card>div{--hit:24px}
@container (max-width:1023.98px){.dv-card>div{--hit:44px}}
.lnk,.cta6 .word,.hnav,.flk,.ddt,.skiplink,header a[aria-label],a[href^="tel:"],a[href^="mailto:"]{position:relative}
.lnk::after,.cta6 .word::after,.hnav::after,.flk::after,.ddt::after,.skiplink::after,header a[aria-label]::after,a[href^="tel:"]::after,a[href^="mailto:"]::after{content:'';position:absolute;left:0;right:0;top:50%;height:var(--hit,24px);transform:translateY(-50%)}
/* Керовані елементи, де накладка не потрібна — досить власної висоти */
@container (max-width:1023.98px){
.btnh{min-height:44px!important}
.cselb{min-height:44px;padding-bottom:12px}
.soc{width:44px!important;height:44px!important}
/* сторінка перемикає .socg у flex, тож трек нічого не вирішує: іконка тримає власний
   базис 44px і не стискається, а рядок переноситься, коли трьох у ряд уже не вміщає */
.socg{grid-template-columns:repeat(3,44px)!important;flex-wrap:wrap!important}
.socg .soc{flex:0 0 44px!important;min-width:44px!important;box-sizing:border-box!important}
@container (max-width:279.98px){.socg{gap:8px!important}}
/* стовпчики футера: крок рядка 31px не вміщає цілі 44px без перекриття сусідів,
   тому рядок сам стає 44px — розмір тексту не змінюється */
.fnav .flk{min-height:44px;display:flex;align-items:center}
.fnav div:has(>.flk){gap:0!important}
}
/* Секція заявки: три брати — заголовок, картка, контакти. Порядок у DOM = порядок на екрані
   на кожній ширині, і Tab доходить до форми раніше за довідковий блок. Ніякого order/grid-order:
   візуальне переставляння розсинхронізувало б фокус із виглядом */
/* ФОРМА + БІК. Картка форми на 42.7% ширини лишається робочою, доки має ≥ ~360px —
   до 840. Раніше стек на 1023, де картка мала 402px. Між 840 і 1024 — сходинка:
   картка бере 48% і внутрішній відступ 32 замість 44. */
@container (max-width:1023.98px){
.fgrid{grid-template-columns:1fr 48%!important;gap:0 5%!important}
.fcard{padding:32px 32px 36px!important}
}
@container (max-width:839.98px){
.fgrid{grid-template-columns:1fr!important;gap:44px!important}
.fcard{grid-column:1!important;padding:32px 24px 36px!important}
.fside{grid-column:1!important;grid-row:2!important}
.fsub{flex-direction:column;align-items:stretch!important;gap:14px!important;margin-top:8px!important}
.fsub .btns{width:100%;min-height:48px}
.fsub>span{max-width:none!important}
.fcard input,.fcard select{height:44px;box-sizing:border-box}
.fcard textarea{min-height:44px;box-sizing:border-box}
.fgrid{grid-template-areas:'h' 'c' 'k'!important}
.fcontacts{margin-top:0!important}
/* Рядок згоди в мікроформі хаба ставав праворуч від кнопки «крок назад», яку сховано через
   visibility (щоб не стрибала верстка між кроками) — вона й далі займає 91px на своєму рядку.
   Обмеження 400px давало рядку згоди вміститись поруч; знімаємо і його, і здатність стискатись */
.ctaact p{flex:0 0 100%!important;max-width:none!important}
}

/* ═══ СТІЛ. ДРІБНИЙ МОНО НЕ НИЖЧЕ .55 ═══
   Поверхонь дві: #191613 і світліша #26211B. На .45 дрібний моно дає 4.22:1 на
   світлішій і 4.38:1 на темнішій — обидві нижче 4.5. .55 проходить на обох із
   запасом. Це та сама помилка, що була на папері, тільки дзеркальна: альфа, взята
   на око, а не заміряна проти справжнього фону. Заміряти проти #26211B — вона
   світліша, тож вона й вирішує.
   ═══ ПАПІР — ТРЕТЯ ПОВЕРХНЯ. НАБІР АЛЬФ ОКРЕМИЙ ВІД СТОЛУ ═══
   Світле по темному при .5 читається; темне по світлому при .5 дає 3.4:1. Тому
   значення зі столу (rgba(253,250,246,…)) НЕ переносяться на папір дзеркально.
   На папері (#FDFAF6, текст rgba(25,22,19,…)):
     дрібний моно-підпис, лічильник кроку, «крок назад» — .74….78 (4.6…5.5:1)
     межа поля, риска обміру, засічка — ≥.5 (3.33:1; .45 дає 2.87 і не проходить)
     доріжка смуги прогресу — ≥.3
   Значення нижче цих на папері не ставити. Так у покрокову форму партнерства
   приїхали альфи CTA хаба (.45/.5/.55/.3) і дали 2.9…3.9:1 — правило зафіксоване,
   щоб наступна паперова форма не почалась із тих самих цифр. */

/* ═══ АКЦЕНТ ЯК ТЕКСТ — РІЗНИЙ ПО ПОВЕРХНЯХ ═══
   стіл  #191613 / #26211B : #FF813A (7.25/6.42) · #FF511A (5.53/4.9)
   папір #FDFAF6           : #C63A08 (5.03) — палітрові #FF511A (3.13) і #FF813A (2.39)
                             не проходять як текст, лише як заливка або лінія (3:1)
   #D8430F як ДРІБНИЙ текст не проходить ніде (4.06 / 3.59 / 4.27 при порозі 4.5).
   Але на ВЕЛИКОМУ тексті — ≥18.66px вагою ≥700 — поріг 3:1, і 4.06 проходить: тож
   контурні номери (.svcn 26px/800, .kn і .sn 22px/800) законно темнішають у натиску,
   і задум «натиск глибший» на них лишається. Дрібний текстовий лінк 14px натиском
   кольору не позначається — тримає колір наведення й подвоює підкреслення. */

/* КАРТКА КЕЙСА «фото-першою»: назва, метадані, результат і кругла кнопка-стрілка живуть
   у накладці над знімком; слово «Дізнатись більше» знято. Накладка з'являється на
   hover/focus-within — рішення студії: тільки на наведення, навіть із порожніми слотами.
   Єдиний виняток — пристрій без ховера (тач), де накладка стоїть відкритою, інакше
   інформація недосяжна. Кнопка — кільце системи: пунктирне коло обертається, кулька
   з білою стрілкою всередині, на ховері картки стрілка повертається в ↗ */
.wkov{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px 76px 16px 16px;background:linear-gradient(180deg,rgba(25,22,19,0) 34%,rgba(25,22,19,.92));opacity:0;transition:opacity .3s}
.wk:hover .wkov,.wk:focus-within .wkov{opacity:1}
div:hover>.wkov,div:focus-within>.wkov{opacity:1}
div:hover>.wkov .garr,div:focus-within>.wkov .garr{transform:rotate(-45deg)}
.wgo-s{position:relative;right:auto;bottom:auto;display:inline-flex;margin-top:18px}
@media (hover:none){.wkov{opacity:1}}
.wgo{position:absolute;right:14px;bottom:14px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.wgo svg{position:absolute;inset:0;animation:spin 14s linear infinite}
.wgo .gball{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#FF511A;transition:background .25s}
.wgo svg circle{transition:stroke .25s}
.wgo:hover .gball,.wgo:focus-visible .gball{background:#FDFAF6}
.wgo:hover .garr,.wgo:focus-visible .garr{color:#FF511A}
.wgo:hover svg circle,.wgo:focus-visible svg circle{stroke:#FDFAF6}
.wgo .garr{display:inline-block;color:#fff;font:600 clamp(15px,1.319cqw,20px)/1 'Onest',sans-serif;transition:transform .35s cubic-bezier(.3,.9,.3,1),color .25s}
.wk:hover .garr,.wk:focus-within .garr{transform:rotate(-45deg)}
.wgo:focus-visible{outline:2px solid #FDFAF6;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wkov,.wgo .garr,.wgo .gball,.wgo svg circle{transition:none}.wgo svg{animation:none}}

/* ─────────────────────────────────────────────────────────────────────
   АДАПТИВНИЙ ШАР — 4K вгорі, 250 px унизу.
   Артборд тече за вікном (у сторінках width:100%), тож усі cqw-змінні
   рахуються від реальної ширини. Діапазон 1024→560 уже розписаний
   всередині сторінок — цей шар його НЕ чіпає, він добудовує два краї. */
.dv-opt,.dv-opts,.dv-turn{min-width:0;width:100%;flex:1 1 auto;box-sizing:border-box}
/* Перелік СІТОК за роллю. Раніше тут стояв збіг за текстом атрибута
   [style*="grid-template-columns"] — він ловив одні екземпляри й промахувався по
   сусідніх (інший порядок властивостей, minmax замість 1fr), і саме через це
   адаптація виглядала плямами. */
.gcols,.sgrid,.svgrid,.cgrid1,.cgrid2,.cgrid22,.agrid,.fgrid,.fnav,.krow,.artbody,
.p1row,.cgr,.dl-grid4,.ktgrid,.vgrid,.pnpart,.wgrid,.ctatop,.mgrid,.socg,.cwin2{min-width:0}
.gcols>*,.sgrid>*,.svgrid>*,.cgrid1>*,.cgrid2>*,.cgrid22>*,.agrid>*,.fgrid>*,
.fnav>*,.krow>*,.artbody>*,.p1row>*,.cgr>*,.dl-grid4>*,.ktgrid>*,.vgrid>*,
.pnpart>*,.wgrid>*,.ctatop>*{min-width:0}
/* Верх. Поле контенту росте з монітором, але спиняється на 2400 px:
   довший рядок читати нічим. Решту ширини забирають поля. */
@container (min-width:2000px){.dv-card>div{--gxpad:calc((100cqw - 1800px)/2)}}
@container (min-width:2600px){.dv-card>div{--gxpad:calc((100cqw - 2100px)/2)}}
@container (min-width:3400px){.dv-card>div{--gxpad:calc((100cqw - 2400px)/2)}}
/* Низ. 560→360: заголовки перестають вилазити за поле. */
@container (max-width:559.98px){
/* anywhere давав можливість переносу на КОЖНОМУ символі, а balance цим користувався
   й зносив крапку заголовка в окремий рядок («Кошторис» / «.» на 320). break-word
   рве лише те слово, що справді не влазить; pretty стежить за коротким останнім рядком */
.dv-card :where(h1,h2,h3){overflow-wrap:break-word;text-wrap:pretty}
/* Картка послуги у вузькій колонці. Висота 230px калібрувалась на сітку з трьох
   карток; в одну колонку вона лишає між номером і назвою дірку на пів картки —
   номер угорі, назва внизу, посередині нічого. Картка сідає на власний вміст.
   Геометрію пікто НЕ чіпаємо: два розміри в системі навмисні. */

/* Полотно кадру: висота в cqw від картки не має сенсу у вузькій колонці — тримає пропорцію */
.cwin2{height:auto!important;aspect-ratio:3/2}

}
/* 360→250: одна колонка скрізь, шапка стискається, поля 14. */
@container (max-width:359.98px){
.dv-card>div{--gxpad:14px}
/* одна колонка. Соцкола не тут: вони переносяться самі, по 44px */
.gcols,.sgrid,.svgrid,.cgrid1,.cgrid2,.cgrid22,.agrid,.fgrid,.fnav,.krow,.artbody,
.p1row,.cgr,.dl-grid4,.ktgrid,.vgrid,.pnpart,.wgrid,.ctatop,.mgrid{grid-template-columns:minmax(0,1fr)!important}
.dv-card img,.dv-card image-slot{max-width:100%}
/* шапка на 320: три блоки не влазять у внутрішню ширину, тож переносяться.
   Знак і слово тепер течуть у розмітці парою — окремої латки на кегль немає */
.dv-card header{gap:8px!important;flex-wrap:wrap!important;row-gap:10px!important}
.dv-card header>div:last-child{flex-wrap:wrap!important;row-gap:8px!important}
.dv-card header .btnh{padding:0 10px!important;font-size:11.5px!important}
.dv-card header .tgv{padding:8px!important;font-size:10px!important}
.cgrid1,.cgrid2,.cgrid22,.ctatop,.ktgrid,.vgrid,.pnpart{gap:24px!important}
/* ФУТЕР НА 320. Посторінкове правило #tNN .fnav тримає дві колонки — воно писалось
   для 360–1024 і виграє по id, тож на 320 посилання рвуться на два рядки кожне.
   Перемикаємо не треки, а РЕЖИМ: display:grid стоїть інлайном, і стовпчик забирає
   його без гонки специфічності — однаково на всіх шістнадцяти сторінках. */
.fnav{display:flex!important;flex-direction:column!important;gap:28px!important}
/* соцкола: шість по 44 не вміщаються в 292px внутрішньої ширини, а 44 — це підлога
   зони дотику. Тому не стискаємо іконку, а ріжемо трек по три: 3+3 замість 5+1 */
.socg{max-width:152px}
}
/* 250: останній рубіж — поля 10, службові обміри й бейджі знімаються. */
@container (max-width:279.98px){
.dv-card>div{--gxpad:10px}
.dv-card .dimset{display:none!important}
}

/* ДЕКОР КАРТКИ ПОСЛУГИ. Малюнок мав зашиті 300px / right:−69 / bottom:−81 — константи
   при картці, ширина якої плине від 444px до 292px. На вузькій картці 300px малюнка
   накривали ВСЮ картку й доїжджали до правого верхнього кута, де стоїть стрілка: саме
   тому стрілка «налізала на свг». Тепер розмір і зсуви — частки картки, тож малюнок
   тримає ту саму композицію (67.5% ширини, кут виведений за край) на будь-якій ширині
   й ніколи не піднімається у зону номера й стрілки. */
/* Розмір ведеться від ВИСОТИ картки, не від ширини. Від ширини (67.5%) квадратний
   малюнок на короткій картці виростав вищим за саму картку й заходив у верхній
   рядок, де стоять номер і стрілка — «стрілка налізла на свг». Від висоти
   співвідношення стале: при height:88% і bottom:−30% верх малюнка завжди стоїть
   на 0.42×висоти, тобто на 97px при картці 230 і на 62px при картці 148 — нижче
   за верхній рядок на будь-якій ширині. Малюнок навмисно виходить за картку
   праворуч і вниз; картка його обрізає. */
.svc .svcc>svg{width:100%!important;height:100%!important}
/* зона номера й стрілки: верхній рядок завжди над малюнком */
.svc>div:first-of-type{z-index:1}
/* АРГУМЕНТИ ×6 — дві колонки живуть, доки колонка ≥ ~330px: заголовок 18px у два
   рядки і число 7.6cqw не наїжджають. Це до 700. Раніше — стрибок на 1023, де
   колонка мала 471px. Між 700 і 1024 — проміжна сходинка: внутрішній відступ
   карток 48→28, щоб текст не тиснувся до роздільника. */
@container (max-width:1023.98px){
.agrid .acardL{padding-right:28px!important}
.agrid .acardR{padding-left:28px!important}
}
@container (max-width:699.98px){
.agrid{grid-template-columns:1fr!important}
.agrid .tfr{margin-top:0!important;padding:26px 0!important;border-right:none!important}
.agrid .tfn{font:800 48px/0.9 'Onest',sans-serif!important;letter-spacing:-.05em!important}
.aq{position:static!important;display:block!important;margin:6px 0 2px!important;white-space:normal!important;font-size:10px!important}
.aq .tff{clip-path:none!important}
.agrid .tfg{opacity:1}
.ahd{flex-wrap:wrap;row-gap:10px}
}
/* КАРТКА ПОСЛУГИ — РОЗМІР ВІД ВЛАСНОЇ ШИРИНИ. Раніше на ≤1023 посторінкове правило
   одним махом давало картці height:170, кегль 16 і декор 230 — і картка на 416px
   (дві колонки на 900) виходила МЕНШОЮ за картку на 314px (три колонки на 1024).
   Ширшій картці — менше всього: ось звідки «різко хоп». Тепер картка — контейнер,
   і висота, кеглі, поля й декор виводяться з її ширини одним правилом:
   на 437px це рівно початкові 230 / 26 / 22 / 24, далі плавно вниз.
   Дві пастки контейнера, обидві пройдені:
   · cqw — це ВНУТРІШНЯ ширина (без полів), тому коефіцієнти нащадків рахуються
     від 389px (437 − 2×24);
   · cqw у деклараціях САМОЇ картки рахуються від предка (елемент не може запитати
     власну ширину), тому висота картки задана не через cqw, а через пропорцію:
     437/230 — початкова. Картка в сітці тягнеться до найвищої в ряду, як і раніше. */
.svc{container-type:inline-size;height:auto!important;min-height:auto;aspect-ratio:437/230;padding:24px!important;box-sizing:border-box}
@container (max-width:359.98px){.svc{padding:20px!important}}
.svc .svcn{font-size:clamp(18px,6.684cqw,26px)!important}
.svc .svct>span:first-child{font-size:clamp(16px,5.656cqw,22px)!important;line-height:1.15!important}
/* ДЕКОР — ОДНА НЕПЕРЕРВНА ПРОПОРЦІЯ, початкова: 300px на картці 444 = 67.5% ширини,
   кут виведений за край на −15.5% / −35%. На 437 це 295px — як було; далі
   зменшується разом із карткою без порогів. Пороговий варіант (від висоти на
   вузьких) давав стрибок 201→263 між сусідніми ширинами — саме те, чого не має бути.
   Малюнок — текстура на 8%, картка його обрізає; рядок номера й стрілки стоїть
   над ним по z-index. */
.svc .svcc{width:67.5%!important;height:auto!important;aspect-ratio:1!important;right:-15.5%!important;bottom:-35%!important}
/* КАРТКА ПОСЛУГИ .svc — однакова на головній і на сторінках послуг.
   Картка є посиланням, тож наведення це показує: тло підводиться,
   номер заливається, стрілка виїжджає з-під правого краю.
   Стрілка стоїть на тих самих полях, що й номер, тому вирівняна з ним. */
.svc{transition:background-color .22s ease}
.svc .svcn,.svc .svcc,.svc .svcar{transition:color .22s ease,opacity .22s ease,transform .22s ease}
.svcar{font:400 clamp(14px,1.181cqw,18px)/1 ui-monospace,Menlo,monospace;color:#FF813A;opacity:0;transform:translateX(-8px)}
.svc:hover{background:rgba(253,250,246,.045)}
.svc:hover .svcn{color:#FF813A}
.svc:hover .svcc{color:rgba(253,250,246,.14)}
.svc:hover .svcar{opacity:1;transform:translateX(0)}
.svc:focus-visible{background:rgba(253,250,246,.045);outline:1px solid rgba(255,129,58,.6);outline-offset:-1px}
.svc:focus-visible .svcar{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.svc,.svc .svcn,.svc .svcc,.svc .svcar{transition:none}}
/* КЕЙСИ 2×2 (.cgrid22, .hcases) — дві колонки живуть, доки вікно ≥ ~300px (до 700);
   раніше колонка на 1023, де вікно мало 455px. Між 700 і 1024 — сходинка: гап 40→28.
   Вікно тримає пропорцію 16/10 від власної ширини на всіх ширинах. */
@container (max-width:1023.98px){
.cgrid22,.hcases{gap:28px!important}
.cwin2{height:auto!important;min-height:0!important;width:100%;aspect-ratio:16/10}
}
/* три кейси хаба: 3 → 2 → 1, кожен крок від ширини вікна (≥ ~300) */
@container (max-width:899.98px){.hcases{grid-template-columns:1fr 1fr!important;gap:40px 28px!important}}
@container (max-width:699.98px){
.cgrid22,.hcases{grid-template-columns:1fr!important;gap:40px!important}
}
/* КРОС-ПОСЛУГИ ×2 (.xsvc) — картка живе у двох колонках, доки ≥ ~260px (до 560);
   нижче — одна, з нижньою рамкою між ними. Раніше дві колонки трималися до 320,
   де картка стискалась до 140px. */
@container (max-width:559.98px){
.xsvc .svgrid,.xsvc>div:nth-child(2){grid-template-columns:1fr!important}
.xsvc .svc{border-right:none!important}
.xsvc .svc:first-child{border-bottom:1px solid rgba(253,250,246,.15)!important}
}
/* ПЕРЕЛІК 4 (.dl-grid4) — 4 → 2 на 900 (колонка ≥ 200), 2 → 1 на 480 */
@container (max-width:899.98px){.dl-grid4{grid-template-columns:1fr 1fr!important;gap:40px 24px!important}}
@container (max-width:479.98px){.dl-grid4{grid-template-columns:1fr!important}}
/* поля форми — зона дотику 44 на всіх ширинах нижче 1024 */
@container (max-width:1023.98px){.fcard input,.fcard select{height:44px;box-sizing:border-box}}
/* ФЛАГМАН + 2 КЕЙСИ (Головна, хаби): .cgrid1 — текст 45% і вікно 55%; текст живе,
   доки колонка ≥ ~340 (назва 3.19cqw + мета) — до 840. .cgrid2 — два вікна, доки
   вікно ≥ ~300 — до 700. Вікна тримають пропорцію від власної ширини. */
@container (max-width:1023.98px){.cgrid1{gap:32px!important}}
@container (max-width:839.98px){
.cgrid1{grid-template-columns:1fr!important;gap:36px!important;margin-bottom:48px!important}
.cwin1{height:auto!important;min-height:0!important;width:100%;aspect-ratio:16/10}
}
@container (max-width:699.98px){
.cgrid2{grid-template-columns:1fr!important;gap:44px!important}
}
/* ТРИ НАПРЯМИ (.svgrid3, хаби) — ті самі сходинки, що сітка послуг Головної:
   три колонки до 900, дві до 560, одна нижче. Рамки перемальовуються під сходинку. */
@container (max-width:899.98px){
.svgrid3{grid-template-columns:1fr 1fr!important}
.svgrid3 .svc{border-right:none!important;border-bottom:none!important}
.svgrid3 .svc:nth-child(odd){border-right:1px solid rgba(253,250,246,.15)!important}
.svgrid3 .svc:nth-child(n+3){border-bottom:1px solid rgba(253,250,246,.15)!important}
}
@container (max-width:559.98px){
.svgrid3{grid-template-columns:minmax(0,1fr)!important}
.svgrid3 .svc:nth-child(odd){border-right:none!important}
.svgrid3 .svc{border-bottom:1px solid rgba(253,250,246,.15)!important}
}
/* CTA-КАРТКА ХАБА (.ctatop): заголовок 60% + поле 40% — у ряд, доки поле ≥ ~260 (до 700) */
@container (max-width:699.98px){.ctatop{grid-template-columns:1fr!important;gap:20px!important}}
/* ПІДПИС HERO поруч із CTA: у ряд, доки є ≥ ~560 на обох (до 700) */
@container (max-width:699.98px){
.hcta{flex-wrap:wrap;gap:28px}
.hcta p{margin-left:0!important;max-width:none!important}
}
/* ФУТЕР: чотири колонки живуть до 840 (колонка ≥ 170 — найдовше посилання
   «створення застосунків» 13px = 165px). 560–840 — дві колонки; нижче 560 —
   обмірні лінії знака знімаються, соцкола в ряд. Нижче 360 — стовпчик (див. далі). */
@container (max-width:839.98px){
.fnav{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:36px 28px!important}
.fnav>div:last-child{grid-column:1/-1}
.socg{display:flex!important}
.dimset{width:100%!important}
.dm3{display:none}
}
/* ФУТЕРНА НАВІГАЦІЯ. Третя колонка не має підпису, і замість підпису там стояла
   порожня плашка на 10px + 18px поля — розпірка, щоб посилання вирівнялись із
   сусідніми колонками. На чотирьох колонках це працювало, але коли сітка
   перекладається на дві, колонка їде в НОВИЙ РЯД, і розпірка разом із row-gap
   лишає мертву смугу перед «Блог» — те, що видно на знімках.

   Спробу вирівняти це subgrid знято: зовнішня сітка має рівно два рядки (підписи,
   посилання), тож її row-gap — 48px — ліг МІЖ підписом і посиланнями в кожній
   колонці замість 18px, а в колонці без підпису лишив 36px порожнечі. Тобто
   subgrid відтворив рівно ті «великі невиправдані відступи», проти яких ішла правка.
   Вирівнювання тут не потребує нічого: усі підписи — один рядок моно 10–12px, вони
   вирівнюються самі. Досить було зняти поле в підпису, якого немає. */
.fnav>div>div:first-child{min-height:0!important}
/* підпис, якого немає, не тримає й власного поля: інакше в рядку, де підписів
   немає, лишається 18px порожнього треку. Вирівнювання від цього не страждає —
   висоту треку задають ті підписи, що в рядку є */
.fnav>div>div:first-child:empty{margin-bottom:0!important}
.fnav>div,.fnav>div>div{min-width:0}
.fnav .flk{overflow-wrap:anywhere}
/* Вузькі екрани: сітки не роздуваються під min-content, довгі рядки рвуться,
   а службові моно-підписи не падають нижче 10px — на 320px 7px не читається. */
@container (max-width:639.98px){
.dv-card a[href^="mailto"],.dv-card a[href^="tel"]{overflow-wrap:anywhere}
/* службовий обмір hero: фіксовані right:110px + width:115px не влазять у вузьку
   бленду, тож підпис знімається — як .hbadge і .dimset нижче 280 */
.dv-card [data-live-hero]{display:none!important}
}
@container (max-width:639.98px){
/* підпис групи пластин перестає бути колонкою й іде над рядком; кегль уже тече */
.stkl{width:auto!important}
}
@container (max-width:359.98px){
.cgrid1,.cgrid2,.cgrid22,.ctatop,.ktgrid,.vgrid,.pnpart,.fnav{gap:20px!important}
}

/* ═══ КЛИП — СТРАХОВКА, НЕ РІШЕННЯ ═══
   Причини переповнення полагоджені вище: сітки цілять у роль і мають min-width:0,
   кегль тече від контейнера, виліт стрічки hero виводиться з --gxpad. Клип лишається
   останнім рубежем. Він же робив аудити сліпими: scrollWidth дорівнював clientWidth
   навіть там, де вміст справді виїжджав. Тому обмір його ЗНІМАЄ — data-measure на
   картці повертає справжні числа, і саме в цьому стані знімаються знімки. Знімати
   ОБИДВІ осі: базове правило картки має overflow:hidden, а overflow-x:visible поруч
   з overflow-y:hidden обчислюється в auto — картка ставала прокруткою й брехала далі.
   І дивитись не лише на scrollWidth: виліт ЛІВОРУЧ у нього не входить ніколи. */
.dv-card{overflow-x:clip}
.dv-card[data-measure]{overflow:visible!important}

/* ══════════════ ФОРМА ЗАЯВКИ: валідація, відправка, успіх ══════════════
   Поведінка — у system.js (модуль KoveForms). Тут лише вигляд станів.
   Один шар на всі 14 форм: раніше кожна сторінка мала власну копію розмітки,
   і будь-яке виправлення доїжджало в чотири з чотирнадцяти. */
.fcard{position:relative}
.fcard .fmsg{display:block;font:400 10.5px/1.5 ui-monospace,Menlo,monospace;color:#C92A2A;letter-spacing:.02em;margin:-24px 0 14px;text-wrap:pretty}
.fcard .fmsg.ok{color:rgba(25,22,19,.62)}
.fcard .fcount{display:block;text-align:right;font:400 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:rgba(25,22,19,.45);margin:-22px 0 16px;transition:color .2s}
.fcard .fcount.warn{color:#C63A08}
.fcard .fcount.max{color:#C92A2A}
.fcard :where(input,textarea)[aria-invalid="true"]{border-bottom-color:#C92A2A!important;box-shadow:0 1px 0 #C92A2A}
.fcard .csel.inv .cselb{border-bottom-color:#C92A2A!important;box-shadow:0 1px 0 #C92A2A}
.fcard.sending :where(input,textarea,.cselb){opacity:.55}
.fcard.sending .btns{pointer-events:none;background:#E8825F!important;color:rgba(25,22,19,.7)!important}
.fdots{display:inline-block;width:1.1em;text-align:left}
.fdots::after{content:'';animation:fdots 1.1s steps(4,end) infinite}
@keyframes fdots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.ffail{margin:0 0 18px;padding-top:12px;border-top:1px solid #C92A2A;font:400 11px/1.6 ui-monospace,Menlo,monospace;color:#C92A2A;text-wrap:pretty;animation:ffail .28s ease both}
.ffail a{color:#C92A2A;text-decoration:underline;text-underline-offset:2px}
@keyframes ffail{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fshake{animation:fshake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes fshake{10%,90%{transform:translateX(-1.5px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}

/* Успіх — картка перегортається на помаранчевий аркуш. Фон #C63A08, не #FF511A:
   білий текст на яскравому дає 3.1:1, на цьому — 4.9:1, і помаранчевий лишається собою. */
.fsucc{position:absolute;inset:0;z-index:3;background:#C63A08;color:#FDFAF6;border-radius:5px;display:flex;flex-direction:column;justify-content:center;padding:40px 44px;clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.16,.84,.28,1)}
.fcard.sent .fsucc{clip-path:inset(0 0 0 0)}
.fcard.sent>*:not(.fsucc){visibility:hidden;opacity:0;transition:opacity .2s}
.fsucc>*{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.fcard.sent .fsucc>*{opacity:1;transform:none}
.fcard.sent .fsvg{transition-delay:.18s}
.fcard.sent .fsh{transition-delay:.3s}
.fcard.sent .fsp{transition-delay:.38s}
.fcard.sent .fsmeta{transition-delay:.46s}
.fcard.sent .fsagain{transition-delay:.54s}
.fsvg{width:52px;height:52px;flex:none;margin:0 0 26px;overflow:visible}
.fsvg circle,.fsvg path{fill:none;stroke:#FDFAF6;stroke-linecap:round;stroke-linejoin:round}
.fsvg circle{stroke-width:2.5;stroke-dasharray:183;stroke-dashoffset:183;transform:rotate(-90deg);transform-origin:50% 50%}
.fsvg path{stroke-width:4;stroke-dasharray:52;stroke-dashoffset:52}
.fcard.sent .fsvg circle{transition:stroke-dashoffset .75s cubic-bezier(.4,0,.2,1) .22s;stroke-dashoffset:0}
.fcard.sent .fsvg path{transition:stroke-dashoffset .4s cubic-bezier(.65,0,.35,1) .72s;stroke-dashoffset:0}
.fsh{margin:0;font:800 clamp(24px,2.36cqw,34px)/1.06 'Onest',sans-serif;letter-spacing:-.03em}
.fsp{margin:14px 0 0;max-width:30ch;font:500 15px/1.5 'Onest',sans-serif;color:#FDFAF6;text-wrap:pretty}
.fsmeta{margin:26px 0 0;padding-top:14px;border-top:1px solid rgba(253,250,246,.35);font:400 10.5px/1.6 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#FDFAF6}
.fsmeta b{font-weight:700}
.fsagain{align-self:flex-start;margin:22px 0 0;background:none;border:none;padding:0 0 3px;border-bottom:1.5px solid rgba(253,250,246,.5);font:600 13px/1 'Onest',sans-serif;color:#FDFAF6;cursor:pointer;transition:border-color .25s}
.fsagain:hover{border-bottom-color:#FDFAF6}
.fcard .fsucc :where(button):focus-visible{outline:2px solid #FDFAF6;outline-offset:3px}
@container (max-width:839.98px){.fsucc{padding:32px 24px}.fsvg{width:44px;height:44px;margin-bottom:20px}.fsagain{min-height:44px}}
@media (prefers-reduced-motion:reduce){.fsucc,.fsucc>*,.fsvg circle,.fsvg path,.ffail,.fshake{transition:none!important;animation:none!important;clip-path:none}.fcard.sent .fsvg circle,.fcard.sent .fsvg path{stroke-dashoffset:0}}