/* Report viditelnosti /report-viditelnosti/ (styly nástroje zdarma, skript zdarma.js) */
.sh{padding:40px 0 64px}
.sh .wrap{max-width:860px}
.sh h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.1;margin:14px 0 14px;text-wrap:balance}
.sh h1 em{font-style:normal;color:var(--cihla)}
.sh .lead{font-size:1.12rem;color:#3A4651;max-width:680px;margin:0 0 4px}
.sh .lead b{color:var(--bridlice)}
.sh .lead-ne{font-size:1.12rem;font-weight:800;margin:0 0 20px}
/* celý průchod ve stejném rozložení: vlevo nadpis, výhody a karta s kroky (mění se jen její obsah),
   vpravo ukázka výsledku; jen výsledek srovnání (#k3) je na celou šířku */
.sh-obr{display:none}
.sh .wrap:not(:has(#k3.on)){max-width:var(--max);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:start}
.sh .wrap:not(:has(#k3.on)) .sh-obr{display:block;grid-column:2;grid-row:1;background:var(--panel);border-radius:16px;padding:22px 22px 18px;text-align:center}
/* na počítači pevná výška nástroje pro všechny kroky kromě výsledku srovnání (nejvyšší krok ~750 px) */
@media(min-width:961px){.sh .wrap:not(:has(#k3.on)) .sh-txt{min-height:760px}}
.sh .wrap:not(:has(#k3.on)) .sh-txt{grid-column:1;grid-row:1;min-width:0}
.sh-obr img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;filter:drop-shadow(0 14px 30px rgba(34,48,59,.18))}
.sh-obr .ukazka{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--modra);background:#E6F1FB;border-radius:5px;padding:3px 8px;margin-bottom:14px}
.sh-obr p{margin:12px 0 0;font-size:.88rem;color:#5B6670}
.vyh{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.vyh li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;line-height:1.4}
.vyh li:before{content:"";width:24px;height:24px;border-radius:50%;background:var(--zelena) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/16px no-repeat}
.vyh b{display:block;font-weight:800}
.vyh small{display:block;color:#5B6670;font-size:.9rem}
.krok-karta{background:#fff;border:1px solid var(--linka);border-radius:14px;padding:18px 18px 16px;box-shadow:0 14px 40px -24px rgba(34,48,59,.28)}
.krok-karta .hledat{max-width:none}
.krok-karta .karta-f{border:0;padding:0;margin:16px 0 0;box-shadow:none;background:none}
.krok-karta .firma{margin:0}
.kroky-mini{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 14px;font-size:.82rem;font-weight:700;color:#8E979E}
.kroky-mini span{display:inline-flex;align-items:center;gap:6px}
.kroky-mini i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#E5E7EB;color:#5B6670;font-size:.75rem;font-weight:800}
/* ukazatel kroků podle zobrazené fáze: 1 = #k1, 2 = #k2 (u mapy než je hotovo), 3 = #k3 nebo hotovo */
.krok-karta:has(#k1.on) .kroky-mini span:nth-of-type(1),
.krok-karta:has(#k2.on):not(:has(#hotovo:not([hidden]))) .kroky-mini span:nth-of-type(2),
.krok-karta:has(#k3.on, #hotovo:not([hidden])) .kroky-mini span:nth-of-type(3){color:var(--bridlice)}
.krok-karta:has(#k1.on) .kroky-mini span:nth-of-type(1) i,
.krok-karta:has(#k2.on):not(:has(#hotovo:not([hidden]))) .kroky-mini span:nth-of-type(2) i,
.krok-karta:has(#k3.on, #hotovo:not([hidden])) .kroky-mini span:nth-of-type(3) i{background:var(--cihla);color:#fff}
.krok-karta:has(#k2.on, #k3.on) .kroky-mini span:nth-of-type(1) i,
.krok-karta:has(#k3.on, #hotovo:not([hidden])) .kroky-mini span:nth-of-type(2) i{background:var(--zelena);color:#fff}
/* v kartě s ukazatelem kroků se nic neopakuje: výhody už jsou nad kartou */
.krok-karta .duvera-n{display:none}
/* zpět jde přes „1 Firma“ v ukazateli kroků */
.krok-karta .zpet-k{display:none}
.krok-karta .zamek .karta-f{margin:0;border:0;padding:0}
.krok-karta:has(#k2.on) #krok1{cursor:pointer;color:var(--modra);text-decoration:underline;text-underline-offset:3px}
.kontext{margin:0 0 16px;padding:10px 14px;background:var(--panel);border-radius:10px;font-size:.95rem;font-weight:700;color:var(--bridlice)}
.l small{text-transform:none;letter-spacing:0;font-weight:600;color:#8E979E}
.k3-nadpis{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 6px}
.k3-pod{color:#4A5560;margin:0 0 14px}
.kroky-mini b{color:#C9CFD5;font-weight:700}
.sh .duvera-n{margin-top:14px}
@media(max-width:960px){.sh .wrap:not(:has(#k3.on)){grid-template-columns:1fr}.sh .wrap:not(:has(#k3.on)) .sh-obr{grid-column:1;grid-row:2}}
[hidden]{display:none!important}
.faze{display:none}.faze.on{display:block}
.past{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* hledání firmy */
.hledat{position:relative;max-width:640px}
.hledat .pole{display:flex;gap:8px;background:#fff;border:1.5px solid var(--linka);border-radius:12px;padding:8px}
.hledat .pole:focus-within{border-color:var(--modra)}
.hledat .pole svg{width:22px;height:22px;flex:none;align-self:center;margin-left:8px;fill:#8B8B85}
.hledat input[type=search]{flex:1;border:0;font:inherit;font-size:1.02rem;padding:10px 6px;background:transparent;color:var(--bridlice);outline:none;min-width:0}
.hledat .btn{white-space:nowrap}
.hledat .btn::after{display:none}
.hledat .btn:disabled{opacity:.6;cursor:wait}
.hledat .pozn{font-size:.85rem;color:#6B7378;margin:10px 0 0}
/* našeptávač plave přes stránku (bez top = pod polem), nic pod ním neodsune */
.nasept{position:absolute;left:0;right:0;z-index:20;max-height:min(60vh,430px);overflow-y:auto;margin-top:10px;background:#fff;border:1px solid var(--linka);border-radius:12px;box-shadow:0 14px 40px -18px rgba(34,48,59,.28)}
.hledat:has(.nasept:not([hidden])) .pozn{visibility:hidden}
.nasept button{display:block;width:100%;text-align:left;font:inherit;background:#fff;border:0;border-top:1px solid #EEF0F3;padding:12px 16px;cursor:pointer;color:var(--bridlice)}
.nasept button:first-child{border-top:0}
.nasept button:hover,.nasept button:focus{background:#F4F8FC;outline:none}
.nasept b{display:block;font-size:.98rem}.nasept small{color:#6B7378;font-size:.86rem}
.nasept .neni{padding:12px 16px;font-size:.9rem;color:#4A5560}
.nasept .neni a{color:var(--modra);font-weight:700}
.firma{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--zelena);border-radius:12px;padding:12px 16px;margin-bottom:18px;max-width:640px}
.firma .ok{width:30px;height:30px;border-radius:50%;background:var(--zelena-bg);display:flex;align-items:center;justify-content:center;flex:none;color:var(--zelena);font-weight:800}
.firma b{display:block}.firma small{color:#6B7378;font-size:.86rem}
.firma button{margin-left:auto;font:inherit;font-size:.88rem;font-weight:700;color:var(--modra);background:none;border:0;cursor:pointer;white-space:nowrap;padding:6px}
/* formuláře */
.karta-f{background:#fff;border:1px solid var(--linka);border-radius:12px;padding:24px;max-width:640px}
.karta-f h2{font-size:1.3rem;margin-bottom:4px}
.karta-f .pod{font-size:.95rem;color:#6B7378;margin-bottom:18px}
label.l,span.l{display:block;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#4A5560;margin-bottom:6px}
.karta-f input[type=text],.karta-f input[type=tel],.karta-f input[type=email]{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid var(--linka);border-radius:10px;margin-bottom:14px;color:var(--bridlice);background:#fff}
.karta-f input:focus{outline:none;border-color:var(--modra)}
.karta-f input:disabled{background:var(--panel);color:#6B7378}
.karta-f .btn{width:100%;text-align:center}
.karta-f .btn::after{display:none}
.karta-f .btn:disabled{opacity:.6;cursor:wait}
.btn.nacita{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--cihla)!important;opacity:1!important;cursor:wait}
.toc{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:toc .8s linear infinite;flex:none}
@keyframes toc{to{transform:rotate(360deg)}}
.radek2{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}
.tipy{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-6px 0 16px;font-size:.82rem;color:#6B7378}
.tipy button{font:inherit;font-size:.84rem;font-weight:700;color:var(--modra);background:var(--modra-svetla);border:0;border-radius:20px;padding:4px 11px;cursor:pointer}
.tipy button:hover{background:#D5E6F7}
.mala{font-size:.82rem;color:#6B7378;margin-top:10px;line-height:1.5}
.mala a{color:var(--modra)}
.chyba{display:none;background:#FDF0EB;border:1px solid #F0C9B8;color:#A5321A;font-size:.92rem;font-weight:600;border-radius:10px;padding:10px 14px;margin:0 0 14px}
.hledat .chyba{margin:12px 0 0}
.odkaz{background:none;border:0;font:inherit;color:var(--modra);text-decoration:underline;cursor:pointer;padding:0}
.odkaz:disabled{color:#8B8B85;text-decoration:none;cursor:default}
.zpet-k{display:inline-block;font:inherit;font-size:.9rem;font-weight:700;color:var(--modra);background:none;border:0;cursor:pointer;padding:0;margin:0 0 14px}
/* srovnání: ověření a výsledek */
.zamek{position:relative}
.zamek .karta-f{position:relative;z-index:2;margin:0 0 18px;border-color:var(--cihla)}
.tel-ok{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 0 14px;font-size:.88rem;color:var(--zelena);font-weight:700}
.kod-pole{font-size:1.8rem!important;letter-spacing:.5em;text-align:center;font-weight:800}
.sep{border-top:1px dashed var(--linka);padding-top:16px;margin-top:4px}
.mrizka{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0;max-width:860px}
.m{background:#fff;border:1px solid var(--linka);border-radius:12px;padding:18px}
.m .l{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8B8B85;margin-bottom:10px}
.m .vs{display:flex;align-items:flex-end;gap:18px}.m .v{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.m .v small{display:block;font-size:.72rem;font-weight:700;color:#8B8B85;letter-spacing:0;margin-top:5px}
.m .v.ok{color:var(--zelena)}.m .v.zle{color:var(--cihla)}
.m p{font-size:.88rem;color:#4A5560;margin:12px 0 0;line-height:1.45}
.diky{background:var(--zelena-bg);border-radius:12px;padding:12px 16px;color:var(--zelena);font-size:.95rem;font-weight:700;margin:0 0 14px}
.dop{margin:6px 0 22px;padding:0;list-style:none;display:grid;gap:10px;counter-reset:d}
.dop li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:.95rem;line-height:1.5;color:#4A5560}
.dop li:before{counter-increment:d;content:counter(d);width:26px;height:26px;border-radius:7px;background:var(--cihla);color:#fff;font-weight:800;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.dop b{color:var(--bridlice)}
.cta{background:#fff;border:1.5px solid var(--cihla);border-radius:12px;padding:22px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.cta h3{margin:0 0 4px;font-size:1.15rem}.cta p{margin:0;color:#4A5560;font-size:.92rem;line-height:1.5}
.cta .btn::after{display:none}
.pata{font-size:.78rem;color:#8B8B85;line-height:1.5;margin-top:22px}
/* krok 4: velikost oblasti mapy pozic */
.velikosti{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.vel{display:flex;align-items:flex-start;gap:9px;border:1.5px solid var(--linka);border-radius:10px;padding:9px 11px;cursor:pointer;font-size:.92rem;line-height:1.3}
.vel input{margin-top:3px;accent-color:var(--cihla);flex:none}
.vel small{display:block;color:#6B7378;font-size:.8rem;font-weight:500}
.vel:has(input:checked){border-color:var(--cihla);background:#FDF6F2}
.duvera-n{display:flex;gap:8px 24px;flex-wrap:wrap;margin-top:22px;font-size:.9rem;color:#4A5560}
.duvera-n span:before{content:"✓ ";color:var(--zelena);font-weight:800}
@media(max-width:820px){
  .mrizka{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}.cta .btn{width:100%;text-align:center}
  .radek2{grid-template-columns:1fr}
  .hledat .pole{flex-wrap:wrap}.hledat .btn{width:100%}
  .firma{flex-wrap:wrap;align-items:flex-start}.firma>div{flex:1;min-width:0}.firma button{flex-basis:100%;text-align:left;margin-left:42px;padding:0}
}

/* sekce pod nástrojem: jak to funguje, co poznáte, otázky, závěr.
   Jen před začátkem: po výběru firmy (a v dalších krocích) se skryjí, ať pod nástrojem nic neposkakuje. */
main:has(#vybrano:not([hidden])) :is(.zd-sek,.zaver),main:has(.faze.on:not(#k1)) :is(.zd-sek,.zaver){display:none}
.zd-sek{padding:64px 0}
.zd-sek.sedy{background:var(--panel)}
.zd-sek h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:12px 0 26px;text-wrap:balance}
.kroky3,.karty3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kroky3{counter-reset:k}
.kroky3>div,.karty3>div{background:#fff;border:1px solid var(--linka);border-radius:12px;padding:22px}
.kroky3>div:before{counter-increment:k;content:counter(k);display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--cihla);color:#fff;font-weight:800;margin-bottom:14px}
.kroky3 b,.karty3 b{display:block;font-size:1.06rem;margin-bottom:4px}
.kroky3 p,.karty3 p{margin:0;color:#4A5560;font-size:.95rem}
.karty3 i{display:block;width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--linka);margin-bottom:14px}
.faq{max-width:820px}
.faq details{background:#fff;border:1px solid var(--linka);border-radius:12px;padding:0 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:800;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--cihla);font-weight:800;font-size:1.3rem;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0 0 16px;color:#4A5560}
.zaver{background:var(--bridlice);color:#E9ECF0;padding:56px 0}
.zaver .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.zaver h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 6px}
.zaver p{margin:0;color:#A9B4BC}
.zaver .akce{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap}
.zaver .odk{color:#7CB3E8;font-weight:800;font-size:1.08rem;text-decoration:none;border-bottom:2px solid transparent}
.zaver .odk:hover{border-color:currentColor}
@media(max-width:960px){.kroky3,.karty3{grid-template-columns:1fr}}
@media(max-width:560px){.zd-sek,.zaver{padding:44px 0}}