/* =====================================================================
   Options Mastery, prodejní stránka.

   Staví na tokenech ze styl.css (ten se načítá první). Nic tady nesmí mít
   napsanou barvu natvrdo, jinak by to v některém ze 64 vzhledů zmizelo.
   ===================================================================== */

/* ---------- Hero ---------- */

.hero {
    position: relative; overflow: hidden;
    background-image: var(--zar);
    padding: clamp(2.8rem, 2rem + 4vw, 5rem) 0 clamp(3rem, 2rem + 5vw, 5.4rem);
    border-bottom: 1px solid var(--okraj);
}
.hero__in {
    position: relative;
    display: grid; gap: clamp(2.2rem, 1rem + 4vw, 3.6rem);
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
}
/* Jeden sloupec i na telefonu smí být užší než ukázka cen. Holé `1fr` má minimum auto,
   takže nezalomitelná tabulka držela sloupec na 336 px a na displeji do 358 px ořízla
   nadpis i perex vpravo. Tabulka se místo toho posune uvnitř .chain__telo. */
@media (max-width: 940px) { .hero__in { grid-template-columns: minmax(0, 1fr); } }

.hero h1 {
    font-size: clamp(2.05rem, 1.2rem + 2.6vw, 2.85rem);
    line-height: 1.1;
    margin: 0 0 1.1rem;
    /* Zalomení určuje <br class="zlom"> v šabloně, ne prohlížeč. `balance` by ho
       přepočítávalo podle šířky textu, a ta se mezi vzhledy liší prokladem písma. */
    text-wrap: initial;
}
/* Pevný zlom platí jen tam, kde se delší věta na řádek vejde. */
/* Pevné zalomení se na úzkém displeji vypíná, jinak by vznikaly krátké osiřelé řádky.
   Větu pak zalamuje prohlížeč a `pretty` mu brání nechat „čeká.“ samotné na posledním
   řádku. Bez něj se to na šířkách 320 až 360 px a kolem 600 px stávalo ve všech
   vzhledech. Nad 720 px platí pevný zlom a `text-wrap: initial` beze změny. */
@media (max-width: 720px) { .zlom { display: none; } .hero h1 { text-wrap: pretty; } }
.hero h1 em { font-style: normal; color: var(--akcent-pismo); }

/* --- dopisování druhé věty nadpisu --- */

.psani { position: relative; display: inline-block; white-space: nowrap; }
/* Neviditelná kopie textu drží místo, takže se při psaní nic pod nadpisem neposouvá. */
.psani__misto { visibility: hidden; }
/* Psaný text leží nad kopií. Nesmí se zalomit, jinak by se přesypal do odstavce pod nadpisem. */
.psani__text {
    position: absolute; left: 0; top: 0;
    text-align: left; white-space: nowrap;
}
/* Kurzor stojí za posledním napsaným znakem. Během psaní svítí, po dopsání bliká. */
.psani__text::after {
    content: ''; display: inline-block;
    width: .055em; height: .78em; margin-left: .08em;
    background: var(--akcent); vertical-align: -.04em;
    animation: om-blik 1.1s steps(1) infinite;
}
.psani__text.je-pise::after { animation: none; }
@keyframes om-blik { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* Na úzkém telefonu se nezalomená věta nevejde, proto je o kousek menší.
   Zmenšuje se jen ona, zbytek nadpisu zůstává. */
@media (max-width: 430px) {
    .psani { font-size: .82em; }
}
.hero__perex {
    font-size: clamp(1.05rem, 1rem + .45vw, 1.22rem);
    line-height: 1.6; color: var(--text-tlumeny); max-width: 54ch;
    margin-bottom: 1.9rem;
}
.hero__akce { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.hero__odkaz { color: var(--text-tlumeny); text-decoration: none; border-bottom: 1px solid var(--okraj-silny); padding-bottom: 2px; }
.hero__odkaz:hover { color: var(--text-vyrazny); }

.hero__fakta {
    display: flex; flex-wrap: wrap; gap: 1.6rem;
    margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--okraj);
}
.hero__fakt { display: flex; flex-direction: column; gap: .15rem; }
.hero__fakt b {
    font-family: var(--font-nadpis); font-size: 1.42rem; color: var(--text-vyrazny);
    font-weight: var(--nadpis-vaha); line-height: 1;
}
.hero__fakt span { font-size: .82rem; color: var(--text-tlumeny); letter-spacing: .02em; }

/* ---------- Ukázka option chain v hero ---------- */

.chain {
    background: var(--karta); border: 1px solid var(--okraj); border-radius: var(--r-l);
    box-shadow: var(--stin); overflow: hidden;
}
.chain__hlava {
    display: flex; align-items: center; gap: .7rem;
    padding: .8rem 1rem; border-bottom: 1px solid var(--okraj); background: var(--karta-2);
    font-family: var(--mono); font-size: .78rem; color: var(--text-tlumeny);
}
.chain__tecky { display: flex; gap: .35rem; }
.chain__tecky i { width: 9px; height: 9px; border-radius: 50%; background: var(--okraj-silny); display: block; }
.chain__stitek { margin-left: auto; color: var(--akcent-pismo); }
/* Když se hlavička na řádek nevejde, zalomí se mezi položkami, ne uprostřed „3 DTE“
   nebo „IV Rank 24“. Platí to v každé šířce, v každém vzhledu i písmu (Safari má
   širší neproporcionální písmo než Chrome). Kde se hlavička vejde, nemění to nic. */
.chain__hlava { flex-wrap: wrap; }
.chain__hlava > span { white-space: nowrap; }
/* Na úzkém telefonu je ukázka užší, než kolik hlavička potřebuje na jeden řádek,
   a menší mezery ji v něm udrží ještě na šířce 375 px (měřeno v Chromu). Sloupec
   úvodu se zúží pod šíři tabulky (336 px plus okraje 2 × 22 px) pod 380 px. Vzhled
   kontrast má kolem ukázky linku 2 px, takže mu místo chybí ještě na 380 px, proto
   práh 381 px. Nad ním platí běžné mezery beze změny. */
@media (max-width: 381px) { .chain__hlava { gap: .35rem .45rem; } }
.chain__telo { padding: .3rem .35rem .55rem; overflow-x: auto; }
.chain table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .76rem; }
.chain th {
    text-align: right; font-weight: 400; color: var(--text-tlumeny);
    padding: .5rem .5rem; border-bottom: 1px solid var(--okraj); white-space: nowrap;
}
.chain td { text-align: right; padding: .42rem .5rem; color: var(--text); white-space: nowrap; }
.chain tr + tr td { border-top: 1px solid color-mix(in srgb, var(--okraj) 55%, transparent); }
.chain .strike { color: var(--text-vyrazny); font-weight: 600; text-align: center; background: var(--karta-2); }
.chain .je-itm { color: var(--text-vyrazny); }
.chain .je-atm td { background: color-mix(in srgb, var(--akcent) 13%, transparent); }
.chain .je-atm .strike { background: color-mix(in srgb, var(--akcent) 24%, transparent); color: var(--text-vyrazny); }
.chain__pata {
    display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center;
    padding: .7rem 1rem .9rem; border-top: 1px solid var(--okraj);
    font-family: var(--mono); font-size: .74rem; color: var(--text-tlumeny);
}
.chain__pata b { color: var(--akcent-pismo); font-weight: 600; }

/* Popisky pod ukázkou. Sloupec je schválně užší než ukázka nad ním: v plné šířce
   se na poslední řádek zalomilo jedno dvě slova a působilo to jako nedopatření.
   Na úzkém displeji se omezení ruší, tam je každý pixel potřeba. Osiřelému slovu
   na konci popisku („strike.“, „půjde.“) tam místo něj brání `text-wrap: pretty`,
   stejně jako u odstavců ve styl.css. */
.chain-pozn { display: grid; gap: .55rem; margin-top: 1rem; max-width: 80%; }
.chain-pozn div { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--text-tlumeny); }
.chain-pozn i { color: var(--akcent-pismo); font-style: normal; font-family: var(--mono); flex: none; }
@media (max-width: 940px) { .chain-pozn { max-width: none; } .chain-pozn span { text-wrap: pretty; } }

/* ---------- Bolest ---------- */

.bol { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.bol__karta {
    background: var(--karta); border: var(--okraj-sila) solid var(--okraj); border-left: 3px solid var(--varovani);
    border-radius: var(--r-s); padding: 1.4rem 1.5rem;
}
.bol__karta h3 { font-size: 1.04rem; margin-bottom: .45rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.bol__karta p { font-size: .94rem; color: var(--text-tlumeny); margin: 0; }
.bol__zaver {
    margin-top: 2.4rem; padding: 1.5rem 1.7rem;
    background: color-mix(in srgb, var(--akcent) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--akcent) 26%, transparent);
    border-radius: var(--r);
    font-size: 1.06rem; color: var(--text-vyrazny);
}

/* ---------- Výklad se dvěma sloupci ---------- */

.dvojice {
    display: grid; gap: clamp(2rem, 1rem + 4vw, 3.4rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    align-items: center;
}
.dvojice--obrat > *:first-child { order: 2; }
@media (max-width: 760px) { .dvojice--obrat > *:first-child { order: 0; } }

.art {
    background: var(--karta); border: 1px solid var(--okraj);
    border-radius: var(--r); padding: 1.3rem; box-shadow: var(--stin-s);
}
.art svg { width: 100%; height: auto; }
.art__popis { margin-top: .9rem; font-size: .83rem; color: var(--text-tlumeny); text-align: center; }

/* Legenda ke grafu. Je mimo plochu obrázku schválně: popisek u křivky se v jiné
   šířce nebo po úpravě tvaru vždycky s něčím překryje. */
.art__legenda {
    display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
    margin: 0 0 .9rem; padding: 0 .2rem;
    font-size: .82rem; color: var(--text-tlumeny);
}
.art__legenda span { display: inline-flex; align-items: center; gap: .45rem; }
.art__vzorek { width: 22px; height: 0; border-top: 2.4px solid var(--akcent); flex: none; }
.art__vzorek--carkovana { border-top: 2px dashed var(--akcent-2); }

/* Barvy uvnitř ilustrací se berou z tokenů, aby fungovaly ve všech tématech. */
.art .osa { stroke: var(--okraj-silny); }
.art .mriz { stroke: var(--okraj); }
.art .kresba { stroke: var(--akcent); fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.art .kresba-2 { stroke: var(--akcent-2); fill: none; stroke-width: 2; stroke-dasharray: 5 4; }
.art .plocha { fill: color-mix(in srgb, var(--akcent) 18%, transparent); }
.art .plocha-2 { fill: color-mix(in srgb, var(--akcent-2) 16%, transparent); }
.art .zisk { fill: color-mix(in srgb, var(--uspech) 20%, transparent); }
.art .ztrata { fill: color-mix(in srgb, var(--varovani) 18%, transparent); }
.art .stitek { fill: var(--text-tlumeny); font: 400 11px var(--mono); }
.art .stitek--silny { fill: var(--text-vyrazny); font: 600 12px var(--mono); }
.art .stitek--akcent { fill: var(--akcent-pismo); font: 600 11px var(--mono); }
.art .bod { fill: var(--akcent); }

.seznam-odrazky { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; }
.seznam-odrazky li { display: flex; gap: .75rem; align-items: flex-start; }
.seznam-odrazky svg { color: var(--akcent); flex: none; margin-top: .18rem; }

/* ---------- Rozhodovací matice ---------- */

.matice { overflow-x: auto; border: var(--okraj-sila) solid var(--okraj); border-radius: var(--r); background: var(--karta); }
.matice table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 640px; }
.matice th, .matice td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--okraj); }
/* Na úzkém displeji se tabulka posouvá do stran. Užší sazba, ať je posuv co nejkratší. */
@media (max-width: 700px) {
    .matice table { font-size: .85rem; min-width: 560px; }
    .matice th, .matice td { padding: .6rem .7rem; }
}
.matice-pozn { display: none; font-size: .82rem; color: var(--text-tlumeny); margin: .6rem 0 0; }
@media (max-width: 700px) { .matice-pozn { display: block; } }
.matice thead th {
    background: var(--karta-2); color: var(--text-vyrazny);
    font: 700 .74rem/1.4 var(--font-popisek); letter-spacing: var(--popisek-mezera); text-transform: uppercase;
}
.matice tbody tr:last-child th, .matice tbody tr:last-child td { border-bottom: 0; }
.matice td:last-child { color: var(--text-vyrazny); font-weight: 600; }
.matice tbody th { font-weight: 600; color: var(--text-vyrazny); white-space: nowrap; }

/* ---------- Srovnání ---------- */

.srov { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.srov__sloupec { border: 1px solid var(--okraj); border-radius: var(--r); padding: 1.7rem; background: var(--karta); }
.srov__sloupec--nas { border-color: color-mix(in srgb, var(--akcent) 45%, transparent); box-shadow: var(--stin-s); }
.srov__hlava { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.srov__hlava h3 { margin: 0; font-size: 1.1rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.srov__znak { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.srov__znak--ne { background: color-mix(in srgb, var(--varovani) 22%, transparent); color: var(--varovani); }
.srov__znak--ano { background: color-mix(in srgb, var(--uspech) 22%, transparent); color: var(--uspech); }
.srov ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.srov li { display: flex; gap: .65rem; font-size: .95rem; color: var(--text-tlumeny); }
.srov__sloupec--nas li { color: var(--text); }
/* Jen odrážka se nesmí zmenšovat. Kdyby `flex: none` platilo i pro text vedle ní,
   dlouhá věta by se nezalomila a odsunula by celou stránku do strany. */
.srov li span:first-child { flex: none; font-family: var(--mono); color: var(--akcent-pismo); }
.srov li span + span { min-width: 0; }
.srov__sloupec--ne li span:first-child { color: var(--text-tlumeny); }

/* ---------- Moduly programu ---------- */

.moduly { display: grid; gap: .85rem; }
.modul { border: 1px solid var(--okraj); border-radius: var(--r); background: var(--karta); overflow: hidden; }
.modul[open] { border-color: color-mix(in srgb, var(--akcent) 40%, transparent); }
.modul__hlava {
    display: flex; gap: 1.1rem; align-items: flex-start;
    padding: 1.25rem 1.4rem; cursor: pointer; list-style: none;
}
.modul__hlava::-webkit-details-marker { display: none; }
.modul__hlava:hover { background: var(--karta-2); }
/* Obrys fokusu leží normálně vně prvku. Souhrn ale vyplňuje celý .modul, který má
   overflow: hidden, a ten by obrys ořízl, takže by klávesnicí nešlo poznat, na kterém
   modulu uživatel stojí. Proto je obrys uvnitř souhrnu. */
.modul__hlava:focus-visible { outline-offset: -4px; }
.modul__cislo {
    font-family: var(--mono); font-size: .78rem; color: var(--akcent-pismo);
    border: 1px solid color-mix(in srgb, var(--akcent) 40%, transparent);
    border-radius: var(--r-s); padding: .3rem .5rem; flex: none; line-height: 1;
}
.modul__nazev { flex: 1 1 auto; min-width: 0; }
.modul__titul {
    display: block; margin: 0 0 .2rem; font-size: 1.12rem;
    font-family: var(--font-nadpis); font-weight: var(--nadpis-vaha);
    letter-spacing: var(--nadpis-mezera); color: var(--text-vyrazny); line-height: 1.25;
}
.modul__podtitul { display: block; font-size: .9rem; color: var(--text-tlumeny); }
.modul__sipka { flex: none; color: var(--text-tlumeny); transition: transform .18s ease; margin-top: .35rem; }
.modul[open] .modul__sipka { transform: rotate(180deg); }
.modul__telo { padding: 0 1.4rem 1.5rem; }
.modul__cil {
    margin: 0 0 1.2rem; padding: .9rem 1.1rem; border-radius: var(--r-s);
    background: var(--karta-2); color: var(--text); font-size: .95rem;
}
/* Témata modulu. Ve dvou sloupcích, aby osnova nebyla nekonečný sloupec odrážek. */
.modul__temata {
    list-style: none; padding: 0; margin: 0 0 1.3rem;
    display: grid; gap: .6rem 1.8rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.modul__temata > li {
    padding-left: 1.5rem; position: relative;
    color: var(--text); font-size: .96rem; line-height: 1.5;
}
.modul__temata > li::before {
    content: ''; position: absolute; left: .35rem; top: .62rem;
    width: 6px; height: 6px; border-radius: 50%; background: var(--akcent);
}
.modul__patka { display: grid; gap: .8rem; border-top: 1px solid var(--okraj); padding-top: 1.1rem; }
.modul__patka div { display: flex; gap: .7rem; font-size: .92rem; }
.modul__patka b { color: var(--akcent-pismo); flex: none; font-family: var(--font-popisek);
    font-size: .72rem; letter-spacing: var(--popisek-mezera); text-transform: uppercase; padding-top: .2rem; min-width: 76px; }

/* ---------- Výsledky programu ---------- */

.vysledky {
    display: grid; gap: 1.3rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.vysledek {
    position: relative; overflow: hidden;
    background: var(--karta); border: 1px solid var(--okraj); border-radius: var(--r);
    padding: 1.7rem 1.6rem 1.6rem;
}
/* Pořadové číslo je vodoznak v rohu, ne další text ke čtení. */
.vysledek__cislo {
    position: absolute; top: .2rem; right: .9rem;
    font: 700 3.4rem/1 var(--mono); color: var(--okraj);
    opacity: .55; pointer-events: none; user-select: none;
}
.vysledek__ikona { color: var(--akcent); display: block; margin-bottom: 1.1rem; }
.vysledek h3 { position: relative; font-size: 1.1rem; margin-bottom: .45rem; }
.vysledek p { position: relative; color: var(--text-tlumeny); font-size: .95rem; margin: 0; }

/* ---------- Formát programu ---------- */

.kroky { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: krok; }
.krok { background: var(--karta); border: 1px solid var(--okraj); border-radius: var(--r); padding: 1.5rem; position: relative; }
.krok::before {
    counter-increment: krok; content: counter(krok);
    font-family: var(--mono); font-size: .8rem; color: var(--akcent-pismo);
    border: 1px solid color-mix(in srgb, var(--akcent) 40%, transparent);
    border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: .9rem;
}
.krok h3 { font-size: 1.04rem; margin-bottom: .4rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.krok p { font-size: .93rem; color: var(--text-tlumeny); margin: 0; }

/* ---------- Pro koho ---------- */

.komu { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.komu__blok { border: 1px solid var(--okraj); border-radius: var(--r); padding: 1.7rem; background: var(--karta); }
.komu__blok h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.08rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.komu__blok ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .9rem; }
.komu__blok li { display: flex; gap: .7rem; font-size: .96rem; color: var(--text-tlumeny); }
.komu__blok li svg { flex: none; margin-top: .2rem; }
.komu__blok--ano li svg { color: var(--uspech); }
.komu__blok--ne li svg { color: var(--varovani); }

/* ---------- Lektor ---------- */

.autor { display: grid; gap: clamp(1.8rem, 1rem + 4vw, 3.4rem); grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
@media (max-width: 780px) { .autor { grid-template-columns: 1fr; } }
.autor__foto { border-radius: var(--r); overflow: hidden; border: var(--okraj-sila) solid var(--okraj); box-shadow: var(--stin); position: relative; }
.autor__foto img { width: 100%; height: auto; }
.autor__citat {
    margin: 1.8rem 0 0; padding: 1.3rem 1.5rem; border-left: 3px solid var(--akcent);
    background: var(--karta); border-radius: 0 var(--r-s) var(--r-s) 0;
    font-family: var(--font-nadpis); font-size: 1.12rem; color: var(--text-vyrazny); line-height: 1.45;
}
.autor__body { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.autor__body li { display: flex; gap: .75rem; align-items: flex-start; color: var(--text-tlumeny); font-size: .96rem; }
.autor__body svg { color: var(--akcent); flex: none; margin-top: .2rem; }

/* ---------- Cena ---------- */

.cena-blok { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
@media (max-width: 880px) { .cena-blok { grid-template-columns: 1fr; } }

.stack { list-style: none; padding: 0; margin: 0; display: grid; gap: .05rem; }
.stack li { display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--okraj); }
.stack li:last-child { border-bottom: 0; }
.stack__co { flex: 1 1 auto; }
.stack__co strong { display: block; color: var(--text-vyrazny); font-weight: 600; font-size: .99rem; }
.stack__co span { font-size: .88rem; color: var(--text-tlumeny); }
.stack__hodnota { flex: none; font-family: var(--mono); font-size: .88rem; color: var(--text-tlumeny); white-space: nowrap; }

.cena-karta {
    background: var(--karta); border: 1px solid color-mix(in srgb, var(--akcent) 40%, transparent);
    border-radius: var(--r-l); padding: 2rem; box-shadow: var(--stin); position: sticky; top: 88px;
}
@media (max-width: 880px) { .cena-karta { position: static; } }
.cena-karta__stitek {
    display: inline-block; font: 700 .7rem/1 var(--font-popisek); letter-spacing: var(--popisek-mezera);
    text-transform: uppercase; color: var(--akcent-pismo);
    border: 1px solid color-mix(in srgb, var(--akcent) 40%, transparent);
    /* Tableta, ale jen ve vzhledech se zaoblenými tlačítky. Ve vzhledech s poloměrem 0
       (kontrast, grafen) je štítek hranatý jako všechno ostatní. Kontrast má token jako
       bezrozměrnou nulu, s níž calc() neplatí, a prohlížeč pak použije výchozí nulový poloměr. */
    border-radius: calc(var(--r-btn) * 999); padding: .45rem .8rem; margin-bottom: 1.2rem;
}
.cena-karta__cena { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.cena-karta__cena b {
    font-family: var(--font-nadpis); font-weight: var(--nadpis-vaha);
    font-size: clamp(2.3rem, 1.8rem + 2.4vw, 3.1rem); color: var(--text-vyrazny); line-height: 1;
}
.cena-karta__skrtnuta { text-decoration: line-through; color: var(--text-tlumeny); font-size: 1.1rem; }
.cena-karta__pozn { font-size: .88rem; color: var(--text-tlumeny); margin: .8rem 0 1.5rem; }
.cena-karta__seznam { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .7rem; }
.cena-karta__seznam li { display: flex; gap: .65rem; font-size: .94rem; align-items: flex-start; }
.cena-karta__seznam svg { color: var(--uspech); flex: none; margin-top: .2rem; }
.cena-karta__zvyseni {
    margin: 0 0 1.4rem; padding: .8rem 1rem; border-radius: var(--r-s); font-size: .89rem;
    background: color-mix(in srgb, var(--varovani) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--varovani) 30%, transparent);
    color: var(--text-vyrazny);
}
.cena-karta__platby { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .8rem; color: var(--text-tlumeny); justify-content: center; }

.garance {
    display: flex; gap: 1.2rem; align-items: flex-start; margin-top: 2rem;
    padding: 1.4rem 1.6rem; border: 1px dashed var(--okraj-silny); border-radius: var(--r);
}
.garance__ikona { color: var(--akcent); flex: none; }
.garance h3, .garance h2 { font-size: 1.05rem; margin-bottom: .35rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.garance p { font-size: .93rem; color: var(--text-tlumeny); margin: 0; }

/* ---------- Časté dotazy ---------- */

.faq { display: grid; gap: .7rem; }
.faq__polozka { border: 1px solid var(--okraj); border-radius: var(--r); background: var(--karta); }
.faq__otazka {
    display: flex; gap: 1rem; align-items: center; justify-content: space-between;
    padding: 1.15rem 1.35rem; cursor: pointer; list-style: none;
    font-weight: 600; color: var(--text-vyrazny); font-size: 1rem;
}
.faq__otazka::-webkit-details-marker { display: none; }
.faq__otazka:hover { background: var(--karta-2); }
.faq__polozka[open] .faq__otazka { border-bottom: 1px solid var(--okraj); }
.faq__znak { flex: none; color: var(--akcent); transition: transform .18s ease; }
.faq__polozka[open] .faq__znak { transform: rotate(45deg); }
.faq__odpoved { padding: 1.1rem 1.35rem 1.35rem; color: var(--text-tlumeny); font-size: .96rem; }
.faq__odpoved p:last-child { margin-bottom: 0; }

/* ---------- Závěr ---------- */

.zaver { text-align: center; }
.zaver h2 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem); }
.zaver .perex { margin: 0 auto 2.2rem; }
.zaver__ps {
    max-width: 62ch; margin: 2.8rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--okraj);
    text-align: left; color: var(--text-tlumeny); font-size: .96rem;
}
.zaver__ps b { color: var(--text-vyrazny); }

/* ---------- Objednávka a děkovací stránka ---------- */

.obj { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3rem); grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: start; }
@media (max-width: 860px) { .obj { grid-template-columns: 1fr; } }
.obj__shrnuti { background: var(--karta); border: 1px solid var(--okraj); border-radius: var(--r); padding: 1.8rem; }
/* Oddělovač je NAHOŘE u druhého a dalšího řádku, ne dole u všech.
   Původní zápis dával spodní linku každému řádku a poslednímu ji rušil přes
   :last-of-type. Jenže :last-of-type se řídí typem elementu, ne třídou, a posledním
   divem ve shrnutí je .obj__celkem. Pravidlo tedy nesedělo na nic, poslednímu řádku
   linka zůstala a nad součtem byly vidět čáry dvě, tenká a pod ní silná. */
.obj__radek { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; }
.obj__radek + .obj__radek { border-top: 1px solid var(--okraj); }
.obj__celkem { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
    margin-top: 1rem; padding-top: 1.2rem; border-top: 2px solid var(--okraj-silny); }
.obj__celkem b { font-family: var(--font-nadpis); font-size: 1.9rem; color: var(--text-vyrazny); font-weight: var(--nadpis-vaha); }
.obj__kroky { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1rem; counter-reset: ok; }
.obj__kroky li { display: flex; gap: .8rem; font-size: .95rem; color: var(--text-tlumeny); }
.obj__kroky li::before {
    counter-increment: ok; content: counter(ok);
    font-family: var(--mono); font-size: .74rem; color: var(--akcent-pismo); flex: none;
    border: 1px solid color-mix(in srgb, var(--akcent) 40%, transparent);
    border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center;
}
.hotovo { text-align: center; max-width: 620px; margin: 0 auto; }
/* Znak stojí v řádce nadpisu, ne nad ní. Teče přímo v textu (inline-block), ne ve flexu:
   na úzkém displeji se nadpis láme na dva řádky a ve flexu by znak plaval svisle uprostřed
   celého bloku místo vedle prvního řádku. */
.hotovo__znak {
    color: var(--uspech); display: inline-block;
    vertical-align: -.14em; margin-right: .38em;
}
.hotovo__karty { margin-top: 2.6rem; text-align: left; }
@media (max-width: 560px) {
    .hotovo__znak svg { width: 26px; height: 26px; }
}

/* ---------- Deník v ceně programu ---------- */
/* Snímek je z cizí aplikace a je tmavý ve všech čtyřiašedesáti vzhledech. Rám kolem něj
   proto musí být z tokenů: bez rámu splyne na tmavém vzhledu s pozadím stránky a na
   světlém vypadá jako díra v sazbě. Poměr stran drží místo ještě před načtením obrázku,
   takže se sazba pod ním nehne. */
.denik-nahled { margin: 0 0 2.4rem; }
.denik-nahled picture { display: block; }
.denik-nahled img {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
    background: var(--pozadi-kontrast);
    border: var(--okraj-sila) solid var(--okraj-silny); border-radius: var(--r-l);
    box-shadow: var(--stin);
}
.denik-nahled figcaption {
    margin: .9rem 0 0; max-width: 74ch;
    font-size: .92rem; line-height: 1.6; color: var(--text-tlumeny);
}
.denik-pozn {
    margin: 2rem 0 0; padding: 1.1rem 1.3rem;
    background: var(--karta); border: var(--okraj-sila) solid var(--okraj);
    border-left: 3px solid var(--akcent); border-radius: var(--r-s);
    font-size: .94rem; line-height: 1.62; color: var(--text-tlumeny);
}
.denik-pozn b { color: var(--text-vyrazny); font-weight: 600; }