/* GENEROVÁNO skriptem scripts/sync-static-header.mjs — NEEDITOVAT RUČNĚ.
   Styly hlavičky a patičky marketingu pro statické stránky (public/*.html). Složené
   ze zdrojů v src/ ve stejném pořadí jako v Nextu; stránky tenhle soubor
   linkují PŘED /assets/tf.css, stejně jako Next. Změna = uprav zdroj a pusť
   skript znovu. */

/* ═══ src/components/marketing/tf-shell.css (jen pravidla hlavičky a patičky) ═══ */

/* Doplňkové CSS Techflow shellu pro Next stránky.
   Zbytek vzhledu nese /assets/tf.css — tady jsou jen pravidla, která ve statických
   exportech (public/*.html) žijí v inline <style> v hlavičce, takže je Next
   stránky jinak nemají. Drženo 1:1 se statickou verzí; když se mění tam, mění se
   i tady. */

/* mobilní menu: ztmavení pozadí za panelem */

.lp-nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(9, 15, 29, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 900;
}

.lp-nav-scrim.is-on {
  opacity: 1;
  visibility: visible;
}

.header-wrapper.lp-nav-open {
  background: #fff;
}

@media (min-width: 992px) {
  .lp-nav-scrim {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-nav-scrim {
    transition: none;
  }
}

/* Tlačítko „Vyzkoušet" v hlavičce a „Odebírat" v patičce: černá pilulka jako
   na /funkce, na KAŽDÉ stránce. Dřív ji dávaly jen styly stránky (feature.css,
   inline CSS českého landingu), takže ceník, právní stránky, anglický landing,
   /nastroje a /blog měly hranaté tlačítko Techflow — o 2 px užší, a celá pravá
   část hlavičky i položky menu se posunuly. Hodnoty 1:1 s feature.css
   (oddíl 2), !important jako tam kvůli pořadí pravidel v tf.css. translateZ(0)
   je TRVALÝ: bez něj některé GPU kreslí za popiskem bílou čárku. */

.header-wrapper .btn-primary,
.footer-wrapper .btn-primary {
  background: #0B0B0F !important;
  border: 2px solid #1E2421 !important;
  border-radius: 99px !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 rgba(30, 36, 33, 0) !important;
  transform: translateZ(0);
  transition: box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease !important;
}

.header-wrapper .btn-primary:hover,
.footer-wrapper .btn-primary:hover {
  background: #1F1F21 !important;
  box-shadow: 3px 3px 0 #1E2421 !important;
  transform: translate(-1px, -1px) translateZ(0);
}

.header-wrapper .btn-primary:active,
.footer-wrapper .btn-primary:active {
  box-shadow: 0 0 0 #1E2421 !important;
  transform: translateZ(0);
}

/* šipka patří k textu: tf.css jí dává 6 px, pilulka 8 px */

.header-wrapper .btn-primary .line-rounded-icon.link-icon-right {
  margin-left: 8px;
}

.header-wrapper .btn-primary:focus-visible,
.footer-wrapper .btn-primary:focus-visible {
  outline: 3px solid #090F1D;
  outline-offset: 3px;
}

/* Patička: pět sloupců odkazů (Produkt, Funkce, Nástroje zdarma, Právní,
   Kontakt) se s původní mezerou 96 px nevešlo do jednoho řádku. Převzaté
   z návrhů stránek funkcí (public/navrhy/funkce/funkce.css); bydlí tady,
   protože patička stojí na všech marketingových stránkách. */

.fx-foot-cols { display: flex; flex-wrap: wrap; gap: 48px 64px; padding-top: 8px; }

@media (max-width: 767px) { .fx-foot-cols { gap: 40px 48px; } }

/* Dotykové cíle odkazů patičky na telefonu (iOS HIG min. 44 px), převzaté
   z landingu (<style id="lp-mobile-fixes">), aby byla patička všude stejná. */

@media (max-width: 767px) {
  .footer-link { padding-top: 13px; padding-bottom: 13px; margin-top: -9px; margin-bottom: -9px; }
}

/* ═══ src/components/marketing/lang-switch.css ═══ */

/* Přepínač jazyka v hlavičce marketingu (LangSwitch.tsx).
 *
 * Techflow jako zbytek hlavičky; panel má jemný rám a měkký stín jako
 * rozbalovátko „Nástroje zdarma" (tools-menu.css), žádný tvrdý stín.
 * Statické stránky (public/*.html) dostávají tentýž soubor složený do
 * /assets/site-header.css, takže tu nesmí být nic, co by stálo na Nextu.
 */

/* ── Vlajka ────────────────────────────────────────────────────────────── */
/* Prstýnek místo rámečku: bílý pruh české vlajky by jinak splynul s podkladem. */
.ls-flag {
  display: block;
  flex: 0 0 auto;
  width: 21px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(9, 15, 29, 0.14);
}

.ls-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Desktop: tlačítko vlevo vedle „Přihlášení" ──────────────────────────── */
/* Záporný levý okraj vyrovnává vnitřní odsazení tlačítka, pravý drží mezeru
   mezi šipkou a textem „Přihlášení" (21 px, jako dřív mezi textem a vlajkou).
   Měří se k vlajce, ne k podkladu, který se ukáže až při najetí. */
.ls-wrap {
  position: relative;
  margin: 0 16px 0 -6px;
}

/* U 992–1199 px je v hlavičce méně místa: mezera k „Přihlášení" 15 px
   a tlačítko Vyzkoušet blíž (features-menu.css). */
@media (min-width: 992px) and (max-width: 1199px) {
  .ls-wrap { margin-right: 10px; }
}

.ls-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 7px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #090F1D;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease;
}

.ls-trigger:hover,
.ls-wrap.is-open .ls-trigger {
  background: #F2F4F8;
}

.ls-trigger:focus-visible {
  outline: 2px solid #090F1D;
  outline-offset: 1px;
}

/* Tatáž šipka jako u Funkcí a Nástrojů zdarma (.tm-caret). */
.ls-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.18s ease;
  opacity: 0.55;
}

.ls-wrap.is-open .ls-caret {
  transform: rotate(-135deg) translate(-2px, -2px);
  opacity: 1;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */

.ls-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1000;
  min-width: 176px;
  padding: 6px;
  background: #fff;
  border: 1px solid #ECEEF2;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(9, 15, 29, 0.14);
  animation: ls-in 0.16s ease-out;
}

.ls-panel[hidden] {
  display: none;
}

/* Neviditelný můstek přes mezeru nad panelem: menu otevřené myší se zavírá
   odjetím, a cestou z tlačítka dolů by se jinak zavřelo. */
.ls-panel::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

@keyframes ls-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Barva i při najetí: tf.css barví `a:hover` fialově. */
.ls-item,
.ls-item:hover {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.3;
  color: #090F1D;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s ease;
}

.ls-item:hover,
.ls-item:focus-visible {
  background: #F2F4F8;
}

.ls-item:focus-visible {
  outline: 2px solid #090F1D;
  outline-offset: -2px;
}

.ls-item[aria-checked='true'] {
  font-weight: 600;
}

.ls-check {
  width: 16px;
  height: 16px;
  margin-left: auto;
  padding-left: 12px;
  box-sizing: content-box;
  fill: none;
  stroke: #090F1D;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Hamburger: vlajky vedle „Přihlášení" ──────────────────────────────── */
/* Řádek se skládá jen v rozbaleném menu; na desktopu je celá položka skrytá
   (`.show-in-tablet` z tf.css). Odkaz ztrácí automatické okraje z `.w-nav-link`,
   které ho pod 480 px centrovaly — s vlajkami vedle stojí vlevo jako Ceník
   nad ním. */
@media (max-width: 991px) {
  .header-nav-list-item.show-in-tablet.ls-mrow {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .ls-mrow .w-nav-link {
    margin: 0;
  }
}

.ls-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ls-chip,
.ls-chip:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 43 × 36 px: pohodlný cíl pro prst, řádek se skoro nezvětší. */
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
}

.ls-chip:hover {
  background: #F2F4F8;
}

/* Vybraná volba: tenký tmavý obrys, bez výplně. */
.ls-chip.is-current {
  border-color: #090F1D;
  background: none;
  cursor: default;
}

.ls-chip:focus-visible {
  outline: 2px solid #090F1D;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ls-panel { animation: none; }
  .ls-caret, .ls-trigger, .ls-item { transition: none; }
}

/* ═══ src/components/marketing/features/features-menu.css ═══ */

/* ═══ Menu „Funkce" v hlavičce ═════════════════════════════════════════════
   Vzniklo ze schváleného návrhu B: public/navrhy/funkce/menu.css a z pravidel
   hlavičky ve funkce.css (oddíl 3). Návrh A, přepínač návrhů a rámečky
   s telefony sem nepatří — byly jen podklad pro výběr.

   Panel nese i třídu .tm-panel a položky .tm-item/.tm-art, takže vzhled
   položek i chování v hamburgeru sdílí s rozbalovátkem „Nástroje zdarma"
   (tools-menu.css). Tady je jen to, čím se liší.

   B = tři sloupce a vpravo karta s měřením zdarma; panel končí pod tlačítkem
   Vyzkoušet (pod tlačítkem Funkce by se nevešel).

   POZOR na specificitu. V návrhu stačilo `.fm-b`, protože menu.css se linkovalo
   PO funkce.css. V Nextu jsou to importované moduly a tenhle soubor jde před
   tools-menu.css, takže by pravidlo `.fm-b` se stejnou specificitou jako
   `.tm-panel` prohrálo — panel by si vzal dva sloupce po 292 px a odsazení
   „Nástrojů zdarma". Rozměry a umístění panelu proto všude píšeme jako
   `.tm-panel.fm-b`, ať na pořadí souborů nezáleží. */

/* Tokeny z feature.css. Menu stojí v hlavičce KAŽDÉ marketingové
   stránky, i tam, kde se feature.css nenačítá (/nastroje, /blog), takže si
   svoje hodnoty nese s sebou. Musí zůstat shodné s feature.css. */
:root {
  --fx-text: #090F1D;
  --fx-muted: #4B5563;
  --fx-soft: #6B7280;
  --fx-line: #ECEEF2;
  --fx-line-in: #E6E8EE;
  --fx-lav: #E1DAF2;
  --fx-band-lav: #F5F2FB;
  --fx-dm: 'DM Sans', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fx-inter: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Hlavička: kde se panel měří ────────────────────────────────────────── */
/* Panel B končí na pravé hraně tlačítka Vyzkoušet, takže se měří od obsahu
   hlavičky, ne od tlačítka Funkce. */
@media (min-width: 992px) {
  .header-content-wrapper { position: relative; }
  .header-middle .header-nav-menu-wrapper { position: static; }
}

/* Šest položek + dvě rozbalovátka se u 992–1199 px nevešlo vedle loga
   a tlačítka: menší rozestupy, text zůstává stejný.
   Selektory jsou o třídu `.header-wrapper` hlubší než v návrhu: /assets/tf.css
   se na stránkách v Nextu linkuje jako POSLEDNÍ, takže pravidlo se stejnou
   specificitou (`.header-nav-link`, `.header-nav-list-item.first`) by prohrálo
   a menu by se u 1000 px zabalilo do dvou řádků. */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-wrapper .header-middle.header-v1 { margin: 0 16px; }
  .header-wrapper .header-nav-list-item.first { padding-right: 10px; }
  .header-wrapper .header-nav-list-item.middle { padding-left: 10px; padding-right: 10px; }
  .header-right-side .btn-primary.small.header-btn-hidde-on-mb { margin-left: 20px; }
}
@media (min-width: 992px) and (max-width: 1099px) {
  .header-wrapper .header-nav-link, .header-wrapper .tm-wrap .tm-trigger { font-size: 15px; }
  .header-wrapper .header-nav-list-item.first { padding-right: 7px; }
  .header-wrapper .header-nav-list-item.middle { padding-left: 7px; padding-right: 7px; }
  .header-right-side .btn-primary.small { padding-left: 14px; padding-right: 14px; font-size: 15px; }
}

/* Otevřený hamburger s rozbalenou skupinou je vyšší než displej, a stránka pod
   ním se nescrolluje. Menu proto musí mít vlastní posuv. --fm-head = horní
   hrana menu, nastavuje ji TfHeader při otevření. */
@media (max-width: 991px) {
  .header-wrapper.lp-nav-open .w-nav-menu { max-height: calc(100vh - var(--fm-head, 94px)); max-height: calc(100dvh - var(--fm-head, 94px));
    overflow-y: auto; overscroll-behavior: contain; }
}

/* ── Společné ───────────────────────────────────────────────────────────── */
.tm-panel.fm-panel { gap: 0 20px; }
.fm-col { min-width: 0; grid-row: 1; }
/* sloupce napevno: .fm-more zabírá místo v řádku 1, automatické umístění by je jinak odsunulo */
.fm-panel > .fm-col:nth-child(1) { grid-column: 1; }
.fm-panel > .fm-col:nth-child(2) { grid-column: 2; }
.fm-panel > .fm-col:nth-child(3) { grid-column: 3; }
/* návěští: #6B7280 (4,8 : 1). Živé tools-menu.css má dosud #9AA1AC (2,6 : 1). */
.fm-panel .tm-label { color: var(--fx-soft); }
/* Tlumená poznámka na šedém podkladu najetí: #6B7280 na #F2F4F8 má jen 4,39 : 1.
   Při najetí ztmavne na #4B5563 (6,9 : 1). Platí i pro Nástroje zdarma. */
.tm-panel .tm-item:hover em, .tm-panel .tm-item:focus-visible em { color: var(--fx-muted); }
.tm-panel .tm-item:focus-visible { outline: 2px solid var(--fx-text); outline-offset: -2px; }

/* „Všechny funkce": v prázdném místě pod kratšími sloupci 2 a 3, zarovnané
   se čtvrtou položkou prvního sloupce. Stejná výška jako položka. */
.fm-more { grid-column: 2 / 4; grid-row: 1; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 55px; box-sizing: border-box; padding: 8px 12px 8px 14px; border: 1px solid var(--fx-line); border-radius: 12px;
  text-decoration: none; transition: background .14s ease, border-color .14s ease; }
.fm-more strong { display: block; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--fx-text); }
.fm-more em { display: block; margin-top: 1px; font-size: 12px; line-height: 1.4; font-style: normal; color: var(--fx-soft); }
.fm-more-go { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 1px solid var(--fx-line-in); font-size: 15px; line-height: 1; color: var(--fx-text); transition: transform .14s ease; }
.fm-more:hover { background: #F2F4F8; border-color: #F2F4F8; }
.fm-more:hover em { color: var(--fx-muted); }
.fm-more:hover .fm-more-go { transform: translateX(3px); }
.fm-more:focus-visible { outline: 2px solid var(--fx-text); outline-offset: -2px; }

/* ── Tři sloupce a karta vpravo ─────────────────────────────────────────── */
@media (min-width: 992px) {
  .tm-wrap.fm-wrap--wide { position: static; }
}
.tm-panel.fm-b { left: auto; right: 0; top: calc(100% + 5px); grid-template-columns: repeat(3, 280px) 216px; gap: 0 12px; padding: 20px; }
.fm-b .tm-item { padding-left: 8px; padding-right: 8px; }
.fm-b .tm-label { padding: 0 8px; }

/* Karta: jemná, bez tvrdého stínu (ten patří hlavní ukázce stránky pod menu).
   Celá je jeden odkaz na měření zdarma. */
.fm-side { grid-column: 4; grid-row: 1; display: flex; flex-direction: column; min-width: 0; margin-left: 8px; padding: 12px 14px 14px;
  border-radius: 14px; background: var(--fx-band-lav); text-decoration: none; transition: background .14s ease; }
.fm-side-art { display: grid; place-items: center; height: 84px; margin-bottom: 12px; border-radius: 10px; background: var(--fx-lav); }
.fm-side-art img { display: block; width: 96px; height: 72px; }
.fm-side-txt { display: block; }
.fm-side-t { display: block; font: 700 16px/1.3 var(--fx-dm); letter-spacing: -.02em; color: var(--fx-text); text-wrap: balance; }
.fm-side-d { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--fx-muted); }
.fm-side-go { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--fx-text); }
.fm-side-go span { transition: transform .14s ease; }
.fm-side:hover { background: #EFEAF8; }
.fm-side:hover .fm-side-go { text-decoration: underline; text-underline-offset: 3px; }
.fm-side:hover .fm-side-go span { transform: translateX(3px); }
.fm-side:focus-visible { outline: 2px solid var(--fx-text); outline-offset: 2px; }

/* ── 992–1199 px: panel na střed hlavičky, karta jako pruh pod sloupci ──── */
@media (min-width: 992px) and (max-width: 1199px) {
  .tm-wrap.fm-wrap { position: static; }
  .tm-panel.fm-b { left: 0; right: 0; top: calc(100% + 5px); margin: 0 auto;
    grid-template-columns: repeat(3, 284px); gap: 0 20px; padding: 22px; }
  .fm-b .tm-item { padding-left: 10px; padding-right: 10px; }
  .fm-b .tm-label { padding: 0 10px; }
  .fm-side { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: center; gap: 16px; margin: 14px 0 0; padding: 10px 18px 10px 10px; }
  .fm-side-art { flex: 0 0 auto; width: 76px; height: 56px; margin: 0; }
  .fm-side-art img { width: 64px; height: 48px; }
  .fm-side-txt { flex: 1 1 auto; }
  .fm-side-go { margin: 0 0 0 auto; padding: 0; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1099px) {
  .tm-panel.fm-b { grid-template-columns: repeat(3, 280px); padding-left: 18px; padding-right: 18px; gap: 0 12px; }
  .fm-b .tm-item { padding-left: 8px; padding-right: 8px; }
  .fm-b .tm-label { padding: 0 8px; }
}

/* ── Telefon: uvnitř hamburgeru obyčejný seznam ─────────────────────────── */
/* .tm-mobile dává rozbalovátkům TfHeader přes prop isMobile. Reset panelu má
   tools-menu.css, ale jen jako `.tm-mobile .tm-panel` — to je stejná
   specificita jako `.tm-panel.fm-b` výš, takže ho tu opakujeme o třídu výš.
   Bez toho by panel v hamburgeru zůstal plovoucí a přes obsah. */
.tm-mobile .tm-panel.fm-b { position: static; display: block; width: auto; padding: 6px 0 10px;
  border: 0; border-radius: 0; box-shadow: none; animation: none; }
@media (max-width: 991px) {
  .tm-wrap .tm-panel.fm-b { position: static; display: block; width: auto; padding: 6px 0 10px;
    border: 0; border-radius: 0; box-shadow: none; animation: none; }
}
/* Zabalený seznam (atribut hidden) musí přebít `display: block` výš. */
.tm-mobile .tm-panel.fm-b[hidden] { display: none; }
@media (max-width: 991px) { .tm-wrap .tm-panel.fm-b[hidden] { display: none; } }
/* tf.css dává v hamburgeru první položce 24 px pod sebou a dalším odkazům 16 px.
   Se zabalenými Funkcemi by pod nimi zela větší mezera než mezi ostatními. */
@media (max-width: 991px) { .header-wrapper .header-nav-list-item.first.fm-wrap { margin-bottom: 16px; } }
.tm-mobile .fm-col + .fm-col { margin-top: 4px; }
/* návěští zarovnané s položkami */
.tm-mobile .tm-label, .tm-mobile .fm-b .tm-label { padding-left: 0; padding-right: 0; }
.tm-mobile .fm-b .tm-item { padding-left: 0; padding-right: 0; }
/* „Všechny funkce" jako „Všechny nástroje": prostý odkaz se šipkou */
.tm-mobile .fm-more { display: inline-flex; justify-content: flex-start; gap: 7px; min-height: 0; margin-top: 10px; padding: 0; border: 0; }
.tm-mobile .fm-more:hover { background: none; }
.tm-mobile .fm-more strong { font-size: 13.5px; }
.tm-mobile .fm-more em { display: none; }
.tm-mobile .fm-more-go { width: auto; height: auto; border: 0; background: none; font-size: 13.5px; }
/* karta zdarma na telefonu ne: tlačítko je v menu dole a měření zdarma
   o skupinu níž v Nástrojích zdarma */
.tm-mobile .fm-side { display: none; }
@media (max-width: 991px) { .fm-side { display: none; } }

/* ═══ src/components/marketing/tools-menu.css ═══ */

/* Rozbalovátko „Nástroje zdarma" v hlavičce.
 *
 * Styl je Techflow (marketing), jen s pastelovými akcenty z ilustrací, aby
 * panel navazoval na stránky, kam vede. CSS bydlí u komponenty — marketing
 * nemá globals.css aplikace a tf.css je sdílený export, do kterého se nepíše.
 */

.tm-wrap {
  position: relative;
}

/* Pod .tm-wrap kvůli specificitě: `.w-nav-link` z tf.css jinak přebije display
   na inline-block a šipka se vykreslí jako svislá čárka 2×22 px. */
.tm-wrap .tm-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.tm-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.18s ease;
  opacity: 0.55;
}

.tm-wrap.is-open .tm-caret {
  transform: rotate(-135deg) translate(-2px, -2px);
  opacity: 1;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */

.tm-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  z-index: 1000;
  display: grid;
  /* Pevné sloupce, ne minmax(): panel je absolutně pozicovaný, takže se bez
     pevné šířky smrskne na obsah a z dvousloupcového menu zbude úzký proužek. */
  grid-template-columns: repeat(2, 292px);
  width: max-content;
  gap: 8px 22px;
  padding: 22px;
  background: #fff;
  border: 1px solid #ECEEF2;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(9, 15, 29, 0.14);
  animation: tm-in 0.16s ease-out;
}

.tm-panel[hidden] {
  display: none;
}

/* Neviditelný můstek přes mezeru mezi tlačítkem a panelem — bez něj myš cestou
   dolů opustí prvek a menu se zavře. */
.tm-panel::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

@keyframes tm-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tm-panel { animation: none; }
  .tm-caret { transition: none; }
}

.tm-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9AA1AC;
  padding: 0 10px;
  margin-bottom: 8px;
}

/* ── Položka ───────────────────────────────────────────────────────────── */

.tm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.14s ease;
}

.tm-item:hover,
.tm-item:focus-visible {
  background: #F2F4F8;
}

.tm-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: #090F1D;
  font-weight: 600;
}

.tm-item em {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: #6B7280;
  font-style: normal;
  margin-top: 1px;
}

.tm-ico {
  flex: 0 0 auto;
  border-radius: 50%;
  display: block;
}

/* Kresba stojí v pastelové dlaždici, stejně jako na stránkách nástrojů.
   Pastel dlaždice přichází inline z katalogu (tools-catalog.ts), tohle je
   jen záloha. */
.tm-art {
  flex: 0 0 auto;
  display: block;
  padding: 5px 4px;
  border-radius: 9px;
  background: #F4E7C3;
  box-sizing: content-box;
}

.tm-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #090F1D;
  text-decoration: none;
}

.tm-all:hover {
  text-decoration: underline;
}

/* ── Uvnitř mobilního panelu ───────────────────────────────────────────── */
/* Hamburger menu je samo overlay, takže tenhle panel v něm musí být obyčejný
   seznam — jinak by plaval nad obsahem, který ho otevřel. */

.tm-mobile .tm-panel {
  position: static;
  display: block;
  width: auto;
  padding: 6px 0 10px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.tm-mobile .tm-panel::before {
  display: none;
}

.tm-mobile .tm-label {
  margin-top: 12px;
}

.tm-mobile .tm-item {
  padding-left: 0;
  padding-right: 0;
}

.tm-mobile .tm-item:hover {
  background: none;
}

@media (max-width: 991px) {
  .tm-wrap .tm-panel {
    position: static;
    display: block;
    width: auto;
    padding: 6px 0 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
}

/* Seznam je v hamburgeru zabalený, dokud se neklepne na tlačítko. `display`
   výš by jinak přebil atribut hidden a seznam by byl rozbalený pořád. */
.tm-mobile .tm-panel[hidden] {
  display: none;
}

@media (max-width: 991px) {
  .tm-wrap .tm-panel[hidden] {
    display: none;
  }
}

/* ═══ jen statické stránky (scripts/sync-static-header.mjs, STATIC_ONLY_CSS) ═══ */

/* Exporty v public/*.html nemají <!DOCTYPE> a prohlížeč je kreslí v quirks
   mode. V něm řádek, ve kterém stojí jen atomický inline (inline-flex) a žádný
   text, nedostane strut. Odkaz loga by měřil 38 px místo 46 px (hlavička
   o 4 px nižší, položky menu o 2 px výš než v Nextu) a v hamburgeru by řádek
   „Všechny funkce" byl o 3,8 px nižší. Skrytý znak nulové šířky dá řádku výšku
   jako ve standardním režimu. visibility: hidden je nutné: vykreslený text
   v odkazu loga (transform-style: preserve-3d z tf.css) by hlavičku přesunul
   do vlastní kompoziční vrstvy a písmo v menu by ztratilo subpixelové
   vyhlazení. DOCTYPE doplnit nejde — přeskládal by celou stránku pod hlavičkou. */
.header-logo-link::after,
.tm-mobile .fm-panel::after { content: '\200B'; visibility: hidden; }

/* Patička: týž strut u odkazu loga (38 px místo 46 px) a <form>, kterému quirks
   mode dává spodní okraj 1em. Okraj by propadl až do bloku novinek a patička
   by byla o 16 px vyšší než v Nextu. */
.footer-logo-wrapper::after { content: '\200B'; visibility: hidden; }
.footer-wrapper form { margin-bottom: 0; }

/* Next dědí z globals.css (body a button). */
.header-wrapper { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.header-wrapper button { caret-color: transparent; }

/* Oba landingy mají pod 768 px pro tlačítka STRÁNKY větší dotykové cíle
   (<style id="lp-mobile-fixes">: padding 13 px nahoře i dole). Zasáhly by i
   tlačítko Vyzkoušet v hamburgeru (48 px místo 42 px jako na /funkce)
   a všechno pod ním by ujelo. Hodnota je padding .btn-primary.small z tf.css. */
@media (max-width: 767px) {
  .header-wrapper .btn-primary.small { padding-top: 10px; padding-bottom: 10px; }
}