/* Hallmark · genre: editorial · macrostructure: Stat-Led · H4 knobs: number=tabular-display, qualifier=stacked-above, secondary=row-of-four
 * theme: custom · vibe: "klidna noc, ryte zlato, notarska jistota" · paper: oklch(16% 0.02 250) · accent: oklch(74% 0.11 85)
 * display: EB Garamond · body: Hanken Grotesk · axes: dark / roman-serif / chromatic-amber
 * nav: N9 edge-aligned · footer: Ft4 dense colophon · enrichment: none (typography only)
 */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ebgaramond-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ebgaramond-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ebgaramond-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ebgaramond-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper:    oklch(16% 0.02 250);
  --paper-2:  oklch(19% 0.022 250);
  --ink:      oklch(94% 0.012 90);
  --ink-2:    oklch(78% 0.014 250);
  --muted:    oklch(66% 0.016 250);
  --rule:     oklch(30% 0.02 250);
  --rule-2:   oklch(24% 0.02 250);
  /* hranice ovladacich prvku musi mit 3:1 proti okoli (WCAG 1.4.11).
     --rule ma proti papiru jen 1,43:1, coz na dekorativni linky staci,
     ale u policka formulare je ramecek jediny, co ho vymezuje. */
  --rule-field: oklch(52% 0.02 250);
  --accent:   oklch(74% 0.11 85);
  --accent-2: oklch(62% 0.09 85);
  --focus:    oklch(74% 0.16 85);
  --err:      oklch(72% 0.13 40);
  --ok:       oklch(76% 0.09 150);
  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem;
  --space-5: 4rem; --space-6: 6.5rem; --space-7: 10rem;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --measure: 58ch;
  /* stejne odsazeni jako .wrap - potrebuji ho i jinde, aby prvky,
     ktere maji vybihat do okraje, vybihaly presne o nej */
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { overflow-x:clip; }
html { scroll-behavior:smooth; }

body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--paper); padding:0.75rem 1.25rem;
  font-weight:600;
}
.skip:focus { left:0; }

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

.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

::selection { background:var(--accent); color:var(--paper); }

a { color:inherit; text-decoration:none; }
.wrap { max-width:1100px; margin:0 auto; padding-inline:var(--pad); }

/* ---------- lista, ktera se vraci pri scrollu nahoru ----------
   Zamerne NENI klon masthead nahore: ten ma na mobilu pres 140 px
   i s radkou odkazu. Tohle je kompaktni verze te same navigace.
   Fixed, ne sticky - vyska masthead se tim nedotkne toku stranky. */
.navbar {
  position:fixed; inset-inline:0; top:0; z-index:60;
  background:oklch(16% 0.02 250 / 0.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--rule-2);
  transform:translateY(-100%);
  transition:transform 0.35s var(--ease-out);
}
.navbar.is-on { transform:translateY(0); }
/* uvnitr pripnuteho scrollytelling hero se vraceci lista neukazuje -
   prekryvala by eyebrow (ma byt videt celou dobu sekvence). Tridu na
   body prepina JS podle prubehu; specificita (2 tridy + element)
   prebiji .is-on vyse. */
body.bh-pinned .navbar { transform:translateY(-100%); }
.navbar .wrap {
  display:flex; align-items:center; gap:var(--space-3);
  min-height:60px; padding-block:0.5rem;
}
.navbar .brand { flex:none; gap:0.65rem; }
.navbar .brand svg { width:24px; height:24px; }
.navbar .brand .name { font-size:1.1rem; }
.navbar .links { display:flex; gap:var(--space-3); margin-left:auto; }
.navbar .links a {
  font-size:0.88rem; color:var(--muted); letter-spacing:0.02em;
  transition:color 0.25s var(--ease-out);
}
.navbar .links a:hover { color:var(--ink); }
.navbar .chip { flex:none; padding:0.7rem 1.1rem; font-size:0.8rem; }
/* kdyz stranka nema kotvy (privacy, 404), odsune CTA doprava chip sam */
.navbar .wrap > .chip:nth-child(2) { margin-left:auto; }
@media (max-width:48rem) {
  /* odkazy by z listy udelaly dva radky - na uzkem displeji nese
     lista znacku a jedinou akci. Slovni znacka jde pryc taky, jinak
     CTA pretece padding a nelicuje s pravou hranou sazby. */
  .navbar .links { display:none; }
  .navbar .brand .name { display:none; }
  .navbar .chip { margin-left:auto; }
  .navbar .wrap { min-height:56px; }
}

/* aby se cil kotvy neschoval pod vracejici se listou */
main[id], section[id], header[id] { scroll-margin-top:5rem; }

/* ---------- eyebrow (spolecny stitek sekci) ---------- */
.eyebrow {
  display:inline-block;
  font-size:0.8rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent);
}

/* ---------- oznamovaci pruh ----------
   Plna zlata dle akcentu znacky (slovo Bridge v logu) - pruh je
   jediny plnobarevny pas na strance, text proto prebira barvu
   papiru (kontrast ~7:1 na 74% lightness akcentu). */
.annc {
  background:var(--accent);
  border-bottom:1px solid var(--accent-2);
  font-size:0.9rem; color:var(--paper);
}
.annc .inner {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  min-height:52px; padding-block:0.5rem; flex-wrap:nowrap;
}
.annc .inner p { flex:1; min-width:0; }
.annc b { color:var(--paper); font-weight:600; }
.annc .x {
  flex:none; align-self:center; background:none; border:none;
  color:oklch(16% 0.02 250 / 0.62);
  font-size:1.1rem; line-height:1; cursor:pointer; padding:0.35rem 0.5rem;
  min-width:44px; min-height:44px;
  transition:color 0.25s var(--ease-out);
}
.annc .x:hover { color:var(--paper); }
/* zlaty focus ring by na zlatem pozadi zanikl */
.annc .x:focus-visible { outline-color:var(--paper); }
.annc[hidden] { display:none; }

/* ---------- N9 edge-aligned nav ---------- */
nav.top {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding-block:var(--space-3);
}
nav.top .links { display:flex; gap:var(--space-3); margin-left:auto; margin-right:var(--space-3); }
nav.top .links a {
  font-size:0.9rem; color:var(--muted); letter-spacing:0.02em;
  transition:color 0.25s var(--ease-out);
}
nav.top .links a:hover { color:var(--ink); }
@media (max-width:48rem) {
  nav.top { flex-wrap:wrap; row-gap:var(--space-1); }
  nav.top .brand { order:1; }
  nav.top > .chip { order:2; margin-left:auto; }
  nav.top .links {
    order:3; width:100%; margin:0; gap:var(--space-3);
    padding-top:var(--space-1); border-top:1px solid var(--rule-2);
    overflow-x:auto; scrollbar-width:none;
  }
  nav.top .links::-webkit-scrollbar { display:none; }
  nav.top .links a {
    white-space:nowrap; display:flex; align-items:center;
    min-height:44px; font-size:0.95rem;
  }
}
.brand { display:flex; align-items:center; gap:0.8rem; }
.brand svg { width:30px; height:30px; flex:none; }
.brand .name { font-family:var(--font-display); font-size:1.35rem; letter-spacing:0.01em; }
.brand .name b { font-weight:500; }
.brand .name span { color:var(--accent); font-weight:400; }

.chip {
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:inherit; font-size:0.85rem; font-weight:600; letter-spacing:0.04em;
  /* background a font-family musi byt explicitne kvuli <button> - ten by
     jinak vzal vychozi styl prohlizece a text by zmizel na svetlem pozadi */
  background:none; cursor:pointer;
  color:var(--ink); border:1px solid var(--rule); padding:0.8rem 1.4rem;
  transition:border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip:active { transform:translateY(1px); }
.chip.solid { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.chip.solid:hover { background:var(--focus); border-color:var(--focus); color:var(--paper); }
.chip-block { width:100%; justify-content:center; padding-block:1rem; }

.tlink {
  color:var(--accent); font-weight:600; font-size:0.95rem;
  border-bottom:1px solid var(--accent-2);
  transition:border-color 0.25s var(--ease-out);
  padding-bottom:2px;
}
.tlink:hover { border-color:var(--accent); border-bottom-width:2px; }

/* samostatne stojici textove odkazy maji podtrzeni tesne u pisma,
   ale dotykovou plochu 44 px - hitbox roste pres pseudoprvek */
.cta-row .tlink, .strip-note .tlink, .exhibit figcaption .tlink { position:relative; }
.cta-row .tlink::after, .strip-note .tlink::after, .exhibit figcaption .tlink::after {
  content:""; position:absolute; left:-0.5rem; right:-0.5rem; top:50%;
  height:44px; transform:translateY(-50%);
}

/* ---------- hero ----------
   Miry hero se skladaji tak, aby proof radek (castka) zustal nad ohybem
   i na notebooku 1440x900 se zobrazenou listou souhlasu - to je nejsilnejsi
   dukaz na strance a prvni navstevnik ho jinak nikdy neuvidi. */
.hero { padding-block:var(--space-3) var(--space-6); }
.hero h1 {
  margin-top:var(--space-2);
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem, 6vw, 5.25rem); line-height:1.05; letter-spacing:-0.01em;
  max-width:21ch; text-wrap:balance;
}
.hero h1 em { font-style:normal; color:var(--accent); }
/* delsi titulek nese vic textu, takze o stupen mensi sazba - jinak
   preroste fold a rozbije rytmus stranky */
.hero h1.long { font-size:clamp(2.2rem, 4.4vw, 3.9rem); max-width:26ch; }
.hero .lede {
  max-width:52ch; margin-top:var(--space-3);
  font-size:clamp(1.05rem, 1.6vw, 1.3rem); color:var(--ink-2); line-height:1.6;
  text-wrap:balance;
}
.hero .cta-row { margin-top:var(--space-4); display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.hero .proof {
  margin-top:var(--space-4); padding-top:var(--space-3);
  border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:var(--space-3) var(--space-4); flex-wrap:wrap;
  font-size:0.95rem; color:var(--ink-2);
}
.hero .proof span { display:inline-flex; align-items:center; }

/* ---------- hero: stavba mostu (scroll sekvence) ----------
   Vychozi stav je staticke hero: hotovy most jako pozadi, plny text
   faze 2, zadne pripnuti - plati pro no-JS, reduced-motion i dobu
   nez se dekoduje prvni snimek. JS pak prida .bh-live: sekce
   naroste na 340vh, vnitrek se pripne a scroll prehrava snimky. */
.hero.bridge-hero { padding-block:0; }
.bh-sticky {
  position:relative;
  min-height:88vh; min-height:88svh;
  display:flex;
}
/* klip patri na vrstvu obrazku, ne na celou sticky - jinak by pri
   preteceni faze 2 na nizkych viewportech text zmizel, ne jen schoval */
.bh-media { position:absolute; inset:0; z-index:0; overflow:clip; background:var(--paper-2); }
.bh-media .bh-still,
.bh-media .bh-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.bh-media .bh-canvas { display:none; }
/* prechody do barvy stranky nahore i dole + levy scrim pod textem -
   fotka nesmi prebit citelnost a nesmi tvorit tvrdou hranu sekce */
.bh-shade {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, var(--paper) 0%, oklch(16% 0.02 250 / 0) 22%),
    linear-gradient(to top, var(--paper) 0%, oklch(16% 0.02 250 / 0) 34%),
    radial-gradient(110rem 70rem at 16% 62%, oklch(16% 0.02 250 / 0.62), oklch(16% 0.02 250 / 0) 62%);
}
.bh-ui {
  position:relative; z-index:1; width:100%;
  display:flex; flex-direction:column;
  padding-block:var(--space-3) var(--space-4);
}
.bh-stage { flex:1; display:flex; align-items:center; position:relative; }
/* stejna sazba jako .hero h1 - faze 0/1/2 sedi v jednom optickem slotu
   za sebou, sazba proto nesmi mezi nimi skakat */
.bh-line {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem, 6vw, 5.25rem); line-height:1.07; letter-spacing:-0.01em;
  max-width:17ch; text-wrap:balance;
}
.bh-line em { font-style:normal; color:var(--accent); }
/* bez JS zadne mezifaze - jen plne hero (faze 2) */
.bh-phase[data-phase="0"], .bh-phase[data-phase="1"] { display:none; }
.bh-final { max-width:100%; }
.bh-final .lede { max-width:46ch; }
/* prihlasena castka primo ve vyplatni fazi (/twist): nejsilnejsi dukaz
   stranky stoji v miste, kde index nese trojici drobnych proof polozek.
   Sazba jde zamerne nad h1 - cislo je hlavni lakadlo teto stranky, takze
   ma byt nejvetsim prvkem snimku. Sirka textu vychazi na 6.4x font-size,
   takze horni mez 7.6rem (~778 px) zustava i na nejsirsim wrapu s rezervou;
   vyse uz by cislo naraz melo na mez sazby. */
.bh-stat { margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--rule); }
.bh-stat .figure { margin-top:0; font-size:clamp(2.4rem, 8.4vw, 7.6rem); }
/* mira az na 104ch: popisek cislo vysvetluje, takze na sirokem okne ma
   drzet jediny radek pod nim - zlom uprostred nazvu dluznika pusobi jako
   chyba sazby. Uzsi okna ho balance rozdeli na dva vyvazene radky. */
.bh-stat .cap {
  margin-top:var(--space-1); max-width:104ch;
  font-size:1rem; color:var(--ink-2); line-height:1.55; text-wrap:balance;
}
.bh-stat .cap strong { color:var(--ink); font-weight:600; }
/* staticky/reduced-motion fallback: obsah zarovnat nahoru, ne na stred -
   jinak na 1440x900 se zobrazenou listou souhlasu klesne proof radek
   (nejsilnejsi dukaz stranky) pod ohyb, viz komentar u .hero vyse */
.bridge-hero:not(.bh-live) .bh-stage { align-items:flex-start; }
.bh-hint { display:none; }

/* ---- rezim .bh-live (zapina JS az po dekodovani snimku 0) ---- */
.bridge-hero.bh-live { height:340vh; }
.bridge-hero.bh-live .bh-sticky {
  position:sticky; top:0;
  height:100vh; height:100svh; min-height:0;
}
.bridge-hero.bh-live .bh-still { display:none; }
.bridge-hero.bh-live .bh-canvas { display:block; }
.bridge-hero.bh-live .bh-phase {
  display:block;
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%);
  opacity:0; visibility:hidden;
  /* opacity a transform ridi JS po snimcich - prechod by se s nim pral */
  pointer-events:none;
}
.bridge-hero.bh-live .bh-phase.is-on { pointer-events:auto; }
/* dokud navstevnik nerozhodne o souhlasu, lista (position:fixed, bottom:0)
   prekryva spodni pas hero - posledni radek proof (v tokovem toku .bh-ui)
   by pod ni zustal nedosazitelny. Hodnota shodna s body:has(...) nize. */
body:has(.consent:not([hidden])) .bridge-hero.bh-live .bh-ui { padding-bottom:7rem; }
/* fixed, ne absolute: hint tak byva viditelny uz pred pripnutim sekce
   (dokud neni pripnuta, kotveni k padding-boxu .bh-ui ho drzelo hluboko
   pod ohybem - viz vlevo nahore v historii souboru). Vodorovny stred
   vychazi stejne jako drive, protoze .bh-ui je stejne siroke jako
   viewport (wrap je jen vycentrovany na stejnou osu). */
.bridge-hero.bh-live .bh-hint {
  display:flex; align-items:center; gap:0.75rem;
  position:fixed; left:50%; bottom:var(--space-3);
  transform:translateX(-50%);
  font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  /* dekorace (aria-hidden) - po zpruhledneni nesmi dal zachytavat klik/tap */
  pointer-events:none;
}
/* bottom je uz vuci viewportu (position:fixed), takze musi pocitat s
   listou souhlasu primo - jinak by hint skoncil za ni */
body:has(.consent:not([hidden])) .bridge-hero.bh-live .bh-hint { bottom:7rem; }
.bh-hint i {
  width:1px; height:2.6rem; background:var(--rule);
  position:relative; overflow:hidden; display:block;
}
.bh-hint i::after {
  content:""; position:absolute; left:0; top:-40%;
  width:100%; height:40%; background:var(--accent);
  animation:bh-drop 1.8s var(--ease-out) infinite;
}
@keyframes bh-drop { to { top:110%; } }

@media (max-width:48rem) {
  /* spolecna sazba nadpisu vsech fazi - jeden opticky slot, sazba mezi
     nimi nesmi skakat. Plnych 2.6rem z .hero h1 by fazi 2 pretlacilo
     pres vysku pripnuteho boxu, ale pod 2rem nesmime - h1 by ztratil
     hierarchii vuci nadpisum sekci (proof radek misto toho na telefonu
     ve scroll rezimu odpada, viz nize) */
  .bh-line { font-size:clamp(2rem, 7.4vw, 2.6rem); }
  .bridge-hero h1 { font-size:clamp(2rem, 7.4vw, 2.6rem); }
  .bh-final .lede { font-size:1rem; margin-top:var(--space-2); }
  .bh-final .cta-row { margin-top:var(--space-2); }
  /* castka musi zustat na jedinem radku i na 320 px - zlomena pres dva
     radky ztraci ucinek cisla a rozbije vysku pripnute faze. Vazba jen
     na vw (bez rem minima) drzi sirku pod merou wrapu na kazdem telefonu;
     12.4vw necha pod cislem jeste ~12 % rezervy na sirsi renderovani pisma.
     Vys uz to na telefonu nejde - delku diktuje sama castka na halere,
     takze zvetseni pro siroka okna se odehrava jen v desktopove mire */
  .bh-stat { margin-top:var(--space-3); padding-top:var(--space-2); }
  .bh-stat .figure { font-size:min(12.4vw, 3.4rem); }
  .bh-stat .cap { font-size:0.92rem; margin-top:0.35rem; }
  .bh-final .proof { margin-top:var(--space-2); padding-top:var(--space-2); gap:var(--space-1) var(--space-3); }
  .bh-shade {
    background:
      linear-gradient(to bottom, var(--paper) 0%, oklch(16% 0.02 250 / 0) 20%),
      linear-gradient(to top, var(--paper) 0%, oklch(16% 0.02 250 / 0) 46%),
      oklch(16% 0.02 250 / 0.30);
  }
  /* faze 2 na telefonu nese jen h1 + lede + CTA - proof radek by ji na
     kratkych displejich pretlacil pres vysku pripnuteho boxu; dukazy
     nese milestone hned pod hero a ve statickem fallbacku proof zustava */
  .bridge-hero.bh-live .bh-final .proof { display:none; }
  /* scroll hint na telefonu na kratkych displejich koliduje s textem
     faze 0 a dotykove zarizeni scroll afordanci nepotrebuje */
  .bridge-hero.bh-live .bh-hint { display:none; }
  /* na scroll 0 (pred pripnutim) drzi top:50% text az pod listou souhlasu
     (position:fixed, bottom:0) - posunuti nahoru ho dostane do viditelneho
     pasma jeste pred pripnutim sekce. Plati jen pro fazi 1 - faze 2
     (vyplatni snimek, ctyri radky obsahu) by se pri stejnem posunu nahoru
     kryla s eyebrow, proto zustava na vychozich 50 % (zakladni pravidlo
     .bh-phase vyse), kdy uz je sekce davno pripnuta. */
  .bridge-hero.bh-live .bh-phase[data-phase="1"] { top:34%; }
  /* faze 0 je jedina viditelna uz PRED pripnutim (scroll 0) - v tu chvili
     .bh-stage jeste neni 100svh "pripnuty" box, ale prirozene vysoky tok
     pod mastheadem a oznamovacim pruhem, takze procento z jeho vysky
     netrefuje spolehlive stejne misto obrazovky (na nizsich telefonech
     vychazi hloub, do pasma listy souhlasu). Pevny odstup od horniho
     okraje .bh-stage (tesne pod eyebrow) misto procent tohle nerozjede -
     nezavisi na (promenlive) celkove vysce boxu. */
  .bridge-hero.bh-live .bh-phase[data-phase="0"] { top:2.2rem; }
}

/* nizsi telefony (iPhone SE a spol.) se zobrazenou listou souhlasu:
   pripnutemu boxu zbyde po odecteni listy kolem 400 px a vyplatni faze
   /twist nese o castku vic nez na indexu. Sazba se tu proto zhusti,
   misto aby se z faze neco vypustilo - cislo i lede jsou oba duvod,
   proc navstevnik na strance je. Bez zobrazene listy plati mira vyse. */
@media (max-width:48rem) and (max-height:46rem) {
  /* lista souhlasu je na uzkem displeji vysoka pres 200 px, takze
     zakladnich 7rem odsazeni stred faze dost nezvedne - text by koncil
     pod ni. Vetsi hodnota plati jen tady, kde je zaroven zhustena sazba.
     Vazba na :has(.bh-stat) drzi cely blok u faze s castkou - hero indexu
     castku nenese, ma o blok min a zdrobnovat se nepotrebuje. Sazba se
     zamerne NEvaze na .bh-live: statickym hero (reload hloub na strance,
     omezeny pohyb) prochazi tentyz text a jina mira by znamenala, ze po
     obnoveni stranky ma cislo najednou jinou velikost. */
  body:has(.consent:not([hidden])) .bridge-hero.bh-live:has(.bh-stat) .bh-ui { padding-bottom:12rem; }
  body:has(.consent:not([hidden])) .bridge-hero:has(.bh-stat) .bh-final h1 {
    font-size:1.7rem; margin-top:var(--space-1);
  }
  body:has(.consent:not([hidden])) .bridge-hero:has(.bh-stat) .bh-final .lede {
    font-size:0.9rem; line-height:1.45; margin-top:var(--space-1);
  }
  /* na 360 px se obe akce vedle sebe nevejdou a radek naroste na dve
     patra - uzsi mezera mezi nimi je tam, kde se sest pixelu pocita */
  body:has(.consent:not([hidden])) .bridge-hero:has(.bh-stat) .bh-final .cta-row {
    margin-top:var(--space-1); gap:var(--space-2);
  }
  body:has(.consent:not([hidden])) .bridge-hero .bh-stat {
    margin-top:var(--space-1); padding-top:var(--space-1);
  }
  body:has(.consent:not([hidden])) .bridge-hero .bh-stat .figure { font-size:min(10.4vw, 2.6rem); }
  body:has(.consent:not([hidden])) .bridge-hero .bh-stat .cap { font-size:0.85rem; }
}
/* nizka siroka okna (notebooky 1366x768 a spol.): cislo roste podle sirky,
   ale prostor pro nej urcuje vyska - na 768 px uz by vyplatni faze narazila
   na eyebrow. Sazba cisla se tu proto vaze i na vysku a mezery se zhusti,
   aby zvetseni pro sirsi obrazovky nesestrelilo tenhle bezny rozmer. */
@media (min-width:48.0625rem) and (max-height:50rem) {
  .bridge-hero .bh-stat .figure { font-size:min(8.4vw, 13vh); }
  .bridge-hero .bh-stat { margin-top:var(--space-3); padding-top:var(--space-2); }
  .bridge-hero .bh-final:has(.bh-stat) .lede { margin-top:var(--space-2); }
  .bridge-hero .bh-final:has(.bh-stat) .cta-row { margin-top:var(--space-3); }
}

/* uplne nejnizsi telefony (640 px a mene) se zobrazenou listou souhlasu:
   lista sama zabere pres 230 px a obe akce se na uzkem displeji nevejdou
   vedle sebe, takze radek roste na dve patra. Sekundarni odkaz proto
   odpada - vede na #postup, ktery drzi navigace, kdezto castka a primarni
   CTA jsou duvod, proc navstevnik na strance je. Po zavreni listy
   (bezny stav opakovane navstevy) se odkaz vraci. */
@media (max-width:48rem) and (max-height:41rem) {
  body:has(.consent:not([hidden])) .bridge-hero:has(.bh-stat) .bh-final .cta-row .tlink { display:none; }
}

/* nizke viewporty (mobil na sirku, kratka okna) - fazi 2 by pripnuty
   100svh s vertikalne centrovanym obsahem usekl nahore i dole. Misto
   pripinani nechame sekci prirozene vysokou jako staticke hero.
   JS drzi stejny zlom (matchMedia max-height:38rem): zivy rezim v nizkem
   okne vubec nespusti a pri rotaci do nizkeho okna ho sklada zpet na
   staticke hero. Blok s !important je pojistka pro okamzik mezi zmenou
   media query a reakci JS (inline styly z bApplyUi by jinak vyhraly). */
@media (max-height:38rem) {
  .bridge-hero.bh-live { height:auto; }
  .bridge-hero.bh-live .bh-sticky {
    position:relative; height:auto; min-height:88vh; min-height:88svh;
  }
  .bridge-hero.bh-live .bh-phase[data-phase="0"],
  .bridge-hero.bh-live .bh-phase[data-phase="1"] { display:none !important; }
  .bridge-hero.bh-live .bh-phase[data-phase="2"] {
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .bridge-hero.bh-live .bh-hint { display:none !important; }
}

/* velke cislo (milestone na indexu i na /twist) */
.figure {
  margin-top:var(--space-4);
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.5rem, 7vw, 6.25rem);
  line-height:1.04; letter-spacing:-0.008em;
  font-variant-numeric:lining-nums;
  color:var(--ink); text-wrap:balance;
}
.figure .kc { font-size:0.48em; color:var(--ink-2); margin-left:0.16em; }
.slovy {
  margin-top:var(--space-3);
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1rem, 1.7vw, 1.25rem); line-height:1.55;
  color:var(--accent); max-width:54ch;
}
/* slova se objevi az kdyz doscita cislo - jinak si obe cisla odporuji */
.slovy.pending { opacity:0; transform:translateY(6px); }
.slovy.pending.revealed { animation:enter 0.5s var(--ease-out) forwards; }

.thanks {
  margin-top:var(--space-4); font-family:var(--font-display); font-style:italic;
  font-size:1.2rem; color:var(--ink-2); max-width:48ch;
}

/* ---------- milestone sekce (index) ---------- */
.milestone { padding-block:var(--space-5); border-block:1px solid var(--rule); }
.milestone .context {
  margin-top:var(--space-4); max-width:60ch;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--ink-2); line-height:1.6;
}
.milestone .context strong { color:var(--ink); font-weight:600; }
.milestone .thanks {
  margin-top:var(--space-3); font-family:var(--font-display); font-style:italic;
  font-size:1.35rem; color:var(--ink);
}
.milestone .strip { margin-top:var(--space-5); }
.milestone .m-cta {
  margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--rule-2);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
}
.milestone .m-cta p { font-size:1.05rem; color:var(--ink-2); max-width:44ch; }
.milestone .m-cta p strong { color:var(--ink); font-weight:600; }

/* ---------- T4 stat strip ---------- */
.strip {
  border-block:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
}
.strip .cell {
  padding:var(--space-3);
  border-right:1px solid var(--rule-2);
}
/* prvni bunka v kazde rade lici s levou hranou sazby */
.strip .cell:nth-child(4n+1) { padding-left:0; }
.strip .cell:last-child { border-right:none; }
.strip .n { font-family:var(--font-display); font-size:1.55rem; font-variant-numeric:tabular-nums; line-height:1.15; min-height:1.85rem; display:flex; align-items:flex-end; }
.strip .cell.ref .n { font-size:1.12rem; letter-spacing:0.01em; }
.strip .l { margin-top:0.2rem; font-size:0.8rem; letter-spacing:0.04em; color:var(--muted); }
.strip-note {
  padding-block:var(--space-2);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:0.9rem; color:var(--muted);
}

/* ---------- exponat: vyrez z prihlasky ----------
   Dokument je dukaz, ne dekorace - proto nechavame jeho vlastni barvy
   a jen ho ramujeme. Popisek sedi vlevo, dokument vpravo, cimz se
   zaroven vyuzije prava polovina, ktera tu jinak zeje prazdnotou. */
/* sekce, kde exponat stoji sam (bez stat pasku nad sebou) - odsazeni
   nese sekce, ne margin exponatu, jinak navazuje do prazdna */
.exhibit-sec { padding-block:var(--space-6); }
.exhibit-sec .exhibit { margin-top:0; }
.exhibit {
  margin-top:var(--space-5);
  display:grid; grid-template-columns:1fr 1.4fr; gap:var(--space-4);
  align-items:start;
}
.exhibit img {
  grid-column:2; grid-row:1;
  width:100%; height:auto; display:block;
  border:1px solid var(--rule);
}
.exhibit figcaption {
  grid-column:1; grid-row:1;
  font-size:0.92rem; line-height:1.65; color:var(--muted); max-width:38ch;
}
.exhibit figcaption strong { color:var(--ink-2); font-weight:600; }
/* vlastni radek, jinak inline-block s marginem rozhodi radkovani odstavce */
.exhibit figcaption .tlink { display:block; width:fit-content; margin-top:var(--space-2); font-size:0.9rem; }
/* tady je to poddukaz pod odkazem, ne samostatne hero prohlaseni jako
   .thanks jinde na strance - proto drzi meritko popisku */
.exhibit figcaption .thanks {
  margin-top:var(--space-3); font-size:0.95rem; color:var(--muted); max-width:none;
}
@media (max-width:60rem) {
  .exhibit { grid-template-columns:1fr; gap:var(--space-3); }
  .exhibit img { grid-column:1; grid-row:1; }
  .exhibit figcaption { grid-column:1; grid-row:2; max-width:none; }
}

/* ---------- proc na velikosti skupiny zalezi ----------
   Sekce ma dva takty: nejdriv duvod (citace zakona + tri pravomoci),
   pak pozvanka. Delici linka mezi nimi je zamerna - ctenar ma poznat,
   ze prestavame vysvetlovat a zaciname nabizet. */
.group-sec { padding-block:var(--space-7) 0; }
/* Citace stoji vedle nadpisu, ne pod nim: tvrzeni a jeho opora se pak ctou
   naraz a sekce nezacina tremi uzkymi bloky pod sebou. Zarovnani na spodni
   hranu drzi citaci u lede, takze nadpis zustava nahore sam. */
.group-intro {
  display:grid; grid-template-columns:6fr 5fr; gap:var(--space-5);
  align-items:end;
}
/* Citace zakona nese stejnou sazbu jako nadpisy sekci, jen o stupen mensi:
   je to dukaz, ne dalsi nadpis. Svisla linka ji drzi jako vlozeny hlas. */
.statute {
  border-left:2px solid var(--accent-2);
  padding-left:var(--space-3);
  max-width:46ch;
}
.statute p {
  font-family:var(--font-display); font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  line-height:1.25; color:var(--ink);
}
.statute cite {
  display:block; margin-top:var(--space-2);
  font-family:var(--font-body); font-style:normal;
  font-size:0.85rem; letter-spacing:0.04em; color:var(--muted);
}
.powers {
  margin-top:var(--space-5);
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-4);
}
.powers > div { border-top:1px solid var(--rule); padding-top:var(--space-2); }
.powers h3 {
  font-family:var(--font-display); font-weight:400;
  font-size:1.35rem; line-height:1.2; overflow-wrap:anywhere;
}
.powers p { margin-top:var(--space-2); font-size:0.98rem; color:var(--ink-2); }
.join {
  margin-top:var(--space-5); padding-top:var(--space-4);
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:5fr 7fr; gap:var(--space-5);
  align-items:start;
}
.join h3 {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.6rem, 2.6vw, 2.2rem); line-height:1.15;
  letter-spacing:-0.005em; max-width:14ch; text-wrap:balance;
}
.join-body p { font-size:1.1rem; color:var(--ink-2); max-width:var(--measure); }
.join-body p + p { margin-top:var(--space-3); }
.join-body strong { color:var(--ink); font-weight:600; }
/* dovetek pro toho, kdo pohledavku jeste neprihlasil - patri sem, ale
   nesmi prebit hlavni nabidku, proto meritko poznamky */
.join-body .join-note { margin-top:var(--space-3); font-size:0.95rem; color:var(--muted); max-width:58ch; }
.join-body .cta-row {
  margin-top:var(--space-4);
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
}

/* ---------- prose (S2 hanging) ---------- */
.prose-sec { padding-block:var(--space-7) 0; }
.prose-sec h2 {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.12; letter-spacing:-0.005em;
  max-width:22ch; text-wrap:balance;
}
.sec-title {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.12; letter-spacing:-0.005em;
  max-width:22ch; text-wrap:balance;
}
.eyebrow + .sec-title { margin-top:var(--space-3); }
/* podtitulek pod .sec-title - sdileny, nese ho portfolio i sekce o skupine */
.sub { margin-top:var(--space-3); font-size:1.05rem; color:var(--ink-2); max-width:56ch; }
.prose-cols {
  margin-top:var(--space-4);
  display:grid; grid-template-columns:5fr 7fr; gap:var(--space-5);
  align-items:start;
}
.prose-cols .side { font-size:0.95rem; color:var(--muted); max-width:30ch; }
.prose-cols .side p + p { margin-top:var(--space-2); }
.prose-cols .main { font-size:1.1rem; color:var(--ink-2); max-width:var(--measure); }
.prose-cols .main p + p { margin-top:var(--space-3); }
.prose-cols .main strong { color:var(--ink); font-weight:600; }

/* Druha prosa hned za prvni by se stejnym rozvrzenim uz cetla jako sablona.
   Tahle proto nese nadpis v levem sloupci vedle textu, ne nad nim - zaroven
   tim obsadi levou tretinu, ktera by jinak zela prazdnotou. */
@media (min-width:60.0625rem) {
  .prose-sec.aside-head > .wrap {
    display:grid; grid-template-columns:5fr 7fr; gap:var(--space-5);
    align-items:start;
  }
  .prose-sec.aside-head > .wrap > h2 { max-width:13ch; }
  .prose-sec.aside-head .prose-cols {
    margin-top:0; display:flex; flex-direction:column; gap:var(--space-3);
  }
  .prose-sec.aside-head .prose-cols .main { order:1; }
  .prose-sec.aside-head .prose-cols .side { order:2; max-width:var(--measure); }
}

/* ---------- komu pomahame (definicni radky) ---------- */
.who-sec { padding-block:var(--space-7) 0; }
.who-grid { margin-top:var(--space-4); display:grid; grid-template-columns:5fr 7fr; gap:var(--space-5); align-items:start; }
.who-grid .aside-txt { font-size:1.05rem; color:var(--ink-2); max-width:34ch; }
.who-list { border-top:1px solid var(--rule); }
.who-row {
  display:grid; grid-template-columns:1fr 1.4fr; gap:var(--space-3);
  align-items:baseline; padding-block:var(--space-2);
  border-bottom:1px solid var(--rule-2);
}
.who-row dt { font-family:var(--font-display); font-size:1.2rem; }
.who-row dd { font-size:0.95rem; color:var(--muted); }

/* ---------- FAQ (tiche accordiony) ---------- */
.faq-sec { padding-block:var(--space-7) 0; }
/* linky FAQ jdou pres celou sirku sazby jako tabulka rizeni a portfolio -
   jinak je FAQ jedina sekce, ktera vpravo konci jinde nez zbytek stranky.
   Delku ctenych radku hlida az .fa uvnitr. */
.faq-list { margin-top:var(--space-4); border-top:1px solid var(--rule); }
.faq { border-bottom:1px solid var(--rule-2); }
.faq summary {
  list-style:none; cursor:pointer; padding-block:var(--space-3);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3);
  font-family:var(--font-display); font-size:1.3rem;
  transition:color 0.25s var(--ease-out);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--accent); }
.faq summary .pm { flex:none; font-family:var(--font-body); font-size:1.1rem; color:var(--accent); }
.faq[open] summary .pm .plus { display:none; }
.faq:not([open]) summary .pm .minus { display:none; }
.faq .fa { padding:0 0 var(--space-3); max-width:62ch; color:var(--ink-2); font-size:1rem; }

/* ---------- F4 step sequence ---------- */
.steps-sec { padding-block:var(--space-7) 0; }
.steps { margin-top:var(--space-4); border-top:1px solid var(--rule); max-width:820px; }
.step {
  display:grid; grid-template-columns:5.5rem 1fr auto; gap:var(--space-3);
  align-items:baseline; padding-block:var(--space-3);
  border-bottom:1px solid var(--rule-2);
}
.step .no { font-family:var(--font-display); font-size:1.3rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.step h3 { font-size:1.15rem; font-weight:600; }
.step p { margin-top:0.3rem; font-size:0.98rem; color:var(--ink-2); max-width:52ch; }
.step .when { font-size:0.8rem; letter-spacing:0.05em; color:var(--accent); white-space:nowrap; font-weight:600; }

/* Od desktopu je postup casova osa, ne dalsi radkovy seznam - stranka
   jinak sklouzne do ctyr vizualne totoznych sekci pod sebou. */
@media (min-width:60.0625rem) {
  .steps {
    max-width:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
    border-bottom:1px solid var(--rule-2);
  }
  .step {
    display:flex; flex-direction:column; align-items:flex-start;
    padding:var(--space-3) var(--space-3) var(--space-4) 0;
    border-bottom:none; position:relative;
  }
  .step + .step { padding-left:var(--space-3); border-left:1px solid var(--rule-2); }
  .step::before {
    content:""; position:absolute; top:-1px; left:0;
    width:2rem; height:2px; background:var(--accent);
  }
  .step + .step::before { left:var(--space-3); }
  .step .no { order:1; font-size:2.5rem; line-height:1; color:var(--accent); margin-top:var(--space-2); }
  .step .when { order:2; margin-top:0.5rem; color:var(--muted); font-weight:400; }
  .step > div { order:3; margin-top:var(--space-3); }
  .step p { max-width:32ch; }
}

/* ---------- F3 tabular spec: rizeni ---------- */
.cases-sec { padding-block:var(--space-7) 0; }
.cases { margin-top:var(--space-4); border-top:1px solid var(--rule); }
.case {
  display:grid; grid-template-columns:1.35fr 1fr 1fr 0.85fr; gap:var(--space-3);
  align-items:baseline; padding-block:var(--space-3);
  border-bottom:1px solid var(--rule-2);
}
.case .firm { font-family:var(--font-display); font-size:1.3rem; }
.case .sp { font-size:0.92rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.case .dl { font-size:0.9rem; color:var(--muted); font-variant-numeric:tabular-nums; }
/* jedine rizeni, kde lhuta jeste bezi - musi jit videt na prvni pohled */
.case .dl.now { color:var(--ink); font-weight:600; }
.case .st { font-size:0.85rem; font-weight:600; letter-spacing:0.03em; text-align:right; }
.case .st.gold { color:var(--accent); }
.case .st.dim { color:var(--muted); font-weight:400; }
.case.live {
  background:oklch(74% 0.11 85 / 0.06);
  box-shadow:inset 2px 0 0 var(--accent);
  padding-inline:var(--space-2);
  margin-inline:calc(var(--space-2) * -1);
}
.cases-note { margin-top:var(--space-3); font-size:0.95rem; color:var(--muted); max-width:60ch; }

/* ---------- portfolio dlužníků (index) ---------- */
.portfolio-sec { padding-block:var(--space-7) 0; }
.portfolio {
  margin-top:var(--space-4);
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
}
.debtor {
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-2);
  min-height:6.25rem; padding:var(--space-3);
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  transition:background 0.3s var(--ease-out);
}
/* dlazdice s jedinym jmenem by pri space-between nechala pod nim
   prazdnou pulku - jmeno proto drzi svisly stred */
.debtor:not(:has(.dt)) { justify-content:center; }
.debtor .dn {
  font-family:var(--font-display); font-size:1.3rem; line-height:1.15; color:var(--ink);
  overflow-wrap:anywhere;
}
.debtor .dt { font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
/* jedina prokliknutelna dlazdice se musi poznat na prvni pohled */
a.debtor { background:oklch(74% 0.11 85 / 0.05); }
a.debtor:hover { background:oklch(74% 0.11 85 / 0.11); }
a.debtor .dn { color:var(--accent); }
a.debtor .dt {
  color:var(--accent); font-weight:600;
  display:inline-flex; align-items:center; gap:0.4rem;
}
a.debtor:hover .dt { gap:0.65rem; }
a.debtor .dt span { transition:transform 0.25s var(--ease-out); }
a.debtor:hover .dt span { transform:translateX(2px); }
.debtor.more .dn { color:var(--muted); font-style:italic; }
.portfolio-note { margin-top:var(--space-3); font-size:0.95rem; color:var(--muted); max-width:64ch; }

/* ---------- form ---------- */
.form-sec { padding-block:var(--space-7) var(--space-6); }
.form-grid { margin-top:var(--space-4); display:grid; grid-template-columns:7fr 5fr; gap:var(--space-6); align-items:start; }
.f-field { margin-bottom:var(--space-3); }
.f-field label { display:block; font-size:0.88rem; font-weight:600; letter-spacing:0.03em; color:var(--ink-2); margin-bottom:0.5rem; }
.f-field label span { color:var(--accent); }
.f-field input {
  width:100%; font-size:1rem; font-family:inherit; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule-field); border-radius:0;
  padding:0.9rem 1rem;
  transition:border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.f-field input::placeholder { color:var(--muted); }
.f-field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px oklch(74% 0.11 85 / 0.18); }
.f-field input[aria-invalid="true"] { border-color:var(--err); box-shadow:0 0 0 3px oklch(72% 0.13 40 / 0.15); }
.f-field textarea, .f-field select {
  width:100%; font-size:1rem; font-family:inherit; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule-field); border-radius:0;
  padding:0.9rem 1rem;
  transition:border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.f-field textarea { resize:vertical; min-height:7rem; line-height:1.6; }
.f-field textarea::placeholder { color:var(--muted); }
.f-field textarea:focus, .f-field select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px oklch(74% 0.11 85 / 0.18);
}
.f-field select {
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2.75rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9a86a' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.f-field select.placeholder { color:var(--muted); }
.f-field textarea[aria-invalid="true"], .f-field select[aria-invalid="true"] {
  border-color:var(--err); box-shadow:0 0 0 3px oklch(72% 0.13 40 / 0.15);
}
.ferr { display:none; margin-top:0.5rem; font-size:0.88rem; color:var(--err); }
.ferr.show { display:block; }
.fok { display:none; margin-top:0.5rem; font-size:0.88rem; color:var(--ok); }
.fok.show { display:block; }
.f-note { margin-top:var(--space-2); font-size:0.85rem; color:var(--muted); }
.f-note .tlink { font-size:inherit; }
.form-aside { font-size:1.05rem; color:var(--ink-2); max-width:36ch; }
.form-aside .mail {
  display:inline-block; margin-top:var(--space-3);
  font-family:var(--font-display); font-size:1.35rem; color:var(--accent);
  border-bottom:1px solid var(--accent-2); padding-bottom:2px;
}
.form-aside .mail:hover { border-color:var(--accent); }

.chip[disabled] { opacity:0.6; pointer-events:none; }

.file-field { position:relative; }
.file-label {
  display:flex; align-items:center; gap:0.75rem; cursor:pointer;
  background:var(--paper-2); border:1px dashed var(--rule-field);
  padding:0.9rem 1rem; color:var(--muted); font-size:0.95rem;
  transition:border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.file-label:hover { border-color:var(--accent); color:var(--ink-2); }
.file-field input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }

.form-success { display:none; padding-block:var(--space-4); }
.form-success.show { display:block; }
.form-success h3 { font-family:var(--font-display); font-weight:400; font-size:1.8rem; }
.form-success p { margin-top:var(--space-2); color:var(--ink-2); max-width:52ch; }

/* ---------- Ft4 colophon ---------- */
footer.colophon {
  border-top:1px solid var(--rule);
  padding-block:var(--space-4) var(--space-5);
  font-size:0.85rem; line-height:1.9; color:var(--muted);
}
/* wrap zustava na sirce sazby stranky - meri se az odstavec uvnitr,
   jinak paticka zacina jinde nez zbytek stranky */
footer.colophon .wrap p { max-width:74ch; }
footer.colophon .wrap p + p { margin-top:var(--space-2); }
footer.colophon b { color:var(--ink-2); font-weight:600; }
footer.colophon a { color:var(--ink-2); border-bottom:1px solid var(--rule); }
footer.colophon a:hover { color:var(--accent); border-color:var(--accent-2); }

/* ---------- lista se souhlasem se sledovanim ----------
   Obe tlacitka maji stejnou vahu; odmitnout musi byt stejne snadne
   jako prijmout (pozadavek UOOU / EDPB). */
.consent {
  position:fixed; inset-inline:0; bottom:0; z-index:70;
  background:oklch(19% 0.022 250 / 0.97);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--rule);
  font-size:0.9rem; color:var(--ink-2);
}
.consent[hidden] { display:none; }
/* dokud navstevnik o mereni nerozhodne, lista lezi nad obsahem -
   bez tohoto odsazeni pod ni zustane schovana cela paticka */
body:has(.consent:not([hidden])) { padding-bottom:7rem; }
.consent .inner {
  display:flex; align-items:center; gap:var(--space-3);
  padding-block:var(--space-2); flex-wrap:wrap;
}
.consent p { flex:1; min-width:15rem; max-width:72ch; }
.consent b { color:var(--ink); font-weight:600; }
.consent .tlink { font-size:inherit; white-space:nowrap; }
.consent-actions { display:flex; gap:var(--space-2); flex:none; }
.consent .chip { padding:0.7rem 1.2rem; font-size:0.8rem; }
@media (max-width:40rem) {
  .consent .inner { padding-block:var(--space-3); }
  .consent-actions { width:100%; }
  .consent-actions .chip { flex:1; justify-content:center; }
  body:has(.consent:not([hidden])) { padding-bottom:14rem; }
}

/* ---------- dokumentove stranky (privacy, 404) ---------- */
.doc { padding-block:var(--space-6) var(--space-6); }
.doc h1.sec-title { max-width:26ch; }
.doc h2.sec-title {
  font-size:clamp(1.3rem, 2.2vw, 1.7rem); line-height:1.25;
  margin-top:var(--space-6); max-width:40ch;
}
.doc h3 { font-family:var(--font-display); font-weight:400; font-size:1.4rem; margin-top:var(--space-6); }
.doc p, .doc ul { margin-top:var(--space-2); max-width:var(--measure); color:var(--ink-2); }
.doc ul { padding-left:var(--space-3); }
.doc li { margin-top:var(--space-1); }
.doc .meta { margin-top:var(--space-4); font-size:0.9rem; color:var(--muted); }

.notfound {
  padding-block:var(--space-7) var(--space-6);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.notfound p { margin-top:var(--space-3); max-width:46ch; color:var(--ink-2); }
.notfound .cta-row { margin-top:var(--space-4); display:flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; }

/* vstupni animace - dnes uz ji nese jen odhaleni radku .slovy */
@keyframes enter { to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:0.001ms !important; animation-duration:0.001ms !important; }
}

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

@media (max-width:60rem) {
  .prose-cols, .form-grid, .who-grid { grid-template-columns:1fr; gap:var(--space-4); }
  .who-row { grid-template-columns:1fr; gap:0.15rem; }
  .who-sec, .faq-sec { padding-block:var(--space-6) 0; }
  .prose-cols .side { max-width:none; }
  .strip { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .strip .cell:nth-child(odd) { padding-left:0; }
  .strip .cell:nth-child(even) { border-right:none; }
  .strip .cell:nth-child(n+3) { border-top:1px solid var(--rule-2); }
  .case { grid-template-columns:1fr; gap:0.4rem; }
  .case .st { text-align:left; }
  /* pri uzkem okraji by zvyrazneny radek skoncil par pixelu od hrany okna
     a cetl by jako chyba - radeji jde do okraje cely, jako pruh */
  .case.live { padding-inline:var(--pad); margin-inline:calc(var(--pad) * -1); }
  .step { grid-template-columns:3.5rem 1fr; }
  .step .when { grid-column:2; }
  .prose-sec, .steps-sec, .cases-sec, .portfolio-sec, .group-sec { padding-block:var(--space-6) 0; }
  /* tri pravomoci vedle sebe by se na tablet uz nevesly citelne, a nadpis
     nad textem je stejne cte lip nez tri uzke sloupce */
  .group-intro { grid-template-columns:1fr; gap:var(--space-4); }
  .statute { max-width:none; }
  .powers { grid-template-columns:1fr; gap:var(--space-3); }
  .join { grid-template-columns:1fr; gap:var(--space-3); }
  .join h3 { max-width:none; }
  .portfolio { grid-template-columns:repeat(2, 1fr); }
  .form-sec { padding-block:var(--space-6) var(--space-5); }
}
@media (max-width:40rem) {
  body { font-size:1rem; }
  /* znacka + CTA se musi vejit na jednu radku, jinak chip zustane
     trcet sam uprostred navigace */
  nav.top { padding-block:var(--space-3); gap:var(--space-2); }
  nav.top .brand { gap:0.6rem; }
  nav.top .brand svg { width:26px; height:26px; }
  nav.top .brand .name { font-size:1.15rem; }
  nav.top > .chip {
    flex:none; font-size:0.78rem; letter-spacing:0.03em;
    padding:0.8rem 0.9rem;
  }
  .annc { font-size:0.85rem; }
  .annc .inner { line-height:1.5; }
  .hero { padding-block:var(--space-5); }
  .portfolio { grid-template-columns:1fr 1fr; }
  .debtor { min-height:6rem; padding:var(--space-2); }
  .debtor .dn { font-size:1.15rem; }
}
/* pod 360 px se znacka a CTA na jednu radku uz nevejdou - misto
   trcici pilulky pak CTA drzi celou sirku, aby to bylo zamerne */
@media (max-width:22.5rem) {
  nav.top > .chip { width:100%; justify-content:center; }
  /* na 320 px se ctyri odkazy do radky vejdou jen s uzsi mezerou -
     jinak posledni ("Časté dotazy") zustane useknuty za hranou */
  nav.top .links { gap:0.75rem; }
}