/* menegio.com — vzhled podle schváleného náhledu z 20. 9. 2026.
   Barvy, písma a rozměry VÝHRADNĚ z tokenů značky (/brand/tokens.9457689b0c.css). Žádný hex tady. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mng-background-page);
  color: var(--mng-text-default);
  font-family: var(--mng-font-body);
  font-size: var(--mng-text-md-size);
  line-height: var(--mng-text-md-line-height);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--mng-font-display); font-weight: var(--mng-font-weight-display); margin: 0; }
p { margin: 0; }
a { color: inherit; }

/* Okraje jsou zamerne siroke: na 1280px okne zbyvalo po stranach 20 px a web
   pusobil roztazene. Nahled ma pri 1440px okraje 80 px — tomu odpovida 1160px obsah. */
.obal { width: min(100% - 5rem, 1160px); margin-inline: auto; }
.obal--uzky { width: min(100% - 5rem, 720px); }
.preskok { position: absolute; left: -9999px; }
.preskok:focus { left: 1rem; top: 1rem; z-index: 20; background: var(--mng-surface-raised); padding: .75rem 1rem; border-radius: var(--mng-radius-m); box-shadow: var(--mng-shadow-focus); }

/* ── hlavička ─────────────────────────────────────────────────────────── */
.hlavicka { border-bottom: 1px solid var(--mng-border); background: var(--mng-background-page); }
.hlavicka__mrizka { display: flex; align-items: center; gap: 1.5rem; min-height: 5rem; }
.znacka { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; }
.znacka__znak { display: block; width: 1.875rem; height: 1.875rem; }
.znacka__znak svg { display: block; width: 100%; height: 100%; }
.znacka__nazev { font-family: var(--mng-font-display); font-size: var(--mng-display-sm-size); font-weight: var(--mng-font-weight-semibold); letter-spacing: var(--mng-display-letter-spacing); }
.navigace { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
/* Polozka menu se nesmi lamat pres dva radky — na sirku telefonu se z „Objednávka → štítek“
   a „Web a e-shop“ stavaly dvouradkove sloupce a hlavicka se rozsypala. */
.navigace__odkaz { padding: .625rem .75rem; border-radius: var(--mng-radius-s); font-size: var(--mng-text-sm-size); font-weight: var(--mng-font-weight-medium); text-decoration: none; white-space: nowrap; }
.navigace__odkaz:hover { color: var(--mng-text-accent); }
.navigace__odkaz--zde { color: var(--mng-text-accent); }
.jazyky { display: flex; align-items: center; gap: .75rem; margin: 0 0 0 .5rem; padding-left: .75rem; border-left: 1px solid var(--mng-border); font-size: var(--mng-text-sm-size); font-weight: var(--mng-font-weight-medium); }
.jazyky a { color: var(--mng-text-muted); text-decoration: none; }
.jazyky a:hover { color: var(--mng-text-accent); }
/* Jazyk, ktery jeste nema obsah (F4b): ukazuje se, ale neni odkazem — odkaz by vedl na 404. */
.jazyky__brzy { color: var(--mng-text-muted); opacity: .5; cursor: default; }
/* Přepínač je vizuálně skrytý, ale FOKUSOVATELNÝ — jinak se menu z klávesnice
   neotevře. Obrys se kreslí na popisku, protože ten je vidět. */
.menu__prepinac { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menu__tlacitko { display: none; }
.menu__prepinac:focus-visible + .menu__tlacitko { outline: 2px solid var(--mng-focus); outline-offset: 2px; }

/* ── tlačítka a odkazy ────────────────────────────────────────────────── */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.375rem; border: 0; border-radius: var(--mng-radius-m);
  background: var(--mng-button-default); color: var(--mng-button-text);
  font: inherit; font-weight: var(--mng-font-weight-semibold); text-decoration: none; cursor: pointer;
}
.tlacitko:hover { background: var(--mng-button-hover); }
.tlacitko--druhe { background: var(--mng-button-secondary); color: var(--mng-button-secondary-text); }
.tlacitko--druhe:hover { background: var(--mng-button-ghost-hover); }
.tlacitko--tise { background: transparent; color: var(--mng-text-default); padding-inline: .25rem; border-radius: 0; border-bottom: 2px solid var(--mng-accent-light); min-height: 2.75rem; }
.tlacitko--tise:hover { background: transparent; color: var(--mng-text-accent); }
.odkaz-dal { color: var(--mng-text-accent); font-weight: var(--mng-font-weight-medium); text-decoration: none; }
.odkaz-dal:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mng-focus); outline-offset: 2px;
}

.pilulka {
  display: inline-flex; align-items: center; gap: .375rem; align-self: flex-start;
  min-height: 1.75rem; padding: .125rem .75rem; border-radius: var(--mng-radius-pill);
  background: var(--mng-state-success-light);
  color: var(--mng-state-success); font-size: var(--mng-label-size); font-weight: var(--mng-label-weight);
}
/* Štítek kategorie nad H1 na úvodní stránce (21. 9. 2026): popisek z manuálu, ne pilulka stavu —
   zelená znamená „bez přístupu do banky“, kategorie je neutrální údaj. Záporný okraj přitáhne
   štítek k nadpisu (mezera hero__text je 1,5rem). */
.hero__stitek {
  margin: 0 0 -.75rem; color: var(--mng-text-muted);
  font-size: var(--mng-label-size); font-weight: var(--mng-label-weight); letter-spacing: .01em;
}

/* ── sekce ────────────────────────────────────────────────────────────── */
.sekce { padding-block: clamp(3rem, 6vw, 5.5rem); }
.sekce--tesna { padding-block: 0 clamp(2rem, 4vw, 3rem); }
/* Na teplém papíru má tlumený text 4,47:1 a terracotta 4,45:1 — těsně pod AA.
   V těchto sekcích se proto sází o stupeň tmavší; na papíru-50 pravidla platí dál. */
.sekce--papir { background: var(--mng-background-subtle); }
.sekce--papir .cislo__popis, .sekce--papir .polozka__text, .sekce--papir .krok__text,
.sekce--papir .cesta__text, .sekce--papir .formular__pozn, .sekce--papir .formular__souhlas,
.sekce--papir .spojeni__adresa { color: var(--mng-text-secondary); }
.sekce--papir .odkaz-dal, .sekce--papir .text a { color: var(--mng-color-terracotta-700); }
.sekce--papir .otazka__nadpis::after { color: var(--mng-color-terracotta-700); }
.sekce--tmava { background: var(--mng-background-section-dark); color: var(--mng-text-on-dark); }
/* Balíček nemá slot pro TLUMENÝ text na tmavé (alias on-invert-muted se do slotů
   nedostal), a --mng-text-on-chip je text na SVĚTLÉM štítku, tedy inkoust —
   na tmavé sekci byl nečitelný. Do doplnění slotu se používá plný on-dark. */
.sekce--tmava .sekce__uvod, .sekce--tmava .vyzva__text { color: var(--mng-text-on-dark); }
.sekce__nadpis { font-size: var(--mng-display-lg-size); line-height: var(--mng-display-line-height); letter-spacing: var(--mng-display-letter-spacing); max-width: 24ch; }
.sekce__uvod { margin-top: 1rem; max-width: 62ch; color: var(--mng-text-secondary); font-size: var(--mng-text-lg-size); line-height: var(--mng-text-lg-line-height); }
.oddelovac { border: 0; border-top: 1px solid var(--mng-border); margin: 0; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2.5rem, 6vw, 6rem) clamp(2rem, 4vw, 4.5rem); }
.hero__text { display: flex; flex-direction: column; gap: 1.5rem; max-width: 40ch; }
/* Sirku drzi sloupec mrizky — dalsi strop v ch nadpis jen rozsype. */
.hero--uvodni .hero__text { max-width: none; }
.hero--uvodni .hero__titul { max-width: 15ch; }
.hero__titul { font-size: var(--mng-display-2xl-size); line-height: var(--mng-display-line-height-tight); letter-spacing: var(--mng-display-letter-spacing); }
.hero:not(.hero--uvodni) .hero__titul { font-size: var(--mng-display-xl-size); line-height: var(--mng-display-line-height); }
.hero__podtitul { color: var(--mng-text-secondary); font-size: var(--mng-text-xl-size); line-height: var(--mng-text-xl-line-height); max-width: 58ch; }
.hero__akce { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

/* ── mřížky ───────────────────────────────────────────────────────────── */
.mrizka { display: grid; gap: 2rem; margin-top: 2.5rem; }
.mrizka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mrizka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mrizka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mrizka--1 { grid-template-columns: minmax(0, 1fr); }
.polozka { display: flex; flex-direction: column; gap: 1rem; }
.mrizka--karty .polozka { padding-top: 1.5rem; border-top: 2px solid var(--mng-accent); }
.mrizka--seznam .polozka { padding-top: 1.125rem; border-top: 1px solid var(--mng-border); gap: .5rem; }
.mrizka--holy .polozka { gap: .5rem; }
.polozka__nadpis { font-size: var(--mng-display-sm-size); line-height: 1.35; }
.polozka__ikona { display: inline-flex; color: var(--mng-text-accent); line-height: 0; }
.polozka__ikona svg { width: 1.75rem; height: 1.75rem; }
.polozka__text { color: var(--mng-text-secondary); }
.sekce--tmava .polozka__text { color: var(--mng-text-on-dark); }

/* ── kroky ────────────────────────────────────────────────────────────── */
.kroky { list-style: none; display: grid; gap: 2rem; margin: 2.5rem 0 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kroky--cesta { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.krok { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--mng-border); }
.krok__cislo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--mng-radius-pill);
  border: 2px solid var(--mng-accent); color: var(--mng-text-accent);
  font-weight: var(--mng-font-weight-semibold); font-size: var(--mng-text-sm-size);
}
.krok__nadpis { font-size: var(--mng-text-lg-size); line-height: 1.35; }
.krok__text { color: var(--mng-text-secondary); font-size: var(--mng-text-sm-size); line-height: var(--mng-text-sm-line-height); }

/* ── čísla ────────────────────────────────────────────────────────────── */
.cisla { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cisla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cislo { display: flex; flex-direction: column; gap: .25rem; padding-top: 1.25rem; border-top: 2px solid var(--mng-text-headline); }
.cislo__hodnota { font-family: var(--mng-font-display); font-size: var(--mng-display-lg-size); font-weight: var(--mng-font-weight-semibold); letter-spacing: var(--mng-display-letter-spacing); }
.cislo__popis { color: var(--mng-text-muted); font-size: var(--mng-text-sm-size); }

/* ── otázky ───────────────────────────────────────────────────────────── */
.otazky { margin-top: 2rem; border-top: 1px solid var(--mng-border); }
.otazka { border-bottom: 1px solid var(--mng-border); }
.otazka__nadpis { list-style: none; cursor: pointer; padding: 1.25rem 2rem 1.25rem 0; position: relative; font-family: var(--mng-font-display); font-size: var(--mng-text-lg-size); font-weight: var(--mng-font-weight-semibold); }
.otazka__nadpis::-webkit-details-marker { display: none; }
.otazka__nadpis::after { content: "+"; position: absolute; right: .25rem; top: 1.125rem; font-size: 1.5rem; line-height: 1; color: var(--mng-text-accent); }
.otazka[open] .otazka__nadpis::after { content: "−"; }
.otazka__odpoved { padding-bottom: 1.25rem; color: var(--mng-text-secondary); max-width: 68ch; }
.otazka__odpoved p { margin-top: 0; }

/* ── text ─────────────────────────────────────────────────────────────── */
.text { color: var(--mng-text-secondary); }
.text > * + * { margin-top: 1.25rem; }
.text h2 { color: var(--mng-text-headline); font-size: var(--mng-display-md-size); line-height: var(--mng-display-line-height); letter-spacing: var(--mng-display-letter-spacing); }
.text h3 { color: var(--mng-text-headline); font-size: var(--mng-display-sm-size); }
.text a { color: var(--mng-text-accent); }

/* ── výzva ────────────────────────────────────────────────────────────── */
.vyzva { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.vyzva--karta { padding: 2rem; border-radius: var(--mng-radius-l); background: var(--mng-surface-raised); border: 1px solid var(--mng-border); }
.vyzva__nadpis { font-size: var(--mng-display-lg-size); line-height: var(--mng-display-line-height); letter-spacing: var(--mng-display-letter-spacing); max-width: 26ch; }
.sekce--tmava .vyzva__nadpis { color: var(--mng-text-on-dark); }
.vyzva__text { margin-top: .75rem; color: var(--mng-text-secondary); max-width: 62ch; }
.vyzva__akce { display: flex; flex-wrap: wrap; gap: 1rem; }
.vyzva-radek { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.vyzva-radek__text { color: var(--mng-text-secondary); }

/* ── spojení ──────────────────────────────────────────────────────────── */
.spojeni { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem; border-radius: var(--mng-radius-l); background: var(--mng-surface-raised); border: 1px solid var(--mng-border); }
.spojeni__jmeno { font-weight: var(--mng-font-weight-semibold); }
.spojeni__adresa { color: var(--mng-text-muted); }

/* ── formulář ─────────────────────────────────────────────────────────── */
.formular__nadpis { font-size: var(--mng-display-md-size); letter-spacing: var(--mng-display-letter-spacing); }
.formular__telo { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.pole { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pole__kus { display: flex; flex-direction: column; gap: .375rem; }
.pole__kus--full { grid-column: 1 / -1; }
.pole__kus--souhlas { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: .625rem; font-size: var(--mng-text-sm-size); color: var(--mng-text-secondary); }
.pole__popis { font-size: var(--mng-text-sm-size); color: var(--mng-text-secondary); }
.pole input, .pole select, .pole textarea {
  min-height: 3rem; padding: .625rem .875rem; border: 1px solid var(--mng-border-strong);
  border-radius: var(--mng-radius-m); background: var(--mng-surface-raised); color: var(--mng-text-default);
  font: inherit; width: 100%;
}
.pole textarea { min-height: 7.5rem; resize: vertical; }
.pole__kus--souhlas input { min-height: 0; width: auto; margin-top: .25rem; }
.pole__past { position: absolute; left: -9999px; }
.formular__souhlas, .formular__pozn { color: var(--mng-text-muted); font-size: var(--mng-text-sm-size); }
.formular__akce { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.formular__stav { color: var(--mng-text-secondary); font-size: var(--mng-text-sm-size); }

/* ── patička ──────────────────────────────────────────────────────────── */
.paticka { padding-block: 3.5rem 2.5rem; border-top: 1px solid var(--mng-border); }
.paticka__mrizka { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 2rem; }
.paticka__znacka { display: flex; flex-direction: column; gap: .75rem; }
.paticka__znacka .znacka__znak { width: 1.625rem; height: 1.625rem; }
.paticka__pozn { color: var(--mng-text-muted); font-size: var(--mng-text-sm-size); max-width: 34ch; }
.paticka__sloupec { display: flex; flex-direction: column; gap: .5rem; }
.paticka__sloupec a { color: var(--mng-text-secondary); text-decoration: none; font-size: var(--mng-text-sm-size); }
.paticka__sloupec a:hover { color: var(--mng-text-accent); }
.paticka__titul { font-weight: var(--mng-font-weight-semibold); font-size: var(--mng-text-sm-size); }
.paticka__spodek { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mng-border); color: var(--mng-text-muted); font-size: var(--mng-text-sm-size); }
.paticka__pravni { display: flex; gap: 1rem; }
.paticka__pravni a { color: var(--mng-text-muted); }

/* ── mobil ────────────────────────────────────────────────────────────── */
@media (max-width: 64rem) {
  .mrizka--4, .kroky--cesta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrizka--3, .kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paticka__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Hlavicka se sklada do menu drive nez zbytek layoutu: sest polozek plus prepinac jazyku
   se na jeden radek vejde az nad 68rem. Na sirku telefonu (kolem 53rem) se drive lamalo. */
@media (max-width: 68rem) {
  .hlavicka__mrizka { flex-wrap: wrap; min-height: 4rem; gap: .75rem; }
  .menu__tlacitko { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 2.75rem; height: 2.75rem; cursor: pointer; }
  .navigace { display: none; flex-direction: column; align-items: stretch; width: 100%; margin-left: 0; padding-bottom: .75rem; }
  .menu__prepinac:checked ~ .navigace { display: flex; }
  .navigace__odkaz { padding: .75rem .25rem; }
  /* V otevrenem menu sedi prepinac dole pod odkazy, ne vedle znacky. */
  .jazyky { margin: .25rem 0 0; padding: .75rem .25rem 0; border-left: 0; border-top: 1px solid var(--mng-border); }
}
@media (max-width: 48rem) {
  .obal, .obal--uzky { width: min(100% - 2.5rem, 1160px); }
  .mrizka, .kroky, .cisla, .mrizka--2, .mrizka--3, .mrizka--4, .kroky--cesta, .cisla--2 { grid-template-columns: minmax(0, 1fr); }
  .pole { grid-template-columns: minmax(0, 1fr); }
  .paticka__mrizka { grid-template-columns: minmax(0, 1fr); }
  .sekce__nadpis, .vyzva__nadpis, .cislo__hodnota { font-size: var(--mng-display-sm-size); }
  .hero__podtitul { font-size: var(--mng-text-lg-size); }
}

/* ── úvodní hero: text vlevo, cesta objednávky vpravo (schválený náhled) ─── */
/* Zarovnani na HORNI hranu: lista zalozek vpravo lezi v jedne rovine s pilulkou
   vlevo a pri prepnuti slajdu se nehne. Svisle centrovani ji posouvalo. */
.hero__mrizka--dva { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.hero--uvodni .hero__text { max-width: none; }
.hero--uvodni .hero__titul { max-width: 15ch; }
.hero__diagram { display: flex; flex-direction: column; gap: 1rem; }
.hero__pozn { color: var(--mng-text-secondary); font-size: var(--mng-text-sm-size); max-width: 52ch; }
.cesta__popiska { color: var(--mng-text-muted); font-size: var(--mng-text-sm-size); line-height: var(--mng-text-sm-line-height); }

/* ── cesta objednávky: svislá trať ──────────────────────────────────────── */
.cesta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cesta__stanice { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: 1rem; position: relative; padding-bottom: 1.5rem; }
.cesta__stanice:last-child { padding-bottom: 0; }
/* Linka vede od středu značky k další stanici; u poslední se nekreslí. */
.cesta__stanice::before {
  content: ""; position: absolute; left: .8125rem; top: 1.25rem; bottom: 0;
  width: 3px; background: var(--mng-color-terracotta-300);
}
.cesta__stanice:last-child::before { content: none; }
.cesta__znak {
  position: relative; z-index: 1; margin-top: .3125rem; width: .875rem; height: .875rem;
  border-radius: var(--mng-radius-pill); background: var(--mng-background-page);
  border: 3px solid var(--mng-accent); justify-self: center;
}
.cesta__stanice--cil .cesta__znak { background: var(--mng-state-success); border-color: var(--mng-state-success); }
.cesta__obsah { display: flex; flex-direction: column; gap: .125rem; }
.cesta__nadpis { font-family: var(--mng-font-display); font-size: var(--mng-text-lg-size); font-weight: var(--mng-font-weight-semibold); letter-spacing: var(--mng-heading-letter-spacing); }
.cesta__text { color: var(--mng-text-muted); font-size: var(--mng-text-sm-size); line-height: var(--mng-text-sm-line-height); }

@media (max-width: 64rem) {
  .hero__mrizka--dva { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* ── slajdy v heru stránky řešení (přepínač, bez automatické rotace) ────── */
/* Volby, popisky i panely jsou SOUROZENCI — jinak nemá selektor ~ na co sáhnout.
   Popisky se poskládají do řádku, panel zabere celou šířku pod nimi. */
.slajdy { display: flex; flex-wrap: wrap; gap: .375rem; }
.slajdy__volba { position: absolute; opacity: 0; pointer-events: none; }
.slajdy__zalozka {
  padding: .5rem .875rem; border-radius: var(--mng-radius-pill); cursor: pointer;
  font-size: var(--mng-text-sm-size); font-weight: var(--mng-font-weight-medium);
  color: var(--mng-text-secondary); background: var(--mng-background-subtle);
  white-space: nowrap;
}
.slajdy__zalozka:hover { color: var(--mng-text-accent); }
.slajdy__volba:checked + .slajdy__zalozka { background: var(--mng-accent); color: var(--mng-text-reversed); }
.slajdy__volba:focus-visible + .slajdy__zalozka { outline: 2px solid var(--mng-focus); outline-offset: 2px; }
.slajdy__panel { display: none; }
/* Panely jsou jediné <div> mezi sourozenci, volby jediné <input> — n-tá zaškrtnutá
   volba tedy odkrývá n-tý panel. */
.slajdy__panel { flex: 0 0 100%; margin-top: .875rem; }
/* Spodni hranice vysky drzi obsah pod herem na miste, at ma prepnuty slajd
   jakoukoli vysku. Na uzkem displeji se neuplatnuje — tam by delala prazdno. */
@media (min-width: 64.0625rem) { .slajdy__panel { min-height: 21rem; } }
.slajdy__volba:nth-of-type(1):checked ~ .slajdy__panel:nth-of-type(1),
.slajdy__volba:nth-of-type(2):checked ~ .slajdy__panel:nth-of-type(2),
.slajdy__volba:nth-of-type(3):checked ~ .slajdy__panel:nth-of-type(3) { display: block; }

/* štítek */
.stitek { background: var(--mng-surface-raised); border: 2px dashed var(--mng-border-strong); border-radius: var(--mng-radius-m); padding: 1.375rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.stitek__hlavicka { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: .875rem; border-bottom: 2px solid var(--mng-text-headline); }
.stitek__dopravce { font-family: var(--mng-font-display); font-size: var(--mng-display-md-size); font-weight: var(--mng-font-weight-semibold); letter-spacing: var(--mng-display-letter-spacing); }
.stitek__sluzba { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); padding: .1875rem .625rem; border-radius: var(--mng-radius-pill); background: var(--mng-state-info-light); color: var(--mng-state-info); }
.stitek__adresy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
.stitek__pole { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); color: var(--mng-text-muted); margin-bottom: .1875rem; }
.stitek__hodnota { font-size: var(--mng-text-sm-size); }
.stitek__hodnota--tlumena { color: var(--mng-text-muted); }
.stitek__kod { display: flex; gap: 2px; align-items: flex-end; height: 3.5rem; margin-top: .125rem; }
.stitek__kod i { display: block; background: var(--mng-text-headline); }
.stitek__mono { font-family: var(--mng-font-mono); font-size: var(--mng-text-sm-size); color: var(--mng-text-secondary); letter-spacing: 1px; margin-top: .5rem; }

/* řetěz zařízení */
.retez { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.retez__uzel { display: flex; align-items: center; gap: .875rem; padding: .875rem 1.125rem; border-radius: var(--mng-radius-m); background: var(--mng-surface-raised); border: 1px solid var(--mng-border); position: relative; }
.retez__uzel + .retez__uzel::before { content: ""; position: absolute; top: -.5rem; left: 1.75rem; width: 2px; height: .375rem; background: var(--mng-color-terracotta-300); }
.retez__uzel--nas { border-color: var(--mng-accent); border-width: 2px; }
.retez__uzel--cil { background: var(--mng-background-subtle); border-style: dashed; }
.retez__jmeno { font-weight: var(--mng-font-weight-semibold); }
.retez__popis { font-size: var(--mng-text-sm-size); color: var(--mng-text-muted); margin-top: .125rem; }
.retez__znacka { margin-left: auto; font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); color: var(--mng-state-info); background: var(--mng-state-info-light); border-radius: var(--mng-radius-pill); padding: .125rem .5625rem; white-space: nowrap; }

/* ── slajdy stránky Sociální sítě ───────────────────────────────────────── */
/* matice jazyk × formát */
.matice { display: grid; grid-template-columns: 4rem repeat(3, minmax(0, 1fr)); gap: .625rem; align-items: center; }
.matice__zahlavi { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); color: var(--mng-text-muted); text-align: center; }
.matice__jazyk { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); color: var(--mng-text-muted); }
.matice__nahled { background: var(--mng-surface-raised); border: 1px solid var(--mng-border); border-radius: var(--mng-radius-s); padding: .5rem; display: flex; flex-direction: column; gap: .375rem; justify-content: flex-end; }
.matice__nahled--ctverec { aspect-ratio: 1; }
.matice__nahled--story { aspect-ratio: 9 / 14; }
.matice__nahled--banner { aspect-ratio: 16 / 10; }
.matice__smycka { width: 1.125rem; height: 1.125rem; align-self: flex-start; }
.matice__pruh { height: 5px; border-radius: 3px; background: var(--mng-text-headline); }
.matice__pruh--akcent { background: var(--mng-accent); }
.matice__pruh--tlumeny { background: var(--mng-border-strong); }

/* značka jako balíček */
.kit { background: var(--mng-surface-raised); border: 1px solid var(--mng-border); border-radius: var(--mng-radius-l); padding: 1.375rem 1.5rem; display: flex; flex-direction: column; gap: 1.125rem; }
.kit__sekce { display: flex; flex-direction: column; gap: .5rem; }
.kit__popis { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); color: var(--mng-text-muted); }
.kit__barvy { display: flex; gap: .5rem; }
.kit__barva { flex: 1; height: 2.5rem; border-radius: var(--mng-radius-s); border: 1px solid var(--mng-border); }
.kit__vzorek { font-size: var(--mng-display-sm-size); font-weight: var(--mng-font-weight-semibold); letter-spacing: var(--mng-heading-letter-spacing); }
.kit__vzorek span { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-medium); color: var(--mng-text-muted); letter-spacing: 0; margin-left: .625rem; }
.kit__vzorek--mono { font-family: var(--mng-font-mono); font-size: var(--mng-text-md-size); font-weight: 400; }
.kit__loga { display: flex; gap: .625rem; }
.kit__pole { width: 3.25rem; height: 3.25rem; border: 1px solid var(--mng-border); border-radius: var(--mng-radius-m); display: flex; align-items: center; justify-content: center; }
.kit__pole svg { width: 1.625rem; height: 1.625rem; }
.kit__pole--dlazdice { background: var(--mng-accent); border-color: var(--mng-accent); }

/* tvořič příspěvku */
.tvoric { background: var(--mng-surface-raised); border: 1px solid var(--mng-border); border-radius: var(--mng-radius-l); padding: 1.25rem 1.375rem; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.125rem; }
.tvoric__nahled { aspect-ratio: 1; border-radius: var(--mng-radius-m); background: var(--mng-background-subtle); border: 1px solid var(--mng-border); padding: .75rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .375rem; }
.tvoric__prava { display: flex; flex-direction: column; gap: .625rem; }
.tvoric__jazyky, .tvoric__hashtagy { display: flex; flex-wrap: wrap; gap: .375rem; }
.tvoric__jazyk { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); padding: .1875rem .5625rem; border-radius: var(--mng-radius-pill); background: var(--mng-background-subtle); color: var(--mng-text-muted); }
.tvoric__jazyk--zde { background: var(--mng-accent); color: var(--mng-text-reversed); }
.tvoric__popisek { font-size: var(--mng-text-sm-size); line-height: var(--mng-text-sm-line-height); color: var(--mng-text-secondary); }
.tvoric__hash { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-medium); padding: .125rem .5rem; border-radius: var(--mng-radius-pill); background: var(--mng-state-info-light); color: var(--mng-state-info); }
.tvoric__ai { display: flex; align-items: center; gap: .4375rem; font-size: var(--mng-text-xs-size); color: var(--mng-state-success); background: var(--mng-state-success-light); border-radius: var(--mng-radius-s); padding: .5rem .625rem; }
.tvoric__spodek { display: flex; justify-content: space-between; gap: .625rem; padding-top: .625rem; border-top: 1px solid var(--mng-background-subtle); font-family: var(--mng-font-mono); font-size: var(--mng-text-xs-size); color: var(--mng-text-muted); }

@media (max-width: 30rem) {
  .tvoric { grid-template-columns: minmax(0, 1fr); }
  .matice { grid-template-columns: 3.25rem repeat(3, minmax(0, 1fr)); gap: .5rem; }
}

/* ── slajdy stránky Web a e-shop ────────────────────────────────────────── */
/* co stránka vydává */
.vydej { background: var(--mng-surface-raised); border: 1px solid var(--mng-border); border-radius: var(--mng-radius-l); padding: 1.125rem 1.25rem; }
.vydej__skupina { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); color: var(--mng-text-muted); margin-bottom: .5rem; }
.vydej__skupina--dalsi { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--mng-border); }
.vydej__r { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; border-bottom: 1px solid var(--mng-background-subtle); }
.vydej__r:last-child { border-bottom: 0; }
.vydej__f { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; border-radius: var(--mng-radius-pill); background: var(--mng-accent); color: var(--mng-text-reversed); font-size: 10px; display: flex; align-items: center; justify-content: center; }
.vydej__jm { font-family: var(--mng-font-mono); font-size: var(--mng-text-xs-size); flex: 1; }
.vydej__po { font-size: var(--mng-text-xs-size); color: var(--mng-text-muted); white-space: nowrap; }

/* překlad ve třech sloupcích */
.prek { background: var(--mng-surface-raised); border: 1px solid var(--mng-border); border-radius: var(--mng-radius-l); padding: 1.125rem 1.25rem; }
.prek__zahlavi, .prek__radek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4.75rem; gap: .75rem; align-items: start; }
.prek__zahlavi { padding-bottom: .625rem; border-bottom: 1px solid var(--mng-border); }
.prek__zahlavi span { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); color: var(--mng-text-muted); }
.prek__radek { padding: .75rem 0; border-bottom: 1px solid var(--mng-background-subtle); }
.prek__radek:last-child { border-bottom: 0; }
.prek__pole { display: block; font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); color: var(--mng-text-muted); margin-bottom: .1875rem; }
.prek__txt { display: block; font-size: var(--mng-text-sm-size); line-height: var(--mng-text-sm-line-height); }
.prek__txt--cil { color: var(--mng-text-secondary); margin-top: 1.0625rem; }
.prek__stitek { justify-self: start; margin-top: 1.0625rem; font-size: 10px; font-weight: var(--mng-font-weight-semibold); border-radius: var(--mng-radius-pill); padding: .125rem .4375rem; white-space: nowrap; }
.prek__stitek--pamet { background: var(--mng-state-success-light); color: var(--mng-state-success); }
.prek__stitek--glosar { background: var(--mng-state-info-light); color: var(--mng-state-info); }
.prek__stitek--zamek { background: var(--mng-background-subtle); color: var(--mng-text-secondary); }

/* stránka z bloků */
.bloky { background: var(--mng-surface-raised); border: 1px solid var(--mng-border); border-radius: var(--mng-radius-l); padding: 1.125rem; display: flex; flex-direction: column; gap: .625rem; }
.bloky__hl { display: flex; align-items: center; justify-content: space-between; gap: .625rem; padding-bottom: .75rem; border-bottom: 1px solid var(--mng-border); }
.bloky__cesta { font-family: var(--mng-font-mono); font-size: var(--mng-text-xs-size); color: var(--mng-text-muted); }
.bloky__stav { font-size: 10px; font-weight: var(--mng-font-weight-semibold); padding: .1875rem .5625rem; border-radius: var(--mng-radius-pill); background: var(--mng-state-success-light); color: var(--mng-state-success); white-space: nowrap; }
.bloky__blok { border: 1px dashed var(--mng-border-strong); border-radius: var(--mng-radius-s); padding: .6875rem .8125rem; display: flex; flex-direction: column; gap: .4375rem; }
.bloky__jmeno { align-self: flex-start; font-size: 10px; font-weight: var(--mng-font-weight-semibold); color: var(--mng-state-info); background: var(--mng-state-info-light); border-radius: var(--mng-radius-pill); padding: .125rem .5rem; }
.bloky__dvojice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.bloky__mini { border: 1px solid var(--mng-border); border-radius: var(--mng-radius-xs); padding: .5rem; display: flex; flex-direction: column; gap: .3125rem; }

/* ── slajdy stránky Reference ───────────────────────────────────────────── */
/* dřív a dnes */
.drive__zahlavi, .drive__r { display: grid; grid-template-columns: minmax(0, 1fr) 1.625rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.drive__zahlavi { padding-bottom: .5625rem; border-bottom: 2px solid var(--mng-text-headline); }
.drive__zahlavi span { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-semibold); color: var(--mng-text-muted); }
.drive__r { padding: .8125rem 0; border-bottom: 1px solid var(--mng-border); }
.drive__r:last-child { border-bottom: 0; }
.drive__bylo { font-size: var(--mng-text-sm-size); color: var(--mng-text-muted); text-decoration: line-through; text-decoration-color: var(--mng-border-strong); }
.drive__je { font-size: var(--mng-text-sm-size); font-weight: var(--mng-font-weight-semibold); }
.drive__sip { justify-self: center; color: var(--mng-color-terracotta-300); }
.drive__sip svg { width: 1.125rem; height: 1.125rem; display: block; }

/* co teče přes menegio */
.toky { background: var(--mng-surface-raised); border: 1px solid var(--mng-border); border-radius: var(--mng-radius-l); padding: 1.25rem 1.375rem; }
.toky__hl { display: flex; align-items: baseline; justify-content: space-between; gap: .625rem; padding-bottom: .875rem; border-bottom: 1px solid var(--mng-border); }
.toky__klient { font-family: var(--mng-font-display); font-size: var(--mng-display-sm-size); font-weight: var(--mng-font-weight-semibold); letter-spacing: var(--mng-heading-letter-spacing); }
.toky__rozsah { font-size: var(--mng-text-xs-size); color: var(--mng-text-muted); }
.toky__r { display: flex; align-items: center; gap: .6875rem; padding: .6875rem 0; border-bottom: 1px solid var(--mng-background-subtle); }
.toky__r:last-child { border-bottom: 0; }
.toky__f { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: var(--mng-radius-pill); background: var(--mng-accent); color: var(--mng-text-reversed); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.toky__jm { font-size: var(--mng-text-sm-size); font-weight: var(--mng-font-weight-medium); flex: 1; }
.toky__po { font-size: var(--mng-text-xs-size); color: var(--mng-text-muted); white-space: nowrap; }

/* ── hero Celá platforma: tři vrstvy ────────────────────────────────────── */
/* Jediný slajd → přepínač se nevykresluje a panel je vidět rovnou. */
.slajdy--jeden .slajdy__panel { display: block; margin-top: 0; }
.vrstvy { display: flex; flex-direction: column; }
.vrstvy__v { border-radius: var(--mng-radius-m); padding: .875rem 1rem; background: var(--mng-surface-raised); border: 1px solid var(--mng-border); display: flex; flex-direction: column; gap: .5rem; }
.vrstvy__v--api { background: var(--mng-background-section-dark); border-color: var(--mng-background-section-dark); color: var(--mng-text-on-dark); }
.vrstvy__hl { display: flex; align-items: baseline; justify-content: space-between; gap: .625rem; flex-wrap: wrap; }
.vrstvy__jm { font-family: var(--mng-font-display); font-size: var(--mng-text-md-size); font-weight: var(--mng-font-weight-semibold); }
.vrstvy__adr { font-family: var(--mng-font-mono); font-size: var(--mng-text-xs-size); color: var(--mng-text-muted); }
.vrstvy__v--api .vrstvy__adr { color: var(--mng-color-terracotta-300); }
.vrstvy__chipy { display: flex; flex-wrap: wrap; gap: .375rem; }
.vrstvy__chip { font-size: var(--mng-text-xs-size); font-weight: var(--mng-font-weight-medium); padding: .1875rem .5625rem; border-radius: var(--mng-radius-pill); background: var(--mng-background-subtle); color: var(--mng-text-secondary); }
.vrstvy__pozn { font-size: var(--mng-text-sm-size); color: var(--mng-text-muted); }
.vrstvy__v--api .vrstvy__pozn { color: var(--mng-text-on-dark); }
.vrstvy__sip { display: flex; justify-content: center; color: var(--mng-color-terracotta-300); padding: .1875rem 0; }
.vrstvy__sip svg { width: 1.125rem; height: 1.25rem; display: block; }

/* ── hero Kontakt: smyčka značky vykreslená tahem ───────────────────────── */
/* Převzato z držící stránky menegio.com: pathLength="1" a tah dashoffset 1 → 0.
   Kdo má v systému vypnutý pohyb, uvidí rovnou hotovou linku. */
.smycka { display: block; width: 100%; height: auto; max-width: 21rem; margin-inline: auto; }
.smycka path { stroke: var(--mng-accent); stroke-dasharray: 1; stroke-dashoffset: 1; animation: smycka-tah 1.5s cubic-bezier(.55, 0, .15, 1) .2s forwards; }
@keyframes smycka-tah { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .smycka path { animation: none; stroke-dashoffset: 0; }
}

/* ── drobečky (F4a) ────────────────────────────────────────────────────── */
/* Cesta ke stránce u vnořených stránek. Vznikly kvůli osiřelé /reseni/ (nález S13):
   stránka byla publikovaná, ale nevedl na ni jediný odkaz. Řádek je záměrně tichý —
   sedí pod hlavičkou a nesmí soupeřit s herem. Na teplém papíru je text v inkoustu 700
   a odkaz v terracottě 700, protože 500 má na #F6F4EF kontrast 4,45–4,47 (pod AA). */
.drobecky { background: var(--mng-background-page); border-bottom: 1px solid var(--mng-border); }
.drobecky__seznam { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: .625rem 0; font-size: var(--mng-text-sm-size); color: var(--mng-text-muted); }
.drobecky__polozka + .drobecky__polozka::before { content: "›"; margin-right: .5rem; color: var(--mng-text-muted); }
.drobecky a { color: var(--mng-text-muted); text-decoration: none; }
.drobecky a:hover { color: var(--mng-text-accent); text-decoration: underline; }
.drobecky [aria-current="page"] { color: var(--mng-text-default); }
.paticka__firma { color: var(--mng-text-muted); }

/* Souhlas s cookies (GA4, Consent Mode v2) — lišta dole, obsah neblokuje */
.souhlas { position: fixed; z-index: 50; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); max-width: 44rem; margin-inline: auto; padding: 1rem 1.25rem; background: var(--mng-surface-raised); border: 1px solid var(--mng-border); border-radius: var(--mng-radius-l); box-shadow: 0 12px 32px rgba(21, 24, 29, .14); display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.souhlas[hidden] { display: none; }
.souhlas__text { flex: 1 1 18rem; margin: 0; font-size: var(--mng-text-sm-size); color: var(--mng-text-secondary); }
.souhlas__text a { color: var(--mng-text-accent); }
.souhlas__akce { display: flex; flex-wrap: wrap; gap: .5rem; }
.paticka__souhlas { background: none; border: 0; padding: 0; margin-left: 1rem; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }