/* Адаптація артборда Claude Design до живої сторінки.
   У макеті .dv-card — картка на полотні (рамка, радіус, тінь). На сайті це весь в'юпорт.
   Усе інше — system.css без змін. */
html,body{background:#191613}
body{margin:0}
.kove-turn{min-width:0}
.kove-turn>.dv-card{width:100%;min-width:0;border:0;border-radius:0;box-shadow:none;font-family:'Onest',sans-serif;background:#191613;color:#FDFAF6}
.admin-bar .msheet-wrap{scroll-margin-top:32px}
/* меню-аркуш: у макеті sc-if прибирає вузол, тут — атрибут hidden */
.msheet-wrap[hidden]{display:none!important}
/* повідомлення форми */
.fnote{margin:0 0 20px;font:500 13px/1.5 'Onest',sans-serif;padding:10px 14px;border-radius:3px}
.fnote-ok{background:rgba(25,22,19,.06);color:#191613}
.fnote-err{background:rgba(198,58,8,.1);color:#C63A08}
.kove-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* заголовок h1 hero для скрінрідера й пошуку: візуальний набір розбитий стрічкою й не є заголовком */
.kove-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Правила, що в макеті дублювались у <style> кожної сторінки ──────────────
   Винесені сюди, щоб сторінка без власного шару не втрачала шапку, рух і футер. */
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes caret{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ants{to{stroke-dashoffset:-44}}
/* стеля — із запасом під найвищу панель на 320 (опис + чипи в кілька рядків + CTA):
   300px різали кнопку «Замовити» в «Лендінгу» вже на 360 */
.tf7.tfo .tfd{max-height:800px;opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){
.ls{stroke-dashoffset:0!important}
.dimsig.armed .ln,.dimsig.armed .lnv{transform:none!important;transition:none!important}
.dimsig.armed .lb{opacity:1!important;transition:none!important}
.gguide,.gsig{opacity:0!important}
}
/* ШАПКА <1024: тумблер «зміст» + меню-аркуш */
@container (min-width:768px){
.mgrid{grid-template-columns:1fr 240px;gap:48px;max-width:820px;padding:14px 32px 8px}
.mside{display:block}
.mtitle{font-size:32px;min-height:60px}
}
/* нижче 560 у футері лишається одна чесна анотація — жива ширина знака */
@container (max-width:559.98px){
.kove-turn .dimsig .dm2{display:none}
.kove-turn .dimsig .d1 rect{x:293px;y:-7px;width:114px;height:27px}
.kove-turn .dimsig .d1 text{font-size:21px!important;transform:translateY(8px)}
}
/* кошторис сторінок послуг: ціна тихіша, помаранчева у відкритому рядку */
.kove-quiet-price .tf7 .kc3{color:rgba(253,250,246,.85)!important;transition:color .3s}
.kove-quiet-price .tf7.tfo .kc3{color:#FF813A!important}
.kove-turn .lnk{white-space:nowrap}
/* застосунки й програми <1024: платформи і ціна в колонку */
@container (max-width:1023.98px){
.kove-turn .plgrid{grid-template-columns:1fr!important;gap:0!important}
.kove-turn .plgrid>div{border-right:none!important;padding:22px 0!important;border-top:1px solid rgba(253,250,246,.15)}
.kove-turn .plgrid>div:first-child{border-top:none;padding-top:0!important}
.kove-turn .prgrid{grid-template-columns:1fr!important;gap:36px!important}
.kove-turn .prref{border-left:none!important;padding-left:0!important;border-top:1px solid rgba(253,250,246,.15);padding-top:24px}
}

/* ── Покрокова CTA-форма (хаби, партнерство на «Про нас») ── */
.chan{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(25,22,19,.5);border-radius:2px;font:500 12px/1 ui-monospace,Menlo,monospace;color:rgba(25,22,19,.76);cursor:pointer;transition:border-color .18s cubic-bezier(.2,.7,.2,1),background .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1)}
.chan input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chan:hover{border-color:#FF511A;color:#191613}
.chan[data-on="true"]{background:#191613;border-color:#191613;color:#FDFAF6}
.chan:has(input:focus-visible){outline:2px solid #191613;outline-offset:3px}
.chan[data-on="true"]:has(input:focus-visible){outline-color:#FF511A}
@media (prefers-reduced-motion:reduce){.chan{transition:none}}
/* CTA-хаб: три кроки в одній смузі, висота зарезервована під найвищий крок. Без JS — усі поля одним коротким списком і один submit (.jsx додає логіка) */
.ctasteps{position:relative}
.jsx .ctasteps{display:grid}
.jsx .ctastep{display:none;margin-bottom:0}
.jsx .ctastep.on{display:block;animation:stepFade .24s ease both}
@keyframes stepFade{from{opacity:0}to{opacity:1}}
.ctastep{margin-bottom:20px}
.ctaprog,.ctanext,.ctaback{display:none}
.jsx .ctaprog{display:block}
.jsx .ctanext{display:inline-block}
.jsx .ctanext.off{display:none}
/* «Назад» живе в рядку прогресу, навпроти «КРОК n / 3»: на першому кроці там і так
   порожньо, тож прихована кнопка не лишає дірки під «Далі», а дії не стрибають
   між кроками. Поле натиску ~44px — від'ємним полем, без зсуву рядка. */
.ctaback{background:none;border:none;font:500 12px/1 ui-monospace,Menlo,monospace;letter-spacing:0;color:rgba(25,22,19,.76);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ctaprog .ctaback{padding:16px 10px;margin:-16px -10px}
.jsx .ctaback{display:inline-block;visibility:hidden}
.jsx .ctaback.vis{visibility:visible}
.ctarow{display:flex;align-items:end;gap:32px}
.jsx .ctasend{display:none}
.jsx .ctasend.on{display:inline-block}
.ctabar{will-change:transform}
.ctaback:hover{color:#191613}
.ctaback:focus-visible,.ctanext:focus-visible,.ctasend:focus-visible{outline:2px solid #191613;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.jsx .ctastep.on{animation:none}}
@container (max-width:1023.98px){
/* хаб <1024: CTA-смуга стеком, поле й кнопка на всю ширину. Сітки карток і кейсів — у спільному шарі */
.kove-turn .chanrow{gap:6px}
.kove-turn .chan{flex:1 1 auto;justify-content:center;min-height:44px;padding:0 10px}
.kove-turn .ctaf>div:last-child{flex-direction:column;align-items:stretch;gap:18px}
.kove-turn .cmora{justify-content:flex-start!important}
.kove-turn .ctas{padding:26px 20px 28px!important}
.kove-turn .ctarow{flex-direction:column;align-items:stretch;gap:18px}
.kove-turn .ctaact{gap:14px}
.kove-turn .ctaact .btns{width:100%}
.kove-turn .hsub{flex-direction:column;align-items:stretch;gap:26px}
.kove-turn .hsub p{margin-left:0!important;max-width:none!important}

}
/* Розкладка .hsub і .vkfoot — у CSS, не інлайном: інлайновий align-items перебивав
   вузькі правила, і кнопка «Замовити» в hero хаба висіла біля правого краю. */
.hsub{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
/* CTA у хабі не стискається поруч із довгим поясненням */
.kove-cta-hub{flex:none}
/* Обгортка сторінки обрізає виліт стрічки hero. overflow:hidden лишає її прокручуваною
   програмно: фокус або scrollIntoView на елементі за краєм зсували всю сторінку вбік на ~40px.
   clip обрізає так само, але прокрутки не має взагалі. */
.kove-turn>.dv-card>div:first-child{overflow:clip!important}