/* AnamNeo web (anamneo.cz): the one stylesheet.

   Ported from the approved design (Claude Design canvas "Web AnamNeo", site.css + the component
   rules it imports from the design system bundle). Light theme only: the website has no theme
   switch and does not follow the system dark mode.

   Layout rules, the same in every section:
   - one 12-column grid (.g12, 24 px gap) in a 1200 px container; at 640 px and below 4 columns,
     20 px margin, 16 px gap; between 641 and 1100 px the columns stack;
   - one section header: H2, the lead under it, then 48 px (phone 32 px) to the content;
   - section padding 128 px (phone 72 px); bands alternate canvas / surface. */

/* ---------- Fonts: self-hosted, latin + latin-ext under one family each ---------- */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens (frontend/src/assets/styles/tokens.css, light) ---------- */
:root {
  color-scheme: light;
  --bg: #f7f7f5; --surface: #ffffff; --surface-2: #eff1ef;
  --border: #e0e3e0; --border-strong: #ccd1cd; --border-input: #7d8885;
  --text: #141a19; --text-2: #4d5a58;
  --accent: #0f766e; --accent-hover: #0b5f58; --on-accent: #ffffff; --accent-soft: #e4f1ee; --accent-ink: #0b5f58;
  --hero-line: rgba(15, 118, 110, 0.24);
  --success: #2e7d32; --success-soft: #eaf4ea; --success-ink: #22662a;
  --warning: #a15c07; --warning-soft: #fbf1e1; --warning-ink: #7f4906;
  --danger: #b42318; --danger-soft: #fbebe9; --danger-ink: #9a1d13; --on-danger: #ffffff;
  --info: #1d5fb8; --info-soft: #e9f0fa; --info-ink: #1a539f;
  --neutral: #5c6664; --neutral-soft: #edefed; --neutral-ink: #4d5a58;
  --focus-color: #0f766e;
  --elev-1: 0 1px 2px rgba(20, 26, 25, 0.06);
  --elev-2: 0 6px 18px rgba(20, 26, 25, 0.08);
  --elev-3: 0 18px 44px rgba(20, 26, 25, 0.14);
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.28);
  --scrim: rgba(20, 26, 25, 0.6);


  --font-display: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-21: 21px; --fs-26: 26px; --fs-32: 32px; --fs-40: 40px;
  --lh-12: 1.3; --lh-14: 1.45; --lh-16: 1.5; --lh-18: 1.3; --lh-21: 1.25; --lh-26: 1.15; --lh-32: 1.1; --lh-40: 1.1;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-control: 8px; --radius-button: 10px; --radius-card: 12px; --radius-dialog: 18px; --radius-pill: 999px;
  --control-height: 40px; --control-height-touch: 44px; --control-height-lg: 48px;
  --tag-height-sm: 20px; --tag-font-size-sm: 12px;
  --icon-stroke: 1.75; --focus-width: 2px; --focus-offset: 2px;
  --motion-base: 150ms; --motion-slow: 200ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* The website's own scale and rhythm, desktop values. */
  --w-display: 72px; --lh-display: 1.02; --ls-display: -0.02em;
  --w-h2: 44px; --lh-h2: 1.08; --ls-h2: -0.015em;
  --w-h3: 24px; --lh-h3: 1.25;
  --w-lead: 20px;
  --w-body: 17px; --lh-body: 1.6;
  --gap: 24px;
  --pad-x: 32px;
  --section: 128px;
  --head-gap: 48px;
  --hdr-h: 72px;
}

/* ---------- Page ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + var(--space-4)); -webkit-text-size-adjust: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--w-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
img { max-width: 100%; }
/* Text links only: a button rendered as <a> keeps its own text colour in every state. */
a:where(:not(.ui-button)) { color: var(--accent-ink); text-underline-offset: 2px; }
:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 50; padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-weight: var(--fw-semibold); transform: translateY(-200%); }
.skip:focus { transform: none; }

.wrap { max-width: calc(1200px + 2 * var(--pad-x)); margin-inline: auto; padding-inline: var(--pad-x); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.sec { padding-block: var(--section); }
.sec--surface { background: var(--surface); border-block: 1px solid var(--border); }

.display { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--w-h3); line-height: var(--lh-h3); }
.lead { max-width: 56ch; color: var(--text-2); font-size: var(--w-lead); line-height: 1.5; text-wrap: pretty; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
.sec__head { display: grid; gap: var(--space-4); max-width: 760px; margin-bottom: var(--head-gap); }

.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ico--20 { width: 20px; height: 20px; stroke-width: 2.05; }
.ico--16 { width: 16px; height: 16px; stroke-width: 2.4; }

.pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 var(--space-3); border: 1px solid var(--hero-line); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Button (design system UiButton) ---------- */
.ui-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-button);
  font: var(--fw-semibold) var(--fs-16) / 1.1 var(--font-body);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.ui-button--primary,
.ui-button--primary:is(:link, :visited, :hover, :focus, :active) { background: var(--accent); color: var(--on-accent); box-shadow: var(--elev-1); }
.ui-button--primary:hover { background: var(--accent-hover); }
.ui-button--secondary,
.ui-button--secondary:is(:link, :visited, :hover, :focus, :active) { background: var(--surface); border-color: var(--border-strong); color: var(--text); box-shadow: var(--elev-1); }
.ui-button--secondary:hover { background: var(--surface-2); border-color: var(--border-input); }
.ui-button:disabled, .ui-button[aria-disabled="true"] { background: var(--surface-2); border-color: var(--border); color: var(--text-2); cursor: not-allowed; box-shadow: none; }
.ui-button--lg { min-height: var(--control-height-lg); padding: 0 calc(var(--space-5) + 2px); }

/* ---------- Status tag (design system UiStatusTag, small) ---------- */
.ui-status-tag {
  --st-bg: var(--neutral-soft); --st-ink: var(--neutral-ink);
  display: inline-flex; align-items: center; justify-self: start;
  min-height: var(--tag-height-sm); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--st-bg); color: var(--st-ink);
  font-size: var(--tag-font-size-sm); font-weight: var(--fw-semibold); line-height: var(--space-4);
  white-space: nowrap;
}
.ui-status-tag--info { --st-bg: var(--info-soft); --st-ink: var(--info-ink); }
.ui-status-tag--success { --st-bg: var(--success-soft); --st-ink: var(--success-ink); }

/* ---------- Field + input (design system UiField, controls.css) ---------- */
.ui-field { display: grid; gap: calc(var(--space-1) + 2px); min-width: 0; align-content: start; }
.ui-field__label { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: var(--lh-18); color: var(--text); }
.ui-field__hint { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--text-2); }
.ui-field__error { display: flex; align-items: flex-start; gap: calc(var(--space-1) + 2px); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--danger-ink); }
.ui-field__error .ico { margin-top: 1px; color: var(--danger); }
.ui-field__error[hidden] { display: none; }
.ui-input { width: 100%; min-height: var(--control-height-touch); padding: 0 var(--space-3); border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--surface); color: var(--text); caret-color: var(--text); font: inherit; font-size: var(--fs-16); transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.ui-input:hover { border-color: var(--text-2); }
.ui-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.ui-input[aria-invalid="true"] { border-color: var(--danger); }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); }
.hdr__in { display: flex; align-items: center; gap: var(--space-8); min-height: var(--hdr-h); }
.hdr__brand { display: inline-flex; border-radius: var(--radius-control); }
.logo { display: block; height: 32px; width: auto; }
.hdr__nav { display: flex; gap: var(--space-1); }
.hdr__nav a { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-control); color: var(--text); font-size: var(--fs-16); font-weight: var(--fw-medium); text-decoration: none; }
.hdr__nav a:hover { background: var(--surface-2); }
.hdr__act { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
a.hdr__login { color: var(--text-2); font-size: var(--fs-16); font-weight: var(--fw-medium); text-decoration: none; }
a.hdr__login:hover { color: var(--text); text-decoration: underline; }
.hdr__menu { display: none; place-items: center; width: var(--control-height-touch); height: var(--control-height-touch); padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-button); background: var(--surface); color: var(--text); cursor: pointer; }
.hdr__menu .ico--close, .hdr__menu[aria-expanded="true"] .ico--open { display: none; }
.hdr__menu[aria-expanded="true"] .ico--close { display: block; }
/* The menu the hamburger opens: the same links as the desktop navigation, one per row. */
.mnav { padding: var(--space-2) 0 var(--space-4); border-top: 1px solid var(--border); }
.mnav[hidden] { display: none; }
.mnav ul { display: grid; gap: 2px; padding: 0; list-style: none; }
.mnav a { display: flex; align-items: center; min-height: var(--control-height-touch); padding: 0 var(--space-3); border-radius: var(--radius-control); color: var(--text); font-weight: var(--fw-medium); text-decoration: none; }
.mnav a:hover { background: var(--surface-2); }

/* ---------- Hero: text 5 columns, screenshot 7 columns running off the right edge ---------- */
.hero { padding-block: var(--space-16) var(--section); }
.hero__grid { align-items: center; }
.hero__copy { grid-column: 1 / span 5; display: grid; justify-items: start; gap: var(--space-6); }
.hero__h { display: grid; gap: var(--space-3); }
.hero__brand { color: var(--accent-ink); }
.hero__slogan { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--w-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); text-wrap: balance; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
/* The whole overview screen, uncropped, at every width. */
.hero__media { grid-column: 6 / span 7; min-width: 0; }
.shot { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-2); box-shadow: var(--elev-2); }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.hero__media .shot { aspect-ratio: 1440 / 900; }
/* The image inside is absolutely positioned, so the link has to fill the frame itself, or it is
   0 px tall and its focus ring is clipped by the frame. The ring sits inside for the same reason. */
.shot__zoom { position: absolute; inset: 0; display: block; border-radius: inherit; cursor: zoom-in; }
.shot__zoom:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: var(--lh-14); }
.hero__facts li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__facts .ico { color: var(--success); }

/* ---------- Cards ---------- */
.card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-dialog); background: var(--surface); }
.sec--surface .card { background: var(--bg); }
.card p { color: var(--text-2); }

/* ---------- Switching flow: four steps joined by a line ----------
   The final state is the default, so the page reads right without JS or with reduced motion.
   site.js sets data-flow="pending" and then "done" when the list scrolls in: the line draws from
   step 1 to 4 once, each node fills as the line reaches it, then the checklist ticks and the
   report turns "Vyřešeno". Transitions exist only under "done", so going to "pending" is instant.
   Rows come from a subgrid, so the who / heading / text / example rows line up across steps. */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: var(--gap); row-gap: var(--space-3); padding: 0; list-style: none; }
.flow__step { position: relative; grid-row: span 5; display: grid; grid-template-rows: subgrid; align-content: start; }
.flow__node { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-2); border: 2px solid var(--accent); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.flow__who { color: var(--accent-ink); font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: var(--lh-14); }
.flow__text { color: var(--text-2); }
.flow__art { display: grid; align-content: start; justify-items: start; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg); font-size: var(--fs-14); line-height: var(--lh-14); }
/* The line from a node to the next one: a grey track with the accent fill drawn over it. */
.flow__step:not(:last-child)::before,
.flow__step:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 52px; right: calc(12px - var(--gap)); height: 2px; border-radius: 1px; background: var(--border-strong); }
.flow__step:not(:last-child)::after { background: var(--accent); transform-origin: left center; }

.flow[data-flow="pending"] .flow__node { border-color: var(--border-strong); background: var(--surface); color: var(--text-2); }
.flow[data-flow="pending"] .flow__step::after { transform: scaleX(0); }
.flow[data-flow="pending"] .mini-check .ico { opacity: 0; }
.flow[data-flow="pending"] .mini-check li { color: var(--text-2); }
.flow[data-flow="pending"] .mini-swap__from { opacity: 1; }
.flow[data-flow="pending"] .mini-swap__to { opacity: 0; }

.flow[data-flow="done"] .flow__node { transition: background-color 250ms var(--ease-standard), border-color 250ms var(--ease-standard), color 250ms var(--ease-standard); }
.flow[data-flow="done"] .flow__step::after { transition: transform 300ms var(--ease-standard); }
.flow[data-flow="done"] .mini-check li, .flow[data-flow="done"] .mini-check .ico { transition: color 200ms var(--ease-standard), opacity 200ms var(--ease-standard); }
.flow[data-flow="done"] .mini-swap > * { transition: opacity 250ms var(--ease-standard) 1450ms; }
.flow[data-flow="done"] .flow__step:nth-child(1)::after { transition-delay: 100ms; }
.flow[data-flow="done"] .flow__step:nth-child(2) .flow__node { transition-delay: 400ms; }
.flow[data-flow="done"] .flow__step:nth-child(2)::after { transition-delay: 500ms; }
.flow[data-flow="done"] .flow__step:nth-child(3) .flow__node { transition-delay: 800ms; }
.flow[data-flow="done"] .flow__step:nth-child(3)::after { transition-delay: 900ms; }
.flow[data-flow="done"] .flow__step:nth-child(4) .flow__node { transition-delay: 1200ms; }
.flow[data-flow="done"] .mini-check li:nth-child(1), .flow[data-flow="done"] .mini-check li:nth-child(1) .ico { transition-delay: 900ms; }
.flow[data-flow="done"] .mini-check li:nth-child(2), .flow[data-flow="done"] .mini-check li:nth-child(2) .ico { transition-delay: 1020ms; }
.flow[data-flow="done"] .mini-check li:nth-child(3), .flow[data-flow="done"] .mini-check li:nth-child(3) .ico { transition-delay: 1140ms; }
.flow[data-flow="done"] .mini-check li:nth-child(4), .flow[data-flow="done"] .mini-check li:nth-child(4) .ico { transition-delay: 1260ms; }

/* Small app fragments that show what each step looks like. Decorative: the step text says it all. */
.mini-ev { display: grid; gap: 2px; width: 100%; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--accent); border-radius: var(--radius-control); background: var(--accent-soft); }
.mini-ev b, .mini-rep b { color: var(--text); font-weight: var(--fw-semibold); }
.mini-ev span { color: var(--text-2); }
.mini-file { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: var(--fw-medium); }
.mini-file .ico { color: var(--text-2); }
.mini-check { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.mini-check li { display: flex; align-items: center; gap: var(--space-2); color: var(--text); }
.mini-check .ico { color: var(--success); }
.mini-rep { display: grid; justify-items: start; gap: var(--space-2); }
/* Step 4's card opens the real "Moje hlášení" screenshot (desktop only, like the other shots). */
.flow__zoom { display: grid; justify-items: start; gap: var(--space-3); width: 100%; border-radius: var(--radius-control); color: inherit; text-decoration: none; cursor: zoom-in; }
.flow__zoom-hint { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent-ink); font-weight: var(--fw-semibold); }
.flow__zoom:hover .flow__zoom-hint { text-decoration: underline; text-underline-offset: 2px; }
.mini-rep__type { color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: var(--lh-12); }
.mini-swap { display: inline-grid; }
.mini-swap > * { grid-area: 1 / 1; }
.mini-swap__from { opacity: 0; }
/* What the pilot gives and the one thing it asks, side by side, the ask leading to the form. */
.terms { margin-top: var(--space-16); padding: var(--space-8) var(--space-10); border: 1px solid var(--hero-line); border-radius: var(--radius-dialog); background: var(--accent-soft); color: var(--text); row-gap: var(--space-6); }
.terms__h { grid-column: 1 / -1; }
.terms__get { grid-column: 1 / span 7; display: grid; align-content: start; gap: var(--space-4); }
.terms__ask { grid-column: 8 / span 5; display: grid; align-content: start; justify-items: start; gap: var(--space-4); padding-left: var(--space-8); border-left: 1px solid var(--hero-line); }
.terms__sub { color: var(--accent-ink); font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-16); }
.terms__ask-text { font-family: var(--font-display); font-size: var(--fs-21); font-weight: var(--fw-semibold); line-height: var(--lh-21); text-wrap: pretty; }
.terms__list { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
.terms__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); }
.terms__list .ico { margin-top: 4px; color: var(--accent-ink); }
.terms__btn { margin-top: var(--space-2); }

/* ---------- Co v AnamNeo najdete: zigzag, text 5 columns, screenshot 7 ---------- */
.zz { display: grid; gap: var(--space-16); }
.zz__row { align-items: center; }
.zz__text { grid-column: 1 / span 5; display: grid; gap: var(--space-3); }
.zz__text p { color: var(--text-2); }
.zz__media { grid-column: 6 / span 7; position: relative; display: grid; justify-items: end; min-width: 0; }
.zz__row--rev .zz__text { grid-column: 8 / span 5; grid-row: 1; }
.zz__row--rev .zz__media { grid-column: 1 / span 7; grid-row: 1; justify-items: start; }
/* Desktop: a whole UI element on a soft panel, shown at its own CSS size, scaled down only to fit
   the column and 720 px of height, never cropped. Phone: the app's phone screen in a 300 px frame. */
.feat { display: grid; place-items: center; width: 100%; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-dialog); background: var(--surface-2); }
.feat__zoom { display: block; max-width: 100%; border-radius: var(--radius-card); cursor: zoom-in; }
.feat img { display: block; max-width: 100%; height: auto; max-height: 720px; object-fit: contain; }

/* Collapsible lists: "Všechny funkce" and the FAQ share the summary look. */
.allf { margin-top: var(--space-10); border-block: 1px solid var(--border); }
.allf summary, .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; padding-block: var(--space-4); font-family: var(--font-display); font-size: var(--fs-21); font-weight: var(--fw-semibold); line-height: var(--lh-21); list-style: none; cursor: pointer; }
.allf summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.allf summary .ico, .faq summary .ico { color: var(--text-2); transition: transform var(--motion-slow) var(--ease-standard); }
.allf[open] summary .ico, .faq details[open] summary .ico { transform: rotate(180deg); }
.allf__list { row-gap: var(--space-4); padding-bottom: var(--space-6); }
.allf__list p { grid-column: span 6; color: var(--text-2); }
.allf__list b { color: var(--text); font-weight: var(--fw-semibold); }

/* ---------- Časté otázky (7 columns) + Připravujeme (5 columns) ---------- */
.faq { grid-column: span 7; border-bottom: 1px solid var(--border); }
.faq details { border-top: 1px solid var(--border); }
.faq details p { max-width: 64ch; padding-bottom: var(--space-5); color: var(--text-2); }
.prep { grid-column: span 5; align-self: start; }
.prep h3 + p { margin-top: calc(-1 * var(--space-1)); }
.prep b { color: var(--text); }

/* ---------- Kontakt: text 5 columns, form 7 columns ---------- */
.contact__text { grid-column: span 5; display: grid; align-content: start; gap: var(--space-4); }
.contact__form { grid-column: span 7; }
.form { display: grid; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-dialog); background: var(--surface); }
.form .ui-field__label { font-size: var(--fs-16); }
.form textarea.ui-input { min-height: 132px; padding: var(--space-3); resize: vertical; line-height: var(--lh-16); }
/* Name + clinic and e-mail + phone side by side; one column on a phone. */
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.form__next { color: var(--text-2); font-size: var(--fs-14); }
.form__status { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent); border-radius: var(--radius-card); background: var(--danger-soft); color: var(--text); font-size: var(--fs-16); line-height: var(--lh-16); }
.form__status[hidden] { display: none; }
.form__status .ico { margin-top: 2px; color: var(--danger); }
.form__done { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-8); border: 1px solid color-mix(in srgb, var(--success) 22%, transparent); border-radius: var(--radius-dialog); background: var(--success-soft); color: var(--text); font-size: var(--w-lead); font-weight: var(--fw-semibold); line-height: 1.4; }
.form__done .ico { margin-top: 3px; color: var(--success); }
/* The honeypot: present for bots, out of sight and out of reach for people. */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; }
.mail { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); }
.mail a { color: var(--text); text-decoration: none; }
.mail a:hover { text-decoration: underline; }

/* ---------- Footer: 4 + 3 + 3 + 2 ---------- */
.ftr { padding-block: var(--space-16) var(--space-8); border-top: 1px solid var(--border); background: var(--surface); font-size: var(--fs-16); line-height: var(--lh-16); }
.ftr__grid > :nth-child(1) { grid-column: span 4; }
.ftr__grid > :nth-child(2), .ftr__grid > :nth-child(3) { grid-column: span 3; }
.ftr__grid > :nth-child(4) { grid-column: span 2; }
.ftr__tag { margin-top: var(--space-3); }
.ftr__h { margin-bottom: var(--space-2); color: var(--text-2); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.ftr__list { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.ftr a { color: var(--text); }
.ftr a:hover { color: var(--accent-ink); }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-14); }

/* ---------- Subpages: Zásady ochrany osobních údajů, Co je nového, 404 ---------- */
.page-head { display: grid; gap: var(--space-4); padding-block: var(--space-16) var(--space-10); border-bottom: 1px solid var(--border); }
.page-head--plain { border-bottom: 0; padding-bottom: var(--section); justify-items: start; }
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap); padding-block: var(--space-12) var(--section); }
.toc { position: sticky; top: calc(var(--hdr-h) + var(--space-6)); align-self: start; max-height: calc(100vh - var(--hdr-h) - var(--space-12)); overflow-y: auto; }
.toc__h { margin-bottom: var(--space-2); color: var(--text-2); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.toc ol { display: grid; gap: 2px; padding: 0; list-style: none; counter-reset: toc; }
.toc a { display: flex; gap: var(--space-2); padding: 6px 10px; border-radius: var(--radius-control); color: var(--text-2); font-size: 15px; text-decoration: none; }
.toc a::before { counter-increment: toc; content: counter(toc) "."; min-width: 1.4em; font-variant-numeric: tabular-nums; }
.toc a:hover { background: var(--surface-2); color: var(--text); }
.legal__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: 70ch; min-width: 0; overflow-wrap: break-word; }
.legal__body h2 { margin-top: var(--space-8); font: var(--fw-semibold) var(--fs-26) / var(--lh-26) var(--font-display); }
.legal__body h2:first-child { margin-top: 0; }
/* The policy text comes as one <section> per chapter, each opened by its h2. */
.legal__body > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
.legal__body > section > h2 { margin-top: 0; }
.legal__body .ucinnost { color: var(--text-2); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.legal__body h3 { margin-top: var(--space-2); font: var(--fw-semibold) var(--fs-18) / var(--lh-18) var(--font-display); }
.legal__body ul, .legal__body ol { display: grid; gap: var(--space-2); padding-left: 1.4em; }
/* A wide table scrolls on its own instead of widening the page on a phone. */
.legal__body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-16); }
.legal__body th, .legal__body td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.news { display: grid; gap: var(--space-12); max-width: 760px; padding-block: var(--space-12) var(--section); }
.news__day { display: grid; gap: var(--space-4); }
.news__date { color: var(--text-2); font-size: var(--fs-14); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.news__item { display: grid; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-dialog); background: var(--surface); }
.news__item p { color: var(--text-2); }

/* ---------- Lightbox for the desktop feature screenshots ---------- */
.lightbox { width: min(100vw - 2 * var(--space-6), 1100px); max-width: none; max-height: calc(100vh - 2 * var(--space-6)); padding: 0; border: 0; border-radius: var(--radius-dialog); background: var(--surface-2); color: var(--text); box-shadow: var(--elev-3); }
.lightbox::backdrop { background: var(--scrim); }
.lightbox__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: var(--space-3); background: color-mix(in srgb, var(--surface-2) 92%, transparent); }
.lightbox__body { display: grid; place-items: center; padding: 0 var(--space-6) var(--space-6); }
.lightbox__body img { display: block; max-width: 100%; height: auto; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .hero__copy { grid-column: 1 / -1; }
  .hero__media { grid-column: 1 / -1; }
  /* Below the desktop width the flow runs downwards: node on the left, the line down to the next. */
  .flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-10); }
  .flow__step { grid-row: auto; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: none; column-gap: var(--space-5); row-gap: var(--space-2); }
  .flow__node { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; }
  .flow__step > :not(.flow__node) { grid-column: 2; }
  .flow__art { justify-self: start; width: min(100%, 360px); }
  .flow__step:not(:last-child)::before,
  .flow__step:not(:last-child)::after { top: 48px; bottom: calc(8px - var(--space-10)); left: 19px; right: auto; width: 2px; height: auto; }
  .flow__step:not(:last-child)::after { transform-origin: center top; }
  .flow[data-flow="pending"] .flow__step::after { transform: scaleY(0); }
  .terms__get, .terms__ask { grid-column: 1 / -1; }
  .terms__ask { padding: var(--space-6) 0 0; border-left: 0; border-top: 1px solid var(--hero-line); }
  .faq, .prep { grid-column: 1 / -1; }
  .contact__text, .contact__form { grid-column: 1 / -1; }
  .ftr__grid > :nth-child(n) { grid-column: span 6; }
  .legal { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; }
  /* The navigation moves into the menu button; the design hides it here and the button keeps it
     reachable. */
  .hdr__nav { display: none; }
  .hdr__menu { display: inline-grid; }
}
@media (min-width: 1101px) {
  .mnav { display: none; }
}

/* ---------- Phone: 4 columns, 20 px margin, 16 px gap ---------- */
@media (max-width: 640px) {
  :root {
    --w-display: clamp(32px, 9vw, 40px); --lh-display: 1.05;
    --w-h2: 30px; --lh-h2: 1.12;
    --w-h3: 20px; --lh-h3: 1.3;
    --w-lead: 18px;
    --w-body: 16px; --lh-body: 1.55;
    --gap: 16px; --pad-x: 20px; --section: 72px; --head-gap: 32px;
    --hdr-h: 64px;
  }
  .g12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Safety net only: the sizes above already fit the longest Czech word in the width. */
  .display, .h2, .h3, .hero__slogan, .faq summary, .allf summary { overflow-wrap: anywhere; hyphens: manual; }
  .g12 > *, .allf__list p,
  .zz__text, .zz__media, .zz__row--rev .zz__text, .zz__row--rev .zz__media { grid-column: 1 / -1; grid-row: auto; }
  .zz { gap: var(--space-12); }
  .zz__media, .zz__row--rev .zz__media { justify-items: center; }
  .feat { justify-self: center; width: 300px; max-width: 100%; padding: 6px; border: 0; border-radius: 32px; background: var(--text); }
  .feat img { width: 100%; max-height: none; border-radius: 26px; }
  .feat__zoom, .flow__zoom, .shot__zoom { pointer-events: none; cursor: default; }
  .flow__zoom-hint { display: none; }
  .terms { padding: var(--space-5); }
  .terms__btn { width: 100%; }
  .hdr__in { gap: var(--space-3); }
  .hdr__login { display: none; }
  .hdr__cta.ui-button { min-height: var(--control-height); padding: 0 var(--space-3); font-size: var(--fs-14); }
  .logo { height: 28px; }
  .hero { padding-block: var(--space-8) var(--section); }
  .hero__cta .ui-button { flex: 1 1 100%; }
  .card, .form, .form__done { padding: var(--space-5); }
  .faq summary, .allf summary { font-size: var(--fs-18); }
  .form .ui-button { width: 100%; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .lightbox__body { padding: 0 var(--space-3) var(--space-3); }
}
@media (max-width: 380px) {
  .hdr__cta.ui-button { padding: 0 var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}