/* ============================================================
   /cenik — the price list drawn in the homepage's language.

   Loaded after content.css and only by cenik.html. It restyles the shared
   content chrome for this one page (tokens, header, hero, footer) and draws
   the page's own blocks flat: type, hairlines and white space carry the
   structure, not a box around every block (Ondra, 11. 11. 2026: "samá karta").

   The tokens, the type scale, the button and the FAQ row are taken from
   landing/landing-v5.css by value, not by @import: content-pages.spec.mjs
   keeps the content pages and the landing bundle independent, and a copy
   edit here must not become a landing release.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-2: #f4f6fb;
  --paper: #ffffff;
  --ink: #0a0f1f;
  --text: #394054;
  --muted: #535b6f;
  --line: rgba(10, 15, 31, .09);
  --line-strong: rgba(10, 15, 31, .16);
  --blue: #053df4;
  --blue-2: #0430c2;
  --blue-soft: #edf1ff;
  --top-h: 64px;
  --toc-h: 52px;
}

html { scroll-padding-top: calc(var(--top-h) + var(--toc-h) + 16px); }
body { background: var(--bg); color: var(--text); font-size: 1.0625rem; line-height: 1.6; }
.wrap { width: min(1120px, 100% - 2 * clamp(16px, 4vw, 40px)); }

/* ---------- buttons: the homepage's one button and its ghost ---------- */
.btn { min-height: 52px; gap: 10px; border-radius: 13px; font-weight: 600; font-size: 1.0625rem; }
.btn svg { width: 16px; height: 16px; }
.btn-primary, .btn-white { background: var(--blue); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -12px rgba(5, 61, 244, .7); }
.btn-secondary, .btn-ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
@media (hover: hover) {
  .btn-primary:hover, .btn-white:hover { background: var(--blue-2); box-shadow: 0 10px 24px -12px rgba(5, 61, 244, .7); }
  .btn-secondary:hover, .btn-ghost:hover { background: var(--paper); border-color: var(--ink); }
}

/* ---------- header (the homepage's top bar) ---------- */
.site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header-inner { min-height: var(--top-h); gap: 28px; }
.brand { font-size: 1.125rem; }
.header-nav { font-size: .9375rem; font-weight: 500; color: var(--ink); }
.header-nav a:hover, .login-link:hover { color: var(--blue); }
.header-actions { gap: 20px; }
.login-link { padding: 10px 0; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.btn-header { min-height: 44px; padding: 0 16px; border-radius: 13px; font-size: .9375rem; box-shadow: 0 10px 24px -12px rgba(5, 61, 244, .7); }

/* ---------- hero ---------- */
.doc-head {
  padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
  background: radial-gradient(800px 360px at 50% 0%, var(--blue-soft), transparent 70%);
  border-bottom: 0;
}
.breadcrumb { justify-content: center; margin-bottom: clamp(18px, 2.6vw, 28px); font-size: .8125rem; font-weight: 500; }
.breadcrumb span[aria-hidden] { color: var(--line-strong); }
/* the homepage's kicker: a word in blue, no pill */
.eyebrow { margin: 0 0 14px; color: var(--blue); font-family: var(--sans); font-size: .875rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
.doc-head .display { max-width: none; font-size: clamp(2.75rem, 6.6vw, 5.5rem); letter-spacing: -.035em; line-height: 1; }
.display em { display: block; font-family: var(--sans); font-size: 1em; font-style: normal; font-weight: 700; letter-spacing: inherit; color: var(--blue); }
.doc-lead { max-width: 34em; margin: clamp(14px, 2vw, 20px) auto 0; color: var(--text); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; }

/* the short answer and the next step: one row, no boxes */
.cn-answer {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--line);
  text-align: left;
}
.answer-box { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 1rem; }
.doc-head div.next-step { margin: 0; padding: 0 0 0 clamp(28px, 4vw, 56px); border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; font-size: 1rem; }
.next-step p { max-width: none; }
.doc-head .next-step .next-step-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-top: 18px;
  padding: 0 24px;
  border: 0;
  border-radius: 13px;
  background: var(--blue);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(5, 61, 244, .7);
}
.doc-head .next-step .next-step-go:hover, .doc-head .next-step .next-step-go:focus-visible { background: var(--blue-2); color: #fff; gap: 10px; }
.doc-head .next-step .next-step-go svg { width: 16px; height: 16px; }
.doc-head .next-step .next-step-note { margin-top: 12px; color: var(--muted); font-size: .875rem; }

.doc-meta { justify-content: flex-start; gap: 6px 22px; margin-top: clamp(28px, 3.4vw, 40px); text-align: left; font-family: var(--sans); font-size: .8125rem; letter-spacing: normal; text-transform: none; }
.doc-meta a { color: var(--text); }

/* ---------- body: one column, the contents as a sticky bar on top ---------- */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
.doc-toc {
  order: -1;
  position: sticky;
  top: var(--top-h);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--toc-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  border-image: linear-gradient(color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 92%, transparent)) fill 0 // 0 100vw;
  box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line);
  clip-path: inset(0 -100vw);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: .875rem;
}
.doc-toc p { flex: none; margin: 0; color: var(--muted); font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
.doc-toc ol { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.doc-toc ol::-webkit-scrollbar { display: none; }
.doc-toc li { flex: none; }
.doc-toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink); font-weight: 500; white-space: nowrap; transition: color .2s; }
.doc-toc a:hover { color: var(--blue); }

.prose { max-width: none; }
.prose > * + * { margin-top: 0; }
.prose p { max-width: none; }

/* sections: white, one grey band for the numbers, big headings */
.cn-sec { padding-block: clamp(56px, 8vw, 104px); }
.cn-sec > * + * { margin-top: 0; }
.cn-limits { border-image: linear-gradient(var(--bg-2), var(--bg-2)) fill 0 // 0 100vw; padding-bottom: clamp(40px, 5vw, 64px); }
.cn-addons { border-image: linear-gradient(var(--bg-2), var(--bg-2)) fill 0 // 0 100vw; padding-top: 0; }
.cn-faq { padding-top: 0; }

.prose .cn-sec h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-wrap: balance;
  scroll-margin-top: 0;
}
.cn-head, .cn-pick > h2 { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: clamp(28px, 4vw, 44px) !important; }
.cn-head p { max-width: 46em; color: var(--text); text-wrap: pretty; }
.prose .cn-sec.cn-addons .cn-head h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.cn-pay .cn-head, .cn-faq .cn-head { margin-bottom: clamp(20px, 3vw, 32px) !important; }

.prose a:not(.btn) { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 45%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--blue); text-decoration-color: var(--blue); }

/* list bullets: the homepage's check mark */
.prose ul { gap: 10px; }
.prose ul > li { padding-left: 26px; max-width: none; }
.prose ul > li::before {
  top: .2em;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.2 6.9 10.4 11.4 5.8' fill='none' stroke='%23053df4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---------- which plan: four columns divided by hairlines ---------- */
.cn-pick { padding-bottom: clamp(32px, 4vw, 48px); }
.cn-pick > ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.cn-pick > ul > li { padding: 22px 24px 4px; border-left: 1px solid var(--line); color: var(--text); font-size: .9375rem; }
.cn-pick > ul > li:first-child { padding-left: 0; border-left: 0; }
.cn-pick > ul > li::before { display: none; }
.cn-pick > ul > li strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; }
.prose .cn-pick > ul > li a { color: var(--blue); font-weight: 700; }

/* ---------- plans: name and price on the left, contents on the right ---------- */
.prose .plan {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  margin: 0;
  padding: clamp(36px, 5vw, 56px) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.plan-head { position: sticky; top: calc(var(--top-h) + var(--toc-h) + 24px); align-self: start; }
.prose .plan-head > p { margin-top: 14px; color: var(--text); font-size: 1rem; }
.prose .cn-sec .plan h2 { font-size: inherit; letter-spacing: normal; line-height: 1.1; scroll-margin-top: 0; }
.plan-name { display: block; color: var(--ink); font-size: clamp(1.75rem, 3.2vw, 2.375rem); font-weight: 700; letter-spacing: -.035em; }
.plan-colon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plan-price { display: block; margin-top: 8px; color: var(--blue); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }

.plan-body > * + * { margin-top: 28px; }
.prose .plan h3 { margin: 0 0 12px; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.prose .plan-body ul { display: block; columns: 2; column-gap: 40px; }
.prose .plan-body li { break-inside: avoid; margin-bottom: 10px; color: var(--text); font-size: .9375rem; line-height: 1.55; }
.prose .plan-cap li { color: var(--ink); font-weight: 600; }
.plan-groups > * + * { margin-top: 28px; }
.plan-group > p { margin-bottom: 12px; color: var(--text); font-size: .9375rem; }
.plan-group > p:last-child { margin-bottom: 0; }
.prose .plan .plan-note { color: var(--muted); font-size: .9375rem; }
.plan-cta .btn { min-width: 240px; }

.cn-individual { padding: clamp(36px, 5vw, 56px) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.prose .cn-sec .cn-individual h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); text-align: left; }
.cn-individual p { color: var(--text); font-size: .9375rem; }

/* ---------- tables: flat, hairlines only ---------- */
.table-scroll { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: none; }
.prose table { font-size: .9375rem; }
.prose caption { padding: 16px 20px 6px; color: var(--muted); font-size: .8125rem; }
.prose th, .prose td { padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--line); }
.prose thead th, .prose thead td { border-top: 0; color: var(--ink); font-family: var(--sans); font-size: .9375rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
.prose tbody th { color: var(--ink); font-weight: 600; width: 30%; }
.prose td { color: var(--text); font-variant-numeric: tabular-nums; }
.prose tbody tr[data-limit^="prices."] td { color: var(--ink); font-weight: 700; }
.cn-foot { max-width: 46em; margin: 18px auto 0 !important; text-align: center; color: var(--muted); font-size: .875rem; }

/* ---------- payments: title | text rows ---------- */
.cn-cards { width: min(880px, 100%); margin: 0 auto; border-top: 1px solid var(--line); }
.cn-card { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 32px; padding: 20px 2px; border-bottom: 1px solid var(--line); }
.prose .cn-card h3 { margin: 0; color: var(--ink); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.5; }
.cn-card p { color: var(--text); font-size: .9375rem; }

/* ---------- FAQ: the homepage's rows ---------- */
.faq-block { gap: 0; width: min(880px, 100%); margin: 0 auto; border-top: 1px solid var(--line); }
.faq-block details { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.faq-block summary { padding: 20px 2px; color: var(--ink); font-size: 1.0625rem; font-weight: 600; }
.faq-block summary svg { width: 26px; height: 26px; padding: 6px; border-radius: 8px; background: var(--bg-2); color: var(--ink); transition: transform .3s var(--ease); }
.faq-block details > div { padding: 0 40px 20px 2px; }
.faq-block details p { color: var(--text); }

/* ---------- closing band: the homepage's "Zkuste Parťáka…" ---------- */
.doc-cta { padding-block: clamp(72px, 9vw, 120px); background: var(--bg-2); border-top: 1px solid var(--line); color: var(--ink); text-align: left; }
.doc-cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.doc-cta h2 { grid-row: 1 / span 3; max-width: 9em; margin: 0; color: var(--ink); font-size: clamp(2.25rem, 4.8vw, 4rem); letter-spacing: -.04em; line-height: 1.02; }
.doc-cta h2 em { display: block; font-family: var(--sans); font-size: 1em; font-style: normal; font-weight: 700; color: var(--blue); }
.doc-cta p { max-width: 32em; margin: 0; color: var(--text); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }
.doc-cta-actions { justify-content: flex-start; gap: 12px; margin-top: 26px; }
.doc-cta-micro { margin-top: 18px !important; color: var(--muted); font-size: .875rem !important; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg); border-top: 0; padding: 28px 0 120px; font-size: .875rem; }
.foot-cols { border-bottom-color: var(--line); }
.site-footer a, .site-footer button { color: var(--text); }
.site-footer a:hover, .site-footer button:hover { color: var(--blue); }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .doc-toc { position: sticky; order: -1; margin-bottom: 0; }
  .cn-pick > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-pick > ul > li:nth-child(3) { padding-left: 0; border-left: 0; }
  .cn-pick > ul > li:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 18px; }
}
@media (max-width: 860px) {
  .cn-answer { grid-template-columns: minmax(0, 1fr); }
  .doc-head div.next-step { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .prose .plan, .cn-individual { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .plan-head { position: static; }
}
@media (max-width: 760px) {
  .wrap { width: min(1120px, 100% - 32px); }
  .doc-head .next-step .next-step-go { width: 100%; }
  .prose .plan-body ul { columns: 1; }
  .cn-card { grid-template-columns: minmax(0, 1fr); }
  .doc-cta .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .doc-cta h2 { grid-row: auto; }
  .doc-cta-actions .btn { width: 100%; }
  .plan-cta .btn { width: 100%; min-width: 0; }
}
@media (max-width: 640px) {
  .doc-head .display { font-size: clamp(2.75rem, 13vw, 4rem); line-height: .98; }
  .doc-toc p { display: none; }
  .cn-pick > ul { grid-template-columns: minmax(0, 1fr); }
  .cn-pick > ul > li, .cn-pick > ul > li:nth-child(3) { padding: 18px 0 2px; border-left: 0; margin-top: 0; }
  .cn-pick > ul > li + li { border-top: 1px solid var(--line); }
  .faq-block details > div { padding-right: 2px; }
  /* a phone has no room for five columns: each row is its title, then the plans under it */
  .table-scroll { overflow: visible; }
  .prose table { min-width: 0; }
  .prose thead { display: none; }
  .prose caption { display: block; padding: 14px 16px 4px; }
  .prose tbody, .prose table { display: block; }
  .prose tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
  .prose tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 4px; border: 0; }
  .prose tbody td { padding: 0; border: 0; font-size: .8125rem; line-height: 1.35; overflow-wrap: anywhere; }
  .prose tbody td[data-l]::before { content: attr(data-l); display: block; font-size: .6875rem; font-weight: 600; color: var(--muted); }
  .cn-addons tbody tr { grid-template-columns: minmax(0, 1fr); }
  .cn-addons tbody td + td { color: var(--muted); }
}