/* ═══════════════════════════════════════════════════════════════════
   JOB LEADER — stránka /cenik
   ───────────────────────────────────────────────────────────────────
   Barvy výhradně z tokens.css. Sdílené prvky (.container, .h1, .h2,
   .lead, .btn, .pill, .eyebrow, .card) přebírá site.css — tady je jen
   to, co existuje pouze na ceníku.
   ═══════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cenik-hero {
  padding-block: 72px 40px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 5%, var(--bg)), var(--bg));
}

/* ── Karty tarifů ────────────────────────────────────────────────── */

/* Čtyři karty vedle sebe, na mobilu pod sebou. Mezikrok 2×2 kvůli
   tabletu — čtyři sloupce se do 1024 px nevejdou čitelně. */
/* Karty sdílejí JEDNU mřížku řádků (subgrid), takže si odpovídající
   bloky sedí na stejné výšce napříč tarify: cena pod cenou, „Limity"
   vedle „Limitů", „Podpora" v jedné lince. Dřív byla každá karta
   samostatný flex sloupec, takže si každá zalamovala po svém a bloky
   se rozjížděly — u čtyř karet s různě dlouhými popisky to bylo vidět
   na první pohled.

   DVANÁCT ŘÁDKŮ odpovídá stavbě karty po č. 189: štítek · název ·
   podtitul · cena · podcena · MĚSÍC ZDARMA · tlačítko · čtyři údaje ·
   věta. Bylo jich čtrnáct, dokud karty nesly seznamy funkcí; ty se
   přestěhovaly do matice pod pásem.

   POČET ŘÁDKŮ MUSÍ SEDĚT NA POČET DĚTÍ V KAŽDÉ KARTĚ. Přidáš-li do jedné
   karty prvek, přidej ho i do ostatních — a když tam nepatří, dej tam
   .tarif-rocne-misto. Jinak se řádky rozjedou a věta přestane být
   v lince. Řádek s roční cenou mají Team a Business; Credit
   a Enterprise na jeho místě drží prázdný držák (č. 192 bod 2 —
   dřív to byl zelený štítek s měsícem zdarma z č. 144 bod 5).

   ⛔ ČTYŘI ÚDAJE JSOU U VŠECH ČTYŘ KARET TYTÉŽ a každý má vlastní
   řádek mřížky. Kdyby byly v jednom bloku, srovnaly by se jen tehdy,
   když se všechny popisky zalomí stejně — a „SILVER v paušálu" se
   při úzké kartě zalomí jinak než „Uživatelé". */
.tarify-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(12, auto);
  gap: 20px;
}
@media (max-width: 1180px) { .tarify-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .tarify-grid { grid-template-columns: 1fr; } }

.tarif {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 12;
  align-content: start;
  gap: 0;
  padding: 26px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tarif:hover { border-color: color-mix(in srgb, var(--violet) 40%, var(--line)); }

/* Překryv dělá klikatelnou celou kartu. Odkaz uvnitř má vyšší z-index,
   takže zůstává prokliknutelný. */
.tarif-prepinac {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.tarif-prepinac:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
.tarif > *:not(.tarif-prepinac) { position: relative; z-index: 2; pointer-events: none; }
.tarif .tarif-akce { pointer-events: auto; }

.tarif.is-vybrany {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 12%, transparent);
}

.tarif-hlavni {
  border-color: color-mix(in srgb, var(--violet) 55%, var(--line));
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--violet) 55%, transparent);
}

/* ── Roční cena: třetí řádek cenového bloku ──────────────────────────
   Příkaz č. 192 bod 2. Nahrazuje zelený štítek „měsíc zdarma", který
   Jiří 28. 8. zrušil.

   ŽÁDNÉ POZADÍ, ŽÁDNÝ RÁMEČEK, ŽÁDNÁ ZELENÁ. Orámované sdělení čte oko
   jako systémové hlášení — něco, co se odbaví a jde se dál. Nabídka
   se nesází do boxu, sází se do typografie. A zelená je v tokens.css
   stavová barva („v pořádku, hotovo"), ne obchodní.

   Sedí uvnitř cenového bloku, hned pod „bez závazku", takže nepřeruší
   linku cena → tlačítko.

   ⛔ DRŽÁK MUSÍ ZŮSTAT. Credit a Enterprise roční cenu nemají, ale karty
   sdílejí jednu mřížku řádků — bez držáku by se jim řádky posunuly
   a věta pod údaji přestala být v lince. Na rozdíl od zeleného štítku
   po něm ale nezbude vidět nic: je to řádek textu, ne box.
   OBA MUSÍ MÍT TUTÉŽ min-height, jinak se karty rozejdou všude, kde
   nejsou ve stejném pásu mřížky — viz komentář u .tarify-grid. */
.tarif-rocne,
.tarif-rocne-misto {
  display: block;
  margin-top: 12px;
  /* 33, ne 32: dva řádky verzálek na 12 px s prokladem 1,35 zabraly
     32,4 px a držák 32 — karty se rozešly o 0,4 px. Naměřeno při
     320 i 430 px, ne odhadnuto. */
  min-height: 33px;
}
.tarif-rocne {
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--violet7);
}

/* ⛔ ŠTÍTEK A JEHO PRÁZDNÉ MÍSTO MUSÍ MÍT TUTÉŽ VÝŠKU. Odznak
   „Doporučujeme" je s vnitřním odsazením vysoký 24,5 px; když měl
   držák jen 22, byla karta Business o 2,5 px vyšší než ostatní —
   a při dvou sloupcích se to nemělo čím srovnat, protože subgrid
   srovnává jen karty v TÉMŽE pásu (viz komentář u .tarify-grid). */
.tarif-stitek,
.tarif-stitek-misto {
  display: block;
  min-height: 25px;
  margin-bottom: 10px;
}
.tarif-stitek {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-cta);
  border-radius: 999px;
  padding: 4px 11px;
  /* ⛔ NE min-height: 0. Odznak je s odsazením přirozeně 24,5 px vysoký;
     jeho prázdný držák má 25. Kdyby si odznak výšku nevynutil taky,
     je karta Business o 0,5 px nižší a bod 10/1 příkazu č. 189
     (rozdíl 0 px) se minutím o půl pixelu nesplní. */
  min-height: 25px;
}

.tarif-nazev { font-size: 19px; font-weight: 750; color: var(--text); letter-spacing: -.01em; }
/* 63, ne 60: podtitul Businessu je nejdelší a při 360 px si vzal
   62,8 px, čímž kartu o 2,8 px přerostl. Naměřeno. */
.tarif-podtitul { margin-top: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.55; min-height: 63px; }

.tarif-cena {
  margin-top: 18px;
  font-size: 30px;
  font-weight: 780;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.1;
}
.tarif-cena em { font-style: normal; font-size: 15px; font-weight: 550; color: var(--muted); }
/* Dva řádky napevno: „bez závazku" je na jeden, „bez paušálu — aktivace
   nákupem balíčku, pak jen spotřeba" na dva. Bez min-height se karty
   ve dvou sloupcích rozejdou o 19,5 px. 13 px × 1,5 × 2 = 39. */
.tarif-podcena { margin-top: 5px; min-height: 39px; font-size: 13px; color: var(--muted); }


.tarif-akce { margin-top: 18px; width: 100%; text-align: center; justify-content: center; }

.tarif-skupina {
  margin-top: 22px;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}

.tarif-seznam { margin: 8px 0 0; padding: 0; list-style: none; }
.tarif-seznam li {
  position: relative;
  padding-left: 22px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
}
.tarif-seznam li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--emerald);
  border-bottom: 2px solid var(--emerald);
  transform: rotate(-45deg);
}

/* Zamčené položky — bez odškrtnutí, tlumeně. */
.tarif-zamcene { margin-top: 12px; }
.tarif-zamcene li { color: var(--faint); }
.tarif-zamcene li::before {
  border: 0;
  top: 8px; left: 4px;
  width: 8px; height: 2px;
  background: var(--faint);
  transform: none;
}

/* ── Čtyři údaje v kartě ─────────────────────────────────────────────
   Jméno vlevo tlumeně, hodnota vpravo tučně. Vlasová linka nad každým
   údajem drží oko na řádku; rámečky by ze čtyř údajů udělaly tabulku
   v kartě, a tabulka je až dole. */
.tarif-udaj {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.tarif-udaj:first-of-type { margin-top: 18px; }
.tarif-udaj-jmeno {
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.tarif-udaj-hodnota { font-weight: 680; color: var(--text); text-align: right; }

/* Jediná věta, která se u každé karty liší — co ten tarif odemyká
   jako první. Stojí pod údaji, ne mezi nimi: je to závěr, ne údaj. */
.tarif-veta {
  margin-top: 16px;
  /* Dva řádky napevno ze stejného důvodu jako u .tarif-podcena:
     věta Teamu je na dva řádky, ostatní na jeden. 13,5 × 1,6 × 2 = 43,2, zaokrouhleno na 44: desetinné výšky
     dávaly při 430 px rozdíl 0,1 px mezi kartami. */
  min-height: 44px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body);
}

/* ── Pás „V každém tarifu" ───────────────────────────────────────────
   Osm položek, které se dřív opakovaly ve čtyřech sloupcích. Tichý:
   žádná zaškrtávátka, protože nic nerozlišují — všechno je všude. */
.vsude {
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.vsude-nadpis {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.vsude-seznam {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 28px;
}
.vsude-seznam li { font-size: 14px; line-height: 1.55; color: var(--body); min-width: 0; }
@media (max-width: 900px) { .vsude-seznam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vsude-seznam { grid-template-columns: 1fr; } }

/* ── Srovnávací matice ───────────────────────────────────────────────
   ⛔ VLASTNÍ RÁM S overflow-x, NE ROLOVÁNÍ CELÉ STRÁNKY. Pod 900 px se
   tabulka nezmenšuje do nečitelna — první sloupec zůstane přišpendlený
   a zbytek se roluje uvnitř rámu. Rám má tabindex="0", aby se dal
   odrolovat i klávesnicí; bez toho je obsah za hranou nedostupný. */
/* ⛔ overflow-x TADY NENÍ, A JE TO ZÁMĚR. CSS neumí „vodorovně rolovat,
   svisle ne": jakmile se nastaví overflow-x: auto, prohlížeč vynutí
   i overflow-y: auto — a z rámu se stane rolovací kontejner. Tím se
   ROZBIJE LEPIVÉ ZÁHLAVÍ: sticky se přestane vztahovat k oknu a začne
   se vztahovat k rámu.

   Naměřeno 28. 8., než se to opravilo: záhlaví se nelepilo pod lištu
   webu (stálo na 177,9 px, lišta končí na 68), místo toho ho top: 68px
   odsunulo o 68 px DOLŮ dovnitř rámu — odtud prázdný bílý pruh nad ním
   a překryv prvního řádku o 23,5 px, takže „Uživatelé" byli useknutí
   v půlce. Nahlásil to Jiří snímkem.

   Rolovací rám je proto jen tam, kde je opravdu potřeba — pod 900 px
   (č. 189 bod 9). Nad ním se tabulka vejde a záhlaví se lepí k oknu. */
.matice-ram {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.matice-ram:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.matice { width: 100%; border-collapse: collapse; font-size: 14px; }


/* Lepivé záhlaví. Token --hlavicka, ne natvrdo 68 — lišta webu je
   sticky a matice se musí zastavit přesně pod ní. */
.matice thead th {
  position: sticky;
  top: var(--hlavicka);
  z-index: 2;
  padding: 13px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}
.matice thead th:first-child { text-align: left; }

/* ⛔ AŽ ZA pravidlem výš, ne před ním. Obě mají stejnou specificitu,
   takže rozhoduje pořadí — kdyby tenhle blok stál dřív, přebilo by ho
   top: var(--hlavicka) a oprava by se tiše neprojevila. Zkusil jsem to
   napoprvé obráceně. */
/* Pod 900 px se matice nezmenšuje do nečitelna: rám se rozjede
   vodorovně, první sloupec zůstane přišpendlený a STRÁNKA SAMA
   se vodorovně neroluje.
   ⛔ A ZÁHLAVÍ SE TU LEPÍ K RÁMU, NE K OKNU (top: 0, ne --hlavicka).
   Uvnitř rolovacího kontejneru je top měřený od jeho horní hrany;
   68 px by ho odsunulo dovnitř tabulky přes první řádky. */
@media (max-width: 900px) {
  .matice-ram {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .matice thead th { top: 0; }
}

/* První sloupec je přišpendlený, aby se při vodorovném rolování
   nedalo ztratit, o kterou schopnost jde. */
.matice th[scope="row"],
.matice thead th:first-child,
.matice .matice-skupina th {
  position: sticky;
  left: 0;
  background: var(--card);
}
.matice thead th:first-child { z-index: 3; }

.matice th[scope="row"] {
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--body);
  text-align: left;
  line-height: 1.5;
  min-width: 240px;
}
.matice td {
  padding: 11px 14px;
  text-align: center;
  color: var(--body);
  white-space: nowrap;
}
.matice tbody tr { border-top: 1px solid var(--line); }

/* Zvýrazňuje se CELÝ řádek — tabulka se čte očima po řádku, ne po
   buňce, a zvýrazněná buňka by oko poslala špatným směrem. */
.matice tbody tr:hover th[scope="row"],
.matice tbody tr:hover td { background: color-mix(in srgb, var(--violet) 5%, transparent); }
.matice tbody tr:hover th[scope="row"] { background: color-mix(in srgb, var(--violet) 5%, var(--card)); }

.matice-skupina th {
  padding: 18px 14px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--violet7);
  text-align: left;
}
.matice tbody.matice-skupina + tbody tr:first-child { border-top: 0; }

.matice .je-ano   { color: var(--emerald); font-weight: 700; }
.matice .je-ne    { color: var(--faint); }
.matice .je-hodnota { font-weight: 620; color: var(--text); white-space: normal; }

/* „?" není „neumíme" — je to čeká na rozhodnutí. Musí být vidět,
   že se na tom místě čeká, ne že tam nic není. */
.matice .je-otazka {
  color: var(--violet7);
  font-weight: 700;
  background: color-mix(in srgb, var(--violet) 7%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .matice tbody tr:hover th[scope="row"],
  .matice tbody tr:hover td { transition: none; }
}

.pod-kartami {
  margin-top: 28px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 76ch;
}

/* ── Kolik stojí přejít ──────────────────────────────────────────────
   Jemný fialový nádech, na něm bílý panel (č. 197). Tmavá plocha
   z č. 194 je pryč i s důvodem — ten zrušil č. 195, viz komentář
   v cenik.html nad sekcí.

   ⛔ PLNÁ BARVA, NE PŘECHOD. Svislý přechod #FBFAFF → #F4F1FE, který
   tu byl navržený jako první, začínal SVĚTLEJŠÍ než soused --bg:
       soused --bg          jas 95,4 %
       horní konec přechodu jas 96,1 %   → rozdíl +0,7 b.
       dolní konec          jas 89,3 %   → rozdíl −6,1 b.
   Na horním švu tedy nebyl rozdíl žádný a sekce se oddělovala až dole,
   kde už to nikomu k ničemu není. Plná #F4F1FD dává −6 b. na OBOU švech.

   ⛔ ODDĚLUJE TÓNEM, NE JASEM. Sousedé sedí na --bg (#F8FAFC), což je
   studená šedá; tohle je teplá fialová. Oko reaguje na změnu tónu dřív
   než na změnu jasu — proto to funguje i tak jemné.

   Bílý panel na nádechu vystoupí sám a jeho stín má fialový podtón,
   takže nevypadá jako špinavá šeď. A fialové tlačítko je tu jediná
   sytá barva na ploše: jeden akcent, použitý skoupě. */
#prejit {
  padding-block: clamp(64px, 7.5vw, 96px) clamp(56px, 6.5vw, 84px);
  background: #F4F1FD;
  border-block: 1px solid #E5DFFA;
}

.prejit-ocicko {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet7);
}

/* Nadpis sekce, ale ne .h2 — je to věta, ne titulek, a nese celou
   odpověď. Odtud i větší stupeň a těsnější proklad. */
.prejit-veta {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.024em;
  max-width: 17ch;
  text-wrap: balance;
  color: var(--text);
}
.prejit-lead {
  margin: 18px 0 0;
  font-size: 18px; line-height: 1.55;
  max-width: 52ch;
  color: var(--body);
}
.prejit-hlava { margin-bottom: clamp(36px, 4vw, 52px); }

/* Tři sloupce, cena třetí. ⛔ BEZ ČÍSLIC (č. 193 bod 3, převzato
   č. 194 bodem 4a): „co to stojí" není třetí krok postupu, je to údaj
   o celém postupu — a drobné číslice nad verzálkami z toho navíc
   dělaly vizuál návodu k použití, ne nabídky. */
.prejit-kroky {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.prejit-kroky > div {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid #DAD1F5;
}
.prejit-role {
  display: block;
  margin-bottom: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--violet7);
}
.prejit-kroky p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }

/* Linka na obalu, ne na odstavci — na odstavci končila v 62 ch,
   tedy uprostřed ničeho. */
.prejit-paticka {
  margin-top: clamp(36px, 4vw, 52px);
  padding-top: 22px;
  border-top: 1px solid #DAD1F5;
}
.prejit-paticka p {
  margin: 0;
  max-width: 64ch;
  font-size: 15px; line-height: 1.65;
  color: var(--text);
}

@media (max-width: 860px) { .prejit-kroky { grid-template-columns: 1fr; gap: 22px; } }

/* ── Startovací balíček ──────────────────────────────────────────── */

/* ── Startovací balíček ──────────────────────────────────────────────
   Panel uvnitř tmavé sekce #prejit (č. 195). Dřív to byl samostatný
   bílý pruh pod ní — nabídka oddělená od své ceny hranicí sekce.

   ⛔ A ZAVÍRÁ TO DÍRU V TRYCHTÝŘI: tlačítko na kartě tarifu Credit
   míří na #start a ten pruh do 29. 8. neměl ŽÁDNÉ tlačítko. Trychtýř
   tam člověka dovedl a pustil ho.

   Plocha i rámeček jsou vzorec .certcard ze site.css — na tmavém
   podkladu se nic nového nevymýšlí. */
.start-panel {
  margin-top: clamp(32px, 3.5vw, 44px);
  padding: clamp(24px, 3vw, 34px);
  display: grid;
  grid-template-columns: minmax(210px, 260px) 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  background: var(--card);
  border: 1px solid #E4DDFA;
  border-radius: var(--r-lg);
  /* Stín má fialový podtón — na nádechu vypadá jako světlo procházející
     značkovou barvou, ne jako špinavá šeď. */
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04),
              0 20px 44px -30px rgba(124, 58, 237, .5);
  /* Kotva #start je teď na <div>, ne na <section> — pravidlo
     `section[id]` ze site.css:1473 na něj nesahá a bez tohohle řádku
     by skok z karty Credit schoval horní hranu panelu pod lepící
     hlavičku. */
  scroll-margin-top: var(--hlavicka);
}
.start-levy { display: flex; flex-direction: column; min-width: 0; }
.start-castka {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--text);
}
.start-nazev { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--violet7); }
.start-obsah { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--body); }
.start-pravy { min-width: 0; }
.start-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--body); max-width: 62ch; }
.start-akce { margin-top: 20px; }
.start-pod { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--body); }

@media (max-width: 720px) {
  .start-panel { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Panel kreditů ───────────────────────────────────────────────── */

.prepinac-napoveda { margin-top: 10px; font-size: 13px; color: var(--faint); }

.meny {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 720px) { .meny { grid-template-columns: 1fr; } }

.mena {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.mena-nazev { font-size: 13px; font-weight: 750; letter-spacing: .1em; }
.mena-gold .mena-nazev { color: var(--amber); }
.mena-silver .mena-nazev { color: var(--indigo); }
.mena-popis { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.mena-cena {
  margin-top: 14px;
  font-size: 27px;
  font-weight: 780;
  letter-spacing: -.025em;
  color: var(--text);
}
.mena-cena em { font-style: normal; font-size: 14px; font-weight: 550; color: var(--muted); }
.mena p { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--body); }
.mena-stitek {
  margin-top: 16px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 8%, transparent);
  border-radius: 8px;
  padding: 6px 11px;
}

/* ── Tabulky ─────────────────────────────────────────────────────── */

/* Tabulka se posouvá uvnitř svého rámu — stránka se vodorovně
   neroluje nikdy. */
.tabulka-obal {
  overflow-x: auto;
  /* Náznak, že obsah pokračuje. Čtyři vrstvy pozadí: dvě krycí plochy
     přilepené k okrajům obalu (background-attachment: local) a dva
     stíny přilepené k oknu výřezu (scroll). Když je tabulka odrolovaná
     na kraj, krycí plocha stín překryje — stín je tedy vidět PRÁVĚ
     TEHDY, když je kam posouvat. Žádný JavaScript.
     Pozor na pořadí: krycí plochy musí být v seznamu první, jinak
     překryjí stíny natrvalo. */
  background:
    linear-gradient(to right, var(--card) 30%, transparent) left center,
    linear-gradient(to left,  var(--card) 30%, transparent) right center,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.16), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.16), transparent) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 18px 100%, 18px 100%;
  background-attachment: local, local, scroll, scroll;
  background-color: var(--card);
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
/* Posuvná oblast musí být vidět, když na ni skočí klávesnice. */
.tabulka-obal:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.tabulka { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 520px; }
.tabulka th,
.tabulka td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--body);
}
.tabulka th {
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 680;
  background: var(--bg);
  white-space: nowrap;
}
.tabulka tr:last-child td { border-bottom: 0; }
.tabulka .num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabulka .zvyrazneno { font-weight: 700; color: var(--text); }
.tabulka .tlumene { color: var(--faint); }
.tabulka .tlumene s { text-decoration-thickness: 1px; }
.tabulka .sleva { color: var(--emerald); font-weight: 650; }
.tabulka .bonus { color: var(--emerald); font-weight: 650; }
.tabulka .radek-top td { background: color-mix(in srgb, var(--violet) 5%, transparent); font-weight: 650; }
.nazev-balicku { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }

.pod-tabulkou { margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.7; max-width: 76ch; }

.balicky-nadpis { margin-top: 44px; }
.balicky-uvod { margin-top: 8px; font-size: 15px; color: var(--body); line-height: 1.7; max-width: 72ch; }

.silver-tabulky {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
/* Položky mřížky musí mít min-width: 0. Výchozí „auto" znamená, že si
   položka řekne o šířku svého nejužšího obsahu — a uvnitř je tabulka
   s min-width: 520px. Sloupec pak vyšel na 563 px v mřížce široké 350
   a stránka se dala posunout doprava (naměřeno na 390 px, příkaz č. 42).

   Vodorovné posouvání si řeší .tabulka-obal sám; ten ořez ale platí jen
   pro něj, ne pro jeho rodiče — proto to musí být i tady. */
.silver-tabulky > * { min-width: 0; }

@media (max-width: 980px) { .silver-tabulky { grid-template-columns: 1fr; } }

.tab-nadpis { margin: 20px 0 0; font-size: 15px; font-weight: 680; color: var(--text); }
.tab-nadpis span { font-weight: 500; color: var(--muted); }
.tab-nadpis span::before { content: " · "; }

/* ── Návratnost ──────────────────────────────────────────────────── */

.navratnost-in { max-width: 68ch; }
.navratnost-in p { margin-top: 16px; font-size: 16px; line-height: 1.75; color: var(--body); }

/* ── Nábor na klíč ───────────────────────────────────────────────── */

.klic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 780px) { .klic-grid { grid-template-columns: 1fr; } }

.klic { display: flex; flex-direction: column; padding: 26px 24px; }
.klic-nazev { font-size: 17px; font-weight: 700; color: var(--text); }
.klic-cena {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 780;
  letter-spacing: -.03em;
  color: var(--amber);
}
.klic-prepocet { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.klic p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--body); }
.klic-premium { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }

/* ── Časté otázky ────────────────────────────────────────────────── */

.faq { max-width: 76ch; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 36px 18px 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  position: relative;
}
/* Ikona harmoniky se přesunula do site.css (příkaz č. 48). Byla tady
   a v site.css zároveň, každá jiná — plus/minus proti šipce — a jelikož
   se obě sady trefily na tentýž prvek, vzal si výsledek znak z jedné
   a otočení z druhé. Otočené plus je křížek; odtud dvě ikony přes sebe.
   Ikona je společná součástka, patří tedy do sdíleného souboru. */
.faq summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
.faq details p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  max-width: 70ch;
}

/* ── Zkrácený přehled tarifů na homepage ─────────────────────────── */
/* Plný ceník je na /cenik; tady jen čtyři karty s odkazem. */

.prehled-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1080px) { .prehled-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .prehled-grid { grid-template-columns: 1fr; } }

.prehled {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.prehled:hover {
  border-color: color-mix(in srgb, var(--violet) 45%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -26px color-mix(in srgb, var(--violet) 60%, transparent);
}
.prehled-hlavni {
  border-color: color-mix(in srgb, var(--violet) 55%, var(--line));
  box-shadow: 0 16px 36px -26px color-mix(in srgb, var(--violet) 55%, transparent);
}
.prehled-stitek {
  align-self: flex-start;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-cta);
  border-radius: 999px;
  padding: 3px 10px;
}
.prehled-nazev { font-size: 16px; font-weight: 720; color: var(--text); }
.prehled-cena {
  margin-top: 8px;
  font-size: 25px;
  font-weight: 780;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.15;
}
.prehled-cena em { font-style: normal; font-size: 13.5px; font-weight: 550; color: var(--muted); }
.prehled-pod { margin-top: 6px; font-size: 13.5px; color: var(--body); line-height: 1.5; }
.prehled-pro { margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* Spodní řádek karet drží jednu linku bez ohledu na délku popisu výš. */
.prehled { min-height: 100%; }

/* Vystředění pruhu s odkazem na plný ceník. */
.cenik-odkaz { text-align: center; margin-top: 28px; }

/* Odkaz uvnitř tmavého panelu evropského provozu — bez tohohle splyne
   s běžným textem a čtenář nepozná, že seznam zpracovatelů je proklik. */

/* ── Sjednocení odstupů s titulní stranou (zadání 13. 8. 2026) ───── */
/* Hero na /cenik mělo mezi podtitulkem a kartami zhruba 120 px prázdna
   navíc oproti titulce a naopak těsnější přechod do dalších sekcí.
   Hodnoty jsou proto shodné s .uvod .hero. */
.cenik-hero { padding-block: 72px 24px; }
#tarify { padding-block: clamp(48px, 6vw, 72px) clamp(64px, 8vw, 96px); }
#kredity { padding-block: clamp(72px, 10vw, 120px); }

/* Poznámka pod kartami Náboru na klíč: koruny jsou přepočet při základní
   ceně GOLD, ne pevná cena (příkaz č. 72). Drobná, ale ne šedivá do
   nečitelnosti — je to cenová výhrada, ne tiráž. */
.klic-poznamka {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--body);
}

/* ═══════════════════════════════════════════════════════════════════
   KALKULAČKA TARIFU (příkaz č. 65)
   ═══════════════════════════════════════════════════════════════════ */

/* ── DOTAZNÍK STOJÍ NAD CENÍKEM (příkaz č. 181, odstupy č. 182) ─────
   Vlastní pás mezi panelem zakladatele a tabulkou tarifů.

   ⚠ ODSTUPY BYLY V PRVNÍ VERZI ŠPATNĚ. Jiří: „to je strašně
   roztahané." Změřeno při 1440 px:

     od e-mailu pod panelem k rámu dotazníku   176 px
     od rámu ke kartám tarifů                   88 px
     samotný rám                               378 px

   Dvě třetiny výšky rámu v prázdnu okolo. Vzniklo to sečtením dvou
   odsazení, která o sobě nevěděla: panel má dole 112 px sekčního
   rytmu a pás si k tomu přidal vlastních 64.

   SPRÁVNÉ ČTENÍ TÉHLE ČÁSTI STRÁNKY:
     panel zakladatele  = kapitola  (kdo za tím stojí)
     dotazník + tarify  = JEDNA kapitola  (co potřebujete → co to stojí)

   Odstup proto NENÍ symetrický. Nad dotazníkem je předěl mezi
   kapitolami, pod ním jen krok uvnitř jedné. 72 nahoře, 48 dole.
   Symetrických 88/88 by z dotazníku udělalo ostrov mezi dvěma
   kapitolami — a to je přesně ten pocit, který Jiří popsal.

   PRAVIDLO 6: .dotaznik-pruh je nový prefix a do žádného sousedského
   selektoru rytmu nespadá — odstupy si proto nese sám, na obě strany.
   Tady to znamená doslova obě: bere je i sousedům. */
.dotaznik-pruh { padding-block: 0; }

/* Panel zakladatele je na téhle stránce VŽDY následovaný dotazníkem,
   takže se to dá napsat rovnou, bez :has(). Kdo sem mezi ně někdy
   něco vloží, musí tuhle hodnotu vrátit na sekční rytmus. */
#slovo-zakladatele { padding-bottom: clamp(48px, 5vw, 72px); }
.dotaznik-pruh + #tarify { padding-top: clamp(32px, 3.4vw, 48px); }

.kalk {
  /* margin-top odsud pryč: dřív visel pod kartami tarifů a musel se
     od nich odrazit sám. Teď má odstup sekce. */
  padding: clamp(22px, 3vw, 34px) clamp(24px, 3.5vw, 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.kalk-hlava p { margin: 6px 0 0; font-size: 15px; color: var(--body); }

/* ── ČTYŘI OTÁZKY VE DVOU SLOUPCÍCH, NE POD SEBOU ───────────────────
   Jiří: „teď je to strašně dlouhé a rozsáhlé." Změřeno: čtyři otázky
   pod sebou stály 470 px, s hlavou a rámem 600.

   Ve dvou sloupcích to není o nic hůř čitelné, protože každá otázka
   je uzavřený celek — číslo, otázka, volby, případná poznámka. Není
   to formulář, kde jedno pole navazuje na druhé; jsou to čtyři
   nezávislé přepínače. Dvě řady po dvou jsou pro ně přirozený tvar.

   align-items: start — poznámku mají jen otázky 3 a 4, takže buňky
   nejsou stejně vysoké a natahovat je na stejnou výšku by vyrobilo
   díry pod volbami. */
.kalk-otazky {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px 44px;
  margin-top: 24px;
}
@media (max-width: 860px) { .kalk-otazky { grid-template-columns: 1fr; gap: 22px; } }
/* fieldset kvůli významu (skupina voleb má svou legendu), ne kvůli
   vzhledu — vlastní rámeček a odsazení prohlížeče se proto ruší. */
.kalk-otazka { margin: 0; padding: 0; border: 0; min-width: 0; }
.kalk-otazka legend {
  padding: 0;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--text);
}
.kalk-cislo {
  display: inline-block;
  min-width: 22px;
  margin-right: 4px;
  color: var(--violet7);
  font-weight: 750;
}
.kalk-napoveda { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

.kalk-volby { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.kalk-volba {
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--body);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.kalk-volba:hover { border-color: var(--violet); }
.kalk-volba:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* Zvolená volba se pozná i bez barvy: tučnější písmo a dvojnásobný
   rámeček. Kdo barvy nerozliší, jinak neví, na co klikl. */
.kalk-volba[aria-pressed="true"] {
  background: color-mix(in srgb, var(--violet) 10%, var(--card));
  border-width: 2px;
  border-color: var(--violet7);
  padding: 9px 15px;          /* o pixel míň, ať silnější rámeček nehne řádkem */
  font-weight: 650;
  color: var(--violet7);
}

.kalk-vysledek { display: none; }
.kalk-vysledek.je-videt {
  display: block;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.kalk-stitek {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.kalk-tarif {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--text);
}
.kalk-tarif span { font-family: var(--font); font-size: 16px; font-weight: 550; color: var(--body); }
.kalk-duvod { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--body); max-width: 68ch; }

.kalk-rozpis { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kalk-radek {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--body);
  border-bottom: 1px solid var(--line);
}
.kalk-radek:last-child { border-bottom: 0; }
.kalk-radek b { white-space: nowrap; color: var(--text); }
.kalk-radek-tlumeny { color: var(--muted); }
.kalk-soucet { background: var(--bg); font-weight: 650; }
.kalk-soucet b { font-size: 16px; }

.kalk-drobne { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.kalk-drobne a { color: var(--violet7); font-weight: 600; }
.kalk-akce { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }