/* Průvodce nastavením ústředny.

   Vzhled se drží firemního webu plan-c.cz (kontrakt: `claudedocs/plan-c-design.md`)
   -- zákazník sem přichází rovnou z webu a nemá poznat, že přešel do jiné aplikace.
   Rozvržení je ale vlastní: tohle je jednorázový formulář, který člověk vyplňuje
   jednou v životě a často na telefonu. Proto jeden sloupec, velká klikací plocha
   a návod nad polem -- ne vedle.

   Mobile-first: základní pravidla jsou pro úzké okno, `@media (min-width: …)`
   jen přidává sloupce. */

/* Písmo je vendorované, ne z Google Fonts: průvodce běží za tunelem a třetí
   strana v kritické cestě renderu tam nemá co dělat. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("font/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("font/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #F7F4EE;
  --surface: #FFFFFF;
  --surface-sunk: #F0EDE6;
  --line: rgba(43, 42, 38, 0.14);
  --line-soft: rgba(43, 42, 38, 0.08);

  --ink: #2B2A26;
  --ink-soft: #5C584F;
  --ink-faint: #6F6B60;

  /* --accent je plocha, pod kterou se nic nečte: bílý text na něm má 3,97:1.
     Všechno, co nese text, bere --accent-dark (6,5:1). Totéž jantarová. */
  --accent: #17916A;
  --accent-dark: #136B50;
  --accent-wash: #E9F2EC;
  --accent-wash-soft: #F4F9F6;
  --accent-line: #BFE6D4;

  --ok: #136B50;
  --warn: #B4741B;
  --warn-dark: #8A5713;
  --bad: #B3402C;
  --bad-wash: #FBEEEA;

  --radius-card: 20px;
  --radius-control: 12px;
  --radius-pill: 999px;

  --font: "Figtree", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Nejmenší klikací plocha na dotyk. Není to jen u tlačítek -- i „upravit“
     ve shrnutí nebo tečka postupu se mačká prstem. */
  --tap: 44px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  overflow-wrap: break-word;
}
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: 0.92em; }
.breakable { overflow-wrap: anywhere; }
/* `hidden` je atribut, ne návrh: bez tohohle ho přebije každé `display` v
   pravidle níž a blok, který se má ukázat teprve po akci, svítí od začátku. */
[hidden] { display: none !important; }

.skip {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 60;
  padding: 0.65rem 1.1rem; border-radius: var(--radius-pill);
  background: var(--accent-dark); color: #fff; font-weight: 700;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---- hlavička a patička ---- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.4rem 1rem;
  padding: 0.6rem 1.1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.znacka { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.znacka-c { color: var(--accent-dark); }
.top .who { color: var(--ink-faint); font-size: 0.86rem; text-align: right; }
.top a, .top button.link {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
}
.bottom {
  padding: 1.5rem 1.1rem max(1.5rem, env(safe-area-inset-bottom));
  color: var(--ink-faint);
  font-size: 0.84rem;
  text-align: center;
}
.bottom p { margin: 0 auto; max-width: 34rem; }

main { padding: 1.1rem; }
@media (min-width: 48rem) { main { padding: 1.6rem 1.5rem; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.25rem;
}
@media (min-width: 48rem) { .panel { padding: 1.75rem; } }
.panel.narrow { max-width: 34rem; margin: 1.5rem auto; }

/* Web sází nadpisy velké a těsné; tady je to nadpis kroku v kartě, ne hero,
   takže spodní hranice je nižší než na webu. */
h1 {
  font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 0.4rem;
}
h2 {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--accent-dark);
  margin: 1.5rem 0 0.5rem;
}
.zvyrazneni { color: var(--accent-dark); }
.lead { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: 1.05rem; }
.hint { color: var(--ink-faint); font-size: 0.88rem; margin: 0.3rem 0; }
.err { color: var(--bad); font-size: 0.88rem; font-weight: 600; margin: 0.35rem 0 0; }
.opt { color: var(--ink-faint); font-weight: 400; font-size: 0.8rem; }
/* Tentýž štítek nad nadpisem; `.stitek` je jeho jméno na úvodní obrazovce. */
.eyebrow, .stitek {
  display: inline-block; padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--accent-wash); color: var(--accent-dark);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- rozvržení průvodce ---- */
.layout { display: grid; gap: 1rem; max-width: 62rem; margin: 0 auto; }
/* Bez tohohle by se položka mřížky roztáhla na šířku svého nejširšího obsahu
   (výchozí `min-width: auto`) a široká tabulka by vystrčila celou stránku. */
.layout > *, .stack-wide > * { min-width: 0; }
@media (min-width: 60rem) {
  .layout { grid-template-columns: 16rem 1fr; align-items: start; }
}

/* Postranice kroků. Na úzkém okně je z ní ukazatel postupu: řádek „Krok 3 ze 7“
   a pod ním jedna řada číslovaných teček, které se vejdou bez vodorovného
   posuvníku a zůstávají proklikatelné. Názvy kroků zmizí jen z obrazu, ne z
   dokumentu -- odkaz si je nechává jako přístupný popis. Od 60rem se z toho
   stane sticky sloupec s názvy. */
.rail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 0.85rem 1rem;
}
.rail-stav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; }
.rail-nazev { font-weight: 700; font-size: 0.95rem; }
.rail ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0.15rem;
}
.rail li a, .rail li > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--tap);
  border-radius: var(--radius-control);
  color: var(--ink-faint); font-size: 0.9rem;
}
.rail-titul {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.rail .num {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rail .done .num { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-dark); }
.rail .here .num { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; }
.rail .locked > * { opacity: 0.4; }

@media (min-width: 60rem) {
  .rail { position: sticky; top: 1.5rem; }
  .rail-nazev { display: none; }
  .rail ol { grid-auto-flow: row; grid-auto-columns: auto; gap: 0.1rem; }
  .rail li a, .rail li > span {
    flex-direction: row; justify-content: flex-start; gap: 0.6rem;
    padding: 0.45rem 0.6rem;
  }
  .rail-titul { position: static; width: auto; height: auto; clip-path: none; white-space: normal; }
  .rail li a:hover { background: var(--accent-wash-soft); color: var(--ink); text-decoration: none; }
  .rail .done > * { color: var(--ink-soft); }
  .rail .here > * { background: var(--accent-wash); color: var(--ink); font-weight: 700; }
}

/* ---- návod ---- */
.navod { border-left: 2px solid var(--accent-line); padding-left: 0.9rem; margin: 0 0 1.5rem; }
.navod > h2:first-child { margin-top: 0; }
.navod p { margin: 0.4rem 0; color: var(--ink-soft); }
.postup { margin: 0.4rem 0; padding-left: 1.2rem; color: var(--ink-soft); }
.postup li { margin: 0.4rem 0; }
.vybava { list-style: none; margin: 0.4rem 0; padding: 0; }
.vybava li { margin: 0.4rem 0; color: var(--ink-soft); font-size: 0.94rem; }
.vybava strong { color: var(--ink); }
.poznamka {
  margin-top: 1rem; padding: 0.85rem 1rem;
  background: var(--accent-wash-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-control);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Odhad ceny a podobná čísla, na která se má zákazník podívat dřív než na text. */
.cenovka {
  margin: 0.9rem 0; padding: 1rem 1.1rem;
  background: var(--accent-wash-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-card);
  color: var(--ink-soft);
}
.cenovka > strong {
  display: block;
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.2;
}
.cenovka p { margin: 0.2rem 0 0; font-size: 0.94rem; }

/* ---- formulář ---- */
.stack { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.3rem; }
.field > label { font-weight: 700; font-size: 0.94rem; }
/* Podle typu, který se má stylovat, ne podle vypsaného seznamu: `<input>` bez
   atributu `type` je taky textové pole a v části pro obsluhu se tak píše.
   Výjimky jsou v `:where()`, aby výchozí vzhled pole nepřebil chybový stav. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])) {
  width: 100%;
  min-height: var(--tap);
  padding: 0.6rem 0.8rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink);
  font-family: inherit;
  /* 16px doslova: menší písmo si iOS Safari při fokusu přizoomuje. */
  font-size: 16px;
}
input::placeholder { color: var(--ink-faint); }
input:focus { border-color: var(--accent); outline-offset: 1px; }
.field.bad input { border-color: var(--bad); background: var(--bad-wash); }

/* Tajemství s tlačítkem Zobrazit. Tlačítko je součástí rámečku pole, ne
   plovoucí vrstva nad ním: dřív si na 390px dlouhý `sk-…` klíč a odsazení
   pro tlačítko lezly do sebe. Takhle si každý bere svoje místo. */
.secret {
  display: flex; align-items: stretch;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.secret:focus-within { border-color: var(--accent); }
.secret input { flex: 1 1 auto; min-width: 0; background: none; border: 0; }
.secret input:focus { outline: none; }
.field.bad .secret { border-color: var(--bad); background: var(--bad-wash); }
.peek {
  flex: none;
  min-height: var(--tap); padding: 0 0.85rem;
  background: none; color: var(--ink-soft);
  border: 0; border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  font-size: 0.88rem; font-weight: 600;
}
.peek:hover { background: var(--accent-wash-soft); color: var(--accent-dark); filter: none; }
.peek[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-dark); }

.radios { display: grid; gap: 0.5rem; }
.radio, .check {
  display: flex; align-items: flex-start; gap: 0.65rem;
  min-height: var(--tap);
  padding: 0.7rem 0.85rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.radio:hover, .check:hover { border-color: var(--accent-line); background: var(--accent-wash-soft); }
.radio input, .check input {
  margin-top: 0.25rem; flex: none;
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--accent);
}
.radio:has(input:checked), .check:has(input:checked) {
  border-color: var(--accent); background: var(--accent-wash);
}

.sluzby { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.sluzby legend { padding: 0; font-weight: 700; font-size: 0.94rem; margin-bottom: 0.4rem; }
.svc span { display: grid; gap: 0.1rem; }
.svc small { color: var(--ink-soft); font-size: 0.86rem; line-height: 1.45; }
.tier {
  display: inline-block; justify-self: start;
  padding: 0.05rem 0.5rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--warn);
  font-size: 0.72rem; font-style: normal; font-weight: 700; letter-spacing: 0.06em;
  color: var(--warn-dark); text-transform: uppercase;
}

/* Hlavní akce je na mobilu na plnou šířku a „Zpět“ pod ní: tlačítko, kterým se
   jde dál, má být tam, kde je palec. Od 40rem se to srovná do řádku. */
.actions {
  display: flex; flex-direction: column-reverse; align-items: stretch;
  gap: 0.6rem; margin-top: 0.4rem;
}
.actions .back {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  color: var(--ink-soft);
}
@media (min-width: 40rem) {
  .actions { flex-direction: row; align-items: center; gap: 0.9rem; }
  .actions .back { margin-right: auto; }
  .actions button { width: auto; }
}

button {
  min-height: var(--tap);
  padding: 0.7rem 1.6rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--accent-dark); color: #fff;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer;
}
/* Ztmavení platí pro primární pilulku; ostatní varianty si hover nesou plochou. */
button:hover { filter: brightness(0.92); }
button.link {
  background: none; border: 0; color: var(--ink-soft);
  padding: 0; font-weight: 400;
}
button.link:hover { background: none; filter: none; text-decoration: underline; }
/* Zrušení pozvánky je jediná akce na té stránce, takže by plná červená
   přebila i to, co si má obsluha přečíst. Nese ji obrys, ne plocha. */
button.danger {
  background: none; color: var(--bad);
  border-color: var(--bad);
  padding: 0.5rem 1.1rem; font-size: 0.94rem;
}
button.danger:hover { background: var(--bad-wash); color: var(--bad); filter: none; }
button.copy {
  background: var(--surface); color: var(--ink);
  border-color: var(--line); font-weight: 700;
}
button.copy:hover { background: var(--surface-sunk); filter: none; }

/* Odkaz, který má být tlačítko (úvodní obrazovka), a tlačítko mimo `.actions`
   (připojení účtu v kroku Hermes). Vypadá jako primární pilulka výš, ale nic
   nedědí: `button` si nebere ani písmo, ani ukazováček. Na mobilu na plnou
   šířku, od 40rem podle obsahu. */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--tap);
  padding: 0.7rem 1.6rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--accent-dark); color: #fff;
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.tlacitko:hover { color: #fff; text-decoration: none; filter: brightness(0.92); }
@media (min-width: 40rem) { .tlacitko { width: auto; } }

/* Připojení účtu u třetí strany: tlačítko, po kterém se objeví kód k opsání.
   Zapuštěný blok, ne karta v kartě -- je to část formuláře kroku. */
.autorizace {
  display: grid; gap: 0.8rem;
  padding: 1rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.autorizace-vyzva { margin: 0; display: flex; }
.autorizace-kod { display: grid; gap: 0.5rem; }
.autorizace-kod p { margin: 0; }

/* Kód se opisuje z obrazovky do telefonu, takže je to největší věc v kroku:
   monospace, prostrkané, tabulkové číslice. Prostrkání přidává mezeru i za
   posledním znakem, takže osu srovnává `text-indent` o stejnou hodnotu.
   Velikost je schválně vázaná na šířku okna a `white-space: nowrap`: kód od
   OpenAI má deset znaků včetně pomlčky a zlomený na dva řádky se opisuje
   hůř než menší, ale celý. */
.kod {
  padding: 0.7rem 0.9rem;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-card);
  color: var(--accent-dark);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.15rem, 5.6vw, 2.1rem); font-weight: 700;
  letter-spacing: 0.18em; line-height: 1.3;
  text-align: center; text-indent: 0.18em;
  white-space: nowrap; overflow-x: auto;
  -webkit-user-select: all; user-select: all;
}

/* Hotový krok. Význam nese znak, ne barva -- kdo barvy nerozliší, vidí ✓. */
.stav-ok {
  position: relative; margin: 0; padding-left: 1.6rem;
  color: var(--ink-soft);
}
.stav-ok::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--ok); font-weight: 800;
}
.stav-ok strong { color: var(--ok); }

/* ---- shrnutí ---- */
/* Popisný seznam, ne tabulka: jsou to páry klíč/hodnota a na 390px se musí
   zlomit pod sebe, což tabulka bez ztráty vlastní semantiky neumí. */
.recap { margin: 0.5rem 0 0; font-size: 0.94rem; }
.recap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "klic akce" "hodnota akce";
  gap: 0.1rem 0.8rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line-soft);
}
.recap-row:first-child { border-top: 0; padding-top: 0; }
.recap dt { grid-area: klic; color: var(--ink-faint); font-weight: 700; font-size: 0.86rem; }
.recap dd { grid-area: hodnota; margin: 0; overflow-wrap: anywhere; }
.recap dd.akce { grid-area: akce; align-self: center; justify-self: end; }
/* Odsazení, ne min-height: klikací plocha má mít 44 px a přitom zůstat
   sazbou na účaří s hodnotou vedle. */
.recap .akce a {
  display: inline-block;
  padding: 0.7rem 0;
  font-size: 0.88rem;
}
@media (min-width: 40rem) {
  .recap-row {
    grid-template-columns: 8rem 1fr auto;
    grid-template-areas: "klic hodnota akce";
    gap: 0.9rem; align-items: baseline;
  }
  .recap dd.akce { align-self: baseline; }
}

.facts { display: grid; gap: 0.15rem 1rem; margin: 0.6rem 0; font-size: 0.94rem; }
.facts dt { color: var(--ink-faint); font-weight: 700; font-size: 0.86rem; }
.facts dd { margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.facts dd:last-child { margin-bottom: 0; }
.facts .big { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 40rem) {
  .facts { grid-template-columns: 11rem 1fr; align-items: baseline; }
  .facts dd { margin-bottom: 0; }
}

/* ---- obsluha ---- */
.stack-wide { display: grid; gap: 1rem; max-width: 62rem; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: flex-end; }
.row .field { flex: 1 1 10rem; min-width: 0; }
.row .narrow-field { flex: 0 0 7rem; }
.row .actions { margin: 0; }
.inline { display: inline; }

/* Šest sloupců se na telefon nevejdou a zúžit je do nečitelna je horší než
   posuvník: tabulka si scrolluje sama, stránka ne. */
.table-wrap { overflow-x: auto; }
.grid { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.92rem; }
.grid th {
  text-align: left; padding: 0.5rem 0.6rem;
  color: var(--ink-faint); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.grid td { padding: 0.6rem; border-bottom: 1px solid var(--line-soft); }
.grid tr:last-child td { border-bottom: 0; }
.grid .empty td { color: var(--ink-faint); text-align: center; padding: 1.6rem; }
.col-actions { text-align: right; white-space: nowrap; }

.pill {
  display: inline-block; padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 700;
  background: var(--surface-sunk); color: var(--ink-soft);
}
/* Jantarová jen jako text: na ploše --warn by bílý popisek měl 3,85:1. */
.pill.ceka { color: var(--warn-dark); }
.pill.rozdelana { background: var(--accent-wash-soft); color: var(--accent-dark); }
.pill.odevzdana { background: var(--accent-wash); color: var(--accent-dark); }
.pill.propadla, .pill.zrusena { background: var(--bad-wash); color: var(--bad); }

.qr-wrap { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.qr {
  background: #fff; padding: 0.6rem; line-height: 0;
  border: 1px solid var(--line); border-radius: var(--radius-control);
  max-width: 100%;
}
.qr svg { max-width: 100%; height: auto; }
.qr-side { flex: 1 1 16rem; min-width: 0; display: grid; gap: 0.7rem; justify-items: start; }
.qr-side p { margin: 0; font-size: 0.9rem; }
.qr-side button { width: 100%; }
@media (min-width: 30rem) { .qr-side button { width: auto; } }

/* ---- úvodní obrazovka ---- */
/* Zákazník sem přijde z QR kódu na pozvánce a je to první věc, kterou z celého
   produktu vidí. Proto jeden hero (nadpis + ukázka hovoru), pod ním dvě karty
   -- stejné bílé panely jako v krocích, aby to na sebe navazovalo -- a jedna
   akce. Rozvržení je jednosloupcové; od 62rem si hero vezme dva sloupce. */
.uvod { display: grid; gap: 1.25rem; max-width: 62rem; margin: 0 auto; }
.uvod > * { min-width: 0; }

.uvod-hero { display: grid; gap: 1.25rem; }
.uvod-hlavicka .stitek { margin: 0 0 0.7rem; }
/* Hero nadpis, tedy velký podle kontraktu -- ne zmenšený jako nadpis kroku. */
.uvod-hlavicka h1 {
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  letter-spacing: -0.03em; line-height: 1.12;
  margin: 0 0 0.8rem;
}
.uvod-lead { margin: 0; max-width: 32rem; color: var(--ink-soft); font-size: 1.05rem; }

@media (min-width: 62rem) {
  .uvod-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2.5rem; align-items: center;
  }
}

/* Ukázka hovoru. Zelená plocha místo bílé: je to obrázek, ne obsah ke čtení,
   a od panelů pod ní se má na první pohled odlišit. `overflow: hidden` je
   pojistka -- prstenec se rozpíná za hranu karty a nemá vystrkovat stránku. */
.uvod-scena {
  display: grid; justify-items: center; gap: 1.1rem;
  padding: 2.25rem 1rem 1.35rem;
  background: var(--accent-wash-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.scena-telefon {
  position: relative; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
}
.scena-ikona { font-size: 1.5rem; line-height: 1; color: var(--accent-dark); }
.prstenec {
  position: absolute; inset: 0;
  border: 1.5px solid var(--accent); border-radius: 50%;
  /* Výchozí stav je průhledný prstenec: kdo má animace vypnuté, nevidí u
     sluchátka nic navíc. Zvonění je dekorace, ne informace. */
  opacity: 0;
}

.scena-bubliny { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; width: 100%; }
.bublina {
  max-width: 88%;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  font-size: 0.9rem; line-height: 1.45;
}
.bublina-volajici {
  justify-self: start;
  background: var(--surface); border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  color: var(--ink-soft);
}
.bublina-agent {
  justify-self: end;
  background: var(--accent-wash); border: 1px solid var(--accent-line);
  border-bottom-right-radius: 5px;
  color: var(--accent-dark);
}
.bublina-agent + .bublina-agent { border-top-right-radius: 5px; }

/* Scénka: telefon zazvoní (0,15--1,85 s), pak se objeví replika volajícího
   (2,1 s) a dvě odpovědi agenta (3,3 s a 4,6 s). Prstence dozvoní v 4,85 s a
   tím to končí -- žádná smyčka, tohle je formulář, ne banner. Čekání nese
   `animation-delay`, ne JavaScript.

   Hýbe se jen `transform` a `opacity`, tedy vlastnosti, které skládá kompozitor
   -- `width` ani `top` by na telefonu trhaly. Bubliny jsou ve výchozím stavu
   vidět (plné krytí, bez posunu) a schovává je jen `backwards` fill po dobu
   čekání; s vypnutými animacemi (`animation: none` níž) tedy prostě zůstanou. */
@keyframes scena-prstenec {
  0%   { opacity: 0; transform: scale(0.6); }
  12%  { opacity: 0.7; }
  70%  { opacity: 0; }
  100% { opacity: 0; transform: scale(2.15); }
}
@keyframes scena-zvoni {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-7deg); }
  35% { transform: rotate(6deg); }
  55% { transform: rotate(-4deg); }
  75% { transform: rotate(3deg); }
}
@keyframes scena-bublina {
  from { opacity: 0; transform: translate3d(0, 0.7rem, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.scena-ikona { animation: scena-zvoni 0.85s ease-in-out 0.15s 2; }
.prstenec { animation: scena-prstenec 1.8s ease-out 0.15s 2; }
.prstenec-2 { animation-delay: 0.7s; }
.prstenec-3 { animation-delay: 1.25s; }
/* Exponenciální dojezd, ne pružina: bublina dosedne a je hotovo. */
.bublina { animation: scena-bublina 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.bublina:nth-child(1) { animation-delay: 1.6s; }
.bublina:nth-child(2) { animation-delay: 2.8s; }
.bublina:nth-child(3) { animation-delay: 4.1s; }

/* Sedm kroků. Kolečka jsou sladěná s postranicí průvodce, ale o něco větší --
   tady nesou číslo v textu, ne klikací tečku. */
.uvod-kroky h2, .uvod-jistoty h2 { margin-top: 0; }
.prehled-kroku { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.prehled-kroku li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem; align-items: start;
}
.prehled-kroku .num {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--accent-line); border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-dark);
  font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.prehled-kroku strong { display: block; line-height: 1.4; }
.prehled-kroku small { display: block; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.5; }

/* Čtyři uklidňující body. Odsazení a zelené odškrtnutí; kartičky by z toho
   udělaly čtyři stejné dlaždice a to už je zeď textu s obrysem. */
.jistoty { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.jistoty li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); font-size: 0.95rem; }
.jistoty strong { color: var(--ink); }
.jistoty li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.5rem;
  width: 0.55rem; height: 0.3rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

@media (min-width: 48rem) {
  .prehled-kroku, .jistoty { grid-template-columns: 1fr 1fr; column-gap: 1.75rem; row-gap: 1rem; }
}

/* Hlavní akce je na mobilu na plnou šířku; pilulku nese `.tlacitko` výš. */
.uvod-akce { margin: 0.25rem 0 0; display: flex; }

@media print {
  body { background: #fff; color: #000; }
  .top, .bottom, .qr-side button, form.inline { display: none; }
  .panel { border-color: #999; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}