/* ============================================================
   Parťák na web — obsahové stránky (SEO/GEO vrstva)
   Ice-paper canvas · royal blue · ink — stejný vizuální jazyk
   jako landing v5, ale samostatný soubor.

   Proč vlastní soubor a ne rozšíření landing-v5.css:
   landing-v5.css je vlastněný layoutem landing page a jeho
   fingerprint hlídá public-launch.spec.mjs. Sdílení by z každé
   textové úpravy obsahové stránky dělalo změnu landingu.
   ============================================================ */

:root {
  --bg: #f7fbff;
  --paper: #ffffff;
  --ink: #050914;
  --text: #1d2740;
  --muted: #61708e;
  --line: #dfe7f4;
  --line-strong: #cdd8ec;
  --blue: #053df4;
  --blue-2: #002cc8;
  --blue-soft: #edf3ff;
  --mint: #22d6a3;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-sm: 0 10px 28px rgba(7, 18, 36, .07);
  --shadow: 0 30px 90px rgba(7, 18, 36, .13);
}

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: rgba(5, 61, 244, .16); color: var(--ink); }
:focus-visible { outline: 3px solid rgba(5, 61, 244, .4); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 120;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 12px; }

/* ---------- type primitives ---------- */
.eyebrow {
  margin-bottom: 18px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.display {
  color: var(--ink);
  font-size: clamp(2.15rem, 4.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: balance;
}
.display em {
  font-family: var(--serif);
  font-size: 1.05em;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--blue);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, #0646ff, #002fe3);
  color: #fff;
  box-shadow: 0 18px 42px -12px rgba(5, 61, 244, .52);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #1456ff, #0027c4);
  box-shadow: 0 22px 48px -12px rgba(5, 61, 244, .58);
}

.btn-secondary {
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 12px 28px rgba(16, 24, 39, .05);
}
.btn-secondary:hover { border-color: var(--blue); background: #fff; }

.btn-white {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 22px 54px -16px rgba(2, 8, 40, .55);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .44);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ============================================================
   HEADER — shodný s landing page
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(247, 251, 255, .86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.brand span { color: var(--blue); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.login-link { padding: 10px 6px; font-size: .95rem; font-weight: 600; color: var(--text); }
.login-link:hover { color: var(--blue-2); }
.btn-header { min-height: 44px; padding: 0 18px; border-radius: 9px; font-size: .93rem; }

/* ============================================================
   ARTICLE HEAD
   ============================================================ */
.doc-head {
  padding: clamp(46px, 6vw, 78px) 0 clamp(34px, 4vw, 52px);
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(5, 61, 244, .08), transparent 62%),
    linear-gradient(180deg, #ffffff, #f4f9ff);
  border-bottom: 1px solid var(--line);
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
}
.breadcrumb a:hover { color: var(--blue-2); }
.breadcrumb span[aria-hidden] { color: var(--line-strong); }
.breadcrumb [aria-current] { color: var(--ink); }

.doc-head .display { max-width: 17ch; }
.doc-lead {
  max-width: 62ch;
  margin-top: 22px;
  color: var(--text);
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.62;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 28px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Krátká odpověď hned nahoře. AI enginy váží prvních ~200 slov
   nejvíc a citují extrahovatelné pasáže, ne rozjezd. */
.answer-box {
  max-width: 74ch;
  margin-top: 32px;
  padding: 24px 28px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.answer-box p { max-width: none; }
.answer-box p + p { margin-top: 12px; }
.answer-box strong { color: var(--ink); }

/* Video k článku. Poměr drží `aspect-ratio`, ne padding-top trik — jinak by
   bylo potřeba wrapper navíc a přehrávač by při načtení skákal.

   Přehrávač je youtube-nocookie.com: běžný youtube.com sype cookies už při
   načtení stránky, což by embed zatáhlo do souhlasu. `frame-src` v nginx.conf
   pouští **jen tenhle** host — bez toho se iframe nenačte vůbec a na stránce
   zůstane díra, kterou nic v markupu nevysvětlí. */
.doc-video { max-width: 74ch; margin-top: 32px; }
.doc-video-frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-sm);
}
.doc-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.doc-video figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

/* Svislá varianta pro Shorty. Šířka je omezená, protože 9:16 přes celý sloupec
   by na desktopu zabralo víc než celou obrazovku na výšku a text kolem videa
   by se rozpadl na dva vzdálené kusy. */
.doc-video--vertical { max-width: 340px; }
.doc-video--vertical .doc-video-frame { aspect-ratio: 9 / 16; }

/* ============================================================
   BODY LAYOUT — prose + sticky obsah
   ============================================================ */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 56px;
  align-items: start;
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(56px, 7vw, 92px);
}

.doc-toc {
  position: sticky;
  top: 100px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  font-size: .92rem;
}
.doc-toc p {
  margin-bottom: 12px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.doc-toc ol { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; counter-reset: toc; }
.doc-toc a { color: var(--text); font-weight: 600; line-height: 1.4; }
.doc-toc a:hover { color: var(--blue-2); }

.prose { max-width: 74ch; min-width: 0; }
.prose > * + * { margin-top: 22px; }
.prose h2 {
  margin-top: clamp(48px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.16;
  scroll-margin-top: 96px;
}
.prose h3 {
  margin-top: 34px;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.012em;
}
.prose p { max-width: 72ch; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a:not(.btn) {
  color: var(--blue-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.prose a:not(.btn):hover { color: var(--blue); }

.prose ul, .prose ol { padding-left: 0; margin-left: 0; list-style: none; display: grid; gap: 12px; }
.prose ul > li {
  position: relative;
  padding-left: 28px;
  max-width: 70ch;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.prose ol { counter-reset: step; }
.prose ol > li {
  position: relative;
  padding-left: 38px;
  max-width: 70ch;
  counter-increment: step;
}
.prose ol > li::before {
  content: counter(step);
  position: absolute;
  top: .1em;
  left: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--blue-soft);
  color: var(--blue-2);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
}

.prose code {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--blue-2);
  font-family: var(--mono);
  font-size: .86em;
}

/* Kód, který si čtenář kopíruje, musí být na vlastním řádku a nesmí se
   zalomit uprostřed atributu — proto scroll, ne wrap. */
.prose pre {
  margin: 20px 0;
  padding: 16px 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}
.prose pre code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: inherit;
  white-space: pre;
}

.prose blockquote {
  margin: 0;
  padding: 18px 24px;
  border-left: 3px solid var(--mint);
  background: var(--paper);
  border-radius: 0 12px 12px 0;
  color: var(--text);
}

/* Tabulky jsou pro AI enginy nejlépe extrahovatelný formát. */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.prose caption {
  padding: 16px 20px 0;
  color: var(--muted);
  font-size: .86rem;
  text-align: left;
}
.prose th, .prose td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  color: var(--ink);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.prose tbody th { color: var(--ink); font-weight: 700; }
.prose tbody tr:last-child th, .prose tbody tr:last-child td { border-bottom: 0; }
.prose td.yes { color: #0b7a58; font-weight: 700; }
.prose td.no { color: #a4536b; font-weight: 600; }

/* ---------- karty ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.card {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0 0 8px; font-size: 1.06rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.card .card-kicker {
  margin-bottom: 12px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
a.card { display: block; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
a.card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---------- FAQ ---------- */
.faq-block { display: grid; gap: 10px; margin-top: 26px; }
.faq-block details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.faq-block summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--blue); transition: transform .2s var(--ease); }
.faq-block details[open] summary svg { transform: rotate(45deg); }
.faq-block details > div { padding: 0 22px 20px; }
.faq-block details p { max-width: 68ch; color: var(--text); }
.faq-block details p + p { margin-top: 12px; }

/* ---------- poznámka / disclaimer ---------- */
.note {
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--text);
  font-size: .95rem;
}
.note strong { color: var(--ink); }

/* ============================================================
   CTA BAND
   ============================================================ */
/* Mid-article next step. Every content page used to carry exactly one route to
   the product, sitting at 91-99 % of the text — past the point most readers
   reach. This block sits where the article has just answered the question the
   reader arrived with, so the offer is the natural continuation of the sentence
   before it rather than an interruption. Deliberately quieter than .doc-cta and
   visually distinct from .note, which carries caveats. */
.next-step {
  margin: 30px 0;
  padding: 18px 22px 20px;
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, var(--blue-soft), transparent 92%);
}
.next-step p { margin: 0; max-width: 62ch; }
.next-step p + p { margin-top: 10px; }
.next-step strong { color: var(--ink); }
.next-step .next-step-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-weight: 640;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--ease), gap .18s var(--ease);
}
.next-step .next-step-go:hover,
.next-step .next-step-go:focus-visible {
  border-bottom-color: currentColor;
  gap: 11px;
}
.next-step .next-step-go svg { width: 17px; height: 17px; flex: none; }
.next-step .next-step-note {
  margin-top: 8px;
  font-size: .86rem;
  color: var(--muted);
}

.doc-cta {
  padding: clamp(56px, 7vw, 88px) 0;
  background: linear-gradient(160deg, #04102f 0%, #061c58 55%, #052ea8 100%);
  color: #fff;
  text-align: center;
}
.doc-cta h2 {
  max-width: 20ch;
  margin-inline: auto;
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.1;
  text-wrap: balance;
}
.doc-cta h2 em {
  font-family: var(--serif);
  font-size: 1.05em;
  font-style: italic;
  font-weight: 800;
  color: #9ec2ff;
}
.doc-cta p { max-width: 56ch; margin: 20px auto 0; color: rgba(255, 255, 255, .78); }
.doc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}
.doc-cta-micro {
  margin-top: 24px;
  color: rgba(255, 255, 255, .6);
  font-size: .88rem;
}

/* ---------- související stránky ---------- */
.related { padding: clamp(48px, 6vw, 76px) 0; background: var(--paper); border-top: 1px solid var(--line); }
.related h2 {
  margin-bottom: 24px;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ============================================================
   FOOTER — shodný s landing page
   ============================================================ */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 34px 0;
}
.brand-footer { font-size: 1.16rem; }
.footer-inner p { color: var(--muted); font-size: .92rem; }
.footer-identity { display: grid; gap: 3px; }
.footer-identity a { color: var(--ink); font-weight: 700; }
.footer-identity a:hover { color: var(--blue-2); }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: .93rem; font-weight: 600; color: #4d5a78; }
.footer-inner nav a:hover { color: var(--blue-2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc-toc {
    position: static;
    order: -1;
    margin-bottom: 38px;
  }
}

@media (max-width: 760px) {
  .wrap { width: min(1180px, 100% - 32px); }
  .login-link { display: none; }
  .doc-head .display { max-width: none; }
  .answer-box { padding: 20px 20px; }
  .prose th, .prose td { padding: 12px 14px; }
  .doc-cta-actions .btn { width: 100%; }
}

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

/* ─────────────────────────────────────────────────────────────────────────
   The consent bar next to the widget.

   Copied verbatim from landing-v5.css, and a test holds the two byte-equal
   (`tests/consent-widget-block.test.mjs`). It reads like something that
   belongs in analytics-consent.css, which both page families load — but that
   file is byte-frozen: privacy.html is an immutable legal version under ADR
   0044 and names the stylesheet by content hash, so changing the stylesheet
   would demand a new version of the privacy policy. A duplicated block with a
   guard is the cheaper of the two prices.
   ───────────────────────────────────────────────────────────────────────── */
/* ── consent bar + widget: shared block, see landing-v5.css ─────────────── */
/* `body ` on every selector is load order made irrelevant: the home page links
   landing-v5.css after analytics-consent.css and would win on order alone,
   while the content pages link content.css before it and lost — measured
   26. 8. 2026, the bar came back to the middle of the screen and sat on the
   launcher. One block, two link orders, so it wins on specificity instead. */

body .analytics-consent {
  left: 18px;
  right: auto;
  bottom: 18px;
  display: block;
  width: min(408px, calc(100vw - 36px));
  max-width: none;
  margin: 0;
  padding: .82rem .88rem .88rem;
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(15, 25, 48, .18);
  font-size: .82rem;
  line-height: 1.4;
}
body .analytics-consent strong { margin-bottom: .12rem; font-size: .9rem; line-height: 1.25; }
body .analytics-consent p { max-width: none; }
body .analytics-consent a { display: inline-block; padding: 12px 0; margin: -12px 0; font-size: .75rem; font-weight: 750; }
body .analytics-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: .68rem;
}
body .analytics-consent button { min-height: 44px; padding: .55rem .65rem; font-size: .8rem; }

/* Two bottom-anchored panels at once is one too many — but the widget IS the
   product, and hiding it at every width meant a first-time visitor met this
   page with nothing to try. Measured 26. 8. 2026: `#partak-widget` was
   `visibility:hidden` until the consent choice was made, while "Vyzkoušet
   živě" still reported "Parťák je otevřený."

   So the rule now costs only what it must. The closed launcher is centred and
   the bar is 408px from the left edge, so below 1100px they would sit on top
   of each other and the bar yields nothing — there the widget still waits.
   Above it both fit, and the bar stays clickable even when the sheet is open,
   because the sheet only reaches the bar's right end. `landing-v5.js` keeps
   the CTA honest at every width by reading the host's computed visibility. */
@media (max-width: 1149px) {
  body:has([data-analytics-consent]) #partak-widget,
  body:has([data-analytics-consent]) .widget-guide {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* 1149 is measured, not chosen: the closed launcher is 296px wide and centred,
   so its left edge sits at (viewport - 296) / 2, and the bar ends at 426px
   (18px inset + a 408px card). At 1150px the launcher starts at 427 and the
   two stop touching; at 1148px it starts at 426 and they overlap.

   Above that the launcher clears the bar, but the open sheet does not: it is
   centred and far wider, so it reaches back over the bar's right-hand button.
   Measured at 1120px and 1160px — "Povolit analytiku" was covered by
   `#partak-widget` and `elementFromPoint` returned the widget, meaning a
   visitor could not give or refuse consent while the sheet was open.

   So the bar wins the stacking order for as long as it is up. It is the one
   thing on the page that must stay answerable, it costs the sheet only its
   lower-left corner, and unlike a breakpoint tuned to today's sheet width it
   cannot drift when the widget changes. The widget host ships
   `z-index: 2147483647`; one below is still above every layer this page has. */
body:has([data-analytics-consent]) #partak-widget {
  z-index: 2147483646 !important;
}
body:has([data-analytics-consent]) .analytics-consent {
  z-index: 2147483647;
}

@media (max-width: 700px) {
  body .analytics-consent {
    left: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    padding: .76rem .78rem .8rem;
  }
}
/* ── end shared block ──────────────────────────────────────────────────── */

/* ============================================================
   Žádost o ukázku
   ------------------------------------------------------------
   Do 9. 9. 2026 tenhle blok žádné vlastní styly neměl: formulář
   na /ukazka byl `.answer-box` s holými `<label>` a `<input>`,
   takže na 390 px seděl popisek a pole na jednom řádku a pole
   bylo useknuté. Změřeno na iPhonu 13 ve WebKitu proti produkci.

   Dvě čísla jsou tu záměrně a nesnižovat je:
   - `font-size: 16px` na poli. Cokoli menšího a Safari na iOS
     při fokusu přiblíží celou stránku a už ji nevrátí zpět.
   - `min-height: 54px`, stejně jako `.btn`. Palec není myš.
   ============================================================ */

.lead {
  margin: 28px 0 0;
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.lead-form {
  display: grid;
  gap: 16px;
}

.lead-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.lead-field label {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
}

.lead-field input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.lead-field input::placeholder { color: #9fadc6; }

.lead-field input:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(5, 61, 244, .14);
}

.lead-field input:user-invalid {
  border-color: #d5453b;
  box-shadow: 0 0 0 4px rgba(213, 69, 59, .12);
}

.lead-form .btn { width: 100%; }

.lead-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

.lead-note strong { color: var(--ink); }

/* Od tabletu výš se to složí do jednoho řádku: dvě pole a tlačítko.
   Tři terče vedle sebe se na 390 px nevejdou čitelně, proto až tady. */
@media (min-width: 720px) {
  .lead-form {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 14px;
  }
  .lead-form .btn { width: auto; }
}