/* ==========================================================================
   ContextID landing page
   Mobile-first. Breakpoints: 768px (tablet), 1200px (desktop, designed at 1440px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts: self-hosted copies of the Google Fonts files, latin + latin-ext only.
   One variable woff2 per family, style and subset; weights are the ones the page
   uses. Licence and source: assets/fonts/OFL.txt.
   -------------------------------------------------------------------------- */

/* Instrument Sans, latin-ext */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Sans, latin */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter, latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter, latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono, latin-ext */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono, latin */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader, latin-ext */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader, latin */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader italic, latin-ext */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader italic, latin */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Onest, latin-ext */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Onest, latin */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (light theme of the design file) */
  --color-paper: #F5F3EE;
  --color-surface: #FFFFFF;
  --color-ink: #12201E;
  --color-text-secondary: #5D6663;
  --color-line: #DEDAD0;
  --color-primary: #0E5E56;
  --color-primary-hover: #0A4A44;
  --color-primary-soft: #E1EEEA;
  --color-on-primary: #FFFFFF;
  --color-on-primary-muted: #CFE6E0;
  --color-highlight: #F4C54A;
  --color-highlight-soft: #FBEBB8;
  --color-deny: #B5502F;
  --color-deny-soft: #F6E3DA;
  --color-ink-hover: #22302E;

  /* Accents used on dark surfaces */
  --color-primary-bright: #5CC4B4;
  --color-primary-mid: #3C8F84;
  --color-deny-bright: #E58A6B;

  /* Dark sections */
  --color-dark-surface: #1B2C29;
  --color-dark-line: #2E423E;
  --color-dark-pill: #22302E;
  --color-dark-connector: #3A4C48;
  --color-dark-text: #B7C0BC;
  --color-dark-text-muted: #9BA6A2;
  --color-dark-text-faint: #7F8B87; /* design: #6F7C78, lightened to reach 4.5:1 */

  /* Forms */
  --color-placeholder: #6E7673; /* design: #8A928F, darkened to reach 4.5:1 */

  /* Logo on dark backgrounds */
  --color-logo-body-dark: #34584F;
  --color-logo-text-dark: #ECEAE3;

  /* Product mock: neutral "AI chat" window */
  --chat-bg: #FFFFFF;
  --chat-titlebar: #F5F4F1;
  --chat-border: #E3E1DB;
  --chat-sidebar: #F7F6F3;
  --chat-item-active: #EAE8E2;
  --chat-bubble: #F0EFEB;
  --chat-avatar: #EDEBE5;
  --chat-tool: #FBFAF8;
  --chat-text: #1F2328;
  --chat-text-body: #33383F;
  --chat-text-soft: #4A4F57;
  --chat-text-meta: #6B6F76;
  --chat-text-group: #8A8F96;
  --chat-placeholder: #9A9EA5;
  --chat-light-red: #FF5F57;
  --chat-light-yellow: #FEBC2E;
  --chat-light-green: #28C840;

  /* Typography */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-logo: "Onest", "Instrument Sans", system-ui, sans-serif;
  --font-mock: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-22: 22px;
  --fs-23: 23px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;

  /* Responsive type roles (mobile values, overridden below) */
  --fs-hero: min(54px, 13.6vw);
  --fs-section-title: 30px;
  --fs-section-title-lg: 34px;
  --fs-cta-title: 42px;
  --fs-date: 76px;
  --fs-lead: var(--fs-17);
  --fs-label-hero: var(--fs-10);
  --fs-now: var(--fs-21);
  --fs-audience-name: var(--fs-28);
  --fs-audience-question: var(--fs-18);
  --fs-audience-docs: var(--fs-10);
  --fs-step-num: 56px;
  --fs-why-title: var(--fs-22);
  --fs-copy: var(--fs-16);
  --fs-compat: var(--fs-20);

  --lh-display: 1;
  --lh-title: 1.1;
  --lh-tight: 1.35;
  --lh-ui: 1.45;
  --lh-body: 1.55;
  --lh-copy: 1.6;

  --ls-hero: -0.0326em;      /* -3px at 92px */
  --ls-title: -0.0292em;     /* -1.4px at 48px */
  --ls-title-lg: -0.0286em;  /* -1.6px at 56px */
  --ls-cta: -0.0333em;       /* -2.4px at 72px */
  --ls-date: -0.04em;        /* -6px at 150px */
  --ls-display-sm: -0.021em; /* -0.6px at 28-30px, -0.8px at 38px */
  --ls-now: -0.0115em;       /* -0.3px at 26px */
  --ls-why: -0.0154em;       /* -0.4px at 26px */
  --ls-logo: -0.026em;       /* -0.728px at 28px */
  --ls-mono: 1.2px;
  --ls-mono-card: 1px;
  --ls-mono-tight: 0.8px;
  --ls-mono-xs: 0.6px;

  /* Spacing scale (px values used in the design) */
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-70: 70px;
  --space-72: 72px;
  --space-80: 80px;
  --space-88: 88px;
  --space-96: 96px;
  --space-100: 100px;
  --space-104: 104px;
  --space-120: 120px;
  --space-128: 128px;
  --space-140: 140px;

  /* Layout */
  --page-pad: var(--space-20);
  --content-max: 1280px;
  --label-col: 260px;
  --control-height: 52px;
  --button-block-height: 56px;
  --icon-button: 48px;
  --num-badge: 28px;
  --flow-pill-height: 25px;
  --measure-lead: 540px;
  --measure-tablet: 580px;
  --measure-cta: 500px;
  --measure-prose: 680px;
  --col-side: 520px;
  --col-name: 420px;
  --col-name-tablet: 290px;
  --col-num: 292px;
  --flow-node: 300px;
  --callouts-min: 300px;
  --ghost-long: 300px;
  --ghost-short: 220px;
  --aside-max: 380px;
  --doc-sheet-width: 380px;
  --doc-sheet-height: 520px;
  --consent-width: 450px;
  --consent-width-tablet: 480px;
  --hero-visual-min: 460px;
  --hero-visual-max: 600px;
  --hero-visual-height: 640px;
  --chat-width: 860px;
  --chat-app-height: 694px;
  --chat-sidebar: 230px;
  --chat-lights: 240px;
  --chat-bubble-max: 290px;
  --chat-send: 34px;

  /* Radii */
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-window: 18px;
  --radius-form: 16px;
  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-2xs: 4px;
  --radius-ghost: 3.5px;
  --radius-tiny: 2px;
  --radius-hair: 1px;

  /* Borders */
  --border-hair: 1px;
  --border-strong: 1.5px;
  --border-accent: 2px;
  --border-focus: 3px;

  /* Shadows */
  --shadow-card: 0 16px 40px rgb(18 32 30 / 0.08);
  --shadow-window: 0 30px 80px rgb(0 0 0 / 0.4);
  --shadow-composer: 0 4px 14px rgb(18 32 30 / 0.05);
  --shadow-badge: 0 2px 6px rgb(18 32 30 / 0.15);
  --shadow-menu: 0 16px 40px rgb(18 32 30 / 0.12);

  /* Motion */
  --duration-fast: 150ms;

  /* Logo defaults (overridden on dark backgrounds) */
  --logo-body: var(--color-ink);
  --logo-text: var(--color-ink);
  --logo-size: var(--fs-28);

  /* Focus ring colour, switched per surface */
  --focus-ring: var(--color-primary);
}

@media (min-width: 768px) {
  :root {
    --page-pad: var(--space-40);
    --fs-hero: 80px;
    --fs-section-title: 40px;
    --fs-section-title-lg: 46px;
    --fs-cta-title: 60px;
    --fs-date: 128px;
    --fs-lead: var(--fs-19);
    --fs-label-hero: var(--fs-12);
    --fs-now: var(--fs-24);
    --fs-audience-question: var(--fs-19);
    --fs-step-num: 60px;
    --fs-why-title: var(--fs-26);
    --fs-copy: var(--fs-17);
    --fs-audience-docs: var(--fs-11);
  }
}

@media (min-width: 1200px) {
  :root {
    --page-pad: var(--space-80);
    --fs-hero: clamp(64px, calc(9.2vw - 40px), 92px);
    --fs-section-title: 48px;
    --fs-section-title-lg: 56px;
    --fs-cta-title: 72px;
    --fs-date: 150px;
    --fs-now: var(--fs-26);
    --fs-audience-name: 38px;
    --fs-audience-question: var(--fs-20);
    --fs-step-num: 72px;
    --fs-compat: var(--fs-24);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-optical-sizing: none;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

em {
  font-style: italic;
}

:focus-visible {
  outline: var(--border-focus) solid var(--focus-ring);
  outline-offset: var(--space-3);
}

.sprite {
  display: none;
}

.nowrap {
  white-space: nowrap;
}

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

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: var(--space-16);
  z-index: 10;
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--page-pad));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* Icons (Lucide symbols, stroke = currentColor) */
.icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

.icon--13 { width: 13px; height: 13px; }
.icon--14 { width: 14px; height: 14px; }
.icon--15 { width: 15px; height: 15px; }
.icon--16 { width: 16px; height: 16px; }
.icon--17 { width: 17px; height: 17px; }
.icon--18 { width: 18px; height: 18px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }
.icon--26 { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   Logo lockup: mark + "Context" + "ID" on an amber box.
   All dimensions are relative to --logo-size (28px in the design).
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3em;
  font-size: var(--logo-size);
  color: var(--logo-text);
  text-decoration: none;
}

.logo__mark {
  width: 1.35em;
  height: 1.2em;
  margin-bottom: 0.4075em;
  overflow: visible;
}

.logo__word {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.055em;
  font-family: var(--font-logo);
  font-weight: var(--weight-semibold);
  line-height: 0.8867; /* taller line box keeps "Context" on the same baseline as "ID" */
  letter-spacing: var(--ls-logo);
}

/* Asymmetric padding optically centres the glyphs inside the amber box. */
.logo__id {
  padding: 0.11em 0.0958em 0.06em 0.0542em;
  border-radius: 0.07em;
  line-height: 0.76;
  background: var(--color-highlight);
  color: var(--color-ink);
  letter-spacing: -0.005em;
}

.logo--small {
  --logo-size: var(--fs-15);
}

.logo--footer {
  --logo-body: var(--color-logo-body-dark);
  --logo-text: var(--color-logo-text-dark);
}

/* Logo mark colours inside the icon sprite. Classes instead of style="" attributes,
   so the CSP does not need 'unsafe-inline' for styles. */
.mark-stroke {
  stroke: var(--logo-body, #12201E);
}

.mark-fill {
  fill: var(--logo-body, #12201E);
}

.mark-key {
  fill: var(--color-highlight, #F4C54A);
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-20);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-ui);
  text-decoration: none;
  cursor: pointer;
}

.button--dark {
  background: var(--color-ink);
  color: var(--color-paper);
}

.button--dark:hover {
  background: var(--color-ink-hover);
}

.button--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.button--primary:hover {
  background: var(--color-primary-hover);
}

.button--lg {
  gap: var(--space-10);
  padding: var(--space-18) var(--space-28);
  font-size: var(--fs-17);
}

.button--block {
  width: 100%;
  min-height: var(--button-block-height);
  gap: var(--space-10);
  font-size: var(--fs-17);
}

.text-link {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-strong) solid currentColor;
  font-size: var(--fs-17);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.text-link:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 5;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-16);
}

.site-nav {
  display: none;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-40);
}

.site-nav__links a {
  font-size: var(--fs-15);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.site-nav__links a:hover {
  color: var(--color-primary);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.site-header__cta {
  display: none;
}

.mobile-menu__toggle {
  display: grid;
  place-items: center;
  width: var(--icon-button);
  height: var(--icon-button);
  margin-right: calc(-1 * var(--space-12));
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  list-style: none;
  cursor: pointer;
}

.mobile-menu__toggle::-webkit-details-marker {
  display: none;
}

.mobile-menu__icon-close,
.mobile-menu[open] .mobile-menu__icon-open {
  display: none;
}

.mobile-menu[open] .mobile-menu__icon-close {
  display: inline-block;
}

.mobile-menu__panel {
  position: absolute;
  top: 100%;
  right: var(--page-pad);
  left: var(--page-pad);
  padding: var(--space-8);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-menu);
}

.mobile-menu__panel a {
  display: block;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-sm);
  font-size: var(--fs-17);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.mobile-menu__panel a:hover {
  background: var(--color-paper);
}

/* --------------------------------------------------------------------------
   Shared section pieces
   -------------------------------------------------------------------------- */
.section--dark {
  --focus-ring: var(--color-highlight);
  background: var(--color-ink);
  color: var(--color-paper);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  line-height: var(--lh-copy);
  letter-spacing: var(--ls-mono);
  color: var(--color-text-secondary);
}

.section--dark .section-label {
  color: var(--color-dark-text-muted);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-section-title);
  font-weight: var(--weight-regular);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: pretty;
}

.section-title--lg {
  font-size: var(--fs-section-title-lg);
  line-height: 1.08;
  letter-spacing: var(--ls-title-lg);
}

.section-title__accent {
  display: block;
  margin-top: var(--space-8);
  color: var(--color-primary);
}

.section--dark .section-title__accent {
  color: var(--color-primary-bright);
}

.br-wide {
  display: none;
}

.num-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--num-badge);
  height: var(--num-badge);
  border-radius: var(--radius-pill);
  background: var(--color-highlight);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-24) var(--space-56);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--fs-label-hero);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
  color: var(--color-text-secondary);
}

.eyebrow__dot {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.hero__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--weight-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-hero);
}

.hero__line--marker {
  display: flex;
  align-items: flex-end;
  gap: 0.196em;
}

/* Amber highlighter box around "AI"; padding compensates the italic overhang. */
.hero__marker {
  padding: 0.25em 0.272em 0.04em 0.217em;
  border-radius: var(--radius-2xs);
  background: var(--color-highlight);
  line-height: 0.92;
}

.hero__lead {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
}

.hero__actions .button {
  width: 100%;
}

.hero__note {
  font-family: var(--font-mono);
  font-size: var(--fs-label-hero);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
  color: var(--color-text-secondary);
}

/* Product visual: a redacted contract with the consent dialog on top.
   Both live in the same grid cell instead of absolute positioning. */
.hero__visual {
  display: grid;
}

.hero__visual > * {
  grid-area: 1 / 1;
}

.doc-sheet {
  display: none;
  flex-direction: column;
  gap: var(--space-12);
  width: var(--doc-sheet-width);
  height: var(--doc-sheet-height);
  padding: var(--space-32);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  transform: rotate(-3deg);
  transform-origin: top left;
}

.doc-sheet__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
  color: var(--color-text-secondary);
}

.doc-sheet__title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--weight-medium);
  line-height: 1.2;
}

.doc-sheet__line,
.doc-sheet__redacted {
  display: block;
  width: 100%;
  flex: none;
}

.doc-sheet__line {
  height: var(--space-7);
  border-radius: var(--radius-ghost);
  background: var(--color-line);
}

.doc-sheet__redacted {
  height: var(--space-12);
  border-radius: var(--radius-hair);
  background: var(--color-ink);
}

.doc-sheet__w45 { width: 45%; }
.doc-sheet__w55 { width: 55%; }
.doc-sheet__w60 { width: 60%; }
.doc-sheet__w70 { width: 70%; }
.doc-sheet__w80 { width: 80%; }
.doc-sheet__w85 { width: 85%; }
.doc-sheet__w90 { width: 90%; }

.consent-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.consent-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-18) var(--space-24);
  border-bottom: var(--border-hair) solid var(--color-line);
}

.consent-card__kind {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono-card);
  color: var(--color-text-secondary);
}

.consent-card__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
  padding: var(--space-24) var(--space-24) var(--space-20);
}

.consent-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--weight-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-display-sm);
}

.consent-card__request,
.consent-card__passage,
.consent-card__summary li {
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
}

.consent-card__request {
  color: var(--color-text-secondary);
}

.consent-card__preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
}

.consent-card__file {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono-xs);
  color: var(--color-text-secondary);
}

.consent-card__ghost {
  display: block;
  width: 100%;
  height: var(--space-7);
  border-radius: var(--radius-ghost);
  background: var(--color-line);
}

.consent-card__ghost--75 { width: min(var(--ghost-long), 75%); }
.consent-card__ghost--55 { width: min(var(--ghost-short), 55%); }

.consent-card__passage {
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-xs);
  background: var(--color-highlight-soft);
}

.consent-card__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.consent-card__summary li {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.consent-card__badge {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--space-22);
  height: var(--space-22);
  border-radius: var(--radius-pill);
}

.consent-card__badge--allow {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.consent-card__badge--deny {
  background: var(--color-deny-soft);
  color: var(--color-deny);
}

.consent-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-24);
  border-top: var(--border-hair) solid var(--color-line);
  background: var(--color-paper);
}

.consent-card__audit {
  display: none;
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono-card);
  color: var(--color-text-secondary);
}

.consent-card__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-11) var(--space-18);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-ui);
}

.consent-card__button--deny {
  border: var(--border-hair) solid var(--color-line);
  background: var(--color-surface);
}

.consent-card__button--allow {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* --------------------------------------------------------------------------
   01 · V praxi
   -------------------------------------------------------------------------- */
.practice {
  padding-top: var(--space-64);
}

.practice__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-36);
}

.before-after__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-block: var(--space-20);
  border-top: var(--border-hair) solid var(--color-dark-line);
}

.before-after__row:last-child {
  border-bottom: var(--border-hair) solid var(--color-dark-line);
}

.before-after__label {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
  color: var(--color-dark-text-muted);
}

.before-after__label--now {
  color: var(--color-highlight);
}

.before-after__content {
  display: flex;
  min-width: 0;
}

.before-after__content--before,
.before-after__files {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.before-after__files {
  display: flex;
}

.before-after__path {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--color-dark-text-muted);
  overflow-wrap: anywhere;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-10);
  border: var(--border-hair) solid var(--color-dark-line);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-dark-text-muted);
}

.file-chip .icon,
.before-after__more {
  color: var(--color-dark-text-faint);
}

.before-after__more {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

.before-after__content--now {
  align-items: flex-end;
  gap: var(--space-12);
}

.before-after__now {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--fs-now);
  font-style: italic;
  line-height: 1.3;
  letter-spacing: var(--ls-now);
  color: var(--color-paper);
}

.before-after__arrow {
  color: var(--color-highlight);
}

.practice__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

/* Neutral AI chat mock (illustration only, hidden from assistive tech). */
.chat {
  min-width: 0;
}

.chat__window {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-hair) solid var(--chat-border);
  border-radius: var(--radius-window);
  background: var(--chat-bg);
  box-shadow: var(--shadow-window);
  color: var(--chat-text);
  font-family: var(--font-mock);
  line-height: var(--lh-ui);
}

.chat__titlebar {
  display: flex;
  align-items: center;
  height: var(--space-44);
  padding-inline: var(--space-16);
  border-bottom: var(--border-hair) solid var(--chat-border);
  background: var(--chat-titlebar);
}

.chat__lights {
  display: flex;
  gap: var(--space-8);
  width: var(--chat-lights);
}

.chat__lights i {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--chat-light-red);
}

.chat__lights i:nth-child(2) { background: var(--chat-light-yellow); }
.chat__lights i:nth-child(3) { background: var(--chat-light-green); }

.chat__window-title {
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
  color: var(--chat-text-meta);
}

.chat__app {
  display: flex;
}

.chat__sidebar {
  display: none;
  flex: none;
  flex-direction: column;
  gap: var(--space-4);
  width: var(--chat-sidebar);
  padding: var(--space-16) var(--space-12);
  border-right: var(--border-hair) solid var(--chat-border);
  background: var(--chat-sidebar);
}

.chat__new,
.chat__item {
  padding: var(--space-9) var(--space-10);
  border-radius: var(--radius-sm);
  font-size: var(--fs-15);
}

.chat__new {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-weight: var(--weight-medium);
}

.chat__group {
  padding: var(--space-12) var(--space-10) var(--space-4);
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  color: var(--chat-text-group);
}

.chat__item {
  color: var(--chat-text-soft);
}

.chat__item--active {
  background: var(--chat-item-active);
  color: var(--chat-text);
}

.chat__conversation {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
  min-width: 0;
  padding: var(--space-20) var(--space-16) var(--space-16);
}

.chat__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}

.chat__anchor {
  position: relative;
}

.chat__user-row {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.chat__bubble {
  max-width: var(--col-name-tablet);
  padding: var(--space-14) var(--space-20);
  border-radius: var(--radius-card);
  background: var(--chat-bubble);
  font-size: var(--fs-19);
}

.chat__assistant {
  display: flex;
  gap: var(--space-14);
}

.chat__avatar {
  display: none;
  flex: none;
  place-items: center;
  width: var(--space-30);
  height: var(--space-30);
  border-radius: var(--radius-pill);
  background: var(--chat-avatar);
}

.chat__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-18);
  min-width: 0;
  padding-top: var(--space-3);
}

.chat__tool {
  align-self: stretch;
  border: var(--border-hair) solid var(--chat-border);
  border-radius: var(--radius-lg);
  background: var(--chat-tool);
}

.chat__tool-header {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-11) var(--space-14);
  font-size: var(--fs-15);
}

.chat__tool-mark {
  width: 22.68px;
  height: 20.16px;
  flex: none;
  overflow: visible;
}

.chat__tool-name {
  font-weight: var(--weight-semibold);
}

.chat__tool-action {
  display: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--chat-text-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat__approved {
  display: none;
  flex: none;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-card);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
}

.chat__tool-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: 0 var(--space-14) var(--space-14);
}

.chat__excerpt {
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-xs);
  background: var(--color-highlight-soft);
  font-size: var(--fs-17);
}

.chat__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono-tight);
  color: var(--chat-text-meta);
}

.chat__answer-title {
  font-size: var(--fs-23);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
}

.chat__answer-body {
  font-size: var(--fs-19);
  line-height: var(--lh-body);
  color: var(--chat-text-body);
}

.chat__source-row {
  display: inline-flex;
}

.chat__source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-7) var(--space-12);
  border-radius: var(--radius-sm);
  background: var(--chat-bubble);
  font-size: var(--fs-14);
  font-weight: var(--weight-medium);
}

.chat__source .icon {
  color: var(--chat-text-body);
}

.chat__composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  padding: var(--space-14) var(--space-16);
  border: var(--border-hair) solid var(--chat-border);
  border-radius: var(--radius-window);
  background: var(--chat-bg);
  box-shadow: var(--shadow-composer);
}

.chat__placeholder {
  font-size: var(--fs-17);
  color: var(--chat-placeholder);
}

.chat__composer-row,
.chat__composer-left {
  display: flex;
  align-items: center;
}

.chat__composer-row {
  justify-content: space-between;
}

.chat__composer-left {
  gap: var(--space-8);
}

.chat__plus,
.chat__send {
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
}

.chat__plus {
  width: var(--space-32);
  height: var(--space-32);
  border: var(--border-hair) solid var(--chat-border);
  color: var(--chat-text-soft);
}

.chat__connector {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-12) var(--space-6) var(--space-10);
  border: var(--border-hair) solid var(--chat-border);
  border-radius: var(--radius-form);
  font-size: var(--fs-13);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.chat__connector-mark {
  width: 19.44px;
  height: 17.28px;
  flex: none;
  overflow: visible;
}

.chat__send {
  width: var(--chat-send);
  height: var(--chat-send);
  background: var(--chat-text);
  color: var(--chat-bg);
}

/* Numbered markers: top-right corner of the annotated element on small screens,
   a column right of the conversation on desktop. */
.chat__badge {
  position: absolute;
  top: calc(-1 * var(--space-12));
  right: calc(-1 * var(--space-12));
  display: grid;
  place-items: center;
  width: var(--num-badge);
  height: var(--num-badge);
  border-radius: var(--radius-pill);
  background: var(--color-highlight);
  box-shadow: var(--shadow-badge);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.callouts {
  display: flex;
  flex-direction: column;
}

.callout {
  display: flex;
  gap: var(--space-18);
  padding-block: var(--space-24);
  border-top: var(--border-hair) solid var(--color-dark-line);
}

.callout:last-child {
  border-bottom: var(--border-hair) solid var(--color-dark-line);
}

.callout__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.callout__title {
  font-size: var(--fs-19);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  color: var(--color-paper);
}

.callout__body {
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  color: var(--color-dark-text);
}

.compat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding-block: var(--space-28);
  border-top: var(--border-hair) solid var(--color-dark-line);
}

.compat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
  color: var(--color-dark-text-muted);
}

.compat__list {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--fs-compat);
  font-style: italic;
  line-height: var(--lh-tight);
  color: var(--color-dark-text);
}

.compat__list li + li::before {
  content: "·";
  margin-inline: 0.3em;
}


/* --------------------------------------------------------------------------
   02 · Problém
   -------------------------------------------------------------------------- */
.problem {
  padding-block: var(--space-72) var(--space-64);
}

.problem__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.problem__statement {
  line-height: 1.12;
  text-wrap: wrap;
}

.facts {
  display: grid;
  gap: var(--space-28);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  padding-top: var(--space-20);
  border-top: var(--border-strong) solid var(--color-ink);
}

.fact__num {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
  color: var(--color-text-secondary);
}

.fact__title {
  font-size: var(--fs-20);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
}

.fact__body {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   03 · Jak to funguje
   -------------------------------------------------------------------------- */
.how {
  padding-block: var(--space-72) var(--space-80);
}

.how__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.how__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.how__head-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.how__aside {
  font-size: var(--fs-copy);
  line-height: var(--lh-body);
  color: var(--color-dark-text);
}

.flow {
  display: flex;
  flex-direction: column;
}

.flow__node {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-22);
  border: var(--border-hair) solid var(--color-dark-line);
  border-radius: var(--radius-2xs);
  background: var(--color-dark-surface);
}

.flow__node--accent {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.flow__node-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.flow__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
  color: var(--color-dark-text-muted);
}

.flow__title {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  line-height: 1.2;
  letter-spacing: var(--ls-display-sm);
  color: var(--color-paper);
}

.flow__sub {
  font-size: var(--fs-14);
  color: var(--color-dark-text-muted);
}

.flow__node--accent .flow__kicker,
.flow__node--accent .flow__sub {
  color: var(--color-on-primary-muted);
}

.flow__link {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  padding: var(--space-6) 0 var(--space-6) var(--space-28);
  color: var(--color-dark-connector);
}

.flow__link--approved {
  color: var(--color-highlight);
}

.flow__pill {
  padding: var(--space-5) var(--space-10);
  border-radius: var(--radius-tiny);
  background: var(--color-dark-pill);
  color: var(--color-dark-text);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--weight-medium);
  line-height: 15px;
  letter-spacing: var(--ls-mono-tight);
  white-space: nowrap;
}

.flow__link--approved .flow__pill {
  background: var(--color-highlight);
  color: var(--color-ink);
}

.flow__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  order: -1;
}

.flow__line {
  width: var(--border-hair);
  height: var(--space-26);
  background: currentColor;
}

.flow__link--approved .flow__line {
  width: var(--border-accent);
}

.flow__chevron {
  transform: rotate(90deg);
}

.tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.tiers__label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: var(--ls-mono);
  color: var(--color-dark-text-muted);
}

.tiers__grid {
  display: grid;
  gap: var(--space-28);
}

.tier {
  --tier-color: var(--color-primary-bright);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.tier::before {
  content: "";
  height: var(--space-4);
  margin-bottom: var(--space-12);
  border-radius: var(--radius-tiny);
  background: var(--tier-color);
}

.tier--internal { --tier-color: var(--color-primary-mid); }
.tier--sensitive { --tier-color: var(--color-highlight); }
.tier--secret { --tier-color: var(--color-deny-bright); }

.tier__name {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--weight-regular);
  line-height: 1.2;
  letter-spacing: var(--ls-display-sm);
  color: var(--color-paper);
}

.tier--sensitive .tier__name {
  font-style: italic;
}

.tier__examples {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
  color: var(--color-dark-text-muted);
}

.tier__behavior {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-6);
  font-size: var(--fs-15);
  font-weight: var(--weight-medium);
  color: var(--color-dark-text);
}

.tier__behavior .icon {
  color: var(--tier-color);
}

.tier--sensitive .tier__behavior {
  font-weight: var(--weight-semibold);
  color: var(--color-paper);
}

.steps {
  display: grid;
  gap: var(--space-36);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-step-num);
  font-style: italic;
  line-height: var(--lh-display);
  color: var(--color-highlight);
}

.step__title {
  font-size: var(--fs-21);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-paper);
}

.step__body {
  font-size: var(--fs-16);
  line-height: var(--lh-copy);
  color: var(--color-dark-text);
}

/* --------------------------------------------------------------------------
   04 · Pro koho
   -------------------------------------------------------------------------- */
.audience {
  padding-block: var(--space-72);
}

.audience__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-36);
}

.audience__list li {
  border-top: var(--border-hair) solid var(--color-ink);
}

.audience__list li:last-child {
  border-bottom: var(--border-hair) solid var(--color-ink);
}

.audience-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-block: var(--space-22);
  text-decoration: none;
}

.audience-row__num,
.audience-row__arrow {
  display: none;
}

.audience-row__name-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.audience-row__name {
  font-family: var(--font-display);
  font-size: var(--fs-audience-name);
  line-height: 1.2;
  letter-spacing: var(--ls-display-sm);
}

.audience-row__docs,
.audience-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-audience-docs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: var(--ls-mono);
  color: var(--color-text-secondary);
}

.audience-row__num {
  font-size: var(--fs-11);
}

.audience-row__question {
  font-family: var(--font-display);
  font-size: var(--fs-audience-question);
  font-style: italic;
  line-height: var(--lh-tight);
  color: var(--color-text-secondary);
}

.audience-row__arrow {
  flex: none;
  place-items: center;
  width: var(--icon-button);
  height: var(--icon-button);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-pill);
}

/* Hover/focus state, shown on the first row in the static design. */
.audience-row:hover .audience-row__name,
.audience-row:focus-visible .audience-row__name {
  font-style: italic;
  color: var(--color-primary);
}

.audience-row:hover .audience-row__docs,
.audience-row:focus-visible .audience-row__docs {
  color: var(--color-primary);
}

.audience-row:hover .audience-row__question,
.audience-row:focus-visible .audience-row__question {
  color: var(--color-ink);
}

.audience-row:hover .audience-row__arrow,
.audience-row:focus-visible .audience-row__arrow {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* --------------------------------------------------------------------------
   05 · Proč teď
   -------------------------------------------------------------------------- */
.why-now {
  padding-block: var(--space-64);
  background: var(--color-highlight);
  color: var(--color-ink);
}

.why-now__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}

.why-now__date-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.why-now__label {
  color: var(--color-ink);
}

.why-now__date {
  font-family: var(--font-display);
  font-size: var(--fs-date);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-date);
}

.why-now__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.why-now__title {
  font-size: var(--fs-why-title);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--ls-why);
}

.why-now__body {
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
}

/* --------------------------------------------------------------------------
   06 · Bezpečnost
   -------------------------------------------------------------------------- */
.trust {
  padding-block: var(--space-72);
}

.trust__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-36);
}

.trust__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
}

.trust__body {
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  color: var(--color-text-secondary);
}

.principle {
  display: flex;
  gap: var(--space-18);
  padding-block: var(--space-24);
  border-bottom: var(--border-hair) solid var(--color-line);
}

.principle:first-child {
  border-top: var(--border-hair) solid var(--color-line);
}

.principle__icon {
  color: var(--color-primary);
}

.principle__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.principle__title {
  font-size: var(--fs-21);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.principle__body {
  font-size: var(--fs-16);
  line-height: var(--lh-copy);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   CTA + signup form
   -------------------------------------------------------------------------- */
.cta {
  --focus-ring: var(--color-highlight);
  padding-block: var(--space-72);
  background: var(--color-primary);
  color: var(--color-paper);
}

.cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-36);
}

.cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.cta__label {
  color: var(--color-on-primary-muted);
}

.cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-cta-title);
  font-weight: var(--weight-regular);
  line-height: 1.02;
  letter-spacing: var(--ls-cta);
  text-wrap: pretty;
}

.cta__body {
  max-width: var(--measure-cta);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  color: var(--color-on-primary-muted);
}

.signup {
  --focus-ring: var(--color-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-22);
  border-radius: var(--radius-form);
  background: var(--color-paper);
  color: var(--color-ink);
}

.signup__row {
  display: grid;
  gap: var(--space-16);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
  color: var(--color-text-secondary);
}

.field__control {
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-16);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-16);
}

.field__control::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

.field__control:focus-visible {
  outline-offset: 0;
  border-color: var(--color-primary);
}

.field__select {
  position: relative;
}

.field__select .field__control {
  padding-right: var(--space-44);
  appearance: none;
  cursor: pointer;
}

.field__select select:invalid {
  color: var(--color-placeholder);
}

.field__chevron {
  position: absolute;
  top: 50%;
  right: var(--space-16);
  color: var(--color-text-secondary);
  pointer-events: none;
  transform: translateY(-50%);
}

.signup__fine-print {
  font-size: var(--fs-13);
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-secondary);
}

.signup__fine-print + .signup__fine-print {
  margin-top: calc(-1 * var(--space-12));
}

.signup__fine-print a {
  color: inherit;
}

.signup__fine-print a:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Thank-you page (/dekujeme/)
   -------------------------------------------------------------------------- */
.thanks {
  min-height: 60vh;
  padding-block: var(--space-72) var(--space-96);
}

.thanks__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.thanks__body {
  max-width: var(--measure-cta);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Legal pages (/ochrana-osobnich-udaju/, /kontakt/)
   -------------------------------------------------------------------------- */
.legal {
  padding-block: var(--space-56) var(--space-96);
}

.legal__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

.legal__lead {
  max-width: var(--measure-prose);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  color: var(--color-text-secondary);
}

.legal-facts {
  display: grid;
  gap: var(--space-14);
  width: 100%;
  max-width: var(--measure-prose);
  padding: var(--space-22);
  border: var(--border-hair) solid var(--color-line);
  border-radius: var(--radius-form);
  background: var(--color-surface);
}

.legal-facts__row {
  display: grid;
  gap: var(--space-4);
}

.legal-facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--weight-medium);
  line-height: var(--lh-copy);
  letter-spacing: var(--ls-mono);
  color: var(--color-text-secondary);
}

.legal-facts dd {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

.prose {
  max-width: var(--measure-prose);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
}

.prose h2 {
  margin-top: var(--space-40);
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--weight-regular);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-display-sm);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose ul {
  margin-top: var(--space-12);
}

.prose ul {
  padding-left: var(--space-22);
  list-style: disc;
}

.prose li + li {
  margin-top: var(--space-6);
}

.prose strong {
  font-weight: var(--weight-semibold);
}

.prose a,
.legal__lead a,
.legal-facts a {
  color: var(--color-primary);
}

.prose a:hover,
.legal__lead a:hover,
.legal-facts a:hover {
  color: var(--color-primary-hover);
}

.prose__note {
  padding: var(--space-16) var(--space-20);
  border-left: var(--border-accent) solid var(--color-highlight);
  background: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  --focus-ring: var(--color-highlight);
  background: var(--color-ink);
  color: var(--color-dark-text-muted);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding-block: var(--space-40);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-20);
}

.site-footer__links a {
  font-size: var(--fs-14);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--color-paper);
  text-decoration: underline;
}

.site-footer__copyright {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-mono);
}

/* ==========================================================================
   Tablet (≥ 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .br-wide {
    display: inline;
  }

  .site-header__inner {
    padding-block: var(--space-20);
  }

  .site-header__cta {
    display: inline-flex;
  }

  .mobile-menu__panel {
    left: auto;
    min-width: 260px;
  }

  .hero {
    padding-block: var(--space-48) var(--space-80);
  }

  .hero__inner {
    gap: var(--space-56);
  }

  .hero__line--marker {
    gap: 0.2em;
  }

  .hero__lead {
    max-width: var(--measure-tablet);
  }

  .hero__actions {
    flex-direction: row;
    gap: var(--space-24);
  }

  .hero__actions .button {
    width: auto;
  }

  .hero__visual {
    justify-items: center;
    padding-top: var(--space-24);
  }

  .doc-sheet {
    display: flex;
    justify-self: start;
    margin-left: var(--space-40);
  }

  .consent-card {
    width: var(--consent-width-tablet);
  }

  .practice {
    padding-top: var(--space-96);
  }

  .practice__inner {
    gap: var(--space-48);
  }

  .before-after__row {
    flex-direction: row;
    gap: var(--space-32);
    padding-block: var(--space-24);
  }

  .before-after__label {
    width: 100px;
  }

  .before-after__content--now {
    align-items: center;
    gap: var(--space-16);
  }

  .chat__conversation {
    padding: var(--space-28) var(--space-32) var(--space-22);
  }

  .chat__bubble {
    max-width: none;
  }

  .chat__avatar {
    display: grid;
  }

  .chat__tool-action {
    display: block;
  }

  .compat {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding-block: var(--space-32);
  }

  .problem {
    padding-block: var(--space-96) var(--space-88);
  }

  .problem__inner {
    gap: var(--space-56);
  }

  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .fact {
    padding: var(--space-24) var(--space-24) 0 0;
  }

  .fact:last-child {
    padding-right: 0;
  }

  .how {
    padding-block: var(--space-96) var(--space-104);
  }

  .how__inner {
    gap: var(--space-56);
  }

  .how__head-main {
    gap: var(--space-24);
  }

  .how__aside {
    max-width: var(--col-side);
  }

  .flow__node {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-24);
    padding: var(--space-22) var(--space-26);
  }

  .flow__node-head {
    gap: var(--space-8);
  }

  .flow__sub {
    font-size: var(--fs-15);
  }

  .tiers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-36) var(--space-32);
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-32);
  }

  .audience {
    padding-block: var(--space-96);
  }

  .audience__inner {
    gap: var(--space-48);
  }

  .audience-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
    padding-block: var(--space-26);
  }

  .audience-row__name-block {
    flex: none;
    width: var(--col-name-tablet);
  }

  .audience-row__question {
    flex: 1;
  }

  .audience-row__arrow {
    display: grid;
  }

  .why-now {
    padding-block: var(--space-88);
  }

  .why-now__inner {
    gap: var(--space-32);
  }

  .why-now__copy {
    max-width: var(--measure-tablet);
  }

  .trust {
    padding-block: var(--space-96);
  }

  .trust__inner {
    gap: var(--space-48);
  }

  .trust__head {
    max-width: var(--measure-tablet);
    gap: var(--space-24);
  }

  .principle {
    gap: var(--space-28);
    padding-block: var(--space-32);
  }

  .cta {
    padding-block: var(--space-96);
  }

  .cta__inner {
    gap: var(--space-48);
  }

  .cta__copy {
    gap: var(--space-28);
  }

  .cta__body {
    max-width: var(--col-side);
  }

  .signup {
    padding: var(--space-32);
  }

  .signup__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
  }

  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer__links {
    gap: var(--space-32);
  }

  .site-footer__copyright {
    flex-basis: 100%;
  }

  .legal {
    padding-block: var(--space-80) var(--space-120);
  }

  .legal-facts {
    padding: var(--space-32);
  }

  .legal-facts__row {
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-20);
  }
}

/* ==========================================================================
   Desktop (≥ 1200px), designed at 1440px
   ========================================================================== */
@media (min-width: 1200px) {
  .site-header__inner {
    padding-block: var(--space-28);
  }

  .site-nav {
    display: block;
  }

  .mobile-menu {
    display: none;
  }

  .hero {
    padding-block: var(--space-72) var(--space-96);
  }

  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .hero__copy {
    flex: 1;
    gap: var(--space-32);
  }

  .hero__line--marker {
    gap: 0.196em;
  }

  .hero__lead {
    max-width: var(--measure-lead);
  }

  .hero__visual {
    flex: 0 0 clamp(var(--hero-visual-min), 41.67vw, var(--hero-visual-max));
    justify-items: stretch;
    min-height: var(--hero-visual-height);
    padding-top: 0;
  }

  .doc-sheet {
    align-self: start;
    margin: var(--space-40) 0 0;
  }

  .consent-card {
    justify-self: end;
    align-self: start;
    width: var(--consent-width);
    margin-top: var(--space-70);
  }

  .consent-card__actions {
    justify-content: flex-start;
  }

  .consent-card__audit {
    display: block;
  }

  .practice {
    padding-top: var(--space-120);
  }

  .practice__inner {
    gap: var(--space-64);
  }

  .section-head {
    flex-direction: row;
    gap: var(--space-64);
  }

  .section-head .section-label {
    flex: none;
    width: var(--label-col);
  }

  .before-after__row {
    align-items: center;
    gap: var(--space-64);
    padding-block: var(--space-28);
  }

  .before-after__label {
    width: var(--label-col);
  }

  .before-after__content--before,
  .before-after__files {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-10);
  }

  .practice__body {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .chat {
    flex: 0 1 var(--chat-width);
  }

  .callouts {
    flex: 1 0 var(--callouts-min);
  }

  .chat__sidebar {
    display: flex;
  }

  .chat__app {
    min-height: var(--chat-app-height);
  }

  .chat__conversation {
    padding: var(--space-30) var(--space-48) var(--space-22);
  }

  .chat__approved {
    display: inline-flex;
  }

  .chat__user-row,
  .chat__source-row {
    display: flex;
    width: 100%;
    margin-left: 0;
  }

  .chat__badge {
    top: 50%;
    right: calc(-1 * (var(--space-10) + var(--num-badge)));
    transform: translateY(-50%);
  }

  .chat__badge--tool {
    top: 10.5px;
    transform: none;
  }

  .chat__badge--excerpt {
    right: calc(-1 * (var(--space-24) + var(--num-badge)));
  }

  .compat {
    padding-block: var(--space-36);
  }

  .compat__list {
    gap: var(--space-44);
  }

  .compat__list li + li::before {
    content: none;
  }


  .problem {
    padding-block: var(--space-140) var(--space-120);
  }

  .problem__inner {
    gap: var(--space-80);
  }

  .facts {
    padding-left: calc(var(--label-col) + var(--space-64));
  }

  .fact {
    padding: var(--space-28) var(--space-32) 0;
  }

  .fact:first-child {
    padding-left: 0;
  }

  .how {
    padding-block: var(--space-120) var(--space-128);
  }

  .how__inner {
    gap: var(--space-72);
  }

  .how__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .how__aside {
    max-width: var(--aside-max);
  }

  .flow {
    flex-direction: row;
    align-items: center;
  }

  .flow__node {
    flex: 0 1 var(--flow-node);
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-10);
    padding: var(--space-28);
  }

  .flow__node-head {
    gap: var(--space-10);
  }

  .flow__sub {
    font-size: var(--fs-14);
  }

  .flow__link {
    flex: 1 0 auto;
    flex-direction: column;
    gap: var(--space-10);
    padding: 0 var(--space-12) calc(var(--flow-pill-height) + var(--space-10));
  }

  .flow__connector {
    flex-direction: row;
    align-self: stretch;
    order: 0;
  }

  .flow__line {
    flex: 1;
    width: auto;
    height: var(--border-hair);
  }

  .flow__link--approved .flow__line {
    width: auto;
    height: var(--border-accent);
  }

  .flow__chevron {
    transform: none;
  }

  .tiers__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .tier {
    padding-right: var(--space-24);
  }

  .steps {
    gap: var(--space-48);
  }

  .audience {
    padding-block: var(--space-140);
  }

  .audience__inner {
    gap: var(--space-64);
  }

  .audience-row {
    gap: var(--space-32);
    padding-block: var(--space-30);
  }

  .audience-row__num {
    display: block;
    flex: none;
    width: var(--col-num);
  }

  .audience-row__name-block {
    width: var(--col-name);
    gap: var(--space-10);
  }

  .why-now {
    padding-block: var(--space-100);
  }

  .why-now__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .why-now__date-block {
    flex: 1;
  }

  .why-now__copy {
    flex: 0 0 var(--col-side);
    gap: var(--space-20);
  }

  .trust {
    padding-block: var(--space-140);
  }

  .trust__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-96);
  }

  .trust__head {
    flex: 0 0 var(--col-side);
  }

  .principles {
    flex: 1;
  }

  .cta {
    padding-block: var(--space-120);
  }

  .cta__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-96);
  }

  .cta__copy {
    flex: 1;
  }

  .cta__body {
    max-width: var(--measure-cta);
  }

  .signup {
    flex: 0 0 var(--col-side);
    padding: var(--space-36);
  }

  .site-footer__inner {
    flex-wrap: nowrap;
    padding-block: var(--space-48);
  }

  .site-footer__copyright {
    flex-basis: auto;
  }
}

/* --------------------------------------------------------------------------
   Motion: only when the user has not asked for reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .button,
  .text-link,
  .site-nav__links a,
  .site-footer__links a,
  .audience-row__name,
  .audience-row__docs,
  .audience-row__question,
  .audience-row__arrow {
    transition:
      color var(--duration-fast) ease,
      background-color var(--duration-fast) ease,
      border-color var(--duration-fast) ease;
  }
}