/* GrataQ marketing site — plain CSS, mobile-first.
   Tokens mirror the WPF client + SPA upload palette
   (Dokumenty/app-palette.md) so visitors see one product across
   www.grataq.com, send.grataq.com and the desktop client.
   Light is the default; dark applies via prefers-color-scheme or an
   explicit data-theme="dark" override (set by app.js). */

:root {
  --bg: #F5F5FA;
  --surface: #FFFFFF;
  --surface-hover: #EDEDF4;
  --text: #2D2E33;
  --muted: #5C5E66;
  --accent: #8B5CF6;
  --accent-hover: #A78BFA;
  --accent-pressed: #7C3AED;
  --on-accent: #F5F5FA;
  --success: #059669;
  --warning: #D97706;
  --error: #DC2626;
  --border: #E0E0EA;
  --border-strong: #C0C0D0;

  --container: 1100px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(15, 15, 30, 0.04), 0 8px 24px rgba(15, 15, 30, 0.06);

  /* Theme-aware glyph/eyebrow accent, status-chip tint, use-case sector
     colors — overridden brighter in the dark blocks below for legibility. */
  --accent-icon: #8B5CF6;
  --status-tint: 20%;
  --uc-health: #2563EB;
  --uc-arch: #EA580C;
  --uc-law: #B45309;
  --uc-gov: #4338CA;
  --uc-insur: #0F766E;
  --uc-hr: #BE185D;
  --flow-sender: #DC2626;
  --flow-recipient: #059669;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1E2E;
    --surface: #2A2A3E;
    --surface-hover: #34344A;
    --text: #E8E8F0;
    --muted: #9090A8;
    --accent: #8B5CF6;
    --accent-hover: #A78BFA;
    --accent-pressed: #7C3AED;
    --on-accent: #F5F5FA;
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --border: #3F3F5A;
    --border-strong: #565676;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --accent-icon: #A78BFA;
    --status-tint: 30%;
    --uc-health: #60A5FA;
    --uc-arch: #FB923C;
    --uc-law: #FBBF24;
    --uc-gov: #818CF8;
    --uc-insur: #2DD4BF;
    --uc-hr: #F472B6;
    --flow-sender: #F87171;
    --flow-recipient: #34D399;
  }
}

:root[data-theme="dark"] {
  --bg: #1E1E2E;
  --surface: #2A2A3E;
  --surface-hover: #34344A;
  --text: #E8E8F0;
  --muted: #9090A8;
  --accent: #8B5CF6;
  --accent-hover: #A78BFA;
  --accent-pressed: #7C3AED;
  --on-accent: #F5F5FA;
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --border: #3F3F5A;
  --border-strong: #565676;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --accent-icon: #A78BFA;
  --status-tint: 30%;
  --uc-health: #60A5FA;
  --uc-arch: #FB923C;
  --uc-law: #FBBF24;
  --uc-gov: #818CF8;
  --uc-insur: #2DD4BF;
  --uc-hr: #F472B6;
  --flow-sender: #F87171;
  --flow-recipient: #34D399;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

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

::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); }

/* ===== Layout primitives ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section { padding: 5rem 0; }
.section--tight { padding: 3.5rem 0; }
.section--alt { background: var(--surface); }

.section__head {
  max-width: 44rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.section__eyebrow {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-icon);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px;
}

.section__title {
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.section__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 1rem auto 0;
  background: var(--accent);
  border-radius: 2px;
}

.section__head--left { text-align: left; margin-left: 0; }
.section__head--left .section__title::after { margin-left: 0; }

.section__lead {
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
}

/* ===== Top nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 64px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.nav__brand:hover { text-decoration: none; }

.nav__logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.nav__links {
  display: none;
  gap: 1.75rem;
  font-size: 0.95rem;
}

.nav__links a {
  color: var(--muted);
  font-weight: 500;
}
.nav__links a:hover { color: var(--text); text-decoration: none; }

/* Controls cluster pinned to the right; brand + links group on the left. */
.nav__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

@media (min-width: 48rem) {
  .nav__links { display: inline-flex; }
}

/* Wider brand↔links gap once there's room for it; the 48–64rem band keeps
   links tight to avoid overflow. */
@media (min-width: 64rem) {
  .nav__inner { gap: 2rem; }
}

/* Theme toggle — single icon, monochrome (currentColor SVG). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  line-height: 0;
}
.icon-btn:hover { background: var(--surface-hover); }
.icon-btn svg { width: 1rem; height: 1rem; display: block; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
.btn:hover { background: var(--surface-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--primary:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--surface-hover); }

.btn--lg {
  padding: 0.95rem 1.5rem;
  font-size: 1.05rem;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 5rem 0 4.5rem;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__inner { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; }
}

/* Privacy seal — sunburst "no cookies / no tracking / no analytics" sticker
   in the brand purple, stamped into the top-right corner of the hero. */
.stamp {
  --stamp-light: #7c3aed;
  --stamp-dark: #6d28d9;
  --stamp-ink: #ffffff;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 3;
  width: 100px;
  height: 100px;
  transform: rotate(9deg);
  transition: transform 0.2s ease;
}
.stamp:hover { transform: rotate(9deg) scale(1.05); }
.stamp svg { width: 100%; height: 100%; display: block; }
.stamp__text {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* Below the two-column breakpoint the hero stacks and space is tight. */
@media (max-width: 59.99rem) {
  .stamp { display: none; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-icon);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px;
}

.hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

.hero__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero__title-accent { color: var(--accent-icon); }

.hero__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 1.25rem 0 0;
  background: var(--accent);
  border-radius: 2px;
}

.hero__lead {
  margin: 0 0 2rem;
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 36rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Trust badges below the CTAs — styled as pills (border + topic icon) so
   they read as credentials, NOT as a continuation of the green-check
   benefit bullets above the buttons. */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.hero__meta-icon {
  color: var(--accent-icon);
  width: 0.95rem; height: 0.95rem;
  flex-shrink: 0;
}

/* Hero visual — 3D illustration (PNG). The artwork carries its own light
   backdrop, so the visual floats on the hero without a card frame; a soft
   purple glow behind gives it lift. */
.hero__visual {
  position: relative;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  border-radius: 30%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 75%);
  z-index: -1;
  filter: blur(34px);
  opacity: 0.7;
  pointer-events: none;
}


/* ===== Problem section ===== */
.problem {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 48rem) {
  .problem { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.problem-card {
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.problem-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
  margin-bottom: 0.9rem;
}
.problem-card__icon svg { width: 1.15rem; height: 1.15rem; }

.problem-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.problem-card__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ===== How it works ===== */
.how {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  counter-reset: step;
  margin-top: 0;
}

@media (min-width: 48rem) {
  .how { grid-template-columns: repeat(3, 1fr); }
}

.how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.75rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  counter-increment: step;
}

.how-step__num {
  position: absolute;
  top: -14px;
  left: 1.5rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

.how-step__title {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.how-step__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.how-step__tag {
  display: inline-block;
  /* Pin to the bottom of the (stretched) card so all three tags align
     on one row regardless of how much body text each card has. */
  margin-top: auto;
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--accent-icon);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 4px;
}

/* ===== Trust grid ===== */
.trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 40rem) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .trust { grid-template-columns: repeat(3, 1fr); } }

.trust-card {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.trust-card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  transform: translateY(-2px);
}

.trust-card__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-icon);
}
.trust-card__icon svg { width: 1.25rem; height: 1.25rem; }

.trust-card__label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.trust-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.trust-card__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ===== Doc cards (security proof links) ===== */
.docs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 40rem) { .docs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .docs { grid-template-columns: repeat(4, 1fr); } }

.doc-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.doc-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-2px);
  text-decoration: none;
}

.doc-card__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-icon);
}
.doc-card__icon svg { width: 1.15rem; height: 1.15rem; }

.doc-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}

.doc-card__body {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.doc-card__cta {
  margin: 0;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-icon);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.doc-card__cta-arrow { font-size: 1rem; line-height: 0; }

/* Pending-doc state: muted indicator until the linked artefact is ready. */
.doc-card[data-status="pending"] .doc-card__cta {
  color: var(--muted);
}

.doc-card__badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: 999px;
}

/* ===== Use cases ===== */
.usecases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 56rem) { .usecases { grid-template-columns: repeat(3, 1fr); } }

.usecase {
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-top: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.usecase__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-icon);
}
.usecase__icon svg { width: 1.4rem; height: 1.4rem; }

.usecase__role {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.usecase__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.usecase__quote {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  font-style: italic;
}

.usecase__quote::before { content: "\201E"; color: var(--accent-icon); margin-right: 0.1rem; }
.usecase__quote::after { content: "\201C"; color: var(--accent-icon); margin-left: 0.05rem; }

.usecase__detail {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ===== CTA bar ===== */
.cta {
  position: relative;
  margin: 0 auto;
  max-width: calc(var(--container) - 2rem);
  padding: 3rem 2rem;
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent-pressed) 35%, transparent), transparent 55%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  text-align: center;
  overflow: hidden;
}

.cta__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.cta__lead {
  margin: 0 auto 1.75rem;
  max-width: 36rem;
  color: var(--muted);
}

.cta__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ===== Footer ===== */
.footer {
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__brand-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
}

.footer__brand-logo {
  width: 28px; height: 28px; border-radius: 6px;
}

.footer__tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 22rem;
}

.footer__col h4 {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.95rem;
}

.footer__col a {
  color: var(--text);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

.footer__bottom a { color: var(--muted); }
.footer__bottom a:hover { color: var(--text); }

/* ===== Diagram figures =====
   External SVG diagrams (public/img/*.svg) loaded via <img>. SVGs carry
   their own embedded @media (prefers-color-scheme: dark) rules so the
   diagram matches the system theme without us having to inline the SVG. */
.diagram-figure {
  margin: 2rem auto 0;
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.diagram-figure__frame {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.diagram-figure__img {
  width: 100%;
  height: auto;
  display: block;
}

.diagram-figure__caption {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.diagram-figure__caption strong { color: var(--text); }

/* Stacked diagram + screenshot inside the same explainer block. */
.explain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 64rem) {
  .explain-grid--2 { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Screenshot figure. The base style frames a real screenshot (subtle solid
   border, image + muted caption below). The --placeholder modifier — used
   only until the PNG is dropped in — shows a dashed accent slot with
   instruction text. */
.shot {
  position: relative;
  display: block;
  margin: 0;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.shot__img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-sm);
}

.shot__label {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-icon);
}

.shot__caption {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

.shot__hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.shot--placeholder {
  display: grid;
  place-items: center;
  padding: 1rem;
  min-height: 220px;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* ===== Reveal-on-scroll (subtle) =====
   Default state: content is visible. The animation only kicks in when
   JavaScript is present (it sets html.js) and the user hasn't asked for
   reduced motion. Without JS, no class is added and .reveal stays as
   normal flow content — no blank page if app.js fails to load or is
   blocked. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ===== Visually hidden (skip link, sr-only) ===== */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.skip-link {
  position: absolute;
  left: 0;
  top: -100px;
  padding: 0.5rem 0.75rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: 0 0 6px 0;
  transition: top 0.15s ease;
  z-index: 100;
}
.skip-link:focus { top: 0; text-decoration: none; }

/* ===== Use-case cards as links (added) ===== */

/* ===== KYC callout on home (added) ===== */

/* ===== Subpage helpers (added) ===== */


@media (min-width: 48rem) { .cols-2 { grid-template-columns: 1fr 1fr; } }

/* Boundary card on the KYC page (JE / NENÍ) — reuses trust-card look */

/* ===== Hero flow diagram (replaces the cipher panel) ===== */
.flow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 8%, transparent);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0.5rem;
}
.flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
  padding: 0.6rem 0.3rem;
}
.flow__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-icon);
  display: grid;
  place-items: center;
}
.flow__icon svg { width: 1.6rem; height: 1.6rem; }
.flow__node--server .flow__icon {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}
.flow__label {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.flow__title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.2;
}
.flow__detail {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.3;
}
.flow__blob {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent-icon);
  letter-spacing: -0.05em;
}
.flow__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--accent-icon);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 3rem;
  padding-top: 1.7rem;
}
.flow__arrow-text { white-space: nowrap; color: var(--muted); }
.flow__arrow svg { width: 100%; max-width: 3rem; }

@media (max-width: 34rem) {
  .flow { grid-template-columns: 1fr; gap: 0.25rem; padding: 1.25rem 0.75rem; }
  .flow__arrow { padding: 0.4rem 0; min-width: 0; }
  .flow__arrow svg { transform: rotate(90deg); max-width: 1.5rem; }
}

/* ===== Whitepaper summary list ===== */

/* Hero screenshot placeholder — větší, ať drží váhu vedle copy */

/* ===== Hero illustration (PNG art) ===== */
.hero-art {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===== Rich flow diagram (Jak to funguje) ===== */
.flow--detailed {
  padding: 2rem 1.25rem;
  gap: 0.5rem;
}
.flow--detailed .flow__node {
  gap: 0.7rem;
  padding: 0.5rem 0.25rem;
}
.flow--detailed .flow__icon {
  width: 3.75rem;
  height: 3.75rem;
}
.flow--detailed .flow__icon svg { width: 1.75rem; height: 1.75rem; }

/* Document state preview (above the icon) */
.flow__doc {
  width: 100%;
  max-width: 8rem;
  min-height: 5.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 6%, transparent);
}
.flow__doc--blob {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
}
.flow__doc-bar {
  height: 5px;
  border-radius: 2px;
  background: var(--muted);
  opacity: 0.5;
}
.flow__doc-bar--head { height: 6px; opacity: 0.7; width: 70%; }
.flow__doc-bar--text { opacity: 0.35; }
.flow__doc-bar--short { width: 50%; }
.flow__doc-bar--med { width: 75%; }
.flow__doc-bar--blob {
  background: var(--accent);
  opacity: 0.85;
  border-radius: 1px;
}

/* Actions list */
.flow__actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}
.flow__actions li::before {
  content: "·";
  color: var(--accent-icon);
  font-weight: 700;
  margin-right: 0.35rem;
}

.flow__algo {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-icon);
  /* Pin chip to the bottom of the (stretched) node so all three chips
     align on one row regardless of how the action list wraps. */
  margin-top: auto;
}

/* On mobile, rich flow stacks like the original */
@media (max-width: 38rem) {
  .flow--detailed { grid-template-columns: 1fr; gap: 0.5rem; }
  .flow--detailed .flow__doc { max-width: 14rem; margin: 0 auto; }
}

/* ===== Footer brand slogan ===== */
.footer__slogan {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}


/* ===== Use case icons — Styl 2: tónované pozadí per obor ===== */
.usecase--health .usecase__icon { background: color-mix(in srgb, #3B82F6 16%, var(--surface)); }
.usecase--arch   .usecase__icon { background: color-mix(in srgb, #F97316 16%, var(--surface)); }
.usecase--law    .usecase__icon { background: color-mix(in srgb, #D97706 18%, var(--surface)); }
.usecase--gov    .usecase__icon { background: color-mix(in srgb, #4F46E5 16%, var(--surface)); }
.usecase--insur  .usecase__icon { background: color-mix(in srgb, #0D9488 18%, var(--surface)); }
.usecase--hr     .usecase__icon { background: color-mix(in srgb, #DB2777 14%, var(--surface)); }


/* ===== How intro (between flow diagram and step cards) ===== */
.how-intro {
  text-align: center;
  margin: 3rem auto 1.75rem;
  max-width: 36rem;
}
.how-intro__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}
.how-intro__lead {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* ===== Extra body line in step cards ===== */
.how-step__body--extra {
  margin-top: 0.6rem;
  margin-bottom: 0.9rem; /* guaranteed gap above the bottom-pinned tag */
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  font-size: 0.9rem;
}

/* ===== Flow diagram — per-node colors ===== */
/* Sender — coral (warm, the start of the journey) */
.flow__node--sender .flow__icon {
  background: color-mix(in srgb, #F97373 18%, var(--surface));
  color: var(--flow-sender);
}
.flow__node--sender .flow__doc {
  background: color-mix(in srgb, #F97373 5%, var(--bg));
  border-color: color-mix(in srgb, #F97373 28%, var(--border));
}
.flow__node--sender .flow__actions li::before { color: var(--flow-sender); }
.flow__node--sender .flow__algo {
  background: color-mix(in srgb, #F97373 14%, transparent);
  color: var(--flow-sender);
}

/* Server — refined muted gray (passive carrier, sees nothing) */
.flow__node--server .flow__actions li::before { color: var(--muted); }
.flow__node--server .flow__algo {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}

/* Recipient — green (delivered, verified) */
.flow__node--recipient .flow__icon {
  background: color-mix(in srgb, #10B981 18%, var(--surface));
  color: var(--flow-recipient);
}
.flow__node--recipient .flow__doc {
  background: color-mix(in srgb, #10B981 5%, var(--bg));
  border-color: color-mix(in srgb, #10B981 28%, var(--border));
}
.flow__node--recipient .flow__actions li::before { color: var(--flow-recipient); }
.flow__node--recipient .flow__algo {
  background: color-mix(in srgb, #10B981 14%, transparent);
  color: var(--flow-recipient);
}

/* ===== Use case icons — Styl 3: plná barva per obor (override Style 2) ===== */
.usecase--health .usecase__icon { color: var(--uc-health); }
.usecase--arch   .usecase__icon { color: var(--uc-arch); }
.usecase--law    .usecase__icon { color: var(--uc-law); }
.usecase--gov    .usecase__icon { color: var(--uc-gov); }
.usecase--insur  .usecase__icon { color: var(--uc-insur); }
.usecase--hr     .usecase__icon { color: var(--uc-hr); }

/* ===== Comparison table (GrataQ vs běžné upload služby) =====
   Desktop: real <table> with 3 columns (dimension + them + us).
   Mobile (< 56rem): stacks into two cards per row, dimension label
   above each value via ::before content. */
.compare {
  margin-top: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.compare__table th,
.compare__table td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td {
  border-bottom: 0;
}

.compare__header th { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }

.compare__dim {
  font-weight: 700;
  color: var(--text);
  width: 22%;
  background: color-mix(in srgb, var(--muted) 6%, var(--surface));
}

.compare__col {
  width: 39%;
  vertical-align: bottom;
}

.compare__col-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}

.compare__col-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.25rem;
}

.compare__col--us .compare__col-label { color: var(--accent-icon); }
.compare__col--us .compare__col-sub { color: var(--accent-icon); opacity: 0.8; }

.compare__col--us { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.compare__cell--us { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.compare__cell--them { color: var(--muted); }

/* Specificity bump: .compare__table td has (0,1,1), so a plain
   .compare__cell (0,1,0) loses the padding-left fight. Pairing td with
   the class gets us (0,1,1) + the class beat in source order. */
.compare__table td.compare__cell {
  position: relative;
  padding-left: 3.1rem;
}

/* Round badge holding a centred SVG glyph. SVG is geometrically centred
   (unlike unicode ✓/✗/! which carry uneven font metrics), so the icon
   always sits dead-centre in the circle. */
.compare__icon {
  position: absolute;
  left: 1.1rem;
  top: 0.95rem;
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.compare__icon svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.compare__icon--ok { background: color-mix(in srgb, var(--success) var(--status-tint), transparent); color: var(--success); }
.compare__icon--warn { background: color-mix(in srgb, var(--warning) var(--status-tint), transparent); color: var(--warning); }
.compare__icon--bad { background: color-mix(in srgb, var(--error) var(--status-tint), transparent); color: var(--error); }
.compare__icon--neutral { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }

/* Mobile: each row becomes a stacked block with dimension header + 2 cells */
@media (max-width: 56rem) {
  .compare__table,
  .compare__table thead,
  .compare__table tbody,
  .compare__table tr,
  .compare__table th,
  .compare__table td { display: block; }

  .compare__table thead { display: none; }

  .compare__table tr {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--border);
  }

  .compare__dim {
    width: 100%;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border-bottom: 1px solid var(--border);
  }

  .compare__table td.compare__cell { padding: 1rem 1.1rem 1rem 3.1rem; }

  .compare__cell--them::before {
    content: "BĚŽNÉ SLUŽBY";
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 0.3rem;
  }
  .compare__cell--us::before {
    content: "GRATAQ";
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-icon);
    margin-bottom: 0.3rem;
  }

  .compare__icon { top: 2.05rem; }
}

/* ===== Per-provider comparison cards (replaces the 2-col table) =====
   Each provider gets a card with the same 5 dimensions; GrataQ is the
   featured card (accent border + tint). Inline status icons via an SVG
   sprite (#ic-ok / #ic-warn / #ic-bad). */
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 40rem) { .cmp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cmp-grid { grid-template-columns: repeat(3, 1fr); } }

.cmp-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem 1.35rem 1.1rem;
  box-shadow: var(--shadow);
}

.cmp-card--us {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow);
}

.cmp-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.cmp-card__name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cmp-card--us .cmp-card__name { color: var(--accent-icon); }

.cmp-card__tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cmp-card--us .cmp-card__tag {
  color: var(--accent-icon);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
}

.cmp-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cmp-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.cmp-row:last-child { border-bottom: 0; }

.cmp-ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
  border-radius: 50%;
}
.cmp-ic svg { width: 0.85rem; height: 0.85rem; display: block; }
.cmp-ic--ok { background: color-mix(in srgb, var(--success) var(--status-tint), transparent); color: var(--success); }
.cmp-ic--warn { background: color-mix(in srgb, var(--warning) var(--status-tint), transparent); color: var(--warning); }
.cmp-ic--bad { background: color-mix(in srgb, var(--error) var(--status-tint), transparent); color: var(--error); }

.cmp-row__text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
}
.cmp-row__dim {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.1rem;
}

.cmp-note {
  margin: 1.75rem auto 0;
  max-width: 48rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ===== Flow node illustration (hero-matched 3D motifs) =====
   Replaces the flat doc-mockup + line-icon with the same illustrated
   motifs used in the hero (plane / envelope+shield+lock / key+mailbox). */
.flow__art {
  width: 100%;
  max-width: 9.5rem;
  height: auto;
  display: block;
  margin: 0 auto 0.4rem;
}
.flow--detailed .flow__node { gap: 0.55rem; }

/* ===== Hero benefit bullets (scannable, replaces paragraph lead) ===== */
.hero__points {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 34rem;
}
.hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--text);
}
.hero__points svg {
  flex-shrink: 0;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.12rem;
  color: var(--success);
}

/* ===== App-view privacy reinforcement (ties hero chip "Nesledujeme uživatele") ===== */
.appview-note {
  margin: 2.25rem auto 0;
  max-width: 46rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
}
.appview-note strong { color: var(--text); }

/* ===== Comparison matrix (params × services in one table) ===== */
/* The comparison matrix is data-dense, so on desktop it gets a wider frame
   than the prose container — enough that all columns fit without horizontal
   scroll, including longer EN (and future locale) labels. The section heading
   stays capped at 44rem (.section__head), so only the table/legend widen. */
@media (min-width: 64rem) {
  #compare .container { max-width: 1240px; }
}

.matrix {
  margin-top: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.matrix__table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}
.matrix__table th,
.matrix__table td {
  padding: 0.85rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}
.matrix__table tbody tr:last-child th,
.matrix__table tbody tr:last-child td { border-bottom: 0; }

.matrix__table thead th {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.matrix__table thead th .matrix__sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Sticky first column (param names) for horizontal scroll */
.matrix__param,
.matrix__corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}
.matrix__param {
  text-align: left;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  box-shadow: 1px 0 0 var(--border);
}
.matrix__corner { box-shadow: 1px 0 0 var(--border); }

/* GrataQ highlighted column */
.matrix__us { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.matrix__table thead th.matrix__us {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent-icon);
}
.matrix__table thead th.matrix__us .matrix__sub { color: var(--accent-icon); opacity: 0.85; }

/* Cell: icon stacked over short label */
.matrix__cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
}
.matrix__lbl {
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}
.matrix__us .matrix__lbl { color: var(--text); font-weight: 600; }

/* Legend */
.matrix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: center;
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.matrix__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }

/* ============================================================
   SUBPAGES (cena / privacy / terms / dokumenty/*)
   Shared chrome (nav, footer, tokens) comes from the blocks above;
   the rules below add a compact page hero, readable prose, the
   pricing grid + currency toggle, a spec table and an FAQ.
   ============================================================ */

/* ----- Compact page hero (replaces the big home hero) ----- */
.page-hero {
  position: relative;
  padding: 3.5rem 0 2.25rem;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 40vw;
  max-width: 520px;
  height: 40vw;
  max-height: 520px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 50rem;
}
.page-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.page-hero__title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin: 1rem 0 0;
  background: var(--accent);
  border-radius: 2px;
}
.page-hero__lead {
  margin: 0;
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 42rem;
}
.page-hero__meta {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.page-hero__meta strong { color: var(--text); font-weight: 600; }

/* Breadcrumb-ish back link */
.page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.page-back:hover { color: var(--accent-icon); text-decoration: none; }
.page-back svg { width: 0.85rem; height: 0.85rem; }

/* ----- Readable prose (legal + docs) ----- */
.prose {
  max-width: 50rem;
  margin: 0 auto;
}
.prose > h2 {
  margin: 2.75rem 0 0.85rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  scroll-margin-top: 5rem;
}
.prose > h2:first-child { margin-top: 0; }
.prose > h3 {
  margin: 1.9rem 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 700;
  scroll-margin-top: 5rem;
}
.prose p,
.prose li {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
}
.prose p { margin: 0 0 1rem; }
.prose ul,
.prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.prose li::marker { color: var(--accent-icon); }
.prose a { color: var(--accent-icon); font-weight: 600; }
.prose strong { color: var(--text); font-weight: 700; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-icon);
  word-break: break-word;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}
.prose .lead {
  font-size: 1.1rem;
  color: var(--muted);
}

/* Callout box inside prose */
.callout {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.callout p:last-child { margin-bottom: 0; }
.callout__title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.callout--warn {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  border-left-color: var(--warning);
}
.callout--ok {
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  border-left-color: var(--success);
}

/* Status pills for "implemented vs planned" in the security docs */
.tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}
.tag--live { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); }
.tag--planned { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }

/* Table of contents card */
.toc {
  margin: 0 0 2.5rem;
  padding: 1.1rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.toc__title {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.95rem;
}
.toc a { color: var(--text); }
.toc a:hover { color: var(--accent-icon); text-decoration: none; }

/* Spec / data table (key lifecycle, server data, pricing limits) */
.spec-table-wrap {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 33rem;
}
.spec-table th,
.spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
}
.spec-table thead th {
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  white-space: nowrap;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody th {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.spec-table td { color: var(--muted); }
.spec-table code { white-space: nowrap; }

/* Threat-model "Hrozby a mitigace" table: row headers are full sentences,
   so the default nowrap on tbody th blew the first column out to ~75% and
   squeezed the (text-heavy) Mitigace column. Keep auto layout (never clips
   a header), just let the threat names wrap and nudge Mitigace widest. */
.spec-table--threats tbody th { white-space: normal; }
.spec-table--threats th:nth-child(3) { width: 42%; }

/* ----- Pricing ----- */
.pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
@media (min-width: 40rem) { .pricing { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .pricing { grid-template-columns: repeat(4, 1fr); } }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.price-card--featured {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow);
}
/* Floated above the card's top edge (out of flow) so the card bodies —
   name, tagline, price, CTA — align row-by-row across all four cards. */
.price-card__badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.7rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.price-card__name {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.price-card--featured .price-card__name { color: var(--accent-icon); }
.price-card__tagline {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  color: var(--muted);
  min-height: 2.4em;
}
.price-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.2rem;
}
.price-amount {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* "Pricing coming soon" placeholder shown in the price slot of paid tiers
   while the final amounts are pending (Store subscription pivot). Smaller +
   accent so it reads as a status, not a number. */
.price-amount--soon {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
}
/* Centered banner under the pricing hero explaining the prices are pending. */
.pricing-soon-note {
  max-width: 46rem;
  margin: 0 auto 2rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}
.price-period {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}
.price-card__vat {
  margin: 0 0 1.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  min-height: 1.2em;
}
.price-card__cta { margin-bottom: 1.25rem; }
.price-card__cta .btn { width: 100%; }
.price-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.price-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
}
.price-card__features svg {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.12rem;
  color: var(--success);
}
.price-card__features-head {
  margin: 0 0 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Currency toggle (segmented control, mirrors the theme toggle look) */
.ccy-toggle {
  display: inline-flex;
  padding: 0.2rem;
  gap: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ccy-toggle button {
  padding: 0.35rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.ccy-toggle button.is-active {
  background: var(--accent);
  color: var(--on-accent);
}
.pricing-controls {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Language switch (segmented control in the nav, mirrors .ccy-toggle).
   Emitted by the generator into .nav__actions; empty when only one LANG. */
.lang-switch {
  display: inline-flex;
  padding: 0.2rem;
  gap: 0.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.lang-switch a {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.lang-switch a:hover { color: var(--text); text-decoration: none; }
.lang-switch a.is-active,
.lang-switch a.is-active:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* ----- FAQ (native <details>, no JS) ----- */
.faq {
  max-width: 50rem;
  margin: 0 auto;
}
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent-icon);
  line-height: 1;
  transition: transform 0.15s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p {
  margin: 0 0 1.15rem;
  color: var(--muted);
  line-height: 1.65;
}