/*
 * ispadmin.eu – styly webu. Směr C – Mozaika (design/proposal.html, vybráno 30. 9. 2026).
 * Vlastní CSS bez frameworku a bez build kroku. Světlý vzhled; tmavá je patička (logo v ní má barevný symbol
 * a bílý nápis) a závěr podstránek (.page-cta). Bílé logo se nepoužívá. Plochy podle role: --band, --sheet-shadow (část 2).
 * Dvě tlačítka (část 5), zaoblení --radius / --radius-lg, stíny podle role (6j, design/7-sjednoceni-prvku.html).
 *
 *  1. Písmo            5. Tlačítka              9. Formuláře
 *  2. Barvy a rozměry  6. Hlavička a menu      10. Patička
 *  3. Základ           7. Obsah stránek        11. Hlavní stránka
 *  4. Pomocné třídy    8. Text článků (.prose) 12. Užší obrazovky
 *                                              13. Tisk
 */

/* ---------- 1. Písmo ----------
 * Onest, © 2021 The Onest Project Authors (github.com/simpals/onest), SIL Open Font License 1.1. Verze v11 z Google Fonts
 * (7. 10. 2026), proměnná osa wght 100–900 (osu šířky nemá), z vlastního serveru. Vybráno místo Bricolage Grotesque
 * (design/14-pismo.html). Dva soubory podle znaků (rozsahy jako Google Fonts): latin-ext obsahuje české znaky.
 * Soubory se odkazují bez verze – při výměně písma změnit i název souboru (assets/.htaccess). */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Barvy a rozměry ---------- */
:root {
  color-scheme: light;

  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --paper: #ffffff;
  --surface: #f5f6fa;      /* drobnosti: horní lišta, sudé řádky tabulky, najetí myší (proti bílé jen 1,08 : 1) */
  /* Plochy podle role (design/6-vylepseni-designu.html, schváleno 1. 10. 2026): pás = hranice části podstránky přes celou
     šířku, list = bílá se stínem pro místo, kde se něco dělá (formulář, přihlášení do dema, stažení). */
  --band: #e6e7f0;         /* modrá z loga 12 %, kontrast 1,23 : 1 proti bílé; vedlejší text na něm 5,3 : 1 */
  /* Stíny podle role (6j): zvednuté = listy a screenshoty, po najetí myší na screenshot / obrázek silnější, vyskočené
     (--shadow) = rozbalené menu. Vlastní stín má jen vybraná záložka screenshotů a prohlížeč obrázků (na tmavé ploše). */
  --sheet-shadow: 0 1px 2px rgba(41, 42, 74, 0.08), 0 22px 48px -20px rgba(41, 42, 74, 0.34);
  --sheet-shadow-hover: 0 1px 2px rgba(41, 42, 74, 0.12), 0 28px 56px -18px rgba(41, 42, 74, 0.48);
  --ink: #292a4a;         /* nejtmavší barva loga: text, tlačítka, odrážky */
  --ink-soft: #3d3f5f;     /* tmavší vedlejší text: popisky screenshotů, obsah stránky (ne popisy a nevybrané záložky – ty --muted) */
  --muted: #5a5c77;        /* vedlejší text (kontrast 6,5 : 1 na bílé) */
  --line: #e2e4ec;         /* linky a mřížka – jen ozdoba, nenese informaci */
  --field-line: #858899;   /* okraje polí formuláře (kontrast 3,5 : 1, WCAG 1.4.11) */
  --accent: #2d3881;       /* najetí myší */
  --focus: #e04a24;        /* rámeček fokusu: aspoň 3 : 1 všude, kde je (bílá 4,1, pás a tónované plochy 3,3, tmavá 4,3 : 1) */
  /* Fokus polí formuláře (i přepínačů a zaškrtávacích polí): modrá z loga. Červenooranžová --focus u pole vypadala jako
     chyba (uživatel 5. 10. 2026) – červená je jen chyba pole (--error). Formuláře jsou jen na světlých plochách
     (bílá 10,5, pás 8,5 : 1). */
  --focus-field: #2d3881;
  --error: #b4233a;        /* chyba pole formuláře: text a okraj (kontrast 6,5 : 1 na bílé, 6 : 1 na --surface) */
  --shadow: 0 12px 28px rgba(41, 42, 74, 0.14);   /* vyskočené: rozbalené menu, menu na mobilu */

  /* Tmavá patička. Tmavší než --ink, aby byly vidět i nejtmavší trojúhelníky symbolu loga (#292a4a, #2d3881). */
  --night: #17182f;
  --night-ink: #c3c5de;    /* text patičky (kontrast 10 : 1) */
  --night-line: rgba(255, 255, 255, 0.14);

  /* 12 barev modulů, všechny z loga. Jen jako tvar (trojúhelník, pruh), ne na text – světlé nemají kontrast. */
  --m-zakladni: #2d3881;
  --m-fakturace: #ea9600;
  --m-nmm: #009d3c;
  --m-helpdesk: #cb3345;
  --m-planovani: #e13c42;
  --m-iptv: #00a389;
  --m-sklad: #70253f;
  --m-radius: #008641;
  --m-dealer: #ffc742;
  --m-cmts: #007e61;
  --m-gpon: #007c53;
  --m-obchodni-pripady: #ffaa0e;
  --m-napojeni: #f0582e;   /* oblast Napojení a API na Co ISPadmin umí? – jediná barva loga, kterou nemá žádný modul */
  /* Trojúhelník modulu (část 4): rovnostranný, špičkou doprava, rohy zaoblené kružnicí o poloměru 10 % strany, viewBox
     těsně kolem tvaru. Prvek musí mít poměr stran --tri-ratio – maska se roztáhne na celý prvek a fazety na něm závisí. */
  --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76.6 85.36'%3E%3Cpath d='M15 1.34L71.6 34.02A10 10 0 0 1 71.6 51.34L15 84.02A10 10 0 0 1 0 75.36L0 10A10 10 0 0 1 15 1.34Z'/%3E%3C/svg%3E");
  --tri-ratio: 0.8974;

  --wrap: 1160px;
  --gutter: 40px;
  --radius: 4px;        /* ovládací prvky a obrázky: tlačítka, pole, záložky, screenshoty, fotky, odkazy na soubory */
  --radius-lg: 6px;     /* plochy: listy, panely, karty, tmavý závěr (6j). Obal záložek 8 px = záložka 4 px + okraj 4 px. */
  --section: clamp(3.5rem, 2.54rem + 4.08vw, 5.5rem);   /* 56 px na mobilu → 88 px od šířky 1160 px */

  --text: 1.0625rem;                                       /* 17 px */
  --h1: clamp(2.75rem, 1.735rem + 4.33vw, 4.875rem);       /* 44 → 78 px */
  --h2: clamp(2.25rem, 1.77rem + 2.04vw, 3.25rem);         /* 36 → 52 px */
  --h-page: clamp(2.125rem, 1.65rem + 2.04vw, 3.125rem);   /* nadpis stránky a článku: 34 → 50 px */

  /* Pohyb (6o, design/13-animace.html, schváleno 5. 10. 2026): dvě křivky pro pohyb, pro barvy ease. V rozhraní vše pod
     300 ms, déle jen hláška formuláře a stavebnice (jednou za návštěvu). Nikde ease-in – zdrží začátek, na který se člověk
     dívá. Křivku --ease-out čte i prohlížeč obrázků (site.js). Mozaika v úvodu hlavní stránky má vlastní (část 11). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* objevení a zmizení: menu i šipka, záložky, hlášky, stisk, stavebnice */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* pohyb po obrazovce: linka záložky */
  --t-hover: 150ms;      /* barvy, pozadí a stín při najetí myší (křivka ease) */
  --t-intent: 60ms;      /* prodleva před otevřením menu Funkcí najetím myší – přejetí myší přes položku ho neotevře */
  --t-press: 160ms;      /* stisk tlačítka */
  --t-open: 200ms;       /* menu, oblasti Funkcí, prolnutí screenshotů, popisek v prohlížeči obrázků */
  --t-close: 140ms;      /* zavření menu */
  --t-move: 240ms;       /* linka vybrané záložky */
  --t-enter: 320ms;      /* hláška formuláře (jednou za návštěvu) */
  --t-explain: 420ms;    /* stavebnice (vysvětluje, jednou za návštěvu) */
  --motion: 1;           /* posuny, otočení a zmenšení se jím násobí; s omezením pohybu 0 (část 3) */
}

/* ---------- 3. Základ ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }
main:focus { outline: none; }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

img, svg, video { display: block; max-width: 100%; height: auto; }
/* <picture> s WebP zmenšeninami (app/images.php) nemá vlastní box – <img> se rozvrhne, jako by obal nebyl. */
picture { display: contents; }

/* Barva a pozadí odkazů (menu, patička, stránkování, dlaždice ceníků, loga partnerů…) se při najetí myší mění plynule.
 * Tlačítka .btn mají vlastní přechod (část 5). */
a {
  color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease;
}
/* Najetí myší jen na zařízení s myší – na dotyku by po klepnutí zůstalo viset. Platí pro všechna :hover na webu. Pohyb
 * při najetí (otevření menu Funkcí, šipka u odkazu na oblast) navíc jen s přesným ukazatelem (pointer: fine) – některá
 * dotyková zařízení se stylusem hlásí hover: hover. */
@media (hover: hover) {
  a:hover { color: var(--accent); text-decoration-thickness: 2px; }
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

::selection { background: #ffc742; color: var(--ink); }

/* Omezení pohybu: méně a jemněji, ne nic (WCAG 2.3.3, rozhodnuto v 6o kroku 1). Průhlednost a barvy zůstanou, posuny,
 * otočení, zmenšení a postupné objevování zmizí – násobí se --motion. Mozaika v úvodu má vlastní pravidlo (část 11),
 * prohlížeč obrázků se řídí v site.js. */
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}

/* ---------- 4. Pomocné třídy ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
/* Pás na hlavní stránce (Všechno o klientovi, Novinky, Jak začít) – stejná barva jako pás na podstránkách (6j). */
.section-surface { background: var(--band); }

/* Pás na podstránce: pozadí přes celou šířku okna, obsah zůstává zarovnaný se sloupcem stránky. Pozadí do stran kreslí
 * border-image (přesah je jen kresba – stránka se nerozšíří a vodorovný posuvník nevznikne). Barva --band-bg, jinak --band.
 * Pás = úvod Ceníku (.page-head), části s formulářem, začátek oblasti na Funkcích (.topic-head, v barvě modulu) a blok
 * pod článkem (.article-about). */
.band, .prose :is(.contact-split, .offer-split, .demo-contact), .prose .topic-head, .article-about {
  border-image: linear-gradient(var(--band-bg, var(--band)) 0 0) fill 0 / / 0 100vw;
}

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
}
.skip-link:focus, .skip-link:hover { top: 12px; color: #fff; }

.tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Slovo se spojovníkem, které se nemá rozdělit na konci řádku („e-mailová“). */
.nowrap { white-space: nowrap; }

/* Barva modulu pro prvek i jeho obsah (--c): <section class="module m-fakturace">, položky rozcestníku modulů. */
.m-zakladni { --c: var(--m-zakladni); }
.m-fakturace { --c: var(--m-fakturace); }
.m-nmm { --c: var(--m-nmm); }
.m-helpdesk { --c: var(--m-helpdesk); }
.m-planovani { --c: var(--m-planovani); }
.m-iptv { --c: var(--m-iptv); }
.m-sklad { --c: var(--m-sklad); }
.m-radius { --c: var(--m-radius); }
.m-dealer { --c: var(--m-dealer); }
.m-cmts { --c: var(--m-cmts); }
.m-gpon { --c: var(--m-gpon); }
.m-obchodni-pripady { --c: var(--m-obchodni-pripady); }
.m-napojeni { --c: var(--m-napojeni); }

/* Trojúhelník modulu (7. 10. 2026, design/17-trojuhelniky.html, varianta C – fazety; dřív ostrý clip-path). Tvar je
 * maska --tri (část 2), šířka z poměru stran, výšku a místo určuje pravidlo prvku. Velké trojúhelníky (nadpisy, moduly,
 * čísla kroků) mají tři plošky od těžiště ke rohům v odstínech barvy --c – jako trojúhelníky symbolu loga v odstínech
 * jedné barvy. Světlo shora: horní ploška světlejší, levá v barvě --c, dolní tmavší.
 * Odstíny v OKLCH – mění se jen světlost, odstín zůstává (žlutá ztmavne do oranžové jako v logu); prohlížeč bez
 * relativních barev ukáže plochý trojúhelník v barvě --c. Hrany plošek ±0,5° kvůli vyhlazení. Malé trojúhelníky (.tri,
 * záložky screenshotů, popisek zvětšeného screenshotu) jsou ploché se stejným zaoblením a barvu mají u svého pravidla;
 * úrovně podpory v tabulce Ceníku mají vlastní masku (.compare). Symbol loga, mozaika a pruh nad patičkou zůstávají
 * ostré. Ručně: <span class="tri" style="--c: var(--m-fakturace)" aria-hidden="true"></span> */
.tri, .prose .shot-tabs button::before, .lb-caption span::before,
.prose .module-index a::before, .prose :is(.module, .topic) h2::before, .prose .feature-head h3::before,
.area-page .page-title::before, .prose .area-module > h2::before, .prose .related h3::before, .prose .area h2::before,
.prose .why-item h2::before, .pillars h3::before, .mod::before,
.prose .flow-steps > li::before, .prose .steps > li::before, .start-steps li::before {
  aspect-ratio: var(--tri-ratio);
  -webkit-mask: var(--tri) center / 100% 100% no-repeat; mask: var(--tri) center / 100% 100% no-repeat;
}
.prose .module-index a::before, .prose :is(.module, .topic) h2::before, .prose .feature-head h3::before,
.area-page .page-title::before, .prose .area-module > h2::before, .prose .related h3::before, .prose .area h2::before,
.prose .why-item h2::before, .pillars h3::before, .mod::before,
.prose .flow-steps > li::before, .prose .steps > li::before, .start-steps li::before {
  background: var(--c);
  background: conic-gradient(from -30deg at 37.68% 50%,
    oklch(from var(--c) calc(l + 0.08) calc(c * 0.92) h) 0 119.5deg,
    oklch(from var(--c) calc(l - 0.09) c h) 120.5deg 239.5deg,
    var(--c) 240.5deg 359.5deg,
    oklch(from var(--c) calc(l + 0.08) calc(c * 0.92) h) 360deg);
}
.tri { display: inline-block; flex: none; height: 15px; background: var(--c, var(--ink)); }

/* Nadpisy: velké, tučné 700 a těsně sázené. */
.h1, .h2, .page-title {
  font-weight: 700; color: var(--ink); text-wrap: balance;
}
.h1 { font-size: var(--h1); line-height: 0.98; letter-spacing: -0.025em; }
.h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -0.02em; }
.page-title { font-size: var(--h-page); line-height: 1.12; letter-spacing: -0.02em; }

.lead {
  margin-top: 24px; max-width: 32em;
  font-size: clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--muted); text-wrap: pretty;
}
.intro { margin-top: 16px; max-width: 38em; font-size: 1.125rem; color: var(--muted); text-wrap: pretty; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- 5. Tlačítka ----------
 * Jen dvě (6j, design/7-sjednoceni-prvku.html): primární (tmavé) = hlavní akce části – demo, Odeslat, Stáhnout, Spustit
 * demo; sekundární (obrys) = druhá akce vedle primární nebo přechod na jinou stránku webu. Výška 50 px, v hlavičce menší
 * .btn-sm (42 px). Na tmavém závěru (.page-cta) obrácené barvy. Ostatní odkazy jsou tučný podtržený odkaz. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px;
  border: 2px solid transparent; border-radius: var(--radius); cursor: pointer;
  font-size: var(--text); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease,
    opacity var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
/* Stisk: tlačítko se i s textem zmenší na 97 % – odezva, že reaguje (i Menu; odkazy, dlaždice a kostky ne – jejich odezvou
 * je nová stránka). S omezením pohybu bez zmenšení. Na iPhonu :active jen s posluchačem touchstart (site.js). */
.btn:not(:disabled):active { transform: scale(calc(1 - 0.03 * var(--motion))); }
.btn-primary { background: var(--ink); color: #fff; }
/* Najetí myší: 10 % barvy textu – je vidět na bílé, na šedé i v pásu (#f5f6fa by na pásu hlavní stránky zmizela). */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--accent); color: #fff; }
  .btn-ghost:hover { background: rgba(41, 42, 74, 0.1); color: var(--ink); }
}
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 0.9375rem; }
/* Neaktivní tlačítko (Download bez souhlasu): šedé, bez změny při najetí myší. */
.btn:disabled, .btn:disabled:hover { background: var(--band); color: var(--muted); border-color: transparent; cursor: not-allowed; }

/* ---------- 6. Hlavička a menu ---------- */
.site-header { position: relative; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }

/* Horní lišta: Portál klienta (pro stávající zákazníky) a přepínač jazyků – malým písmem, ať nekonkurují menu.
   Je vidět na všech šířkách, i na mobilu bez otevírání menu. */
.util-bar { background: var(--surface); }
.util-inner { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 34px; }
.util-link { display: block; padding: 6px 0; color: var(--ink); font-size: 0.875rem; line-height: 1.4; text-decoration: none; }
@media (hover: hover) { .util-link:hover { color: var(--accent); text-decoration: underline; } }
/* Odkaz do nového okna (Portál klienta): ikona za textem v barvě odkazu. */
.util-link[target="_blank"]::after {
  content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 5px; vertical-align: -0.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-bar { display: flex; align-items: center; gap: 24px; min-height: 76px; }

.logo { flex: none; }
.logo img { width: auto; height: 35px; }

.nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }

.nav-list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-list > li { position: relative; }
.nav-list a {
  display: block; padding: 8px 12px; border-radius: var(--radius);
  color: var(--ink); font-size: 1rem; font-weight: 500; line-height: 1.4; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { .nav-list a:hover, .sub-toggle:hover { color: var(--accent); } }
.nav-list > li > a[aria-current] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* Rozbalovací položka (Funkce): název je odkaz na rozcestník, šipka vedle je tlačítko, které otevře oblasti
 * (vzor Disclosure Navigation s odkazy v první úrovni, WAI-ARIA APG). Na počítači se oblasti ukážou i po najetí myší –
 * Esc je skryje (site.js, třída is-dismissed do odjetí myší; WCAG 1.4.13). */
.has-sub { display: flex; align-items: stretch; }
.nav-list .has-sub > a { padding-right: 2px; }
.sub-toggle {
  display: flex; flex: none; align-items: center; justify-content: center; width: 26px; padding: 0;
  border: 0; border-radius: var(--radius); background: none; color: var(--ink); cursor: pointer;
  transition: color var(--t-hover) ease;
}
/* Šipka se otočí spolu s otevřením oblastí – stejnou křivkou a délkou jako panel (otevření --t-open, zavření --t-close),
 * jinak se točí ještě po doběhnutí panelu (kontrola animací 6. 10. 2026); s omezením pohybu hned (délka × --motion). */
.sub-toggle::after {
  content: ""; width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  transition: transform calc(var(--t-close) * var(--motion)) var(--ease-out);
}
.sub-toggle[aria-expanded="true"]::after {
  transform: translateY(3px) rotate(-135deg); transition-duration: calc(var(--t-open) * var(--motion));
}

.sub {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 270px;
  margin: 0; padding: 8px; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
/* Oblast s tmavou tečkou jako odrážky v textu (7. 10. 2026, design/15-odrazky.html – dřív trojúhelník v barvě oblasti;
 * třída m-… na položce zůstává, barvu tečka nebere). Tečka 8 px s okraji 1 px zabírá 10 px jako symbol loga
 * u Přehledu všech funkcí, texty jsou zarovnané. Tečka stojí na účaří textu (baseline) a je o 2 px výš – střed
 * tečky 6 px nad účařím, na středu výšky velkých písmen (Onest 0,71 em = 11,4 px). Zarovnaná na střed položky se
 * na pixely zaokrouhlovala jinak než text (položky mají 42,4 px) a v každé položce byla jinak vysoko, o 1 px výš
 * nebo níž (uživatel 9. 10. 2026). Posun v celých px, aby tečka a text zaokrouhlovaly stejně. */
.sub a { display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; }
.sub a::before {
  content: ""; flex: none; position: relative; top: -2px; width: 8px; height: 8px; margin: 0 1px;
  border-radius: 50%; background: var(--ink);
}
@media (hover: hover) { .sub a:hover { background: var(--surface); } }
.sub a[aria-current] { font-weight: 700; }
/* První položka = odkaz na rozcestník (navigation.php 'overview'): místo tečky oblasti symbol loga (= všechny
 * oblasti), text zarovnaný s oblastmi, aby se četla jako položka, ne nadpis skupiny (5. 10. 2026). Od oblastí ji dělí
 * malá mezera. Tučně jen na rozcestníku (aria-current) – tučné písmo v seznamu značí stránku, na které čtenář je. */
.sub-overview { margin-bottom: 4px; }
.sub .sub-overview a::before {
  align-self: center; top: 0; width: 20px; height: 20px; margin: 0 -5px; border-radius: 0;
  background: url("../img/symbol.svg") center / contain no-repeat;
}
.has-sub.is-open .sub { display: block; }
html:not(.js) .has-sub:focus-within .sub { display: block; }
/* Na počítači oblasti vyjedou od položky Funkce (6o krok 3): objevení 200 ms, zavření 140 ms stejnou cestou zpět, posun
 * a zmenšení × --motion (s omezením pohybu jen prolnutí). Při zavírání zůstane panel vidět díky display v přechodu
 * (allow-discrete) a dá se na něj vrátit myší – znovu se otevře z místa, kde je. @starting-style = stav před otevřením.
 * Prohlížeč bez nich (Chrome a Edge do 116, Safari do 17.4, Firefox do 128) otevře a zavře skokem jako dřív.
 * Počátek pod středem položky Funkce se šipkou (CZ 48, EN 54 px; při zmenšení na 97 % je rozdíl pod 0,2 px). */
@media (width > 1040px) {
  .sub {
    transform-origin: 48px 0;
    opacity: 0; transform: translateY(calc(-4px * var(--motion))) scale(calc(1 - 0.03 * var(--motion)));
    transition-property: opacity, transform, display;
    transition-duration: var(--t-close);
    transition-timing-function: var(--ease-out);
    transition-behavior: allow-discrete;
  }
  .has-sub.is-open .sub, html:not(.js) .has-sub:focus-within .sub { opacity: 1; transform: none; transition-duration: var(--t-open); }
  @starting-style {
    .has-sub.is-open .sub, html:not(.js) .has-sub:focus-within .sub {
      opacity: 0; transform: translateY(calc(-4px * var(--motion))) scale(calc(1 - 0.03 * var(--motion)));
    }
  }
}
/* Najetí myší otevře oblasti až po --t-intent (kontrola animací 6. 10. 2026): kdo jen přejede myší přes Funkce k jiné
 * položce, panel neuvidí – bez prodlevy se ukázal a 140 ms mizel. Šipka čeká s ním. Kliknutí a fokus otevírají hned,
 * zavření je bez prodlevy. Prodleva platí i s omezením pohybu (není to pohyb). */
@media (hover: hover) and (pointer: fine) and (width > 1040px) {
  .has-sub:hover:not(.is-dismissed) .sub {
    display: block; opacity: 1; transform: none; transition-duration: var(--t-open); transition-delay: var(--t-intent);
  }
  @starting-style {
    .has-sub:hover:not(.is-dismissed) .sub {
      opacity: 0; transform: translateY(calc(-4px * var(--motion))) scale(calc(1 - 0.03 * var(--motion)));
    }
  }
  .has-sub:hover:not(.is-dismissed) .sub-toggle::after {
    transform: translateY(3px) rotate(-135deg);
    transition-duration: calc(var(--t-open) * var(--motion)); transition-delay: var(--t-intent);
  }
}

.lang { display: flex; margin: 0; padding: 0; list-style: none; }
.lang a, .lang-current { display: block; padding: 6px 7px; font-size: 0.875rem; line-height: 1.4; }
.lang a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .lang a:hover { color: var(--accent); text-decoration: underline; } }
.lang-current { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Tlačítko v hlavičce a Menu: .btn .btn-sm (templates/layout.php). */
.head-cta { white-space: nowrap; }

.menu-btn { display: none; margin-left: auto; }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }

/* ---------- 7. Obsah stránek ---------- */
.page { max-width: 46rem; }
.page > .lead { margin-top: 20px; }
/* layout: wide – obsah na celou šířku (mřížka log partnerů). Dvě třídy, aby vyhrál nad .prose { max-width } níže. */
.page.page-wide, .prose.prose-wide { max-width: none; }
/* Článek (templates/article.php) ve sloupci uprostřed (audit 6k bod 8, varianta B): drobečky, nadpis, datum, obrázek
 * i text stejně široké, prázdné místo rozdělené na obě strany. Blok pod článkem začíná u stejného okraje jako text. */
.page-article { max-width: 42rem; margin-inline: auto; }
.page-article > .prose { max-width: none; }

/* Úvod stránky v pásu hned pod hlavičkou webu (<!-- /head --> v obsahu, templates/content.php): nadpis a pod ním úvod. */
.section.has-head { padding-top: 0; }
.page-head { padding-block: clamp(40px, 1.6rem + 3.2vw, 72px) clamp(48px, 6vw, 80px); }
.page-head > .prose { margin-top: clamp(24px, 3vw, 36px); }
.page-head + .prose { margin-top: 0; }

/* Datum článku (pod nadpisem a ve výpisu) */
.meta { margin-top: 14px; font-size: 0.9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Cesta zpět nad nadpisem článku: ISPadmin / Novinky */
.crumbs { margin-bottom: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; font-weight: 500; }
.crumbs li + li::before { content: "/"; margin-inline: 10px; color: var(--muted); }
.crumbs a { display: inline-block; padding-block: 2px; text-decoration: none; }
@media (hover: hover) { .crumbs a:hover { text-decoration: underline; } }

.article-image { width: 100%; margin-top: 32px; border-radius: var(--radius); }

/* Pod článkem: co je ISPadmin, tlačítka demo a Funkce. Pás přes celou šířku (pravidlo .band v části 4) – hranice mezi
 * článkem a Dalšími novinkami (6j; dřív plocha v barvě pásu jen v šířce textu). */
.article-about { margin-top: clamp(56px, 7vw, 88px); padding-block: clamp(40px, 5vw, 64px); }
.article-about p { max-width: 40rem; margin: 0; }
.article-about .actions { margin-top: 20px; }

/* Dlouhá stránka s obsahem (toc: yes): text vlevo, obsah vpravo zůstává při posouvání vidět. */
.page-toc {
  display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 17rem);
  column-gap: clamp(40px, 6vw, 88px); align-items: start;
}
.page-toc > .page-title { grid-column: 1; max-width: 46rem; }
.page-toc > .prose { grid-column: 1; }
.toc {
  grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 24px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  padding-left: 20px; border-left: 2px solid var(--line); font-size: 0.9375rem;
}
.toc-title { margin-bottom: 10px; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; }
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc li + li { margin-top: 6px; }
.toc a { display: inline-block; padding-block: 2px; color: var(--ink-soft); line-height: 1.4; text-decoration: none; }
@media (hover: hover) { .toc a:hover { color: var(--ink); text-decoration: underline; } }

/* Výpis článků (Novinky) */
.news-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px;
  margin: 48px 0 0; padding: 0; list-style: none;
}
.news-item > a { display: block; color: inherit; text-decoration: none; }
.news-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--surface); }
.news-title {
  margin-top: 18px; font-size: 1.375rem; font-weight: 700; line-height: 1.25; text-wrap: balance;
}
@media (hover: hover) {
  .news-item > a:hover .news-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
}
.news-item .meta { margin-top: 8px; }
.news-text { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.news-empty { margin-top: 40px; }

/* Stránkování: čísla stran uprostřed (i na první a poslední straně, kde Novější / Starší chybí), Novější vlevo od nich,
   Starší vpravo. Čísel je nejvýš 7 (pagerItems()), na mobilu se vejdou na jeden řádek a Novější / Starší jsou pod nimi. */
.pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 20px;
  margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line);
}
.pager ul { grid-area: 1 / 2; display: flex; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager [rel="prev"] { grid-area: 1 / 1; justify-self: end; }
.pager [rel="next"] { grid-area: 1 / 3; justify-self: start; }
.pager a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border-radius: var(--radius); font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none;
}
@media (hover: hover) { .pager a:hover { background: var(--surface); color: var(--ink); } }
.pager a[aria-current="page"] { background: var(--ink); color: #fff; font-weight: 700; }
.pager .pager-step { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pager-gap { width: 32px; line-height: 44px; text-align: center; color: var(--muted); }
/* Vysoký kontrast pozadí aktuální strany nekreslí – pozná se podle rámečku. */
@media (forced-colors: active) {
  .pager a[aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}

/* ---------- 8. Text článků a stránek (obsah ze souborů v content/) ---------- */
.prose { max-width: 40rem; margin-top: 32px; }
.prose > * + * { margin-top: 1em; }
.prose p, .prose li { line-height: 1.65; text-wrap: pretty; }
/* Dlouhá adresa jako text odkazu nebo v <code> se na úzkém displeji zalomí kdekoli (jinak by stránka byla širší). */
.prose :is(a, code) { overflow-wrap: break-word; }

.prose h2 {
  margin-top: 1.9em; font-size: clamp(1.375rem, 1.23rem + 0.61vw, 1.625rem); line-height: 1.2;
  font-weight: 700; letter-spacing: -0.01em; text-wrap: balance;
}
/* h3 tučné 700 jako ostatní nadpisy webu (6j bod 6) – platí i pro nadpisy skupin v obsahu stránek (Bezpečnost,
 * kroky na Funkcích, Kontakty, Slevy, Demo), které mají jen vlastní velikost. */
.prose h3 { margin-top: 1.6em; font-size: 1.3125rem; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.prose h4 { margin-top: 1.4em; font-size: 1.125rem; line-height: 1.35; font-weight: 700; }
.prose :is(h5, h6) { margin-top: 1.2em; font-size: 1rem; line-height: 1.4; font-weight: 700; }
.prose :is(h2, h3, h4, h5, h6) + * { margin-top: 0.5em; }
.prose :is(h2, h3) { scroll-margin-top: 24px; }

/* Pojmy a vysvětlení (např. Specifikace služeb v licenčním ujednání) */
.prose dl { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
.prose dt, .prose dd { padding-block: 10px; border-top: 1px solid var(--line); line-height: 1.55; }
.prose dt { padding-right: 20px; font-weight: 700; }
.prose dd { margin: 0; }

.prose ul { padding: 0; list-style: none; }
.prose ul > li { position: relative; padding-left: 26px; }
/* Odrážka: tmavá tečka (7. 10. 2026, design/15-odrazky.html – dřív trojúhelník) na prvním řádku, 7 px od kraje,
 * text od 26 px. Stojí na účaří textu (baseline) a je o 3 px výš – střed tečky 6 px nad účařím, na středu výšky
 * velkých písmen (Onest 0,71 em = 12 px) jako tečky v menu Funkce. Dřív byla odměřená od horního okraje položky
 * a seděla níž, na středu malých písmen; o 2 px výš byla pořád o 1 px níž (uživatel 9. 10. 2026). Posun v celých
 * px, aby tečka a text zaokrouhlovaly stejně. Začíná-li položka blokem (tučný nadpis, odstavec), nese tečku první
 * řádek bloku. */
.prose ul > li::before,
.prose ul > li > p:first-child::before,
.prose :is(.feature-body, .fn-group, .area-compact) li > strong:first-child::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 13px 3px -19px;
  border-radius: 50%; background: var(--ink);
}
.prose ul > li:has(> p:first-child)::before,
.prose :is(.feature-body, .fn-group, .area-compact) li:has(> strong:first-child)::before { content: none; }
.prose ol { padding-left: 1.6em; }
.prose ol > li { padding-left: 0.3em; }
.prose ol > li::marker { font-weight: 700; font-variant-numeric: tabular-nums; }
.prose li + li, .prose li > :is(ul, ol) { margin-top: 0.5em; }

.prose strong, .prose b { font-weight: 700; }
.prose img { border-radius: var(--radius); }
.prose figcaption { margin-top: 8px; font-size: 0.9375rem; color: var(--muted); }
/* Obrázek s odkazem na plnou velikost – otevře se v prohlížeči obrázků (site.js, aria-haspopup), bez JS samotný.
 * Při najetí myší silnější stín. Stíny má odkaz, ne obrázek: ::before obyčejný (screenshoty a Dashboard v úvodu hlavní
 * stránky – pravidla u nich; obrázky v článcích obyčejný stín nemají), ::after silnější. Při najetí se jen prolnou
 * (opacity) – prohlížeč nepřepočítává stín v každém snímku. Vnější stín se kreslí jen vně odkazu, obrázek nezakryje. */
.prose figure > a { position: relative; display: inline-block; border-radius: var(--radius); }
.prose figure > a::before, .prose figure > a::after, .hero-shot-link::before, .hero-shot-link::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
  transition: opacity var(--t-hover) ease;
}
.prose figure > a::after, .hero-shot-link::after { box-shadow: var(--sheet-shadow-hover); opacity: 0; }
@media (hover: hover) {
  .prose figure > a:hover::before, .hero-shot-link:hover::before { opacity: 0; }
  .prose figure > a:hover::after, .hero-shot-link:hover::after { opacity: 1; }
}
/* Při otevření prohlížeče obrázků (site.js, .is-out) náhled odlétá – zmizí i jeho stín, na místě nezůstane prázdný
 * rámeček. Za pravidly najetí, ať je přebije (stejná specifičnost). Při zavírání stín zůstává, obrázek do něj dosedne. */
.prose figure > a.is-out::before, .prose figure > a.is-out::after,
.hero-shot-link.is-out::before, .hero-shot-link.is-out::after { opacity: 0; transition: none; }
a[aria-haspopup="dialog"] { cursor: zoom-in; }   /* i Dashboard na hlavní stránce */

/* Prohlížeč obrázků (lightbox, site.js): obrázek přes celé okno na tmavé ploše v barvě patičky (stránka pod ní
 * rozmazaná), nahoře počet obrázků a tlačítka, dole popisek s trojúhelníkem v barvě modulu jako na záložkách
 * screenshotů, šipky po stranách (na mobilu dole vedle popisku). Rozměry obrázku počítá site.js, místo po stranách
 * pro šipky je --lb-side. Bez přiblížení se stránka ani obrázek prstem neposouvají (touch-action), prst listuje. */
.lightbox {
  --lb-side: 32px;
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: transparent; color: #fff; color-scheme: dark; touch-action: none;
}
.lightbox.has-nav { --lb-side: 96px; }
.lightbox::backdrop { background: transparent; }
.lb-shade {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--night) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.lb-stage {
  position: absolute; inset: 0; display: flex; overflow: hidden; overscroll-behavior: contain;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.lb-frame { flex: none; margin: auto; }   /* auto okraje: menší obrázek uprostřed, větší jde posunout až k okraji */
.lb-img {
  width: 100%; height: 100%; border-radius: var(--radius); transform-origin: 0 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 32px 80px -24px rgba(0, 0, 0, 0.65);
}
.lb-img.is-loading { background: rgba(255, 255, 255, 0.06); animation: lb-loading 0.9s ease-in-out infinite alternate; }
@keyframes lb-loading { to { background-color: rgba(255, 255, 255, 0.14); } }
.lightbox.can-zoom .lb-img { cursor: zoom-in; }
.lightbox.is-zoomed .lb-stage {
  overflow: auto; touch-action: pan-x pan-y; cursor: grab;
  scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
}
.lightbox.is-zoomed .lb-img { border-radius: 0; box-shadow: none; cursor: inherit; }
.lightbox.is-dragging .lb-stage { cursor: grabbing; }

/* Lišta a popisek nechávají kliknutí projít na plochu (klik vedle obrázku zavře) – reagují jen tlačítka. */
.lb-bar {
  position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  height: 64px; padding: 0 12px 0 24px; pointer-events: none;
}
.lightbox.is-zoomed .lb-bar { background: linear-gradient(color-mix(in srgb, var(--night) 82%, transparent), transparent); }
.lb-count { margin-right: auto; color: var(--night-ink); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Tlačítka prohlížeče: stisk jako .btn (část 5). */
.lb-btn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius); background: transparent; color: #fff; cursor: pointer; pointer-events: auto;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.lb-btn:active { transform: scale(calc(1 - 0.03 * var(--motion))); }
@media (hover: hover) { .lb-btn:hover { background: rgba(255, 255, 255, 0.12); } }
.lb-btn[hidden], .lightbox:not(.has-nav) :is(.lb-nav, .lb-count) { display: none; }
.lb-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-zoom[aria-pressed="true"] .lb-plus { display: none; }   /* přiblíženo: lupa s minus */
.lb-nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; background: rgba(255, 255, 255, 0.08); }
/* Přiblížený obrázek je pod šipkami – na světlém screenshotu by světlé tlačítko nebylo vidět. */
.lightbox.is-zoomed .lb-nav { background: color-mix(in srgb, var(--night) 72%, transparent); }
@media (hover: hover) { .lightbox.is-zoomed .lb-nav:hover { background: var(--night); } }
.lb-prev { left: 22px; }
.lb-next { right: 22px; }
.lb-caption {
  position: absolute; inset: auto 0 0; min-height: 44px; padding: 14px 24px 22px;
  color: var(--night-ink); font-size: 0.9375rem; line-height: 1.45; text-align: center; text-wrap: balance;
  pointer-events: none; transition: opacity var(--t-open) ease;
}
.lb-caption span { display: inline-block; max-width: 48rem; }
.lb-caption span:empty { display: none; }
.lb-caption span::before {
  content: ""; display: inline-block; height: 11px; margin-right: 10px;   /* tvar: část 4 */
  background: color-mix(in srgb, var(--c, var(--focus)) 72%, #fff);   /* zesvětlený, tmavé barvy modulů by na tmavé ploše zmizely */
}
.lightbox.is-zoomed .lb-caption { opacity: 0; }

@media (max-width: 620px) {
  .lightbox, .lightbox.has-nav { --lb-side: 0px; }
  .lb-bar { height: 56px; padding-left: 16px; }
  .lb-img { border-radius: 0; }
  .lb-nav { top: auto; bottom: 14px; width: 48px; height: 48px; margin-top: 0; }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
  .lightbox.has-nav .lb-caption { min-height: 76px; padding: 16px 72px 18px; }
}

/* Video YouTube (převodník, youtube-nocookie.com) */
.prose .video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: var(--surface); }

/* Zvýrazněný rámeček (upozornění, „Co to pro vás znamená“) */
.prose .note { padding: 18px 22px; border-left: 4px solid var(--ink); border-radius: var(--radius-lg); background: var(--surface); }
.prose .note > * + * { margin-top: 0.75em; }

/* Přeškrtnuté = už neplatí (např. prodaný hardware) */
.prose del { color: var(--muted); }
.prose > del { display: block; }

/* Seznamy v mřížce (loga partnerů, kontakty, tým): bez odrážek. Členění jen mezerami – žádné oddělovací linky
 * ani rámečky kolem položek (uživatel 30. 9. 2026: s linkami všude vypadala stránka strašně). */
.prose :is(.logos, .contacts, .people, .files, .reasons, .points) { display: grid; padding: 0; }
.prose :is(.logos, .contacts, .people, .files, .reasons, .points) > li { padding: 0; margin: 0; }
.prose :is(.logos, .contacts, .people, .files, .reasons, .points) > li::before { content: none; }

/* Loga partnerů (Naši partneři): logo celé vidět (object-fit: contain). Odkaz je celé pole kolem loga,
 * při najetí myší se pod ním ukáže jemné pozadí. */
.prose .logos { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px 32px; margin-top: 48px; }
.prose .logos a { display: block; height: 128px; padding: 24px 28px; border-radius: var(--radius); }
@media (hover: hover) { .prose .logos a:hover { background: var(--surface); } }
.prose .logos img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

/* Kontakty (Kontakty a tým): oddělení a pracovní doba vedle sebe na bílé, telefon velkým písmem – kvůli němu sem lidé
 * chodí. Sídlo firmy je vedle kontaktního formuláře (.contact-split níže). */
.prose .contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; margin-top: 8px; }
.prose .contacts h3 { margin: 0 0 8px; font-size: 1.1875rem; line-height: 1.3; }
.prose .contacts p { font-size: 1rem; line-height: 1.6; }
.prose .contacts p + p { margin-top: 0.6em; }
.prose .contacts :is(.tel, .contact-email) {
  display: inline-block; margin-bottom: 4px; font-size: 1.75rem; font-weight: 700; line-height: 1.15;
  text-decoration: none;
}
@media (hover: hover) { .prose .contacts :is(.tel, .contact-email):hover { text-decoration: underline; text-decoration-thickness: 2px; } }
/* Obchod: hlavní je e-mail (velkým písmem), telefon pod ním obyčejným odkazem. */
.prose .contacts .contact-email { overflow-wrap: anywhere; }
.prose .contacts .contact-email ~ .tel { display: inline; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; text-decoration: underline; }
/* Poznámka pod kontaktem (obchod: preferujeme e-mail, telefon je automat). Ikona obálky maskou jako ostatní ikony. */
.prose .contacts .contact-note {
  position: relative; margin-top: 16px; padding: 14px 16px 14px 46px; border-radius: var(--radius-lg);
  background: var(--band); font-size: 0.9375rem; line-height: 1.5; color: var(--muted); text-wrap: pretty;
}
.prose .contacts .contact-note::before {
  content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prose .contacts .contact-note strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }

/* Tým (Kontakty a tým): oddělení vlevo, lidé vpravo. Fotka čtvercová, pod ní jméno a pozice. Oddělení od sebe
 * dělí jen mezera; podtýmy (h4 – Testování, Síťová řešení) jsou blíž k oddělení nad nimi. Názvy oddělení menší než
 * nadpis části (Náš tým), podtýmy ještě o stupeň menší. */
.prose .team { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: 40px; margin-top: 36px; }
.prose .team > :is(h3, h4) { grid-column: 1; margin: 0; font-weight: 700; line-height: 1.3; }
.prose .team > h3 { font-size: 1.1875rem; }
.prose .team > h4 { font-size: 1.0625rem; }
.prose .team > .people { grid-column: 2; margin: 0 0 64px; }
.prose .team > .people:has(+ h4) { margin-bottom: 40px; }
.prose .team > .people:last-child { margin-bottom: 0; }
.prose .team > h3:has(+ .team-note) { align-self: baseline; }
.prose .team > .team-note {
  grid-column: 2; align-self: baseline; margin: 0; max-width: 32em;
  font-size: clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--ink);
}
.prose .people { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 36px 24px; }
.prose .people img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); }
.prose .people p { margin-top: 12px; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.prose .people strong { font-size: 1.0625rem; color: var(--ink); }
/* Jen jméno bez pracovní pozice – na střed pod fotkou. */
.prose .people p:not(:has(br)) { text-align: center; }

/* Úvodní odstavec a text na široké stránce (layout: wide) drží šířku sloupce textu. */
.prose-wide > :is(p, h2) { max-width: 40rem; }
/* Nadpis části přímo na široké stránce (Kontakty a tým: Náš tým) – stejně velký jako nadpisy částí na ostatních
 * podstránkách (moduly, Ceník, Demo). */
.prose-wide > h2 {
  margin-top: clamp(56px, 7vw, 96px); font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em;
}
.prose > .lead { margin-top: 0; }
.prose > .lead + p { margin-top: 1.25em; }

/* Moduly (Co ISPadmin umí?). Barva patří modulu: trojúhelník u nadpisu a v rozcestníku, jemně podbarvená plocha
 * pod ilustrací. Text vždy vlevo (13 modulů pod sebou – oko nepřeskakuje ze strany na stranu), ilustrace vpravo
 * zůstává při čtení delšího textu vidět. Žádné linky – moduly od sebe dělí mezera. */
/* Rozcestník bez podkladu – pod ním začíná první oblast barevným pásem, šedý panel by s ním splýval. */
.prose .module-index { margin-top: clamp(48px, 6vw, 72px); }
/* Sloupce místo mřížky: 13 položek se rozdělí 5 + 4 + 4 bez osamělé položky v posledním řádku. */
.prose .module-index ul { columns: 3 15rem; column-gap: 40px; }
.prose .module-index li { margin: 0; padding: 0; break-inside: avoid; }
.prose .module-index li::before { content: none; }
/* Trojúhelník na střed prvního řádku (ne na účaří): Firefox ve sloupcích počítá účaří prázdného ::before chybně
 * u první položky sloupce a u poslední položky a trojúhelník tam poskočí dolů. */
.prose .module-index a {
  display: flex; align-items: flex-start; gap: 14px; padding-block: 11px;
  font-size: 1.1875rem; font-weight: 650; line-height: 1.3; text-decoration: none;
}
.prose .module-index a::before { content: ""; flex: none; height: 23px; margin-top: calc((1.3em - 23px) / 2); }   /* tvar: část 4 */
@media (hover: hover) { .prose .module-index a:hover { text-decoration: underline; text-decoration-thickness: 2px; } }

.prose .modules { display: grid; gap: clamp(72px, 9vw, 128px); margin-top: clamp(64px, 8vw, 112px); }
.prose .module {
  display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 88px); align-items: start;
}
.prose .module-text > * + * { margin-top: 1em; }
.prose :is(.module, .topic) h2 {
  display: flex; align-items: baseline; gap: 0.42em; margin: 0 0 0.55em;
  font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em;
}
.prose :is(.module, .topic) h2::before { content: ""; flex: none; height: 0.7em; }   /* tvar a fazety: část 4 */
.prose .module h2 + * { margin-top: 0; }
.prose .module figure {
  position: sticky; top: 32px; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  aspect-ratio: 4 / 3; min-height: 0;   /* min-height: 0 – plocha drží poměr stran i u obrázku na výšku */
  padding: clamp(24px, 3.5vw, 48px); border-radius: var(--radius-lg);
  background: var(--surface); background: color-mix(in srgb, var(--c) 9%, #fff);
}
.prose .module figure img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
/* Část za prohlídkou (Proč ISPadmin?: Ještě nejste rozhodnutí?) je samostatná část – nadpis stejně velký jako nadpisy modulů. */
.prose :is(.modules, .tour) + h2 {
  margin-top: clamp(88px, 11vw, 152px); font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em;
}

/* Prohlídka aplikace (Co ISPadmin umí? CZ i EN: oblasti práce). Začátek oblasti (.topic-head) je pás přes celou šířku
 * v barvě modulu: nadpis s trojúhelníkem, text a pod ním screenshot na celou šířku. Moduly a skupiny oblasti jsou pod pásem
 * na bílé – stránka střídá barevný pás a bílou, takže je vidět, kde oblast začíná. Víc screenshotů přepínají záložky
 * s popisky nad obrázkem (shotTabs() v app/content.php, site.js, třída .is-tabs), vybraná je podtržená. Bez JavaScriptu jsou
 * screenshoty pod sebou, každý s popiskem. */
.prose .tour { display: grid; gap: clamp(64px, 7vw, 104px); margin-top: clamp(64px, 8vw, 112px); }
.prose .topic { --tint: color-mix(in srgb, var(--c) 10%, #fff); }
.prose .topic-head { --band-bg: var(--tint); padding-block: clamp(56px, 6vw, 88px) clamp(48px, 5.5vw, 80px); }
.prose .topic-head > p { max-width: 40rem; margin: 0; }
.prose .shots { margin-top: clamp(28px, 3.5vw, 44px); }
.prose .shots figure + figure { margin-top: 32px; }
.prose :is(.shots figure, .fn-shot) > a { display: block; border-radius: var(--radius); cursor: zoom-in; }
.prose :is(.shots, .fn-shot) img { width: 100%; border-radius: var(--radius); }
.prose :is(.shots figure, .fn-shot) > a::before { box-shadow: var(--sheet-shadow); }   /* stín na odkazu (část 8, obrázek s odkazem) */
.prose .shots figcaption { margin-top: 14px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft); }

/* Záložky jako aktuální stránka v menu (uživatel 5. 10. 2026, audit 6k bod 1 varianta A – dřív žlábek s bílou
 * vybranou záložkou, bílá se stínem je ale na webu list): bez plochy, vybraná má tmavý text, tmavou linku pod sebou
 * a trojúhelník v barvě modulu, nevybrané jsou tlumené. Na záložce je jen krátký název z popisku „Název: popis“
 * (uživatel 5. 10. 2026, varianta A) – na jeden řádek, takže trojúhelníky, texty i linky jsou v jedné výšce; dřív byly
 * na záložkách celé popisky s různým počtem řádků a trojúhelníky šly „cik cak“. Kdyby se název přece zalomil, je
 * v záložce dole těsně nad linkou a trojúhelník u jeho prvního řádku. */
.prose .shot-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: fit-content(20rem); justify-content: start; gap: 6px 36px;
}
.prose .shot-tabs button {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: end; align-items: start;
  gap: 10px; padding: 8px 0 14px;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; text-align: left; text-wrap: pretty;
  transition: color var(--t-hover) ease;
}
.prose .shot-tabs button::before {   /* tvar: část 4 */
  content: ""; flex: none; height: 11px; margin-top: calc((1.35em - 11px) / 2); background: var(--field-line);
}
.prose .shot-tabs button::after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px; border-radius: 2px; background: transparent;
  transition: background-color var(--t-hover) ease;
}
@media (hover: hover) {
  .prose .shot-tabs button:hover { color: var(--ink); }
  .prose .shot-tabs button:hover::after { background: color-mix(in srgb, var(--ink) 22%, transparent); }
}
.prose .shot-tabs button[aria-selected="true"] { color: var(--ink); cursor: default; }
.prose .shot-tabs button[aria-selected="true"]::before { background: var(--c); }
.prose .shot-tabs button[aria-selected="true"]::after { background: var(--ink); }
.js .prose .shots.is-tabs figure, .js .prose .shots.is-tabs figure + figure { margin-top: 20px; }
/* Popis za dvojtečkou se u záložek neukazuje (uživatel 5. 10. 2026: k ničemu, opakuje obrázek a text kolem). Celý
 * popisek zůstává v obsahu – ukáže ho zvětšený obrázek (lightbox) a bez JavaScriptu je pod obrázkem. */
.js .prose .shots.is-tabs figcaption { display: none; }
/* Záložky posílá hotové server (shotTabs()). Bez JavaScriptu (bez třídy js na <html>) nejdou přepínat – jsou skryté
 * a obrázky pod sebou s popisky, i ty s hidden. */
html:not(.js) .prose .shot-tabs { display: none; }
html:not(.js) .prose .shots figure[hidden] { display: block; }
/* Výměna screenshotu (6o krok 4, site.js): nový obrázek se prolne přes předchozí (--t-open, --ease-out). Předchozí
 * zůstane pod ním (.is-leaving, poloha z site.js), dokud nový nenaběhne; skrytý screenshot se stahuje až po výběru
 * záložky (líné načítání) a do načtení čeká průhledný (.is-waiting). Screenshoty v záložkách mají všechny 16 : 9,
 * výška se nemění. Prolnutí zůstává i s omezením pohybu (jen průhlednost). */
.js .prose .shots.is-tabs { position: relative; isolation: isolate; }
.js .prose .shots.is-tabs figure.is-leaving { display: block; position: absolute; left: 0; right: 0; z-index: -1; margin: 0; }
.js .prose .shots.is-tabs figure.is-waiting { opacity: 0; }
.js .prose .shots.is-tabs figure.is-entering { animation: shot-in var(--t-open) var(--ease-out); }
@keyframes shot-in { from { opacity: 0; } }
/* Linka vybrané záložky přejede k nové (--t-move, --ease-in-out; s omezením pohybu skočí): ::before seznamu záložek
 * oříznutý (clip-path) na místo ::after vybrané záložky – polohu bere site.js z ::after, takže na úzkém mobilu je linka
 * svisle vlevo. Bez JavaScriptu a než se skript spustí, je linka ::after vybrané záložky. Při změně velikosti okna
 * se linka posune bez přechodu (.is-still). */
.js .prose .shot-tabs { position: relative; }
.js .prose .shot-tabs.has-line::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ink);
  clip-path: inset(var(--line-top) var(--line-right) var(--line-bottom) var(--line-left) round 2px);
  transition: clip-path calc(var(--t-move) * var(--motion)) var(--ease-in-out);
}
.js .prose .shot-tabs.is-still::before { transition: none; }
.js .prose .shot-tabs.has-line button[aria-selected="true"]::after { background: transparent; }
/* Obrázek oblasti, který není screenshot (Obchod: ilustrace z článku) – nejvýš v původní velikosti, ne roztažený
 * na šířku. Ilustrace má vlastní bílé pozadí, plocha pod ní by byla vidět jako rámeček. */
.prose .topic-figure { max-width: 30rem; margin-top: clamp(20px, 2.5vw, 32px); }
.prose .topic-figure img { border-radius: 0; }

/* Co ISPadmin umí? – moduly v oblasti: vlevo název s trojúhelníkem v barvě modulu a pod ním drobně, jak modul
 * získáte (licence), vpravo funkce v odrážkách a odkazy na články. Moduly od sebe dělí jen mezera. */
.prose .topic > :is(.features, .points) { margin-top: clamp(48px, 6vw, 72px); }
.prose .topic > .points + .features { margin-top: clamp(56px, 7vw, 88px); }
.prose .features { display: grid; gap: clamp(44px, 5.5vw, 72px); }
.prose .feature {
  display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 42rem);
  column-gap: clamp(32px, 5vw, 80px); align-items: start;
}
/* Trojúhelník v levém odsazení – název i poznámka pod ním začínají na stejné svislici. */
.prose .feature-head { position: relative; padding-left: 1.625rem; }
.prose .feature-head h3 {
  margin: 0; font-size: clamp(1.3125rem, 1.22rem + 0.4vw, 1.5rem); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance;
}
.prose .feature-head h3::before { content: ""; position: absolute; left: 0; top: 0.25em; height: 0.7em; }   /* tvar a fazety: část 4 */
.prose .feature-head p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
/* Že jde o modul a jak ho získáte (Přídavný modul, Modul v každé licenci) – tučně, ať je to vidět hned pod názvem.
 * Části Základního modulu (Portál klienta, Dashboard…) štítek nemají, jen obyčejný text. */
.prose .feature-head .feature-kind { margin-top: 6px; font-weight: 700; color: var(--ink); }
.prose .feature-head .feature-kind + p { margin-top: 4px; }
.prose .feature-head a { color: var(--muted); }
@media (hover: hover) { .prose .feature-head a:hover { color: var(--ink); } }
.prose .feature-body > * + * { margin-top: 1em; }
/* Funkce modulu: tučný název funkce na vlastním řádku (první <strong> v položce), pod ním jedna až tři věty, co dělá. */
.prose :is(.feature-body, .fn-group) li + li { margin-top: 1.1em; }
.prose :is(.feature-body, .fn-group) li > strong:first-child { display: block; margin-bottom: 2px; }
/* Více v Novinkách: odkazy na články o funkci, drobně pod odrážkami. */
.prose .news-links { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.prose .feature-body > .news-links { margin-top: 18px; }
.prose .topic > .news-links { max-width: 40rem; margin-top: 36px; }

/* Co ISPadmin umí? – Od nového klienta po zaplacenou fakturu: pět kroků po sobě (číslované – je to pořadí). Číslo
 * v trojúhelníku z loga jako Jak začít na hlavní stránce; barvy z loga, bílé číslo (32 px tučně = velké písmo) má na všech
 * kontrast aspoň 3 : 1. Pod 1100 px kroky pod sebou, číslo vlevo. */
.prose .flow { margin-top: clamp(72px, 9vw, 120px); }
.prose .flow > h2 { margin: 0; font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em; }
.prose .flow > p { max-width: 40rem; margin-top: 14px; }
.prose .flow-steps {
  counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px clamp(24px, 2.6vw, 36px);
  margin-top: clamp(32px, 4vw, 48px); padding: 0; list-style: none;
}
.prose .flow-steps > li { counter-increment: step; margin: 0; padding: 0; --n: #2d3881; }
.prose .flow-steps > li:nth-child(2) { --n: #009d3c; }
.prose .flow-steps > li:nth-child(3) { --n: #f0582e; }
.prose .flow-steps > li:nth-child(4) { --n: #70253f; }
.prose .flow-steps > li:nth-child(5) { --n: #cb3345; }
.prose .flow-steps > li::before {   /* tvar a fazety: část 4 */
  content: counter(step); display: flex; align-items: center; height: 66px; margin-bottom: 16px; padding-left: 12px;
  --c: var(--n); color: #fff;
  font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.prose .flow-steps h3 { margin: 0; font-size: 1.1875rem; line-height: 1.3; }
.prose .flow-steps p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--muted); }

/* Bezpečnost a Napojení (Co ISPadmin umí?): krátké skupiny ve třech sloupcích – nadpis a text, bez rámečků. */
.prose .points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(32px, 4.5vw, 64px); }
.prose .points h3 { margin: 0; font-size: 1.1875rem; line-height: 1.3; }
.prose .points p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--muted); }

/* Podstránka oblasti Funkcí (content/cs/co-ispadmin-umi/*.html, v hlavičce module: …). Úvod je pás v barvě oblasti
 * jako začátek oblasti na rozcestníku (.topic-head): drobečková navigace, nadpis s trojúhelníkem, úvod a screenshoty
 * v záložkách. Pod pásem části na bílé (Co získáte, modul, napojení, na co navazuje, Novinky) s nadpisy 38 px.
 * Modul má nadpis s trojúhelníkem v barvě modulu; funkce dělí mezititulky skupin – vlevo mezititulek, vpravo funkce
 * (stejné rozvržení jako moduly na rozcestníku, mezititulek bez trojúhelníku – ten patří jen modulu). */
.area-page .page-head { --band-bg: color-mix(in srgb, var(--c) 10%, #fff); }
.area-page .page-title { display: flex; align-items: baseline; gap: 0.4em; }
.area-page .page-title::before,
.prose .area-module > h2::before { content: ""; flex: none; height: 0.7em; }   /* tvar a fazety: část 4 */
.prose .area-part { margin-top: clamp(80px, 10vw, 136px); }
.prose > .area-part:first-child { margin-top: clamp(56px, 7vw, 96px); }
.prose .area-part > h2 { margin: 0; font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em; }
.prose .area-module > h2 { display: flex; align-items: baseline; gap: 0.42em; }
.prose .area-part > p { max-width: 40rem; margin-top: 14px; }
.prose .area-part > :is(.points, .fn-groups, ul) { margin-top: clamp(32px, 4vw, 48px); }
.prose .area-part > .points + p { margin-top: clamp(28px, 3.5vw, 40px); }   /* poznámka pod skupinami (Bezpečnost: přístup k API ČTÚ) */
/* Jak modul získáte (Přídavný modul, Modul v každé licenci, Součást Základního modulu) – štítek pod názvem
 * (design/10-oznaceni-modulu.html, varianta A2, uživatel 5. 10. 2026). U všech modulů stejná ploška v barvě pásu: barva
 * nic neznamená (v barvě modulu by se štítky lišily a žlutý by byl skoro neviditelný), druh řekne text, barvu modulu nese
 * trojúhelník u nadpisu. --band proto, že šedá drobností (--surface) je na bílé skoro neviditelná; štítky jsou jen na bílé.
 * Není to tlačítko: bez rámečku a bez reakce na myš. Dřív tučný řádek (vypadal jako druhý nadpis), pak drobně tlumeně
 * (oko ho přeskočilo). Dashboard a statistiky štítek nemají – věta pod nadpisem to říká sama. */
.prose .area-module > .feature-kind {
  width: fit-content; max-width: 100%; margin-top: 14px; padding: 3px 10px 4px; border-radius: var(--radius);
  background: var(--band); color: var(--ink); font-size: 0.875rem; font-weight: 650; line-height: 1.45;
}
.prose .area-module > .feature-kind + p { margin-top: 14px; }
@media (forced-colors: active) {
  .prose .area-module > .feature-kind { border: 1px solid CanvasText; }   /* pozadí se nekreslí – štítek pozná rámeček */
}
.prose .area-module > .fn-groups { margin-top: clamp(44px, 5.5vw, 64px); }
.prose .fn-groups { display: grid; gap: clamp(56px, 7vw, 88px); }
/* Vlevo mezititulek a pod ním výřez obrazovky 1 : 1 (do 22rem se vejde ~400 px aplikace a písmo zůstane čitelné),
 * odkaz otevře celou obrazovku. Vpravo funkce. */
.prose .fn-group {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 42rem);
  column-gap: clamp(32px, 5vw, 80px); align-items: start;
}
.prose .fn-head > h3 {
  margin: 0; font-size: clamp(1.3125rem, 1.22rem + 0.4vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em;
}
.prose .fn-shot { max-width: 22rem; margin: 24px 0 0; }
.prose .fn-shot figcaption { margin-top: 12px; font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.prose .fn-group > ul { margin: 0; }
/* Modul s nejvýš 6 funkcemi nemá mezititulky: vlevo jen výřez obrazovky. */
.prose .fn-head > .fn-shot:first-child { margin-top: 0; }
/* Modul bez screenshotu (Radius, GPON, Dealer…, třída area-compact): název, licence a věta o modulu vlevo, funkce vpravo
 * ve stejných sloupcích jako skupiny funkcí – levý sloupec nezůstane prázdný. */
.prose .area-compact {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 42rem); grid-template-rows: repeat(3, auto) 1fr;
  column-gap: clamp(32px, 5vw, 80px); align-items: start;
}
.prose .area-compact > :not(ul) { grid-column: 1; }
.prose .area-compact + .area-compact { margin-top: clamp(64px, 8vw, 104px); }
/* Seznam přes všechny řádky; výška navíc jde do posledního prázdného řádku, ne mezi název a popis vlevo. */
.prose .area-part.area-compact > ul { grid-column: 2; grid-row: 1 / -1; margin: 0; padding-top: 8px; }
.prose .area-compact li + li { margin-top: 1.1em; }
.prose .area-compact li > strong:first-child { display: block; margin-bottom: 2px; }

/* Co získáte: nad každým výsledkem ilustrace souvislou čarou (assets/img/art/, dvojice jako jeden obrázek) – stejná
 * výška, dole zarovnané, ať nadpisy výsledků začínají na stejné lince. */
.prose .gain-art { display: flex; align-items: flex-end; gap: 20px; height: 120px; margin-bottom: 28px; }
.prose .gain-art .art { min-width: 0; max-width: 100%; width: auto; height: 100%; border-radius: 0; }
/* Na co navazuje: trojúhelník v barvě oblasti, na kterou odkaz vede (třída m-… na položce). */
.prose .related h3 { display: flex; align-items: baseline; gap: 0.45em; }
.prose .related h3::before { content: ""; flex: none; height: 0.7em; }   /* tvar a fazety: část 4 */
/* Část v pásu (Banky, platby a účetní programy) – střídání bílé a pásu jako na hlavní stránce. */
.prose .area-part.band { padding-block: clamp(56px, 6.5vw, 88px); }
/* Funkce – rozcestník (content/cs/co-ispadmin-umi.html). Sedm oblastí pod sebou (.areas > .area): vlevo nadpis oblasti
 * s trojúhelníkem v barvě oblasti, věta, tři hlavní funkce a odkaz na podstránku; vpravo jeden screenshot na ploše
 * v barvě oblasti (Napojení screenshot nemá – ilustrace, .area-art). Moduly oblasti tu nejsou (uživatel
 * 2. 10. 2026: řádek modulů nad tlačítkem byl zmatečný) – jsou v Co je v licenci a co přidáte a na podstránkách.
 * id na oblasti a prázdné .area-anchor s id modulů jsou kotvy dřívější dlouhé stránky (/co-ispadmin-umi/#radius) –
 * odkazy dál skončí na začátku správné oblasti. Oblasti od sebe dělí jen mezera. */
.prose .areas { display: grid; gap: clamp(72px, 9vw, 128px); margin-top: clamp(80px, 10vw, 136px); }
.prose .area {
  position: relative; display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px); align-items: center;
}
.prose .area > .area-anchor { position: absolute; top: 0; left: 0; }
.prose .area-text > * + * { margin-top: 16px; }
.prose .area h2 {
  display: flex; align-items: baseline; gap: 0.42em; margin: 0;
  font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em;
}
.prose .area h2::before { content: ""; flex: none; height: 0.7em; }   /* tvar a fazety: část 4 */
.prose .area-text > h2 + p { font-size: 1.125rem; line-height: 1.55; }
.prose .area-text > ul li + li { margin-top: 4px; }
/* Odkaz na podstránku oblasti: sekundární tlačítko (přechod na jinou stránku) se šipkou za textem, při najetí myší
 * se šipka posune (uživatel 2. 10. 2026: „spíš tlačítko ideálně s šipkou“); s omezením pohybu ne. */
.prose .area-text > .area-more { margin-top: 28px; }
.prose .area-more .btn::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor; transition: transform var(--t-hover) ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .prose .area-more .btn:hover::after { transform: translateX(calc(3px * var(--motion))); }
}
.prose .area-figure { margin: 0; padding: clamp(20px, 3vw, 40px); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c) 10%, #fff); }
.prose .area-figure > a { display: block; border-radius: var(--radius); cursor: zoom-in; }
.prose .area-figure > a img { width: 100%; border-radius: var(--radius); }
.prose .area-figure > a::before { box-shadow: var(--sheet-shadow); }   /* stín na odkazu (část 8, obrázek s odkazem) */
.prose .area-figure figcaption { margin-top: 14px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft); }
/* Ilustrace místo screenshotu: plocha zhruba stejně vysoká jako u screenshotu, dvojice dole zarovnaná. */
.prose .area-art { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px); aspect-ratio: 16 / 10; }
.prose .area-art .art { min-width: 0; width: auto; height: 46%; border-radius: 0; }
/* Co je v licenci a co přidáte (v pásu, 6k bod 2, varianta C – stavebnice v prostoru). Rozložení jako Moduly na Ceníku
 * (uživatel 5. 10. 2026): vlevo nadpis, pod ním text a tlačítko, vpravo stavebnice v poměru 1 : 2, do 1100 px stavebnice
 * pod textem. Na rozdíl od Ceníku bez šedého panelu – pás pod stavebnicí je barevný. Kostky i deska mají hloubku – víko a bok
 * pod úhlem 30° (úhel izometrických ilustrací a trojúhelníků loga). Víko: skewX(-60°) posune horní hranu o hloubku × cos 30°,
 * bok: skewY(-30°) ji zvedne o hloubku × sin 30°. Dole deska Základního modulu (nejtlustší a nejtmavší, paleta navy
 * z tools/make-iso.php), na ní šest modulů, které na sobě nezávisí, a NMM – dlouhá nižší kostka, na které stojí Radius, GPON,
 * CMTS a IPTV (bez NMM nefungují). Všech deset přídavných modulů je stejně velká kostka (jeden díl). Barva modulu = víko
 * a bok kostky, čelo bílé s tmavým textem. Bez zaoblení – stěny kostek na sebe musí navazovat. Vše je CSS, texty jsou
 * odkazy. Kostky stojí na desce --set od její přední hrany (proužek víka desky před nimi, posun doprava o --set × cos 30°),
 * kostka na kostce: mezera = výška víka spodní kostky. Pořadí v HTML = pořadí kreslení (zadní dřív, přední později).
 * Stejná stavebnice je i na Ceníku (část Moduly, na šedém panelu) – rozvržení kostek se proto řídí šířkou stavebnice
 * (@container kit), ne okna. */
.prose .licence {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(40px, 4vw, 56px); align-items: start;
}
.prose .licence-text > * + * { margin-top: 14px; }
.prose .licence-text > h2 { margin: 0; font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em; }
.prose .licence-text > p { max-width: 40rem; }
.prose .licence-text > h2 + p { margin-top: 16px; }
.prose .licence-text > .actions { margin-top: 18px; }

/* Nahoře místo pro víka horních kostek, vpravo (okraj řady a desky) pro bok desky. */
.prose .licence-kit { container: kit / inline-size; padding-top: 14px; }
.prose :is(.kit-row, .kit-base) { --plate: 80px; --set: 32px; }
.prose .kit-row {
  position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 10px;
  margin: 0 calc(var(--plate) * 0.866) calc(var(--set) * 0.5) calc(var(--set) * 0.866);
}
/* Šířky řídí flex-grow: síť = díl na každý modul na NMM + okraje víka NMM (38 px) a mezery, ostatní = 6 dílů + mezery.
 * EN nemá IPTV – na NMM stojí tři moduly. */
.prose .kit-net { --on: 4; display: flex; flex: var(--on) 1 calc(38px + (var(--on) - 1) * 10px); flex-direction: column-reverse; }
.prose .kit-net:not(:has(.kit-on > li:nth-child(4))) { --on: 3; }
.prose :is(.kit-on, .kit-biz) { display: flex; flex-wrap: wrap; gap: 12px 10px; }
/* Kostky na NMM: 28 px od přední hrany víka NMM (proužek víka 14 px, posun 24 px) a 6 / 8 px od jeho boků. */
.prose .kit-on { margin: 0 8px 14px 30px; }
/* Kostky v jedné řadě stejně vysoké. Slovo delší než kostka (EN „opportunities“, 99 px – kostka má na text 87 px) má
 * v HTML měkké dělení (&shy;). */
.prose .kit-biz { flex: 6 1 50px; margin: 0; }
.prose :is(.kit-on, .kit-biz) > li { display: flex; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
.prose :is(.kit-on, .kit-biz) > li::before { content: none; }
.prose .cube {
  --d: 24px; position: relative; display: flex; flex: 1 1 auto; align-items: center; min-width: 0; min-height: 64px; padding: 10px 9px;
  background: var(--paper); color: var(--ink); font-size: 0.9375rem; font-weight: 650; line-height: 1.25; text-decoration: none;
}
.prose .kit-nmm { --d: 56px; flex: none; min-height: 52px; padding-inline: 14px; }
.prose :is(.cube, .kit-base)::before, .prose :is(.cube, .kit-base)::after { content: ""; position: absolute; }
.prose .cube::before {
  left: 0; bottom: 100%; width: 100%; height: calc(var(--d) * 0.5);
  background: var(--c); transform: skewX(-60deg); transform-origin: 0 100%;
}
.prose .cube::after {
  left: 100%; top: 0; width: calc(var(--d) * 0.866); height: 100%;
  background: var(--c); background: color-mix(in oklch, var(--c), #000 24%); transform: skewY(-30deg); transform-origin: 0 0;
}
.prose .cube:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }
@media (hover: hover) { .prose .cube:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; } }
.prose .kit-base {
  position: relative; display: block; margin-right: calc(var(--plate) * 0.866); padding: 20px 24px 22px;
  background: var(--m-zakladni); color: #fff; text-decoration: none;
}
.prose .kit-base::before {
  left: 0; bottom: 100%; width: 100%; height: calc(var(--plate) * 0.5);
  background: #465090; transform: skewX(-60deg); transform-origin: 0 100%;
}
.prose .kit-base::after {
  left: 100%; top: 0; width: calc(var(--plate) * 0.866); height: 100%;
  background: var(--ink); transform: skewY(-30deg); transform-origin: 0 0;
}
.prose .kit-base strong { display: block; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.prose .kit-base span { display: block; margin-top: 2px; color: #d4d7ea; font-size: 0.9375rem; line-height: 1.45; }
.prose .kit-base:is(:hover, :focus-visible) { color: #fff; }   /* barva najetí odkazu (a:hover) by na modré zmizela */
.prose .kit-base:focus-visible strong { text-decoration: underline; text-decoration-thickness: 2px; }
@media (hover: hover) { .prose .kit-base:hover strong { text-decoration: underline; text-decoration-thickness: 2px; } }
/* Fokus uvnitř čela: rámeček kolem by z části zakryly sousední kostky, víko a bok (deska je pod řadou kostek). Na desce
 * bílý – --focus má na její modré jen 2,6 : 1. */
.prose .cube:focus-visible { outline-offset: -5px; }
.prose .kit-base:focus-visible { outline-color: #fff; outline-offset: -6px; }
/* Vysoký kontrast pozadí (víka, boky, deska) nekreslí – kostky se poznají podle rámečku. */
@media (forced-colors: active) {
  .prose :is(.cube, .kit-base) { border: 1px solid CanvasText; }
}
/* Stavebnice se poskládá, když je z 35 % vidět (6o krok 5, design/13-animace.html bod 6) – jednou, ukazuje, jak licence
 * vzniká: deska naběhne zdola, pak se na ni položí NMM a šest modulů, po krátké pauze moduly na NMM. Každý díl
 * --t-explain --ease-out, po 40 ms (pořadí --n dává site.js), celé asi 1 s, bez odrazu. S omezením pohybu celá najednou
 * jen prolnutím (200 ms). Skryje ji až site.js (.is-waiting) – bez JavaScriptu, v tisku a když je z 35 % vidět už
 * při načtení, je hned celá. Odkazy kostek fungují i během animace. */
.prose .licence-kit.is-waiting :is(.kit-base, .cube) { opacity: 0; }
.prose .licence-kit.is-shown :is(.kit-base, .cube) {
  animation: kit-cube calc(200ms + (var(--t-explain) - 200ms) * var(--motion)) var(--ease-out) both;
  animation-delay: calc(var(--n, 0) * 40ms * var(--motion));
}
.prose .licence-kit.is-shown .kit-base { animation-name: kit-base; }
@keyframes kit-cube { from { opacity: 0; transform: translateY(calc(-18px * var(--motion))); } }
@keyframes kit-base { from { opacity: 0; transform: translateY(calc(12px * var(--motion))); } }

/* Karty článků (<!-- news: … -->) uvnitř textu: bez odrážek a mezer seznamu z .prose, nadpis jako ve výpisu Novinek. */
.prose .news-list > li { margin: 0; padding: 0; }
.prose .news-list > li::before { content: none; }
.prose .news-list .news-title { margin-top: 18px; font-size: 1.375rem; line-height: 1.25; }
.prose .news-list :is(.meta, .news-text) { margin-top: 8px; line-height: 1.55; }

/* Proč ISPadmin? – důvody pod sebou: nadpis s trojúhelníkem vlevo, text a odkaz na podrobnosti vpravo. Pod nadpisem
 * každého důvodu ilustrace souvislou čarou (tools/line-art/), která ukazuje, co říká nadpis. Ilustrace 184 px vysoké
 * (dřív 96 px, zvětšené 1. 10. 2026); široká mapa Česka a Slovenska nebo dvojice se vejdou do sloupce – zúží se
 * (min-width: 0) a SVG si poměr stran drží samo. */
.prose .why { display: grid; gap: clamp(64px, 8vw, 112px); margin-top: clamp(64px, 8vw, 112px); }
.prose .why-item {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 96px); align-items: start;
}
.prose .why-item h2 {
  display: flex; align-items: baseline; gap: 0.42em; margin: 0;
  font-size: clamp(1.625rem, 1.4rem + 0.95vw, 2.125rem); line-height: 1.12; letter-spacing: -0.02em;
}
.prose .why-item h2::before { content: ""; flex: none; height: 0.7em; --c: var(--m-zakladni); }   /* tvar a fazety: část 4 */
.prose .why-art { display: flex; align-items: flex-end; gap: 24px; margin-top: 32px; }
.prose .why-art .art { min-width: 0; max-width: 100%; width: auto; height: 184px; border-radius: 0; }
.prose .why-text { max-width: 40rem; }
.prose .why-text > * + * { margin-top: 1em; }
.prose .why-text p { font-size: 1.125rem; line-height: 1.6; }
.prose .why-text .why-more { font-size: var(--text); font-weight: 700; }

/* Závěr stránky (Co ISPadmin umí?, Proč ISPadmin?, Ceník): demo, nabídka a kontakt na obchod. Tmavá plocha v barvě patičky
 * se symbolem loga vpravo (assets/img/mosaic.svg, stejný jako v úvodu hlavní stránky) – jednou na stránku, nic jiného
 * na podstránce tak nevypadá. Symbol přesahuje přes pravý okraj, plocha ho ořízne. Od patičky ji dělí bílá mezera. */
.prose .page-cta {
  --pad: clamp(32px, 4.5vw, 64px);
  position: relative; overflow: hidden; margin-top: clamp(88px, 11vw, 152px); padding: var(--pad) 44% var(--pad) var(--pad);
  border-radius: var(--radius-lg); background: var(--night); color: var(--night-ink);
}
.prose .page-cta::after {
  content: ""; position: absolute; top: 50%; right: -5%; width: 40%; aspect-ratio: 360 / 207.85; transform: translateY(-50%);
  background: url("../img/mosaic.svg") center / contain no-repeat;
}
.prose .page-cta h2 { margin: 0; color: #fff; font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em; }
.prose .page-cta p { max-width: 40rem; margin-top: 14px; }
.prose .page-cta a:not(.btn) { color: #fff; }
.prose .page-cta a:not(.btn):hover { color: #fff; }
.prose .page-cta .actions { margin-top: 28px; }
.prose .page-cta .btn-primary { background: var(--paper); color: var(--ink); }
.prose .page-cta .btn-ghost { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
/* Najetí myší jako u ostatních tlačítek o stupeň tmavší (6j) – žlutá zůstává jen zvýrazňovači (výběr textu, demo). */
@media (hover: hover) {
  .prose .page-cta .btn-primary:hover { background: var(--band); color: var(--ink); }
  .prose .page-cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
}
.prose .page-cta .cta-contact { margin-top: 20px; font-size: 0.9375rem; }
/* Hned za pásem s formulářem (Ceník) menší mezera – pás už část odděluje. */
.prose :is(.contact-split, .offer-split, .demo-contact) + .page-cta { margin-top: clamp(56px, 7vw, 96px); }

/* EN Why choose ISPadmin? (Still undecided?) – krátké důvody vedle sebe, nadpis a věta. */
.prose h2 + .reasons { margin-top: 36px; }
.prose .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(32px, 4.5vw, 64px); }
.prose .reasons h3 { margin: 0; font-size: 1.1875rem; line-height: 1.3; }
.prose .reasons p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--muted); }

/* Část s formulářem (Kontakty a tým, Ceník: nabídka, Demo: Začněme spolupracovat) = pás přes celou šířku (pravidlo
 * .band v části 4) a formulář na něm jako list: bílá plocha se stínem. Vedle formuláře doplňující údaje bez podkladu
 * (sídlo firmy, slevy, co bude následovat). Na mobilu pod formulářem. */
.prose :is(.contact-split, .offer-split, .demo-contact) { padding-block: clamp(48px, 6vw, 80px) clamp(56px, 6.5vw, 88px); }
.prose :is(.contact-split, .offer-split, .demo-contact) .form {
  max-width: none; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--sheet-shadow);
}
.prose > .contact-split { margin-top: clamp(56px, 7vw, 96px); }
/* Část za pásem (Kontakty: Náš tým) – stejná mezera jako před ním. :where, ať nepřebije vlastní odstup části (.page-cta). */
.prose > :where(.contact-split, .offer-split, .demo-contact) + * { margin-top: clamp(56px, 7vw, 96px); }

/* Kontaktní formulář vlevo, údaje vpravo pod sebou. (Ceník: formulář nabídky s kalkulačkou přes celou šířku, viz níže.) */
.prose .contact-split {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 1fr); column-gap: clamp(40px, 6vw, 88px); align-items: start;
}
.prose :is(.contact-split, .offer-split) > h2 { grid-column: 1 / -1; margin: 0; }
.prose .contact-split > h2 { font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em; }
.prose .contact-form > .form { margin-top: 28px; }
.prose .contact-split > .contacts { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; padding-top: 4px; }

/* Ceník (Za kolik ISPadmin pořídím?). Nahoře jak se cena skládá a vedle ceníky ke stažení – to návštěvník ceníku hledá
 * nejdřív (panel jako u Dema, viz níže). Pak části ceny pod sebou (moduly, Server / Cloud, podpora, doplňkové služby),
 * nabídka a demo. Části mají nadpisy stejně velké jako moduly na Co ISPadmin umí?. */
.prose .pricing-about > .lead { margin: 0; }
/* Kalkulačka orientační ceny nahoře na listu s ceníky, nad Ceníkem ke stažení: nadpis jako u ceníků, šedá věta
 * a tlačítko přes celou šířku listu (jako přihlášení do dema), vede na formulář s kalkulačkou na konci stránky.
 * Na listu je vidět na první dobrou (uživatel 12. 10. 2026; dřív menší pod úvodním odstavcem vlevo, design/20-cenik-
 * kalkulacka-v-uvodu.html, varianta C). Pod 900 px je list hned pod úvodním odstavcem, před částmi ceny (část 12),
 * ať je tlačítko i na mobilu na první obrazovce. */
.prose .price-calc > h2 { margin: 0; }
.prose .price-calc > * + * { margin-top: 12px; }
.prose .price-calc > p:not(.actions) { font-size: 1rem; color: var(--muted); }
.prose .price-calc > .actions { margin-top: 24px; }
.prose .price-calc .btn { width: 100%; }
.prose .pricing-files > .price-calc + h2 { margin-top: 44px; }
.prose .price-parts { display: grid; gap: 18px; margin-top: 36px; }
.prose .price-parts > li { padding-left: 30px; color: var(--muted); }
.prose .price-parts > li + li { margin-top: 0; }
.prose .price-parts > li::before { content: none; }
.prose .price-parts a::before {   /* tečka na řádku odkazu, 5 px od kraje (odrážka v textu, část Odrážka výše) */
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 18px 3px -25px;
  border-radius: 50%; background: var(--ink);
}
.prose .price-parts a { display: block; width: fit-content; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.prose .pricing-files > h2 { margin: 0; }
.prose .pricing-files > * + * { margin-top: 16px; }
/* Ceníky na listu vedle sebe (uživatel 12. 10. 2026, úspora místa na desktopu) – dlaždice s menšími okraji. Vedle
 * sebe jen tehdy, když se název vejde na jeden řádek (dlaždice nejméně tak široká jako její obsah, delší EN „Price
 * list in EUR“ tak jde vedle sebe až na širším listu) a obě vyjdou stejně široké (základ 11,5rem – bez něj byly na
 * 1100 px 153 a 185 px), jinak pod sebou. */
.prose .pricing-files .files { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.prose .pricing-files .files > li { flex: 1 0 11.5rem; min-width: max-content; }
.prose .pricing-files .files a { padding: 16px 12px 16px 44px; }
.prose .pricing-files .files a::before { left: 16px; top: 20px; }
.prose .pricing-files > p { font-size: 1rem; color: var(--muted); }
/* Za panelem s ceníky symbol loga z trojúhelníků (assets/img/mosaic.svg) a přes něj bílý list – stejná skladba jako úvod
 * hlavní stránky (design/11-cenik-uvod.html, varianta C, uživatel 5. 10. 2026; dřív byl úvod skoro celý černobílý).
 * Symbol vyčuhuje nad panelem a vpravo do okraje stránky (ne přes něj – vodorovný posuvník nevznikne). Úvod je vlastní
 * vrstva (z-index: 0), aby symbol pod panelem (z-index: -1) nezmizel pod pásem. Pod 900 px je panel pod textem: symbol
 * menší a nad panelem větší mezera, ať nezasahuje do odrážek nad ním. */
.prose .pricing-intro { position: relative; z-index: 0; }
.prose .pricing-files { position: relative; }
.prose .pricing-files::before {
  content: ""; position: absolute; z-index: -1; top: -120px; right: -24px; width: 84%; aspect-ratio: 360 / 207.85;
  background: url("../img/mosaic.svg") center / contain no-repeat;
}

.prose .price-part { margin-top: clamp(72px, 9vw, 120px); }
.prose .price-part > * + * { margin-top: 1em; }
.prose .price-part h2 { margin: 0; font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em; }
.prose :is(.price-part, .price-text) > p { max-width: 40rem; }
.prose .price-part h2 + p { margin-top: 16px; }
.prose .price-part > p + :is(.variants, .table-wrap, .points) { margin-top: 36px; }
/* Moduly: text vlevo, vpravo stavebnice jako na Co ISPadmin umí? (část Co je v licenci a co přidáte; odkazy vedou na popis
 * modulu) v poměru 1 : 2 (uživatel 5. 10. 2026). Stavebnice na šedém panelu jako varianty Server / Cloud pod ní – na bílé
 * by levé hrany bílých čel kostek splynuly s pozadím. Do 1100 px stavebnice pod textem (vedle by text měl méně než 20rem
 * a kostky by stály jako na mobilu); na mobilu panel přes celou šířku okna – s okraji by se stavebnice na 320 px nevešla. */
.prose .price-modules {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(40px, 4vw, 56px); align-items: start;
}
.prose .price-modules > * + * { margin-top: 0; }
.prose .price-text > * + * { margin-top: 1em; }
.prose .price-modules > .licence-kit {
  --pad: clamp(24px, 3vw, 40px);
  padding: calc(var(--pad) + 14px) var(--pad) var(--pad); border-radius: var(--radius-lg); background: var(--surface);
}
.prose .price-part .points { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 32px 48px; }
/* Nabídka (v pásu, viz Část s formulářem): úvodní věta a pod ní formulář s kalkulačkou přes celou šířku (část 9 –
 * Kalkulačka). Slevy, dřív vedle formuláře, jsou v souhrnu ceny (design/18-kalkulacka.html, varianta A, 7. 10. 2026). */
.prose .offer-split > * + * { margin-top: 0; }
.prose .offer-form > p { max-width: 40rem; margin-top: 16px; }
.prose .offer-form > .form { margin-top: 28px; }

/* Varianty Server / Cloud vedle sebe, každá na jemném pozadí (bez rámečku), nahoře ilustrace. */
.prose h2 + :is(.variants, .table-wrap, .files) { margin-top: 20px; }
.prose .variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.prose .variant { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--surface); }
.prose .variant > * + * { margin-top: 1em; }
/* Nadpis varianty je h3 pod nadpisem sekce h2 – menší než h2 (1,375–1,625 rem), ale výraznější než běžné h3. */
.prose .variant h3 { margin: 0 0 0.5em; font-size: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem); font-weight: 700; line-height: 1.15; }
.prose .variant h3 + * { margin-top: 0; }
.prose .variant-art .art { width: 120px; height: 104px; object-fit: contain; object-position: left bottom; border-radius: 0; }
.prose .variant .variant-art + h3 { margin-top: 24px; }

/* Srovnávací tabulka (varianty podpory). Bez linek: řádky střídavě na jemném pozadí, skupiny řádků (<tbody>) a řádek
 * s cenou (<tfoot>) od sebe dělí mezera. Sloupce variant stejně široké, nad názvem varianty její úroveň – 1 až 3
 * trojúhelníky z loga (sloupce jdou od nejnižší varianty). Slova ano / ne čtou čtečky, oko vidí ✓ / –
 * (v režimu vysokého kontrastu zůstane vidět slovo). */
.prose .compare { width: 100%; max-width: 54rem; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.prose .compare :is(th, td) { padding: 14px 18px; border: 0; vertical-align: middle; }
.prose .compare thead :is(th, td) { padding-block: 0 14px; }
.prose .compare thead th {
  width: 17%; text-align: center; font-size: 1.25rem; font-weight: 700; line-height: 1.2;
}
.prose .compare thead th::before {
  content: ""; display: block; width: calc(var(--level, 1) * 17px - 4.4px); height: 14px; margin: 0 auto 10px; background: var(--ink);
  /* Plochý zaoblený trojúhelník (tvar --tri, část 4) 12,6 × 14 px v dlaždici 17 px. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='14' viewBox='0 0 103.65 85.36'%3E%3Cpath d='M15 1.34L71.6 34.02A10 10 0 0 1 71.6 51.34L15 84.02A10 10 0 0 1 0 75.36L0 10A10 10 0 0 1 15 1.34Z'/%3E%3C/svg%3E") 0 0 / 17px 14px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='14' viewBox='0 0 103.65 85.36'%3E%3Cpath d='M15 1.34L71.6 34.02A10 10 0 0 1 71.6 51.34L15 84.02A10 10 0 0 1 0 75.36L0 10A10 10 0 0 1 15 1.34Z'/%3E%3C/svg%3E") 0 0 / 17px 14px repeat-x;
}
.prose .compare thead th:nth-child(3) { --level: 2; }
.prose .compare thead th:nth-child(4) { --level: 3; }
.prose .compare tbody th { font-weight: 500; line-height: 1.4; }
/* Upřesnění pod textem řádku (pracovní dny, volitelně …) */
.prose .compare th small { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 400; line-height: 1.4; color: var(--muted); }
.prose .compare td { text-align: center; }
.prose .compare tbody td:not(.yes, .no) { font-weight: 650; }   /* hodnoty (doba reakce, zálohy) */
.prose .compare tbody tr:nth-child(even) > * { background: var(--surface); }
.prose .compare tbody tr > :first-child { border-radius: var(--radius) 0 0 var(--radius); }
.prose .compare tbody tr > :last-child { border-radius: 0 var(--radius) var(--radius) 0; }
/* Mezera před skupinou: průhledný okraj, ne padding – ✓ / – se centruje v buňce bez okraje. Tyto řádky jsou vždy
 * nepodbarvené (lichý první řádek skupiny, patička), takže okraj ani zaoblení nejsou vidět. */
.prose .compare tbody + tbody > tr:first-child > *, .prose .compare tfoot > tr > * { border-top: 34px solid transparent; }
.prose .compare tfoot th { font-weight: 700; }
.prose .compare :is(.yes, .no) { position: relative; color: transparent; }
.prose .compare :is(.yes, .no)::after { content: ""; position: absolute; inset: 0; margin: auto; }
.prose .compare .yes::after {
  width: 22px; height: 22px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3.5 11.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3.5 11.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prose .compare .no::after { width: 14px; height: 2px; background: var(--muted); }
/* Režim vysokého kontrastu (Windows) pozadí ikon nekreslí – místo ✓ / – je vidět text ano / ne. */
@media (forced-colors: active) {
  .prose .compare :is(.yes, .no) { color: CanvasText; }
  .prose .compare :is(.yes, .no)::after { display: none; }
}

/* Soubory ke stažení (ceníky): odkaz je celé pole – název, pod ním typ a velikost souboru, vlevo značka stažení. */
.prose .files { grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 16px; max-width: 40rem; }
.prose .files a {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 22px 18px 58px;
  border-radius: var(--radius); background: var(--band); color: var(--muted); font-size: 0.9375rem; line-height: 1.4; text-decoration: none;
}
.prose .files a::before {
  content: ""; position: absolute; left: 24px; top: 22px; width: 18px; height: 20px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20'%3E%3Cpath d='M0 0h18L9 11zM0 17h18v3H0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20'%3E%3Cpath d='M0 0h18L9 11zM0 17h18v3H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prose .files strong { color: var(--ink); font-size: 1.125rem; font-weight: 700; }
@media (hover: hover) {
  .prose .files a:hover { background: color-mix(in srgb, var(--ink) 9%, var(--band)); }
  .prose .files a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
}

/* Demo – dvě části: přístup do dema (vlevo co demo ukáže, vpravo na listu přihlášení a tlačítko) a Začněme spolupracovat
 * (v pásu: formulář vlevo, vpravo co bude následovat). První část nemá vlastní nadpis – je hned pod nadpisem stránky
 * (dva nadpisy pod sebou zrušené 1. 10. 2026). Download stejně (.download): pod úvodním odstavcem vlevo verze
 * a technické údaje, vpravo na listu souhlas s licenčním ujednáním a tlačítko. Ceník (.pricing-intro) je v pásu úvodu stránky (.page-head). */
.prose :is(.demo-access, .download, .pricing-intro) {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 88px); align-items: center;
}
.prose .pricing-intro { align-items: start; }
.prose :is(.demo-contact, .download) h2 {
  margin: 0; font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em;
}
.prose :is(.demo-about, .demo-next, .download-about) > * + * { margin-top: 1em; }
.prose :is(.demo-about, .download-about) > :is(ul, dl) { margin-top: 1.5em; }
/* Download: technické údaje jako dvojice údaj – hodnota (5. 10. 2026, dřív odrážky). Údaj tlumeně, hodnota tučně;
 * bez linek mezi řádky (jinak než pojmy v licenčním ujednání), dva sloupce i na mobilu – údaje jsou krátké. */
.prose .download-about > dl { grid-template-columns: max-content minmax(0, 1fr); gap: 8px 32px; }
.prose .download-about :is(dt, dd) { padding: 0; border: 0; }
.prose .download-about dt { font-weight: 400; color: var(--muted); }
.prose .download-about dd { font-weight: 650; font-variant-numeric: tabular-nums; }
/* List: bílá plocha se stínem – místo, kde návštěvník něco dělá (stejně jako formuláře v pásu). */
.prose :is(.demo-login, .download-get, .pricing-files) {
  padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--sheet-shadow);
}
.prose .demo-login > p:first-child { font-size: 1.25rem; font-weight: 500; line-height: 1.55; text-wrap: balance; }
/* Jméno a heslo podbarvené jako zvýrazňovačem (žlutá z loga, jako výběr textu) – to se opisuje do přihlášení. */
.prose .demo-login strong {
  padding: 0.05em 0.35em; border-radius: 3px; background: #ffc742; font-weight: 700; white-space: nowrap;
}
.prose .demo-login .actions { margin-top: 24px; }
.prose .demo-login .btn { width: 100%; }

/* Download: panel pod úvodním odstavcem, souhlas a tlačítko. Tlačítko je neaktivní, dokud není souhlas zaškrtnutý
 * (site.js); bez JavaScriptu hlídá souhlas prohlížeč (required). Tlačítko se značkou stažení jako u ceníků. */
.prose .download { margin-top: clamp(40px, 5vw, 56px); }
.prose .download-get .check { font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
.prose .download-get .check input { margin-top: 3px; }
.prose .download-get .actions { margin-top: 24px; }
.prose .download-get .btn { width: 100%; }
.prose .download-get .btn::before {
  content: ""; flex: none; width: 15px; height: 17px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20'%3E%3Cpath d='M0 0h18L9 11zM0 17h18v3H0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20'%3E%3Cpath d='M0 0h18L9 11zM0 17h18v3H0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.prose .demo-contact {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); column-gap: clamp(40px, 6vw, 88px);
  margin-top: clamp(72px, 9vw, 120px);
}
.prose .demo-contact > :is(h2, .lead) { grid-column: 1 / -1; }
.prose .demo-contact > .lead { margin-top: 20px; }
.prose :is(.demo-form, .demo-next) { margin-top: clamp(40px, 5vw, 56px); }
.prose :is(.demo-form, .demo-next) > h3 { margin: 0; }
.prose .demo-form > h3 + .form { margin-top: 20px; }
.prose .demo-next > h3 + * { margin-top: 0.5em; }
/* Co bude následovat: kroky po sobě – číslo v trojúhelníku z loga jako u Jak začít (stejné barvy, 4. krok vínová),
 * vedle něj nadpis kroku a věta. Bílé číslo má na všech čtyřech barvách kontrast nad 5 : 1. */
.prose .steps { counter-reset: step; display: grid; gap: 22px; margin-top: 18px; padding: 0; list-style: none; }
.prose .steps > li {
  counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start;
  margin: 0; padding: 0; --n: #007c53;
}
.prose .steps > li:nth-child(2) { --n: #2d3881; }
.prose .steps > li:nth-child(3) { --n: #cb3345; }
.prose .steps > li:nth-child(4) { --n: #70253f; }
.prose .steps > li::before {   /* tvar a fazety: část 4 */
  content: counter(step); grid-row: 1 / span 2; display: flex; align-items: center; height: 48px; padding-left: 9px;
  --c: var(--n); color: #fff;
  font-size: 1.375rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.prose .steps h4 { margin: 0; padding-top: 2px; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.prose .steps h4 + p { margin-top: 4px; line-height: 1.6; color: var(--muted); }

/* Tlačítko v textu (Elementor button) */
.prose .actions { margin-top: 1.5em; }
.prose blockquote { padding-left: 20px; border-left: 3px solid var(--ink); }
.prose hr { margin-block: 2.5em; border: 0; border-top: 1px solid var(--line); }

.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { border-bottom: 2px solid var(--ink); }
.table-wrap { overflow-x: auto; }

.prose code { padding: 0.1em 0.3em; border-radius: 3px; background: var(--surface); font-family: var(--font-mono); font-size: 0.9em; }
.prose pre { overflow-x: auto; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--surface); font-size: 0.9375rem; }
.prose pre code { padding: 0; background: none; }

/* ---------- 9. Formuláře (templates/form.php) ---------- */
/* scroll-margin: po odeslání se stránka posune na #form-… – upozornění nahoře nemá být nalepené na okraj okna. */
/* align-items: end – když se popisek zalomí na dva řádky, pole v řádku zůstanou v jedné linii. */
.form { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 20px 24px; max-width: 48rem; scroll-margin-top: 32px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full, .form-note, .form-foot, .form-status { grid-column: 1 / -1; }
.field > label, .label { font-size: 0.9375rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.optional { font-weight: 400; color: var(--muted); }
.form-note, .hint { font-size: 0.9375rem; color: var(--muted); }
/* Formulář v textu stránky (značka <!-- form: … --> v content/) */
.prose .form { margin-top: 1.5em; }

/* Po odeslání: hlášení nad poli. Pruh v barvě z loga jako tvar, text zůstává tmavý – chyba červená, poděkování zelená.
 * Fokus sem přesune site.js (tabindex="-1"), rámeček by tu jen překážel – hlášení je vidět samo. */
.form-status { padding: 16px 20px; border-left: 4px solid var(--m-helpdesk); border-radius: var(--radius-lg); background: var(--surface); }
.form-status.is-sent { border-left-color: var(--m-nmm); }
.form-status:focus { outline: none; }
.form-status p { font-size: 1rem; line-height: 1.55; }
.form-status a { color: var(--ink); }
/* Hlášení vjede (6o krok 6): 150 ms po vykreslení, 320 ms (--t-enter) --ease-out, průhlednost a posun o 8 px shora –
 * po posunu stránky k formuláři ho oko najde. Je jednou za návštěvu, proto o něco déle než menu. S omezením pohybu
 * jen prolnutí, bez zpoždění. Chyby u polí bez pohybu (musí se dát hned přečíst), bez JavaScriptu hned celé. */
.js .form-status { animation: status-in var(--t-enter) var(--ease-out) calc(150ms * var(--motion)) both; }
@keyframes status-in { from { opacity: 0; transform: translateY(calc(-8px * var(--motion))); } }

/* Odesílání (site.js, .is-sending): tlačítko je neaktivní (dvojí odeslání), ale nezešedne – šedé znamená „nedá se
 * použít“. Zůstane tmavé, jen průhlednější, s nápisem Odesílám… / Sending… (6o krok 6). */
.form.is-sending [type="submit"]:disabled { background: var(--ink); color: #fff; opacity: 0.72; cursor: progress; }

/* Chyba pole (kontrola na serveru, u počtu klientů v kalkulačce i site.js): text mezi popiskem a polem, pole s červeným
 * okrajem – ne jen barvou, text říká co. */
.field-error { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--error); }
fieldset.field > .field-error { margin-bottom: 4px; }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }

/* Skryté pole proti robotům: mimo obrazovku (ne display: none – to roboti poznají), čtečkám skryté přes aria-hidden. */
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Plovoucí ikonka reCAPTCHA vpravo dole – místo ní je u tlačítka věta s odkazy na podmínky Googlu (Google to dovoluje). */
.grecaptcha-badge { visibility: hidden; }

.field :is(input:not([type="radio"], [type="checkbox"]), select, textarea) {
  width: 100%; min-height: 48px; padding: 11px 14px;
  background: var(--paper); border: 1px solid var(--field-line); border-radius: var(--radius);
  color: var(--ink); font-size: 1rem; line-height: 1.4;
}
.field :is(input:not([type="radio"], [type="checkbox"]), select, textarea):focus-visible { outline: 2px solid var(--focus-field); outline-offset: 0; border-color: var(--focus-field); }
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23292a4a' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center;
}

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; }
.check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ink); }
.check input:focus-visible { outline-color: var(--focus-field); }

/* Přepínače (radio) ve skupině: fieldset bez rámečku, legend jako popisek pole. Volby vedle sebe, na výšku
 * pole vedle (48 px), klikací je celý popisek volby. Legend není položka flexu → odstup přes margin. */
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field > legend { margin-bottom: 6px; padding: 0; }
.choices { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; min-height: 48px; }
.choices .check { align-items: center; min-height: 40px; cursor: pointer; }
.choices .check input { margin: 0; cursor: pointer; }

/* Souhlas se zpracováním údajů před tlačítkem (čte se dřív, než se odešle), na širokém displeji vedle sebe. */
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 4px; }
.form-foot p { flex: 1 1 18rem; max-width: 30rem; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.form-foot a { color: var(--ink); }
.form-foot .btn { min-width: 10rem; }

/* Kalkulačka nabídky (Ceník, formulář offer – templates/form.php, app/prices.php, site.js; design/18-kalkulacka.html,
 * varianta A, 7. 10. 2026). V HTML pole kalkulace (.calc), souhrn ceny (.calc-sum), kontaktní údaje (.calc-contact) –
 * pořadí na mobilu a pro čtečky. Od 1041 px je souhrn vpravo vedle kalkulace i kontaktu a jede s formulářem (sticky):
 * cena je vidět při každé volbě i při odeslání. Volby bez rámečků, členěné mezerami. Výrazná je jen cena; pruh pod ní
 * ukazuje v barvách modulů (jako kostky stavebnice výš na Ceníku), z čeho se skládá – barva jen jako tvar, text je
 * v rozpisu s trojúhelníkem stejné barvy. Bez JavaScriptu je v souhrnu jen věta (.calc-sum bez .is-priced). */
.form-calc { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; }
.form-calc > .form-status { margin-bottom: 32px; }
.calc { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: start; gap: 36px 40px; }
.calc .hint { line-height: 1.45; text-wrap: pretty; }
.calc input[inputmode="numeric"] { font-variant-numeric: tabular-nums; }

/* Přepínače s vysvětlením (varianta, podpora): volba tučně, pod ní řádky vysvětlení. Sloupec nejvýš asi 15rem přes
 * max-width mřížky (podpora 3 volby, varianta 2) – na tabletu by se volby roztáhly přes celou šířku a Server by byl
 * daleko od Cloudu. Ne horní mezí sloupce v minmax(): auto-fit by sloupce počítal podle ní a podpora by na širokém
 * displeji spadla na 2 + 1. Varianta vedle počtu klientů (ne přes celou šířku) má sloupec nejméně 12rem: na širokém
 * displeji je místa na dva sloupce málo (popisek by se zalomil), volby jsou pod sebou. */
.calc-opts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: 12px 24px;
  max-width: calc(3 * 15rem + 2 * 24px);
}
.calc > :not(.field-full) .calc-opts { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); max-width: calc(2 * 15rem + 24px); }
.calc-opt, .calc-opt input { cursor: pointer; }
.calc-opt > span, .calc-opt .hint { display: block; }
.calc-opt strong { display: block; line-height: 1.6; }

/* Moduly: Základní modul (vždy v ceně, zaškrtnutý napevno), pod ním dvě skupiny. Modul, který funguje jen s NMM, je
 * odsazený pod NMM – jako ve stavebnici, kde na NMM stojí. */
.calc-mods > legend { margin-bottom: 10px; }
.calc-mods .check { min-height: 30px; }
.calc-mods .check:has(input:enabled), .calc-mods input:enabled { cursor: pointer; }
.calc-mods > .calc-base { margin-bottom: 18px; font-weight: 400; }   /* label přímo ve fieldset.field je jinak tučný */
.calc-base > span, .calc-base .hint { display: block; }
.calc-base strong { display: block; line-height: 1.6; }
.calc-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.calc-group { display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.calc-group > legend { margin-bottom: 8px; padding: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--muted); }
.calc-sub { display: grid; gap: 6px; padding-left: 30px; }
.calc-sub .hint { margin-left: 4px; font-size: 0.875rem; }
/* Počet klientů Radius, GPON, CMTS, IPTV (platí se jen za ně) hned pod modulem, zarovnaný s jeho názvem (políčko
 * 20 px + mezera 10 px). Jen se zaškrtnutým modulem – i bez JavaScriptu (:has). */
.calc-mods .check:has(input:not(:checked)) + .calc-count { display: none; }
.calc-count, fieldset.calc-count { gap: 4px; margin: 0 0 8px 30px; }
.calc-count input { max-width: 12rem; }
.calc-count .hint { margin-left: 0; }
/* Banky pod API bank (zaškrtávací políčka, ne pole s počtem): nadpis jako popisek pole počtu, banky pod sebou jako moduly. */
fieldset.calc-count > legend { margin-bottom: 4px; }
fieldset.calc-count .choices { display: grid; gap: 0; min-height: 0; }
fieldset.calc-count .choices .check { min-height: 30px; }
fieldset.calc-count > .hint { margin-top: 4px; }
/* Jen banky z ceníku vybrané měny (data-currencies, app/forms.php; uživatel 16. 10. 2026) – i bez JavaScriptu.
 * Odškrtnutí skryté banky při změně měny dělá site.js, server ji zahodí i tak. */
.form-calc:has(input[name="currency"][value="CZK"]:checked) .check[data-currencies]:not([data-currencies~="CZK"]),
.form-calc:has(input[name="currency"][value="EUR"]:checked) .check[data-currencies]:not([data-currencies~="EUR"]),
.form-calc:has(input[name="currency"][value="USD"]:checked) .check[data-currencies]:not([data-currencies~="USD"]) { display: none; }
.form-calc .calc-auto { margin-top: 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }
.form-calc .calc-auto:empty { display: none; }

/* Souhrn: šedý panel v bílém listu (šedá ne do šedé – list je bílý). */
.calc-sum { margin-top: 40px; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--radius-lg); background: var(--surface); }
.calc-sum-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
/* scroll-margin: odkaz z lišty s cenou (#offer-sum) posune okno tak, aby byl vidět i horní okraj souhrnu nad nadpisem. */
/* Nadpisy ve formuláři (Orientační cena, Kontaktní údaje) stejně velké – 19 px jako nadpisy bodů (.points h3) na Ceníku. */
.form-calc .calc-sum h3 { margin: 0; font-size: 1.1875rem; line-height: 1.3; scroll-margin-top: 56px; }
.form-calc .calc-sum-head > .calc-cur { margin-top: 0; }   /* jinak odstup za nadpisem z .prose – měna o 8 px níž */
.calc-cur { display: flex; gap: 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
.calc-cur .check { align-items: center; gap: 7px; min-height: 32px; font-size: 0.9375rem; cursor: pointer; }
.calc-cur .check input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.form-calc .calc-total { margin-top: 12px; line-height: 1.45; }
.calc-total output { display: block; font-size: 1.125rem; font-weight: 600; text-wrap: pretty; }
.calc-sum.is-priced .calc-total output {
  font-size: clamp(2.25rem, 1.95rem + 1vw, 2.875rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc-per { display: block; margin-top: 6px; font-size: 0.9375rem; color: var(--muted); }
.calc-sum:not(.is-priced) :is(.calc-per, .calc-bar, .calc-lines, .calc-setup) { display: none; }
/* Pruh: segmenty všech modulů jsou v HTML, nevybrané mají šířku 0 – při změně se plynule rozšíří / zúží (odezva na volbu,
 * --t-move). S omezením pohybu skočí. */
.calc-bar { display: flex; height: 10px; margin-top: 22px; border-radius: var(--radius); overflow: hidden; }
.calc-bar i { flex: 0 1 0; min-width: 0; background: var(--c); transition: flex-grow calc(var(--t-move) * var(--motion)) var(--ease-out); }
.calc-bar i.is-on { border-right: 2px solid var(--surface); }
.form-calc .calc-lines { display: grid; gap: 7px; margin-top: 18px; }
.form-calc .calc-extra { margin-top: 14px; }
.prose .calc-lines > li {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px;
  margin: 0; padding: 0; font-size: 0.9375rem; line-height: 1.4; overflow-wrap: break-word;   /* dlouhý název k částce nevjede */
}
.prose .calc-lines > li::before { content: none; }
.calc-mark { align-self: center; width: 9px; height: 10px; background: var(--c, transparent); -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat; }
.calc-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-setup { margin-top: 20px; }
.form-calc .calc-setup-title { font-size: 0.9375rem; font-weight: 700; }
.form-calc .calc-setup .calc-lines { margin-top: 6px; }
/* Množstevní sleva až 20 % (kalkulačka ji nepočítá, dá ji obchodní oddělení v nabídce – uživatel 16. 10. 2026): má
 * být vidět u ceny, proto bílá ploška v šedém souhrnu (bílá v šedé, ne šedá do šedé). Věrnostní sleva hned pod ní.
 * Nadpis „Množstevní sleva“ normálním písmem, tučně jen „až 20 %“; v pravém dolním rohu plošky velké % v přechodu barev
 * loga zleva doprava jako ilustrace (uživatel 16. 10. 2026) – jen ozdoba, okraj plošky ho ořízne. Text má vpravo místo
 * (60 px), aby přes % nevedl – přes něj byl špatně čitelný. */
.calc-offer {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 22px; padding: 14px 60px 14px 16px;
  border-radius: var(--radius); background: var(--paper);
}
.calc-offer::after {
  content: "%" / ""; position: absolute; z-index: -1; right: -10px; bottom: -0.22em;
  font-size: 5.5rem; font-weight: 700; line-height: 1;
  background: linear-gradient(90deg, #009d3c, #00a389, #2d3881, #70253f, #e13c42, #ea9600);
  -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.4;
  pointer-events: none;
}
.form-calc .calc-offer p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.form-calc .calc-offer .calc-offer-title { font-size: 1rem; line-height: 1.4; color: var(--ink); text-wrap: balance; }
.form-calc .calc-offer-title strong { font-weight: 700; }
.form-calc .calc-offer p + p { margin-top: 4px; }
/* Věrnostní sleva (uživatel 16. 10. 2026): hned pod množstevní, víc vidět než poznámka, ale míň než množstevní – menší
 * bílá ploška bez %, menší písmo, bez ikony (uživatel ji nechtěl). */
.form-calc .calc-loyalty {
  margin-top: 8px; padding: 8px 16px; border-radius: var(--radius); background: var(--paper);
  font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty;
}
.form-calc .calc-note { margin-top: 20px; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }

.calc-contact { margin-top: 48px; }
.form-calc .calc-contact > h3 { margin: 0; font-size: 1.1875rem; line-height: 1.3; }
.form-calc .calc-contact-note { margin-top: 4px; font-size: 0.9375rem; color: var(--muted); }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 20px 24px; margin-top: 20px; }

@media (width > 1040px) {
  .form-calc { grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr); column-gap: clamp(40px, 4.5vw, 64px); }
  .form-calc > :is(.calc, .calc-contact) { grid-column: 1; }
  .form-calc > .calc-sum { grid-column: 2; grid-row: span 2; position: sticky; top: 24px; margin-top: 0; }
}
/* Souhrn pod volbami na tabletu (760–1040 px): cena, pruh, sleva a poznámky vlevo, rozpis (.calc-break) vpravo – přes celou
 * šířku listu by byl název řádku daleko od částky. Rozpis zabírá všechny řádky mřížky; poslední (1fr) vezme jeho výšku,
 * ať se levé řádky neroztáhnou. Bez ceny (jen věta) souhrn zůstává v jednom sloupci. */
@media (760px <= width <= 1040px) {
  .calc-sum.is-priced {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: repeat(6, auto) 1fr;
    column-gap: clamp(32px, 5vw, 56px); align-items: start;
  }
  .calc-sum.is-priced > :not(.calc-break) { grid-column: 1; }
  .calc-sum.is-priced > .calc-break { grid-column: 2; grid-row: 1 / -1; }
  .form-calc .calc-sum.is-priced .calc-break > .calc-lines:first-child { margin-top: 0; }
}

/* Lišta s cenou (do 1040 px je souhrn pod volbami; ukazuje ji site.js – .is-shown, když jsou vidět volby a souhrn ještě
 * ne): bílý list se stínem nahoru, přilepený k dolnímu okraji okna, cena vlevo, odkaz Rozpis ceny vpravo – celá lišta
 * vede na souhrn. Vyjede zdola (--t-open, --ease-out), zajede rychleji (--t-close); s omezením pohybu jen prolnutí.
 * Bez JavaScriptu skrytá. Při posunu k poli s fokusem nechá okno dole místo (.has-calc-peek), ať lišta pole nezakryje. */
.calc-peek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px 20px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); box-shadow: 0 -1px 2px rgba(41, 42, 74, 0.08), 0 -14px 32px -16px rgba(41, 42, 74, 0.34);
  color: var(--ink); text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(calc(100% * var(--motion)));
  transition: opacity var(--t-close) var(--ease-out), transform calc(var(--t-close) * var(--motion)) var(--ease-out),
    visibility 0s linear var(--t-close);
}
.calc-peek.is-shown {
  opacity: 1; visibility: visible; transform: none;
  transition-duration: var(--t-open), calc(var(--t-open) * var(--motion)), 0s; transition-delay: 0s;
}
.calc-peek-total { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; min-width: 0; }
.calc-peek-price { font-size: 1.375rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-peek-per { font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.calc-peek-more {
  flex: none; font-size: 0.9375rem; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
@media (hover: hover) {
  .calc-peek:hover { color: var(--ink); }
  .calc-peek:hover .calc-peek-more { color: var(--accent); text-decoration-thickness: 2px; }
}
html.has-calc-peek { scroll-padding-bottom: 96px; }
@media (width > 1040px) { .calc-peek { display: none; } }
/* Vysoký kontrast stín nekreslí – lišta by nad obsahem neměla hranu; průhledná linka se v něm ukáže. */
@media (forced-colors: active) { .calc-peek { border-top: 1px solid transparent; } }

/* Shrnutí odeslané kalkulace v poděkování po odeslání (site.js, ze sessionStorage): popisek a hodnota vedle sebe, bez
 * linek, které jinak má seznam pojmů v .prose; částka ceny tučně. Na mobilu pod sebou. */
.form-status .calc-recap { margin-top: 14px; }
.form-status .calc-recap-title { font-size: 0.9375rem; font-weight: 700; }
.form-status .calc-recap dl {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 20px; margin: 6px 0 0; font-size: 0.9375rem;
}
.form-status .calc-recap :is(dt, dd) { margin: 0; padding: 0; border: 0; line-height: 1.5; }
.form-status .calc-recap dt { font-weight: 400; color: var(--muted); }
.form-status .calc-recap strong { font-weight: 700; }

/* ---------- 10. Patička ----------
 * Tmavá (uživatel 1. 10. 2026). Logo = assets/img/logo-footer.svg: barevný symbol, bílý nápis. */
.site-footer { padding-bottom: 32px; background: var(--night); color: var(--night-ink); font-size: 0.9375rem; }

/* Pruh z trojúhelníků v barvách modulů (assets/img/ribbon.svg, generuje tools/make-graphics.php).
 * Šířka dlaždice v celých pixelech, aby na švu nevznikla světlá linka. */
.ribbon { height: 18px; margin-bottom: 56px; background: url("../img/ribbon.svg") 0 0 / 405px 18px repeat-x; }

/* Pět sloupců: firma, Mapa webu, Funkce (oblasti z menu), Důležité odkazy, kontakty (audit 6k bod 6, 5. 10. 2026).
 * Sloupce široké podle nejdelšího odkazu a mezi nimi stejné mezery – odkazy se nezalomí (EN „Helpdesk, technicians
 * and inventory“ by se v pevném sloupci zalomil). Do 1100 px tři sloupce ve dvou řádcích, do 760 px dva, do 620 px jeden. */
.footer-grid { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 40px 32px; }
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-company img { width: auto; height: 30px; }
.footer-company p { margin-top: 12px; }
.footer-company img + p { margin-top: 18px; }
.footer-title { margin-bottom: 12px; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; color: #fff; }
.footer-contacts { display: grid; gap: 20px; align-content: start; }

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: 6px; }
.site-footer a { color: var(--night-ink); text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { color: #fff; text-decoration: underline; } }
.site-footer a[aria-current] { color: #fff; font-weight: 700; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--night-line);
}
.footer-lang { display: flex; gap: 16px; }
.footer-lang span { font-weight: 700; color: #fff; }

/* ---------- 11. Hlavní stránka (templates/home.php) ----------
 * Mozaika jen tady: symbol loga z trojúhelníků v úvodu. Jinde na stránce nesou barvu trojúhelníky modulů
 * (stejné barvy jako na Co ISPadmin umí? a Proč ISPadmin?), ilustrace souvislou čarou (napojení, Server / Cloud)
 * a podbarvené plochy napojení. Části od sebe dělí mezera a jemné pozadí, žádné linky ani rámečky. */

/* Úvod: text vlevo, vpravo screenshot Dashboardu na symbolu loga. Symbol vyčnívá nad screenshot a za jeho pravý
 * okraj. Na širokém displeji zasahuje obrázek do okraje stránky (--bleed: volné místo vpravo od obsahu bez 32 px,
 * nejvýš 96 px) – symbol ale vždy celý uvnitř okna. Rozměry v % šířky obrázku, takže sedí na každé šířce:
 * symbol 64 % (výška = šířka / √3), screenshot 90 %, začíná 24 % pod horním okrajem symbolu. */
.home-hero { padding-block: clamp(40px, 1.6rem + 3.2vw, 80px) var(--section); overflow-x: clip; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: clamp(40px, 4.5vw, 64px); align-items: center;
}
.hero-text .lead { margin-top: 28px; }

.hero-visual {
  --bleed: clamp(0px, (100vw - var(--wrap)) / 2 - 32px, 96px);
  position: relative; margin-right: calc(-1 * var(--bleed)); padding-top: 24%;
}
.hero-visual .mosaic { position: absolute; top: 0; right: 0; width: 64%; height: auto; }
/* Screenshot je odkaz na plnou velikost (prohlížeč obrázků, site.js) – šířku a polohu nad symbolem má odkaz. */
.hero-shot-link { position: relative; display: block; width: 90%; border-radius: var(--radius); }
.hero-shot { width: 100%; border-radius: var(--radius); background: var(--paper); }
.hero-shot-link::before { box-shadow: var(--sheet-shadow); }   /* stín na odkazu, při najetí silnější (část 8, obrázek s odkazem) */

/* Symbol se při načtení poskládá po sloupcích zleva doprava (--i = sloupec, app/home.php). Jediná animace
 * na stránce; s omezeným pohybem je symbol hned celý. */
.mosaic polygon {
  stroke-width: 0.6; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  animation: tri-in 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 80ms + 120ms);
}
@keyframes tri-in { from { opacity: 0; transform: scale(0.35); } }
@media (prefers-reduced-motion: reduce) {
  .mosaic polygon { animation: none; }
}

/* Fakta pod úvodem: krátký štítek a pod ním vysvětlení, čtyři vedle sebe (pod 1040 px po dvou, na mobilu pod sebou). */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px);
  margin: clamp(56px, 6vw, 80px) 0 0; padding: 0; list-style: none;
}
.facts strong { display: block; font-size: 1.3125rem; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.facts span { display: block; margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* Nadpis a úvod vlevo, obsah vpravo (Všechno o klientovi…). */
.home-split {
  display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  column-gap: clamp(40px, 5vw, 72px); align-items: start;
}
.home-split-head .intro { margin-top: 20px; }

/* Klienti, síť, fakturace, technici – trojúhelník v barvě modulu jako u témat na Proč ISPadmin?, kam vede odkaz. */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.pillars h3 {
  display: flex; align-items: baseline; gap: 0.45em;
  font-size: clamp(1.375rem, 1.26rem + 0.49vw, 1.625rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
}
.pillars h3::before { content: ""; flex: none; height: 0.7em; }   /* tvar a fazety: část 4 */
.pillars p { margin-top: 10px; line-height: 1.6; text-wrap: pretty; }
.pillars a { display: inline-block; margin-top: 12px; padding-block: 2px; font-weight: 700; }

/* Moduly: základní modul (v licenci) na celou šířku na jemně podbarvené ploše, přídavné moduly pod ním ve třech
 * sloupcích. Trojúhelník v barvě modulu vlevo od názvu i popisu. */
.mods {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(32px, 4vw, 56px);
  margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; list-style: none;
}
.mod { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; }
.mod::before { content: ""; grid-row: 1 / span 2; height: 26px; margin-top: 2px; }   /* tvar a fazety: část 4 */
.mod h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.mod h3 a { text-decoration: none; }
@media (hover: hover) { .mod h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; } }
.mod p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.mod-base {
  grid-column: 1 / -1; margin-bottom: 4px; padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-radius: var(--radius-lg); background: var(--surface); background: color-mix(in srgb, var(--c) 8%, #fff);
}
.mod-base::before { height: 33px; margin-top: 1px; }
.mod-base h3 { font-size: clamp(1.5rem, 1.33rem + 0.73vw, 1.875rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.mod-base p { max-width: 40rem; margin-top: 8px; font-size: 1.0625rem; color: var(--muted); }
/* Všechny moduly podrobně: sekundární tlačítko jako Kontakty a tým (.about-links), 6j. */
.home-more { margin-top: clamp(40px, 5vw, 56px); }

/* Napojení: skupiny na plochách jemně podbarvených barvou z loga (--c podle obrázku), po čtyřech vedle sebe.
 * Nahoře ilustrace (assets/img/art/), bez rámečků a linek. Mozaika (audit 6k bod 4, varianta A, 5. 10. 2026):
 * skupina s nejdelším textem (.wide, CZ Úřady a data) je dvakrát širší s ilustrací vlevo – text má 3 řádky místo 5 a výšky
 * ploch v řádku se srovnají (dřív 4 + 3 a IPTV a Vlastní aplikace vedle ní z velké části prázdné). EN má 4 skupiny. */
.integrations {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px;
  margin: clamp(36px, 4.5vw, 52px) 0 0; padding: 0; list-style: none;
}
.integrations li {
  grid-column: span 3; padding: 24px 24px 28px; border-radius: var(--radius-lg);
  background: var(--surface); background: color-mix(in srgb, var(--c) 10%, #fff);
}
.integrations li.wide { grid-column: span 6; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-content: start; }
.integrations li.wide .art { grid-row: 1 / span 2; }
.integrations li.wide h3 { margin-top: 0; }
.integrations .art { width: auto; height: 76px; max-width: 100%; }
.integrations h3 { margin-top: 18px; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.integrations p { margin-top: 6px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* Server / Cloud vedle sebe na jemném pozadí (jako na Za kolik ISPadmin pořídím?). Text nahoře vlevo,
 * ilustrace ukotvená v pravém dolním rohu plochy (audit 6k bod 3, varianta B, 5. 10. 2026): obě plochy mají stejnou
 * kompozici bez ohledu na délku textu – nadpisy v jedné výšce, volné místo pod kratším textem vyplní ilustrace (dřív byl
 * obsah svisle na střed a nadpis Server o 40 px níž než Cloud). Pod nimi podpora a tlačítka. */
.hosting { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(32px, 4vw, 48px); }
.hosting-variant {
  position: relative; min-height: 290px;
  padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--surface);
}
.hosting-variant > div { max-width: 62%; }
.hosting-variant .art {
  position: absolute; right: 32px; bottom: 28px; width: 150px; height: 150px; object-fit: contain; object-position: right bottom;
}
.hosting-variant h3 { font-size: clamp(1.5rem, 1.33rem + 0.73vw, 1.875rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.hosting-variant p { max-width: 34rem; margin-top: 12px; line-height: 1.6; text-wrap: pretty; }
.hosting-support { max-width: 40rem; margin-top: 32px; font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }

/* Novinky (hlavní stránka) a Další novinky pod článkem: nadpis a odkaz na výpis na jednom řádku, pod nimi 3 články
 * (styly výpisu .news-list). */
.news-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.news-head a { font-weight: 700; }
/* Pod článkem stačí spodní mezera článku – dvojí mezera by Další novinky od článku odtrhla. */
.more-news { padding-top: 0; }
/* Nadpis jako části podstránek (38 px) – .h2 hlavní stránky by byl větší než nadpis článku. */
.more-news .h2 { font-size: clamp(1.75rem, 1.46rem + 1.22vw, 2.375rem); line-height: 1.1; }

/* Kdo ISPadmin vyvíjí + blok pro stávající zákazníky vedle. */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.about-text .intro { margin-top: 20px; }
/* Kontakty a tým, Naši partneři: sekundární tlačítka vedle sebe (6j; dřív podbarvené plochy v barvách z loga). */
.about-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.customers { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--surface); }
.customers h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.customers p { margin-top: 10px; font-size: 1rem; line-height: 1.6; text-wrap: pretty; }

/* Jak začít: tři kroky po sobě – číslo kroku v trojúhelníku z loga (zelená, modrá, červená jako tři části symbolu),
 * nadpis a věta. Bílé číslo má na všech třech barvách kontrast nad 5 : 1. */
.start-steps {
  counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(32px, 4vw, 56px);
  margin: clamp(36px, 4.5vw, 52px) 0 0; padding: 0; list-style: none;
}
.start-steps li { counter-increment: step; --n: #007c53; }
.start-steps li:nth-child(2) { --n: #2d3881; }
.start-steps li:nth-child(3) { --n: #cb3345; }
.start-steps li::before {   /* tvar a fazety: část 4 */
  content: counter(step); display: flex; align-items: center; height: 92px; margin-bottom: 18px; padding-left: 16px;
  --c: var(--n); color: #fff;
  font-size: 2.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.start-steps h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.start-steps p { max-width: 24rem; margin-top: 8px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.start-steps + .actions { margin-top: clamp(40px, 5vw, 56px); }

@media (max-width: 1040px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .hero-text { max-width: 40rem; }
  /* Pod textem: symbol menší, ať screenshot nezačíná až hluboko pod ním. */
  .hero-visual { max-width: 48rem; padding-top: 19%; }
  .hero-visual .mosaic { width: 54%; }
  .home-split, .about { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .home-split-head { max-width: 40rem; }
  .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Napojení po dvou. Široká skupina přes celou šířku na konci (dense: IPTV a Vlastní aplikace vedle sebe nad ní);
   * bez ní poslední (lichá) skupina přes celou šířku. */
  .integrations { grid-auto-flow: row dense; }
  .integrations li { grid-column: span 6; }
  .integrations li.wide, .integrations:not(:has(.wide)) li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .integrations li.wide p { max-width: 40rem; }
  /* Server / Cloud: text přes celou šířku plochy, menší ilustrace pod ním dál v pravém dolním rohu. */
  .hosting-variant { min-height: 0; padding-bottom: 150px; }
  .hosting-variant > div { max-width: none; }
  .hosting-variant .art { width: 110px; height: 110px; }
  .about-text { max-width: 40rem; }
  .customers { max-width: 40rem; }
}

@media (max-width: 760px) {
  .hosting, .start-steps { grid-template-columns: minmax(0, 1fr); }
  .start-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .start-steps li::before { grid-row: 1 / span 2; height: 62px; margin: 0; padding-left: 11px; font-size: 1.75rem; }
}

@media (max-width: 620px) {
  .hero-visual { padding-top: 28%; }
  .hero-visual .mosaic { width: 72%; }
  .hero-shot-link { width: 100%; }
  .facts, .pillars, .mods { grid-template-columns: minmax(0, 1fr); }
  .facts { gap: 20px; }
  .pillars { gap: 36px; }
  .mods { gap: 28px; }
  .integrations li, .integrations li.wide { grid-column: 1 / -1; }
  /* Široká skupina jako ostatní: ilustrace nad textem (vlevo by na text zbyla jen polovina plochy). */
  .integrations li.wide { display: block; }
  .integrations li.wide h3 { margin-top: 18px; }
  .integrations .art { height: 64px; }
}

/* ---------- 12. Užší obrazovky ---------- */
/* 1041–1180 px: menu a tlačítko na jednom řádku jen s menšími mezerami a menším logem (CZ by jinak přetekla o 77 px).
 * S šipkou u Funkcí zbývá na 1041 px asi 20 px (CZ), změřeno 2. 10. 2026. */
@media (min-width: 1041px) and (max-width: 1180px) {
  .header-bar { gap: 16px; }
  .logo img { height: 30px; }
  .nav { gap: 12px; }
  .nav-list a { padding-inline: 7px; }
  .nav-list .has-sub > a { padding-right: 2px; }
  .sub-toggle { width: 22px; }
  .head-cta { padding-inline: 14px; }
}

@media (max-width: 1040px) {
  .header-bar { flex-wrap: wrap; }

  /* Bez JavaScriptu je menu vidět pod logem, s JavaScriptem ho otevírá tlačítko Menu. */
  .nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 16px; margin-left: 0; padding: 0 0 24px; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li + li { border-top: 1px solid var(--line); }
  .nav-list a { width: 100%; padding: 12px 0; font-size: var(--text); white-space: normal; }
  /* Funkce: odkaz přes řádek, šipka vpravo (44 px na prst), oblasti pod nimi přes celou šířku. */
  .has-sub { flex-wrap: wrap; align-items: center; }
  .nav-list .has-sub > a { flex: 1 1 0; width: auto; padding-right: 0; }
  .sub-toggle { width: 44px; height: 44px; margin-right: -10px; }
  .sub { flex-basis: 100%; position: static; min-width: 0; padding: 0 0 8px 16px; background: none; border: 0; box-shadow: none; }
  .sub a { padding: 10px 0; }
  .sub a:hover { background: none; }
  html:not(.js) .sub { display: block; }
  html:not(.js) .sub-toggle { display: none; }
  .head-cta { min-height: 50px; font-size: var(--text); }

  .js .menu-btn { display: inline-flex; }
  /* Panel vyjede zpod hlavičky (6o krok 3): objevení 200 ms, zavření 140 ms, posun × --motion (s omezením pohybu jen
   * prolnutí). Zavírající se panel už nebere klepnutí ani kliknutí – projdou na stránku pod ním. */
  .js .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto;
    padding: 8px var(--gutter) 24px;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    opacity: 0; transform: translateY(calc(-8px * var(--motion))); pointer-events: none;
    transition-property: opacity, transform, display;
    transition-duration: var(--t-close);
    transition-timing-function: var(--ease-out);
    transition-behavior: allow-discrete;
  }
  .js .nav.is-open { display: flex; opacity: 1; transform: none; pointer-events: auto; transition-duration: var(--t-open); }
  @starting-style {
    .js .nav.is-open { opacity: 0; transform: translateY(calc(-8px * var(--motion))); }
  }
  /* Oblasti Funkcí v menu naběhnou (posun z −4 px), zavřou se hned (display v přechodu není). Výška se neanimuje –
   * řádky pod nimi se posunou hned (animace výšky by přepočítávala rozvržení v každém snímku). */
  .has-sub.is-open .sub {
    transition: opacity var(--t-open) var(--ease-out), transform var(--t-open) var(--ease-out);
  }
  @starting-style {
    .has-sub.is-open .sub { opacity: 0; transform: translateY(calc(-4px * var(--motion))); }
  }
}

@media (max-width: 1040px) {
  /* Demo: co bude následovat pod formulářem */
  .prose .demo-contact { grid-template-columns: minmax(0, 48rem); }
  .prose .demo-next { max-width: 40rem; }

  /* Obsah stránky nad textem, v rámečku. */
  .page-toc { display: block; max-width: 46rem; }
  .page-toc > .prose { max-width: 40rem; }
  .toc {
    position: static; max-height: none; overflow: visible; max-width: 40rem;
    margin-top: 28px; padding: 18px 22px; border-left: 0; border-radius: var(--radius-lg); background: var(--surface);
  }
}

@media (max-width: 900px) {
  .news-list { grid-template-columns: 1fr 1fr; }
  .prose .contacts { grid-template-columns: 1fr 1fr; }
  /* Tým: oddělení nad mozaikou */
  .prose .team { display: block; }
  .prose .team > .people { margin: 16px 0 48px; }
  .prose .team > .people:has(+ h4) { margin-bottom: 32px; }
  .prose .team > .team-note { margin-top: 16px; }
  /* Moduly: ilustrace nad textem, nižší plocha */
  .prose .module { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .prose .module figure { position: static; order: -1; margin-bottom: 28px; aspect-ratio: 16 / 9; }
  /* Varianty (Server / Cloud) pod sebou */
  .prose .variants { grid-template-columns: minmax(0, 1fr); max-width: 40rem; gap: 16px; }
  /* Demo: přihlášení pod popisem, Download: souhlas a tlačítko pod údaji */
  .prose :is(.demo-access, .download, .pricing-intro) { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
  /* Ceník: list s kalkulačkou a ceníky hned pod úvodním odstavcem, části ceny až pod ním (levá část se rozpustí do
   * mřížky úvodu). Symbol loga nad listem menší, uvnitř okraje stránky (na mobilu je okraj jen 20 px). */
  .prose .pricing-intro { row-gap: 0; }
  .prose .pricing-about { display: contents; }
  .prose .pricing-files { order: 1; margin-top: 100px; }
  .prose .pricing-about > .price-parts { order: 2; margin-top: 56px; }
  .prose .pricing-files::before { top: -80px; right: 0; width: min(72%, 340px); }
  /* Co ISPadmin umí?: název modulu nad funkcemi, skupiny ve dvou sloupcích. Proč ISPadmin?: text důvodu pod nadpisem. */
  .prose .feature, .prose .fn-group, .prose .why-item { grid-template-columns: minmax(0, 1fr); row-gap: 14px; max-width: 42rem; }
  .prose .area-compact { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; max-width: 42rem; }
  .prose .area { grid-template-columns: minmax(0, 1fr); row-gap: 32px; max-width: 42rem; }
  .prose .area-part.area-compact > ul { grid-column: auto; grid-row: auto; margin-top: 28px; padding-top: 0; }
  .prose .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose .why-art { margin-top: 20px; }
  .prose .why-art .art { height: 128px; }
  /* EN Why choose ISPadmin?: důvody ve dvou sloupcích, kontakty pod formulářem */
  .prose .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose .contact-split { grid-template-columns: minmax(0, 48rem); }
  /* Ceník: doplňkové služby ve dvou sloupcích */
  .prose .price-part .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose .contact-split > .contacts { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); margin-top: 40px; }
  /* Závěr: text na celou šířku, symbol pod ním – přesahuje přes pravý a dolní okraj plochy. */
  .prose .page-cta { padding: var(--pad) var(--pad) 0; }
  .prose .page-cta::after {
    position: relative; display: block; top: auto; right: auto; width: 76%; max-width: 420px; margin: 36px -12% -10% auto; transform: none;
  }
}

@media (max-width: 1100px) {
  .prose .flow-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 40rem; }
  .prose .flow-steps > li { display: grid; grid-template-columns: 47px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .prose .flow-steps > li::before { grid-row: 1 / span 2; height: 52px; margin: 0; padding-left: 10px; font-size: 1.5rem; }
  .prose .flow-steps p { margin-top: 4px; }
}

/* Záložky screenshotů: s krátkými názvy jsou v jednom řádku až do 760 px okna (nejdelší sada, Helpdesk a technici, má
 * 627 px; při delších názvech hranici posunout), pod tím ve dvou sloupcích, na mobilu pod sebou jako seznam a linka
 * vybrané je svisle vlevo – vodorovná by u zalomeného názvu šla přes celou šířku a vypadala jako oddělovač. Posuvný
 * řádek (návrh 6k) na mobilu vypadal rozbitě – useknutý popisek u okraje. */
@media (max-width: 760px) {
  .prose .shot-tabs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: start; gap: 6px 32px; }
}
@media (max-width: 620px) {
  .prose .shot-tabs { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .prose .shot-tabs button { padding: 7px 0 7px 16px; }
  .prose .shot-tabs button::after { inset: 0 auto 0 0; width: 3px; height: auto; }
}

/* Co je v licenci a co přidáte (Funkce i Ceník): rozvržení kostek podle šířky stavebnice (vedle textu má dvě třetiny
 * sloupce, do 1100 px okna je pod textem přes celý sloupec, na Ceníku na panelu). Pod 1145 px se kostky do jedné řady
 * nevejdou (kostka by měla méně než 92 px, CZ „Fakturace“ i s okraji potřebuje 91 px) – šest modulů stojí po třech, pod
 * 861 px po dvou ve více řadách (horní stojí na víkách dolních). Pod 761 px i moduly na NMM po dvou – v EN (tři) dva vedle
 * sebe a třetí na prvním, jinak by se „Scheduling“ do užší kostky nevešel. Pod 581 px (mobil) šest modulů ve sloupci
 * na sobě vpravo, síť vlevo; pod 321 px moduly na NMM na sobě (vedle sebe by se „Radius“ nevešel). */
@container kit (max-width: 1144px) {
  .prose :is(.kit-row, .kit-base) { --plate: 64px; }
  .prose .kit-biz { flex: 3 1 20px; }
  .prose .kit-biz > li { flex: 1 1 calc((100% - 20px) / 3); }
}
@container kit (max-width: 860px) {
  .prose .kit-biz { flex: 2 1 10px; }
  .prose .kit-biz > li { flex-basis: calc((100% - 10px) / 2); }
}
@container kit (max-width: 760px) {
  .prose :is(.kit-net, .kit-net:not(:has(.kit-on > li:nth-child(4)))) { --on: 2; }
  .prose .kit-on > li { flex: 0 0 calc(50% - 5px); }
  .prose .kit-on:not(:has(> li:nth-child(4))) { flex-wrap: wrap-reverse; }
  .prose :is(.kit-on, .kit-biz) .cube { padding-inline: 7px; }
}
@container kit (max-width: 580px) {
  .prose :is(.kit-row, .kit-base) { --plate: 48px; --set: 24px; }
  .prose .kit-net { flex: 1.6 1 0; }
  .prose .kit-on { gap: 10px 8px; margin: 0 4px 6px 10px; }
  .prose .kit-on > li { flex-basis: calc(50% - 4px); }
  .prose .kit-biz { flex: 1 1 0; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
  .prose .kit-biz > li { flex: none; }
  .prose .cube { --d: 20px; min-height: 46px; }
  .prose .kit-biz .cube { padding-inline: 8px; }
  .prose .kit-nmm { --d: 32px; padding-inline: 10px; }
  .prose .kit-base { padding: 16px 18px 18px; }
}
@container kit (max-width: 320px) {
  .prose :is(.kit-on, .kit-on:not(:has(> li:nth-child(4)))) { flex-wrap: wrap; }
  .prose :is(.kit-on, .kit-on:not(:has(> li:nth-child(4)))) > li { flex: 1 1 100%; }
}
@media (max-width: 1100px) {
  .prose :is(.price-modules, .licence) { display: block; }
  .prose :is(.price-modules, .licence) > .licence-kit { margin-top: 36px; }
}
@media (max-width: 620px) {
  .prose .price-modules > .licence-kit { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-radius: 0; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .header-bar { min-height: 64px; }
  .logo img { height: 28px; }
  .actions .btn, .prose .area-more .btn { width: 100%; }
  .about-links { flex-direction: column; }
  :is(.about-links, .home-more) .btn { width: 100%; }
  .form { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; }
  /* Kalkulačka nabídky: vše pod sebou. Sloupec formuláře minmax(0, …) – 1fr z .form výš by ho roztáhl podle nejdelší
   * ceny (nezalamuje se) a stránka by na úzkém mobilu ujížděla do strany; cenu zmenší site.js. */
  .form-calc { grid-template-columns: minmax(0, 1fr); }
  .calc, .calc-groups, .calc-fields { grid-template-columns: minmax(0, 1fr); }
  .calc { row-gap: 32px; }
  .calc-contact { margin-top: 40px; }
  .form-status .calc-recap dl { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .form-status .calc-recap dd + dt { margin-top: 8px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .ribbon { margin-bottom: 40px; }
  .news-list { grid-template-columns: 1fr; gap: 44px; margin-top: 36px; }
  .pager { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .pager ul { grid-area: 1 / 1 / 2 / -1; gap: 2px; }
  .pager [rel="prev"] { grid-area: 2 / 1; justify-self: start; }
  .pager [rel="next"] { grid-area: 2 / 2; justify-self: end; }
  .prose dl { grid-template-columns: 1fr; }
  .prose dd { padding-top: 0; border-top: 0; }
  .prose .logos { grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 32px; }
  .prose .logos a { height: 96px; padding: 16px; }
  .prose .contacts { grid-template-columns: 1fr; gap: 24px; }
  .prose .people { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .prose .module-index ul { columns: 1; }
  .prose .reasons { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .prose .points { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .prose .gains { gap: 44px; }
  .prose .gain-art { height: 104px; margin-bottom: 20px; }
  .prose .price-part .points { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .prose .module-index a { gap: 12px; padding-block: 8px; font-size: 1.0625rem; }
  .prose .module-index a::before { height: 17px; margin-top: calc((1.3em - 17px) / 2); }
  /* Srovnávací tabulka se vejde i na 320 px: užší buňky, nadpis řádku se zalomí. */
  .prose .compare { font-size: 0.9375rem; }
  .prose .compare :is(th, td) { padding: 12px 6px; }
  .prose .compare :is(tbody, tfoot) th { padding-left: 12px; }
  .prose .compare thead th { width: 18%; font-size: 1.0625rem; }
  /* Pevné šířky sloupců: delší hodnota (zálohy) nesmí zúžit sloupec s popisem řádku. */
  .prose .compare { table-layout: fixed; }
  .prose .compare td { padding-inline: 4px; }
  .prose .compare tbody + tbody > tr:first-child > *, .prose .compare tfoot > tr > * { border-top-width: 28px; }
  .prose :is(.demo-login, .download-get, .pricing-files), .prose :is(.contact-split, .offer-split, .demo-contact) .form { padding: 20px; }
  .prose .demo-login > p:first-child { font-size: 1.125rem; }
}

/* ---------- 13. Tisk (licenční ujednání, zásady ochrany údajů) ---------- */
@media print {
  .skip-link, .util-bar, .menu-btn, .nav, .ribbon, .site-footer nav, .footer-lang, .toc, .crumbs, .pager, .form, .download-get, .article-about, .more-news { display: none !important; }
  .page-toc { display: block; }
  .site-header { border: 0; }
  /* Pozadí se netiskne – patička tmavým písmem, logo s bílým nápisem by na papíře zmizelo (logo je v hlavičce). */
  .site-footer { background: none; color: var(--ink); }
  .footer-title, .site-footer a, .footer-lang span { color: var(--ink); }
  .footer-company img { display: none; }
  .start-steps li::before, .prose .steps > li::before { color: var(--ink); }
  /* Pásy, listy a tmavý závěr bez pozadí a stínu (border-image by se vytiskl). */
  .band, .prose :is(.contact-split, .offer-split, .demo-contact), .prose .topic-head, .article-about { border-image: none; }
  .prose :is(.demo-login, .download-get, .pricing-files) { box-shadow: none; }
  .prose .pricing-files::before { display: none; }
  /* Stavebnice (Funkce): víka a boky se netisknou, kostky a deska s rámečkem, deska tmavým písmem. */
  .prose :is(.cube, .kit-base) { border: 1px solid var(--ink); }
  .prose .kit-base, .prose .kit-base span { background: none; color: var(--ink); }
  /* Celá i tehdy, když se k ní návštěvník neposunul (čeká skrytá) nebo se právě skládá. */
  .prose .licence-kit:is(.is-waiting, .is-shown) :is(.kit-base, .cube) { opacity: 1; animation: none; }
  .prose .page-cta { padding: 0; background: none; color: var(--ink); }
  .prose .page-cta::after { display: none; }
  .prose .page-cta :is(h2, a:not(.btn)) { color: var(--ink); }
  body { font-size: 11pt; }
  .prose a { text-decoration: underline; }
}