/*
 * site.css — webove-vizitky.cz's own layer on top of the kit's theme.css
 * (go/rogr-kit/web/theme.css; the fleet rule „Bootstrap everywhere",
 * 15. 10. 2026): hero, card grids, steps, pricing, FAQ, the contact band and
 * page, the website check result, the questionnaire, the admin lists and the
 * letter tools, legal prose, the footer. Fonts, colour tokens, buttons, forms,
 * the navbar (the kit's drawer snippet), cards, tables and alerts come from
 * Bootstrap 6 + the kit in both colour modes; the site's old variable names
 * below are aliases of the v6 tokens so the component rules read as before.
 * Breakpoint: lg = 1024 px in v6, so the phone rules end at 1023.98 px where
 * the navbar's own container query flips. Shared lineage with rogr.eu
 * (go/rogr): the rules above the "additions" mark mirror its site.css.
 * No inline styles (strict CSP).
 *
 * Contrast bar: text ≥ 4.5:1, UI edges and focus ≥ 3:1 against the surface
 * they sit on (WCAG 2.2 AA) — the kit's buttons rest on #0079b8, the brand
 * blue #008cd2 is kept for large marks and hover states only.
 */

:root {
  --blue: var(--bs-primary-base);
  --blue-light: var(--bs-link-color);
  --grey: var(--bs-border-color);
  --line: var(--bs-border-color);
  --ctrl-line: var(--bs-border-emphasized);
  --bg: var(--bs-bg-body);
  --surface: var(--bs-bg-1);
  --surface-2: var(--bs-bg-2);
  --field: var(--bs-btn-input-bg);
  --ink: var(--bs-fg-body);
  --ink-strong: var(--bs-fg-body);
  --ink-soft: var(--bs-fg-1);
  --muted: var(--bs-fg-2);
  --ok: var(--bs-success-fg);
  --warn: var(--bs-warning-fg);
  --err: var(--bs-danger-fg);
  --radius: var(--bs-radius-5);
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 3.75rem;
  --block-y: clamp(3rem, 7vw, 5.5rem);
}

/* ---------- base ---------- */
html { scroll-padding-top: calc(var(--nav-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
main:focus { outline: none; }
/* The public pages' heading scale on bare elements. It lives in Bootstrap's `reboot` layer (where v6 sets
   h1–h6 and .h1–.h6), so a heading utility (.h5, .fs-lg, .fw-normal — later layers or a class in the same
   one) still wins: unlayered element rules here used to beat `.h5` on the login card and the passkeys
   page (UX pass, 29. 10. 2026). The site's class rules below stay unlayered and win as before. */
@layer reboot {
  h1, h2, h3 { text-wrap: balance; }
  h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 300; letter-spacing: .01em; }
  h1 b { font-weight: 700; }
  h2 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 300; letter-spacing: .01em; margin-bottom: 1.75rem; }
  h3 { font-size: 1.05rem; font-weight: 600; }
  /* Fewer orphaned last words in running text (progressive enhancement). */
  p, li, .lead-text { text-wrap: pretty; }
}
.icon { width: 24px; height: 24px; flex: none; }
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- skip link ---------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 1100; background: var(--rogr-blue-btn); color: #fff; font-weight: 600; font-size: .875rem; padding: .625rem 1.125rem; border-radius: var(--radius); }
.skip:focus { left: var(--gutter); top: .75rem; }

/* ---------- header / navigation (the kit's Bootstrap 6 navbar: a drawer below lg) ----------
 * .wrap stands in for Bootstrap's .container inside the navbar, so it carries the
 * same flex rules (the kit's nowrap targets .app-nav > .container). The navbar is
 * the query container: from 1024 px the drawer sits inline and the tools go last. */
.site-head { background: var(--surface); }
.site-head .navbar .wrap { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; min-height: var(--nav-h); }
.site-head .navbar-nav .nav-link { white-space: nowrap; }
/* seven links next to the brand sub-title: v6's .75rem link padding wraps them at 1280 px, .5rem does not */
.site-head .app-nav { --bs-navbar-nav-link-padding-x: .5rem; }
.site-head .navbar-nav { --bs-nav-gap: .125rem; }
@container (width >= 1024px) { .site-head .navbar .wrap { justify-content: flex-start; } .site-head .navbar-tools { margin-left: auto; } } /* the tools stay right on the login page too (it has no drawer to push them) */
/* in the narrow lg band the inline links need the sub-title's room (the page says the name anyway) */
@container (1024px <= width < 1120px) { .site-head .brand-sub { display: none; } }
@media (max-width: 1023.98px) {
  .site-head { position: static; }
  html { scroll-padding-top: 1rem; }
  .site-head .drawer .navbar-nav { width: 100%; }
  .site-head .drawer .nav-link { min-height: 44px; display: flex; align-items: center; }
}

/* ---------- page containers ---------- */
.block { max-width: 72rem; margin: 0 auto; padding: var(--block-y) var(--gutter); border-top: 1px solid var(--grey); }
.section-lead { color: var(--muted); font-size: 1.05rem; max-width: 46em; margin: -1rem 0 2rem; }
.page-intro { max-width: 72rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 1.5rem; }
.page-intro h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.page-intro .lead-text { margin-top: .75rem; }

/* ---------- hero ---------- */
.hero { max-width: 72rem; margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) clamp(2.5rem, 6vw, 4rem); }
.hero-text { max-width: 44rem; }
.lead-text { font-size: var(--bs-font-size-lg); color: var(--ink-soft); max-width: 34em; margin: 1.5rem 0 0; font-weight: 300; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* v6 buttons are .btn-solid / .btn-outline (no .btn): 44 px targets in a CTA row, the hero's large ones 52 px */
.cta-row .btn-solid, .cta-row .btn-outline { min-height: 2.75rem; }
.cta-row .btn-lg { min-height: 3.25rem; }
.facts { list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--grey); display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; color: var(--muted); font-size: .9375rem; }
.facts li { display: flex; align-items: center; gap: .625rem; }
.facts li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--blue); flex: none; }
@media (max-width: 575.98px) { .cta-row > .btn-solid, .cta-row > .btn-outline, .cta-row > form { flex: 1 1 100%; } .cta-row > form > .btn-solid, .cta-row > form > .btn-outline { width: 100%; } }
/* phones: every button in the content and the drawer is a 44 px target (v6: 38 px, btn-sm 32 px) */
@media (max-width: 1023.98px) { main .btn-solid, main .btn-outline, .drawer .btn-outline { min-height: 2.75rem; } }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1rem; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards .card { min-width: 0; }
.cards .card-body { padding: 1.5rem 1.5rem 1.375rem; display: flex; flex-direction: column; gap: 0; }
.cards .card h3 { margin-bottom: .5rem; font-size: 1.125rem; }
.cards .card p { color: var(--muted); font-size: .9375rem; margin: 0; }
.card-icon { display: inline-flex; color: var(--blue-light); margin-bottom: 1rem; }
.card-icon .icon { width: 28px; height: 28px; }
.card-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.card-list li { position: relative; padding-left: 1.125rem; color: var(--ink-soft); font-size: .9375rem; margin-bottom: .4rem; }
.card-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .375rem; height: .375rem; border-radius: 50%; background: var(--blue); }
.cards .card h3 a { text-decoration: none; }
.card-link { display: inline-flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: 1.25rem; font-weight: 600; }
.card-link .icon { width: 18px; height: 18px; }
@media (max-width: 1023.98px) { .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .cards-3 { grid-template-columns: 1fr; } }

/* ---------- steps (a real sequence, so the numbers carry meaning) ---------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.375rem; min-width: 0; }
.steps li::before { content: counter(step); display: block; font-size: 2.25rem; font-weight: 200; color: var(--blue); line-height: 1; margin-bottom: .75rem; }
.steps h3 { margin-bottom: .5rem; }
.steps p { color: var(--muted); font-size: .9375rem; margin: 0; }
@media (max-width: 1023.98px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .steps { grid-template-columns: 1fr; } }

/* ---------- references ---------- */
.ref-period { display: block; color: var(--muted); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5rem; }

/* ---------- contact band ---------- */
.cta-band { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter) var(--block-y); }
.cta-inner { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem 3rem; align-items: center; }
.cta-inner h2 { margin-bottom: .5rem; }
.cta-inner p { color: var(--ink-soft); margin: 0; max-width: 36em; }
.cta-actions { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.cta-actions .contact-line { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); padding: .25rem 0; }
.cta-actions .contact-line .icon { color: var(--blue-light); width: 20px; height: 20px; }
@media (max-width: 767.98px) { .cta-inner { grid-template-columns: 1fr; } }

/* ---------- contact page (the forms are kit cards with the Bootstrap form pattern) ---------- */
.contact { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter) var(--block-y); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem 4rem; align-items: start; }
.contact-form .card + .card, .contact-form .result + .card { margin-top: 1.5rem; }
/* the form card: Bootstrap 6's card-body is a flex column — its gap spaces the .form-field rows */
.contact-fields { padding: 1.5rem; gap: 1rem; }
.contact-fields > .form-required, .contact-fields > .form-privacy { margin: 0; }
.form-required { color: var(--muted); font-size: .8125rem; margin-bottom: 1rem; }
.form-label span[aria-hidden], .form-field > label span[aria-hidden] { color: var(--blue-light); }
.contact textarea { resize: vertical; min-height: 8rem; }
.form-privacy { color: var(--muted); font-size: .8125rem; margin: 1rem 0 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aside-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; } /* h2 for the outline, h3 look */
.contact-direct { line-height: 1.7; }
.contact-direct a { text-decoration: none; }
.contact-direct p { margin: 0 0 .5rem; }
.contact-direct a, .contact-direct .contact-line { display: inline-flex; align-items: center; gap: .5rem; padding: .15rem 0; min-height: 44px; }
.contact-direct .contact-line { color: var(--ink-soft); }
.contact-direct .icon { color: var(--blue-light); width: 20px; height: 20px; }
.contact-company { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--grey); color: var(--muted); font-size: .9375rem; }
.contact-company p { margin: 0 0 .35rem; }
.next-title { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--grey); }
.next-steps { list-style: none; counter-reset: next; margin: 1rem 0 0; padding: 0; display: grid; gap: .625rem; }
.next-steps li { counter-increment: next; display: flex; gap: .75rem; color: var(--ink-soft); }
.next-steps li::before { content: counter(next); flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--blue); color: var(--blue-light); font-size: .8125rem; display: grid; place-items: center; }
@media (max-width: 1023.98px) { .contact { grid-template-columns: 1fr; } }

/* ---------- not found ---------- */
.notfound { max-width: 72rem; margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--gutter); }
.notfound p { color: var(--ink-soft); max-width: 40em; }
.notfound .cta-row { margin-top: 1.5rem; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--grey); color: var(--muted); font-size: .875rem; margin-top: 2rem; }
.foot-grid { padding-block: 2rem 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.foot-brand { display: flex; align-items: center; gap: .625rem; color: var(--ink); margin-bottom: .5rem; }
.foot-brand img { height: 18px; width: auto; opacity: .85; }
.foot-company p, .foot-contact p { margin: 0 0 .5rem; max-width: 40em; }
.foot-contact { text-align: right; }
.foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-copy { margin-top: .75rem; }
@media (max-width: 639.98px) { .foot-contact { text-align: left; } }

/* ---------- legal pages ---------- */
.prose { max-width: 70ch; margin: 0 auto; padding: 3rem var(--gutter) 4rem; }
.prose h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: .5rem; }
.prose h2 { font-size: 1.25rem; font-weight: 600; margin: 2.25rem 0 .75rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ol, .prose ul { padding-left: 1.4rem; }
.prose li { margin-bottom: .5rem; }
.prose .updated { color: var(--muted); font-size: .875rem; margin-bottom: 2rem; }

/* ---------- additions for webove-vizitky.cz ---------- */
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023.98px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .steps-3 { grid-template-columns: 1fr; } }
@media (max-width: 639.98px) { .cards-2, .cards-4 { grid-template-columns: 1fr; } }
.block .cta-row { margin-top: 2rem; }

/* pricing */
.plan .price { display: block; font-size: 2.25rem; font-weight: 200; color: var(--blue-light); line-height: 1.1; margin: .25rem 0; }
.plan .price small { font-size: 1rem; font-weight: 300; color: var(--muted); }
.plan .price-note { color: var(--muted); font-size: .875rem; margin: 0 0 .25rem; }
.price-rows { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.price-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.5rem; align-items: baseline; padding: .875rem 0; border-bottom: 1px solid var(--line); }
.price-rows strong { color: var(--ink-strong); font-weight: 600; }
.price-rows .amount { color: var(--blue-light); font-weight: 600; white-space: nowrap; }
.price-rows p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .9375rem; }
.price-vat { color: var(--muted); font-size: .875rem; margin: 1rem 0 0; }

/* faq (native details, no JS) */
.faq { max-width: 46rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: .875rem 0; font-weight: 600; color: var(--ink-strong); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue-light); font-weight: 300; font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--ink-soft); margin: 0 0 1rem; max-width: 42em; }

/* the inquiry form inside the landing page */
.contact-inline { padding: 0; }
.contact-inline .contact-aside h3.aside-title { margin-top: 0; }

/* admin: detail lists */
.fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.5rem; margin: 1.5rem 0; }
.fields dt { color: var(--muted); font-size: .875rem; font-weight: 400; }
.fields dd { margin: 0; white-space: pre-line; color: var(--ink); }
@media (max-width: 639.98px) { .fields { grid-template-columns: 1fr; gap: .25rem; } .fields dd { margin-bottom: .75rem; } }
.table > tbody > tr.done > td, .table > tbody > tr.st-lost > td { color: var(--muted); }

/* kontrola webu */
.result { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--grey); }
.result-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.grade { font-size: 3.25rem; font-weight: 200; color: var(--blue-light); line-height: 1; white-space: nowrap; }
.grade small { font-size: 1rem; color: var(--muted); font-weight: 300; }
.result-title { font-size: 1.35rem; font-weight: 600; margin: 0; }
.result-head p { margin: .25rem 0 0; }
.checks { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--line); }
/* a status is a shape and a colour (✓ ! ✕ –) plus a hidden word (audit VT4, 21. 10. 2026) */
.checks li { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: .15rem .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.checks li > .icon { grid-row: 1; width: 1.125rem; height: 1.125rem; align-self: start; margin-top: .1rem; stroke-width: 2; }
.status-ok > .icon { color: var(--ok); }
.status-warn > .icon { color: var(--warn); }
.status-fail > .icon { color: var(--err); }
.status-skip > .icon { color: var(--muted); }
.checks strong { color: var(--ink-strong); }
.checks li > span, .checks .check-quote { grid-column: 2; color: var(--muted); font-size: .9375rem; }
.checks .check-quote { font-style: italic; overflow-wrap: anywhere; }
.checks li.status-skip strong, .checks li.status-skip span { color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--muted); font-size: .8125rem; margin: 0 0 1rem; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend .icon { width: 1rem; height: 1rem; stroke-width: 2; }
.aside-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; color: var(--ink-soft); }
.aside-list li { display: flex; gap: .625rem; align-items: flex-start; }
.aside-list li::before { content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--blue); margin-top: .6em; }

/* admin app (17. 10. 2026, „Směr A"): the campaign, the firms, the firm */
.app { max-width: 61rem; margin: 0 auto; padding: 1.5rem var(--gutter) 3rem; }
.app-narrow { max-width: 46rem; }
.app-footer .app-foot { padding-block: 0; } /* the kit's app footer (admin + login) on the app's width */
.app-title { font-size: 1.6rem; font-weight: 600; margin: 0 0 1rem; }
.app-meta { color: var(--muted); margin: -.75rem 0 1.25rem; } /* the line under the title: counts, state, badges */
.app-meta .badge { vertical-align: text-bottom; }
.app .cta-row { margin-top: 1.25rem; }
.app .cta-row + .form-text { margin-top: .75rem; }
.h-card { font-size: 1rem; font-weight: 600; margin: 0; }
.h-sub { font-size: .875rem; font-weight: 600; color: var(--muted); margin: 1.25rem 0 .25rem; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .75rem; }
.num { font-variant-numeric: tabular-nums; }
.back { font-size: .875rem; margin: 0 0 .5rem; }
.back a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -.75rem; } /* a 44 px target without moving the title */
.funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
@media (max-width: 767.98px) { .funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fstep { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .7rem .85rem; border-radius: var(--radius); background: var(--surface-2); border-top: 3px solid var(--bs-theme-fg); }
.fstep-n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.fstep-l { font-size: .75rem; color: var(--muted); }
.reach { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.5rem; }
.reach-bar { display: block; width: 100%; height: 6px; }
.reach-bar .bg { fill: var(--bs-bg-3); }
.reach-bar .fg { fill: var(--blue); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.25rem; }
@media (min-width: 1024px) { .app-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.batch-form { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; }
.batch-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .75rem 0 1rem; }
.batch-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.prepared { flex-direction: column; align-items: stretch; }
.prepared .batch-actions a { text-decoration: none; }
.batch-actions .icon, .pdf-row .icon { width: 1.1em; height: 1.1em; margin-right: .3rem; vertical-align: -.15em; }
.empty { display: flex; gap: .85rem; align-items: flex-start; }
.empty .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--muted); margin-top: .1rem; }
.kv { display: flex; flex-direction: column; gap: .1rem; }
/* Kampaň: návštěvnost webu (29. 10. 2026) — the bars are SVG attributes, no inline style */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin-bottom: 1rem; }
.kpi { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kpi-n { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.kpi-l { font-size: .8125rem; color: var(--muted); }
.traffic-bars { display: block; width: 100%; height: 60px; }
.traffic-bars .bar { fill: var(--blue); }
.traffic-bars .bar-0 { fill: var(--bs-bg-3); }
.traffic-axis { display: flex; justify-content: space-between; margin-top: .25rem; }
.traffic-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.25rem; }
@media (min-width: 640px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .traffic-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) { .kv { flex-direction: row; justify-content: space-between; align-items: baseline; gap: .75rem; } }
.all-link { display: inline-block; margin-top: .25rem; font-weight: 600; text-decoration: none; }
.search { position: relative; margin-bottom: .75rem; }
.search .icon { position: absolute; left: .8rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search .form-control { padding-left: 2.4rem; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.chips .chip { text-decoration: none; gap: .35rem; min-height: 2.25rem; }
@media (max-width: 1023.98px) { .chips .chip { min-height: 2.75rem; } }
@media (max-width: 639.98px) { .chip-sep { display: none; } } /* the rows wrap on a phone: a lone tick at a line's end */
.chips .chip:focus-visible { outline: var(--bs-focus-ring); outline-offset: 2px; }
.chip-n { color: var(--muted); }
.chip.active .chip-n { color: inherit; opacity: .8; }
.chip-sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 .25rem; }
#firms { margin-top: .9rem; }
.frow { display: flex; align-items: center; gap: .75rem; padding-block: .65rem; color: inherit; }
.frow-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.frow-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow-sub { font-size: .8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639.98px) { .frow-sub { white-space: normal; } } /* the place and the year survive on a phone */
.frow-side { display: flex; align-items: center; gap: .5rem; flex: none; }
.frow.st-lost .frow-name { color: var(--muted); }
/* the inquiry detail's „Firma z kampaně“ and the firm's inquiries (30. 10. 2026) */
.firm-link { margin-block: 1.5rem; }
.firm-link h2 { margin-bottom: .5rem; }
.firm-linked { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.firm-matches .frow { align-items: center; }
.firm-matches .frow-side { gap: .35rem; }
.firm-matches .frow-sub { white-space: normal; }
.firm-inquiries { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.web .icon { width: 1rem; height: 1rem; vertical-align: middle; }
.web-yes { color: var(--ok); }
.web-no { color: var(--muted); opacity: .5; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.tools { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.tools-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.pdf-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1.25rem; }
.edit summary { cursor: pointer; color: var(--blue-light); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
/* status badges are the kit's `badge badge-outline theme-*` (stavTheme: the funnel's colours) — no own palette */

/* the copy round of 21. 10. 2026: the letter banner (VU16), the hero eyebrow
   (VU37), the first payment (VU7), „Kdo za tím stojí“ (VU5), the
   questionnaire's fieldsets and its „Co bude dál“ above the form on phones
   (VU10), the check's offer card (VU14), the footer links (VU34) */
.letter-note { max-width: 72rem; margin: 1.25rem auto 0; padding: 0 var(--gutter); }
.letter-note p { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius); padding: .875rem 1.125rem; color: var(--ink-soft); max-width: 52rem; }
.letter-note + .hero { padding-top: clamp(2rem, 6vw, 4.5rem); }
.eyebrow { color: var(--blue-light); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .75rem; }
.price-first { color: var(--ink-soft); margin: 1.25rem 0 0; max-width: 46em; }
.price-first strong { color: var(--ink-strong); font-weight: 600; }
.who { max-width: 46em; }
.who p { color: var(--ink-soft); font-size: 1.05rem; }
.form-fieldset { display: flex; flex-direction: column; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-fieldset > legend { float: none; width: 100%; font-size: 1.05rem; font-weight: 600; color: var(--ink-strong); margin: .5rem 0 1rem; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
.form-fieldset:first-of-type > legend { margin-top: 0; padding-top: 0; border-top: 0; }
.intro-next { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--grey); max-width: 40em; }
.next-note { color: var(--muted); font-size: .9375rem; margin: 1rem 0 0; }
.offer-card { margin: 0 0 1.25rem; padding: 1.125rem 1.25rem; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius); }
.offer-card p { margin: 0; color: var(--ink-soft); }
.offer-card .cta-row { margin-top: 1rem; }
.offer-card-quiet { border-left-color: var(--ok); }
.foot-links { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: .5rem; }
.foot-links li { white-space: nowrap; }
/* the content wave of 29. 10. 2026: the footer's columns, the trade pages, the rádce */
.foot-nav { min-width: 10rem; }
.foot-head { color: var(--ink); font-weight: 600; margin: 0 0 .5rem; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list a { display: inline-flex; align-items: center; min-height: 36px; }
.foot-trades { flex-basis: 100%; } /* the 14 trades flow in one row above the columns (30. 10. 2026: two narrow columns broke every label) */
.foot-inline { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.trade-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trade-grid a { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1rem 1.125rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; }
.trade-grid a:hover, .trade-grid a:focus-visible { border-color: var(--blue); }
.trade-grid strong { color: var(--ink-strong); font-weight: 600; }
.trade-grid span { color: var(--muted); font-size: .9375rem; }
.needs { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.needs li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.375rem; min-width: 0; }
.needs h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.needs p { color: var(--muted); font-size: .9375rem; margin: 0; }
.keyfacts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.keyfacts li { padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .9375rem; }
.demo-one { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
.demo-one .demo-grid { grid-template-columns: minmax(0, 1fr); }
.demo-one .section-lead { margin-top: 0; }
.ref-grid { grid-template-columns: repeat(2, minmax(0, 22rem)); }
.article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.375rem; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.article-list .h-article { font-size: 1.125rem; margin: 0; }
.article-list .h-article a { text-decoration: none; }
.article-list p { color: var(--muted); font-size: .9375rem; margin: 0; }
.article-list .meta { font-size: .8125rem; margin-top: auto; padding-top: .5rem; }
.compare th[scope="row"] { white-space: nowrap; }
@media (max-width: 1023.98px) {
  .trade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .needs, .article-list, .demo-one, .ref-grid { grid-template-columns: minmax(0, 1fr); }
  .ref-grid { max-width: 22rem; }
}
@media (max-width: 639.98px) {
  .trade-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-nav { min-width: 0; flex: 1 1 10rem; }
}
@media (min-width: 1024px) { /* the trades row, then three columns: the company, Služba, the contact on the right */
  .foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem 2rem; }
  .foot-trades { grid-column: 1 / -1; }
}
.foot-links li:not(:last-child)::after { content: "·"; margin-left: .5rem; }
@media (max-width: 639.98px) { .foot-links { flex-direction: column; } .foot-links li:not(:last-child)::after { content: none; } } /* one link a line: no separator dangling at a wrap, 44 px rows */

/* the demo vizitky (21. 10. 2026, audit VU4): phone screenshots of the four
   go/vizitky demos, one per style a customer picks from, in a CSS phone
   frame — the landing's Ukázky section and /ukazky/; four in a row from lg,
   two from md, a phone beside its text below */
.demo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.demo-card { min-width: 0; overflow: hidden; }
.demo-card .card-body { padding: 1.75rem 1.25rem 1.375rem; display: flex; flex-direction: column; } /* air under the phone: 2.25rem with its margin */
.demo-card h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.demo-card h3 a { text-decoration: none; }
.demo-card h3 a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.demo-card { position: relative; }
.demo-card p { color: var(--muted); font-size: .9375rem; margin: 0; }
.demo-card .demo-firm { color: var(--ink); font-weight: 600; margin-bottom: .4rem; }
.demo-card .demo-place { margin-top: auto; padding-top: .75rem; font-size: .8125rem; }
.demo-phone { display: block; width: min(13.5rem, 76%); margin: 1.5rem auto .5rem; aspect-ratio: 1 / 2; border: .4rem solid var(--rogr-grey); border-radius: 1.6rem; overflow: hidden; background: var(--surface-2); box-shadow: var(--bs-box-shadow-lg); }
.demo-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.demo-card:hover .demo-phone, .demo-card:focus-within .demo-phone { border-color: var(--blue); }
.demo-note { color: var(--muted); font-size: .9375rem; max-width: 46em; margin: 1.5rem 0 0; }
.demos-block { border-top: 0; padding-top: 0; }
@media (max-width: 1023.98px) { .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) {
  .demo-grid { grid-template-columns: 1fr; }
  .demo-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
  .demo-phone { width: auto; margin: 1rem 0 1rem 1rem; border-width: .3rem; border-radius: 1.1rem; }
  .demo-card .card-body { padding: 1rem 1rem 1rem 1.25rem; } /* the gap beside the phone */
}