/* ═══════════════════════════════════════════════════════════════════════════
   ŘEŠENÍ PRO STĚHOVACÍ FIRMY — doplňkové styly JEN pro /reseni/stehovaci-firmy.
   Načítají se přes $extra_css, ostatní stránky si soubor nevyžádají.

   ⚠️ NIC TU NEPŘEPISUJE base.css. Všechny vlastní třídy začínají `st-`, takže
   se nemůžou potkat se sdílenými styly ani s tím, co si dělají sourozenecké
   stránky. Jediná pravidla vázaná na cizí jména jsou doladění `.site-window`
   a `.pricing-note` UVNITŘ `st-` bloků — jsou komentovaná na místě a mimo
   tuhle stránku se neuplatní.

   Barvy VÝHRADNĚ z proměnných base.css (navy, oranžová, muted, border,
   surface, bg). Žádná nová paleta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HLAVIČKA — vlevo text, vpravo poměr návštěv a poptávek.
   Na mobilu jeden sloupec: text napřed, poměr pod ním.
   ═══════════════════════════════════════════════════════════════════════════ */
.st-hero{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:940px){
  .st-hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px}
}
.st-hero-copy .cta-actions{margin-top:26px}
.st-hero-note{font-size:.92rem;color:var(--muted);margin:16px 0 0}

/* Poměr 1 ku 13 — třináct koleček, jedno oranžové. Poměr je vidět dřív, než
   se přečte popisek, a je pravdivý: 41 poptávek z 529 návštěv = 7,8 %, tedy
   zhruba každý třináctý návštěvník. Žádná jiná interpretace čísel tu není. */
.st-conv{margin:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:22px 22px 20px;
  max-width:460px;justify-self:center;width:100%}
.st-conv-top{font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.02rem;line-height:1.35;margin:0 0 16px}
.st-conv-top b{color:var(--orange-600);font-weight:700}
/* Pevná mřížka 7 + 6: kolečka drží řádek na jakékoli šířce a oranžové zůstává
   poslední, takže se dá „dopočítat" očima zleva doprava. */
.st-dots{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-bottom:16px}
.st-dots span{aspect-ratio:1;border-radius:50%;background:var(--navy-tint);
  border:1px solid var(--border);display:block}
.st-dots .is-on{background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(239,96,29,.16)}
.st-conv-note{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5;
  border-top:1px solid var(--border);padding-top:14px}
.st-conv-note b{color:var(--navy);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════════
   2. PÁS ČÍSEL — čtyři doložené údaje. Váhu nese typografie, ne rámeček
   (stejná logika jako .statband na homepage, jen o jeden sloupec víc).
   ═══════════════════════════════════════════════════════════════════════════ */
.st-client{display:flex;justify-content:center;margin:0 0 26px}
.st-client img{height:44px;width:auto}

.st-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 16px;text-align:center}
@media(min-width:900px){
  .st-stats{grid-template-columns:repeat(4,1fr);gap:0}
  .st-stat + .st-stat{border-left:1px solid var(--border)}
}
.st-stat{padding:0 12px}
.st-stat b{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(2.3rem,9vw,3.4rem);line-height:1;letter-spacing:-.035em}
.st-stat b sup{color:var(--orange);font-size:.42em;font-weight:700;top:-.85em;
  position:relative;margin-left:.02em}
.st-stat span{display:block;font-weight:600;color:var(--navy);margin-top:10px;font-size:1rem}
.st-stat small{display:block;color:var(--muted);font-size:.9rem;margin-top:5px;line-height:1.45}

/* Vysvětlující poznámka pod prvkem — jinde na stránce dělá totéž
   (pod dotazy, pod schématem, pod mapou stránek). */
.st-note{max-width:70ch;margin:26px auto 0;text-align:center;color:var(--muted);
  font-size:.97rem;line-height:1.6}

/* Okno prohlížeče s celým webem klienta. Rám a stín jsou tady, posouvání
   a lišta jsou ze sdíleného `.site-window` v base.css.
   Výřez je vyšší než výchozích 300 px: tohle je hlavní důkaz na stránce,
   ne doplněk vedle textu. */
.st-win{margin:34px auto 0;max-width:720px}
.st-win .site-window{border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-lg);background:var(--surface)}
.st-win .site-window-view{max-height:460px}
@media(max-width:679px){ .st-win .site-window-view{max-height:300px} }
.st-win figcaption{margin-top:14px;text-align:center;color:var(--muted);font-size:.93rem;
  max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.55}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CO LIDÉ HLEDAJÍ — tři skupiny dotazů. Každý dotaz vypadá jako řádek
   ve vyhledávacím poli, aby bylo poznat, že je to napsaný dotaz, ne naše
   odrážka. ⚠️ Jsou to příklady tvarů dotazů, ne naměřená data — píše se to
   pod nimi ve `.st-note`.
   ═══════════════════════════════════════════════════════════════════════════ */
.st-queries{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:760px){ .st-queries{grid-template-columns:repeat(3,1fr);gap:22px} }
.st-qgroup h3{font-size:1.06rem;margin:0 0 14px;color:var(--navy)}
.st-qgroup ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.st-qgroup li{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:11px 16px;
  font-size:.95rem;color:var(--ink);line-height:1.3}
.st-qgroup svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SCHÉMA CESTY POPTÁVKY — tři zdroje → jedna stránka → tři cesty k telefonu.
   Spojnice jsou inline SVG BEZ TEXTU, roztažené přes celou šířku
   (`preserveAspectRatio: none`). Aby se přitom nezdeformovala tloušťka čar,
   má každá cesta `vector-effect="non-scaling-stroke"` — jinak by na širokém
   monitoru byly svislé části vlasové a vodorovné tlusté.
   ═══════════════════════════════════════════════════════════════════════════ */
.st-flow{max-width:860px;margin:0 auto}
.st-flow-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:600px){ .st-flow-row{gap:18px} }
.st-node{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 10px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:6px}
.st-node svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--orange);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-node b{font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:.96rem;line-height:1.25}
.st-node span{font-size:.82rem;color:var(--muted);line-height:1.4}
/* Výstupní uzly jsou tmavé: je to konec cesty, tedy to, co si má člověk
   odnést — poptávka končí u vás, ne na cizí platformě. */
.st-node--out{background:var(--navy);border-color:var(--navy);padding:14px 10px}
.st-node--out b{color:#fff}
.st-node--out svg{stroke:var(--orange)}

.st-join{display:block;width:100%;height:44px;fill:none}
.st-join path{stroke:var(--border);stroke-width:2.4;stroke-linecap:round}
@media(min-width:600px){ .st-join{height:54px} }

/* Střed schématu — jediný oranžově orámovaný prvek, protože je to místo,
   které stavíme my. */
.st-hub{background:var(--orange-tint);border:1px solid rgba(239,96,29,.38);
  border-radius:var(--radius);padding:18px 20px;text-align:center;
  display:flex;flex-direction:column;gap:6px}
.st-hub b{font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:1.1rem}
.st-hub span{color:var(--muted);font-size:.93rem;line-height:1.5;max-width:52ch;
  margin:0 auto}

/* ── Model sdílené poptávky vedle poptávky z vlastního webu ────────────────
   ⚠️ Popisuje se MODEL, nikdy konkrétní firma (CLAUDE.md §6). */
.st-vs{display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px}
@media(min-width:760px){ .st-vs{grid-template-columns:1fr 1fr;gap:20px} }
.st-vs-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px}
.st-vs-box--us{border-color:rgba(239,96,29,.38);background:var(--surface);
  box-shadow:var(--shadow)}
.st-vs-lab{display:block;font-family:var(--font-head);font-weight:600;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.st-vs-box--us .st-vs-lab{color:var(--orange-600)}
.st-vs-box svg{display:block;width:100%;max-width:240px;height:auto;margin:0 auto 12px}
.st-vs-box .who{fill:var(--navy)}
.st-vs-box .ln{stroke:var(--border);stroke-width:2;fill:none}
.st-vs-box .firm{fill:var(--navy-tint);stroke:var(--border);stroke-width:1.5}
.st-vs-box .firm--on{fill:var(--orange);stroke:var(--orange)}
.st-vs-box--us .ln{stroke:var(--orange)}
.st-vs-box p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}

/* ═══════════════════════════════════════════════════════════════════════════
   5. ČASOVÁ OSA ODPOVĚDI — na mobilu svisle, od 860 px vodorovně.
   Je to HTML seznam, ne obrázek: text se tak zalomí, dá se označit a čtečka
   ho přečte ve správném pořadí. Spojnici kreslí ::before u položky, takže
   se u poslední sama nevykreslí.
   ═══════════════════════════════════════════════════════════════════════════ */
.st-time{list-style:none;padding:0;margin:0 0 34px;display:grid;grid-template-columns:1fr}
.st-time li{position:relative;padding:0 0 26px 40px}
.st-time li:last-child{padding-bottom:0}
.st-time li::before{content:"";position:absolute;left:13px;top:30px;bottom:4px;width:2px;
  background:var(--border)}
.st-time li:last-child::before{display:none}
.st-time-dot{position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;
  background:var(--surface);border:2px solid var(--border);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:.84rem;color:var(--muted)}
.st-time b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.04rem;line-height:1.3;margin-bottom:.2em}
.st-time span:not(.st-time-dot){display:block;color:var(--muted);font-size:.95rem;
  line-height:1.5}
/* Okamžik, o který v celé sekci jde. Barva je jediné zvýraznění — žádné
   dodatečné rámečky, jinak by z osy byla další řada karet. */
.st-time .is-hot .st-time-dot{background:var(--orange);border-color:var(--orange);color:#fff}
.st-time .is-hot b{color:var(--orange-600)}
@media(min-width:860px){
  .st-time{grid-template-columns:repeat(4,1fr);gap:0 22px}
  .st-time li{padding:46px 0 0}
  .st-time li::before{left:14px;right:-22px;top:13px;bottom:auto;width:auto;height:2px}
  .st-time-dot{top:0}
}

.st-fast{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:820px){ .st-fast{grid-template-columns:repeat(3,1fr);gap:22px} }
.st-fast-item{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px}
.st-fast-item h3{font-size:1.06rem;margin-bottom:.4em}
.st-fast-item p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.st-fast-item strong{color:var(--navy)}

/* ═══════════════════════════════════════════════════════════════════════════
   6. MAPA STRÁNEK — vlevo jedna úvodní stránka, vpravo stránka na každý dotaz.
   Dlaždice mají lištu se třemi tečkami, aby bylo na první pohled poznat, že
   jde o stránky webu, a ne o odrážky. ⚠️ Adresy jsou ukázka struktury.
   ═══════════════════════════════════════════════════════════════════════════ */
.st-map{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:900px){ .st-map{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:start} }
.st-map-lab{display:block;font-family:var(--font-head);font-weight:600;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.st-map-side > p{margin:14px 0 0;color:var(--muted);font-size:.94rem;line-height:1.55}
.st-map-side:last-child .st-map-lab{color:var(--orange-600)}

.st-pages{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){ .st-pages{grid-template-columns:1fr 1fr} }
.st-page{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 13px 13px}
.st-page-bar{display:flex;gap:5px;margin-bottom:9px}
.st-page-bar i{width:7px;height:7px;border-radius:50%;background:#cfd5e2;display:block}
.st-page-url{display:block;font-size:.78rem;color:var(--muted);word-break:break-all;
  margin-bottom:5px}
.st-page b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:.97rem;line-height:1.3}
/* Obvyklý web: jedna dlaždice, vybledlá. Rozdíl „jedna versus mnoho" tak
   udělá plocha, ne přídavné jméno. */
.st-page--muted{opacity:.62}

/* ═══════════════════════════════════════════════════════════════════════════
   7. VYLUČUJÍCÍ SLOVA — přeškrtnuté štítky uvnitř očíslovaného seznamu.
   Ukazují dotazy, na kterých se v tomhle oboru nejčastěji utopí rozpočet.
   ═══════════════════════════════════════════════════════════════════════════ */
.st-neg{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.st-neg li{position:relative;font-size:.88rem;color:var(--muted);background:var(--surface);
  border:1px dashed var(--border);border-radius:999px;padding:6px 13px;
  text-decoration:line-through;text-decoration-color:var(--orange);
  text-decoration-thickness:1.5px}
.bg-surface .st-neg li{background:var(--bg)}

/* Poznámka k ceně stojí v sekci s bílým pozadím, takže si (stejně jako
   .pricing-note na homepage) bere pozadí stránky, aby z ní nebyla bílá díra. */
.st-price-note{text-align:left;margin-top:26px}

@media(prefers-reduced-motion:reduce){
  .st-fast-item:hover{transform:none}
}