/* =============================================================================
   LabelyPrint — public marketing site
   ============================================================================= */

:root {
    --bg:        #ffffff;
    --bg-alt:    #f8fafc;
    --bg-dark:   #0f172a;
    --ink:       #0f172a;
    --ink-2:     #334155;
    --muted:     #64748b;
    --line:      #e2e8f0;
    --line-2:    #cbd5e1;
    --primary:   #4338ca;
    --primary-2: #7c3aed;
    --primary-3: #6366f1;
    --accent:    #8b5cf6;
    --success:   #16a34a;
    --warning:   #d97706;
    --danger:    #dc2626;
    --radius:    14px;
    --radius-sm: 8px;
    --shadow:    0 18px 40px -22px rgba(15,23,42,.18);
    --shadow-lg: 0 30px 60px -28px rgba(15,23,42,.32);
    --grad:      linear-gradient(120deg,#6366f1 0%,#8b5cf6 60%,#ec4899 100%);
    --container: 1180px;
}

*,*::before,*::after { box-sizing: border-box; }

html, body { margin:0; padding:0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* -------------------------------------------------------------------------- */
/* Top bar                                                                    */
/* -------------------------------------------------------------------------- */
.topbar {
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
}
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 18px; color: var(--ink);
    text-decoration: none;
}
.brand-mark { width: 32px; height: 32px; border-radius: 8px; }
.brand--footer { color:#fff; font-size: 18px; }
.topbar-nav { display: flex; align-items: center; gap: 28px; }
.topbar-nav a {
    color: var(--ink-2); font-weight: 500; font-size: 15px; text-decoration: none;
    padding: 6px 0; position: relative;
}
.topbar-nav a:hover { color: var(--ink); }
.topbar-nav a.is-active { color: var(--primary); }
.topbar-nav a.is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--primary);
}
/* Selector deliberately chained as .topbar-nav a.topbar-cta — the parent
   .topbar-nav a rule above (padding: 6px 0) has higher specificity than a
   plain .topbar-cta and was silently winning the cascade, which is why the
   button kept rendering at the bare text width regardless of any padding
   we set here. Chaining gives us the same specificity + later position so
   our rules win cleanly without !important. */
.topbar-nav a.topbar-cta {
    display: inline-block;
    background: var(--ink); color: #fff !important;
    padding: 14px 36px;
    border-radius: 999px;
    font-weight: 600; font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .15s;
}
.topbar-nav a.topbar-cta:hover { background: var(--primary); text-decoration: none; }

/* Language switcher — sits inline with the nav, between the regular nav
   links and the customer-portal CTA. Two two-letter codes (CS / EN) with a
   thin dot separator. The active locale gets a darker colour + slight
   weight bump so the visitor can see at a glance which side they're on
   without having to read the URL. */
.topbar-lang {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--muted);
    margin-left: 4px;
}
.topbar-lang__opt {
    color: var(--muted); font-weight: 500; text-decoration: none;
    padding: 4px 6px; border-radius: 4px;
    transition: color .12s, background .12s;
}
.topbar-lang__opt:hover { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.topbar-lang__opt.is-active { color: var(--ink); font-weight: 700; }
.topbar-lang__sep { color: var(--line-2); }

/* -------------------------------------------------------------------------- */
/* Sections                                                                   */
/* -------------------------------------------------------------------------- */
.section { padding: 96px 0; }
.section--alt { background: var(--bg-alt); }
.section--cta { padding: 64px 0 96px; }

.section-title {
    font-size: 40px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.02em;
    text-align: center;
}
.section-sub {
    text-align: center; color: var(--muted); margin: 0 auto 48px; max-width: 640px;
}

.grad {
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */
.hero {
    padding: 80px 0 100px; background:
        radial-gradient(800px 400px at 80% 10%, rgba(139,92,246,.18), transparent 60%),
        radial-gradient(600px 380px at 12% 80%, rgba(99,102,241,.18), transparent 60%);
    position: relative;
    overflow: hidden;
}
.hero-grid {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

.hero-text h1 {
    font-size: 56px; line-height: 1.05; margin: 12px 0 20px; letter-spacing: -.025em;
    font-weight: 700;
}
@media (max-width: 720px) { .hero-text h1 { font-size: 40px; } }

.lead {
    font-size: 19px; color: var(--ink-2); max-width: 540px; margin: 0 0 28px;
}

.badge {
    display: inline-block; padding: 6px 12px; border-radius: 999px;
    background: rgba(124,58,237,.08); color: var(--primary-2); font-weight: 600; font-size: 13px;
    border: 1px solid rgba(124,58,237,.15);
}

.hero-cta { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }

.hero-bullets {
    list-style: none; padding: 0; margin: 0; color: var(--ink-2);
    display: grid; gap: 6px; font-size: 15px;
}
.hero-bullets li::before { content: '✓ '; color: var(--success); font-weight: 700; }

/* hero artwork */
.hero-art {
    position: relative; min-height: 360px;
    display: grid; place-items: center;
    overflow: hidden;
}
.hero-shot {
    width: 100%; max-width: 540px;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    position: relative; z-index: 2;
    transform: rotate(-1.5deg);
    transition: transform .3s ease;
}
.hero-shot:hover { transform: rotate(0); }
.hero-screen {
    width: 100%; max-width: 460px;
    background: var(--bg-dark); border-radius: 18px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative; z-index: 2;
    transform: rotate(-2deg);
}
.hero-screen-bar {
    background: #1f2937; height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 14px;
}
.hero-screen-bar span {
    width: 10px; height: 10px; border-radius: 50%; background: #4b5563;
}
.hero-screen-bar span:first-child { background: #ef4444; }
.hero-screen-bar span:nth-child(2) { background: #f59e0b; }
.hero-screen-bar span:last-child { background: #10b981; }
.hero-screen-body { padding: 48px 36px; background: #fff; min-height: 220px; display: grid; place-items: center; }

.hero-label {
    width: 100%; max-width: 320px; aspect-ratio: 5 / 3;
    border: 2px dashed #cbd5e1; border-radius: 6px; padding: 18px 22px;
    display: flex; flex-direction: column; gap: 6px;
    background: #fff;
}
.hero-label-row { font-family: 'Inter', sans-serif; color: #1e293b; font-size: 14px; }
.hero-label-row--title { font-weight: 700; font-size: 22px; letter-spacing: .02em; }
.hero-label-row--small { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 22px; letter-spacing: -1px; color: #0f172a; line-height: 1; }
.hero-label-row--code { font-family: Consolas, monospace; font-size: 13px; color: #475569; }

.hero-blob {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
}
.hero-blob--a { width: 320px; height: 320px; background: #a78bfa; top: -40px; right: -40px; }
.hero-blob--b { width: 280px; height: 280px; background: #6366f1; bottom: -60px; left: -40px; opacity: .35; }

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
    font-weight: 600; font-size: 15px; cursor: pointer;
    transition: transform .08s ease-out, background .15s, box-shadow .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--primary); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--bg-alt); }
.btn--lg { padding: 14px 26px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #b91c1c; }
.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: #15803d; }

/* -------------------------------------------------------------------------- */
/* Cards / grids                                                              */
/* -------------------------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid--3 { grid-template-columns: 1fr; } }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .grid--2 { grid-template-columns: 1fr; } }

.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px; transition: transform .15s ease-out, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin: 12px 0 6px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); }
.card-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(99,102,241,.1); color: var(--primary);
    display: grid; place-items: center;
}
.card-icon svg { width: 22px; height: 22px; }

/* feature page */
.feature-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.feature h3 { margin: 0 0 12px; font-size: 18px; color: var(--ink); }
.feature ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.feature li { margin-bottom: 6px; }

/* page hero (sub-page header) */
.page-hero {
    background: var(--bg-alt);
    padding: 80px 0 56px; border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: 44px; margin: 12px 0 16px; letter-spacing: -.02em; }
.page-hero .lead { max-width: 720px; }

/* -------------------------------------------------------------------------- */
/* Plans (pricing)                                                            */
/* -------------------------------------------------------------------------- */
.plans {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
@media (max-width: 1080px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .plans { grid-template-columns: 1fr; } }
.plan {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px; background: #fff; display: flex; flex-direction: column; gap: 18px;
    transition: transform .15s, box-shadow .15s;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.plan h3 { margin: 0; font-size: 22px; }
.plan p { margin: 0; color: var(--muted); }
.plan-price { font-size: 36px; font-weight: 700; }
.plan-price .num { letter-spacing: -.02em; }
.plan-price small { font-size: 13px; font-weight: 500; color: var(--muted); display: block; margin-top: 4px; }
.plan ul { margin: 0; padding: 0; list-style: none; flex-grow: 1; }
.plan ul li { padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; }
.plan ul li:first-child { border-top: 0; }
.plan ul li::before { content: '✓ '; color: var(--success); font-weight: 700; margin-right: 4px; }
.plan--highlight {
    border: 2px solid var(--primary); transform: translateY(-6px);
    box-shadow: 0 16px 40px -20px rgba(67,56,202,.4);
}
.plan-badge {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    background: var(--primary); color: #fff; font-weight: 600; font-size: 12px; margin-bottom: 8px;
}

.pricing-fineprint { margin-top: 56px; }
.pricing-fineprint h4 { margin: 0 0 12px; }
.pricing-fineprint ul { color: var(--ink-2); padding-left: 20px; }

/* -------------------------------------------------------------------------- */
/* CTA box                                                                    */
/* -------------------------------------------------------------------------- */
.cta-box {
    background: var(--ink);
    color: #fff;
    border-radius: 24px;
    padding: 56px;
    text-align: center;
    background: linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#5b21b6 100%);
}
.cta-box h2 { font-size: 32px; margin: 0 0 8px; }
.cta-box p { color: rgba(255,255,255,.78); margin: 0 0 24px; }
.cta-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cta-box .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.cta-box .btn--ghost:hover { background: rgba(255,255,255,.1); }

/* -------------------------------------------------------------------------- */
/* Download                                                                   */
/* -------------------------------------------------------------------------- */
.download-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-bottom: 56px; }
@media (max-width: 800px) { .download-grid { grid-template-columns: 1fr; } }
.download-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 32px;
}
.download-card--main {
    background: linear-gradient(135deg,#fefefe 0%,#eef2ff 100%);
    border-color: var(--primary-3);
}
.download-card h3 { margin: 0 0 6px; font-size: 22px; }
.download-meta { padding-left: 18px; color: var(--ink-2); font-size: 14px; margin-top: 16px; }
.download-meta li { margin-bottom: 4px; }
.download-meta code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-size: 12px; }

.download-fineprint h4 { margin: 24px 0 8px; }
.download-fineprint ul, .download-fineprint ol {
    color: var(--ink-2); padding-left: 22px;
}
.download-fineprint li { margin-bottom: 4px; }
.download-fineprint code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-family: Consolas, monospace; font-size: 13px; }

/* -------------------------------------------------------------------------- */
/* Docs                                                                       */
/* -------------------------------------------------------------------------- */
.docs-grid { display: grid; grid-template-columns: 220px 1fr; gap: 48px; }
.docs-toc { position: sticky; top: 100px; align-self: start; }
.docs-toc h4 { margin: 0 0 12px; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li { margin: 6px 0; }
.docs-toc a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.docs-toc a:hover { color: var(--primary); }

/* Mobile: collapse the docs sidebar into a single column and drop the sticky
   pin — otherwise the TOC stays floating at the top while the article scrolls
   underneath it, which on a phone reads as a broken overlay. The TOC becomes
   a normal block at the top of the page (still tappable anchor links). */
@media (max-width: 800px) {
    .docs-grid { grid-template-columns: 1fr; gap: 24px; }
    .docs-toc  { position: static; top: auto; }
}

.prose h2 { margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 28px; font-size: 17px; }
.prose ul, .prose ol { padding-left: 22px; color: var(--ink-2); }
.prose li { margin-bottom: 6px; }
.prose code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-family: Consolas, monospace; font-size: 13px; }
.prose kbd {
    background: #fff; border: 1px solid var(--line-2); border-bottom-width: 2px;
    border-radius: 4px; padding: 1px 6px;
    font-family: Consolas, monospace; font-size: 12px; color: var(--ink);
}

/* Definition list used in /docs to explain dialog fields side-by-side with
   their meaning. Inline label-value pairs on desktop, stacked on phones. */
.docs-fields {
    display: grid; grid-template-columns: 180px 1fr;
    gap: 10px 20px; margin: 16px 0 24px;
}
.docs-fields dt {
    font-weight: 700; color: var(--ink);
    padding-top: 2px;
}
.docs-fields dd {
    margin: 0; color: var(--ink-2);
    border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.docs-fields dt { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.docs-fields dt:last-of-type,
.docs-fields dd:last-of-type { border-bottom: 0; }
@media (max-width: 720px) {
    .docs-fields { grid-template-columns: 1fr; gap: 4px; }
    .docs-fields dt { border-bottom: 0; padding-bottom: 0; padding-top: 14px; }
    .docs-fields dt:first-of-type { padding-top: 0; }
}

/* -------------------------------------------------------------------------- */
/* Contact                                                                    */
/* -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form { padding: 32px; display: grid; gap: 16px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { font-size: 14px; font-weight: 600; color: var(--ink-2); display: grid; gap: 6px; }
.contact-form input, .contact-form textarea {
    border: 1px solid var(--line-2); border-radius: 8px; padding: 11px 14px;
    font: inherit; color: var(--ink); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
/* Honeypot — moved off-screen rather than display:none so script bots that
   skip hidden inputs still see it as a regular field and fill it in. */
.contact-hp {
    position: absolute; left: -10000px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

.contact-info { padding: 24px 0; }
.contact-info h3 { margin: 0 0 8px; }
.contact-info hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.contact-info ul { padding-left: 22px; color: var(--ink-2); }
.contact-info code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-family: Consolas, monospace; font-size: 13px; }

.form-error {
    margin: 0; padding: 12px 14px; background: #fef2f2; border-left: 3px solid var(--danger);
    color: #991b1b; border-radius: 6px;
}
/* Aggregated per-field validation messages, rendered right under the flash
   banner so the user sees every rule that tripped at once, not just the one
   we surfaced in the banner. */
.form-error-list {
    margin: 0; padding: 12px 14px 12px 32px;
    background: #fef2f2; border-left: 3px solid var(--danger);
    color: #991b1b; border-radius: 6px;
    font-size: 14px; line-height: 1.55;
}
.form-error-list li { margin: 2px 0; }
/* Per-input inline error, rendered as the last child of <label> so it
   appears directly below the offending field. Smaller + red. */
.field-error {
    display: block; margin-top: 4px;
    color: #b91c1c; font-size: 12px; font-weight: 500;
}
.form-fine { font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* -------------------------------------------------------------------------- */
/* Flash messages                                                             */
/* -------------------------------------------------------------------------- */
.flash {
    margin-top: 16px; padding: 12px 16px; border-radius: 8px;
    border-left: 3px solid;
}
.flash--success { background: #f0fdf4; border-color: var(--success); color: #14532d; }
.flash--error   { background: #fef2f2; border-color: var(--danger);  color: #991b1b; }

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
.footer {
    background: var(--bg-dark); color: #94a3b8;
    padding: 64px 0 32px; margin-top: 96px;
}
.footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px;
    margin-bottom: 32px;
}
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
@media (max-width: 800px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .footer-grid { grid-template-columns: 1fr; } }

/* External-links row — single line under the main footer columns, separated
   from the copyright row by its own thin divider so the references read as
   their own block. Wraps to multiple lines on narrow screens. */
.footer-links {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
    padding: 16px 0;
    border-top: 1px solid #1e293b;
    font-size: 14px;
}
.footer-links__label { color: #cbd5e1; font-weight: 600; }
.footer-links a       { color: #94a3b8; }
.footer-links a:hover { color: #fff; }
.footer h4 { color: #cbd5e1; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 16px; }
.footer ul { padding: 0; margin: 0; list-style: none; }
.footer li { margin-bottom: 8px; }
.footer a { color: #94a3b8; }
.footer a:hover { color: #fff; }
.footer-tag { font-size: 14px; max-width: 280px; line-height: 1.6; margin-top: 12px; }
.footer-bottom {
    border-top: 1px solid #1e293b; padding-top: 24px;
    display: flex; justify-content: space-between; font-size: 13px;
}
@media (max-width: 600px) {
    .footer-bottom { flex-direction: column; gap: 6px; }
}

/* -------------------------------------------------------------------------- */
/* Screenshot showcase rows (Designer / Tisková stanice / Data)              */
/* -------------------------------------------------------------------------- */
.shot-grid {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center;
}
.shot-grid--reverse .shot-text { order: 2; }
.shot-grid--reverse .shot-figure { order: 1; }
@media (max-width: 960px) {
    .shot-grid, .shot-grid--reverse {
        grid-template-columns: 1fr; gap: 40px;
    }
    .shot-grid--reverse .shot-text,
    .shot-grid--reverse .shot-figure { order: initial; }
}

/* Stacked variant — title + bullets first, screenshot underneath. Used on
   the Print Station section so the headline is the first thing the eye
   lands on, and the wide screenshot can take the full content width
   without competing with the copy for visual weight. */
.shot-stack {
    display: flex; flex-direction: column; gap: 32px;
    max-width: 920px; margin: 0 auto;
}
.shot-stack .shot-figure img { width: 100%; }

.shot-text h2 {
    font-size: 32px; line-height: 1.15; letter-spacing: -.02em;
    margin: 12px 0 16px;
}
.shot-text p { color: var(--ink-2); font-size: 17px; line-height: 1.6; margin: 0 0 20px; }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.check-list li {
    position: relative; padding-left: 28px;
    color: var(--ink-2); line-height: 1.5;
}
.check-list li::before {
    content: ''; position: absolute; left: 0; top: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(99,102,241,.15);
}
.check-list li::after {
    content: ''; position: absolute; left: 5px; top: 11px;
    width: 7px; height: 4px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
}
.check-list code {
    background: #f1f5f9; padding: 1px 6px; border-radius: 4px;
    font-family: Consolas, monospace; font-size: 13px;
}

/* Negative variant: red X instead of indigo check. Used for the
   "what competitors do" column in the BarTender / NiceLabel comparison so
   readers see at a glance which side is the trade-off. */
.check-list--cross li::before {
    background: rgba(239,68,68,.15);
}
.check-list--cross li::after {
    /* Strike-through cross built from two rotated rectangles. */
    left: 6px; top: 10px; width: 8px; height: 8px;
    border: 0; transform: none;
    background:
        linear-gradient(45deg,  transparent 42%, var(--danger) 42% 58%, transparent 58%),
        linear-gradient(-45deg, transparent 42%, var(--danger) 42% 58%, transparent 58%);
}

/* Comparison cards (vs. BarTender / NiceLabel). The "ours" variant gets a
   subtle gradient frame so the eye lands there first. */
.compare { gap: 24px; align-items: stretch; }
.compare-card { display: flex; flex-direction: column; }
.compare-card h3 { font-size: 18px; margin: 0 0 14px; color: var(--muted); }
.compare-card--ours {
    border-color: transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--primary), var(--primary-2)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 24px 48px -28px rgba(99,102,241,.45);
}
.compare-card--ours h3 { color: var(--primary); }

/* Detailed comparison table that follows the two compare cards. Mobile
   layout collapses to a horizontal scroll wrapper rather than re-stacking,
   since the three-column matrix is easier to read in one row. */
.compare-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.4;
}
.compare-table th,
.compare-table td {
    text-align: left;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    vertical-align: middle;
}
.compare-table th:last-child,
.compare-table td:last-child { border-right: none; }
.compare-table thead th {
    background: #f1f5f9;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding-top: 14px;
    padding-bottom: 14px;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:nth-child(even) td { background: #fafbfd; }
.compare-table tbody td:first-child { font-weight: 600; color: var(--ink); }
.compare-table td.yes {
    color: #16a34a;
    font-weight: 800;
    font-size: 20px;
    text-align: center;
    width: 140px;
}
.compare-table th:nth-child(2) { text-align: center; width: 140px; }
.compare-table tbody td:last-child { color: var(--ink-2); }

/* ===========================================================================
   Editions comparison — 5-column table on /pricing.
   Categorized rows (compare-section) replicate BarTender-style grouping;
   narrower yes/no cells fit four edition columns at once.
   =========================================================================== */
.compare-section-heading {
    margin: 64px 0 18px;
    text-align: center;
}
.compare-section-heading h2 {
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--ink);
}
.compare-section-heading p { margin: 0 auto; max-width: 640px; }

.compare-table-wrap--editions {
    margin-top: 0;
}
.compare-table--editions {
    font-size: 14px;
}
.compare-table--editions th,
.compare-table--editions td {
    padding: 12px 14px;
}
.compare-table--editions thead th {
    text-align: center;
    font-size: 13px;
}
.compare-table--editions thead th:first-child { text-align: left; }
.compare-table--editions thead th .th-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-2);
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0;
}

/* Override generic .yes width / centering so all four edition columns
   line up as equal-width centred ticks; left-most "feature" column flexes. */
.compare-table--editions th:nth-child(2),
.compare-table--editions th:nth-child(3),
.compare-table--editions th:nth-child(4),
.compare-table--editions th:nth-child(5),
.compare-table--editions td:nth-child(2),
.compare-table--editions td:nth-child(3),
.compare-table--editions td:nth-child(4),
.compare-table--editions td:nth-child(5) {
    text-align: center;
    width: 110px;
}
.compare-table--editions td.yes {
    font-size: 18px;
    width: 110px;
}
.compare-table--editions td.no {
    color: #94a3b8;
    font-weight: 600;
    text-align: center;
    width: 110px;
}
.compare-table--editions tbody td:last-child { color: var(--ink); }

/* Highlight the Pro column — it's the recommended edition (matches the
   "Nejoblíbenější" pill on the plan cards above the table). */
.compare-table--editions thead th:nth-child(4) {
    background: #eef2ff;
    color: var(--primary);
}
.compare-table--editions tbody td:nth-child(4) {
    background: #f7f9ff;
}
.compare-table--editions tbody tr:nth-child(even) td:nth-child(4) {
    background: #eef2fb;
}

/* Category section rows — grouped header that spans all 5 columns. */
.compare-table--editions tr.compare-section th {
    background: #0f172a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 10px 16px;
    text-align: left;
    border-right: none;
}
.compare-table--editions tr.compare-section + tr td { border-top: none; }

/* Long-form legal pages — license terms, business terms, GDPR. Constrains
   width and tightens hierarchy so the wall of legal copy stays readable. */
.legal { max-width: 820px; }
.legal h2 {
    font-size: 22px;
    margin: 36px 0 12px;
    color: var(--ink);
    letter-spacing: -.01em;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
    font-size: 17px;
    margin: 20px 0 6px;
    color: var(--ink);
}
.legal p { margin: 0 0 12px; line-height: 1.65; }
.legal ul { margin: 0 0 16px 22px; line-height: 1.65; }
.legal li { margin-bottom: 4px; }
.legal .muted { font-size: 13px; color: var(--muted); }

/* Side callout used in the "lifetime license" section to render a quick
   price card next to the explanatory text. Inherits .shot-text--callout
   for sizing the column. */
.shot-text--callout {
    display: grid; place-items: center; align-content: center;
}
.price-callout {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 32px;
    width: 100%; max-width: 340px;
    box-shadow: 0 20px 40px -24px rgba(15,23,42,.18);
}
.price-callout hr {
    border: 0; border-top: 1px solid var(--line); margin: 18px 0;
}
.price-callout-label {
    font-size: 12px; font-weight: 700;
    color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
}
.price-callout-price {
    font-size: 24px; font-weight: 700; color: var(--ink);
    letter-spacing: -.01em; line-height: 1.2; margin-top: 4px;
}
.price-callout-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

.shot-figure {
    margin: 0; display: grid; gap: 12px;
}
.shot-figure img {
    width: 100%; height: auto; border-radius: 14px;
    box-shadow: var(--shadow-lg);
    background: #fff;
}
.shot-figure figcaption {
    font-size: 13px; color: var(--muted);
    text-align: center; padding: 0 12px;
}

/* Centered variant — used when the figure is a single small asset (e.g. the
   Android launcher icon) rather than a full UI screenshot. The icon is the
   only real asset we have for the mobile client; centring it avoids the
   stretched-screenshot look that .shot-figure img defaults to. */
.shot-figure--centered { justify-items: center; align-content: center; }
.shot-figure--centered img {
    width: auto; box-shadow: none; background: transparent;
}

.download-figure {
    margin: 56px auto; max-width: 720px; text-align: center;
}
.download-figure img {
    width: 100%; height: auto; border-radius: 14px;
    box-shadow: var(--shadow);
}
.download-figure figcaption {
    font-size: 13px; color: var(--muted); margin-top: 10px;
}

.docs-figure {
    margin: 24px 0 32px;
}
.docs-figure img {
    width: 100%; height: auto; border-radius: 10px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}

kbd {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    background: #f1f5f9; border: 1px solid #cbd5e1;
    font-family: Consolas, monospace; font-size: 12px;
    box-shadow: 0 1px 0 #94a3b8;
}

/* =============================================================================
   Mobile / responsive
   The site has many per-component breakpoints above; this block centralises
   the cross-cutting tweaks (topbar drawer, type scale, spacing scale, table
   overflow) so future tweaks land in one place.
   ============================================================================= */

/* Hamburger button — invisible on desktop, visible at <=900px. */
.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff;
    flex-direction: column; gap: 4px; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
}
.nav-toggle span {
    display: block; width: 20px; height: 2px;
    background: var(--ink); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Tables that escape their column on narrow screens — wrap in scroll-x.
   Markup-side: <div class="table-wrap"><table class="data-table">…</table></div> */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
    .container { padding: 0 18px; }

    /* Topbar on mobile: drop sticky entirely. Mobile Chrome on Android keeps
       the topbar as its own compositor layer (because of the desktop CSS
       `backdrop-filter`), and even after we switch backdrop-filter off the
       sticky element keeps painting over the article during scroll — text
       proudí pod ním. Samsung Internet doesn't have this bug; Chrome does.
       `position: relative` removes sticky behaviour (the header scrolls
       away with the page) while preserving the containing-block role so the
       mobile drawer (`.topbar-nav` with `position: absolute`) anchors to the
       topbar and slides down underneath it instead of disappearing into the
       body root. */
    .topbar {
        position: relative;
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Topbar collapses into a slide-down drawer. */
    .topbar-inner { height: 60px; gap: 12px; }
    .nav-toggle { display: inline-flex; }
    .topbar-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        background: rgba(255,255,255,.98);
        backdrop-filter: saturate(180%) blur(12px);
        border-bottom: 1px solid var(--line);
        flex-direction: column; gap: 0; align-items: stretch;
        padding: 8px 18px 18px;
        box-shadow: 0 16px 32px -16px rgba(15,23,42,.18);
        max-height: 0; overflow: hidden; opacity: 0;
        transition: max-height .25s ease, opacity .15s ease, padding .25s ease;
        pointer-events: none;
    }
    .topbar-nav.is-open {
        max-height: calc(100vh - 60px); opacity: 1; pointer-events: auto;
    }
    .topbar-nav a {
        padding: 14px 4px; border-bottom: 1px solid var(--line);
        font-size: 16px;
    }
    .topbar-nav a:last-child { border-bottom: 0; }
    .topbar-nav a.is-active::after { display: none; }
    .topbar-nav a.topbar-cta {
        margin-top: 8px; align-self: flex-start;
        padding: 14px 28px;
    }
    body.nav-open { overflow: hidden; }

    /* Sections — tighten the generous desktop spacing on phones. */
    .section { padding: 56px 0; }
    .section--cta { padding: 40px 0 64px; }
    .section-title { font-size: 30px; }
    .section-sub { margin-bottom: 32px; }

    .hero { padding: 48px 0 64px; }
    .hero-art { min-height: 240px; }
    .hero-shot, .hero-screen { transform: none; }

    .page-hero { padding: 48px 0 32px; }
    .page-hero h1 { font-size: 32px; }

    .cta-box { padding: 36px 24px; border-radius: 18px; }
    .cta-box h2 { font-size: 26px; }

    /* Forms with two-up rows stack to single column. */
    .contact-form .form-row { grid-template-columns: 1fr; }

    /* Footer — left-align bottom row instead of justifying it. */
    .footer { padding: 48px 0 24px; margin-top: 64px; }
    .footer-grid { gap: 24px; margin-bottom: 28px; }
}

@media (max-width: 600px) {
    .container { padding: 0 14px; }

    .section { padding: 40px 0; }
    .section-title { font-size: 24px; letter-spacing: -.01em; }
    .section-sub { font-size: 15px; }

    .hero-text h1 { font-size: 32px; }
    .lead { font-size: 16px; }

    .page-hero h1 { font-size: 26px; }

    .cta-box { padding: 28px 18px; }
    .cta-box h2 { font-size: 22px; }
    .cta-box p { font-size: 14px; }

    .btn--lg { padding: 12px 18px; font-size: 15px; }
    .hero-cta .btn { flex: 1 1 auto; }

    /* Plan highlight — drop the lifted offset so the layout doesn't look broken. */
    .plan--highlight { transform: none; }

    /* Cards — slightly less padding on phones. */
    .card, .feature, .plan { padding: 22px; }

    /* Token / code blocks — keep readable on narrow screens. */
    code, kbd { word-break: break-word; }

    /* Auth layout — comfortable touch targets and full-bleed card. */
    .auth-card { padding: 28px 22px; max-width: none; }
}

/* Don't rotate the hero artwork on touch devices — it tends to overflow.
   The :hover hook is desktop-only anyway and looks awkward on tap. */
@media (hover: none) {
    .hero-shot, .hero-screen { transform: none; }
}

/* =============================================================================
   Cookie consent banner
   Pinned to the bottom of the viewport on every public layout. Hidden by
   default (the JS in views/partials/cookie-banner.php toggles `hidden`).
   ============================================================================= */
.cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px;
    z-index: 100;
    background: #0f172a; color: #e2e8f0;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 30px 60px -20px rgba(15,23,42,.55), 0 0 0 1px rgba(99,102,241,.25);
    font-size: 14px; line-height: 1.55;
    max-width: 920px; margin-left: auto; margin-right: auto;
    animation: cookie-slide-up .25s ease-out;
}
@keyframes cookie-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
    display: flex; align-items: center; gap: 20px;
    flex-wrap: wrap;
}
.cookie-banner__text { flex: 1 1 320px; min-width: 240px; }
.cookie-banner__text strong { color: #fff; display: block; margin-bottom: 4px; font-size: 15px; }
.cookie-banner__text p { margin: 0; color: #cbd5e1; }
.cookie-banner__text a { color: #a5b4fc; text-decoration: underline; }
.cookie-banner__text a:hover { color: #c7d2fe; }

.cookie-banner__actions {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.cookie-banner__btn {
    border: 0; cursor: pointer; padding: 10px 18px;
    border-radius: 8px; font: inherit; font-weight: 600;
    transition: background .15s, color .15s, transform .08s;
}
.cookie-banner__btn:active { transform: scale(.98); }
.cookie-banner__btn--primary {
    background: #6366f1; color: #fff;
}
.cookie-banner__btn--primary:hover { background: #818cf8; }
.cookie-banner__btn--ghost {
    background: transparent; color: #e2e8f0;
    border: 1px solid rgba(226,232,240,.35);
}
.cookie-banner__btn--ghost:hover { background: rgba(226,232,240,.08); }

@media (max-width: 640px) {
    .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
    .cookie-banner__inner { gap: 14px; }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__btn { flex: 1 1 auto; }
}

/* Footer-level "Manage cookies" link styled as inline button. */
.cookie-trigger {
    background: none; border: 0; color: inherit; cursor: pointer;
    font: inherit; padding: 0; text-align: left;
    text-decoration: underline;
}
.cookie-trigger:hover { color: #fff; }

/* =============================================================================
   Error pages (404 / 403). Rendered through the standard public layout so the
   header/footer/menu is intact. `error-page__code` is the oversized numeric
   badge; the CTAs wrap for narrow viewports.
   ============================================================================= */
.error-page {
    padding: 96px 0 120px;
    text-align: center;
}
.error-page__wrap {
    max-width: 640px;
    margin: 0 auto;
}
.error-page__code {
    font-size: clamp(120px, 22vw, 200px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -6px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 16px;
}
.error-page__h {
    font-size: 32px;
    margin: 0 0 12px;
}
.error-page__lead {
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.55;
    margin: 0 0 32px;
}
.error-page__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* =============================================================================
   Admin / portal — separate visual language but inherits primitives above.
   ============================================================================= */