/* ==========================================================================
   AI u pohovoru · příručka pro personalisty · lead magnet
   A5 (148 × 210 mm), 16 stran. Na webu dvoustrany, v tisku a PDF po stranách.
   Všechny rozměry uvnitř stránky jsou v em: stránka má vždy 38 em na šířku.
   ========================================================================== */

:root {
  --pw: min(560px, calc((100vw - 112px) / 2));
  --stage: #E7E2DA;
  --gut-in: 3.1em;   /* vnitřní okraj u hřbetu */
  --gut-out: 2.6em;  /* vnější okraj */
}
@media (max-width: 1180px) { :root { --pw: min(600px, calc(100vw - 32px)); } }

body { background: var(--stage); }

/* ---------- lišta ---------- */
.bar {
  position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 10px var(--gut); background: rgb(231 226 218 / .82); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid rgb(27 27 27 / .07);
}
.bar-back { justify-self: start; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.bar-back:hover { color: var(--ink); }
.bar-back .short { display: none; }
.bar-t { margin: 0; text-align: center; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2; }
.bar-t span { display: block; font-family: var(--text); font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.bar .btn { justify-self: end; min-height: 40px; padding: 0 18px; font-size: 14px; }
@media (max-width: 760px) { .bar { grid-template-columns: 1fr auto; } .bar-t { display: none; } .bar-back .long { display: none; } .bar-back .short { display: inline; } }

/* ---------- kniha ---------- */
.book { display: grid; justify-items: center; gap: 72px; padding: 64px 16px 160px; }
.spread { display: flex; }
.book > .pg, .spread { box-shadow: 0 50px 90px -46px rgb(32 21 71 / .5), 0 2px 12px rgb(32 21 71 / .08); }
.pg {
  position: relative; width: var(--pw); aspect-ratio: 148 / 210; overflow: hidden; flex: none;
  display: flex; flex-direction: column; padding: 3.3em var(--gut-out) 3.7em;
  background: var(--paper); color: var(--ink); font-family: var(--text); font-size: calc(var(--pw) / 38); line-height: 1.45;
  font-kerning: normal; font-variant-numeric: lining-nums;
}
.pg.v { padding-right: var(--gut-in); }
.pg.r { padding-left: var(--gut-in); }
.pg p, .pg h2, .pg h3, .pg ul, .pg ol, .pg dl, .pg dd { margin: 0; }
/* hřbet: jemný stín ve žlábku dvoustrany */
.spread .pg::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.2em; pointer-events: none; z-index: 6; }
.spread .pg.v::after { right: 0; background: linear-gradient(90deg, transparent, rgb(32 21 71 / .075)); }
.spread .pg.r::after { left: 0; background: linear-gradient(270deg, transparent, rgb(32 21 71 / .1)); }
@media (max-width: 1180px) {
  .book { gap: 40px; }
  .spread { flex-direction: column; gap: 40px; box-shadow: none; }
  .spread .pg { box-shadow: 0 40px 80px -46px rgb(32 21 71 / .5), 0 2px 12px rgb(32 21 71 / .08); }
  .spread .pg::after { display: none; }
}
/* telefon: stránky se roztáhnou podle obsahu a písmo zůstane čitelné */
@media (max-width: 560px) {
  .pg { aspect-ratio: auto; min-height: calc(var(--pw) * 1.3); font-size: 15px; padding-bottom: 4.4em; }
}

/* ---------- společná typografie ---------- */
.run {
  position: absolute; left: var(--gut-out); right: var(--gut-in); bottom: 1.75em; display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: .54em; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.pg.r .run { left: var(--gut-in); right: var(--gut-out); flex-direction: row-reverse; }
.run b { font-weight: 500; color: var(--ink); letter-spacing: .06em; }

.ch { display: flex; align-items: center; gap: .9em; margin: 0 0 2.4em !important; font-family: var(--mono); font-size: .58em; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.ch b { font-weight: 500; color: var(--violet); }
.ch::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.h1 { font-family: var(--display); font-weight: 600; font-size: 2.3em; line-height: 1; letter-spacing: -.03em; margin-bottom: .5em !important; text-wrap: balance; }
.h2 { font-family: var(--display); font-weight: 600; font-size: 1.5em; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.dek { font-size: 1em; line-height: 1.45; color: var(--ink-2); margin-bottom: 1.7em !important; text-wrap: pretty; }
.tx { font-size: .84em; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.tx + .tx { margin-top: .7em; }
.tx b { color: var(--ink); font-weight: 600; }
.lbl { font-family: var(--mono); font-size: .54em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.src { font-family: var(--mono); font-size: .5em; line-height: 1.55; letter-spacing: .01em; color: var(--ink-3); }
.hl { background: linear-gradient(transparent 60%, var(--lime) 60%); color: inherit; padding: 0 .04em; }
.dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: var(--c); flex: none; box-shadow: inset 0 0 0 1px rgb(27 27 27 / .08); }
.l0 { --c: var(--l0); } .l1 { --c: var(--l1); } .l2 { --c: var(--l2); } .l3 { --c: var(--l3); }

/* lentikulární písmo: stejná věta ve čtyřech úrovních naráz (SVG, aby pruhy vydržely i tisk do PDF) */
svg.lent { display: block; height: auto; overflow: visible; }

/* ---------- 1 · obálka ---------- */
.cover { padding: 2.5em 2.6em 2.7em; }
.cv-head { display: flex; justify-content: space-between; align-items: center; }
.cv-head img { height: 1.75em; width: auto; }
.cv-head span { font-family: var(--mono); font-size: .54em; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.cv-card { margin-top: 3.8em; }
.cv-tag { display: flex; justify-content: space-between; padding-top: .9em; border-top: 1.5px solid var(--ink); font-family: var(--mono); font-size: .52em; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.cover .lent { width: 80%; margin: 1.1em 0 0 -.3em; }
.cv-lv { display: flex; flex-wrap: wrap; gap: .5em 1.5em; margin-top: 1.5em; font-family: var(--mono); font-size: .52em; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cv-lv span { display: inline-flex; align-items: center; gap: .6em; }
.cv-lv .dot { width: 1.05em; height: 1.05em; }
.cv-foot { margin-top: auto; }
.cv-title { font-family: var(--display); font-weight: 600; font-size: 3.5em; line-height: .9; letter-spacing: -.04em; }
.cv-dek { margin-top: .6em !important; font-size: 1.12em; line-height: 1.35; color: var(--ink-2); max-width: 16em; text-wrap: balance; }
.cv-meta { display: flex; gap: 1.6em; margin-top: 2.1em !important; padding-top: .95em; border-top: 1px solid var(--line-2); font-family: var(--mono); font-size: .52em; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- 2 · obsah ---------- */
.intro { font-family: var(--display); font-weight: 500; font-size: 1.42em; line-height: 1.2; letter-spacing: -.012em; margin-bottom: 2.1em !important; text-wrap: pretty; }
.toc { border-top: 1.5px solid var(--ink); }
.toc li { display: grid; grid-template-columns: 2.3em 1fr auto; column-gap: .6em; align-items: baseline; padding: .78em 0 .8em; border-bottom: 1px solid var(--line); }
.toc .n { font-family: var(--mono); font-size: .6em; letter-spacing: .08em; color: var(--violet); }
.toc .t { font-family: var(--display); font-weight: 600; font-size: 1.12em; line-height: 1.15; letter-spacing: -.01em; }
.toc .d { grid-column: 2; font-size: .74em; color: var(--ink-3); margin-top: .1em; }
.toc .p { grid-row: 1; grid-column: 3; font-family: var(--mono); font-size: .62em; color: var(--ink-3); }
.imprint { margin-top: auto !important; font-size: .62em; line-height: 1.55; color: var(--ink-3); max-width: 31em; }
.imprint b { color: var(--ink-2); font-weight: 600; }

/* ---------- 3 · stejná věta ---------- */
.spec { border-top: 1.5px solid var(--ink); }
.sp { display: grid; grid-template-columns: 1fr 8.6em; gap: 1em; align-items: center; padding: 1.3em 0 1.35em; border-bottom: 1px solid var(--line); }
.sp-q { font-family: var(--display); font-weight: 600; font-size: 3.55em; line-height: 1; letter-spacing: -.04em; color: var(--c); white-space: nowrap; }
.sp.l0 .sp-q { color: #B9A3F7; }
.sp-a { font-size: .74em; line-height: 1.4; color: var(--ink-2); }
.sp-a b { display: flex; align-items: center; gap: .55em; margin-bottom: .3em; font-family: var(--mono); font-weight: 500; font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.close { margin-top: auto !important; font-family: var(--display); font-weight: 600; font-size: 1.62em; line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; }
.close span { color: var(--ink-3); }

/* ---------- 4 · proč teď ---------- */
.pull { margin: 1.1em 0 0 !important; font-family: var(--display); font-weight: 600; font-size: 2.05em; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.why { margin-top: auto; }
.why-g { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6em; padding-top: 1em; border-top: 1.5px solid var(--ink); margin-top: .8em; }
.yrs { display: flex; align-items: flex-end; gap: .7em; height: 7.4em; }
.yr { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.yr i { align-self: end; display: block; height: var(--h); border-radius: .25em .25em 0 0; background: var(--lav); position: relative; }
.yr i b { position: absolute; left: 0; right: 0; top: -1.45em; font-family: var(--mono); font-weight: 500; font-style: normal; font-size: .72em; color: var(--ink-2); }
.yr.hot i { background: var(--violet); }
.yr.hot i b { color: var(--violet); }
.yr span { padding-top: .45em; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: .5em; letter-spacing: .06em; color: var(--ink-3); }
.why-c { font-size: .72em; line-height: 1.45; color: var(--ink-2); margin-top: .8em !important; }
.why-c b { color: var(--ink); }
.stat + .stat { margin-top: 1em; padding-top: 1em; border-top: 1px solid var(--line); }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: 2.3em; line-height: .95; letter-spacing: -.03em; }
.stat span { display: block; margin-top: .3em; font-size: .72em; line-height: 1.4; color: var(--ink-2); }
.why .src { margin-top: 1.2em !important; }

/* ---------- 5 · sto teček ---------- */
.d100 { display: grid; grid-template-columns: repeat(10, 1fr); gap: .62em; width: 84%; margin: 0 0 1.8em; }
.d100 i { aspect-ratio: 1; border-radius: 50%; background: var(--c); }
.d100 i.l0 { box-shadow: inset 0 0 0 1px rgb(89 56 183 / .12); }
.leg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding-top: .9em; border-top: 1.5px solid var(--ink); }
.leg b { display: flex; align-items: center; gap: .35em; font-family: var(--display); font-weight: 600; font-size: 1.75em; line-height: 1; letter-spacing: -.03em; }
.leg b .dot { width: .42em; height: .42em; }
.leg span { display: block; margin-top: .35em; font-size: .7em; line-height: 1.35; color: var(--ink-2); }

/* ---------- 6–7 · úrovně ---------- */
.scale { position: relative; margin: -.6em 0 2.2em; }
.pg.v .scale { margin-right: calc(var(--gut-in) * -1); }
.pg.r .scale { margin-left: calc(var(--gut-in) * -1); }
.pg.r .scale .lbl { visibility: hidden; }
.spread .pg.r .scale .lbl { visibility: hidden; }
@media (max-width: 1180px) { .pg.r .scale .lbl { visibility: visible; } }
.lanes { position: relative; height: 2.6em; margin-top: .9em; }
.ln { position: absolute; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); top: calc(var(--row) * 1.3em); height: 1.3em; }
.ln::after { content: ""; position: absolute; left: 0; right: 0; bottom: .18em; height: .38em; border-radius: 99px; background: var(--c); }
.ln.cut-r::after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ln.cut-l::after { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ln span { position: absolute; left: 0; bottom: .9em; white-space: nowrap; font-family: var(--mono); font-size: .5em; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ax { position: relative; height: 1.3em; border-top: 1px solid var(--ink); }
.ax span { position: absolute; left: calc(var(--x) * 1%); top: .45em; transform: translateX(-50%); font-family: var(--mono); font-size: .5em; color: var(--ink-3); }
.ax span.s { transform: none; }
.ax span.e { transform: translateX(-100%); }
.ax::before { content: ""; position: absolute; inset: -.25em 0 auto; height: .25em; background: repeating-linear-gradient(90deg, var(--ink-3) 0 1px, transparent 1px 10%); opacity: .5; }
.pg.v .scale-n, .pg.r .scale-n { margin-top: .35em !important; font-size: .64em; color: var(--ink-3); }

.lvl { padding: .95em 0 1.05em; border-top: 1px solid var(--line-2); }
.lvl header { display: flex; align-items: baseline; gap: .6em; margin-bottom: .4em; }
.lvl .code { font-family: var(--mono); font-size: .56em; letter-spacing: .08em; color: var(--ink-3); }
.lvl h3 { display: flex; align-items: center; gap: .32em; font-family: var(--display); font-weight: 600; font-size: 1.6em; line-height: 1; letter-spacing: -.025em; }
.lvl h3 .dot { width: .42em; height: .42em; }
.lvl .sc { margin-left: auto; font-family: var(--mono); font-size: .54em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lvl .sc b { font-weight: 500; color: var(--ink); }
.lvl .def { font-size: .84em; line-height: 1.45; color: var(--ink); }
.lvl .say { margin: .5em 0 .65em !important; font-family: var(--display); font-weight: 500; font-size: 1.12em; line-height: 1.2; letter-spacing: -.008em; }
.lvl .sig { display: flex; flex-wrap: wrap; gap: .4em; }
.lvl .sig li { font-size: .64em; line-height: 1.3; padding: .38em .75em; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.nb6 { margin-top: auto !important; padding-top: .9em; border-top: 1.5px solid var(--ink); font-size: .78em; line-height: 1.45; color: var(--ink-2); }
.nb6 b { color: var(--ink); }

.sheet { margin-top: auto; padding: 1.15em 1.25em 1em; border-radius: .7em; background: var(--lilac); }
.sheet .lbl { color: var(--violet); }
.sheet h3 { margin: .35em 0 .3em; font-family: var(--display); font-weight: 600; font-size: 1.22em; line-height: 1.1; letter-spacing: -.015em; }
.sheet .tx { font-size: .74em; margin-bottom: .6em; }
.sheet li { display: grid; grid-template-columns: 1.1em 1fr auto; gap: .75em; align-items: center; padding: .42em 0; border-top: 1px solid rgb(89 56 183 / .16); font-size: .74em; line-height: 1.3; }
.sheet li i { width: 1.1em; height: 1.1em; border: 1.3px solid var(--ink); border-radius: .22em; background: #fff; }
.sheet li b { font-family: var(--mono); font-weight: 500; font-size: .8em; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }

/* ---------- 8–9 · pět otázek ---------- */
.qa { padding: 1.2em 0 1.35em; border-top: 1px solid var(--line-2); }
.qa:first-of-type { border-top: 1.5px solid var(--ink); }
.qa header { display: flex; align-items: baseline; gap: .75em; margin-bottom: .55em; }
.qn { font-family: var(--mono); font-size: .58em; font-weight: 500; letter-spacing: .08em; color: var(--violet); }
.qd { font-family: var(--mono); font-size: .58em; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.qt { margin-left: auto; font-size: .68em; line-height: 1.3; color: var(--ink-3); text-align: right; max-width: 22em; }
.qq { font-family: var(--display); font-weight: 600; font-size: 1.42em; line-height: 1.13; letter-spacing: -.014em; margin-bottom: .75em !important; text-wrap: balance; }
.qx { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.qx .lbl { display: flex; align-items: center; gap: .6em; margin-bottom: .45em !important; }
.qx .lbl::before { content: ""; width: 1.05em; height: 1.05em; border-radius: 50%; flex: none; }
.qx .ok .lbl::before { background: var(--lime); box-shadow: inset 0 0 0 1px rgb(27 27 27 / .25); }
.qx .no .lbl::before { box-shadow: inset 0 0 0 1.4px var(--ink-3); background: linear-gradient(135deg, transparent 45%, var(--ink-3) 45% 55%, transparent 55%); }
.qx p:not(.lbl) { font-size: .78em; line-height: 1.45; color: var(--ink-2); }
.tip { margin: 0 0 1.4em; padding: 1em 1.25em 1.05em; border-radius: .7em; background: var(--deep); color: #fff; }
.tip .lbl { color: var(--lime); }
.bridge { margin-top: auto !important; padding-top: .9em; border-top: 1.5px solid var(--ink); font-size: .8em; line-height: 1.5; color: var(--ink-2); }
.bridge b { color: var(--ink); }
.tip-q { margin: .45em 0 .4em !important; font-family: var(--display); font-weight: 600; font-size: 1.3em; line-height: 1.12; letter-spacing: -.014em; }
.tip .tx { color: rgb(250 244 238 / .78); font-size: .76em; }

/* ---------- 10 · lupa ---------- */
.pg.art { background: radial-gradient(120% 80% at 50% 45%, #F6F2FF, #E9E1FF 70%, #E1D6FD); }
.pg.art .ch::after { background: rgb(89 56 183 / .2); }
.desk { position: relative; width: calc(100% + 2.4em); aspect-ratio: 620 / 600; margin: auto 0 auto -1.2em; }
.desk .layer { position: absolute; inset: 0; }
.desk .cv {
  position: absolute; width: 50%; height: 74%; padding: 6% 5.5%; border-radius: .6em; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(27 27 27 / .07), 0 1.6em 2.4em -1.6em rgb(32 21 71 / .45); font-size: .74em; line-height: 1.3;
}
.desk .c1 { left: -1%; top: 12%; transform: rotate(-6deg); }
.desk .c2 { left: 25%; top: 4%; transform: rotate(1.5deg); z-index: 2; }
.desk .c3 { left: 51%; top: 14%; transform: rotate(6deg); }
.desk .base .c1 > * { margin-right: 50%; }
.desk .base .c3 { text-align: right; }
.desk .base .c3 > * { margin-left: 50%; }
.cvn { font-family: var(--display); font-weight: 600; font-size: 1.45em; line-height: 1.1; margin-bottom: .15em !important; }
.cvr { color: var(--ink-3); margin-bottom: 1em !important; }
.cvl { display: grid; gap: .6em; padding-top: .9em; border-top: 1px solid var(--line); }
.cvl li { display: grid; gap: .1em; }
.cvl span { font-family: var(--mono); font-size: .74em; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.cvl .ai b { font-weight: 600; background: linear-gradient(transparent 55%, var(--lime) 55%); }
.cvb { position: absolute; left: 10%; right: 10%; bottom: 7%; height: 18%; opacity: .55; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--paper-3) 0 .55em, transparent .55em 1.25em); }
.desk .base .c1 .cvb { right: 56%; }
.desk .base .c3 .cvb { left: 56%; }
.desk .reveal { clip-path: circle(8em at 50% 42%); z-index: 3; }
.desk .work { color: #fff; box-shadow: none; }
.desk .work.l0 { color: var(--ink); background: linear-gradient(160deg, #E7DEFF, var(--l0)); }
.desk .work.l1 { color: var(--ink); background: linear-gradient(160deg, #C9B7FB, var(--l1)); }
.desk .work.l2 { background: linear-gradient(160deg, #6E4BD0, var(--l2)); }
.cw { position: absolute; left: 9%; right: 9%; top: 48%; transform: translateY(-50%); display: grid; gap: .45em; text-align: center; justify-items: center; }
.cw-l { display: flex; align-items: center; gap: .5em; font-family: var(--mono); font-size: .86em; letter-spacing: .08em; text-transform: uppercase; }
.cw-l .dot { background: var(--lime); }
.cw-s { font-family: var(--mono); font-size: .8em; opacity: .85; display: grid; justify-items: center; }
.cw-s b { font-family: var(--display); font-size: 4em; line-height: .95; letter-spacing: -.03em; }
.cw-t { font-size: 1.05em; line-height: 1.35; font-weight: 500; max-width: 15em; }
.lensring {
  position: absolute; z-index: 4; left: 50%; top: 42%; width: 16em; height: 16em; transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 .22em var(--lime), 0 0 0 .3em rgb(27 27 27 / .35), 0 1.4em 2.6em -.6em rgb(32 21 71 / .55);
}
.lensring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 45% at 32% 22%, rgb(255 255 255 / .28), transparent 70%); }
.lensring span { position: absolute; left: 50%; bottom: -2.3em; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-size: .56em; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--lime); padding: .45em .8em; border-radius: .5em; }
.art-cap { font-size: .7em; line-height: 1.45; color: var(--ink-3); max-width: 24em; }

/* ---------- 11 · papír a práce ---------- */
.cmp { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); margin-bottom: 1.5em; }
.cmp th { text-align: left; padding: .7em 0 .55em; font-family: var(--mono); font-weight: 500; font-size: .52em; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.cmp td { vertical-align: top; padding: .9em 1em 1em 0; border-bottom: 1px solid var(--line); font-size: .8em; line-height: 1.4; color: var(--ink-2); width: 50%; }
.cmp td:last-child { padding-right: 0; }
.cmp td b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.28em; line-height: 1.15; color: var(--ink); }
.cmp td em { display: inline-block; margin-top: .35em; font-style: normal; font-weight: 600; color: var(--ink); background: linear-gradient(transparent 58%, var(--lime) 58%); }
.cmp .lv { display: flex; align-items: center; gap: .45em; margin-bottom: .2em; font-family: var(--display); font-weight: 600; font-size: 1.28em; line-height: 1.15; color: var(--ink); }
.cmp .lv small { font-family: var(--mono); font-weight: 500; font-size: .62em; letter-spacing: .06em; color: var(--ink-3); margin-left: .2em; }
.rules { counter-reset: r; margin-top: auto !important; display: grid; gap: .6em; padding-top: 1em; border-top: 1.5px solid var(--ink); }
.rules li { counter-increment: r; display: grid; grid-template-columns: 1.8em 1fr; font-size: .86em; line-height: 1.4; color: var(--ink-2); }
.rules li::before { content: "0" counter(r); font-family: var(--mono); font-size: .8em; color: var(--violet); padding-top: .12em; }
.rules b { color: var(--ink); }

/* ---------- 12–13 · výsledek ---------- */
.res { position: relative; margin: .2em 1.1em 1.4em .9em; font-size: 1.06em; }
.rc { border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1.8em 3em -2em rgb(32 21 71 / .45); padding: 1.3em 1.35em 1.1em; }
.rc-top { display: grid; grid-template-columns: 1fr auto; row-gap: .2em; padding-bottom: .9em; border-bottom: 1px solid var(--line); }
.rc-k { grid-column: 1 / -1; font-family: var(--mono); font-size: .52em; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6em !important; }
.rc-lv { display: flex; align-items: center; gap: .4em; font-family: var(--display); font-weight: 600; font-size: 1.7em; line-height: 1; letter-spacing: -.025em; align-self: end; }
.rc-lv .dot { width: .42em; height: .42em; }
.rc-sc { text-align: right; line-height: 1; }
.rc-sc b { display: block; font-family: var(--display); font-weight: 600; font-size: 2.6em; letter-spacing: -.035em; color: var(--violet); }
.rc-sc span { font-family: var(--mono); font-size: .5em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rc-bar { grid-column: 1 / -1; position: relative; height: .32em; margin-top: .8em; border-radius: 99px; background: linear-gradient(90deg, var(--l0) 0 24%, var(--l1) 24% 45%, var(--l2) 45% 78%, var(--l3) 78%); opacity: .9; }
.rc-bar i { position: absolute; left: 61%; top: 50%; width: .9em; height: .9em; margin: -.45em 0 0 -.45em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .18em var(--violet); }
.rc dl { display: grid; gap: .1em; padding: .5em 0; border-bottom: 1px solid var(--line); }
.rc dl div { display: grid; grid-template-columns: 7.2em 1fr; gap: .7em; padding: .42em 0; }
.rc dt { font-family: var(--mono); font-size: .5em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: .35em; }
.rc dd { font-size: .74em; line-height: 1.4; color: var(--ink); }
.rc-q { padding: .85em 0 .7em; }
.rc-q .lbl { color: var(--violet); }
.rc-q ol { display: grid; gap: .4em; margin-top: .55em !important; counter-reset: q; }
.rc-q li { counter-increment: q; display: grid; grid-template-columns: 1.3em 1fr; font-family: var(--display); font-weight: 500; font-size: .86em; line-height: 1.25; }
.rc-q li::before { content: counter(q); font-family: var(--mono); font-size: .72em; color: var(--ink-3); padding-top: .15em; }
.rc-f { padding-top: .7em; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .48em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; }
.cn { display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1px rgb(27 27 27 / .25); font-family: var(--mono); font-weight: 500; font-size: .62em; color: var(--ink); }
.res .cn { position: absolute; left: -1.95em; transform: translateY(-50%); }
.res .cn[data-cn="2"] { left: auto; right: -1.95em; }
.legend { display: grid; gap: .1em; border-top: 1.5px solid var(--ink); }
.legend li { display: grid; grid-template-columns: 2em 1fr; gap: .4em; padding: .95em 0 1em; border-bottom: 1px solid var(--line); }
.legend .cn { font-size: .66em; margin-top: .1em; }
.legend h3 { font-family: var(--display); font-weight: 600; font-size: 1.2em; line-height: 1.15; margin-bottom: .2em; }
.legend p { font-size: .8em; line-height: 1.45; color: var(--ink-2); }
.nvr { display: grid; grid-template-columns: auto 1fr; gap: .5em 1.2em; margin-top: auto !important; padding-top: .9em; border-top: 1.5px solid var(--ink); align-items: start; }
.nvr .lbl { padding-top: .35em; }
.nvr ul { display: flex; flex-wrap: wrap; gap: .4em; }
.nvr li { font-size: .66em; padding: .35em .75em; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgb(27 27 27 / .35); }
.nvr .tx { grid-column: 2; font-size: .7em; }
.fair { margin-top: auto !important; margin-bottom: .2em !important; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; padding-top: 1em; border-top: 1.5px solid var(--ink); }
.fair p { font-size: .72em; line-height: 1.45; color: var(--ink-2); }
.fair b { display: block; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 1.2em; line-height: 1.15; margin-bottom: .3em; }

/* ---------- 14 · jak začít ---------- */
.keys { display: flex; align-items: center; gap: .8em; margin: .6em 0 2.4em; font-size: 1.35em; }
.kc { display: inline-grid; place-items: end start; width: 5.6em; height: 4.2em; padding: .75em .9em; border-radius: .7em; background: linear-gradient(180deg, #fff, #F4F0EA); box-shadow: 0 0 0 1px var(--line-2), 0 .35em 0 var(--line-2), 0 .9em 1.4em -.6em rgb(32 21 71 / .35); font-family: var(--text); font-weight: 500; font-size: .9em; color: var(--ink); }
.kc.v { width: 4.2em; place-items: center; background: linear-gradient(180deg, #F2FF8A, var(--lime)); font-family: var(--display); font-weight: 600; font-size: 1.5em; box-shadow: 0 0 0 1px rgb(27 27 27 / .2), 0 .22em 0 #B9CF1A, 0 .9em 1.4em -.6em rgb(32 21 71 / .35); width: 2.6em; height: 2.6em; }
.keys > span { font-family: var(--mono); color: var(--ink-3); }
.st3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding-top: .9em; border-top: 1.5px solid var(--ink); }
.st3 li { font-size: .78em; line-height: 1.4; color: var(--ink-2); }
.st3 b { display: block; margin-bottom: .3em; font-family: var(--display); font-weight: 600; font-size: 1.22em; line-height: 1.1; color: var(--ink); }
.st3 li::before { display: block; margin-bottom: .6em; font-family: var(--mono); font-size: .85em; color: var(--violet); }
.st3 li:nth-child(1)::before { content: "01"; } .st3 li:nth-child(2)::before { content: "02"; } .st3 li:nth-child(3)::before { content: "03"; }
.paste { margin-top: auto; position: relative; padding: 1.1em 1.25em 1.05em; border-radius: .7em; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1.4em 2.4em -1.8em rgb(32 21 71 / .45); }
.paste header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6em; }
.paste .badge { font-family: var(--mono); font-size: .5em; letter-spacing: .1em; text-transform: uppercase; background: var(--lime); padding: .35em .7em; border-radius: 99px; }
.paste p:not(.lbl) { font-size: .74em; line-height: 1.5; color: var(--ink); }
.paste .ph { background: var(--lilac); color: var(--violet); padding: 0 .25em; border-radius: .2em; }
.paste .lnk { display: inline-block; margin-top: .6em !important; font-family: var(--mono); font-size: .62em !important; color: var(--violet) !important; padding: .35em .7em; border-radius: .4em; background: var(--lilac); }
.after { margin-top: .9em !important; font-size: .7em; line-height: 1.45; color: var(--ink-3); }
.after b { color: var(--ink); }

/* ---------- 15 · cena a další krok ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line-2); }
.tiers > div { padding: .85em .9em .95em 0; }
.tiers > div + div { padding-left: .9em; border-left: 1px solid var(--line); }
.tp { margin: .45em 0 .35em !important; display: flex; align-items: baseline; gap: .25em; font-size: .72em; color: var(--ink-3); }
.tp b { font-family: var(--display); font-weight: 600; font-size: 4.1em; line-height: .9; letter-spacing: -.045em; color: var(--ink); }
.tiers .hi .tp b { color: var(--violet); }
.te { font-size: .68em; line-height: 1.4; color: var(--ink-3); }
.price-n { margin-top: 1em !important; font-size: .8em; line-height: 1.5; color: var(--ink-2); }
.price-n b { color: var(--ink); }
.next { margin-top: auto; padding: 1.35em 1.4em 1.3em; border-radius: .8em; background: var(--deep); color: #fff; background-image: radial-gradient(80% 90% at 100% 100%, rgb(89 56 183 / .75), transparent 70%); }
.next .lbl { color: var(--lime); }
.next-h { margin: .45em 0 .45em !important; font-family: var(--display); font-weight: 600; font-size: 1.6em; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.next-t { font-size: .76em; line-height: 1.5; color: rgb(250 244 238 / .82); }
.next-t b { color: #fff; font-weight: 600; }
.next ol { display: flex; flex-wrap: wrap; gap: .4em; margin: .8em 0 1em !important; counter-reset: n; }
.next ol li { counter-increment: n; display: inline-flex; align-items: center; gap: .55em; font-size: .66em; padding: .4em .8em .4em .45em; border-radius: 99px; background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.next ol li::before { content: counter(n); display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--lime); color: var(--ink); font-family: var(--mono); font-size: .9em; }
.next-f { display: flex; align-items: center; gap: 1em; padding-top: .9em; border-top: 1px solid rgb(255 255 255 / .14); }
.qr { width: 5.2em; height: 5.2em; flex: none; padding: .3em; border-radius: .4em; background: #fff; }
.qr svg { width: 100%; height: 100%; display: block; }
.next-f p { font-size: .7em; line-height: 1.5; color: rgb(250 244 238 / .7); }
.next-f p b { display: block; font-family: var(--mono); font-weight: 500; font-size: 1.05em; color: #fff; }

/* ---------- 16 · zadní strana ---------- */
.back { background: var(--deep); color: #fff; background-image: radial-gradient(90% 70% at 20% 110%, rgb(89 56 183 / .8), transparent 70%); }
.back .lent { width: 46%; margin-top: 2.2em; }
.bk-h { margin-top: 1.6em !important; font-family: var(--display); font-weight: 600; font-size: 2em; line-height: 1; letter-spacing: -.03em; }
.bk-t { margin-top: .7em !important; font-size: .92em; line-height: 1.5; color: rgb(250 244 238 / .8); max-width: 21em; }
.bk-f { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; padding-top: 1em; border-top: 1px solid rgb(255 255 255 / .16); }
.bk-f img { height: 1.9em; width: auto; margin-bottom: .9em; }
.bk-f .qr { width: 5.6em; height: 5.6em; }
.bk-f p { text-align: left; font-family: var(--mono); font-size: .56em; line-height: 1.7; letter-spacing: .06em; color: rgb(250 244 238 / .72); }
.back .run { color: rgb(250 244 238 / .5); }

/* ---------- brána: kapitola 1 zdarma, zbytek za e-mail ---------- */
.gate { width: min(1072px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start;
  padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--paper); box-shadow: 0 50px 90px -46px rgb(32 21 71 / .5), 0 0 0 1px rgb(27 27 27 / .05); scroll-margin-top: 90px; }
.gate .eyebrow { margin-bottom: 18px; }
.gate h2 { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 1.4rem + 1.8vw, 48px); line-height: 1; letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; }
.gate-p { color: var(--ink-2); margin: 0 0 22px; max-width: 30rem; }
.gate-list { border-top: 1px solid var(--ink); }
.gate-list li { display: grid; grid-template-columns: 2.6em 1fr; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; }
.gate-list b { font-family: var(--mono); font-weight: 500; font-size: 12.5px; color: var(--violet); padding-top: 2px; }
.lead-f { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 32px); border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgb(32 21 71 / .4); }
.fld { display: grid; gap: 6px; }
.fld > span { font-size: 14px; font-weight: 600; }
.fld > span em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.fld input, .fld select { height: 50px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 16px; outline: none; transition: box-shadow .2s, background-color .2s; appearance: none; -webkit-appearance: none; }
.fld select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-3) 50%); background-position: right 20px center, right 15px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.fld input:focus, .fld select:focus { background-color: #fff; box-shadow: inset 0 0 0 2px var(--violet); }
.fld.bad input { box-shadow: inset 0 0 0 2px #C0392B; }
.chk { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.chk input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--violet); }
.lead-f .btn { justify-self: start; }
.fine { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin: 0; }
.fine a { color: var(--ink-2); }
.err { font-size: 14px; color: #B03A2E; margin: 0; }
.done { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 32px); border-radius: 20px; background: var(--deep); color: #fff; }
.done .eyebrow { color: rgb(250 244 238 / .6); margin: 0; }
.done h3 { font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.done p { margin: 0; color: rgb(250 244 238 / .82); }
.done .row { display: flex; flex-wrap: wrap; gap: 10px; }
.done .btn.lime { --bg: var(--lime); --fg: var(--ink); }
.done .btn.ghost { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); background: transparent; }
.done .fine { color: rgb(250 244 238 / .6); }
.done .fine a { color: #fff; }
@media (max-width: 900px) { .gate { grid-template-columns: 1fr; } }

/* zamčené strany: první dvoustrana prosvítá a mizí pod bránou */
.locked { display: contents; }
body.gated .locked { display: grid; justify-items: center; gap: 72px; max-height: 560px; overflow: hidden; position: relative; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgb(0 0 0 / .5) 40%, transparent 92%); mask-image: linear-gradient(180deg, #000 0, rgb(0 0 0 / .5) 40%, transparent 92%); }
body.gated .locked .pg > * { filter: blur(3.5px); }
body.gated .locked + .book-end { display: none; }
body.opening .locked .pg { animation: pgIn .9s var(--out) both; }
@keyframes pgIn { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 1180px) { body.gated .locked { gap: 40px; } }

.book-end { display: grid; justify-items: center; gap: 14px; text-align: center; padding-top: 8px; }
.book-end p { margin: 0; color: var(--ink-2); }
.book-end .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* jedna strana samostatně (?strana=1) – náhled pro galerii a dokumentovou reklamu */
body.solo { background: var(--paper); }
body.solo .bar, body.solo .gate, body.solo .book-end { display: none !important; }
body.solo .book { padding: 0; gap: 0; display: block; }
body.solo .spread, body.solo .locked { display: contents; }
body.solo .pg { display: none; box-shadow: none; --pw: 100vw; width: 100vw; }
body.solo .pg.on { display: flex; }

/* ---------- tisk a PDF ---------- */
@media print {
  @page { size: 148mm 210mm; margin: 0; }
  :root { --pw: 148mm; }
  html, body { background: none; }
  .bar, .gate, .book-end, .toast { display: none !important; }
  .book { display: block; padding: 0; }
  .spread, .locked, body.gated .locked { display: contents; }
  body.gated .locked .pg > * { filter: none; }
  .pg { width: 148mm; height: 210mm; aspect-ratio: auto; box-shadow: none !important; break-after: page; page-break-after: always; }
  .pg:last-child, .back { break-after: auto; page-break-after: auto; }
  .spread .pg::after { display: none; }
  .rc, .paste, .desk .cv { box-shadow: 0 0 0 1px var(--line-2) !important; }  /* rozmazané stíny se v PDF rastrují */
  .kc { box-shadow: 0 0 0 1px var(--line-2), 0 .35em 0 var(--line-2) !important; }
  .kc.v { box-shadow: 0 0 0 1px rgb(27 27 27 / .2), 0 .22em 0 #B9CF1A !important; }
  .lensring { box-shadow: 0 0 0 .22em var(--lime), 0 0 0 .3em rgb(27 27 27 / .35) !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

#s4 .tx { font-size: .95em; }
.ln, .lensring, .dot, .cvb { font-style: normal; }
@media (max-width: 1180px) { .pg.v .scale, .pg.r .scale { margin-left: 0; margin-right: 0; } }
@media (max-width: 560px) {
  .cv-title { font-size: 3em; }
  .sp-q { font-size: 2.2em; }
  .sp { grid-template-columns: 1fr 7.4em; }
  .d100 { width: 100%; }
  .tp b { font-size: 3em; }
  .qx, .fair, .why-g { grid-template-columns: 1fr; }
  .res { margin: .2em 1.3em 1.4em; }
  .rc { padding: 1.1em 1em 1em; }
  .rc dl div { grid-template-columns: 1fr; gap: .15em; }
  .res .cn { left: -1.75em; } .res .cn[data-cn="2"] { right: -1.75em; }
  .desk { width: 100%; margin-left: 0; }
  .desk { font-size: .66em; }
}
.pg .src a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }