/* ==========================================================================
   Salamon Capital — site styles
   Design tokens and components extracted from the original design prototype.
   Values are 1:1 with the prototype; nothing was re-designed here.
   ========================================================================== */

/* --- Fonts (self-hosted; no third-party request, no GDPR exposure) -------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/inter-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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/serif4-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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/serif4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --bg: #12151A;
  --bg-alt: #15181E;
  --bg-deep: #0F1217;
  --bg-frame: #0E1116;
  --bg-card-hover: #17181D;

  --ink: #EDEAE3;
  --ink-2: #BDB9B1;
  --ink-3: #A29E96;
  --muted: #8A8F98;
  --muted-2: #868C96;   /* 5,45 : 1 — bylo #6E747E, tedy 3,89 : 1 */
  --muted-3: #7A818C;   /* 4,54 : 1 — bylo #565C66, tedy 2,72 : 1 */
  --dim: #3E434C;

  --accent: #E8A33D;
  --accent-hi: #F2BC69;
  --accent-btn: #F2B356;

  --line: rgba(237, 234, 227, 0.09);
  --line-soft: rgba(237, 234, 227, 0.08);
  --line-strong: rgba(237, 234, 227, 0.14);
  /* Dráha ukazatele postupu. Nemůže být `--line-strong` jako ostatní linky:
     ta má proti pozadí kontrast 1,44 : 1, což u jednopixelového oddělovače
     stačí, ale u dvoupixelového pruhu to znamená, že ukazatel není vidět —
     a prázdný ukazatel pak vypadá, že tam žádný není. Tahle hodnota dává
     3,18 : 1, tedy hranici, kterou norma žádá pro prvky rozhraní. */
  --bar-track: rgba(237, 234, 227, 0.38);
  --line-frame: rgba(237, 234, 227, 0.12);
  --line-accent: rgba(232, 163, 61, 0.55);

  --serif: 'Source Serif 4', Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1560px;
  --pad-x: clamp(28px, 3.6vw, 64px);
}

/* --- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

input, textarea, button { font-family: inherit; }
::selection { background: rgba(232, 163, 61, 0.3); }
::placeholder { color: #5F6570; }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
}
.skip-link:focus { left: 0; color: var(--bg); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Measure utility — replaces the prototype's one-off `max-width: NNch` rules. */
.mw { max-width: var(--mw); }

/* --- Layout -------------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section { border-top: 1px solid var(--line); }
.section--alt { background: var(--bg-alt); --row-bg: var(--bg-alt); }
.section--deep { background: var(--bg-deep); --row-bg: var(--bg-deep); }
/* Full-bleed row: the container keeps its max-width but drops the side padding,
   so edge-to-edge card grids sit flush like they do in the design. */
.wrap--flush { padding-left: 0; padding-right: 0; }

.pad-sm { padding-top: 56px; padding-bottom: 56px; }
.pad-md { padding-top: clamp(56px, 8vh, 96px); padding-bottom: clamp(56px, 8vh, 96px); }
.pad-lg { padding-top: clamp(64px, 9vh, 110px); padding-bottom: clamp(64px, 9vh, 110px); }
.pad-xl { padding-top: clamp(72px, 11vh, 130px); padding-bottom: clamp(72px, 11vh, 130px); }
.pad-flat { padding-top: 64px; padding-bottom: 64px; }

.page-head {
  padding-top: clamp(64px, 10vh, 120px);
  padding-bottom: clamp(48px, 7vh, 80px);
}
.page-head--contact { padding-bottom: clamp(64px, 9vh, 110px); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 56px;
  align-items: start;
}
.split--wide { gap: 64px; }
.split--narrow {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* --- Typography ---------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin: 0 0 28px;
}
.eyebrow--hero { letter-spacing: 0.22em; margin-bottom: 36px; }
.eyebrow--page { letter-spacing: 0.22em; margin-bottom: 32px; }
.eyebrow--quiet { color: var(--muted); }
.eyebrow--muted { color: var(--muted-2); font-size: 10.5px; letter-spacing: 0.16em; }

.h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.h1--contact { font-size: clamp(34px, 5.2vw, 62px); }

.h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.h2--lg { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.12; }
.h2--xl { font-size: clamp(28px, 4vw, 50px); line-height: 1.1; }
.h2--sm { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.16; }
.h2--xs { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.18; }
.h2--product { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; }
.h2--plain {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: normal;
}
.h2--person { font-size: 30px; line-height: 1.15; letter-spacing: normal; }

.h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}
.h3--card { font-size: 27px; line-height: 1.25; }
.h3--venture { font-size: 26px; line-height: 1.2; }

.lede {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--ink-3);
  font-weight: 300;
  text-wrap: pretty;
}

.p-lg { font-size: 17px; line-height: 1.75; color: var(--ink-2); font-weight: 300; text-wrap: pretty; }
.p-md { font-size: 16px; line-height: 1.75; color: var(--ink-2); font-weight: 300; text-wrap: pretty; }
.p-sm { font-size: 15px; line-height: 1.75; color: var(--ink-3); font-weight: 300; }
.p-xs { font-size: 14.5px; line-height: 1.7; color: var(--ink-3); font-weight: 300; }
.p-loose { line-height: 1.8; }
.is-dim { color: var(--ink-3); }
.stack > * + * { margin-top: 24px; }
.stack { margin: 0; }

.note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
}

.disclaimer {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  line-height: 1.9;
  color: var(--muted-3);
}

/* --- Navigation ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  min-height: 76px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}
.brand {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand__accent { color: var(--accent); }

.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px clamp(14px, 2.4vw, 32px);
}
.nav__link {
  position: relative;
  padding: 6px 0;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  transition: color 200ms ease;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
}

/* Language switch sits beside the links, separated by a hairline — the shape
   the original design used for it. It is rendered only where the counterpart
   page exists. */
.nav__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(14px, 2.6vw, 36px);
}
.lang-switch {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  padding-left: clamp(12px, 2vw, 28px);
  border-left: 1px solid var(--line);
  transition: color 200ms ease;
}
.lang-switch:hover { color: var(--accent); }

/* --- Buttons and links --------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 17px 30px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.btn--primary {
  background: var(--accent);
  color: var(--bg);
  transition: box-shadow 200ms ease, background 200ms ease;
}
.btn--primary:hover {
  background: var(--accent-btn);
  color: var(--bg);
  box-shadow: 0 0 28px rgba(232, 163, 61, 0.32);
}
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(232, 163, 61, 0.5);
  color: var(--accent);
  transition: background 200ms ease, border-color 200ms ease;
}
.btn--ghost:hover {
  background: rgba(232, 163, 61, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.btn--sm { padding: 16px 28px; }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* Tlačítko pro to, co ještě není. Sází se jako <span>, ne jako <a> bez href
   ani jako `.btn--ghost` s `pointer-events: none`: prvek, který nikam nevede,
   nemá být ani zaostřitelný. Odkaz bez href do pořadí tabulátoru nepatří,
   ale odkaz s href a vypnutými událostmi ano — a čtenář na klávesnici na něj
   dojede, stiskne enter a nestane se nic. `<span>` tenhle rozpor nemá.
   Stejnou úvahou stojí `.link-arrow--off` o pár řádků níž.
   Stav je i ve slovech („in progress“ / „připravujeme“), takže se nedozvídá
   jen barvou — 0,55 opacity čtečka obrazovky nepřečte. */
.btn--off {
  background: transparent;
  border: 1px solid var(--line-frame);
  color: var(--muted-3);
  cursor: default;
}
.btn--off em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}

.link-arrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  transition: opacity 200ms ease;
}
.link-arrow:hover { opacity: 0.7; color: var(--accent); }
.link-arrow--off { color: var(--muted-3); }

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

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(640px, 94vh, 1040px);
  display: flex;
  align-items: center;
}
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 85% 130% at 122% 50%,
    rgba(232,163,61,0.2) 0%, rgba(232,163,61,0.07) 30%,
    rgba(232,163,61,0.02) 52%, rgba(232,163,61,0) 72%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(80px, 13vh, 160px) var(--pad-x) clamp(80px, 12vh, 140px);
}
.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6.6vw, 80px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  padding-bottom: 0.14em;
  /* The longest line only reaches ~86% of the gradient box, so the original ramp
     — which hit full brightness exactly at 100% — never put its brightest tone
     on a glyph. Full brightness lands at 76% and holds to the end, so the
     right-hand text reads as genuinely 100% whatever the line breaks do, while
     the dark falloff on the left is left alone. */
  /* Rampa nesmí začínat tmou. Původní zarážka #4A4741 na 0 % dávala proti
     pozadí kontrast 1,98 : 1 a padala přesně na první slovo, které zabírá
     0–38 % šířky boxu — začátek nejdůležitější věty na webu byl tmavá
     grafitová na tmavě grafitové. WCAG žádá u velkého textu aspoň 3 : 1.
     Nejsvětlejší tón dosedá na 76 %: posun stopů kvůli kontrastu ho
     přitáhl blíž ke středu boxu. */
  background-image: linear-gradient(100deg,
    #8B857A 0%, #A9A294 26%, #E9DBC0 54%, #FFFCF5 76%, #FFFCF5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-wrap: balance;
}
.hero__lede {
  margin: 36px 0 0;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  font-weight: 300;
  background-image: linear-gradient(100deg, #8F8B82 0%, #A8A39A 55%, #CFC6B6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-wrap: pretty;
}

.beam { position: absolute; top: 50%; transform: translateY(-50%); }
.beam--wide {
  right: -48%; width: 170vw; height: 190vh;
  background: radial-gradient(ellipse 100% 50% at 100% 50%,
    rgba(240,183,96,0.5) 0%, rgba(232,163,61,0.26) 22%, rgba(232,163,61,0.1) 44%,
    rgba(232,163,61,0.03) 64%, rgba(232,163,61,0) 82%);
  filter: blur(46px);
  animation: scBeamWide 24s ease-in-out infinite;
}
.beam--tilt {
  right: -36%; width: 140vw; height: 100vh;
  background: radial-gradient(ellipse 100% 38% at 100% 50%,
    rgba(255,226,178,0.46) 0%, rgba(240,183,96,0.18) 26%,
    rgba(232,163,61,0.04) 58%, rgba(232,163,61,0) 80%);
  filter: blur(32px);
  animation: scBeamTilt 34s ease-in-out infinite;
}
.beam--sweep {
  right: -30%; width: 126vw; height: 48vh;
  background: radial-gradient(ellipse 100% 30% at 100% 50%,
    rgba(255,240,210,0.24) 0%, rgba(244,197,116,0.08) 34%, rgba(232,163,61,0) 72%);
  filter: blur(34px);
  animation: scBeamSweep 28s ease-in-out infinite;
}
.beam--core {
  right: -22vw; width: 62vw; height: clamp(18px, 3vw, 52px);
  background: linear-gradient(to left,
    rgba(255,246,228,0.6) 0%, rgba(250,214,160,0.3) 18%, rgba(240,183,96,0.12) 42%,
    rgba(232,163,61,0.03) 68%, rgba(232,163,61,0) 92%);
  filter: blur(26px);
  animation: scBeamCore 16s ease-in-out infinite;
}
.beam--orb {
  right: clamp(-380px, -18vw, -70px);
  width: clamp(220px, 30vw, 520px);
  height: clamp(220px, 30vw, 520px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,252,246,0.85) 0%, rgba(255,230,186,0.44) 26%, rgba(240,183,96,0.16) 42%,
    rgba(232,163,61,0.04) 60%, rgba(232,163,61,0) 76%);
  filter: blur(22px);
  animation: scBeamOrb 13s ease-in-out infinite;
}

.dust { position: absolute; inset: 0; }
.dust i { position: absolute; border-radius: 50%; display: block; }

@keyframes scBeamWide {
  0%   { opacity: 0.78; transform: translateY(-50%) scale(0.97); }
  50%  { opacity: 1;    transform: translateY(-50%) scale(1.03); }
  100% { opacity: 0.78; transform: translateY(-50%) scale(0.97); }
}
@keyframes scBeamCore {
  0%   { opacity: 0.8; transform: translateY(-50%) scaleX(0.97) scaleY(0.9); }
  50%  { opacity: 1;   transform: translateY(-50%) scaleX(1.02) scaleY(1.08); }
  100% { opacity: 0.8; transform: translateY(-50%) scaleX(0.97) scaleY(0.9); }
}
@keyframes scBeamTilt {
  0%   { opacity: 0.6; transform: translateY(-50%) rotate(-2.5deg) scale(0.98); }
  50%  { opacity: 0.9; transform: translateY(-50%) rotate(1.5deg) scale(1.03); }
  100% { opacity: 0.6; transform: translateY(-50%) rotate(-2.5deg) scale(0.98); }
}
@keyframes scBeamOrb {
  0%   { opacity: 0.82; transform: translateY(-50%) scale(0.96); }
  50%  { opacity: 1;    transform: translateY(-50%) scale(1.06); }
  100% { opacity: 0.82; transform: translateY(-50%) scale(0.96); }
}
@keyframes scBeamSweep {
  0%   { opacity: 0.4;  transform: translateY(-50%) translateX(1.5%) scaleY(0.94); }
  50%  { opacity: 0.66; transform: translateY(-50%) translateX(-1.5%) scaleY(1.06); }
  100% { opacity: 0.4;  transform: translateY(-50%) translateX(1.5%) scaleY(0.94); }
}
@keyframes scDust1 {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 0.85; }
  100% { transform: translate(-260px, -120px); opacity: 0; }
}
@keyframes scDust2 {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 0.9; }
  78%  { opacity: 0.7; }
  100% { transform: translate(-420px, 90px); opacity: 0; }
}
@keyframes scDust3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-180px, -220px) scale(0.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .beam, .dust i { animation: none !important; }
}

/* --- Cards --------------------------------------------------------------- */

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
}
.cards--bordered { border: 1px solid var(--line); }

.card {
  flex: 1 1 300px;
  min-width: 0;
  padding: 56px var(--pad-x) 64px;
  background: var(--bg);
}
.card--link { transition: background 200ms ease; }
.card--link:hover { background: var(--bg-card-hover); }
.card--wide { flex-basis: 340px; }
.card--tight {
  flex-basis: 260px;
  padding: 30px 28px 34px;
  background: var(--bg-alt);
}
.card--venture {
  flex-basis: 320px;
  padding: 36px 34px 40px;
  background: var(--bg-deep);
}
.card--venture-wide { flex-basis: 380px; }

.card__title { margin: 0 0 18px; }
.card__body { margin: 0 0 26px; }
.card__lines {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-2);
  font-weight: 300;
}
.card__eyebrow { font-size: 11px; letter-spacing: 0.18em; margin-bottom: 18px; }

.service-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
.service-head--tight { margin-bottom: 12px; }
.service-head__letter {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

/* Social-proof logo row — markup currently commented out in index.html. */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.logo-slot {
  height: 64px;
  border: 1px solid var(--line-soft);
  background: repeating-linear-gradient(135deg, rgba(237,234,227,0.05) 0 1px, transparent 1px 9px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted-3);
}

/* --- Spec lists ---------------------------------------------------------- */

.speclist {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec {
  background: var(--row-bg, var(--bg));
  padding: 16px 0;
  display: flex;
  gap: 20px;
  align-items: baseline;
}
.speclist--roomy .spec { padding: 18px 0; gap: 24px; }
.spec__key {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
  min-width: var(--kw, auto);
  flex-shrink: 0;
}
.speclist--roomy .spec__key { font-size: 11px; letter-spacing: 0.14em; }
.spec__val { font-size: 15px; color: var(--ink); font-weight: 300; }
.speclist--roomy .spec__val { font-size: 14.5px; color: var(--ink-3); }

/* --- Process ------------------------------------------------------------- */

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.process {
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}
.process--first { border-top-color: var(--line-accent); }
.process__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 18px;
}
.process--first .process__label { color: var(--accent); }
.process .h3 { margin-bottom: 12px; }

/* --- Products ------------------------------------------------------------ */

.badge-row {
  display: flex;
  /* Na mobilu vyjde dvojice „SHOPIFY PARTNER / APLIKACE PRO E-SHOPY" na 319 px
     obsahové šířky přesně. Bez zalomení by první delší popisek nemačkal řádek,
     ale text uvnitř rámečku odznaku — a rozbitá by byla ta část, která má
     působit jako pečeť. */
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1px solid rgba(232, 163, 61, 0.45);
  padding: 5px 10px;
}
.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted-2);
}

.frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-frame);
  overflow: hidden;
  background: var(--bg-frame);
}
/* Bez ztlumení. `.frame img` dřív snižoval sytost a jas, ale galerie ho
   přebíjela na `none`, takže se uplatňoval jen na velkém snímku ZEUSu —
   a tam je snímek ten důkaz, kvůli kterému blok stojí. Ztlumit ho znamená
   ztlumit argument. */
.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
/* Rámeček, který přetéká za pravý okraj okna — snímek produktu má působit,
   že aplikace pokračuje mimo stránku, ne že je to obrázek v rámečku.

   Sekce ho MUSÍ oříznout. Bez toho ořezu přetečení zvětší šířku dokumentu
   a stránka získá vodorovné posouvání; to je porucha, kterou si tenhle
   repozitář hlídá na 375 px a která se na širokém monitoru nepozná.

   Přesah se počítá k okraji okna a ještě 160 px za něj:
     max(0px, (100vw - maxw) / 2)  … postranní mezera mimo obsahový sloupec
   + var(--pad-x)                  … vnitřní odsazení wrapu
   + 160px                         … kolik se má utopit za okrajem
   Vnější max(0px, …) je tam kvůli oknům užším než --maxw: bez něj by mezera vyšla
   záporně, znaménko by se otočilo a rámeček by se místo roztažení zúžil. */
.section--bleed { overflow: hidden; }
.frame--bleed {
  margin-right: calc(-1 * (max(0px, (100vw - var(--maxw)) / 2) + var(--pad-x) + 160px));
}
/* Pod 900 px se sloupce skládají pod sebe a rámeček je přes celou šířku —
   přesah by z něj ukrojil třetinu, ne aby ho protáhl za okraj. */
@media (max-width: 900px) {
  .frame--bleed { margin-right: 0; }
}

.frame__link {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: rgba(18, 21, 26, 0.8);
  padding: 6px 10px;
}

/* --- Snímky produktu ----------------------------------------------------- */
/* Mřížka nad `.frame`: jedna obrazovka = jeden rámeček, popiska pod ním.
   Popiska je venku schválně — uvnitř by ležela přes rozhraní, které je samo
   hustě popsané, a nedalo by se přečíst ani jedno.

   `contain`, ne `cover`. Rámečky jinde na webu jsou dekorace a oříznutí jim
   nevadí; tady je obsahem ta obrazovka a oříznout jí okraj znamená ukázat
   půlku toho, kvůli čemu tam je. Letterbox padne na `--bg-frame`, tedy skoro
   na barvu stránky.

   A bez `filter`. Ostatní rámečky se tlumí, aby fotka nekřičela přes text —
   tyhle snímky jsou důkaz, ne pozadí, a ztmavené UI vypadá jako vypnuté. */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 30px 26px;
}
.shot { min-width: 0; }
.shot .frame { aspect-ratio: 16 / 10; }
.shot .frame img {
  object-fit: contain;
  object-position: center;
}

.shot__cap {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  margin: 12px 0 0;
}

/* --- Partnerství --------------------------------------------------------- */
/* Viz komentář u `partners` v `src/_data/site.js` — text, ne cizí logo. */

.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 24px 48px;
}
.partners__label { margin: 0; flex: 0 0 auto; }
.partners__list {
  flex: 1 1 480px;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line-frame);
}
.partner {
  /* 230, ne 260: seznam má vedle popisku 1 026 px a čtyři karty po 260
     se do něj nevešly — čtvrtá spadla sama na druhý řádek a roztáhla se
     přes celou šířku (změřeno 10. 9. 2026). Čtyři po 230 se vejdou. */
  flex: 1 1 230px;
  min-width: 0;
  background: var(--bg-deep);
  padding: 18px 22px 20px;
  /* Sloupec kvůli popisku, který se pak dá přisadit ke spodní hraně —
     viz `.partner__note`. Karty jsou ve flexovém řádku stejně vysoké už
     teď, takže se tím nic jiného nemění. */
  display: flex;
  flex-direction: column;
}
/* Jediný partner se neroztahuje přes celou šířku.

   Pro dva a víc je `flex: 1 1` správně — karty si rozdělí řádek rovným
   dílem. U jediné se ale roztáhne karta i seznam a vznikne přes tisíc pixelů
   široký obdélník s jedním logem a jednou větou; to nečte jako odznak, ale
   jako místo po něčem, co zmizelo.

   `:only-child` platí právě tehdy, když je partner sám, a jakmile přibude
   druhý, přestane se uplatňovat bez zásahu. Prohlížeč bez `:has()` dostane
   dnešní roztažené chování — zhoršení, ne rozbití. */
.partners__list:has(.partner:only-child) { flex: 0 1 auto; }
.partner:only-child {
  flex: 0 1 auto;
  min-width: 300px;
}

.partner__name {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}
.partner__kind {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-top: 7px;
}
/* Odznak partnera místo jména.

   Rozměry si nese sám obrázek v atributech (`width`/`height` ze `site.js`),
   takže tady po nich není ani stopa: Shopify je 156×26 wordmark, Cisco
   68×44 odznak. Kdyby výška ležela v CSS, byla by dvě různá a při příští
   změně by se jedno z nich zapomnělo — a nespadlo by nic, jen by se logo
   vykreslilo v jiné velikosti, než jakou slibují atributy.

   `height: auto` s `max-width: 100%` drží poměr stran i na nejužší kartě.
   Pevná výška ho nedrží: při 260px základu a 22px odsazení by se širší
   lockup zúžil do šířky a zůstal vysoký, tedy roztažený. */
.partner__logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 2px;
}

/* Odznak vlevo, popisek vedle něj.

   Wordmark je široký a nízký, takže mu popisek patří pod nohy; odznak je
   skoro čtvercový a vedle sebe má v kartě čtyři sta pixelů volna, do kterých
   se popisek vejde. Řídí to `vedle` v datech, ne šířka měřená za běhu:
   o tom, jestli je logo wordmark, nebo odznak, rozhoduje značka, ne okno.

   Sesazuje se na střed, protože obojí je jeden lockup — zarovnat popisek
   k horní hraně odznaku znamená, že u jednořádkového popisku zbude pod ním
   třicet pixelů a lockup se rozpadne na dvě věci nad sebou. */
.partner--vedle {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.partner--vedle picture { flex: 0 0 auto; }
.partner--vedle .partner__logo { margin-bottom: 0; }
/* Přebíjí `margin: auto 0 0` z `.partner__note` — ve sloupci popisek
   přisazuje ke spodku, v řádku by ho vystřelil doprava. Specificita (0,2,0)
   proti (0,1,0), tedy vyhraje bez `!important`. */
.partner--vedle .partner__note {
  margin: 0;
  padding-top: 0;
}

/* Popisek sedí u spodní hrany karty, ne pod logem.

   Odznaky nejsou stejně vysoké a být nemůžou: Shopify je wordmark vysoký
   26 px, CCNA je odznak se dvěma řádky textu uvnitř, tedy 56 px i s
   podložkou. Kdyby popisek visel pod logem, začínal by v každé kartě jinde
   a ta třicetipixelová neshoda je přesně ta vada, kterou člověk na obrázku
   vidí a neumí pojmenovat.

   `margin-top: auto` místo pevné výšky loga schválně: pevná výška je číslo,
   které se musí měnit s každým dalším odznakem, a tohle drží samo. */
.partner__note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: auto 0 0;
  padding-top: 10px;
}

.stat-stack {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat { background: var(--bg-alt); padding: 28px 26px; }
.stat__num {
  font-family: var(--mono);
  font-size: 26px;
  color: var(--accent);
  margin-bottom: 8px;
}
.stat__label { font-size: 14px; color: var(--ink-3); font-weight: 300; }

.ventures {
  position: relative;
  overflow: hidden;
}
.ventures__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(80px, 12vh, 150px) var(--pad-x);
}
.ventures__mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 95% at 2% 50%,
    rgba(15,18,23,0.8) 0%, rgba(15,18,23,0.4) 42%, rgba(15,18,23,0) 70%);
}
.ventures nebula-field { position: absolute; inset: 0; z-index: 0; }

.bignum-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.bignum {
  font-family: var(--serif);
  font-size: clamp(46px, 5.6vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.bignum-row__unit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.round {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 26px;
}
.round__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted-3);
  margin-bottom: 8px;
}
.round__value { font-family: var(--mono); font-size: 22px; color: var(--ink-3); }
.round__value--now { color: var(--accent); }
.round__arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted-3);
  padding-bottom: 4px;
}

.holdings {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-frame);
  margin: 0;
  padding: 0;
  list-style: none;
}
.holding {
  flex: 1 1 300px;
  min-width: 0;
  background: var(--bg-deep);
  padding: 20px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.holding__name { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.holding__meta { display: flex; align-items: baseline; gap: 12px; }
.holding__sym {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.holding__kind {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
}

/* --- About --------------------------------------------------------------- */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  max-width: var(--maxw);
  margin: 0 auto;
}
.person { padding: 56px var(--pad-x) 64px; background: var(--bg); }
.portrait {
  max-width: 300px;
  margin-bottom: 32px;
  border: 1px solid rgba(237, 234, 227, 0.1);
}
.portrait img {
  display: block;
  width: 100%;
  /* `height: auto` musí být, jinak je `aspect-ratio` mrtvé pravidlo.
     Atributy `width`/`height` na <img> jsou prezentační nápověda pro CSS
     vlastnosti width a height. Šířku přebije `width: 100%`, ale výšku
     nepřebíjelo nic — takže platilo height: 797px z HTML, obě strany byly
     definitivní a `aspect-ratio` se podle specifikace ignoruje. Portréty se
     kreslily 250 × 797 místo 250 × 312, tedy poměr 0,31 místo 0,8.

     Bylo to tak od prvního commitu a na produkci taky. Nevypadá to jako
     chybějící deklarace — vypadá to jako fotka nahraná ve špatném ořezu,
     což je přesně ten druh poruchy, který se hledá v obrázku a ne v CSS. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.03) brightness(0.95);
}
.portrait img.is-filip { object-position: 50% 22%; }
.portrait img.is-martina { object-position: 50% 18%; }
.person__role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 14px;
}
.person .h2 { margin-bottom: 18px; }

.vision-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.vision { background: var(--row-bg, var(--bg)); padding: 26px 0; }
.vision__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 12px;
}

/* --- Contact ------------------------------------------------------------- */

.form {
  margin-top: 64px;
  display: grid;
  gap: 36px;
}
.field__label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 10px;
}
.field__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px 0;
  font-size: 17px;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms ease;
  border-radius: 0;
}
textarea.field__input { line-height: 1.6; resize: vertical; }
.field__input:focus { border-bottom-color: var(--accent); }
.field__input:user-invalid { border-bottom-color: #C4543A; }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.form__consent {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--muted-3);
  max-width: 42ch;
}
.form__consent a { color: var(--muted-2); border-bottom: 1px solid rgba(232, 163, 61, 0.3); }
.form__consent a:hover { color: var(--accent); }

.form__error {
  font-size: 14.5px;
  line-height: 1.6;
  color: #E48B6C;
  font-weight: 300;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.success {
  margin-top: 64px;
  border-top: 1px solid var(--line-accent);
  padding-top: 32px;
}
.success__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 18px;
}
.success .h2 { margin-bottom: 14px; }

.contact-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}
.contact-facts__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0 0 14px;
}
.contact-facts__value { font-size: 17px; color: var(--ink-2); font-weight: 300; }

/* --- Legal pages --------------------------------------------------------- */

.legal { max-width: 760px; }

/* Reading measure for long-form pages — service detail, and later insights and
   case studies. Same width as .legal, named for what it does. */
.longform { max-width: 760px; }

.prose { font-size: 16px; line-height: 1.8; color: var(--ink-2); font-weight: 300; }
/* Reset UA margins at zero specificity so the spacing rules below still win. */
.prose :where(p, ul) { margin: 0; }
.prose > * + * { margin-top: 20px; }
.prose h2 {
  margin: 56px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prose h2 + * { margin-top: 16px; }
.prose h3 {
  margin: 32px 0 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
.prose h3 + * { margin-top: 12px; }
.prose ul { padding-left: 20px; }
.prose li { margin-top: 10px; }
.prose li::marker { color: var(--muted-3); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a { border-bottom: 1px solid rgba(232, 163, 61, 0.35); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.prose th {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.prose td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.65;
}
.prose td:last-child, .prose th:last-child { padding-right: 0; }
.table-scroll { overflow-x: auto; }

.legal-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
  margin: 28px 0 0;
}

/* Unfilled company details. Deliberately loud — this must not reach production
   unnoticed. Replace the text and delete the <span> wrapper. */
.todo {
  font-family: var(--mono);
  font-size: 0.88em;
  letter-spacing: 0.04em;
  color: #12151A;
  background: var(--accent);
  padding: 1px 6px;
  /* Bez `white-space: nowrap`. Byla to sázka na to, že každá nedodělaná
     položka je krátká jako „IČO" — a padla na první delší větě: značka
     o DPH roztáhla prodejní stránku na 698 px v okně širokém 375 a stránka
     se dala posouvat do strany. Krátká značka se nezalomí tak jako tak,
     protože se vejde na řádek. */
  overflow-wrap: anywhere;
}

.callout {
  border-left: 2px solid var(--line-accent);
  padding: 4px 0 4px 20px;
  color: var(--ink-3);
}

/* --- Article furniture ---------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted-3);
  text-transform: uppercase;
}
.crumbs a { color: var(--muted-2); }
.crumbs a:hover { color: var(--accent); }

/* Article beside a rail that follows the reader down the page. */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(40px, 4.5vw, 80px);
  padding-top: 24px;
  padding-bottom: clamp(64px, 9vh, 110px);
  /* No align-items here on purpose. The rail column has to stretch to the full
     row height, otherwise the sticky box inside it has nowhere to travel and
     simply scrolls away with the page. */
  align-items: stretch;
}
.article-main { min-width: 0; max-width: 760px; }
.article-side__sticky {
  position: sticky;
  top: 96px;               /* clears the sticky header */
  display: grid;
  gap: 18px;
}

/* Below this width the rail would squeeze the text, and everything in it
   already appears in the article flow — so it is dropped rather than stacked. */
@media (max-width: 1080px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-side { display: none; }
}

.h1--article { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.1; }

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.byline a { color: var(--ink-3); border-bottom: 1px solid rgba(232, 163, 61, 0.3); }
.byline a:hover { color: var(--accent); }

.badge--updated {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--bg);
  background: var(--accent);
  padding: 4px 8px;
}

/* The answer box. First thing a reader sees, and the passage most likely to be
   lifted into a search result — so it has to answer the headline on its own. */
.summary-box {
  margin-top: 36px;
  padding: 24px 0 24px 24px;
  border-left: 2px solid var(--accent);
}
.summary-box p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
  font-weight: 300;
  text-wrap: pretty;
}
.summary-box strong { color: var(--ink); font-weight: 500; }

.toc {
  margin-top: 44px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.toc__title {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.toc__list { margin: 0; padding: 0 0 0 22px; display: grid; gap: 10px; }
.toc__list li::marker { color: var(--muted-3); font-family: var(--mono); font-size: 11px; }
.toc__list a { color: var(--ink-2); font-size: 15px; font-weight: 300; }
.toc__list a:hover { color: var(--accent); }

/* Scrolling to an anchor must not hide the heading under the sticky header. */
.prose h2, .prose h3 { scroll-margin-top: 96px; }

/* ---------------------------------------------------------------------------
   Kalkulačka nákladů na agenta

   Stojí uvnitř `.prose`, kde jsou pravidla kvalifikovaná elementem
   (`.prose h2`, `.prose td`) se specificitou (0,1,1). Vnitřek komponenty je
   proto dvoutřídní (`.acalc .acalc__l`), aby nezáležel na tom, co `.prose`
   zrovna dělá s odstavci a nadpisy. Stejná past jako v klientské sekci, jen
   o soubor vedle.
--------------------------------------------------------------------------- */

.acalc {
  margin: 34px 0;
  padding: 26px 24px 22px;
  background: var(--bg-alt);
  border: 1px solid var(--line-frame);
}
.acalc .acalc__cap {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.acalc .acalc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 26px 30px;
}
.acalc .acalc__gh {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.acalc .acalc__f { display: block; }
.acalc .acalc__f + .acalc__f { margin-top: 14px; }
.acalc .acalc__l {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-3);
}
.acalc .acalc__i {
  width: 100%;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.acalc .acalc__i:focus { outline: none; border-bottom-color: var(--accent); }
.acalc .acalc__i:focus-visible { outline: 2px solid var(--line-accent); outline-offset: 3px; }
/* Nabídka se vykresluje systémem, takže tmavé pozadí musí dostat i ona —
   jinak je na některých systémech bílý text na bílém. */
.acalc select.acalc__i option { background: var(--bg-alt); color: var(--ink); }

.acalc .acalc__out {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.acalc .acalc__err {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--r-4, #D2706A);
}
.acalc .acalc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.acalc .acalc__rl { font-size: 14px; font-weight: 300; color: var(--ink-3); }
.acalc .acalc__rv {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  text-align: right;
}
.acalc .acalc__row--sum { border-bottom: 0; padding-top: 14px; }
.acalc .acalc__row--sum .acalc__rl { font-size: 15px; color: var(--ink); }
.acalc .acalc__row--sum .acalc__rv {
  font-family: var(--serif);
  font-size: 27px;
  color: var(--accent);
}
.acalc .acalc__sharel {
  margin: 6px 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.acalc .acalc__sharel b { color: var(--ink); font-weight: 500; }

/* Pruh je jediné místo, kde je poměr tří položek vidět naráz. Právě ten poměr
   je pointa článku — tokeny bývají ten nejmenší díl. */
.acalc .acalc__bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  background: var(--line);
}
.acalc .acalc__seg { display: block; height: 100%; transition: width 160ms ease; }
.acalc .acalc__seg--tok  { background: var(--accent); }
.acalc .acalc__seg--lide { background: #5FA8D3; }
.acalc .acalc__seg--apar { background: #6FBF8B; }

.acalc .acalc__gh--lever { margin: 26px 0 4px; }
.acalc .acalc__verdict {
  margin: 14px 0 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}
.acalc .acalc__note {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted-3);
}

@media (max-width: 560px) {
  .acalc { padding: 20px 16px 18px; }
  .acalc .acalc__grid { gap: 22px 0; }
}

.note-box {
  margin: 32px 0;
  padding: 22px 24px;
  background: var(--bg-alt);
  border-left: 2px solid var(--line-strong);
}
.note-box--tip { border-left-color: var(--accent); }
.note-box--key { border-left-color: var(--accent); background: rgba(232, 163, 61, 0.06); }
.note-box__label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.note-box--example .note-box__label { color: var(--muted); }
.note-box__body > :first-child { margin-top: 0; }
.note-box__body > :last-child { margin-bottom: 0; }
.note-box__body p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; }
.note-box .link-arrow { margin-top: 6px; }

.service-box {
  margin: 40px 0;
  padding: 30px 28px 32px;
  border: 1px solid var(--line-frame);
  background: var(--bg-alt);
}
.service-box__body p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; color: var(--ink-3); }
.service-box__body > :last-child { margin-bottom: 0; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { display: grid; gap: 12px; margin-top: 8px; }
.faq__item {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  transition: border-color 200ms ease, background 200ms ease;
}
.faq__item:hover { border-color: var(--line-strong); }
.faq__item[open] {
  border-color: rgba(232, 163, 61, 0.4);
  background: rgba(232, 163, 61, 0.04);
}
.faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 22px;
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.4;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q > span { flex: 1 1 auto; }
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 7px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 12px no-repeat;
  transition: transform 220ms ease;
}
.faq__item[open] .faq__q::after {
  background: linear-gradient(var(--accent), var(--accent)) center / 12px 1.5px no-repeat;
  transform: rotate(180deg);
}
.faq__q:hover { color: var(--accent); }
.faq__a { padding: 0 22px 22px; }
.faq__a p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--ink-3); max-width: 62ch; }

/* --- Closing offer -------------------------------------------------------- */

.offer {
  margin-top: 56px;
  padding: 34px 32px 36px;
  border: 1px solid var(--line-frame);
  border-left: 2px solid var(--accent);
  background: var(--bg-alt);
}
.offer__points {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px 32px;
}
.offer__points li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  font-weight: 300;
}
.offer__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 13px;
}

/* --- Author, end of article ------------------------------------------------ */

.author-section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.author-section__head {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.author-section__head img {
  width: 120px;
  height: 150px;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.03) brightness(0.95);
  border: 1px solid rgba(237, 234, 227, 0.1);
  display: block;
}
.author-section__head > div { flex: 1 1 300px; min-width: 0; }
.author-section__name { margin: 0 0 8px; font-family: var(--serif); font-size: 26px; color: var(--ink); }
.author-section__name a { color: var(--ink); }
.author-section__name a:hover { color: var(--accent); }
.author-section__role {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.author-section__creds {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px 24px;
  align-items: start;
}
.author-section__creds-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.author-section__creds ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.author-section__creds li { font-size: 15px; line-height: 1.5; color: var(--ink-2); font-weight: 300; }
@media (max-width: 560px) {
  .author-section__creds { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
.share__label { color: var(--muted-3); }
.share a { color: var(--muted-2); }
.share a:hover { color: var(--accent); }

/* --- Sticky rail ---------------------------------------------------------- */

.side-card {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 22px 22px 24px;
}
.side-card--cta { border-color: rgba(232, 163, 61, 0.35); }
.side-card__label {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted-2);
}
.side-card__label--live { color: var(--accent); display: flex; align-items: center; gap: 9px; }
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.18);
}

.side-author { display: flex; gap: 14px; align-items: center; }
.side-author img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.03) brightness(0.95);
  border: 1px solid rgba(237, 234, 227, 0.1);
  display: block;
}
.side-author__name { margin: 0 0 5px; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.side-author__name a { color: var(--ink); }
.side-author__name a:hover { color: var(--accent); }
.side-author__role {
  margin: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--muted);
}

.side-cta__title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}
.side-cta__body { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--ink-3); font-weight: 300; }
.side-cta__form { display: grid; gap: 12px; }
.side-cta__form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: border-color 200ms ease;
}
.side-cta__form textarea:focus { border-color: var(--accent); }
.side-cta__form .btn { width: 100%; padding: 14px 20px; }
.side-cta__foot {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--muted-3);
}

/* --- Insights finder: search and topic filter ----------------------------- */

.finder { display: grid; gap: 22px; }

.finder__search { position: relative; max-width: 520px; }
.finder__search input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 15px 44px 15px 18px;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.finder__search input:focus { border-color: var(--accent); }
.finder__search input::-webkit-search-cancel-button { display: none; }
.finder__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.finder__clear:hover { color: var(--accent); }

.finder__tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; }
.finder__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted-3);
  padding-top: 6px;
}
.finder__status {
  margin: 0;
  min-height: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  text-transform: uppercase;
}
.tag:hover { border-color: var(--accent); color: var(--accent); }
.tag.is-active {
  border-color: var(--accent);
  background: rgba(232, 163, 61, 0.12);
  color: var(--accent);
}
.tag__count { color: var(--muted-3); font-size: 9.5px; }
.tag.is-active .tag__count { color: var(--accent); }

.post-list__empty {
  margin: 0;
  padding: 48px var(--pad-x);
  font-size: 16px;
  color: var(--ink-3);
  font-weight: 300;
}
.post-list__empty .link-arrow {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  font-family: var(--mono);
}

/* The article rows carry their own tags, which double as filter shortcuts. */
.post-row .tag-row { margin-top: 4px; }

/* --- Insights list ------------------------------------------------------- */

.post-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.post-row {
  background: var(--bg);
  padding: 40px var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
  transition: background 200ms ease;
}
.post-row:hover { background: var(--bg-card-hover); }
.post-row__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
  padding-top: 4px;
}
.post-row__body h2 a { color: var(--ink); }
.post-row__body h2 a:hover { color: var(--accent); }

@media (max-width: 720px) {
  .post-row { grid-template-columns: 1fr; gap: 14px; }
  .post-row__meta { flex-direction: row; gap: 16px; padding-top: 0; }
}

/* Case-study results read better side by side than stacked. */
.stat-stack--row {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border: 1px solid var(--line);
}

/* --- AI Readiness Assessment ---------------------------------------------- */

/* Background field: nebula, the assembling Dyson sphere, and occasional comets.
   Fixed rather than absolute so the sphere stays with the reader through a long
   result page instead of scrolling away mid-assembly. */
.asmt-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.asmt-field nebula-field { position: absolute; inset: 0; opacity: 0.55; }
.asmt-field dyson-field,
.asmt-field comet-field { position: absolute; inset: 0; }

/* Everything the reader interacts with sits above the field. */
.asmt-wrap, .crumbs { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .asmt-field comet-field { display: none; }
}

/* --- AI Readiness Assessment (continued) ---------------------------------------------- */

.asmt-wrap {
  padding-top: clamp(32px, 6vh, 64px);
  padding-bottom: clamp(64px, 10vh, 120px);
  min-height: 62vh;
}
.asmt-landing { max-width: 760px; }

/* Progress: one tick per statement, filling as answers land. */
.asmt-progress {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(40px, 8vh, 80px);
}
.asmt-ticks { display: flex; gap: 4px; flex: 1 1 auto; }
.asmt-tick {
  flex: 1 1 auto;
  height: 2px;
  background: var(--line-strong);
  transition: background 260ms ease, height 260ms ease;
}
.asmt-tick.is-done { background: var(--accent); height: 4px; }
.asmt-tick.is-here { background: rgba(232, 163, 61, 0.45); height: 4px; }
.asmt-count {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
}

.asmt-q { max-width: 820px; }
.asmt-q__text {
  margin: 0 0 clamp(40px, 7vh, 72px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.asmt-scale { display: grid; gap: 16px; }
.asmt-scale__end {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted-3);
}
.asmt-scale__end--hi { text-align: right; }
.asmt-dots { display: flex; gap: clamp(6px, 1.4vw, 14px); }
.asmt-dot {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  max-height: 74px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.asmt-dot:hover { border-color: var(--accent); color: var(--accent); }
.asmt-dot.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 26px rgba(232, 163, 61, 0.32);
}

.asmt-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(32px, 5vh, 52px);
}
.asmt-nav .link-arrow { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); }

.asmt-break { max-width: 640px; padding-top: clamp(24px, 5vh, 56px); }
.asmt-break__text {
  margin: 0 0 36px;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.3;
  color: var(--ink-2);
}

/* --- result --------------------------------------------------------------- */

.asmt-result { max-width: 820px; }

.asmt-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: clamp(36px, 6vh, 56px);
}
.asmt-type { background: var(--bg-alt); padding: 28px 26px 30px; }
.asmt-type__label {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.asmt-type__name {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.15;
  color: var(--ink);
}

/* The sentence someone screenshots. */
.asmt-gap {
  margin: 0 0 clamp(40px, 7vh, 64px);
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

.asmt-axis { margin-bottom: clamp(40px, 7vh, 64px); }
.asmt-axis__track {
  position: relative;
  height: 1px;
  background: var(--line-strong);
  margin: 44px 0 14px;
}
.asmt-axis__span {
  position: absolute;
  top: 0;
  height: 1px;
  background: var(--accent);
  opacity: 0.45;
}
.asmt-axis__mark {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  background: var(--accent);
  border-radius: 50%;
}
.asmt-axis__mark b {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
}
.asmt-axis__mark--low b { bottom: auto; top: 16px; }
.asmt-axis__ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted-3);
  margin-top: 26px;
}

.asmt-prose h2 { font-size: 22px; }
.asmt-prose h2:first-child { margin-top: 0; }

.asmt-project {
  margin: clamp(40px, 7vh, 64px) 0 0;
  padding: 30px 28px 32px;
  border: 1px solid var(--line-frame);
  border-left: 2px solid var(--accent);
  background: var(--bg-alt);
}
.asmt-project__text {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  color: var(--ink);
}

.asmt-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.asmt-tools .link-arrow { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); }

.asmt-capture {
  margin-top: clamp(48px, 8vh, 80px);
  padding: 34px 32px 36px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}

@media (max-width: 560px) {
  .asmt-dots { gap: 5px; }
  .asmt-dot { font-size: 12px; }
  .asmt-scale__end { font-size: 9px; }
}

/* --- Footer -------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); }
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 52px var(--pad-x) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: space-between;
  align-items: start;
}
.footer__brand { font-family: var(--serif); font-size: 19px; color: var(--ink); margin-bottom: 14px; display: inline-block; }
.footer__tagline {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
}
/* Čísla se tu čtou porovnáním ve sloupci, ne jako text. Inter má
   proporcionální číslice, takže jednička je užší než nula a hodnoty pod
   sebou nesedí — u kalkulaček to navíc při přepočtu poskakuje do stran a
   vypadá to jako chyba vykreslení. `tabular-nums` to řeší bez zásahu do
   sazby, `lining-nums` drží číslice na výšku verzálek. */
.bignum, .stat__num, .statgrid__v, .spec__val, .adm-cell__num, .adm-row__val,
.acalc .acalc__i, .acalc .acalc__v, .holding__sym, .zebricek__rozsah,
.legal-meta, table td, table th, .asmt-score, .post-row__meta, time {
  font-variant-numeric: tabular-nums lining-nums;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 28px; }
.footer__link { font-size: 13.5px; color: var(--ink-3); transition: color 200ms ease; }
.footer__link:hover { color: var(--accent); }
.footer__meta {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted-3);
}
.footer__meta a {
  color: var(--muted-3);
  transition: color 200ms ease;
}
.footer__meta a:hover { color: var(--accent); }
/* Naměřeno při 375 px: odkazy v patičce 16 px na výšku, přepínač jazyka 14 px.
   WCAG 2.5.8 žádá 24 × 24 px, Apple i Google doporučují 44. Kliknutelná plocha
   roste odsazením, sazba se nemění — proto `padding-block` a ne `min-height`,
   které by řádky rozestoupilo. Přepínač jazyka je nejcitlivější: anglicky
   mluvící návštěvník ho mačká jako první a napoprvé minul. */
@media (max-width: 640px) {
  .footer__link, .footer__meta a, .lang-switch {
    display: inline-block;
    padding-block: 9px;
  }
  .footer__links { gap: 20px 28px; }
}
.footer__meta a[aria-current='page'] { color: var(--ink-3); }

/* --- Inline column chart ({% barchart %}) --------------------------------- */

/* Drawn as SVG so it scales without a second image request and stays legible
   at any width. The bars carry the emphasis; the axis is barely there. */
.bc {
  margin: 40px 0 0;
  padding: 26px 24px 20px;
  border: 1px solid var(--line-frame);
  background: rgba(237, 234, 227, 0.02);
}
.bc__svg { display: block; width: 100%; height: auto; overflow: visible; }

.bc__axis { stroke: var(--line-strong); stroke-width: 1; }

.bc__bar { fill: rgba(237, 234, 227, 0.22); }
.bc__bar.is-rise { fill: rgba(232, 163, 61, 0.45); }
.bc__bar.is-peak { fill: var(--accent); }

.bc__val {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--muted);
  text-anchor: middle;
}
.bc__val.is-rise { fill: var(--ink-2); }
.bc__val.is-peak { fill: var(--accent); font-size: 17px; font-weight: 500; }

.bc__lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--muted);
  text-anchor: middle;
}
.bc__lab--yr { font-size: 10px; opacity: 0.6; }

.bc__cap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.bc__cap strong { color: var(--ink-2); font-weight: 500; }
.bc__cap span { display: block; margin-top: 4px; }

/* Below this width the month labels collide, so the chart itself scrolls —
   the page body must never scroll sideways. */
@media (max-width: 640px) {
  .bc { padding: 20px 0 16px; overflow-x: auto; }
  .bc__svg { min-width: 560px; }
  .bc__cap { margin-left: 18px; margin-right: 18px; }
}

/* --- Inline diagram ({% orchestrator %}) ---------------------------------- */

.dg {
  margin: 40px 0 0;
  padding: 26px 24px 20px;
  border: 1px solid var(--line-frame);
  background: rgba(237, 234, 227, 0.02);
}
.dg__svg { display: block; width: 100%; height: auto; overflow: visible; }

.dg__box { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.dg__box--lead { stroke: var(--line-accent); }

.dg__link { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }

.dg__t {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  fill: var(--ink-2);
  text-anchor: middle;
}
.dg__t--lead { fill: var(--accent); }

.dg__note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  fill: var(--muted);
}
.dg__note--up { text-anchor: end; }

.dg__cap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The boxes stop fitting side by side well before the text does. */
@media (max-width: 640px) {
  .dg { padding: 20px 0 16px; overflow-x: auto; }
  .dg__svg { min-width: 600px; }
  .dg__cap { margin-left: 18px; margin-right: 18px; }
}

/* --- Diagram variants (compare / funnel / quadrant / stack) ---------------- */

.dg__box--bad    { stroke: rgba(196, 105, 95, 0.5); }
.dg__box--good   { stroke: var(--line-accent); }
.dg__box--gate   { stroke: var(--line-strong); }
.dg__box--layer  { stroke: var(--line-strong); }

.dg__link--bad   { stroke: rgba(196, 105, 95, 0.4); }
.dg__link--good  { stroke: var(--line-accent); stroke-dasharray: none; }

.dg__head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--muted);
}
.dg__head--bad  { fill: #C4695F; }
.dg__head--good { fill: var(--accent); }

.dg__num {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--accent);
}

.dg__note--out { fill: var(--accent); }

.dg__axis { stroke: var(--line-strong); stroke-width: 1; }
.dg__grid { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 5; }

.dg__dot        { fill: var(--muted); }
.dg__dot--good  { fill: var(--accent); }
.dg__dot--bad   { fill: #C4695F; }

.dg__pt {
  font-family: var(--mono);
  font-size: 12.5px;
  fill: var(--ink-2);
}
.dg__pt--good { fill: var(--accent); }
.dg__pt--bad  { fill: #C4695F; }

.dg__ax {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--muted);
}

.dg__lname {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  fill: var(--accent);
}
.dg__ldesc {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--muted);
}

/* Two columns cannot survive a phone; let the figure scroll. */
@media (max-width: 640px) {
  .dg--compare .dg__svg { min-width: 660px; }
}

/* ---------------------------------------------------------------------------
   Collapsed navigation
   Eight links, a brand and a language switch stop fitting on one row at around
   850px, and a sticky bar that wraps to two rows costs a fifth of a phone
   screen permanently. Below the breakpoint the links fold behind a toggle.
   Everything here is scoped to `.js` so that without the script the nav falls
   back to the wrapping row rather than to nothing.
--------------------------------------------------------------------------- */

.nav__toggle {
  display: none;
  align-items: center;
  /* Icon only, so the 44px touch target has to come from the button box —
     the bars themselves are just 20x13. The extra size grows leftward,
     keeping the icon flush with the container edge. */
  justify-content: flex-end;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 0;
  background: none;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 200ms ease;
}
.nav__toggle:hover { color: var(--ink); }
.nav__bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 13px;
}
.nav__bars i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 220ms ease, opacity 160ms ease;
}
/* Two bars cross, the middle one leaves — the toggle reads as its own state
   rather than needing a separate close control inside the panel. */
.nav--open .nav__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav--open .nav__bars i:nth-child(2) { opacity: 0; }
.nav--open .nav__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav__bars i { transition: none; }
}

@media (max-width: 900px) {
  .js .nav__inner {
    flex-wrap: nowrap;
    min-height: 62px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .js .nav__toggle { display: inline-flex; }

  .js .nav__right {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--pad-x) 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    /* A short landscape viewport must still be able to reach the last link. */
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .nav--open .nav__right { display: flex; }

  .js .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .js .nav__link {
    padding: 15px 0;
    font-size: 15px;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line-soft);
  }
  /* The desktop underline sits under the text; stacked it would collide with
     the row rule, so the current page gets a marker in the margin instead. */
  .js .nav__link[aria-current='page'] { color: var(--ink); }
  .js .nav__link[aria-current='page']::after {
    left: auto;
    right: 0;
    bottom: auto;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateY(-50%);
  }
  .js .lang-switch {
    padding: 18px 0 0;
    border-left: 0;
    font-size: 12px;
  }
}

/* Holding the page still while the panel covers it; the class is only applied
   while the panel is actually the overlay variant. */
.has-nav-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   Language suggestion
   Anchored to the bottom rather than inserted above the content: it appears
   only after the script has run, and a bar that pushes the page down at that
   point would be a layout shift on every visit that qualifies.
--------------------------------------------------------------------------- */

.lang-hint {
  position: fixed;
  z-index: 60;
  right: var(--pad-x);
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: calc(100vw - 2 * var(--pad-x));
  padding: 14px 14px 14px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--line-frame);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.lang-hint--in { opacity: 1; transform: none; }
.lang-hint[hidden] { display: none; }

.lang-hint__text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink-2);
}
.lang-hint__cta {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 200ms ease;
}
.lang-hint__cta:hover { color: var(--accent-hi); }

.lang-hint__close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Touch minimum; the glyph itself is far smaller than the target. */
  width: 34px;
  height: 34px;
  margin: -8px -6px -8px 0;
  background: none;
  border: 0;
  color: var(--muted-2);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms ease;
}
.lang-hint__close:hover { color: var(--ink); }

@media (max-width: 560px) {
  .lang-hint {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
    gap: 12px;
    padding: 13px 12px 13px 16px;
  }
  .lang-hint__text { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-hint { transition: none; }
}

/* ---------------------------------------------------------------------------
   Client area
--------------------------------------------------------------------------- */

.research-list { margin: 0; padding: 0; list-style: none; }
.research-item { border-top: 1px solid var(--line); }
.research-item:last-child { border-bottom: 1px solid var(--line); }
.research-item__link {
  display: block;
  padding: 30px 0;
  border: 0;
  transition: opacity 200ms ease;
}
.research-item__link:hover { opacity: 0.82; }
.research-item__meta {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* Tentýž čip jako v hlavičce analýzy, jen menší — v řádku metadat, kde už
   stojí datum a délka čtení. Sedí první, protože je to jediný údaj, kterým se
   analýzy v seznamu od sebe liší; datum mají všechny stejné.

   Barvy jsou tytéž proměnné jako u `.research__doc`. Sdílet celé pravidlo by
   znamenalo jeden selektor pro dvě velikosti písma a dvě odsazení, takže se
   sdílí jen to, co je opravdu společné — mapa typu na barvu. */
.research-item__doc {
  --dok: var(--muted-3);
  --dok-vypln: rgba(122, 129, 140, 0.16);
  display: inline-block;
  margin-right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--dok-vypln);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--dok);
}
.research-item__doc[data-dok="10-K"] { --dok: var(--r-1); --dok-vypln: rgba(232, 163, 61, 0.16); }
.research-item__doc[data-dok="10-Q"] { --dok: var(--r-2); --dok-vypln: rgba(95, 168, 211, 0.16); }
.research-item__doc[data-dok="S-1"] { --dok: var(--r-5); --dok-vypln: rgba(155, 135, 212, 0.16); }
.research-item__doc[data-dok="8-K"] { --dok: var(--r-4); --dok-vypln: rgba(210, 112, 106, 0.16); }

.research-item__title { margin: 0 0 10px; }
.research-item__lede {
  max-width: 60ch;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   Client research documents
   These are authored standalone, with their own palette and fonts. Rather than
   rewriting their markup, this maps their component classes onto the site's
   tokens: same structure, the site's face. Every series colour below clears
   4.5:1 on the page ground, so even the small mono labels stay readable.
--------------------------------------------------------------------------- */

.research {
  --r-1: #E8A33D;    /* amber — the site accent, carries the primary series */
  --r-2: #5FA8D3;    /* blue */
  --r-3: #6FBF8B;    /* green — positive */
  --r-4: #D2706A;    /* red — negative */
  --r-5: #9B87D4;    /* violet */
  --r-past: #7D838D; /* prior period */
  --r-panel: var(--bg-alt);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-2);
  font-weight: 300;
}
.research .wrap { max-width: 1080px; }

/* Tyhle bloky nesou i třídu .wrap, takže vodorovné odsazení musí zůstat na
   ní. Zkratka `padding: 40px 0` ho vynuluje a na mobilu se text nalepí na
   hranu — na desktopu se to schová za centrování a vypadá to v pořádku. */
.research__head { padding-top: 40px; padding-bottom: 8px; }
/* Atribut hidden musí přebít i komponentu, která si nastavuje display.
   .ca-calc má display:grid a .ca-done display:flex, takže autorské pravidlo
   porazilo [hidden]{display:none} z prohlížeče — bez JavaScriptu se ukazovaly
   živé vstupy kalkulaček a na každé lekci tlačítko „Označit jako dokončené“,
   které nemělo posluchače. */
[hidden] { display: none !important; }

/* Čip typu podkladu. 10-Q, 10-K, S-1 — a co je vlastní teze bez podání,
   dostane neutrální odstín, protože to není výkaz.

   Barva se sází přes `--dok`, kterou přepisují `data-dok` pravidla níž. Typ,
   na který se zapomene, si nechá výchozí šedou: čip zůstane čitelný, jen
   nebude barevný. Kdyby se místo toho psalo `color: var(--dok-10q)` a ta
   proměnná neexistovala, deklarace by byla neplatná a text by zdědil barvu
   okolí — stejná chyba, která tady jednou vypnula devět čtverečků v legendě.

   Výplň, ne obrys: štítek vedle je obrysová pilulka a dvě obrysové pilulky
   vedle sebe splynou v jeden pruh. Odstíny výplně jsou psané ručně, protože
   `color-mix` se v tomhle souboru zatím nikde nepoužívá a jeden čip není
   důvod ho sem zavádět.

   `.research .research__doc` (0,2,0), ne samotná třída (0,1,0): uvnitř
   `.research` platí `.research p { max-width: 74ch }` se specificitou
   (0,1,1). Viz štítek o pár řádků níž — je to tatáž past. */
.research .research__doc { max-width: none; }
.research__doc {
  --dok: var(--muted-3);
  --dok-vypln: rgba(122, 129, 140, 0.16);
  display: inline-flex;
  align-items: center;
  margin: 22px 10px 0 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--dok-vypln);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--dok);
}
/* Výroční výkaz nese akcentní odstín — je to ten podrobný z dvojice. */
.research__doc[data-dok="10-K"] { --dok: var(--r-1); --dok-vypln: rgba(232, 163, 61, 0.16); }
.research__doc[data-dok="10-Q"] { --dok: var(--r-2); --dok-vypln: rgba(95, 168, 211, 0.16); }
.research__doc[data-dok="S-1"] { --dok: var(--r-5); --dok-vypln: rgba(155, 135, 212, 0.16); }
.research__doc[data-dok="8-K"] { --dok: var(--r-4); --dok-vypln: rgba(210, 112, 106, 0.16); }

/* `.research .research__badge`, ne `.research__badge`. Štítek je <p> uvnitř
   `.research`, kde platí `.research p { max-width: 74ch }` — pravidlo se
   specificitou (0,1,1), proti kterému jedna třída (0,1,0) tiše prohraje.
   74ch je v mono písmu při 11,5 px a prostrkání 0,08em přesně 510,6 px, takže
   se pilulka zasekla na 511 px a text „NET · FORM 10-Q · Q2 2026 DO 30. 6.
   2026 · NYSE · DRŽENÁ POZICE · srpen 2026“ se do ní zalomil na tři řádky
   i v 1640px sloupci, kde bylo místa třikrát tolik.

   Míra na štítek nepatří: není to text ke čtení řádek po řádku, je to jeden
   údaj. Strop je tedy pryč a pilulka je široká přesně jako svůj obsah — na
   jeden řádek všude, kde se vejde, a zalomí se jen tam, kde je sloupec
   opravdu užší než ten údaj (telefon). Žádný breakpoint to nepotřebuje. */
.research .research__badge { max-width: none; }
.research__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 7px 16px;
  border: 1px solid var(--line-frame);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.research__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--r-3);
  box-shadow: 0 0 10px var(--r-3);
}
.research__title { margin: 22px 0 0; max-width: 20ch; }
.research__lede { max-width: 60ch; margin: 28px 0 0; }
.research__meta {
  margin: 26px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.research section { padding-top: 54px; padding-bottom: 54px; border-bottom: 1px solid var(--line); }

/* Obal kolem markdownového obsahu lekcí. Analýzy si dělí obsah do vlastních
   `<section>`, lekce jsou jeden proud textu, takže odsazení musí dát tenhle
   blok — jinak jsou nadpisy zarovnané s hlavičkou a text ne. */
.research__prose { padding-top: 34px; padding-bottom: 54px; }
.research__prose > :first-child { margin-top: 0; }
.research .kicker {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.research h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.research h2 .n {
  margin-right: 12px;
  font-family: var(--mono);
  font-size: 0.42em;
  font-weight: 500;
  vertical-align: super;
  color: var(--muted-3);
}
.research h3 {
  margin: 0 0 2px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
.research h4 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
}
.research .sub { max-width: 68ch; margin: 0 0 24px; color: var(--ink-3); }
.research p { max-width: 74ch; }
.research .how { max-width: 78ch; padding: 10px 6px 0; font-size: 14px; color: var(--ink-3); }
.research .how b, .research .sub b { color: var(--ink); font-weight: 500; }

/* Inline highlight spans carried over from the source document. */
.research .hi  { color: var(--r-1); }
.research .hi2 { color: var(--r-2); }
.research .hig { color: var(--r-3); }
.research .hib { color: var(--r-4); }
.research .hip { color: var(--r-5); }

/* Panels: cards, chart frames, the sankey holder. */
.research .card,
.research .sankey-card {
  margin: 22px 0;
  padding: 24px 22px 18px;
  background: var(--r-panel);
  border: 1px solid var(--line-frame);
}
.research .sankey-card { overflow-x: auto; }
.research .cap {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}
.research .chart-box { position: relative; height: 330px; }
.research .chart-box.tall { height: 390px; }
/* Box je vysoký na pixel, protože byl psaný pro <canvas> od Chart.js, které si
   ho vyplní samo. Ručně kreslené SVG uvnitř žádnou výšku nedědí — bez tohohle
   se roztáhne na šířku podle viewBoxu, přeteče kartu a sloupce skončí přes
   text pod ní. */
.research .chart-box > svg { display: block; width: 100%; height: 100%; }
/* Třída, ne id: druhý diagram na stránce se jmenuje #sankey2 a pravidlo psané
   na id se ho netýkalo — na mobilu se proto smrskl na 289 px a popisky
   vycházely na pět pixelů.

   820 px, ne 640: `sankey.js` sráží souřadný prostor nejvýš na 820 jednotek
   (`MIN`) právě proto, aby se pod tou hranicí diagram nezmenšoval dál a jen
   se v kartě roloval. S podlahou 640 se ale 820 jednotek vykreslilo do 640
   pixelů a měřítko spadlo na 0,78 — popisek psaný na dvanáct pixelů vyšel na
   telefonu na devět a půl. Nic nespadlo, jen přestala platit vlastnost, kvůli
   které je souřadný prostor odvozený od změřené šířky: jedna jednotka = jeden
   pixel. Ty dvě čísla patří k sobě; když se jedno hne, musí se hnout i druhé. */
.research .sankey { display: block; width: 100%; min-width: 820px; height: auto; }
.research .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}
.research .legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  vertical-align: middle;
}
.research .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* Stat strip. */
.research .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 18px 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.research .stat { padding: 20px 18px; background: var(--r-panel); }
.research .stat .v {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
}
.research .stat .l {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--muted);
}
.research .stat .v.amber  { color: var(--r-1); }
.research .stat .v.cyan   { color: var(--r-2); }
.research .stat .v.green  { color: var(--r-3); }
.research .stat .v.burn   { color: var(--r-4); }
.research .stat .v.purple { color: var(--r-5); }

/* Segment cards. */
.research .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.research .segcard { padding: 22px; background: var(--r-panel); border: 1px solid var(--line-frame); }
.research .segcard.space { border-color: rgba(232, 163, 61, 0.32); }
.research .segcard.conn  { border-color: rgba(95, 168, 211, 0.32); }
.research .segcard.ai    { border-color: rgba(155, 135, 212, 0.32); }
.research .segcard .st {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.research .segcard.space .st { color: var(--r-1); }
.research .segcard.conn .st  { color: var(--r-2); }
.research .segcard.ai .st    { color: var(--r-5); }

/* Akcenty pro analýzu paměťové firmy. Stávající space/conn/ai jsou pojmenované
   po segmentech SpaceX, takže se na jinou firmu nedají použít, aniž by třída
   lhala o tom, co obarvuje. */
.research .segcard.dc   { border-color: rgba(210, 112, 106, 0.32); }
.research .segcard.edge { border-color: rgba(95, 168, 211, 0.32); }
.research .segcard.cons { border-color: rgba(232, 163, 61, 0.32); }
.research .segcard.dc .st   { color: var(--r-4); }
.research .segcard.edge .st { color: var(--r-2); }
.research .segcard.cons .st { color: var(--r-1); }
.research .segcard.gov { border-color: rgba(95, 168, 211, 0.32); }
.research .segcard.com { border-color: rgba(155, 135, 212, 0.32); }
.research .segcard.gov .st { color: var(--r-2); }
.research .segcard.com .st { color: var(--r-5); }
.research .segcard .big { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; }
.research .segcard .biglbl {
  margin: 6px 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted-2);
}
.research .segcard p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.research .segcard p b { color: var(--ink); font-weight: 500; }
.research .segcard .prof {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.research .prof-good { background: rgba(111, 191, 139, 0.14); color: var(--r-3); }
.research .prof-bad  { background: rgba(210, 112, 106, 0.14); color: var(--r-4); }
.research .prof-mid  { background: rgba(232, 163, 61, 0.14); color: var(--r-1); }

/* Callouts — the source uses five colour variants. */
.research .callout {
  margin: 22px 0;
  padding: 18px 22px;
  border-left: 2px solid var(--accent);
  background: rgba(232, 163, 61, 0.05);
  font-size: 15.5px;
}
.research .callout.cyan   { border-color: var(--r-2); background: rgba(95, 168, 211, 0.05); }
.research .callout.burn   { border-color: var(--r-4); background: rgba(210, 112, 106, 0.05); }
.research .callout.green  { border-color: var(--r-3); background: rgba(111, 191, 139, 0.05); }
.research .callout.purple { border-color: var(--r-5); background: rgba(155, 135, 212, 0.05); }
.research .callout .k {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.research .callout b { color: var(--ink); font-weight: 500; }

.research .bigverdict {
  padding: 32px 28px;
  background: var(--bg-deep);
  border: 1px solid rgba(232, 163, 61, 0.28);
}
.research .unlock {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 3vw, 28px);
  line-height: 1.28;
  color: var(--ink);
}
.research .unlock em { font-style: normal; color: var(--accent); }

/* Tables. */
.research .tbl { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 15px; }
.research .tbl th {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
  color: var(--muted-2);
}
.research .tbl th:first-child { text-align: left; }
.research .tbl td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13.5px;
  text-align: right;
}
.research .tbl td:first-child { font-family: var(--sans); font-size: 15px; text-align: left; }
.research .tbl tr:last-child td { border-bottom: none; }
.research .tbl .up { color: var(--r-3); }
.research .tbl .down { color: var(--r-4); }
.research .tbl .em { color: var(--ink); font-weight: 500; }
/* Řádek, který v tabulce neznamená položku, ale díru mezi dvěma položkami —
   v hierarchii paměti chybějící patro, kam míří HBF. Nese proto přerušovaný
   rámeček a ztlumené písmo, aby se nedal splést s údajem. */
.research .tbl tr.gap-row td {
  border-top: 1px dashed var(--line-accent);
  border-bottom: 1px dashed var(--line-accent);
  color: var(--r-1);
  background: rgba(232, 163, 61, 0.04);
}

.research .ptable { margin: 4px 0; }
.research .prow {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.research .prow:last-child { border-bottom: none; }
.research .prow span:nth-child(2),
.research .prow span:nth-child(3) {
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
  color: var(--muted);
}
.research .prow.phead {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.research .prow.phead span { color: var(--muted-2) !important; }
.research .prow.hl { background: rgba(95, 168, 211, 0.07); }
.research .prow.hl span:first-child { color: var(--r-2); font-weight: 500; }
.research .prow.hl span:nth-child(3) { color: var(--r-2) !important; font-weight: 500; }
.research .pnote {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--muted-2);
}

.research .spacegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.research .score { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
/* Sloupce pro a proti. Mřížka `.score` tu byla, panel uvnitř ne — dva
   protikladné seznamy se pak opticky slily do jednoho. Scopováno přes
   `.research .scol`, protože samotné `.scol` by prohrálo s `.research ul`. */
.research .scol { padding: 20px; background: var(--r-panel); border: 1px solid var(--line-frame); }
.research .scol h4 {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.research .scol.good h4 { color: var(--r-3); }
.research .scol.bad h4 { color: var(--r-4); }
.research .scol ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.7; color: var(--ink-3); }
.research .scol ul li b { color: var(--ink); font-weight: 500; }

.research .secimg {
  display: block;
  width: 100%;
  margin: 8px 0 6px;
  border: 1px solid var(--line-frame);
}
.research .secimg-cap {
  margin: -2px 0 18px;
  padding-left: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted-2);
}

.research__foot { padding-top: 46px; padding-bottom: 10px; }
.research__back { margin: 26px 0 0; }

@media (max-width: 900px) {
  .research .grid2,
  .research .seg,
  .research .score { grid-template-columns: 1fr; }
  .research .stats,
  .research .spacegrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .research .stats,
  .research .spacegrid { grid-template-columns: 1fr; }
  .research .prow { grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; font-size: 14px; }
  .research .card,
  .research .sankey-card { padding: 18px 14px 14px; }
}

/* Provenance block on research documents. Reads as part of the work, not as a
   legal footer bolted on — which is the point: the same lines that satisfy the
   disclosure duty are the ones a paying reader actually wants. */
.research .provenance {
  border-bottom-width: 1px;
  margin: 0 0 28px;
  padding: 26px 24px 22px;
  background: var(--bg-alt);
  border: 1px solid var(--line-frame);
}
.research .provenance__title {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.research .provenance__grid { margin: 0; }
.research .provenance__grid > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 24px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.research .provenance__grid > div:first-child { border-top: 0; padding-top: 0; }
.research .provenance__grid dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.research .provenance__grid dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .research .provenance__grid > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Gauge — one measured ratio against its pass/fail threshold. Used through the
   ratio lessons, where the reader needs to see "did this clear the bar" before
   reading a single word of explanation. */
.research .gauge {
  margin: 22px 0 26px;
  padding: 20px 22px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--line-frame);
  border-left: 2px solid var(--muted-3);
}
.research .gauge--pass { border-left-color: var(--r-3); }
.research .gauge--fail { border-left-color: var(--r-4); }

.research .gauge__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 6px;
}
.research .gauge__metric {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.research .gauge__subject {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.research .gauge__svg { display: block; width: 100%; height: auto; }
.research .gauge__workings {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted-2);
}

/* Wide tables inside research need their own scroller — the page itself must
   never scroll sideways. */
.research .table-scroll { overflow-x: auto; }
.research .table-scroll .tbl { min-width: 640px; }

/* Lesson list — numbered and ordered forwards, unlike the research list next to
   it. The number is the point: a course is a sequence, and the reader needs to
   see where they are in it without counting rows. */
.lesson-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lesson;
}
.lesson-item { border-top: 1px solid var(--line); }
.lesson-item:last-child { border-bottom: 1px solid var(--line); }
.lesson-item__link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border: 0;
  transition: opacity 200ms ease;
}
.lesson-item__link:hover { opacity: 0.82; }
.lesson-item__no {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted-3);
}
.lesson-item__body { flex: 1; min-width: 0; }
.lesson-item__title {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.lesson-item__badge {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
}
.lesson-item__arrow {
  flex: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
}

@media (max-width: 560px) {
  .lesson-item__link { gap: 14px; }
  .lesson-item__title { font-size: 17px; }
}

/* Markdown tables inside lessons arrive as a bare <table> — the `.tbl` rules
   above only match the hand-written ones. Give the plain element the same
   treatment, and let it scroll rather than push the page sideways on a phone. */
.research :is(p, h2, h3, h4) + table,
.research table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 18px 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15px;
}
.research table th {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.research table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.research table tr:last-child td { border-bottom: none; }
.research table strong { color: var(--ink); font-weight: 500; }

/* --- Prodejní stránka členství ------------------------------------------ */

/* Pruh pod nadpisem v hlavičce: tři důvody, proč zmáčknout tlačítko hned.
   Stojí nad ohybem schválně — první tlačítko na předchozí verzi bylo tři
   tisíce pixelů dole, tedy pro člověka na telefonu neexistovalo. */
.sale-cta { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; margin: 36px 0 0; }
.sale-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.sale-proof span::before { content: "— "; color: var(--accent); }

/* Záruka. Orámovaná, protože je to jediné místo na stránce, kde se čtenáři
   něco slibuje — a slib má být vidět, ne schovaný v odstavci. */
.zaruka {
  margin-top: 34px;
  padding: 26px 28px;
  border: 1px solid var(--line-accent);
  background: var(--bg-alt);
}
.zaruka h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); }
.zaruka p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
.zaruka p:last-child { margin-bottom: 0; }

/* Otázky. `<details>` schválně: bez skriptu se otevírají samy od sebe,
   takže stránka funguje i tam, kde JavaScript neběží — a odpověď je
   v HTML, takže ji přečte i vyhledávač. */
.faq { max-width: 76ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 20px 0;
  font-size: 17px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-family: var(--mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--ink-3);
  max-width: 68ch;
}

/* Vstup do klientské sekce v liště. Je to jediná položka navigace, která
   nevede na stránku webu, ale na přihlášení — vypadá proto jako tlačítko,
   ne jako další odkaz v řadě. Míří na `/clients/`, kde ji převezme
   Cloudflare Access. */
.nav__link--cta {
  padding: 7px 14px;
  border: 1px solid var(--line-accent);
  color: var(--accent);
}
.nav__link--cta:hover { color: var(--accent-hi); border-color: var(--accent); }

/* --- Prodejní stránka: ukázky produktu a hodnosti ------------------------ */

/* Snímek ze sekce. Rám a záře, aby obrázek nesplynul s pozadím — na tmavém
   webu tmavý screenshot bez ohraničení vypadá jako díra ve stránce. */
.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-frame);
  box-shadow: 0 0 60px rgba(232, 163, 61, 0.07), 0 24px 60px rgba(0, 0, 0, 0.5);
}
.shot figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.shot--wide { max-width: 1100px; }

/* Žebříček hodností na veřejné stránce. Znaky nesou týž zlatý přechod jako
   uvnitř sekce, jen definovaný na téhle stránce — `url(#…)` míří do téhož
   dokumentu, takže sdílet se to mezi šablonami nedá. */
.zebricek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 1px;
  margin-top: 26px;
  background: var(--line);
  border: 1px solid var(--line);
}
.zebricek__stupen {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 16px 6px 13px;
  background: var(--bg-alt);
  text-align: center;
}
.zebricek__znak { width: 34px; height: 34px; color: var(--muted-3); }
.zebricek__znak svg { width: 100%; height: 100%; display: block; }
.zebricek__nazev {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  line-height: 1.3;
}
.zebricek__stupen--vrchol .zebricek__nazev { color: var(--accent); }
.zebricek__rozsah { font-family: var(--mono); font-size: 8.5px; color: var(--dim); }

/* Kov mluví i v písmu.
 *
 * Barva zatím žila jen na znaku a na lince nad dlaždicí, tedy v grafice.
 * Jenže v řadě jedenácti dlaždic čte člověk **jméno** — a to bylo u všech
 * hodností stejně šedé, takže obrázek říkal „tahle je zlatá“ a text pod ním
 * nic. Jméno i rozsah proto nesou týž kov jako znak.
 *
 * Odstíny jsou **světlejší než u grafiky**: linka nad dlaždicí je dva pixely
 * plné plochy, kdežto písmo je devět pixelů tenkých tahů. Táž rgba by na
 * lince byla akorát a v textu nečitelná — kontrast se u písma počítá na tahu,
 * ne na ploše. */
.zebricek__stupen[data-ca-kov="bronz"] .zebricek__nazev,
.zebricek__stupen[data-ca-kov="bronz"] .zebricek__rozsah { color: #c07a45; }
.zebricek__stupen[data-ca-kov="stribro"] .zebricek__nazev,
.zebricek__stupen[data-ca-kov="stribro"] .zebricek__rozsah { color: #aebdcc; }
.zebricek__stupen[data-ca-kov="stribro-zlato"] .zebricek__nazev,
.zebricek__stupen[data-ca-kov="stribro-zlato"] .zebricek__rozsah { color: #d3b681; }
.zebricek__stupen[data-ca-kov="zlato"] .zebricek__nazev,
.zebricek__stupen[data-ca-kov="zlato"] .zebricek__rozsah { color: #e8a33d; }

/* Augustus: jméno i „100“ týmž kovem a týmž řezem. Číslo úrovně bylo o půl
   bodu menší a v barvě `--dim`, takže poslední hodnost měla nadpis ve zlatě
   a pod ním šedivou drobnost — u stovky, která je vrchol celého žebříčku, to
   vypadá jako popisek, ne jako výsledek. */
.zebricek__stupen[data-ca-kov="augustus"] .zebricek__nazev,
.zebricek__stupen[data-ca-kov="augustus"] .zebricek__rozsah {
  color: var(--accent);
  font-weight: 600;
}
.zebricek__stupen[data-ca-kov="augustus"] .zebricek__rozsah { font-size: inherit; letter-spacing: 0.1em; }


/* Nadpis prodejní stránky dostane týž kovový přechod jako hero na úvodní.
   `background-clip: text` potřebuje průhlednou výplň písma — a proto taky
   `color: transparent` jako záloha tam, kde se prefixovaná vlastnost nechytne. */
.h1--zlaty {
  background-image: linear-gradient(100deg,
    #6E6A61 0%, #A9A294 26%, #E9DBC0 54%, #FFFCF5 76%, #FFFCF5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.1em;
}

/* ---- odběr --------------------------------------------------------------- */

/* Blok na konci článku. Scope je `.odber ...`, ne holá třída: uvnitř `.prose`
   platí element-qualified pravidla se specificitou (0,1,1) a komponenta
   stylovaná jedinou třídou (0,1,0) by tiše prohrála. Tahle past už tenhle
   projekt stála tři opravy. */

.odber {
  margin: 56px 0 0;
  padding: 28px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(232, 163, 61, 0.09), transparent 62%),
    var(--bg-frame);
  display: grid;
  gap: 22px;
}

@media (min-width: 860px) {
  .odber { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 40px; }
}

.odber .odber__title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.odber .odber__note {
  margin: 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}

.odber .odber__form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

.odber .odber__input {
  flex: 1 1 220px;
  min-width: 0;                     /* jinak flexový prvek nepustí pod svůj obsah */
  padding: 12px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;                  /* pod 16 px zvětší iOS při zaostření celou stránku */
}
.odber .odber__input:focus-visible { outline: 2px solid var(--line-accent); outline-offset: 2px; }

.odber .odber__btn { flex: 0 0 auto; }

.odber .odber__pozn,
.odber .odber__stav {
  flex: 1 0 100%;
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--muted-3);
}

.odber .odber__stav { color: var(--ink-2); }
.odber .odber__stav[data-druh="chyba"] { color: #E0836A; }
.odber .odber__stav[data-druh="hotovo"] { color: var(--accent); }

/* ---- stránky po potvrzení a odhlášení ------------------------------------ */

.odber-vysledek { max-width: 62ch; padding-top: 12px; padding-bottom: 8px; }
.odber-vysledek .odber-vysledek__znak {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
}



/* --- Graf integrací Salamon OS -------------------------------------------- */

/* Nahrazuje snímek obrazovky a stojí v pravém sloupci vedle textu, tedy
   v ~590 px, ne přes celou šířku. Všechny rozměry, které mají růst s plátnem,
   jdou proto přes `--m` — jediné měřítko odvozené z šířky kontejneru. Kdyby
   byly pevné, v úzkém sloupci by se uzly překryly.

   `aspect-ratio` drží výšku, aby řádek nepřeskočil, než se cokoli načte:
   uzly jsou uvnitř absolutně, takže bez toho poměru má kontejner nulovou
   výšku. */

.osg { margin: 0; container-type: inline-size; }

.osg__hlava { margin-bottom: 14px; }
.osg__titulek {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--ink);
  text-wrap: balance;
}
.osg__shrnuti {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.osg__platno {
  /* Měřítko je DÉLKA, ne číslo — podíl dvou délek se v CSS udělat nedá
     (dělit se smí jen číslem), takže `calc(100cqw / 590)` vyjde jako délka
     a porovnávat ji v clamp s holými čísly je typový nesoulad. Celý výraz
     by byl neplatný a s ním každá deklarace, která ho použije: `max-width`
     by skončilo na `none` a `padding` na nule.

     Jako jednotka funguje: `calc(178 * var(--m))` je číslo krát délka. */
  --m: 1px;
  position: relative;
  display: block;
  aspect-ratio: 1000 / 640;
  /* Bez rámečku a bez vlastního pozadí. Vlastní tmavší plocha z grafu dělala
     obdélník, který čte jako vložený obrázek — a přesně tomu se má vyhnout.
     Gradient i tečky se přesunuly na `::before`, kde jdou změkčit maskou.

     `overflow` se nenastavuje: nic z plátna nevyčnívá (ověřeno měřením při
     375 i 1440 px) a `hidden` by ořízlo právě ten měkký přesah, kvůli
     kterému se to celé dělá. */
}
/* Měřítko se odvozuje od šířky kontejneru: 590 px je návrhová šířka, na které
   mají prvky svou základní velikost. Užší sloupec je zmenší, širší zvětší —
   ale jen do rozumné meze, aby to na velkém monitoru nebylo nafouklé. */
@container (min-width: 0px) {
  .osg__platno { --m: clamp(0.74px, calc(100cqw / 590), 1.12px); }
}
/* Gradient a rastr teček. Obojí přesahuje plátno a je změkčené maskou —
   bez ní by hrana teček byla ostrý obdélník, tedy tentýž rámeček, jen bez
   čáry. Přesah dává masce kam doběhnout, aby se nekrátila uvnitř plochy,
   na které stojí uzly.

   Prohlížeč bez podpory `mask-image` dostane neoříznuté pozadí, tedy
   měkčí variantu původního stavu — ne rozbití. */
.osg__platno::before {
  content: "";
  position: absolute;
  inset: -9% -5%;
  background-image:
    radial-gradient(52% 50% at 50% 50%, rgba(122, 90, 248, 0.16), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(237, 234, 227, 0.055) 1px, transparent 0);
  background-size: 100% 100%, calc(24 * var(--m)) calc(24 * var(--m));
  -webkit-mask-image: radial-gradient(68% 64% at 50% 50%, #000 38%, transparent 100%);
  mask-image: radial-gradient(68% 64% at 50% 50%, #000 38%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* --- spojnice -------------------------------------------------------------- */

.osg__spoje {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Plná čára, ne tečkovaná.

   Tečkovaná přímka sbíhající se do bodu čte jako rozpracovaný drátěný model —
   „tady to ještě není hotové". Plná čára čte jako spojení.

   Přechod, který by čáře dal směr, tu schválně NENÍ. `linearGradient` se
   v objectBoundingBox jednotkách vztahuje k ohraničení každé cesty zvlášť,
   takže „zleva doprava" ukazuje u uzlů napravo od klienta obráceně a u těch
   přímo nad a pod ním degeneruje. Směr nese pulz, který po čáře teče od uzlu
   ke klientovi — ten se počítá z cesty, takže míří správně vždycky. */
.osg__spoj {
  fill: none;
  stroke: rgba(237, 234, 227, 0.2);
  stroke-width: 1;
  stroke-linecap: round;
}
/* Čárkovaná zůstává jen tam, kde něco znamená: spojení, které neexistuje. */
.osg__spoj--vypnuto {
  stroke: rgba(237, 234, 227, 0.13);
  stroke-dasharray: 2 6;
}
.osg__spoj--agent { stroke: rgba(232, 163, 61, 0.32); }

.osg__puls {
  fill: none;
  stroke: rgba(168, 205, 255, 0.9);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
}
.osg__puls--agent { stroke: rgba(242, 179, 86, 0.9); }
/* Odchozí tok má barvu klienta, protože od něj vychází. Je to jediné místo
   v grafu, kde puls teče ven, a bez odlišení by to vypadalo jako chyba
   animace, ne jako záměr. */
.osg__puls--odchozi { stroke: rgba(178, 156, 255, 0.9); }

/* --- uzly ------------------------------------------------------------------ */

.osg-uzel,
.osg-klient {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.osg-uzel {
  /* Krytí drží stav uzlu, ne pravidlo odhalení. Kdyby ho nastavovalo
     `.osg-uzel--vypnuto` napřímo, přebilo by ho `.is-ziva .osg-uzel`
     vyšší specificitou a nenapojené uzly by po odhalení vypadaly stejně
     živě jako napojené. */
  --op: 1;
  opacity: var(--op);
  display: flex;
  align-items: center;
  gap: calc(6.5 * var(--m));
  width: max-content;
  max-width: calc(152 * var(--m));
  padding: calc(8 * var(--m)) calc(9 * var(--m));
  border: 1px solid var(--line-strong);
  /* Bez rámečku stojí uzel na barvě sekce (#15181E), ne na tmavším plátně.
     Původních rgba(23,24,33,.88) by po smíchání vyšlo skoro stejně jako
     pozadí a uzel by zmizel — kontrast proto musí nést sám. */
  background: rgba(36, 39, 51, 0.96);
  border-radius: 3px;
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.9);
}
.osg-uzel--vypnuto { --op: 0.5; border-color: var(--line-soft); }
.osg-uzel--agent { border-color: var(--line-accent); }

.osg-uzel__znak {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(19 * var(--m));
  height: calc(19 * var(--m));
  border-radius: 3px;
  font-family: var(--mono);
  font-size: calc(7.5 * var(--m));
  font-weight: 500;
  color: var(--ink-2);
  background: rgba(237, 234, 227, 0.08);
  border: 1px solid var(--line-soft);
}
.osg-uzel--agent .osg-uzel__znak { color: var(--accent); background: rgba(232, 163, 61, 0.13); }

.osg-uzel__telo { min-width: 0; }
.osg-uzel__nazev {
  display: block;
  font-size: calc(10.5 * var(--m));
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.osg-uzel__popis {
  display: block;
  font-family: var(--mono);
  font-size: calc(7.6 * var(--m));
  line-height: 1.45;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.osg-uzel__tecka {
  flex: 0 0 auto;
  width: calc(5 * var(--m));
  height: calc(5 * var(--m));
  border-radius: 50%;
  background: #3FBF87;
}
.osg-uzel--vypnuto .osg-uzel__tecka { background: var(--muted-3); }
.osg-uzel--agent .osg-uzel__tecka { background: var(--accent); }

/* --- uzel klienta ---------------------------------------------------------- */

.osg-klient {
  width: max-content;
  max-width: calc(188 * var(--m));
  padding: calc(11 * var(--m)) calc(13 * var(--m)) calc(10 * var(--m));
  border: 1px solid rgba(150, 120, 255, 0.36);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(70, 54, 140, 0.62), rgba(30, 28, 58, 0.94));
  box-shadow: 0 14px 40px -20px rgba(90, 70, 200, 0.8);
}
.osg-klient__hlava { display: flex; align-items: center; gap: calc(9 * var(--m)); }
.osg-klient__jmena { min-width: 0; }
.osg-klient__znak {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(30 * var(--m));
  height: calc(30 * var(--m));
  border-radius: 4px;
  font-family: var(--serif);
  font-size: calc(15 * var(--m));
  color: var(--ink);
  background: rgba(120, 96, 240, 0.45);
  border: 1px solid rgba(160, 140, 255, 0.32);
}
.osg-klient__stitek {
  display: block;
  font-family: var(--mono);
  font-size: calc(7 * var(--m));
  letter-spacing: 0.16em;
  color: rgba(198, 186, 255, 0.92);
}
.osg-klient__nazev {
  display: block;
  font-family: var(--serif);
  font-size: calc(15 * var(--m));
  line-height: 1.2;
  color: var(--ink);
  margin-top: 2px;
  white-space: nowrap;
}
.osg-klient__metriky {
  display: flex;
  flex-wrap: wrap;
  gap: calc(2 * var(--m)) calc(10 * var(--m));
  margin: calc(9 * var(--m)) 0 0;
  padding-top: calc(8 * var(--m));
  border-top: 1px solid rgba(237, 234, 227, 0.13);
  font-family: var(--mono);
  font-size: calc(9.5 * var(--m));
  color: var(--ink-2);
}
.osg-metrika { white-space: nowrap; }
.osg-metrika--ok { color: #59D3A0; }
/* Čísla se při odpočítávání mění, takže musí být tabulková — jinak by se
   celý řádek při každém kroku posouval do stran. */
.osg-metrika__cislo { font-variant-numeric: tabular-nums lining-nums; }

/* --- legenda --------------------------------------------------------------- */

.osg__pozn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.osg-legenda { display: inline-flex; align-items: center; gap: 6px; }
.osg-legenda__tecka { width: 5px; height: 5px; border-radius: 50%; }
.osg-legenda__tecka--ok { background: #3FBF87; }
.osg-legenda__tecka--agent { background: var(--accent); }
.osg-legenda__tecka--vypnuto { background: var(--muted-3); }
.osg__disclaimer { margin-left: auto; text-transform: none; letter-spacing: 0.02em; color: var(--muted-3); }

/* --- odhalení -------------------------------------------------------------- */

/* Skript nasadí `is-ziva` až ve chvíli, kdy graf vjede do záběru. Výchozí
   stav se NEskrývá tady, ale až v `.js-pripraveno`, kterou nasazuje taky
   skript — bez JS se tedy nic neschovává a graf je rovnou vidět. */
.js-pripraveno .osg-uzel,
.js-pripraveno .osg-klient {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
}
.js-pripraveno .osg__spoj { stroke-dashoffset: var(--delka, 0); }

.is-ziva .osg-uzel,
.is-ziva .osg-klient {
  opacity: var(--op, 1);
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(0.22, 0.7, 0.3, 1);
  transition-delay: calc(var(--poradi, 0) * 50ms + 200ms);
}
.is-ziva .osg-klient { transition-delay: 60ms; }
.is-ziva .osg__spoj {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 120ms;
}

/* Tep u napojených uzlů. Pomalý a slabý schválně — má to být známka života,
   ne blikátko. */
.is-ziva .osg-uzel--ok .osg-uzel__tecka,
.is-ziva .osg-uzel--agent .osg-uzel__tecka {
  animation: osg-tep 3.4s ease-out infinite;
  animation-delay: calc(var(--poradi, 0) * 240ms);
}
@keyframes osg-tep {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(63, 191, 135, 0.4); }
  35% { box-shadow: 0 0 0 4px rgba(63, 191, 135, 0); }
}

/* --- užší obrazovky --------------------------------------------------------- */

/* Pod 760 px nemá radiální rozvržení smysl: uzly by se překrývaly a text by
   se ořezal. Graf se proto rozpadne na seznam ve stejném pořadí, v jakém je
   v DOM — a spojnice zmizí, protože spojovat svisle pod sebou seřazené
   krabice čárou je ozdoba, ne informace. */
@media (max-width: 760px) {
  .osg__platno {
    aspect-ratio: auto;
    display: grid;
    gap: 6px;
    padding: 0;
    --m: 1px;
  }
  /* Rastr teček je podklad pro rozmístění v ploše. Ve svislém seznamu žádná
     plocha není, takže by to byla ozdoba bez důvodu. */
  .osg__platno::before { display: none; }
  .osg__spoje { display: none; }
  .osg-uzel,
  .osg-klient {
    position: static;
    transform: none;
    max-width: none;
    width: auto;
  }
  .js-pripraveno .osg-uzel,
  .js-pripraveno .osg-klient { transform: none; }
  .is-ziva .osg-uzel,
  .is-ziva .osg-klient { transform: none; }
  .osg-klient { order: -1; }
  .osg-uzel__nazev,
  .osg-uzel__popis { white-space: normal; }
  .osg__disclaimer { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js-pripraveno .osg-uzel,
  .js-pripraveno .osg-klient { opacity: var(--op, 1); transform: translate(-50%, -50%); }
  .js-pripraveno .osg__spoj { stroke-dashoffset: 0; }
  .is-ziva .osg-uzel,
  .is-ziva .osg-klient { transition: none; }
  .is-ziva .osg__spoj { transition: none; }
  .is-ziva .osg-uzel--ok .osg-uzel__tecka,
  .is-ziva .osg-uzel--agent .osg-uzel__tecka { animation: none; }
  .osg__puls { display: none; }
}



/* --- Galerie s rotujícím velkým snímkem ------------------------------------ */

/* Velký snímek nahoře se střídá přes všechny obrazovky, náhledy pod ním ho
   umí přepnout. Dřív tu byl jeden vybraný snímek (`.shot--lead`) natrvalo —
   z osmi obrazovek byla velká pořád tatáž.

   Střídání i ovládání obstarává `<zeus-ukazka>`, tedy tentýž prvek jako
   u rámečku ZEUSu. Dvě komponenty na tutéž věc by znamenaly, že se pauza
   při najetí nebo ohled na `prefers-reduced-motion` jednou opraví jen
   v jedné. */

.gal { display: block; }

/* Bez ohraničení a bez vlastního podkladu.

   Obrazovky mají poměry od 1,083 po 1,882 a leží v krabicích o jednom
   poměru, takže kolem nich zbývají prázdné pruhy. S rámečkem a tmavším
   podkladem vypadaly ty pruhy jako okraj obrázku; bez nich splynou se
   stránkou a zůstane jen snímek. */
.gal__velky,
.gal__nahledy .frame {
  border: 0;
  background: none;
}

.gal__velky {
  position: relative;
  /* Poměr velkých snímků ZEUSu. Kdyby ho držel první obrázek, skákala by
     výška při každém přepnutí na jinak vysoký snímek. */
  aspect-ratio: 16 / 10;
}
.gal__velky .zu__snimek {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 620ms ease;
}
.gal__velky .zu__snimek--aktivni { opacity: 1; }
/* Bez ořezu. Obrazovky v galerii mají poměry od 1,08 po 1,88; zděděné
   `cover` z `.frame` by u té nejvyšší uřízlo skoro třetinu, a to zdola,
   kde jsou u vyhledávání v judikatuře výsledky. Tmavé pruhy po stranách
   jsou menší daň než uříznutý obsah — a dlaždice to řeší stejně. */
.gal__velky .zu__snimek img {
  object-fit: contain;
  object-position: center;
}

/* Popisek velkého snímku v hlavní barvě. Je to jediný text, který k obrázku
   patří přímo, a akcent ho odděluje od popisek pod náhledy. */
.gal__popis {
  margin: 16px 0 30px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--accent);
  max-width: 68ch;
  text-wrap: pretty;
  /* Popisky mají různou délku a při přepnutí se mění. Bez rezervy na dva
     řádky by se pod nimi posouvala celá mřížka. */
  min-height: calc(2 * 1.55em);
}

/* --- náhledy ---------------------------------------------------------------- */

/* Užší sloupce než dřív: náhledů je sedm a jsou to ukazatele, ne hlavní obsah. */
.gal__nahledy {
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 20px 18px;
}
/* Na úzké obrazovce vycházel jeden sloupec, takže náhled byl stejně velký
   jako snímek nad ním — osm stejných obrázků pod sebou už není galerie
   s vybraným snímkem, jen dlouhý sloupec. Dva sloupce natvrdo, ne
   auto-fit: ten by při 375 px stejně spadl na jeden. */
@media (max-width: 560px) {
  .gal__nahledy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .gal__nahledy .shot__cap { font-size: 11.5px; }
}

/* Ovládání se přidává skriptem, takže kurzor a stavy platí až s ním —
   bez JavaScriptu jsou náhledy obyčejné obrázky a nemají se tvářit jinak. */
.js-ovladani .gal__nahledy .shot { cursor: pointer; }
/* Výběr nese jas, ne okraj — ten už neexistuje. Kdyby se okraj smazal a
   nic ho nenahradilo, nešlo by v galerii poznat, na co je zrovna vidět
   nahoře. Rozdíl 0,45 proti 1 je znát i koutkem oka. */
.js-ovladani .gal__nahledy .shot .frame {
  transition: opacity 200ms ease;
  opacity: 0.45;
}
.js-ovladani .gal__nahledy .shot:hover .frame { opacity: 0.75; }
.js-ovladani .gal__nahledy .shot.is-tam .frame { opacity: 1; }
/* Popiska vybraného jde na barvu hlavního textu. Akcent tu být nemůže —
   ten nese popisek velkého snímku a dvakrát v jednom bloku by ztratil
   význam. */
.js-ovladani .gal__nahledy .shot .shot__cap { transition: color 200ms ease; }
.js-ovladani .gal__nahledy .shot.is-tam .shot__cap { color: var(--ink); }
.js-ovladani .gal__nahledy .shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .gal__velky .zu__snimek { transition: none; }
  .js-ovladani .gal__nahledy .shot .frame,
  .js-ovladani .gal__nahledy .shot .shot__cap { transition: none; }
}

/* --- Karusel snímků ZEUSu --------------------------------------------------- */

/* Tři obrazovky v jednom rámečku. Snímky mají shodný rozměr, takže se stoh
   nemusí dopočítávat — první drží výšku a zbylé leží přes něj.

   Výchozí stav se NEschovává skriptem: neaktivní snímky jsou průhledné už
   z CSS a první má `--aktivni` ze serveru. Bez JavaScriptu je tedy vidět
   první obrazovka, ne prázdný rámeček. */

/* Poměr snímků, ne zděděné 4 : 3 z `.frame`.

   `.frame` je pevná krabice 4 : 3 a `.frame img` v ní leží absolutně přes
   `object-fit: cover`. Snímky karuselu mají 1600×980, tedy 1,633 — v krabici
   4 : 3 by je cover ořízl o pravou pětinu, kde jsou u rozhraní hodnoty
   a panely. A když se ořezu zabránilo výškou `auto`, zbylo pod snímkem
   117 px prázdna, protože výšku pořád držela krabice.

   S vlastním poměrem sedí obojí: cover nemá co oříznout a prázdno nevznikne.
   Rámeček je tím nižší než dřív — to je daň za to, že je vidět celá
   obrazovka místo čtyř pětin. */
.zu {
  position: relative;
  display: block;
  aspect-ratio: 1600 / 980;
}

/* Všechny snímky leží přes sebe; výšku drží poměr rámečku, ne první z nich. */
.zu__stoh { position: absolute; inset: 0; }

.zu__snimek {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 620ms ease;
}
.zu__snimek--aktivni { opacity: 1; }


/* --- tečky ------------------------------------------------------------------ */

/* Odkrývá je až skript (`js-ovladani`). Tlačítka, která bez JavaScriptu nic
   nedělají, slibují ovládání, které není — to je horší než žádné. */
.zu__tecky {
  position: absolute;
  left: clamp(16px, 2.4vw, 28px);
  bottom: clamp(14px, 2vw, 22px);
  display: none;
  gap: 8px;
  z-index: 2;
}
.js-ovladani .zu__tecky { display: flex; }

.zu__tecka {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(237, 234, 227, 0.32);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
  /* Terč je větší než tečka: 7px puntík se na dotyku netrefí.
     WCAG 2.5.8 chce 24 px, což tenhle obal splní bez zvětšení tečky. */
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
}
.zu__tecka::before {
  content: "";
  position: absolute;
  inset: -9px;
}
.zu__tecka { position: relative; }
.zu__tecka:hover { background: rgba(237, 234, 227, 0.6); }
.zu__tecka.is-tam { background: var(--accent); transform: scale(1.15); }
.zu__tecka:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  /* Přepnutí zůstává, prolínání ne — skript sám o sobě automat nespustí,
     takže se sem dostane jen ruční volba tečkou. */
  .zu__snimek { transition: none; }
  .zu__tecka { transition: none; }
}

/* --- Režim vysokého kontrastu --------------------------------------------- */

/* Tři prvky na webu se vykreslují gradientem přes `background-clip: text`
   a mají tedy `color: transparent`. Ve Windows High Contrast Mode systém
   přepíše pozadí a barvu textu nechá — takže by z hlavního nadpisu i perexu
   nezbylo nic. Ne nečitelné, prázdné.

   `CanvasText` je systémová barva textu, kterou si režim řídí sám; tvrdá
   hodnota by se tu chovala stejně špatně jako gradient. */
@media (forced-colors: active) {
  .hero__title,
  .hero__lede,
  .h1--zlaty {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
  /* Rámečky a linky nesou v tomhle režimu strukturu, kterou jinde nese barva. */
  .frame, .card, .speclist, .adm-block { border: 1px solid CanvasText; }
}

/* --- Tisk ------------------------------------------------------------------ */

/* Podmínky a Zásady ochrany údajů jsou dokumenty, které si druhá strana
   vytiskne nebo uloží do PDF pro spis. Web je tmavý a prohlížeče tisknou
   ve výchozím nastavení bez barev pozadí, ale s barvami textu — takže bez
   téhle sekce vyjde téměř bílý text na bílém papíře, tedy prázdné stránky.

   Barevný systém stojí na proměnných, takže stačí přebarvit tokeny a
   komponenty se přizpůsobí samy. */

/* ---------------------------------------------------------------------------
   Vstup — přihlášení a založení členství
   ---------------------------------------------------------------------------

   Jedna stránka, dvě role. Členovi ukáže, kudy dovnitř; tomu, kdo členem není,
   nabídne průvodce, který se ho zeptá na tři věci po jedné.

   Proč po jedné a ne najednou: formulář o pěti polích se čte jako práce.
   Jedno pole na obrazovce se čte jako otázka a odpoví se na ni. Cena je, že
   krok navíc znamená klik navíc, a proto jsou kroky jen tři a poslední z nich
   nese rovnou souhlas i odeslání.

   **Bez JavaScriptu se všechna pole ukážou najednou** a formulář se odešle
   normálním POSTem, který endpoint umí. Průvodce je vrstva navíc, ne
   podmínka — přihlašovací stránka, která bez skriptu neudělá nic, je
   přihlašovací stránka, která pro část lidí neexistuje.
   -------------------------------------------------------------------------- */

.vstup {
  position: relative;
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vh, 64px) var(--pad-x) clamp(48px, 9vh, 110px);
  overflow: hidden;
}

/* Pozadí. Všechno tady je dekorace: `aria-hidden` na obalu, žádný text. */
.vstup__pole {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.vstup__pole nebula-field { position: absolute; inset: 0; }

/* Mřížka. Krok se odvozuje od šířky okna, aby na telefonu nebyla hustá síť
   a na monitoru čtyři čáry. */
.vstup__mrizka {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(237, 234, 227, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237, 234, 227, 0.045) 1px, transparent 1px);
  background-size: clamp(120px, 14vw, 240px) clamp(120px, 14vw, 240px);
  background-position: center top;
}

/* Světelný kužel shora. `clip-path` dělá tvar, `filter: blur` měkkost —
   gradient sám by dal obdélník s rozmazanými okraji, ne kužel. */
.vstup__kuzel {
  position: absolute;
  top: -6%;
  left: 50%;
  width: min(150vw, 1500px);
  height: min(120vh, 1100px);
  transform: translateX(-50%);
  clip-path: polygon(48.4% 0%, 51.6% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(to bottom,
    rgba(255, 240, 214, 0.30) 0%,
    rgba(240, 196, 124, 0.10) 22%,
    rgba(232, 163, 61, 0.038) 52%,
    rgba(232, 163, 61, 0.012) 76%,
    rgba(232, 163, 61, 0) 96%);
  filter: blur(22px);
  animation: vstupDech 13s ease-in-out infinite;
}
.vstup__zdroj {
  position: absolute;
  top: -4%;
  left: 50%;
  width: min(56vw, 640px);
  height: min(52vh, 520px);
  transform: translate(-50%, -30%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(255, 246, 226, 0.34) 0%, rgba(240, 190, 110, 0.10) 38%, rgba(232, 163, 61, 0) 74%);
  filter: blur(26px);
}
@keyframes vstupDech { 0%, 100% { opacity: 0.74; } 50% { opacity: 1; } }

/* Rohové značky. Drží se okrajů okna, ne karty — je to rám scény. */
.vstup__znacka {
  position: absolute;
  width: 24px;
  height: 1px;
  background: rgba(237, 234, 227, 0.16);
}
.vstup__znacka::after {
  content: "";
  position: absolute;
  left: 12px;
  top: -12px;
  width: 1px;
  height: 24px;
  background: inherit;
}
.vstup__znacka--vl { top: 16%; left: clamp(8%, 14vw, 20%); }
.vstup__znacka--vp { top: 16%; right: clamp(8%, 14vw, 20%); }
.vstup__znacka--vp::after { left: auto; right: 12px; }
.vstup__bod {
  position: absolute;
  bottom: 14%;
  width: 3px;
  height: 3px;
  background: rgba(232, 163, 61, 0.4);
}
.vstup__bod--l { left: clamp(8%, 14vw, 20%); }
.vstup__bod--p { right: clamp(8%, 14vw, 20%); }

/* Obsah nad pozadím. */
.vstup__obsah {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Nadočí s vlásovými linkami po stranách. Linky mizí do ztracena, aby
   nevypadaly jako oříznuté. */
.vstup__oko {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 340px;
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.vstup__oko::before,
.vstup__oko::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(237, 234, 227, 0) 0%, rgba(237, 234, 227, 0.18) 100%);
}
.vstup__oko::after { background: linear-gradient(to left, rgba(237, 234, 227, 0) 0%, rgba(237, 234, 227, 0.18) 100%); }

.vstup__titul {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  /* Přechod na písmu ořezává descendery, když je řádkování těsné; odsazení
     dole mu vrátí místo. Bez toho se „j" a „y" uříznou. */
  padding-bottom: 0.08em;
  background-image: linear-gradient(180deg, #FFFDF8 0%, #E4DACA 34%, #A8A297 72%, #6E6A62 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.vstup__lede {
  margin: 0 0 clamp(32px, 6vh, 60px);
  max-width: 34ch;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--muted);
}

/* Stoh karet. Duchové vzadu říkají, že za tímhle krokem ještě něco je —
   ukazatel postupu, který nezabírá řádek. */
.vstup__stoh {
  position: relative;
  width: 100%;
  max-width: 400px;
}
.vstup__duchove {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vstup__duch {
  position: absolute;
  border: 1px solid rgba(237, 234, 227, 0.07);
  background: rgba(18, 21, 26, 0.5);
  opacity: 0.6;
}
.vstup__duch--dva { top: 22px; left: -38px; right: 38px; bottom: -22px; }
.vstup__duch--jeden {
  top: 11px; left: -19px; right: 19px; bottom: -11px;
  border-color: rgba(237, 234, 227, 0.09);
  background: rgba(18, 21, 26, 0.72);
  opacity: 0.8;
}

.vstup__karta {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  padding: clamp(28px, 3.2vw, 40px) clamp(22px, 2.8vw, 34px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  animation: vstupKarta 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes vstupKarta {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* Rohové body karty. Jeden prvek se dvěma pseudoprvky by dal dva rohy;
   čtyři rohy chtějí dva prvky. */
.vstup__rohy { position: absolute; inset: -2px; pointer-events: none; }
.vstup__rohy::before,
.vstup__rohy::after,
.vstup__rohy > i::before,
.vstup__rohy > i::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(232, 163, 61, 0.6);
}
.vstup__rohy::before { top: 0; left: 0; }
.vstup__rohy::after { top: 0; right: 0; }
.vstup__rohy > i { position: absolute; inset: 0; }
.vstup__rohy > i::before { bottom: 0; left: 0; }
.vstup__rohy > i::after { bottom: 0; right: 0; }

.vstup__prsten {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vstup__prsten::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(232, 163, 61, 0.35);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: vstupRotace 9s linear infinite;
}
.vstup__jadro {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(232, 163, 61, 0.8);
}
@keyframes vstupRotace { to { transform: rotate(360deg); } }

.vstup__nazev {
  margin: 0 0 6px;
  text-align: center;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
}
.vstup__krok {
  margin: 0 0 30px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted-3);
}

.vstup__skupina { animation: vstupPole 460ms ease 120ms both; }
@keyframes vstupPole {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.vstup__stitek {
  display: block;
  margin: 0 0 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.vstup__pole-vstup {
  width: 100%;
  min-height: 46px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  caret-color: var(--accent);
  outline: none;
  transition: border-color 200ms ease;
}
.vstup__pole-vstup:focus { border-color: var(--accent); }
.vstup__pole-vstup::placeholder { color: var(--muted); }

/* Zaměření. Rádiová skupina psaná nativně, ne divy s `role="radio"`:
   nativní vstupy umí klávesnici, čtečku i odeslání formuláře bez skriptu,
   a bez skriptu je tahle stránka pořád formulář. Kolečko se schová a
   vykreslí se rámeček — vzhled z návrhu, chování z prohlížeče. */
.vstup__volby { display: grid; gap: 8px; }
.vstup__volba { position: relative; display: block; }
.vstup__volba input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.vstup__volba span {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.vstup__volba span::before {
  content: attr(data-n);
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
}
.vstup__volba:hover span { border-color: rgba(232, 163, 61, 0.6); }
.vstup__volba input:focus-visible + span { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.vstup__volba input:checked + span {
  border-color: var(--accent);
  background: rgba(232, 163, 61, 0.08);
  color: var(--ink);
}
.vstup__volba input:checked + span::before { color: var(--accent); }

.vstup__podminky {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 6px 4px;
  min-height: 44px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--muted);
}
/* Zaškrtávátko zůstává nativní `<input type="checkbox">` — klávesnice,
   čtečka i odeslání formuláře bez skriptu fungují samy. Mění se jen kresba:
   výchozí bílý čtverec je na tmavé kartě nejsvětlejší plocha na stránce
   a přetahuje pozornost z tlačítka.

   `appearance: none` vypne i `accent-color`, takže zaškrtnutý stav se musí
   nakreslit ručně. Fajfka je `::after` s rámečkem otočeným o 45°, ne znak —
   textová fajfka závisí na písmu, které na cizím zařízení nemusí být. */
.vstup__podminky input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  position: relative;
  transition: border-color 200ms ease, background 200ms ease;
}
.vstup__podminky:hover input { border-color: rgba(232, 163, 61, 0.6); }
.vstup__podminky input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vstup__podminky input:checked { background: var(--accent); border-color: var(--accent); }
.vstup__podminky input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.vstup__podminky span { flex: 1 1 auto; min-width: 0; }

.vstup__hlaska {
  margin: 10px 0 0;
  min-height: 1.4em;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.vstup__hlaska--chyba { color: #D2706A; }

.vstup__tlacitko {
  width: 100%;
  margin-top: 24px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow 200ms ease, background 200ms ease;
}
.vstup__tlacitko:hover { box-shadow: 0 0 30px rgba(232, 163, 61, 0.3); background: var(--accent-btn); }
.vstup__tlacitko[disabled] { opacity: 0.5; cursor: default; box-shadow: none; }

.vstup__nebo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.vstup__nebo::before,
.vstup__nebo::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.vstup__druhe {
  width: 100%;
  margin-top: 22px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}
.vstup__druhe:hover { border-color: rgba(232, 163, 61, 0.6); background: rgba(232, 163, 61, 0.06); }

.vstup__lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}
.vstup__zpet {
  min-height: 36px;
  display: flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
  cursor: pointer;
  transition: color 200ms ease;
}
.vstup__zpet:hover { color: var(--ink); }
.vstup__tecky { display: flex; gap: 7px; align-items: center; }
.vstup__tecka {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  transition: background 200ms ease, border-color 200ms ease, width 200ms ease, height 200ms ease;
}
.vstup__tecka[data-stav="ted"] { width: 7px; height: 7px; background: var(--accent); border-color: var(--accent); }
.vstup__tecka[data-stav="hotovo"] { background: var(--muted-3); border-color: var(--muted-3); }

.vstup__pata {
  margin: clamp(28px, 5vh, 52px) 0 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-align: center;
}

/* Zážeh po odeslání. Světlice je jeden překryv přes celou stránku, ne efekt
   na kartě: karta v tu chvíli mizí a efekt na mizejícím prvku zmizí s ním. */
.vstup__svetlice {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  animation: vstupSvetlice 700ms ease both;
  background: radial-gradient(ellipse 70% 60% at 50% 30%,
    rgba(255, 248, 232, 0.5) 0%, rgba(255, 226, 170, 0.18) 34%,
    rgba(232, 163, 61, 0.04) 62%, rgba(232, 163, 61, 0) 84%);
}
@keyframes vstupSvetlice { from { opacity: 0; } to { opacity: 1; } }

.vstup__hotovo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  text-align: center;
  animation: vstupKarta 800ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.vstup__hotovo-oko {
  margin: 0 0 28px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.vstup__hotovo-titul {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  padding-bottom: 0.08em;
  background-image: linear-gradient(180deg, #FFFDF8 0%, #EBE0CD 40%, #B4AEA2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.vstup__hotovo-text {
  margin: 0 auto 32px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--ink-3);
}

/* Bez skriptu je stránka obyčejný formulář: přihlašovací panel i celá
   přihláška vidět naráz, všechna pole otevřená, odeslání normálním POSTem,
   na který endpoint odpoví přesměrováním na poděkování.

   Skrývá se proto jen výbava průvodce — počítadlo kroků, tečky, tlačítko
   zpět a přepínač mezi panely. Ta bez skriptu nemá co ovládat.

   **Panely se nepřepínají atributem `hidden`.** Ten by musel být v HTML,
   aby platil od začátku — jenže co je `hidden` v HTML, to bez skriptu
   zůstane skryté navždy, a přihlašovací stránka, na které pro část lidí
   není formulář, je přihlašovací stránka bez formuláře. Výchozí stav je
   tedy „vidět" a skrývá až skript tím, že na sekci nastaví
   `data-vstup-aktivni`. Bliknout to nemůže: třídu `.js` sází `nav.js`,
   který se kvůli tomu načítá bez `defer`, takže pravidlo platí dřív, než
   se cokoli vykreslí.

   Obrazovka po odeslání `hidden` v HTML má, a správně: bez skriptu se na
   ni nikdy nedojde, protože odeslání skončí na jiné stránce. */
.vstup__krok,
.vstup__lista,
.vstup__nebo,
.vstup__druhe { display: none; }
.js .vstup__krok { display: block; }
.js .vstup__lista,
.js .vstup__nebo,
.js .vstup__druhe { display: flex; }

.js [data-vstup-aktivni] [data-vstup-panel] { display: none; }
.js [data-vstup-aktivni="prihlaseni"] [data-vstup-panel="prihlaseni"],
.js [data-vstup-aktivni="registrace"] [data-vstup-panel="registrace"],
.js [data-vstup-aktivni="hotovo"] [data-vstup-panel="hotovo"] { display: block; }

@media (max-width: 560px) {
  /* Duchové se opírají o zápornou pozici, která pod čtyřmi sty pixely
     vyjede z okna a rozjede stránku do strany. Na telefonu je nese
     řada teček, ne kresba. */
  .vstup__duchove { display: none; }
  .vstup__znacka, .vstup__bod { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vstup__kuzel,
  .vstup__prsten::before,
  .vstup__karta,
  .vstup__skupina,
  .vstup__hotovo,
  .vstup__svetlice { animation: none; }
}

@media print {
  :root {
    --bg: #fff;
    --bg-alt: #fff;
    --bg-deep: #fff;
    --bg-frame: #fff;
    --bg-card-hover: #fff;
    --ink: #111;
    --ink-2: #222;
    --ink-3: #333;
    --muted: #444;
    --muted-2: #444;
    --muted-3: #555;
    --accent: #8A5A00;
    --line: #ccc;
    --line-soft: #ddd;
    --line-strong: #bbb;
    --line-frame: #ccc;
    --line-accent: #8A5A00;
  }

  body { background: #fff; color: #111; }

  /* Graf se na papíře nemá odhalovat — `js-pripraveno` ho drží skrytý,
     dokud nepřijde callback, a ten při tisku nemusí přijít vůbec. */
  .js-pripraveno .osg-uzel,
  .js-pripraveno .osg-klient { opacity: var(--op, 1) !important; transform: translate(-50%, -50%) !important; }
  .js-pripraveno .osg__spoj { stroke-dashoffset: 0 !important; }
  .osg__puls { display: none !important; }

  /* Gradientový text by se vytiskl jako nic. */
  .hero__title, .hero__lede, .h1--zlaty {
    background: none;
    -webkit-text-fill-color: #111;
    color: #111;
  }

  /* Ozdoby, navigace a výzvy k akci na papíře nemají co dělat. */
  .hero__bg, comet-field, nebula-field, dyson-field,
  .nav, .footer__links, .side-cta, .skip-link, .lang-hint, .odber {
    display: none !important;
  }

  /* Adresa odkazu se na papíře jinak ztratí. Interní odkazy se nevypisují —
     u dvaceti odkazů v patičce by z toho byl nečitelný shluk. */
  .prose a[href^="http"]::after,
  .legal a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  /* Oddíl se nemá lámat hned za nadpisem. */
  h1, h2, h3 { break-after: avoid; }
  .legal p, .prose p { orphans: 3; widows: 3; }
}

/* --- Stock Research Dashboard na stránce produktů ------------------------- */
/*
 * Karta Palantiru a diagram SanDisku tu **nejsou snímky obrazovky**, ale
 * kresba. Rastr nezná velikost písma: na širokém monitoru se rozmaže a na
 * telefonu se popisky zmenší pod čitelnost. Tohle drží pixely na obou.
 *
 * Nadpis sekce a karta stojí na jednom řádku. Karta má proto šest dlaždic,
 * ne deset — beta a dividendový výnos u téhle firmy nic nevypisují (pomlčka
 * není údaj), odvětví je věta o klasifikaci, ne o firmě, a tržní kapitalizace
 * stojí o dva řádky výš v cenovém bloku. Šest se navíc dělí na tři i na dva,
 * takže z mřížky nevypadne osiřelý řádek; sedm je prvočíslo a vypadl by.
 */
.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
@media (min-width: 1080px) {
  .dash {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 54px;
  }
}
.dash__text { min-width: 0; }
.dash__text > :last-child { margin-bottom: 0; }

/* --- karta firmy ---------------------------------------------------------- */

.pcard {
  min-width: 0;
  border: 1px solid var(--line-frame);
  background: var(--bg-alt);
  padding: 22px 24px 0;
}
.pcard__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.pcard__tic { color: var(--ink); font-weight: 700; }
.pcard__burza {
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 2px 7px;
  letter-spacing: 0.08em;
}
.pcard__name {
  font-family: var(--serif);
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.1;
  margin: 12px 0 14px;
}
.pcard__filing {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}
.pcard__filing b { color: var(--ink); font-weight: 500; }

/* Cenový blok. Zelený nádech je tu proto, že je to jediné číslo na kartě,
   které se hýbe — a jediné, u kterého je proto napsané datum. */
.pcard__price {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(111, 191, 139, 0.22);
  background: linear-gradient(180deg, rgba(111, 191, 139, 0.10), rgba(111, 191, 139, 0.02));
}
.pcard__cena {
  font-family: var(--mono);
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1;
  color: var(--ink);
}
.pcard__zmena {
  font-family: var(--mono);
  font-size: 12.5px;
  color: #6FBF8B;
  margin: 8px 0 0;
}
.pcard__kap {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
}
.pcard__kap b { color: var(--ink); font-weight: 500; }
/* Datum, ne „zpožděno ~15 min". Ta věta na snímku z nástroje platí, protože
   nástroj se opravdu ptá; tady je to číslo z jednoho dne a tvrdit u něj
   živost by byl údaj, který vypadá jako měření a měřením není. */
.pcard__kdy {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--muted-2, var(--muted));
  margin: 6px 0 0;
}

/* Dlaždice. Popisek má pevnou výšku na dva řádky, jinak by delší popisek
   („TRŽNÍ KAPITALIZACE") posunul hodnotu pod sebou a šest čísel by nesedělo
   na jednu linku. */
.pcard__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px -24px 0;
  border-top: 1px solid var(--line-frame);
}
@media (min-width: 560px) {
  .pcard__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pcard__tile {
  padding: 14px 16px 16px;
  border-right: 1px solid var(--line-frame);
  border-bottom: 1px solid var(--line-frame);
  min-width: 0;
}
.pcard__k {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  min-height: 2.6em;
  line-height: 1.3;
}
.pcard__v {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
}
.pcard__pozn {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 14px 0 18px;
}

/* --- diagram toku --------------------------------------------------------- */

.psankey-card {
  border: 1px solid var(--line-frame);
  background: var(--bg-alt);
  padding-top: 22px;
  padding-bottom: 22px;
}
.psankey-card__hd {
  padding-left: 24px;
  padding-right: 24px;
}
.psankey-card__t {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.psankey-card__s {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 6px 0 0;
}
/* Obal roluje, kresba drží nejmenší prostor, ve kterém jsou popisky čitelné —
   týž práh jako `MIN` v sankey.js. Zmenšit kresbu pod něj znamená zmenšit
   písmo, a to je přesně to, čemu se celý ten modul vyhýbá. */
.psankey-obal {
  overflow-x: auto;
  margin-top: 14px;
  padding: 0 24px;
}
.psankey {
  display: block;
  width: 100%;
  min-width: 820px;
  height: auto;
}
.psankey-jak {
  padding: 16px 24px 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  max-width: 110ch;
}
.psankey-jak b { color: var(--ink); font-weight: 500; }

/* Pruh čtyř údajů. Čtyři se dělí na čtyři i na dva, takže ani tady nevypadne
   osiřelý řádek. */
.pstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-frame);
  border: 1px solid var(--line-frame);
  margin-top: 26px;
}
@media (min-width: 860px) {
  .pstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pstat {
  background: var(--bg-alt);
  padding: 18px 20px 20px;
  min-width: 0;
}
.pstat__v {
  display: block;
  font-family: var(--mono);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.1;
}
.pstat__k {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 10px;
}

/* --- Dashboard: doplňky ---------------------------------------------------- */
/*
 * `<figure>` má od prohlížeče `margin: 1em 40px`. `.shot { margin: 0 }` platí
 * jen pro snímky, takže nové karty byly o čtyřicet pixelů z každé strany užší
 * než pruh pod nimi — vypadalo to jako špatné zarovnání a byla to zděděná
 * výchozí hodnota, kterou nikdo nenapsal.
 */
.pcard, .psankey-card, .pchart, .prules-card { margin: 0; }

/* Štítek sekce. Musí být hned vidět, že tohle je za přihlášením — proto ne
   ztlumená šeď jako u ostatních očí, ale akcent v rámečku. */
.eyebrow--sekce {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  border: 1px solid var(--line-accent);
  border-radius: 3px;
  padding: 6px 12px;
  margin: 0 0 22px;
}
.dash__cta { margin: 28px 0 0; }
.dash__vic {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-3);
  margin: 20px 0 0;
}
.dash__vic b { color: var(--ink-2); font-weight: 500; }

/* --- dva nakreslené grafy vedle sebe -------------------------------------- */

.pcharts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  margin-top: 44px;
}
@media (min-width: 900px) {
  .pcharts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pchart {
  border: 1px solid var(--line-frame);
  background: var(--bg-alt);
  padding: 22px 24px 20px;
  min-width: 0;
}
.pchart__t { font-family: var(--sans); font-size: 15.5px; font-weight: 600; margin: 0; }
.pchart__s {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 5px 0 0;
}
.pchart__pozn {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  margin: 16px 0 0;
}

/* Sloupce jsou HTML, ne kresba: výška je procento, takže se s oknem nezmenší
   písmo popisku — ten je vedle grafu, ne v něm. */
.pbars { display: flex; align-items: flex-end; gap: 10px; height: 190px; margin-top: 18px; }
.pbars__osa {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
  text-align: right;
  padding-bottom: 18px;
}
.pbars__pole {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  align-items: end;
  height: 100%;
  border-left: 1px solid var(--line-frame);
  border-bottom: 1px solid var(--line-frame);
  padding: 0 6px;
}
.pbar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.pbar__v { background: var(--accent); border-radius: 1px 1px 0 0; min-height: 1px; }
.pbar__r {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
  height: 12px;
}

/* Křivka je SVG bez textu, takže se roztažením nic nezmenší — popisky os jsou
   HTML vedle ní. `preserveAspectRatio: none` je tu proto v pořádku. */
.pline-obal { display: flex; gap: 10px; margin-top: 18px; }
.pline-osa {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
  text-align: right;
}
.pline-pole { flex: 1; min-width: 0; }
.pline {
  display: block;
  width: 100%;
  height: 160px;
  border-left: 1px solid var(--line-frame);
  border-bottom: 1px solid var(--line-frame);
}
.pline__x {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
  margin-top: 6px;
}

/* --- osm zásad ------------------------------------------------------------- */

.prules-card {
  border: 1px solid var(--line-frame);
  background: var(--bg-alt);
  padding: 24px;
  margin-top: 26px;
}
.prules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 18px;
}
@media (min-width: 860px) {
  .prules { grid-template-columns: 220px minmax(0, 1fr); gap: 34px; }
}
.prules__kruh { text-align: center; }
/* Číslo uprostřed prstence se pozicuje, ne posouvá záporným marginem: ten by
   se rozešel s velikostí písma při prvním zásahu do sazby. */
.prules__terc { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.prules__ring { display: block; width: 132px; height: 132px; }
.prules__pomer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 21px;
  color: var(--ink);
  margin: 0;
}
.prules__vys { margin-top: 16px; }
.prules__vys {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.prules__radek {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line-frame);
}
.prules__radek:first-child { border-top: 0; }
.prules__jm { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink-2); }
.prules__prah {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 3px;
}
.prules__h { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; }
.prules__v {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.prules__v--ok { color: #6FBF8B; background: rgba(111, 191, 139, 0.13); }
.prules__v--ne { color: #D2706A; background: rgba(210, 112, 106, 0.13); }
.prules__v--nic { color: var(--muted); background: rgba(237, 234, 227, 0.06); }

/* --- Kurikulum na prodejní stránce ---------------------------------------- */
/*
 * Rozbalovací osnova. `<details>` schválně, ne skript: veřejná stránka tím
 * nedostane další JavaScript, funguje to bez něj a klávesnice i odečítač
 * obrazovky to umí bez jediného `aria-`.
 *
 * Lekce se **nevypisují ručně**. Jediný zdroj pravdy o kurzech je
 * `src/_data/kurikulum.json`, ze kterého se staví i klientská sekce; druhý
 * seznam v šabloně by znamenal, že se jeden opraví a druhý tiše zůstane
 * po staru — a pozná se to až tím, že prodejní stránka slibuje lekci, která
 * se jinde jmenuje jinak.
 */
.kurikulum { margin-top: 46px; border-top: 1px solid var(--line); }
.kurikulum__spust {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 14px 26px;
  transform: translateY(-1px);
  background: var(--bg);
  border: 1px solid var(--line-accent);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  transition: color 160ms ease, border-color 160ms ease;
}
.kurikulum__spust::-webkit-details-marker { display: none; }
.kurikulum__spust:hover { color: var(--accent-hi); border-color: var(--accent); }
.kurikulum__spust:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.section--alt .kurikulum__spust { background: var(--bg-alt); }
.kurikulum__s { display: none; }
.kurikulum[open] .kurikulum__z { display: none; }
.kurikulum[open] .kurikulum__s { display: inline; }

.kurikulum__sloupce {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  margin-top: 40px;
}
@media (min-width: 700px) { .kurikulum__sloupce { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kurikulum__sloupce { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.kurikulum__kurz { min-width: 0; }
.kurikulum__hlava {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-frame);
}
.kurikulum__c { font-family: var(--mono); color: var(--accent); margin-right: 8px; }
.kurikulum__pocet {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 0;
}
.kurikulum__lekce { list-style: none; margin: 12px 0 0; padding: 0; }
.kurikulum__lekce li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 7px 0;
}
.kurikulum__n {
  flex: 0 0 34px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  padding-top: 3px;
}

/* --- Kdo to píše: portrét vedle textu ------------------------------------- */
.kdo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
@media (min-width: 860px) {
  .kdo { grid-template-columns: 340px minmax(0, 700px); gap: 54px; }
}
.kdo__foto { margin-bottom: 0; max-width: 340px; }
.kdo__text > :last-child { margin-bottom: 0; }
.kdo__jmeno {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ink);
  margin: 18px 0 8px;
}
.kdo__role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
/* Věta, kterou má čtenář odnést. Stojí za odstavci, ne mezi nimi, takže je to
   shrnutí — ne citace někoho jiného, proto `<p>` a ne `<blockquote>`. */
/* Zlatá věta uvnitř odstavce (Filip 10. 9.: „zvýrazni tou naší zlatou").
   Obecná třída, ne `.kdo__text span`: příště ji bude chtít jiná sekce. */
.zlata { color: var(--accent); }

.kdo__cit {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--line-accent);
  padding-left: 22px;
  margin: 32px 0 0;
}

/* --- Tři tarify a balík ---------------------------------------------------- */
/*
 * Tři části se prodávají zvlášť, dohromady jsou levnější. Částky ani úspora tu
 * nejsou napsané — čtou se z `src/_data/ceny.js`, kde se úspora **počítá**.
 * Napsaná úspora je věta, která přestane platit v den, kdy se zdraží jedna
 * část, a nikdo si toho nevšimne.
 */
.tarify {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 34px;
}
@media (min-width: 860px) { .tarify { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tarif {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-frame);
  background: var(--bg-alt);
  padding: 26px 26px 28px;
  min-width: 0;
}
.tarif__jm {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.tarif__c {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.tarif__za {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 8px 0 20px;
}
.tarif__co { list-style: none; margin: 0; padding: 0; }
.tarif__co li {
  display: flex;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  padding: 6px 0;
}
.tarif__co li::before { content: "·"; color: var(--accent); flex: 0 0 auto; }

/* Tlačítko v kartě tarifu.
 *
 * `margin-top: auto` je to podstatné: karty jsou různě vysoké, protože
 * odrážky mají různou délku, a bez toho by tlačítka sedla každé jinde a
 * spodní hrana tří karet vedle sebe by přestala být linka. Karta je
 * `flex-direction: column`, takže automatický horní okraj sebere všechno
 * volné místo a tlačítko spadne na dno.
 *
 * Cíl je 44 px vysoký, protože se na to na telefonu opravdu klikne —
 * `.btn` je jinde v této stránce menší a tady by to byl cíl pod hranicí,
 * kterou si projekt drží. */
.tarif__cta { margin: auto 0 0; padding-top: 22px; }
.tarif__cta .btn {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: center;
}

/* Balík. Akcentní rámeček, protože je to doporučená volba — a je to jediné
   místo na stránce, kde stojí úspora. */
.balik {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  border: 1px solid var(--line-accent);
  background: var(--bg-alt);
  padding: 30px 28px;
  margin-top: 20px;
}
@media (min-width: 860px) { .balik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; } }
.balik__znacka {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line-accent);
  border-radius: 3px;
  padding: 5px 10px;
  margin: 0 0 18px;
}
.balik__jm {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 14px;
}
.balik__c { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--ink); margin: 0; }
.balik__za {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 8px 0 0;
}
.balik__uspora {
  font-size: 15px;
  line-height: 1.6;
  color: var(--accent);
  margin: 16px 0 0;
}
.balik__uspora s { color: var(--muted); text-decoration-thickness: 1px; }
.balik__cta { margin: 24px 0 0; }


/* --- Pokladna ------------------------------------------------------------ */

/* Dva sloupce: vlevo co se kupuje, vpravo platba. Poměr je 1 : 1,15 ve
   prospěch formuláře — ten má pevnou minimální šířku od Stripu a je to místo,
   kde se něco dělá, kdežto levý sloupec se čte jednou. */
.pokl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: 30px;
  align-items: start;
}
/* **Platba je v DOMu první, na monitoru vpravo.** Na telefonu jsou sloupce
   pod sebou a formulář zavřený pod dvěma tisíci pixely argumentace znamená,
   že kdo přišel zaplatit, se k tomu musí prorolovat. Obrátit to `order`em by
   rozešlo pořadí čtení s pořadím fokusu — klávesnice by skákala jinam, než
   kam se člověk dívá — takže je obrácený rovnou DOM a na monitoru se sloupce
   posadí `grid-column`, což pořadí čtení nemění. */
@media (min-width: 900px) {
  .pokl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; }
  .pokl__co { grid-column: 1; grid-row: 1; }
  .pokl__platba { grid-column: 2; grid-row: 1; }
}

/* --- Světlá půlka pokladny ----------------------------------------------- */

/* **Formulář Stripu se roztáhnout nedá, tak se mu postaví plocha, kam patří.**
   Je to bílá karta a Stripe si její šířku ořezává sám — změřeno 3. 9. 2026:
   při kontejneru 738 px zůstal formulář na 420 a zbytek byla tma, při 460 px
   vyplnil kontejner do posledního pixelu. Dát sloupci víc místa tedy přidá
   jen prázdno okolo. Co pomůže, je světlé pole pod ním: bílá karta pak neplave
   na černé jako cizí těleso, ale leží na ploše, která k ní patří.

   Vpravo pole doběhne k okraji okna, vlevo se rozplyne gradientem do tmy.
   Rozplynutí není ozdoba: ostrá svislá hrana uprostřed stránky by musela
   sedět přesně na hraně sloupce, a ta se s poměrem 1 : 1,15 mění s šířkou
   okna. Fade tuhle třídu chyb ruší — na pár procent vlevo nebo vpravo
   nezáleží.

   Pole visí na obalu, ne na `.pokl__platba`: ta je `sticky` a světlá plocha
   by se posouvala spolu s ní. */
/* **Bílá, ne krémová — a musí se shodovat s pozadím pokladny ve Stripu.**
   Stripe si vybarvuje svůj rámec sám (dashboard → Branding → Checkout →
   Background) a je to plná barva přes celou šířku sloupce. Jakýkoli rozdíl
   proti téhle hodnotě se ukáže jako obdélník uprostřed panelu — ne jako
   odstín, ale jako hrana. Když se tahle barva mění, mění se obě. */
:root { --pokl-panel: #FFFFFF; }

@media (min-width: 900px) {
  /* Hlavička patří do levého sloupce, aby formulář mohl začít nahoře vedle ní
     a ne až pod ní — vedle nadpisu byla do teď půlka obrazovky prázdná.
     V DOMu hlavička zůstává tam, kde byla, protože na telefonu se čte první;
     přesouvá ji jen mřížka. Proto `display: contents` na `.pokl` a ne přesun
     v šabloně: `order` by rozešlo pořadí čtení s pořadím fokusu. */
  .pokl-wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 56px;
    align-items: start;
  }
  /* **Řádky se přidělují výslovně, ne automatickým umístěním.** Blok výš
     přišpendlí `.pokl__co` na řádek 1 a to pravidlo platí dál; hlavička by
     se pak umístila až za něj a spadla by pod levý sloupec — což se taky
     stalo. Čtyři řádky, čtyři jména, žádné dohadování. */
  .pokl-wrap > .eyebrow { grid-column: 1; grid-row: 1; }
  .pokl-wrap > .h1 { grid-column: 1; grid-row: 2; }
  .pokl-wrap > .pokl__radek { grid-column: 1; grid-row: 3; }
  .pokl { display: contents; }
  .pokl__co { grid-column: 1; grid-row: 4; }
  .pokl__platba { grid-column: 2; grid-row: 1 / span 4; }

  .pokl-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* **Ostrá hrana, ne přechod.** Rozplynutí se zkoušelo a vypadalo špatně:
       světlá barva ředěná přes tmavou dá široký šedý pruh, protože oko čte
       střed rampy jako plochu, ne jako přechod. Odstupňované stopy to
       zmírnily, ale ne odstranily. Dvě plochy vedle sebe s čistým švem jsou
       čitelnější než cokoli mezi tím — a je to tvar, který má i hostovaná
       pokladna Stripu.

       Šev vede středem mezery mezi sloupci, ne po hraně formuláře: hrana
       formuláře je hrana cizího prvku a šev na ní vypadá jako lem, kdežto
       uprostřed mezery vypadá jako rozdělení stránky. Počítá se ze stejných
       čísel, ze kterých mřížku staví prohlížeč — odsazení obalu, poměr
       sloupců 1 : 1,15, mezera 56 px — ne od oka. Změřeno po nasazení:
       hrana sloupce 760 px od okraje obalu. */
    left: calc(var(--pad-x) + (100% - var(--pad-x) * 2 - 56px) / 2.15 + 28px);
    /* Doběh k okraji okna. Obal je vycentrovaný, takže je to polovina
       rozdílu mezi ním a oknem — a `50%` se počítá z obalu, `50vw` z okna. */
    right: calc(50% - 50vw);
    background: var(--pokl-panel);
    z-index: 0;
  }
  /* Obsah nad pole. `.pokl__platba` má `position: sticky`, takže se jí
     pozice nepřepisuje — stačí jí zvednout vrstvu. */
  .pokl-wrap > .eyebrow,
  .pokl-wrap > .h1,
  .pokl-wrap > .pokl__radek,
  .pokl__co { position: relative; z-index: 1; }
  .pokl__platba { z-index: 1; }

  /* Na světlém poli se tmavé rámečky nedají použít — text by na nich zmizel.
     Barvy jsou zapsané natvrdo, ne přes tokeny: tokeny nesou tmavé téma webu
     a tohle je jediné světlé místo, takže by se z nich musela udělat druhá
     sada jen kvůli jednomu panelu. */
  /* Rámečky jsou na bílém poli bílé, takže je drží jen linka — a ta musí být
     tmavší, než byla na krémové. Na 10 % zmizely úplně. */
  .pokl__platba .pokl__zaruka,
  .pokl__platba .pokl__hotovo,
  .pokl__platba .pokl__stav {
    background: #FFFFFF;
    border-color: rgba(18, 21, 26, 0.16);
  }
  .pokl__platba .pokl__zaruka { border-top-color: var(--accent); }
  .pokl__platba .pokl__stav { border-left-color: var(--accent); }
  .pokl__platba .pokl__zaruka p,
  .pokl__platba .pokl__hotovo p,
  .pokl__platba .pokl__stav { color: #4A4E55; }
  .pokl__platba .pokl__zaruka-n { color: #12151A !important; }
  .pokl__platba .pokl__zaruka-p { color: #767A82 !important; }
}

/* Řádek s cenou pod nadpisem. Nadpis je slib, tohle je cena za něj —
   a proto stojí nad rozdělením do sloupců, ne v jednom z nich. */
.pokl__radek { margin: 18px 0 0; font-size: 16px; color: var(--muted); }
.pokl__radek b {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin-right: 8px;
}

.pokl__nadpis {
  margin: 34px 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pokl__co > .pokl__nadpis:first-child { margin-top: 0; }

/* Tři kroky po zaplacení. Číslo nese `::before`, ne značka seznamu: značku
   nejde obarvit ani posadit na účaří textu a při dvouřádkové položce se
   rozejde s prvním řádkem. */
.pokl__kroky { list-style: none; margin: 0; padding: 0; counter-reset: krok; }
.pokl__kroky li {
  counter-increment: krok;
  position: relative;
  padding-left: 34px;
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 56ch;
}
.pokl__kroky li::before {
  content: counter(krok);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-frame);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 21px;
  text-align: center;
  color: var(--accent);
}
.pokl__kroky b { color: var(--ink); }
.pokl__host { font-family: var(--mono); font-size: 14px; color: var(--accent); }

/* Co je uvnitř dnes. Odrážka je pomlčka v barvě linky, ne puntík — puntík
   v této sazbě nikde jinde není. */
.pokl__dnes { list-style: none; margin: 4px 0 0; padding: 0; }
.pokl__dnes li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 58ch;
}
.pokl__dnes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 9px;
  height: 1px;
  background: var(--line-accent);
}
.pokl__dnes b { color: var(--ink); }

.pokl__nedopocita {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
}

/* Nabídka balíku. Rámeček zleva, ne celý box: je to odbočka z hlavní cesty,
   ne druhá nabídka vedle ní. Na stránce balíku se tenhle blok nevykreslí. */
.pokl__balik {
  margin: 30px 0 0;
  padding: 18px 0 18px 16px;
  border-left: 2px solid var(--line-accent);
}
.pokl__balik p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 54ch; }
.pokl__balik b { color: var(--ink); }
.pokl__balik-cta { margin-top: 10px !important; }
.pokl__balik-cta a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* Námitky. `dt` a `dd` v mřížce po dvou sloupcích by se na telefonu zlomily
   na nečitelnou šířku, takže je to prostě střídání dvou odstavců. */
.pokl__namitky { margin: 0; }
.pokl__namitky dt {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.pokl__namitky dd {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 56ch;
}
.pokl__namitky dd:last-child { margin-bottom: 0; }

.pokl__podpis {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 58ch;
}
.pokl__pozn {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}
.pokl__zpet { margin: 26px 0 0; font-size: 14.5px; }

/* Formulář od Stripu si nese vlastní bílé pozadí a zaoblení. Rámeček kolem
   něj by proto byl druhá hrana kolem téhož obdélníku — je tu jen odsazení
   a minimální výška, aby stránka při načítání neposkočila.

   **Přilepený sloupec, ale až na monitoru.** Vlevo běží argument a formulář
   má zůstat vedle něj; na telefonu jsou sloupce pod sebou, takže by `sticky`
   znamenalo formulář přilepený přes text. Odsazení shora je výška lišty
   (`.nav` je `sticky; top: 0`, min-height 76) a osm pixelů vzduchu — kdyby
   bylo menší, formulář by se pod lištu zasunul. */
.pokl__platba { min-height: 420px; }
#pokladna-formular:empty { min-height: 320px; }
@media (min-width: 900px) {
  .pokl__platba { position: sticky; top: 84px; }
}

.pokl__stav {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line-frame);
  border-left: 2px solid var(--accent);
  background: var(--bg-alt);
  font-size: 14.5px;
  color: var(--ink-2);
}
.pokl__hotovo {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--line-frame);
  background: var(--bg-alt);
}
.pokl__hotovo p { margin: 0 0 8px; font-size: 15px; }
.pokl__hotovo p:last-child { margin-bottom: 0; }
.pokl__hotovo b { font-family: var(--mono); font-size: 14px; color: var(--accent); }

/* Záruka pod formulářem, ne v odrážkách u tarifu. Je to jediná věta, která
   snižuje riziko nákupu, takže patří na dosah tlačítka — a na každý tarif,
   ne jen na balík. */
.pokl__zaruka {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--line-frame);
  border-top: 2px solid var(--accent);
  background: var(--bg-alt);
}
.pokl__zaruka p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.pokl__zaruka p:last-child { margin-bottom: 0; }
.pokl__zaruka-n {
  font-family: var(--serif) !important;
  font-size: 19px !important;
  font-weight: 600;
  color: var(--ink) !important;
}
.pokl__zaruka-p { font-size: 13px !important; color: var(--muted) !important; }


/* --- Patička ve sloupcích ------------------------------------------------ */

/* Čtyři sloupce na monitoru, dva na tabletu, jeden na telefonu. Nadpis
   sloupce zůstává i v jednom sloupci — je to oddělovač, ne ozdoba: bez něj
   by z toho byl zase jeden dlouhý seznam, kterému se tahle změna vyhýbá. */
.footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px 32px;
}
@media (min-width: 520px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 40px; } }

.footer__col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.footer__col-nadpis {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-3);
}
/* Cíl 44 px si patička drží stejně jako zbytek — odkazy jsou tu blízko sebe
   a na telefonu se do nich trefuje palcem. */
.footer__cols .footer__link {
  display: inline-block;
  padding: 6px 0;
  min-height: 32px;
}


/* --- Kovy hodností na prodejní stránce ----------------------------------- */

/* Žebříček se kreslí na dvou místech a pravidla v `clients.css` jsou uvnitř
   `.ca`, takže se veřejné stránky netýkají. Znaky se sem propsaly (jsou
   z `hodnosti.json`), kovy ne — a ploché znaky vypadají jako záměr, takže si
   toho nikdo nemusel všimnout. Definice přechodů jsou ve sdíleném
   `_includes/kovy.njk`; dvě kopie by znamenaly, že se jedna paleta opraví
   a druhá zůstane. */
/* Rámeček kolem znaku. Nese ho **každá** dlaždice, ne jen ta s kovem:
   kdyby se objevil až u sedmé, vypadalo by to, že se něco rozbilo v půlce
   řady. U šesti nižších je proto v barvě linky a teprve od Prima Pila
   začíná mluvit kovem. */
.zebricek__znak {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-frame);
}
.zebricek__znak svg { width: 30px; height: 30px; }


/* Kovová linka nad dlaždicí.
 *
 * Kov dosud mluvil jen rámečkem znaku a výplní kresby — tedy na ploše
 * o třiceti pixelech. V řadě jedenácti dlaždic se z toho nedá vyčíst, kde
 * hodnosti přestávají být obyčejné a začínají být kovové; linka nad dlaždicí
 * to řekne přes celou její šířku.
 *
 * **Tím se ale sráží s „tady jste“, které ten pruh dosud mělo pro sebe.**
 * U Konzula by zlatá linka a oranžový pruh na témž místě byly k nerozeznání.
 * Signál polohy se proto stěhuje na **levou** hranu a obojí se skládá do
 * jednoho `box-shadow` — dva stíny, dvě různé věci, žádná z nich nepřebíjí
 * druhou. Je to potřetí, co se „tady jste“ stěhuje, a pokaždé ze stejného
 * důvodu: nese-li barvu i sama hodnost, nemůže barva říkat ještě polohu.
 *
 * Sytost je vyšší než u rámečku znaku: 1px rámeček snese 0,6, dvoupixelová
 * linka přes celou šířku by při téže hodnotě vypadala jako nedotažená. */
.zebricek__stupen[data-ca-kov="bronz"] { box-shadow: inset 0 2px 0 rgba(172, 95, 39, 0.85); }
.zebricek__stupen[data-ca-kov="stribro"] { box-shadow: inset 0 2px 0 rgba(174, 189, 204, 0.8); }
.zebricek__stupen[data-ca-kov="stribro-zlato"] { box-shadow: inset 0 2px 0 rgba(201, 174, 124, 0.9); }
.zebricek__stupen[data-ca-kov="zlato"] { box-shadow: inset 0 2px 0 rgba(232, 163, 61, 0.85); }
/* Augustus nedostane plochou linku, ale přechod přes celou šířku — týž kov
   jako na znaku a na rámečku, aby dlaždice mluvila jedním hlasem. Kreslí se
   `::before`, protože `box-shadow` přechod neumí. */
.zebricek__stupen[data-ca-kov="augustus"] { position: relative; }
.zebricek__stupen[data-ca-kov="augustus"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8a5a1c, #f0c268 42%, #fff0c9 55%, #e8a33d 70%, #8a5a1c);
  pointer-events: none;
}

.zebricek__stupen[data-ca-kov="bronz"] .zebricek__znak { border-color: rgba(172, 95, 39, 0.65); }
.zebricek__stupen[data-ca-kov="stribro"] .zebricek__znak { border-color: rgba(174, 189, 204, 0.6); }
.zebricek__stupen[data-ca-kov="stribro-zlato"] .zebricek__znak { border-color: rgba(201, 174, 124, 0.7); }
.zebricek__stupen[data-ca-kov="zlato"] .zebricek__znak { border-color: rgba(232, 163, 61, 0.65); }

/* Augustus má rámeček s **přechodem**, ne plnou barvou — `border-image`
   s řezem 1 obarví rám celý, takže zlato po něm přejde stejně jako po znaku
   uvnitř. Rádius by se s `border-image` zahodil, což tady nevadí: dlaždice
   je hranatá. Barva navíc zůstává i v `border-color` pod tím, aby prohlížeč
   bez `border-image` neukázal rám žádný. */
.zebricek__stupen[data-ca-kov="augustus"] .zebricek__znak {
  border-color: var(--accent);
  border-image: linear-gradient(135deg, #5A3208 0%, #E8A33D 38%, #FFF3D0 62%, #E8A33D 82%, #FFFDF6 100%) 1;
  box-shadow: 0 0 0 1px rgba(232, 163, 61, 0.28), 0 0 18px -6px rgba(232, 163, 61, 0.6);
  background: radial-gradient(circle at 50% 45%, rgba(232, 163, 61, 0.13), transparent 72%);
}

.zebricek__stupen[data-ca-kov="bronz"] svg { fill: url(#znak-bronz); stroke: url(#znak-bronz); }
.zebricek__stupen[data-ca-kov="stribro"] svg { fill: url(#znak-stribro); stroke: url(#znak-stribro); }
.zebricek__stupen[data-ca-kov="stribro-zlato"] svg { fill: url(#znak-stribro-zlato); stroke: url(#znak-stribro-zlato); }
.zebricek__stupen[data-ca-kov="zlato"] svg { fill: url(#znak-zlato); stroke: url(#znak-zlato); }
.zebricek__stupen[data-ca-kov="augustus"] svg { fill: url(#znak-augustus); stroke: url(#znak-augustus); }

/* Augustus mihotá i tady. Jas, ne pohyb — posun by na třiceti pixelech byl
   třetina pixelu, tedy rozmazání. */
@keyframes zebricek-mihotani {
  0%, 100% { filter: brightness(1); }
  38% { filter: brightness(1.16); }
  71% { filter: brightness(0.94); }
}
.zebricek__stupen[data-ca-kov="augustus"] svg {
  animation: zebricek-mihotani 4.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .zebricek__stupen[data-ca-kov="augustus"] svg { animation: none; }
}

/* --- Mapa toho, co pokrýváme ---------------------------------------------
   Šest sloupců zleva doprava, v každém čtyři služby jako přepínače, mezi
   sloupci spoje kreslené skriptem z naměřených poloh (jedna jednotka = jeden
   pixel, viz sankey.js). Pod mapou plán poskládaný z výběru.

   Uzel je `<a>` s `role="button"`: bez skriptu odkaz na stránku linie, se
   skriptem přepínač. Má vlastní box a bere fokus — žádné `display: contents`
   (viz past v CLAUDE.md). Vybraný stav nese `aria-pressed`, ne třída, aby
   ho četl i čtečka. */
.mapa-sekce .mapa__hlava {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px 48px; flex-wrap: wrap; margin-bottom: 40px;
}
.mapa-sekce .mapa__eyebrow { margin-bottom: 22px; }
.mapa-sekce .mapa__legenda {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted);
}
.mapa-sekce .mapa__legenda-tecka {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dim); display: inline-block;
}
.mapa-sekce .mapa__legenda-tecka + .mapa__legenda-tecka,
.mapa-sekce .mapa__legenda-tecka:not(:first-child) { margin-left: 14px; }
.mapa-sekce .mapa__legenda-tecka--on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.mapa {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  --mapa-uzka: 0;
}
.mapa__hrany {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
}
.mapa__hrana { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.mapa__hrana--on { stroke: var(--accent); stroke-width: 1.5; opacity: 0.9; }

.mapa__sloupce { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; z-index: 1; }
.mapa__sloupec {
  display: flex; flex-direction: column; min-width: 0;
  padding: 28px 20px 24px; border-left: 1px solid var(--line);
}
.mapa__sloupec:first-child { border-left: 0; }
.mapa__etapa {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  color: var(--ink-2); margin: 0 0 6px; white-space: nowrap;
}
.mapa__pod { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 30px; }
.mapa__uzly { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 34px; }
.mapa__uzel {
  display: block; position: relative; z-index: 1;
  padding: 8px 12px 9px; border: 1px solid var(--line-strong); background: var(--bg);
  text-decoration: none; cursor: pointer; color: var(--ink-2);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.mapa__uzel:hover, .mapa__uzel:focus-visible { border-color: var(--line-accent); background: var(--bg-card-hover); }
.mapa__uzel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mapa__tecka {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dim); margin-right: 8px; vertical-align: 1px;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.mapa__kod { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--ink); }
.mapa__nazev { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.mapa__uzel[aria-pressed="true"] { border-color: var(--accent); }
.mapa__uzel[aria-pressed="true"] .mapa__tecka { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.mapa__uzel[aria-pressed="true"] .mapa__nazev { color: var(--ink-2); }
/* Poznámka sedí na dně sloupce (`margin-top: auto`), mezera nad ní je
   spodní okraj seznamu — jinak by se v nejvyšším sloupci přilepila k uzlům. */
.mapa__pozn {
  margin: auto 0 0; padding: 14px; border: 1px dashed var(--line-strong);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.65;
  text-transform: uppercase; color: var(--muted);
}

/* Plán. Karta pod mapou; položky v mřížce, která se skládá sama a nikdy
   nenechá osiřelý řádek s jednou (auto-fill, ne pevný počet). */
.mapa__plan { margin-top: 24px; border: 1px solid var(--line); background: var(--bg); padding: 30px 32px 34px; }
.mapa__plan-hlava { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.mapa__plan-smazat {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.mapa__plan-smazat:hover { color: var(--ink); }
.mapa__plan-prazdny { margin: 0; }
.mapa__plan-seznam {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px 36px;
}
.mapa__plan-polozka { border-top: 1px solid var(--line); padding-top: 16px; }
.mapa__plan-etapa { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--accent); margin: 0 0 8px; }
.mapa__plan-nazev { font-size: 17px; font-weight: 500; color: var(--ink); margin: 0 0 8px; }
.mapa__plan-nazev .mapa__kod { font-size: 12px; color: var(--muted); margin-right: 6px; }
.mapa__plan-blok { font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--ink-3); margin: 0; }
.mapa__plan-akce { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 28px; }
.mapa__plan-akce .btn { margin: 0; }
.mapa__plan-akce button:disabled { opacity: 0.45; cursor: default; }

/* Pod pět sloupců se mapa skládá a spoje se nekreslí: skript čte
   `--mapa-uzka`, ne šířku okna, takže rozhoduje totéž pravidlo jako tady. */
@media (max-width: 1100px) {
  .mapa { --mapa-uzka: 1; }
  .mapa__sloupce { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mapa__sloupec { border-top: 1px solid var(--line); }
  .mapa__sloupec:nth-child(-n+3) { border-top: 0; }
  .mapa__sloupec:nth-child(3n+1) { border-left: 0; }
  .mapa__uzly { gap: 18px; margin-bottom: 28px; }
}
@media (max-width: 640px) {
  .mapa__sloupce { grid-template-columns: 1fr; }
  .mapa__sloupec { border-left: 0; border-top: 1px solid var(--line); padding: 22px 18px; }
  .mapa__sloupec:first-child { border-top: 0; }
  .mapa__uzly { gap: 12px; }
  .mapa__plan { padding: 24px 18px 26px; }
}

/* Kontakt: výběr z mapy a dvě povinná pole. Select dědí podtržený styl
   vstupu; šipku kreslí prohlížeč, protože vlastní by v každém z nich seděla
   jinak. */
.form select.field__input { padding-right: 8px; cursor: pointer; }
.form select.field__input option { color: #111; background: #fff; }
.form select.field__input:invalid, .form select.field__input[data-prazdny="1"] { color: var(--muted); }
.form__vyber {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent);
  margin: 0 0 20px; line-height: 1.8;
}
.form__vyber[hidden] { display: none; }

/* Hlavní zaměření: tři sloupce mapy (základ, marketing, automatizace) nesou
   štítek a jemný nádech akcentu v pozadí. Barva hlavičky se nemění — sloupec
   má být vidět jako zvýrazněný, ne jako vybraný. */
.mapa__sloupec--fokus { background: rgba(232, 163, 61, 0.035); }
.mapa__uzel-logo { display: block; margin: 2px 0 10px; line-height: 0; }
.mapa__uzel-logo img { display: block; height: 30px; width: auto; }
/* Jediný snímek vedle textu produktu (Universe, Claude Notch) — pravý
   sloupec `.split`, stejně jako rámeček ZEUSu. Rámeček drží poměr snímku,
   ne 4:3 z `.frame`: s pevným poměrem a absolutně umístěným obrázkem zůstal
   pod snímkem 16:10 tmavý pruh (Filip: „to vůbec nevypadá dobře"). Obrázek
   je proto v toku a rámeček bere výšku od něj. `<figure>` má od prohlížeče
   `margin: 1em 40px`, proto se nuluje. */
.snimek-vedle { margin: 0; min-width: 0; }
.snimek-vedle .frame { aspect-ratio: auto; }
.snimek-vedle .frame img { position: static; display: block; width: 100%; height: auto; }
.snimek-vedle .gal__popis { margin: 12px 0 0; min-height: 0; }
/* Karta partnera: řádek s logem o pevné výšce a pod ním popisek. Loga jsou
   bílá na tmavém pozadí bez podložek; výšku drží řádek, ne obrázek, takže
   lockup Shopify (26 px) a odznak Cisca (44 px) sedí na jedné ose. */
.partner__logorow { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 14px; }
.partner__logorow .partner__odkaz { display: inline-flex; align-items: center; gap: 12px; line-height: normal; text-decoration: none; }
/* Rozměry drží atributy `width`/`height` obrázku; `width: auto` v CSS by
   je přebilo a nenačtené lazy logo by mělo nula pixelů (změřeno 10. 9.). */
.partner__logorow .partner__logo { display: block; margin: 0; }
.partner__logorow .partner__name { display: inline; font-size: 18px; }
.blok--audit { border-color: var(--line-accent); background: rgba(232, 163, 61, 0.035); }
.blok--audit .btn { margin: 0; }
.blok__pata-akce { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.blok__ven {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted);
  text-decoration: none;
}
.blok__ven:hover { color: var(--ink); }
.partner__text { display: flex; flex-direction: column; min-width: 0; }
.partner__odkaz { display: inline-block; line-height: 0; }
/* Logo kreslené pro světlé pozadí dostane bílou podložku. Značka zůstává
   nedotčená — mění se jen to, na čem leží. `box-sizing: content-box`,
   aby rozměry z atributů platily pro obrázek, ne pro obrázek i podložku. */
.partner__logo--plate {
  background: #fff; padding: 6px 10px; border-radius: 3px; box-sizing: content-box;
}
.partner__logo--znak { width: 44px; height: 44px; flex: 0 0 auto; }
.partner--vedle .partner__text .partner__note { margin-top: 6px; }

/* Celé bloky pod mapou. Skript ukáže jen ty etapy, ze kterých je něco
   vybrané; bez skriptu jsou vidět všechny. Vybraná služba uvnitř bloku
   dostane akcentní levou hranu a štítek „vybrali jste". */
.bloky { margin-top: 24px; display: flex; flex-direction: column; gap: 24px; }
.bloky:empty { display: none; }
.blok { border: 1px solid var(--line); background: var(--bg); padding: 40px 32px 32px; }
.blok--fokus { border-color: var(--line-accent); }
.blok[hidden] { display: none; }
.blok__hlava { margin-bottom: 32px; }
/* Blok s fotkou: text vlevo, portrét vpravo v pevné šířce, aby výška
   hlavičky nezávisela na délce odstavce. `<figure>` má od prohlížeče
   `margin: 1em 40px` — nuluje se, jinak sedí o čtyřicet pixelů vedle. */
.blok__hlava--foto { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px 48px; align-items: start; }
.blok__foto { margin: 0; }
.blok__foto a { display: block; line-height: 0; }
.blok__foto img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.blok__foto figcaption { margin-top: 10px; line-height: 1.5; }
.blok__foto-jmeno { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.blok__foto-role { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
@media (max-width: 640px) {
  .blok__hlava--foto { grid-template-columns: 1fr; }
  .blok__foto { max-width: 220px; }
}
.blok__telo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px 48px;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.blok__body { list-style: none; margin: 0; padding: 0; }
.blok__body li {
  position: relative; padding: 0 0 12px 18px; font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.blok__body li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
}
.blok__sluzby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.blok__sluzba { padding: 12px 0 0 14px; border-left: 2px solid var(--line); }
.blok__sluzba.is-on { border-left-color: var(--accent); }
.blok__vybrano { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--accent); margin: 0 0 6px; }
.blok__sluzba-nazev { font-size: 16px; font-weight: 500; color: var(--ink); margin: 0 0 6px; }
.blok__sluzba-nazev .mapa__kod { font-size: 11.5px; color: var(--muted); margin-right: 6px; }
.blok__sluzba-text { font-size: 14.5px; line-height: 1.65; color: var(--ink-3); font-weight: 300; margin: 0; }
.blok__pata {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
}
.blok__pata .btn { margin: 0; }
.mapa__pozn--blok { margin: 0; max-width: 52ch; }
.mapa__plan-seznam { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; line-height: 1.9; color: var(--ink-2); margin: 0; }
@media (max-width: 900px) {
  .blok__telo { grid-template-columns: 1fr; }
  .blok__sluzby { grid-template-columns: 1fr; }
  .blok { padding: 28px 18px 24px; }
}

/* ---- ceník od 17. 9. 2026: Qvestor první, Analýzy příplatek, Kurz jednou --
   Hlavní karta má rámeček akcentu; pod přepínačem období v pokladně jsou
   dva přepínače, každý s cílem 44 px. */
.tarif--hlavni { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(232, 163, 61, 0.25) inset; }
.tarif__za { line-height: 1.6; }
.pokl__obdobi { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pokl__volba { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-frame); border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.pokl__volba:has(input:checked) { border-color: var(--accent); color: var(--ink); }
.pokl__volba input { accent-color: var(--accent); margin: 0; }
.pokl__volba b { color: var(--ink); }
.pokl__platba .pokl__volba span { color: var(--ink-2); }
.pokl__platba .pokl__volba b { color: var(--ink); }

/* ---- qvestor.cz: nakódovaná ukázka (Filip, 17. 9. 2026) -------------------
   Pole jako v Qvestoru (rsh__pole z clients.css, tady na veřejném hostu),
   napovídání pod ním, jeviště se třemi náhledy nad sebou v jedné buňce
   mřížky (neaktivní průhledné, výška je ta nejvyšší) a na monitoru
   scrollytelling: jeviště je přilepené, pod ním tři kroky po 80 vh. Bez
   skriptu (`:not(.is-js)`) stojí náhledy pod sebou a pole nese SNDK. */
.qv-demo { position: relative; }
.qv-demo__sticky { position: relative; }
.qv-demo.is-scroll .qv-demo__sticky { position: sticky; top: 84px; z-index: 2; }
.qv-demo__kroky { display: none; }
.qv-demo.is-scroll .qv-demo__kroky { display: block; }
.qv-demo.is-scroll .qv-krok { height: 80vh; }
.qv-demo.is-scroll .qv-krok:last-child { height: 90vh; }

.qv-hledani { max-width: 560px; margin: 0 auto 22px; position: relative; }
.qv-pole { position: relative; }
.qv-vstup { width: 100%; min-height: 56px; background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 64px 0 18px;
  color: var(--ink); font-family: var(--mono); font-size: 16px; letter-spacing: 0.04em; outline: none; }
.qv-vstup::placeholder { color: var(--muted-3); letter-spacing: 0; }
.qv-demo.is-pise .qv-vstup { border-color: var(--accent); }
.qv-demo.is-pise .qv-vstup::after { content: ""; }
.qv-tlacitko { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 54px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-btn); color: var(--bg); border: 0; border-radius: 0 7px 7px 0; pointer-events: none; }
.qv-tlacitko svg { width: 20px; height: 20px; display: block; }
.qv-nasept { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none;
  background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); text-align: left; }
.qv-nasept[hidden] { display: none; }
.qv-nasept__radek { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 5px; margin: 0; }
.qv-nasept__radek[aria-selected="true"] { background: rgba(255, 255, 255, 0.07); }
.qv-nasept__zkratka { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--accent); font-weight: 500; }
.qv-nasept__jmeno { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qv-nasept__radek[aria-selected="true"] .qv-nasept__jmeno { color: var(--ink); }

.qv-taby { display: flex; gap: 6px; justify-content: center; margin: 0 0 14px; padding: 0; list-style: none; flex-wrap: wrap; }
.qv-tab { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted-2); border-radius: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.qv-tab[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
.qv-demo:not(.is-js) .qv-taby { display: none; }

.qv-stage { display: grid; }
.qv-stage[hidden] { display: none; }
.qv-panel { grid-area: 1 / 1; border: 1px solid var(--line-frame); background: var(--bg-alt); padding: 22px 24px 20px; min-width: 0;
  opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.qv-panel.is-active { opacity: 1; pointer-events: auto; }
.qv-demo:not(.is-js) .qv-panel { grid-area: auto; opacity: 1; pointer-events: auto; margin-bottom: 18px; }
.qv-panel__hd { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.qv-panel__t { font-family: var(--serif); font-size: 20px; margin: 0; color: var(--ink); }
.qv-panel__s { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted-2); margin: 4px 0 0; }
.qv-panel__cip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.qv-tok-obal { overflow-x: auto; }
.qv-tok { display: block; width: 100%; min-width: 820px; height: auto; }
.qv-jak { font-size: 13px; line-height: 1.6; color: var(--muted-2); margin: 14px 0 0; }
.qv-jak b { color: var(--ink); font-weight: 500; }

.qv-sito { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: start; }
.qv-sito > * { min-width: 0; }
.qv-sito__souhrn { display: grid; justify-items: center; text-align: center; }
.qv-prstenec { grid-area: 1 / 1; width: 152px; height: 152px; transform: rotate(-90deg); }
.qv-prstenec__drah { fill: none; stroke: var(--line-strong); stroke-width: 7; }
.qv-prstenec__tah { fill: none; stroke: url(#qv-zlato); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16;
  transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.qv-demo:not(.is-js) .qv-prstenec__tah { stroke-dashoffset: var(--qv-offset, 314.16); }
.qv-sito__cislo { grid-area: 1 / 1; align-self: center; margin: 0; font-family: var(--mono); font-size: 27px; font-weight: 500; color: var(--ink); }
.qv-sito__pozn { font-size: 12.5px; color: var(--muted-3); line-height: 1.6; margin: 12px 0 0; max-width: 28ch; }
.qv-pravidla { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.qv-pravidlo { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.qv-pravidlo__n { font-size: 14px; color: var(--ink-2); font-weight: 300; }
.qv-pravidlo__p { font-family: var(--mono); font-size: 11px; color: var(--muted-3); display: block; margin-top: 3px; }
.qv-pravidlo__v { font-family: var(--mono); font-size: 14px; color: var(--ink); text-align: right; white-space: nowrap; }
.qv-pravidlo__pozn { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; color: var(--muted-2); }
.qv-znamka { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  color: var(--muted-3); background: rgba(122, 129, 140, 0.12); }
.qv-znamka[data-s="ano"] { color: #6FBF8B; background: rgba(111, 191, 139, 0.15); }
.qv-znamka[data-s="ne"] { color: #D2706A; background: rgba(210, 112, 106, 0.15); }
.qv-znamka[data-s="tesne"] { color: var(--accent); background: rgba(232, 163, 61, 0.15); }

.qv-dlazdice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 18px; }
.qv-dlazdice__b { background: var(--bg-alt); padding: 14px 16px; min-width: 0; }
.qv-dlazdice__l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-3); margin: 0 0 8px; }
.qv-dlazdice__v { font-family: var(--mono); font-size: 20px; color: var(--ink); margin: 0; }
.qv-dlazdice__v[data-smer="down"] { color: #D2706A; }
.qv-tab-obal { overflow-x: auto; }
.qv-tab-ins { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.qv-tab-ins th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3); font-weight: 500; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); }
.qv-tab-ins td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.qv-tab-ins .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.qv-tab-ins .qv-role { display: block; font-size: 11.5px; color: var(--muted-3); }
.qv-typ { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 3px 7px; border-radius: 4px; background: rgba(210, 112, 106, 0.12); color: #D2706A; white-space: nowrap; }

.qv-funkce { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.qv-funkce__b { background: var(--bg); padding: 22px 22px 24px; }
.qv-funkce__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.qv-funkce__t { font-family: var(--serif); font-size: 19px; margin: 0 0 8px; color: var(--ink); }
.qv-funkce__p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; }

@media (max-width: 900px) { .qv-sito { grid-template-columns: 1fr; gap: 22px; } .qv-pravidlo { grid-template-columns: 1fr auto; } .qv-pravidlo .qv-znamka { grid-column: 2; } .qv-dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .qv-panel { padding: 16px 14px; } .qv-demo.is-scroll .qv-demo__sticky { position: relative; top: auto; } }
/* Hodnota zásady na úzké obrazovce: „ze ztráty −11,32 $ do zisku 73,76 $“
   se s `nowrap` nevejde a neaktivní náhled, byť průhledný, je v rozvržení —
   stránka se pak kýve do strany o sto pixelů, které nejsou vidět. */
@media (max-width: 900px) { .qv-pravidlo__v { grid-column: 1 / -1; grid-row: 2; text-align: left; white-space: normal; } .qv-pravidlo .qv-znamka { grid-row: 1; } .qv-pravidlo__pozn { grid-row: 3; } }