/*
 * Kverio Flows: marketingový web (view/marketing/**, controller/marketing.php).
 * Vlastní, lehký list, žádný Bootstrap - stránka potřebuje jen navigaci,
 * tlačítka a mřížku karet, ne formuláře nebo offcanvas.
 *
 * Vizuální směr (podle reference vybrané majitelem produktu): CELÁ stránka
 * je jedna tmavá "deska" (.mkt-deck) položená na sytém barevném podkladu
 * (barva body). Uvnitř desky žádné bílé karty na papíru (to byla předchozí,
 * odmítnutá verze) - obsah plyne v jedné souvislé tmavé ploše, jen s
 * jemnými prosklenými panely tam, kde je opravdu potřeba oddělit skupinu
 * (kroky, kartičky segmentů, ceník). Barvy jsou VLASTNÍ identita produktu
 * (hluboká petrolejová/půlnoční zeleň + teplá mosazná/šampaňská), ne fialová
 * a tyrkysová z reference - ta jen udala kompozici a sytost, ne paletu.
 */

:root {
  /* Podklad (viditelný jen jako lem kolem desky, viz .mkt-deck) - sytý
     přechod půlnoční modrozelené do petrolejové, s teplým zlatým závojem
     v rohu. Nikdy plochá čerň, nikdy vlažné odstíny - přesně tohle majitel
     označil jako chybu předchozího pokusu. */
  --mkt-midnight:   #050F10;
  --mkt-petrol:     #0F4A43;
  --mkt-petrol-2:   #237566;
  --mkt-gold:       #D9AF66;
  --mkt-gold-bright:#F3D18C;
  --mkt-gold-ink:   #241505;

  /* Deska: skoro černá petrolejová, s jemnou radiální září (ne plochá barva). */
  --deck-bg:        #071A1B;
  --deck-bg-2:      #0C2926;
  --deck-glow:      rgba(217, 175, 102, .10);

  --ink:            #F2F6F4;
  --ink-soft:       rgba(242, 246, 244, .74);
  --ink-faint:      rgba(242, 246, 244, .52);
  --hairline:       rgba(242, 246, 244, .14);
  --hairline-soft:  rgba(242, 246, 244, .08);
  /* Lem OVLADACIHO prvku a informacniho uzlu, ne dekorativni linka. Vlasova
     linka (.14) ma proti desce namereno 1.53:1, tedy pod 3:1, ktere WCAG
     1.4.11 zada u hranic komponent a u grafiky nesouci vyznam. Pri .38
     vychazi 3.43:1. Dekorativni linky (oddeleni sekci, spojnice retezu)
     zustavaji na --hairline schvalne: nenesou vyznam a silnejsi lem by
     konkuroval vedouci karte kroku. */
  --ui-edge:        rgba(242, 246, 244, .38);

  --glass:          rgba(242, 246, 244, .045);
  --glass-hover:    rgba(242, 246, 244, .075);
  --glass-border:   rgba(242, 246, 244, .11);

  --shadow-deck:    0 60px 140px -50px rgba(0, 0, 0, .75);
  --shadow-float:   0 26px 50px -18px rgba(0, 0, 0, .6);
  --shadow-phone:   0 44px 90px -26px rgba(0, 0, 0, .7);
  --shadow-btn:     0 16px 32px -14px rgba(217, 175, 102, .45);

  --radius-deck: 36px;
  --radius-lg:   28px;
  --radius-md:   20px;
  --radius-sm:   14px;
  --radius-pill: 999px;

  /* Jedna vnitřní mřížka desky: stejný vodorovný odstup platí pro navigaci,
     nadpisy, odstavce, mřížky karet, hero, patičku i závěrečnou výzvu -
     nikdy vlastní číslo v jednotlivé sekci. Pod 720px totéž, jen užší
     odstup (mobil). Používej vždy tyhle proměnné, ne 40px/22px napřímo. */
  --mkt-pad-x:    40px;
  --mkt-pad-x-sm: 22px;

  /* Jeden svislý rytmus mezi sekcemi (viz `.mkt-section + .mkt-section`
     a `.mkt-section + .mkt-cta` níže - odstup mezi sekcemi je VŽDY přesně
     tahle hodnota, nikdy součet dvou různých paddingů dvou sousedících
     bloků). Uvnitř karet (kroky, segmenty, ceník) stejná logika: jedno
     společné odsazení, viz --mkt-card-pad. */
  --mkt-gap-section: 84px;
  --mkt-card-pad:    28px 26px;

  /* Bezpatkové, tučné, systémové - žádné externí písmo (CSP: default-src
     'self', žádné Google Fonts) a žádný serif: majitel ho výslovně zavrhl
     ("do tohohle světa nepatří"). */
  --font-ui:   -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Podklad: vidět jen jako lem kolem .mkt-deck (viz níže) - proto stačí
     fixní přechod na body, žádný scroll-attachment trik. */
  background:
    radial-gradient(ellipse 1000px 620px at 84% -8%, rgba(243, 209, 140, .55), transparent 58%),
    radial-gradient(ellipse 800px 700px at -10% 108%, rgba(35, 117, 102, .65), transparent 60%),
    linear-gradient(160deg, var(--mkt-petrol-2) 0%, var(--mkt-petrol) 40%, var(--mkt-midnight) 96%);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
/* <figure> (.mkt-phone) chybělo v resetu - prohlížeč mu dává výchozí margin
   1em 40px, což potichu posouvalo první telefon o 40px mimo mřížku desky
   a měnilo skutečnou mezeru mezi telefony (řádek deklaruje gap: 24px, ale
   reálně to bylo 24px + 80px marginů sousedících figur). */
figure { margin: 0; }

:focus-visible {
  outline: 2px solid var(--mkt-gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.mkt-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;
}

.mkt-skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--mkt-gold-bright); color: var(--mkt-gold-ink); padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 700; transition: top .15s ease;
}
.mkt-skip-link:focus { top: 12px; }

.mkt-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.mkt-icon--sm { width: 13px; height: 13px; }

/* ── Deska: jedna souvislá tmavá plocha, na které stojí celá stránka ─────
   Sahá od kraje ke kraji, bez lemu a bez zaoblených rohů. Dřív měla kolem
   sebe 14 px podkladu a zaoblení, takže na stránce byla po celém obvodu
   viditelná hrana a nahoře proužek jiné barvy; majitel produktu to odmítl.
   Podklad z body tím pádem není vidět nikde, zůstává jen jako barva pod
   plochou (například pod adresní lištou prohlížeče na mobilu).

   `overflow: clip`, ne `hidden` - hidden by z .mkt-deck udělalo nový scroll
   container a rozbilo `position: sticky`; clip ořízne zář uvnitř stejně, ale
   bez vedlejšího efektu. */
.mkt-deck {
  position: relative;
  margin: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 620px 420px at 88% 0%, var(--deck-glow), transparent 60%),
    linear-gradient(180deg, var(--deck-bg-2) 0%, var(--deck-bg) 46%, #04100F 100%);
  overflow: clip;
}

/* ── Tlačítka ─────────────────────────────────────────────────────────── */
.mkt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-pill);
  padding: 13px 24px;
  font-family: var(--font-ui);
  font-size: .9375rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.mkt-btn:hover { transform: translateY(-1px); }
.mkt-btn:active { transform: translateY(0); }
.mkt-btn-white { background: #fff; color: #0B211F; }
.mkt-btn-white:hover { background: var(--mkt-gold-bright); }
.mkt-btn-primary { background: var(--mkt-gold); color: var(--mkt-gold-ink); box-shadow: var(--shadow-btn); }
.mkt-btn-primary:hover { background: var(--mkt-gold-bright); }
.mkt-btn-gold { background: rgba(217, 175, 102, .16); color: var(--mkt-gold-bright); }
.mkt-btn-gold:hover { background: rgba(217, 175, 102, .26); }
.mkt-btn-ghost { background: transparent; color: var(--ink); border-color: var(--ui-edge); }
.mkt-btn-ghost:hover { border-color: var(--ink-soft); }
/* 10px svisle misto 8px: s 8px meril odkaz "Watch it update" 149x42 px, tedy
   o 2 px pod 44px dotykovym cilem. */
.mkt-btn-text { background: none; padding: 10px 4px; color: var(--mkt-gold-bright); gap: 6px; }
.mkt-btn-text:hover { text-decoration: underline; }
.mkt-btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ── Logo ─────────────────────────────────────────────────────────────── */
.mkt-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-weight: 800;
  font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink);
}
/* Logo produktu jako OBRAZEK, i s napisem. Driv tu byl jen zlaty zaobleny
   ctverec a napis nesl text stranky pismem webu, takze se s logem neshodoval
   (jina rez, jine prostrkani, jina velikost slova FLOWS).

   SVG, ne PNG: v hlavicce ma 30 px na vysku, na retine dvakrat tolik, a vektor
   se nerozmaze ani v jednom. Nazev produktu nese atribut alt, takze o nej
   odecitac ani vyhledavac neprijde. */
/* 42 px, ne 30: logo je slozene ze znacky a dvou radku textu, takze pri vysce
   znacky z drivejska vyslo slovo FLOWS na petipixelovy prouzek. Merene ze
   snimku hlavicky, ne od oka. */
.mkt-logo-img { height: 42px; width: auto; display: block; }
.mkt-logo--footer .mkt-logo-img { height: 36px; }

/* ── Navigace ─────────────────────────────────────────────────────────── */
.mkt-nav-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
  padding: 26px var(--mkt-pad-x) 0;
}
.mkt-logo { margin-right: auto; }
.mkt-nav-links { display: flex; align-items: center; gap: 28px; }
/* Odsazeni 5px svisle: bez nej mel odkaz vysku 23 px, tedy o 1 px pod 24 px
   minimem pro dotykovy cil (WCAG 2.5.8). Vetsi hodnota by rozhodila vysku
   hlavicky, tahle prida 10 px. */
.mkt-nav-links a { font-size: .9rem; font-weight: 600; color: var(--ink-soft); padding: 5px 0; }
.mkt-nav-links a:hover { color: var(--ink); }
.mkt-nav-actions { display: flex; align-items: center; gap: 10px; }
.mkt-nav-toggle {
  /* Výchozí stav je VIDITELNÝ a schová se až v media query nad breakpointem
     (stejný směr jako .mkt-nav-links/.mkt-nav-actions níže: ty taky defaultně
     display:flex a schovávají se přes max-width). Opačný směr (default
     display:none, zviditelnění přes @media max-width) se spolehlivě
     nevykresloval při headless snímání - jistota beze zbytku vyžaduje tenhle
     směr, ne hádání proč. */
  /* 44x44, ne 40x40: je to jediny ovladaci prvek navigace na telefonu. */
  display: inline-flex; margin-left: auto; width: 44px; height: 44px;
  border-radius: var(--radius-sm); border: 1px solid var(--ui-edge);
  background: var(--glass); align-items: center; justify-content: center;
}
/* 1101 px, ne drivejsich 861 px, a stejne cislo dole u .mkt-nav-links (obe
   pravidla jsou jeden prepinac, nikdy se nesmi rozejit). Namereno: navigace
   potrebuje na jeden radek 953 px (logo 147 + odkazy 513 + tlacitka 237 + dve
   mezery po 28), ale na 861 px ma k dispozici 781 px. Vysledek byl, ze se
   logo smrsklo ze 147 na 92 px a "How it works" se zlomilo na dva radky.
   Nebylo to nove: uz se ctyrmi odkazy potrebovala 882 px a lamala se
   kdekoli pod 962 px, sesty odkaz to jen posunul. */
@media (min-width: 1101px) {
  .mkt-nav-toggle { display: none; }
}
.mkt-nav-toggle-bar, .mkt-nav-toggle-bar::before, .mkt-nav-toggle-bar::after {
  content: ''; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
}
.mkt-nav-toggle-bar { position: relative; }
.mkt-nav-toggle-bar::before { position: absolute; top: -6px; }
.mkt-nav-toggle-bar::after { position: absolute; top: 6px; }
.mkt-nav-mobile {
  display: flex; flex-direction: column; gap: 4px;
  max-width: var(--container); margin: 16px auto 0;
  padding: 16px var(--mkt-pad-x) 20px;
  border-top: 1px solid var(--hairline-soft);
}
/* Specificita třídy by jinak přebila výchozí UA pravidlo `[hidden]{display:none}`
   (obě mají 0,1,0) - bez tohohle by menu bylo vidět natvrdo i na desktopu. */
.mkt-nav-mobile[hidden] { display: none; }
.mkt-nav-mobile a { padding: 10px 4px; font-weight: 600; color: var(--ink); }
.mkt-nav-mobile .mkt-btn { margin-top: 8px; align-self: flex-start; }

/* Druha polovina prepinace z komentare u .mkt-nav-toggle vys: stejna hranice
   (1100/1101), jinak by bud zbyla navigace bez ovladace, nebo dve naraz. */
@media (max-width: 1100px) {
  .mkt-nav-links, .mkt-nav-actions { display: none; }
}
/* Stejný breakpoint (720px) a stejné zúžené odsazení (--mkt-pad-x-sm) jako
   .mkt-section/.mkt-hero/.mkt-cta/.mkt-footer níže - dřív měla navigace
   vlastní breakpoint (640px) i vlastní odsazení (20px), takže se na mobilu
   levý okraj navigace rozešel se zbytkem mřížky. */
@media (max-width: 720px) {
  .mkt-nav-inner { padding: 20px var(--mkt-pad-x-sm) 0; }
  .mkt-nav-mobile { padding: 16px var(--mkt-pad-x-sm) 20px; }
}

/* ── Struktura sekcí ──────────────────────────────────────────────────── */
main { display: flex; flex-direction: column; }
.mkt-section { max-width: var(--container); margin: 0 auto; width: 100%; padding: var(--mkt-gap-section) var(--mkt-pad-x); }
/* Jeden rytmus mezi sekcemi (--mkt-gap-section): sousedící sekce si nesčítají
   dva paddingy (top další + bottom předchozí), spodní padding předchozí
   sekce je pořád vidět a horní se pro sousedící blok vynuluje - viz i
   .mkt-section + .mkt-cta níže, stejný princip až k závěrečné výzvě. */
.mkt-section + .mkt-section { padding-top: 0; }
.mkt-section-head { max-width: 640px; margin-bottom: 44px; }
.mkt-section-head--center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }

.mkt-eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mkt-gold-bright); margin-bottom: 16px;
}
.mkt-eyebrow--center { display: block; text-align: center; }

h1, .mkt-section h2, .mkt-cta h2 {
  font-family: var(--font-ui); font-weight: 800;
  color: var(--ink); line-height: 1.06; letter-spacing: -.02em;
}
.mkt-section h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.mkt-lead { margin-top: 16px; font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.65; }
.mkt-lead + .mkt-lead { margin-top: 10px; }
.mkt-lead--center { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 720px) {
  .mkt-section { padding: 56px var(--mkt-pad-x-sm); }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.mkt-hero {
  max-width: var(--container); margin: 0 auto; width: 100%;
  padding: 76px var(--mkt-pad-x) 0;
  text-align: center;
}
.mkt-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  max-width: 900px; margin: 0 auto;
}
.mkt-pill-word {
  display: inline-block;
  padding: .05em .32em .1em;
  border-radius: .5em;
  background: linear-gradient(135deg, var(--mkt-gold-bright), var(--mkt-gold));
  color: var(--mkt-gold-ink);
  transform: rotate(-2deg);
}
.mkt-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 36px; }
/* --ink-soft, ne --ink-faint: je to veta o cene a o zkusebni dobe, tedy obsah,
   ne popisek. --ink-faint (.52) ma na desce namereno 5.11:1 a pri .8rem uz to
   je drobne pismo nesouci cislo, ktere lidi hledaji. */
.mkt-hero-note { margin: 18px auto 0; max-width: 520px; font-size: .9rem; color: var(--ink-soft); }

/* ── Plovoucí kompozice pod heroem: skutečné kusy produktu ─────────────── */
.mkt-hero-stage {
  position: relative;
  margin: 64px auto 0;
  max-width: 980px;
  min-height: 660px;
  padding: 0 20px;
}
.mkt-phone-stage { display: flex; justify-content: center; padding-top: 44px; }

.mkt-float {
  position: absolute;
  /* 268 px, ne puvodnich 236: karta ridice ma vedle sebe avatar, jmeno, roli
     a tlacitko zavolat, a v uzsi karticce se jmeno orizlo na "Martin Nova..."
     a tlacitko preteklo pres okraj. Merene na nejsirsi z ctyr karticek. */
  width: 268px;
  border-radius: var(--radius-md);
  z-index: 2;
  transition: transform .2s ease;
}
/* Bila plocha a stin az na vlozene karticce, ne na prazdnem obalu. Ramecek do
   obalu vklada az marketing-widgets.js; bez JavaScriptu by tu jinak plavaly
   ctyri prazdne bile obdelniky se stinem (236 px siroke, 152 az 302 px vysoke)
   kolem telefonu. */
/* Obal karticky je jen misto, nic nekresli. Driv mel bilou plochu a stin,
   takze za zaoblenou tmavou kartou byl videt ostry bily obdelnik otoceny
   pod jinym uhlem. Stin si nese karta uvnitr (viz wrapWidgetHtml). */
.mkt-float--mounted { background: transparent; box-shadow: none; }
.mkt-hero-stage:hover .mkt-float { transform: translateY(-4px); }
.mkt-float-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }

.mkt-float--driver   { top: 22px; left: 4%; height: 172px; transform: rotate(-4deg); }
.mkt-float--vehicle  { top: -6px; right: 3%; height: 152px; width: 252px; transform: rotate(3deg); }
/* Sirsi nez ostatni karticky: jako jedina nese souvislou vetu, ne dvojice
   popisek a hodnota. Ve 268 px se "Arrivals hall, next to the information desk.
   Look for a sign with your name." lamalo na tri radky a karta pak byla o 40 px
   vyssi nez karta ridice nad ni, takze leva strana pusobila neurovnane. */
.mkt-float--meeting  { bottom: 80px; left: 2%; width: 306px; height: 158px; transform: rotate(3deg); }
.mkt-float--progress { bottom: 16px; right: 5%; height: 302px; width: 248px; transform: rotate(-3deg); }
.mkt-hero-stage:hover .mkt-float--driver   { transform: rotate(-4deg) translateY(-4px); }
.mkt-hero-stage:hover .mkt-float--vehicle  { transform: rotate(3deg) translateY(-4px); }
.mkt-hero-stage:hover .mkt-float--meeting  { transform: rotate(3deg) translateY(-4px); }
.mkt-hero-stage:hover .mkt-float--progress { transform: rotate(-3deg) translateY(-4px); }

/* Pasmo 861 az 1100 px: drive se tu schovavaly vsechny ctyri karticky naraz a
   zbyl jeden telefon siroky 300 px uprostred plochy 792 az 980 px, tedy tri
   ctvrtiny hera prazdne. Zustavaji dve ze ctyr (ridic vlevo nahore, postup
   vpravo dole), zuzene na 196 px a zakotvene na okraje plochy: na 861 px
   zbyva k telefonu 30 px vule, na 1100 px 124 px. Ctyri se sem nevejdou,
   prekryly by obsah telefonu. */
@media (max-width: 1100px) {
  /* Zustavaji misto setkani a postup cesty, NE karticka ridice a vozidla:
     ty dve stoji na dvou sloupcich vedle sebe (avatar, jmeno, tlacitko
     zavolat) a na 196 px se v nich "Martin Novak" lamal pismeno po pismenu
     na ctyri radky a "Your chauffeur" se urizlo na "Your chauf". Zbyle dve
     jsou prosty text pod nadpisem a zuzeni snesou. */
  .mkt-float--driver, .mkt-float--vehicle { display: none; }
  .mkt-float { width: 196px; }
  /* Vysky jsou domerene podle obsahu pri sirce 196 px (karta 187 px a
     288 px), jinak by pod textem zbyl pruh prazdne bile plochy: pri 230 px
     to bylo 43 px u mista setkani. */
  .mkt-float--meeting  { top: 24px; left: 0; bottom: auto; height: 200px; }
  .mkt-float--progress { bottom: 8px; right: 0; height: 300px; }
  .mkt-hero-stage { min-height: 0; margin-top: 40px; }
}
@media (max-width: 860px) {
  /* Pod 860 px uz vedle telefonu misto neni (330 px vnitrni sirky na 390 px),
     karticky mizi cele - telefon zustava jedine a citelne jadro kompozice. */
  .mkt-float { display: none; }
}
@media (max-width: 720px) {
  /* Předtím se tu měnil jen padding-top a vodorovné odsazení potichu
     zůstávalo na desktopové hodnotě (40px) - hero tak na mobilu vybočoval
     z mřížky, kterou drží .mkt-section/.mkt-cta/.mkt-footer (22px). */
  .mkt-hero { padding: 52px var(--mkt-pad-x-sm) 0; }
  .mkt-hero-actions { gap: 14px; }
}

/* ── Jak to funguje: čtyři kroky ──────────────────────────────────────────
   Rada NENI ctyri stejne karty. Predchozi verze mela ctyri shodne obdelniky
   (namereno 257x260 px, vsechny se stejnou vyplni a stejnym rameckem) a
   pusobila prazdne. Doladit se to nedalo: vypln mela proti desce kontrast
   1.12:1 a ramecek 1.56:1, tedy nebyly to tlumene karty, ale karty na hranici
   viditelnosti - nebylo co zesilovat stinem ani pruhlednosti.
   Rytmus proto stoji na rozdilu druhu, ne sily: JEDEN krok je skutecna karta
   s barevnym prechodem, zbyle tri prestavaji byt karty uplne (vlasova linka
   nahore, prstenec misto plneho disku, tlumeny text). */
.mkt-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  /* start, ne vychozi stretch: se stretchem by se tri tiche kroky natahly na
     vysku vedouci karty (drive byly vsechny 260 px) a rozdil by zmizel. */
  align-items: start;
}
.mkt-step {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  /* Zadna vypln, zadny ramecek dokola, zadne vodorovne odsazeni: tichy krok
     neni karta, takze text zacina presne na hrane sloupce mrizky a jedina
     kresba je linka nad nim. */
  padding: 22px 2px 0 0;
  border-top: 1px solid var(--hairline);
}
.mkt-step-index {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Prstenec, ne plny disk. Ctyri plne zlate disky vedle sebe byly jediny
     rytmus, ktery rada mela, a vsechny ctyri stejne silny. */
  color: var(--mkt-gold-bright);
  border: 1px solid rgba(217, 175, 102, .38);
}
.mkt-step h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.mkt-step p { margin: 0; font-size: .9rem; color: var(--ink-faint); line-height: 1.6; }

/* Vedouci krok: jedina skutecna karta v rade. */
.mkt-step--lead {
  padding: var(--mkt-card-pad);
  border: 1px solid rgba(217, 175, 102, .40);
  border-radius: var(--radius-md);
  /* Prechod, ne plna barva ani jen silnejsi stin: proti desce se stinem neda
     nic vyhrat, protoze rozdil mezi starou vyplni a deskou byl 1.12:1.
     Hodnoty jsou domerene: s .26 na zacatku mela vypln nahore 1.50:1 a dole
     1.10:1, tedy dolni polovina karty splynula s deskou uplne. */
  background: linear-gradient(155deg, rgba(217, 175, 102, .34), rgba(217, 175, 102, .13) 56%, rgba(217, 175, 102, .06));
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, .7);
  /* Prevysuje linku rady, takze se cte jako predmet polozeny NA ni, ne jako
     ctvrty stejny obdelnik. Presah je jen svisly, vodorovne karta zustava
     presne ve sloupci mrizky. */
  margin-top: -22px;
}
.mkt-step--lead p { color: var(--ink-soft); }
.mkt-step--lead .mkt-step-index {
  color: var(--mkt-gold-ink); background: var(--mkt-gold-bright);
  border-color: transparent;
}

@media (max-width: 1100px) {
  /* Dva sloupce, ne ctyri: na 861 px meril odstavec v karte 116 px a slovo
     "re-send" se delilo spojovnikem. Ve dvou sloupcich ma i na 861 px
     zhruba 310 px. */
  .mkt-steps { grid-template-columns: repeat(2, 1fr); }
  /* Presah se rusi uz tady, ne az v jednom sloupci: ve dvou sloupcich lezi
     krok 04 ve druhem radku a -22 px proti mezere 24 px by ho pritisklo na
     2 px ke kroku 02, coz se cte jako rozbite rozvrzeni, ne jako rytmus. */
  .mkt-step--lead { margin-top: 0; }
}
@media (max-width: 860px) {
  .mkt-steps { grid-template-columns: 1fr; gap: 16px; }
}

/* Paty blok bez cisla pod radou kroku. Nesmi vypadat jako pate cislo ani jako
   pata karta: proto zadny prstenec, zadna vypln, jen vlasova linka nahore
   a text pres dva sloupce sirky rady - je to zaver rady, ne dalsi polozka. */
.mkt-aside {
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px 40px;
}
.mkt-aside h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.mkt-aside p { font-size: .95rem; color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }
@media (max-width: 860px) {
  .mkt-aside { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
}

/* ── Zakaznicka zkusenost: jedna ukazka, ctyri faze ────────────────────── */
.mkt-experience-grid {
  display: grid;
  /* Obe dve dlazdice pevne a cela dvojice vystredena, ne `minmax(0, 1fr)
     360px`: s pruznym prvnim sloupcem se prepinac roztahl na 676px a ctyri
     pilulky pak visely v 1220px sirokem prazdnu vedle telefonu. */
  grid-template-columns: minmax(0, 300px) minmax(0, 360px);
  justify-content: center;
  gap: 56px;
  align-items: center;
}
.mkt-stage-side { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.mkt-phase-picker { display: flex; flex-direction: column; gap: 6px; width: 100%; }

/* Radio je vizualne schovane, ale zaostritelne (.mkt-sr-only, ne display:none
   ani visibility:hidden - z tech dvou by skupina vypadla z Tabu i ze sipek).
   Prstenec zamereni proto kresli sousedni <label>, jinak by na obrazovce
   nebyl videt vubec: namereno 0 zlatych pixelu v pasu kolem prepinace. */
.mkt-phase-label {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px 11px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--ink-soft);
  font-size: .95rem; font-weight: 600;
  transition: background-color .18s ease, color .18s ease;
}
.mkt-phase-label:hover { background: var(--glass); color: var(--ink); }
.mkt-phase-dot {
  width: 9px; height: 9px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mkt-phase-input:checked + .mkt-phase-label { background: var(--glass-hover); color: var(--ink); }
.mkt-phase-input:checked + .mkt-phase-label .mkt-phase-dot {
  background: var(--mkt-gold); border-color: var(--mkt-gold);
  box-shadow: 0 0 0 4px rgba(217, 175, 102, .22);
}
.mkt-phase-input:focus-visible + .mkt-phase-label {
  outline: 2px solid var(--mkt-gold-bright);
  outline-offset: 2px;
}

.mkt-stage-pause {
  display: inline-flex; align-items: center; gap: 10px;
  /* 44px svisly dotykovy cil (11px + 11px + 22px radek), ne 32px jako driv
     u odkazu v paticce - je to jediny ovladaci prvek, kterym jde bezici
     ukazku zastavit, a na telefonu se musi trefit palcem. */
  padding: 11px 18px;
  margin-left: 14px;
  background: none; border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  color: var(--ink-soft); font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.mkt-stage-pause:hover { background: var(--glass); color: var(--ink); }
.mkt-stage-pause-icon {
  width: 10px; height: 12px; flex: 0 0 auto;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
/* Ve stavu "zastaveno" je z pauzy trojuhelnik prehrani (bez druheho
   textoveho uzlu navic - popisek prepisuje JS). */
.mkt-stage-pause[data-paused="true"] .mkt-stage-pause-icon {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}

.mkt-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* inset: 0, ne 10px: ramecek uz svuj vlastni okraj ma (telo telefonu), takze
   desetipixelovy odstup jen odhalil bile pozadi obrazovky pod snimky a kolem
   ukazky svitil bily lem. */
.mkt-stage-slides {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #04100F;
}
.mkt-stage-slide {
  position: absolute; inset: 0;
  opacity: 0;
  /* visibility, ne display:none: ramecek si tak drzi rozmery a obsah je
     vykresleny predem (vymena nema co dohanet), ale z Tabu i z odecitace
     mizi - jinak by uzivatel klavesnice prosel ctyrmi zakaznickymi
     strankami za sebou. */
  visibility: hidden;
  /* Odchazejici snimek drzi plne kryti 260 ms (nez pres nej nabehne
     prichozi) a teprve pak mizi. Soubezne prolnuti obou snimku prosvitalo
     telem ramecku #04100F, nejvic mezi tmavou a svetlou fazi. */
  transition: opacity 200ms linear 260ms, visibility 0s linear 460ms;
  z-index: 1;
}
/* Pojistka pro prohlizec bez :has() (Firefox do 120, Safari do 15.4): bez ni
   by tam byl trvale prazdny cerny ramecek. Musi stat PRED pravidly s :has(),
   ta maji diky #id uvnitr :has() vyssi specificitu a prebiji ji. */
.mkt-stage-slide--confirmed { opacity: 1; visibility: visible; }

.mkt-experience-grid:has(.mkt-phase-input:checked) .mkt-stage-slide {
  opacity: 0; visibility: hidden; z-index: 1;
}
.mkt-experience-grid:has(#mkt-phase-confirmed:checked) .mkt-stage-slide--confirmed,
.mkt-experience-grid:has(#mkt-phase-driver_assigned:checked) .mkt-stage-slide--driver_assigned,
.mkt-experience-grid:has(#mkt-phase-driver_arrived:checked) .mkt-stage-slide--driver_arrived,
.mkt-experience-grid:has(#mkt-phase-completed:checked) .mkt-stage-slide--completed {
  opacity: 1;
  visibility: visible;
  /* Prichozi nabeh bez zpozdeni a nad odchazejicim (z-index), aby se
     nemisily dve fotky pres sebe. */
  transition: opacity 260ms linear 0s, visibility 0s linear 0s;
  z-index: 2;
}
/* Rucni prepinani odchazejici snimek nedrzi. Namereno: tremi rychlymi stisky
   sipky (po 120 ms) byly viditelne vsechny ctyri snimky naraz, protoze kazdy
   odchazejici drzi viditelnost 460 ms. Pomale prolnuti ma smysl jen u
   samovolneho behu, kde je to jedina zprava ("stranka se meni"); kdyz fazi
   vybira clovek, nesmi za sebou zustavat komin predchozich.
   :focus-within je pravda o tom, KDO prepina (prepinac drzi fokus i po
   kliknuti na pilulku), ne druha pravda o tom, co je videt. Selektor musi
   nest :has(...) kvuli specificite: pravidlo, ktere snimky skryva, ma
   (0,4,0) a bez :has() by tenhle override prohral. */
.mkt-experience-grid:focus-within:has(.mkt-phase-input:checked) .mkt-stage-slide {
  transition: opacity 120ms linear 0s, visibility 0s linear 120ms;
}

.mkt-stage-iframe {
  width: 100%; height: 100%; border: 0; display: block;
  background: #fff;
}

/* Globalni blok pro prefers-reduced-motion vys v souboru nuluje jen
   transition-duration, ne transition-delay - odchazejici snimek by tu bez
   tohohle radku jeste 460 ms visel pres prichozi. Casovac se pri reduce
   nespousti vubec (marketing.js), prepinac funguje rucne. */
@media (prefers-reduced-motion: reduce) {
  .mkt-stage-slide { transition-delay: 0s !important; }
}

@media (max-width: 900px) {
  .mkt-experience-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Pod 900px jde prepinac nad ukazku a pilulky se zalomi 2+2: nejsirsi
     dvojice meri 285px, tedy se vejde do 330px vnitrni sirky na 390px. */
  .mkt-stage-side { order: -1; align-items: stretch; }
  /* Mrizka 2x2, ne flex-wrap: pri zalomeni podle sirky textu vychazelo
     1+2+1 (popisky meri 190/166/152/162px do 330px vnitrni sirky na 390px),
     coz vypada jako chyba. Dve stejne siroke pilulky vedle sebe drzi radek
     vzdy, jen se zuzi. */
  .mkt-phase-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mkt-phase-label {
    border: 1px solid var(--glass-border);
    /* Odsazeni a mezera u puntiku jsou tak tesne schvalne: nejdelsi popisek
       "Booking confirmed" meri 119px a do pilulky siroke 161px se vejde na
       jeden radek jen s 122px volneho mista. O 3px stedrejsi odsazeni ho
       zlomilo na dva radky a prvni radek mrizky pak byl 66px vysoky proti
       44px druheho. */
    padding: 10px 8px 10px 10px;
    font-size: .85rem;
    gap: 8px;
  }
  .mkt-stage-pause { margin-left: 0; align-self: flex-start; }
}

/* Tentyz obsah slovy pod ukazkou. Ukazka je <iframe>, takze pro odecitac
   i pro vyhledavac tu do ted nebylo NIC: innerText hlavni casti stranky
   neobsahoval ani slovo o ridici, SPZ nebo miste setkani. Dve dlazdice vedle
   sebe (nadpis vlevo, vycet vpravo), stejny princip jako .mkt-aside u kroku. */
.mkt-facts {
  margin-top: 56px; padding-top: 26px;
  border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px 40px;
}
.mkt-facts h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
/* Uvodni veta nad vyctem. Mrizka ma dva sloupce (nadpis vlevo, obsah vpravo),
   takze veta i seznam musi byt v JEDNOM prvku ve druhem sloupci, jinak by veta
   spadla pod nadpis do prvniho. */
.mkt-facts-lead { font-size: .9375rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 16px; max-width: 62ch; }
.mkt-facts ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.mkt-facts li {
  font-size: .9375rem; color: var(--ink-soft); line-height: 1.6;
  padding-left: 22px; position: relative;
}
.mkt-facts li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--mkt-gold);
}
/* 1100 px, ne 900: pri dvou sloupcich vyctu a uzkem sloupci nadpisu vychazela
   na 1024 px polozka na 214 px a "so nobody walks up to the wrong one" se
   lamalo na ctyri radky. */
@media (max-width: 1100px) {
  .mkt-facts ul { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .mkt-facts { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
}

.mkt-phone-iframe {
  width: 100%; height: 100%; border: 0; border-radius: 24px; display: block;
  background: #fff;
}
/* partials/phone.latte zbylo jedine misto, kde se pouziva: hero. Tam popisek
   pod telefonem nikdy videt nebyl (hero ma vlastni nadpis) a od zruseni rady
   ctyr telefonu neni kde jinde by byt mohl. Zustava jen skryti, zadne
   formatovani textu, ktery se nikde nevykresluje. */
.mkt-phone-caption { display: none; }
.mkt-phone { flex: 0 0 auto; }
.mkt-phone-stage .mkt-phone-frame {
  width: 300px;
  box-shadow: var(--shadow-phone), 0 0 0 10px rgba(242, 246, 244, .04);
}

/* ── Penezenka: karta, kterou zakaznik dostane k rezervaci ────────────────
   Karta je kreslena, ne fotka: CSP je default-src 'self' a odznaky Apple ani
   Google se pouzit nesmi. Barvy karty prichazi stylem na prvku
   (--mkt-pass-bg / --mkt-pass-fg z controlleru), protoze to jsou data uctu,
   ne barvy webu - je to tataz dvojice, ktera jde do pass.json.

   Rozvrzeni je stejneho druhu jako u integraci (text vlevo, ukazka vpravo),
   jen uzsi sloupec: karta v telefonu ma zhruba 340 px a pri 400 px uz to
   prestava vypadat jako neco, co clovek drzi v ruce.

   Poradi v mrizce NENI poradi v dokumentu: karta stoji v HTML hned za
   nadpisem, protoze na 390 px zacinala az 1 480 px pod zacatkem sekce (nadpis,
   odstavec, pet odrazek a poznamka nad ni), tedy skoro dve obrazovky pod
   nadpisem, a je to jedina vec, kvuli ktere sem clovek jde. Na sirokem okne ji
   mrizka posle do praveho sloupce pres oba radky a vycet se vrati pod nadpis. */
.mkt-wallet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  /* Druhy radek je 1fr, aby prebytek vysky (karta s obema stranami a popiskem
     meri 512 px, nadpis s vyctem 476 px) zbyl POD vyctem, ne mezi odstavcem a
     prvni odrazkou - tam se z nej stala 36px dira, ktera vypadala jako chybejici
     text. */
  grid-template-rows: auto 1fr;
  gap: 26px 56px;
  align-items: start;
}
.mkt-wallet-grid .mkt-section-head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.mkt-wallet-details { grid-column: 1; grid-row: 2; align-self: start; }
.mkt-wallet-grid .mkt-pass-figure { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.mkt-wallet-list { display: flex; flex-direction: column; gap: 10px; }
/* Stejny puntik jako u .mkt-facts a .mkt-price-list: je to tentyz druh vyctu
   (co zakaznik dostane), takze nema mit vlastni odrazku. */
.mkt-wallet-list li {
  font-size: .9375rem; color: var(--ink-soft); line-height: 1.6;
  padding-left: 22px; position: relative;
}
.mkt-wallet-list li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--mkt-gold);
}
.mkt-wallet-note { margin-top: 18px; font-size: .85rem; color: var(--ink-faint); }

.mkt-pass-figure { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mkt-pass-figure figcaption { font-size: .85rem; color: var(--ink-soft); line-height: 1.55; }

/* Karta samotna. Zadne otoceni: plovouci karticky v heru maji rotaci proto, ze
   lezi volne v prostoru, tahle lezi v penezence a naklon by z ni udelal
   dekoraci. */
.mkt-pass {
  position: relative; z-index: 2;
  overflow: hidden;   /* lesk uvnitr nesmi vylezt pres zaoblene rohy */
  width: 100%;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 20px 22px;
  border-radius: 18px;
  background: var(--mkt-pass-bg);
  color: var(--mkt-pass-fg);
  /* Vlasova linka nahore a slabsi po stranach: takhle vypada hrana skutecne
     karty, ktera zachytava svetlo. Kresli se stinem dovnitr, ne obrysem, aby
     nepribyla sirka a nerozjelo se zaobleni. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    /* Karta lezi na svetle plose penezenky, stin ji od ni odlepuje. */
    0 16px 34px -20px rgba(0, 0, 0, .6);
}
/* Lesk pres horni roh. Zamerne slaby a jen tam, kde nestoji drobne pismo:
   zesvetleni podkladu pomaha tmavemu textu, ale svetlemu skodi, a barvu znacky
   si urcuje firma, takze karta musi vypadat dobre v obou pripadech. */
.mkt-pass::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 88% -20%, rgba(255, 255, 255, .16), transparent 60%),
    /* Jen zesvetleni nahore, ZADNE ztmaveni dole: spodni pole karty (PASSENGER)
       leželo v nejtmavsim miste prechodu a kontrast tam spadl na 4.4:1. */
    linear-gradient(160deg, rgba(255, 255, 255, .08), transparent 60%);
  pointer-events: none;
}
/* Obsah nad leskem, jinak by ho prekryl. */
.mkt-pass > * { position: relative; z-index: 1; }

/* Hlavicka je oddelena linkou jako na skutecne karte: nad ni kdo kartu vydal,
   pod ni udaje o ceste. Linka je z barvy textu, ne cerna: na tmave barve
   znacky by cerna cara zmizela. */
.mkt-pass-head {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--mkt-pass-fg) 22%, transparent);
}
.mkt-pass-org { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
/* Ztlumeni popisku drzi PRUHLEDNOST, a ta jde na ukor kontrastu: text na barve
   uctu je jedina barva textu, kterou karta ma (pass.json ma foregroundColor
   i labelColor stejne). Merene z PIXELU snimku, ne z deklarovanych barev:
   pri .8 kryti a leskem pres kartu vyslo u popisku 3.3:1, tedy pod normou pro
   drobne pismo. Pri .92 je z toho 4.6:1. Rozdil mezi popiskem a hodnotou proto
   nese velikost a prostrkani, ne jas. */
.mkt-pass-kind { font-size: .8rem; font-weight: 600; opacity: .92; }
.mkt-pass-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mkt-pass-field { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; }
/* Popisek se NEZTLUMUJE vubec. Merene z pixelu snimku: pri .8 kryti vyslo
   3.3:1 a pri .92 stale jen 3.9 az 4.2:1, tedy pod normou pro drobne pismo.
   Skutecna karta na tom je stejne, pass.json ma labelColor shodny s barvou
   textu, takze rozdil mezi popiskem a hodnotou nese velikost a prostrkani. */
.mkt-pass-label { font-size: .625rem; font-weight: 700; letter-spacing: .12em; }
/* Verzalky dela CSS, ne text: v pass.json jsou popisky psane "PICKUP", "FROM",
   "TO", "PASSENGER", ale odecitac ma cist slova, ne pismena. */
.mkt-pass .mkt-pass-label { text-transform: uppercase; }
.mkt-pass-value { font-size: .9375rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.mkt-pass-field--lead .mkt-pass-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

/* Stejny zlom jako u integraci (1040 px) a ze stejneho duvodu: sloupec ukazky
   je pevny, takze se text a karta protnou drive, nez okno dojde k mobilnimu
   zlomu. Karta zustava siroka jako ve dvou sloupcich, jinak by se roztahla
   pres celou desku a prestala pripominat kartu v telefonu. */
@media (max-width: 1040px) {
  /* Jeden sloupec a rozmisteni podle poradi v dokumentu (nadpis, karta,
     vycet), proto se pevne souradnice v mrizce rusi. */
  .mkt-wallet-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 32px; }
  .mkt-wallet-grid .mkt-section-head,
  .mkt-wallet-details,
  .mkt-wallet-grid .mkt-pass-figure { grid-column: auto; grid-row: auto; }
  /* Na jednom sloupci stoji ukazka NA STRED, ne u leveho kraje: na telefonu je
     to jediny predmet v sekci a zarovnani vlevo z nej delalo utrzek. */
  .mkt-wallet-grid .mkt-pass-figure { max-width: 360px; margin-inline: auto; }
  .mkt-pass-figure figcaption { text-align: center; }
}

/* ── Flow: řetěz kroků ──────────────────────────────────────────────────
   Stejný vizuální princip jako itinerář v administraci (docs/design-system.md):
   plný uzel = hotovo, prstenec = aktuální, obrysový = budoucí. Tady vodorovně,
   protože jde o volnou ukázku sledu kroků, ne o časovou osu konkrétní cesty.
   Padding záměrně NEsdílí --mkt-card-pad s .mkt-step/.mkt-segment-card/
   .mkt-price-card: tohle není obsahová karta s nadpisem a odstavcem, ale
   diagram - kruhové uzly a spojnice si nahoře žádají víc vzduchu, popisky
   dole už žádný přesah nemají, takže dole stačí málo. */
.mkt-chain {
  /* Zadny flex-wrap. Pevnych 128 px na uzel se v pasmu 721 az 933 px zlomilo
     na dva radky a spojnice sesteho uzlu (::before, left: -64px) vylezla
     35 px ven z panelu na tmavou desku jako useknuta cara. Pod 933 px se
     retez proto prepina do sloupce (viz media niz), nad nim se uzly
     rozprostiraji. */
  display: flex; align-items: flex-start; gap: 0;
  padding: 32px 28px 8px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
.mkt-chain-node {
  /* Rovnomerne rozprostreni, ne pevnych 128 px: sest pevnych uzlu koncilo na
     1280 px uz 303 px pred pravym okrajem panelu sirokeho 1100 px, tedy
     ctvrtina panelu zustavala prazdna. */
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; position: relative; padding-top: 15px;
}
.mkt-chain-node:not(:first-child)::before {
  /* Procenta, ne pevnych 128 px: sirka uzlu ted zavisi na sirce panelu
     (128 px na 933 px, 174 px na 1280 px) a spojnice musi vest presne od
     stredu predchoziho uzlu ke stredu vlastniho, at je uzel jakkoli siroky. */
  content: ''; position: absolute; top: 29px; left: -50%; width: 100%; height: 2px;
  background: var(--hairline);
}
.mkt-chain-node--done:not(:first-child)::before,
.mkt-chain-node--current:not(:first-child)::before { background: var(--mkt-gold); opacity: .5; }
.mkt-chain-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  /* Prstenec budouciho kroku nese vyznam (hotovo / aktualni / budouci), takze
     plati 3:1: s --hairline mel 1.53:1 a na tmave desce se ztracel. */
  border: 2px solid var(--ui-edge); background: var(--deck-bg);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.mkt-chain-node--done .mkt-chain-dot { background: var(--mkt-gold); border-color: var(--mkt-gold); color: var(--mkt-gold-ink); }
.mkt-chain-node--current .mkt-chain-dot { border-color: var(--mkt-gold); box-shadow: 0 0 0 4px rgba(217, 175, 102, .22); }
.mkt-chain-node--ghost .mkt-chain-dot { border-style: dashed; color: var(--ink-faint); }
.mkt-chain-label { font-size: .875rem; font-weight: 700; color: var(--ink); }
.mkt-chain-node--ghost .mkt-chain-label { color: var(--ink-faint); font-weight: 600; }
/* .mkt-chain-key (puncova bublina s klicem API pod popiskem) zrusena i s
   markupem: publikum teto sekce jsou majitele a provozni reditele, ne
   vyvojari, a veta o stabilnich klicich se presunula do sekce Integrations. */

/* 933 px, ne drivejsich 720 px: pod 933 px uz se sest uzlu do panelu na jeden
   radek nevejde (933 - 28 desky - 80 mrizky - 56 panelu = 769 px, tedy presne
   128 px na uzel, coz je minimum pro popisek "Ready for pickup"). */
@media (max-width: 933px) {
  .mkt-chain { flex-direction: column; gap: 18px; padding: 24px 20px; }
  /* flex: 0 0 auto, jinak by rozprostreni z rezimu radku roztahlo kazdy uzel
     na stejnou VYSKU a sloupec by se rozjel. */
  .mkt-chain-node { flex: 0 0 auto; flex-direction: row; width: auto; text-align: left; padding-top: 0; gap: 12px; }
  .mkt-chain-node:not(:first-child)::before {
    top: -13px; left: 13px; width: 2px; height: 18px;
  }
}

/* ── Segmenty ─────────────────────────────────────────────────────────── */
.mkt-segments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mkt-segment-card {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--mkt-card-pad); display: flex; flex-direction: column; gap: 12px;
  transition: background-color .15s ease, border-color .15s ease;
}
.mkt-segment-card:hover { background: var(--glass-hover); }
.mkt-segment-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.mkt-segment-card p { font-size: .9375rem; color: var(--ink-soft); line-height: 1.6; }
.mkt-segment-card--cta { background: linear-gradient(155deg, rgba(217, 175, 102, .16), rgba(217, 175, 102, .04)); border-color: rgba(217, 175, 102, .28); }
.mkt-segment-card--cta .mkt-btn-gold { margin-top: 6px; align-self: flex-start; }

@media (max-width: 860px) {
  .mkt-segments-grid { grid-template-columns: 1fr; }
}

/* ── Integrace ────────────────────────────────────────────────────────── */
.mkt-integrations-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: center; }
.mkt-integrations-grid .mkt-section-head { margin-bottom: 0; }
.mkt-code {
  background: rgba(0, 0, 0, .38); color: #CDE7DD;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 24px 22px;
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.7;
  overflow-x: auto; margin: 0;
}
/* Ukazka API je <figure> s <figcaption> (dřív <pre aria-label>): <pre> ma roli
   generic a odecitace na ni pristupny nazev zahazuji, takze ukazka byla
   bezejmenna. Sloupec mrizky drzi figure, ne pre - jinak by popisek vypadl
   z omezeni sirky niz. */
.mkt-code-figure { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mkt-code-figure figcaption { font-size: .85rem; color: var(--ink-soft); line-height: 1.55; }
.mkt-mono { font-family: var(--font-mono); font-size: .875em; }

/* 1040 px, ne drivejsich 900 px. Sloupec s kodem je pevnych 400 px, takze se
   text a ukazka protnou zhruba na 956 px sirky okna: na 901 px vychazel text
   373 px, tedy UZSI nez 400 px ukazka kodu vedle nej. 1040 px dava rezervu,
   na 1041 px ma text 485 px. */
@media (max-width: 1040px) {
  .mkt-integrations-grid { grid-template-columns: 1fr; }
  /* V jednom sloupci by se ukazka roztahla na celou sirku desky (namereno
     932 px na 1040 px okna) a za sesti radky kodu by zbyval pul metru prazdne
     tmave plochy. Sirka zustava stejna jako ve dvousloupcovem rozvrzeni.
     Omezuje se <figure>, ne <pre>: popisek pod ukazkou ma koncit tam, kde
     ukazka, ne se tahnout pres celou desku. */
  .mkt-integrations-grid .mkt-code-figure { max-width: 400px; }
}
@media (max-width: 480px) {
  /* Nejdelsi radek ukazky ("driver_name": "Martin Novak",) pretekal na 390 px
     o 9 px (337 proti 328) a pre se rozjel vlastnim vodorovnym posuvnikem.
     Zmensuje se pismo, ne obsah: kod ma zustat totozny s kartickou vozidla
     v heru. */
  .mkt-integrations-grid .mkt-code { font-size: .72rem; padding: 20px 16px; }
}

/* ── Ceník ────────────────────────────────────────────────────────────── */
/* start, ne stretch: pri stretchi se karta White Label natahla na vysku hlavni
   karty (obe 411 px) a pod jejim poslednim radkem zbyvalo 126 px prazdne
   plochy, tedy skoro tretina karty. Ruzna vyska je navic pravda o nabidce:
   hlavni plan nese pet polozek a tlacitko, addon tri radky a zadne. */
/* Tri karty, ne dve: po pridani Enterprise spadla treti karta pod ostatni,
   protoze mrizka mela napevno dva sloupce. auto-fit s minimem 260 px drzi tri
   vedle sebe od 900 px vys a niz je slozi pod sebe sam. */
.mkt-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; }
.mkt-price-card {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: var(--mkt-card-pad); display: flex; flex-direction: column; gap: 14px;
}
.mkt-price-card--addon { background: linear-gradient(155deg, rgba(217, 175, 102, .14), rgba(217, 175, 102, .02)); border-color: rgba(217, 175, 102, .26); }
.mkt-price-card h3 { font-size: 1.1rem; font-weight: 700; }
.mkt-price { display: flex; align-items: baseline; gap: 6px; }
/* line-height: 1, jinak si cislice vysoka 44 px nese radek 70,4 px (zdedeny
   1.6 z body) a karta ceniku pusobi rozvolnene. */
.mkt-price-amount { font-family: var(--font-ui); font-size: 2.75rem; font-weight: 800; line-height: 1; color: var(--ink); }
.mkt-price-period { color: var(--ink-faint); font-size: .9rem; }
/* Puvodni cena vedle zavadeci. Preskrtnuta, drobna a ztlumena: je to kontext
   k cislu vedle, ne druha nabidka. */
.mkt-price-was {
  font-size: 1.1rem; font-weight: 600;
  color: var(--ink-faint);
  text-decoration: line-through;
  margin-left: 8px;
}
.mkt-price-list { display: flex; flex-direction: column; gap: 10px; }
.mkt-price-list li {
  font-size: .9rem; color: var(--ink-soft); padding-left: 24px; position: relative;
}
.mkt-price-list li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  border-radius: 50%; background: rgba(217, 175, 102, .18); border: 2px solid var(--mkt-gold);
}
/* margin-top: auto na tlacitku by pod nim uz nedrzelo poznamku o zkusebni dobe
   (ta by se od nej odtrhla na spodni hranu karty). Odsazeni proto obstara
   posledni polozka vyctu, tlacitko a poznamka zustavaji u sebe. */
.mkt-price-card .mkt-price-list { margin-bottom: auto; }
.mkt-price-card .mkt-btn { align-self: flex-start; }
/* Radek pod tlacitkem "Start free". Neni to slib navic: 14 dni bez karty uz
   dnes rika registrace (view/auth/register.latte), tady se to jen dostava tam,
   kde clovek o tlacitko zavadi. */
.mkt-price-note { margin-top: -4px; font-size: .8rem; color: var(--ink-faint); }
.mkt-price-card--addon .mkt-price-note { margin-top: 0; }
/* "Coming soon" u White Label: overeni domeny a certifikaty jeste hotove
   nejsou, takze karta nesmi vypadat jako neco, co jde koupit. Odznak proto
   NENI zlaty jako akcenty, ktere na neco zvou. */
.mkt-badge {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--glass); border: 1px solid var(--glass-border);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .mkt-pricing-grid { grid-template-columns: 1fr; }
}

/* ── Závěrečná výzva ──────────────────────────────────────────────────── */
.mkt-cta {
  max-width: var(--container); margin: 0 auto; width: 100%;
  padding: 90px var(--mkt-pad-x);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px;
}
/* Poslední sekce před výzvou (ceník) má vlastní spodní odsazení
   --mkt-gap-section (84px) - bez tohohle vynulování by se sečetlo s horním
   90px paddingem výzvy a mezera by vyskočila na 174px, zatímco všude jinde
   mezi sekcemi platí jednotných 84px. Vlastní odsazení výzvy (90px) tím
   zůstává zachované, jen se neduplikuje. */
.mkt-section + .mkt-cta { padding-top: 0; }
.mkt-cta h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 480px; }
.mkt-cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 320px; }
.mkt-cta-side p { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 720px) {
  /* padding-top zůstává vynulovaný přes .mkt-section + .mkt-cta výše (vyšší
     specificita, platí i tady), takže se mezera nezdvojí ani na mobilu. */
  .mkt-cta { padding: 64px var(--mkt-pad-x-sm); }
  .mkt-cta-side { max-width: none; }
}

/* ── Patička ──────────────────────────────────────────────────────────── */
.mkt-footer {
  max-width: var(--container); margin: 0 auto;
  padding: 32px var(--mkt-pad-x) 44px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  border-top: 1px solid var(--hairline-soft);
}
/* Mezera mezi radky je 0, vodorovne zustava 22px: svisly odstup uz drzi
   odsazeni odkazu (11px nahore i dole, viz niz). S 22px v obou smerech
   vychazela na 390px mezera mezi radky 44px a paticka se rozvolnila. */
.mkt-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin-left: auto; }
/* Svisle odsazeni 11px kvuli dotykovemu cili: bez nej meril odkaz 39x22 px,
   tedy pod 24 px minimem (WCAG 2.5.8) i pod 44 px, ktere na telefonu trefi
   palec. Sirku odkazu to nemeni, mezera mezi radky paticky se nezvetsi
   (kontejner je flex s align-items: center). */
.mkt-footer-links a { font-size: .875rem; color: var(--ink-soft); padding: 11px 0; }
.mkt-footer-links a:hover { color: var(--ink); }
.mkt-footer-copy { width: 100%; margin-top: 4px; font-size: .8rem; color: var(--ink-faint); }

/* Stejný breakpoint (720px) jako zbytek mřížky - dřív měla patička vlastní
   (640px) a odsazení 20px místo 22px, viz --mkt-pad-x-sm. */
@media (max-width: 720px) {
  .mkt-footer { padding: 26px var(--mkt-pad-x-sm) 34px; }
  .mkt-footer-links { margin-left: 0; }
}

/* ── Merítko sdileneho ramecku telefonu (public/assets/css/phone-frame.css) ──
   Ramecek ma pevnych 412x866 bodu a zmensuje se transformem. Sirky nize
   vychazeji z toho, ze pod ~280 px vnitrni sirky se zakaznicka stranka lame
   pismeno po pismenu: neni stavena jako miniatura a zmensovat pismo nelze,
   ukazka se prodava jako skutecny produkt. */
.mkt-stage-size { --kf-phone-scale: .86; }          /* 354 px siroky telefon, vnitrek 335 */
.mkt-phone-stage-size { --kf-phone-scale: .72; }    /* plovouci telefon v heru */
.mkt-wallet-phone-size { --kf-phone-scale: .74; }    /* 305 px siroky telefon v sekci penezenky */

/* Scena sekce penezenky: telefon a za nim fotka vozu. Fotka je POZADI, ne
   druhy predmet: je ztlumena, rozostrena po okrajich a vykukuje jen z rohu,
   aby oko slo na obrazovku telefonu. */
.mkt-wallet-scene { position: relative; display: flex; justify-content: center; }
.mkt-wallet-photo {
  position: absolute;
  z-index: 0;
  left: -21%; top: 12%;
  width: 62%; aspect-ratio: 3 / 4;
  border-radius: 20px;
  /* Detail vozu, ne cela scena: z fotky je videt jen levy pruh vedle telefonu
     a v nem se siroky zaber rozpadne na nerozpoznatelne skvrny. */
  background: url('/assets/img/templates/detail.webp') center / cover no-repeat;
  transform: rotate(-5deg);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
/* Ztmaveni pres fotku: bez nej pritahovala oko vic nez obrazovka telefonu,
   kvuli ktere sekce existuje. Prekryv je na pseudoprvku, ne pres opacity celeho
   prvku, at zustane stin pod kartou plny. */
.mkt-wallet-photo::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(200deg, rgba(6, 20, 18, .12), rgba(6, 20, 18, .58));
}
.mkt-wallet-scene .kf-phone-stage { position: relative; z-index: 1; }

@media (max-width: 640px) {
  .mkt-wallet-photo { display: none; }
}

@media (max-width: 900px) {
  .mkt-stage-size { --kf-phone-scale: .72; }
}
@media (max-width: 640px) {
  .mkt-stage-size { --kf-phone-scale: .78; }
  .mkt-phone-stage-size { --kf-phone-scale: .62; }
  .mkt-wallet-phone-size { --kf-phone-scale: .66; }
}
@media (max-width: 400px) {
  .mkt-stage-size { --kf-phone-scale: .7; }
}

/* ── Ukazky jsou OBRAZ produktu, ne stranka k pouzivani ────────────────────
   Kolecko mysi nad <iframe> jde do jeho dokumentu, ne do stranky pod nim,
   takze se stranka pri prejeti pres telefon prestala rolovat a vypadalo to
   jako zaseknuti. Uvnitr stejne neni co ovladat (sandbox bez allow-scripts),
   takze udalosti mysi sem nepatri. Tyka se vsech tri ukazek: plovoucich
   karticek, telefonu v heru i telefonu v sekci zkusenosti. */
.mkt-float-frame,
.mkt-phone-iframe,
.mkt-stage-iframe { pointer-events: none; }

/* ── Karta v telefonu ────────────────────────────────────────────────────
   Ukazka karty stoji ve sdilenem ramecku telefonu (phone-frame.css), protoze
   v penezence ji clovek uvidi prave takhle.

   Obrazovka penezenky. SVETLA, ne cerna: tak ji clovek zna,
   a nase karta ma na svetlem podkladu vyniknout barvou firmy. Lezi uvnitr
   sdileneho ramecku (phone-frame.latte), takze vyplnuje presne jeho 390x844
   a odsazeni nahore uklizi stavovy radek a ostruvek. */
.mkt-wallet-screen {
  position: absolute; inset: 0;
  background: #f2f2f7;
  padding: 66px 16px 0;
  display: flex; flex-direction: column;
  font-family: var(--font-ui);
}
.mkt-wallet-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mkt-wallet-screen-title {
  margin: 0;
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #0b0b0f;
}
/* Tlacitko pridat: jen kolecko s krizkem, kresli ho CSS. Obrazek by musel
   projit pres Content-Security-Policy a kvuli jednomu plusku to nestoji za to. */
.mkt-wallet-plus {
  position: relative;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  background: #007aff;
}
.mkt-wallet-plus::before,
.mkt-wallet-plus::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: #fff; border-radius: 1px;
  transform: translate(-50%, -50%);
}
.mkt-wallet-plus::before { width: 14px; height: 2px; }
.mkt-wallet-plus::after { width: 2px; height: 14px; }

.mkt-wallet-screen .mkt-pass { margin-top: 20px; position: relative; z-index: 2; }

/* Ostatni karty ve stohu. Zaobleni jen nahore a zaporny horni okraj: kazda
   dalsi prekryva spodek te predchozi, takze z kazde zbyde jen horni pruh
   s nazvem, presne jak to dela telefon. Nase karta lezi nad nimi (z-index),
   jinak by ji stoh prekryl. */
/* Stoh je pripnuty ke DNU obrazovky: v telefonu se ostatni karty skladaji dole
   a rozbalena zustava nahore. Prave proto smi posledni z nich koncit u spodni
   hrany - ustrihne ji obrazovka, ne CSS. */
.mkt-pass-others { margin-top: auto; }
.mkt-pass-other {
  position: relative;
  height: 96px;
  padding: 14px 16px 0;
  /* Obsah nahoru, ne na stred: z karty je videt jen horni pruh, a na stredu
     96px vysoke karty by nazev zustal schovany pod tou nasledujici. */
  display: flex; align-items: flex-start; gap: 9px;
  border-radius: 16px 16px 0 0;
  /* Svetla linka na hornim okraji: horni hrana karty zachytava svetlo a prave
     ona odlisi dve karty za sebou. Bez ni oba prouzky splynuly v jeden blok. */
  border-top: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 -8px 22px -10px rgba(0, 0, 0, .55);
  color: rgba(255, 255, 255, .92);
}
.mkt-pass-other + .mkt-pass-other { margin-top: -52px; }
.mkt-pass-other--boarding { background: linear-gradient(160deg, #1d2a4d, #131c33); }
.mkt-pass-other--key { background: linear-gradient(160deg, #1f4038, #142a25); }
.mkt-pass-other--ticket { background: linear-gradient(160deg, #4a2540, #2b1527); }
.mkt-pass-other-icon { display: flex; opacity: .85; }
.mkt-pass-other-icon svg { width: 17px; height: 17px; }
.mkt-pass-other-name { font-size: .8125rem; font-weight: 700; letter-spacing: .01em; }

/* ── Tentyz engine, jine cesty ───────────────────────────────────────────
   KMEN A VETVE, ne ctyri rady pilulek. Predchozi verze davala kazdemu oboru
   tutez radu obrysovych pilulek s carkou mezi nimi a majitel produktu ji
   oznacil za genericky vystup generatoru: sdeleni "kroky si pojmenuje firma,
   engine pod nimi je stejny" v ni slo jen precist, ne videt. Ted je vlevo
   nazev oboru, uprostred JEDEN svisly zlaty kmen spolecny vsem oborum a
   vpravo vetev s kroky. Kmen je jedina vec, ktera se mezi obory nemeni.

   Kolej vetve se sklada ze useku na jednotlivych krocich (li::after), ne z
   jedne cary pres cely radek: usek vede od vlastni znacky ke znacce dalsiho
   kroku, takze kolej vzdy konci presne u posledniho kroku a nepokracuje do
   prazdna, at ma obor kroku ctyri nebo deset. */
.mkt-journeys {
  /* Sirka sloupce s nazvem a odstup vetve od kmene. Kmen stoji presne v
     polovine odstupu (--jrn-gap / 2), proto obe hodnoty jen tady. */
  --jrn-col: 190px;
  --jrn-gap: 34px;
  --jrn-pad-x: 30px;
  /* Poloha kmene. Pocita se i z odsazeni panelu, ne jen ze sirky sloupce:
     bez --jrn-pad-x vyslo 207 px misto 237 px a kmen prekryval nazev oboru,
     ktery konci na 220 px. */
  --jrn-trunk-x: calc(var(--jrn-pad-x) + var(--jrn-col) + var(--jrn-gap) / 2);
  /* Kolej i kmen nesou vyznam (sled kroku), takze plati 3:1 podle WCAG
     1.4.11. Zlata na .55 ma z pixelu namereno 3.43:1, na .38 by vyslo 2.3:1,
     proto se tady nesmi ztlumit vic. */
  --jrn-rail: rgba(217, 175, 102, .55);
  position: relative;
  padding: 26px var(--jrn-pad-x) 24px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  /* Zar vychazi z hlavy kmene, ne z rohu panelu: drzi oko na miste, kde
     kompozice zacina. */
  background:
    radial-gradient(720px 320px at var(--jrn-trunk-x) -12%, rgba(217, 175, 102, .13), transparent 68%),
    linear-gradient(180deg, rgba(242, 246, 244, .055), rgba(242, 246, 244, .018));
}
/* Kmen. Prubezny pres cely panel a na obou koncich do ztracena, aby cetl
   jako spolecna linka, ktera pokracuje dal, ne jako svisly oddelovac mezi
   dvema sloupci. */
.mkt-journeys::before {
  content: '';
  position: absolute; top: 14px; bottom: 14px;
  left: var(--jrn-trunk-x);
  width: 2px; z-index: 1;
  background: linear-gradient(180deg,
    rgba(217, 175, 102, 0) 0%,
    rgba(217, 175, 102, .72) 7%,
    rgba(217, 175, 102, .72) 93%,
    rgba(217, 175, 102, 0) 100%);
}
.mkt-journey {
  position: relative;
  display: grid;
  grid-template-columns: var(--jrn-col) minmax(0, 1fr);
  column-gap: var(--jrn-gap);
  align-items: start;
  padding: 22px 0;
}
.mkt-journey + .mkt-journey { border-top: 1px solid var(--hairline-soft); }

/* Nazev oboru je zarovnany doprava, tedy ke kmeni: ctyri ruzne dlouhe nazvy
   pak maji spolecnou hranu prave tam, kde se napojuji na engine. */
.mkt-journey-head { text-align: right; padding-top: 13px; }
.mkt-journey-head h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.mkt-journey-meta { margin-top: 4px; font-size: .8125rem; color: var(--ink-faint); }

/* Vedouci obor. Jediny odstupnovany prvek je VELIKOST pisma a sytost koleje,
   zadny dalsi system zvyrazneni: poradova cisla a znacky zacatku a konce uz
   nesou vlastni vyznam a tri prekryvne systemy delaji sum. */
.mkt-journey--lead { --jrn-rail: rgba(217, 175, 102, .82); }
.mkt-journey--lead .mkt-journey-head h3 { font-size: 1.1875rem; }
.mkt-journey--lead .mkt-journey-label { font-size: .9375rem; }

.mkt-journey-steps {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  /* minmax(0, 1fr) na kazdy krok: pocet kroku se lisi (dnes 4 az 5) a sirka
     se dopocitava, takze pridany obor ani delsi nazev nic neposune. */
  grid-auto-columns: minmax(0, 1fr);
  margin: 0; padding: 19px 0 0; list-style: none;
}
/* Odbocka z kmene k prvni znacce. 2px a plna zlata, aby bylo videt, ze vetev
   z kmene VYCHAZI, ne ze ho jen krizi. */
.mkt-journeys .mkt-journey-steps::before {
  content: '';
  position: absolute; top: 4px;
  left: calc(var(--jrn-gap) / -2); width: calc(var(--jrn-gap) / 2); height: 2px;
  background: var(--mkt-gold);
}
.mkt-journey-steps li {
  position: relative;
  display: flex; align-items: baseline; gap: 7px;
  padding-right: 14px;
  min-width: 0;
}
/* Svisla znacka kroku. Merizko, ne kolecko: kolecka na care uz na strance
   drzi .mkt-chain a druhy vyskyt by cetl jako tataz komponenta znovu. */
.mkt-journey-steps li::before {
  content: '';
  position: absolute; left: 0; top: -15px;
  width: 1px; height: 11px;
  background: var(--jrn-rail);
}
.mkt-journey-steps li::after {
  content: '';
  position: absolute; left: 0; right: 0; top: -15px; height: 1px;
  background: var(--jrn-rail);
}
/* Posledni krok usek koleje nema, jinak by cara pretekla za konec cesty. */
.mkt-journey-steps li:last-child::after { content: none; }
/* Zacatek a konec cesty. Vyssi a plna zlata znacka: na prvni pohled je videt,
   kde sled zacina a kde konci, i kdyz maji obory ruzne moc kroku. */
.mkt-journey-steps li:first-child::before,
.mkt-journey-steps li:last-child::before {
  width: 2px; height: 15px; top: -15px;
  background: var(--mkt-gold);
}
.mkt-journey-n {
  flex: none;
  font-family: var(--font-mono);
  font-size: .75rem; font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.mkt-journey-label {
  font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--ink);
  /* Zadny nowrap: pri delsim nazvu kroku se ma popisek zalomit uvnitr sveho
     sloupce, ne rozhodit sirku vetve. */
  overflow-wrap: anywhere;
}

/* Do 940 px se sloupec s nazvem nevejde: 190 px nazvu a 34 px odstupu bere
   z 644 px vnitrni sirky panelu tretinu a na "Ready for pickup" zbyva 85 px,
   tedy tri radky. Nazev jde proto nad vetev, kmen se posune k levemu okraji
   panelu a kroky dostanou celou sirku (123 px na krok pri 768 px). Pasmo
   plati do 721 px, niz uz je vetev ve sloupci. */
@media (max-width: 940px) {
  .mkt-journeys {
    /* Kmen 25 px od okraje panelu, vetev zacina na 46 px (24 px panelu +
       22 px radku), odbocka je tedy --jrn-gap / 2 = 21 px dlouha a presne
       navazuje na kmen. */
    --jrn-gap: 42px;
    --jrn-pad-x: 24px;
    --jrn-trunk-x: 25px;
    padding: 24px var(--jrn-pad-x) 26px;
  }
  .mkt-journey {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 22px;
  }
  .mkt-journey-head {
    display: flex; align-items: baseline; gap: 10px;
    text-align: left; padding-top: 0;
  }
  .mkt-journey-meta { margin-top: 0; }
}

/* 720 px, ne drivejsich 560 px: pri 561 px ma bunka kroku 89 px, z toho ale
   28 px bere poradove cislo a odstup, takze na popisek zbyva 61 px a
   "Documents" (78 px) se lamalo uprostred slova, protoze popisek ma
   overflow-wrap: anywhere. Pri 721 px ma bunka 114 px, popisek 86 px a
   nejdelsi slovo sazby se vejde cele. Pod tim se vetev otoci do
   sloupce; kolej se pak nekresli zvlast, jeji roli prebira prubezny kmen a
   kazdy krok se na nej napojuje vodorovnou znackou. */
@media (max-width: 720px) {
  /* Kmen 19 px od okraje panelu, text vetve na 40 px (18 px panelu + 22 px
     radku): na znacku zbyva 15 px a 4 px mezera pred popiskem. */
  .mkt-journeys { --jrn-pad-x: 18px; --jrn-trunk-x: 19px; padding: 20px var(--jrn-pad-x) 24px; }
  .mkt-journey { padding-left: 22px; }
  .mkt-journey-steps {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    row-gap: 9px;
    padding-top: 12px;
  }
  .mkt-journeys .mkt-journey-steps::before { content: none; }
  .mkt-journey-steps li { padding-right: 0; }
  .mkt-journey-steps li::after { content: none; }
  .mkt-journey-steps li::before,
  .mkt-journey-steps li:first-child::before,
  .mkt-journey-steps li:last-child::before {
    top: .58em; left: -19px;
    width: 15px; height: 1px;
  }
  .mkt-journey-steps li:first-child::before,
  .mkt-journey-steps li:last-child::before { height: 2px; background: var(--mkt-gold); }
}

/* Cely obsah ukazky je OBRAZ, ne stranka k ovladani: bez tohohle rolovani
   kolečkem nad telefonem nikam nevedlo (udalost spadla do <iframe>, ne do
   stranky). Tyka se i obalu snimku, nejen samotneho ramu. */
.mkt-stage-slides,
.mkt-stage-slide,
.kf-phone-screen > iframe { pointer-events: none; }

/* Prepinac jazyka v navigaci: dve vlajky v jedne pilulce. Drobny a tichy, je
   to sluzba pro toho, kdo jazyk potrebuje, ne nabidka, kterou by mel kazdy
   zvazovat - proto neaktivni jazyk jen ztlumeny, ne barevne kricici. */
.mkt-lang {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
}
.mkt-lang-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  /* Ztlumeni delá pruhlednost i odbarveni naraz: samotna pruhlednost nechala
     cervenou v obou vlajkach porad kricet. */
  opacity: .5;
  filter: saturate(.55);
  transition: opacity .15s ease, filter .15s ease;
}
.mkt-lang-opt:hover { opacity: .85; filter: saturate(.9); }
.mkt-lang-opt.is-current {
  opacity: 1;
  filter: none;
  /* Bezici jazyk pozna i ten, kdo barvy nerozlisuje: nese prsten, ne jen jas. */
  box-shadow: 0 0 0 2px var(--mkt-gold);
}
.mkt-flag { width: 20px; height: 20px; display: block; clip-path: circle(50%); }

/* V mobilni navigaci stoji vlajky pod sebou s nazvem jazyka: je tam misto
   a jmeno jazyka je jednoznacnejsi nez vlajka. */
.mkt-lang--mobile { display: flex; gap: 14px; border: 0; padding: 0; }
.mkt-lang--mobile .mkt-lang-opt {
  width: auto; height: auto; gap: 8px;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
}
.mkt-lang--mobile .mkt-lang-opt.is-current { box-shadow: inset 0 0 0 1px var(--mkt-gold); }

/* ── Pravni stranky (view/marketing/legal.latte) ──────────────────────────
   Prosty dokument: uzsi sloupec nez sekce webu (ctou se odstavce, ne karty),
   clanky cislovane v textu nadpisu, odrazky s odsazenim. Barvy a pismo
   dedi z desky, aby stranka byla pokracovanim webu, ne cizim dokumentem. */
.mkt-legal-doc { max-width: 820px; }
.mkt-legal-head { margin-bottom: 40px; }
.mkt-legal-head h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 16px; }
.mkt-legal-meta { font-size: .875rem; color: var(--ink-faint); margin: 12px 0 0; }
.mkt-legal-part + .mkt-legal-part { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--hairline); }
.mkt-legal-part h2 { font-size: 1.5rem; margin: 0 0 24px; }
.mkt-legal-article + .mkt-legal-article { margin-top: 32px; }
.mkt-legal-article h3 { font-size: 1.125rem; margin: 0 0 10px; color: var(--ink); }
.mkt-legal-article p, .mkt-legal-article li { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 12px; }
.mkt-legal-article ul { margin: 0 0 12px; padding-left: 22px; }
.mkt-legal-article li { margin-bottom: 6px; }

/* Hlavicka pravni stranky nema mobilni nabidku (marketing.js se nenacita),
   takze odkazy a prepinac jazyka zustavaji videt a jen se zalomi. */
@media (max-width: 720px) {
  .mkt-nav--simple .mkt-nav-inner { flex-wrap: wrap; row-gap: 12px; }
  .mkt-nav--simple .mkt-nav-links, .mkt-nav--simple .mkt-nav-actions { display: flex; flex-wrap: wrap; }
  .mkt-nav--simple .mkt-nav-links { width: 100%; order: 3; gap: 0 18px; }
}

/* Potvrzeni po smazani uctu na domovske strance (jediny stav z adresy). */
.mkt-notice {
  max-width: var(--container); margin: 20px auto 0; width: 100%;
  padding: 14px var(--mkt-pad-x);
  color: var(--ink); font-weight: 600;
}
.mkt-notice::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mkt-gold); margin-right: 10px; vertical-align: middle; }
@media (max-width: 720px) { .mkt-notice { padding: 14px var(--mkt-pad-x-sm); } }