/* ══════════════════════════════════════════════════════════════════════════
   /jak-to-funguje — styly JEN pro tuhle stránku. Načítá se přes $extra_css.

   Jediný vlastní prvek je dvojice sloupců „děláme my / potřebujeme od vás".
   ⚠️ Býval tu i třetí sloupec „co neděláme" — Alexandr ho 11. 8. 2026 nechal
   odstranit. Styl `.split-col--no` je proto pryč; kdyby se něco takového
   vracelo, ať se to napíše znovu a s rozmyslem.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ align-items:start je tu schválně. Bez něj se karty roztáhnou na stejnou
   výšku podle té delší a pod kratším sloupcem zůstane prázdné místo — vypadá
   to, že tam něco chybí (Alexandr 11. 8. 2026). Každá karta má končit tam,
   kde končí její obsah. */
.split{display:grid;gap:18px;grid-template-columns:1fr;align-items:start}
@media(min-width:820px){ .split{grid-template-columns:1fr 1fr;gap:24px} }

.split-col{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px 22px}
.split-col h3{display:flex;align-items:center;gap:10px;font-size:1.06rem;
  margin:0 0 .9em;line-height:1.3}
.split-col h3 svg{width:22px;height:22px;flex:none;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.split-col ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.split-col li{color:var(--muted);font-size:.96rem;line-height:1.5}
.split-col li b{display:block;color:var(--navy);font-weight:600;margin-bottom:1px}

/* Zelená = co dostanete v ceně. */
.split-col--us{border-color:var(--green)}
.split-col--us h3 svg{stroke:var(--green-600)}
/* Oranžová = co potřebujeme od vás. */
.split-col--you h3 svg{stroke:var(--orange)}