.dm-hero{padding:56px 0 28px;text-align:center}
.dm-back{display:inline-block;margin-bottom:18px;font-weight:700;color:var(--muted,#56636c);text-decoration:none}
.dm-hero h1{font-size:clamp(34px,4.6vw,46px);line-height:1.12;margin:0 auto 14px;max-width:16em}
.dm-hero .lead{max-width:34em;margin:0 auto;font-size:18px;color:#3a4852}
.dm-body{padding:24px 0 80px}
.dm-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
.dm-steps h2,.dm-form h2{font-size:24px;margin:0 0 18px}
.dm-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dm-steps li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.5;color:#3a4852}
.dm-steps li b{color:#1b2833}
.dm-n{flex:none;width:30px;height:30px;border-radius:50%;background:#f3e6d8;color:#a8642f;font-weight:900;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.dm-call{margin-top:26px;font-weight:700;color:#3a4852}.dm-call a{color:#1d3d52;font-weight:900}
.dm-form{background:#fff;border:1px solid #eadfce;border-radius:20px;padding:26px;box-shadow:0 24px 50px -30px rgba(17,40,58,.35);display:grid;gap:12px;position:sticky;top:96px}
.dm-form label{display:grid;gap:6px;font-weight:700;font-size:14.5px;color:#1b2833}
.dm-form label i{color:#a8642f;font-style:normal}
.dm-form input,.dm-form textarea{font:inherit;font-weight:500;padding:12px 14px;border:1.5px solid #e2d6c4;border-radius:12px;background:#fdfbf8;color:#1b2833}
.dm-form input:focus,.dm-form textarea:focus{outline:none;border-color:#a8642f;box-shadow:0 0 0 3px rgba(168,100,47,.15)}
.dm-form .bad{border-color:#b4533f}
.dm-form .btn{margin-top:6px;width:100%}
.dm-note{margin:0;font-size:13.5px;color:#56636c;text-align:center}
.dm-ok{margin:0;padding:12px;border-radius:12px;background:#dcf2e3;color:#2d6b4c;font-weight:800;text-align:center}
.dm-ok small{display:block;font-weight:600;color:#56636c}
:root[data-theme="dark"] .dm-form{background:#1b2c3a;border-color:#2a3a47}
:root[data-theme="dark"] .dm-form input,:root[data-theme="dark"] .dm-form textarea{background:#13212c;border-color:#2a3a47;color:#eef2f5}
:root[data-theme="dark"] .dm-form label,:root[data-theme="dark"] .dm-steps li b{color:#f2f5f7}
:root[data-theme="dark"] .dm-steps li,:root[data-theme="dark"] .dm-hero .lead,:root[data-theme="dark"] .dm-call{color:#c3ced6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dm-form{background:#1b2c3a;border-color:#2a3a47}:root:not([data-theme="light"]) .dm-form input,:root:not([data-theme="light"]) .dm-form textarea{background:#13212c;border-color:#2a3a47;color:#eef2f5}:root:not([data-theme="light"]) .dm-form label,:root:not([data-theme="light"]) .dm-steps li b{color:#f2f5f7}:root:not([data-theme="light"]) .dm-steps li,:root:not([data-theme="light"]) .dm-hero .lead,:root:not([data-theme="light"]) .dm-call{color:#c3ced6}}
@media (max-width:900px){.dm-grid{grid-template-columns:1fr;gap:32px}.dm-form{position:static}}
.dm-hero h1 em{font-style:normal!important;color:#a8642f;font-family:inherit!important}
.dm-steps li b{display:block;margin-bottom:2px}
.dm-form label span{display:block}
/* barvy stránky: kroky v barvách skupin */
.dm-steps li:nth-child(1){--c:#1f6d96;--b:#dfecf5}.dm-steps li:nth-child(2){--c:#28804a;--b:#dcf2e3}.dm-steps li:nth-child(3){--c:#9c6a0e;--b:#f8edd4}
.dm-steps li:nth-child(4){--c:#bb5f22;--b:#f9e4d3}.dm-steps li:nth-child(5){--c:#7b3fa3;--b:#f2e6f6}.dm-steps li:nth-child(6){--c:#3a63ad;--b:#e1e9f8}.dm-steps li:nth-child(7){--c:#a8642f;--b:#f3e6d8}
.dm-steps .dm-n{background:var(--c)!important;color:#fff!important;width:34px;height:34px;font-size:15px}
.dm-steps li b{color:var(--c)!important;font-size:17px}
.dm-steps li{padding:12px 14px;border-radius:14px;background:var(--b);gap:16px}
.dm-steps ol{gap:10px!important}
.dm-form{border-top:6px solid #a8642f!important}
.dm-call a{color:#a8642f!important}
:root[data-theme="dark"] .dm-steps li{background:color-mix(in srgb,var(--c) 16%,#13212c)}:root[data-theme="dark"] .dm-steps li b{color:color-mix(in srgb,var(--c) 55%,#fff)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dm-steps li{background:color-mix(in srgb,var(--c) 16%,#13212c)}:root:not([data-theme="light"]) .dm-steps li b{color:color-mix(in srgb,var(--c) 55%,#fff)!important}}
/* střídměji: barevná jen čísla */
.dm-steps li{background:none!important;padding:0!important;gap:14px!important}
.dm-steps ol{gap:16px!important}
.dm-steps li b{color:#1b2833!important;font-size:16.5px}
.dm-form{border-top:1px solid #eadfce!important}
:root[data-theme="dark"] .dm-steps li b{color:#f2f5f7!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dm-steps li b{color:#f2f5f7!important}}
.dm-steps li b{color:var(--c)!important}
:root[data-theme="dark"] .dm-steps li b{color:color-mix(in srgb,var(--c) 55%,#fff)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dm-steps li b{color:color-mix(in srgb,var(--c) 55%,#fff)!important}}
/* kompaktní – vše na jeden pohled */
.dm-hero{padding:24px 0 8px!important}.dm-hero h1{font-size:clamp(28px,4vh,38px)!important;margin-bottom:8px!important}.dm-hero .lead{font-size:16px!important}.dm-back{margin-bottom:8px!important;font-size:14px}
.dm-body{padding:16px 0 40px!important}.dm-grid{gap:40px!important}
.dm-steps h2,.dm-form h2{font-size:20px!important;margin-bottom:12px!important}
.dm-steps ol{gap:10px!important}.dm-steps li{font-size:14.5px!important;line-height:1.4!important}.dm-steps li b{font-size:15px!important}
.dm-steps .dm-n{width:28px!important;height:28px!important;font-size:13px!important}
.dm-form{padding:20px!important;gap:10px!important;grid-template-columns:1fr 1fr;column-gap:12px;top:84px!important}
.dm-form h2,.dm-form label:has(textarea),.dm-form .btn,.dm-form .dm-note,.dm-form .dm-ok{grid-column:1/-1}
.dm-form label{font-size:13.5px!important;gap:4px!important}
.dm-form input,.dm-form textarea{padding:9px 12px!important;font-size:14.5px}
.dm-form textarea{min-height:0;height:62px}
.dm-call{margin-top:16px!important;font-size:15px}
.dm-form{min-width:0}.dm-form label,.dm-form input,.dm-form textarea{min-width:0;width:100%;box-sizing:border-box}
/* demo v jazyce v6: bílá, menší mezery, stejné komponenty */
body{background:#fff!important}
.dm-hero{background:#fff!important;padding:clamp(40px,6vh,64px) 0 clamp(20px,3vh,32px)!important}
.dm-hero h1{font-size:clamp(32px,3.2vw,42px)!important}
.dm-hero h1 em{font-style:normal!important}
.dm-body{background:#e3f2fc!important;padding:clamp(40px,6vh,64px) 0!important}
.dm-steps h2,.dm-form h2{font-size:22px!important}
.dm-steps li b{font-size:17.5px!important}
.dm-steps li span{font-size:14.5px!important;color:#55636d}
.dm-steps li{background:none!important}
.dm-steps .dm-n{width:32px!important;height:32px!important}
.dm-form{background:#fff!important;border:1px solid #cfe1ee!important;box-shadow:0 24px 50px -32px rgba(17,40,58,.4)!important}
.dm-form input,.dm-form textarea{background:#fff!important;border-color:#cfdce6!important}
.dm-call{font-size:16px!important}
html body header.top{background:#fff!important}
html body .dm-hero{padding-top:clamp(24px,4vh,44px)!important}
html body .dm-body{padding-top:clamp(32px,5vh,52px)!important}
html body:not(#zz):not(#zz1):not(#zz2):not(#zz3) main > section.dm-hero{padding:clamp(24px,4vh,44px) 0 clamp(20px,3vh,28px)!important}
html body:not(#zz):not(#zz1):not(#zz2):not(#zz3) main > section.dm-body{padding:clamp(32px,5vh,52px) 0 clamp(48px,7vh,72px)!important}
.dm-form input.bad,.dm-form textarea.bad{border-color:#b4533f!important;box-shadow:0 0 0 3px rgba(180,83,63,.15)!important;background:#fff7f5!important}
.dm-err{margin:0;font-size:14px;font-weight:700;color:#b4533f;grid-column:1/-1}
/* tester 2: chyba červeně, pole termínu na celou šířku */
.dm-form .dm-err{color:#b3261e!important;font-weight:700}
.dm-form input.bad,.dm-form textarea.bad{border-color:#c62828!important;box-shadow:0 0 0 3px rgba(198,40,40,.12)!important}
.dm-form label:has(input[name="termin"]){grid-column:1/-1}
@media (max-width:760px){.dm-form{grid-template-columns:minmax(0,1fr)!important}.dm-form label{grid-column:1/-1!important}.dm-form input,.dm-form textarea{min-height:46px}}
.dm-back{display:inline-flex!important;align-items:center;min-height:44px}
html body main #dm-form{scroll-margin-top:96px!important}
.dm-form input,.dm-form select{min-height:46px}
/* 7. 10.: ukázka – fakta nahoře, 3 kroky jednou barvou, doplňky s fajfkou */
.dm-facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0;padding:0}
.dm-facts li{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #e6d9c6;border-radius:999px;padding:9px 16px;font-weight:700;font-size:15.5px;color:#1b2833;box-shadow:0 4px 14px -8px rgba(17,40,58,.25)}
.dm-facts .ic{width:auto!important;height:auto!important;background:none!important;color:#a8642f!important;font-size:14px!important;border-radius:0!important}
.dm-steps .dm-3{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.dm-steps .dm-3 li{display:flex;gap:16px;align-items:flex-start}
.dm-steps .dm-3 .dm-n{flex:none;width:36px;height:36px;border-radius:50%;background:#1d3d52!important;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.dm-steps .dm-3 b{display:block;font-size:19px;line-height:1.3;color:#1b2833!important;margin-bottom:4px}
.dm-steps .dm-3 span:not(.dm-n){display:block;font-size:16px;line-height:1.5;color:#33424d!important}
.dm-also{list-style:none;margin:26px 0 0;padding:20px 0 0;border-top:1px solid rgba(27,40,51,.12);display:grid;gap:9px}
.dm-also li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.45;color:#33424d}
.dm-also li::before{content:"\f00c";font:900 12px/1 "FA";position:absolute;left:3px;top:.45em;color:#a8642f}
@media (max-width:760px){.dm-facts{justify-content:flex-start}.dm-facts li{font-size:14.5px;padding:8px 13px}.dm-steps .dm-3 b{font-size:17.5px}}
html body main.dm .dm-steps .dm-also li{padding-left:26px!important;margin:0!important;display:block!important;font-size:15.5px!important;color:#33424d!important}
html body main.dm .dm-steps .dm-3 li{padding:0!important;margin:0!important}
html body main.dm .dm-steps .dm-3 b{font-size:19px!important;color:#1b2833!important}
html body main.dm .dm-steps .dm-3 span:not(.dm-n){font-size:16px!important;color:#33424d!important;line-height:1.5!important}
html body main.dm .dm-steps h2{font-size:24px!important;margin-bottom:18px!important}
@media (max-width:760px){html body main.dm .dm-steps .dm-3 b{font-size:17.5px!important}html body main.dm .dm-steps .dm-3 span:not(.dm-n){font-size:15.5px!important}}
/* 7. 10. odpoledne: výraznější fakta a čísla kroků */
html body main.dm .dm-facts{gap:14px!important;margin-top:26px!important}
html body main.dm .dm-facts li{background:#fbf3ea!important;border:1.5px solid #e2c6a6!important;padding:10px 18px 10px 10px!important;font-size:17px!important;font-weight:800!important;color:#1b2833!important;gap:11px!important;box-shadow:none!important}
html body main.dm .dm-facts .ic{width:32px!important;height:32px!important;border-radius:50%!important;background:#a8642f!important;color:#fff!important;font-size:13px!important;display:inline-flex!important;align-items:center;justify-content:center}
html body main.dm .dm-steps .dm-3 .dm-n{width:40px!important;height:40px!important;background:#a8642f!important;color:#fff!important;font-size:18px!important;box-shadow:0 4px 12px -4px rgba(168,100,47,.55)}
html body main.dm .dm-steps .dm-3 li{gap:18px!important}
html body main.dm .dm-steps .dm-3 b{padding-top:6px}
@media (max-width:760px){html body main.dm .dm-facts li{font-size:15.5px!important}}
/* 7. 10. – ukázka ve stylu úvodu: jedno pozadí, ikony oblastí, náhled nástěnky */
html body main.dm{background:#fff}
.dx{padding:40px 0 72px}
.dx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);grid-template-areas:"head form" "steps form" "shot form";column-gap:56px;row-gap:26px;align-items:start}
.dx-head{grid-area:head}.dx-steps{grid-area:steps}.dx-form{grid-area:form;position:sticky;top:96px}.dx-shot{grid-area:shot}
html body main.dm .dx .dm-back{margin-bottom:14px!important}
.dx-ey{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a8642f}
html body main.dm .dx h1{font-size:clamp(32px,3.6vw,44px);line-height:1.12;margin:0 0 10px;color:#1b2833;text-align:left;max-width:none}
html body main.dm .dx h1 em{font-style:normal;color:#a8642f}
.dx-lead{margin:0;font-size:18px;color:#33424d}
.dx-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.dx-steps li{display:flex;gap:14px;align-items:flex-start;margin:0;padding:0}
html body main.dm .dx-steps .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--bg)!important;color:var(--c)!important;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.dx-steps b{display:block;font-size:18px;line-height:1.3;color:var(--c)}
.dx-steps small{display:block;font-size:15.5px;line-height:1.45;color:#33424d;margin-top:2px}
.dx-shot{margin:6px 0 0}
.dx-frame{border:12px solid #1b2833;border-bottom-width:18px;border-radius:18px;background:#1b2833;box-shadow:0 26px 50px -28px rgba(17,40,58,.5);overflow:hidden}
.dx-frame img{display:block;width:100%;height:auto;border-radius:4px}
.dx-shot figcaption{margin-top:10px;font-size:14px;color:#56636c;text-align:center}
html body main.dm .dx-form .dm-form{border-top:6px solid #a8642f!important}
.dx-call{margin:14px 0 0;text-align:center;font-weight:700;color:#33424d}
.dx-call a{color:#a8642f;font-weight:800}
@media (max-width:900px){
 .dx{padding:28px 0 56px}
 .dx-grid{grid-template-columns:1fr;grid-template-areas:"head" "steps" "form" "shot";row-gap:24px}
 .dx-form{position:static}
}
html body main.dm .dx .dx-ey{color:#a8642f!important}
html body main.dm .dx{padding-top:20px!important}
@media (max-width:900px){html body main.dm .dx{padding-top:8px!important}}
html body:not(#zz):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) main.dm .dx-ey{color:#a8642f!important}
html body:not(#zz):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) main.dm section.dx{padding-top:28px!important;padding-bottom:64px!important}
@media (max-width:900px){html body:not(#zz):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) main.dm section.dx{padding-top:14px!important;padding-bottom:48px!important}}
/* 7. 10. – ukázka souměrně na střed, bez snímku */
html body main.dm .dx-grid{display:block!important;max-width:880px;margin:0 auto}
html body main.dm .dx-head{text-align:center}
html body:not(#zz):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) main.dm .dx h1{text-align:center!important}
html body main.dm .dx .dm-back{display:inline-flex!important}
html body main.dm .dx-steps{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;margin:30px 0 0!important}
html body main.dm .dx-steps li{flex-direction:column!important;align-items:center!important;text-align:center;background:#fff;border:1px solid #ece3d6;border-radius:16px;padding:20px 16px!important;box-shadow:0 12px 30px -22px rgba(17,40,58,.35)}
html body main.dm .dx-steps .ic{width:48px!important;height:48px!important;font-size:18px!important}
html body main.dm .dx-steps b{margin-top:4px}
.dx-calm{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px auto 0;padding:14px 18px;max-width:640px;background:#f3f8f5;border:1px solid #cfe5d8;border-radius:14px;font-size:16px;line-height:1.45;color:#1b2833}
html body main.dm .dx-calm .ic{flex:none;width:40px;height:40px;border-radius:50%;background:#28804a!important;color:#fff!important;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.dx-calm b{color:#28804a}
html body main.dm .dx-form{position:static!important;max-width:640px;margin:26px auto 0}
@media (max-width:760px){
 html body main.dm .dx-steps{grid-template-columns:1fr!important;gap:12px!important}
 html body main.dm .dx-steps li{flex-direction:row!important;text-align:left;align-items:flex-start!important;padding:14px!important}
 .dx-calm{justify-content:flex-start;font-size:15px}
}
/* 7. 10. – nadpis nahoře na střed, pod ním vlevo kroky + ujištění, vpravo formulář */
@media (min-width:901px){
 html body main.dm .dx-grid{display:grid!important;max-width:1120px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"head head" "steps form" "calm form" ". form"!important;column-gap:40px!important;row-gap:18px!important;align-items:start}
 html body main.dm .dx-head{grid-area:head;margin-bottom:10px}
 html body main.dm .dx-steps{grid-area:steps;grid-template-columns:1fr!important;margin:0!important;gap:14px!important}
 html body main.dm .dx-steps li{flex-direction:row!important;text-align:left!important;align-items:center!important;padding:16px 18px!important;gap:16px!important}
 html body main.dm .dx-steps b{margin-top:0}
 html body main.dm .dx-calm{grid-area:calm;margin:0!important;max-width:none!important;justify-content:flex-start}
 html body main.dm .dx-form{grid-area:form;margin:0!important;max-width:none!important}
}
html body main.dm .dx-calm{font-size:17px!important}
html body main.dm .dx-calm b{font-size:17px}
html body main.dm .dx-call{grid-area:call;margin:4px 0 0!important;text-align:left!important}
@media (min-width:901px){html body main.dm .dx-grid{grid-template-areas:"head head" "steps form" "calm form" "call form" ". form"!important}}
@media (max-width:900px){html body main.dm .dx-call{text-align:center!important;margin-top:18px!important}}
/* stejně vysoké sloupce, stejně velké kroky */
@media (min-width:901px){
 html body main.dm .dx-grid{grid-template-areas:"head head" "left form"!important;align-items:stretch!important}
 html body main.dm .dx-left{grid-area:left;display:flex;flex-direction:column;gap:16px}
 html body main.dm .dx-left .dx-steps{flex:1;display:grid!important;grid-template-rows:repeat(3,1fr);gap:16px!important}
 html body main.dm .dx-left .dx-steps li{height:100%;box-sizing:border-box}
 html body main.dm .dx-left .dx-calm,html body main.dm .dx-left .dx-call{grid-area:auto!important}
 html body main.dm .dx-left .dx-call{margin:2px 0 0!important}
}
html body:not(#zz):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) main.dm section.dx{padding-top:40px!important}
/* kroky bez karet – volně, jen ikona + text */
html body main.dm .dx-steps li{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
@media (min-width:901px){
 html body main.dm .dx-left{justify-content:center;gap:26px}
 html body main.dm .dx-left .dx-steps{flex:0 0 auto;grid-template-rows:none!important;gap:26px!important}
 html body main.dm .dx-left .dx-steps li{height:auto;align-items:flex-start!important}
 html body main.dm .dx-steps .ic{width:52px!important;height:52px!important;font-size:19px!important;border-radius:14px!important}
 html body main.dm .dx-steps b{font-size:20px!important;margin-top:2px}
 html body main.dm .dx-steps small{font-size:16.5px!important}
}
@media (max-width:900px){html body main.dm .dx-steps{gap:20px!important}}
html body main.dm .dx-call a{display:inline-flex;align-items:center;min-height:44px}
/* 12. 10.: pole nesmí přetéct kartu (táhlo jen svisle, strop), iPhone bez zoomu při psaní */
html body main.dm .dm-form textarea{resize:none!important;width:100%!important;max-width:100%!important;max-height:220px!important;overflow-y:hidden;line-height:1.5}
@media (max-width:760px){html body main.dm .dm-form input,html body main.dm .dm-form textarea{font-size:16px!important}}