/* Lussi Voice, the site for owners of finished houses.
 *
 * Colours, type sizes and spacing come from the design-canvas exports in
 * lussi-web-source/, which carried them as inline styles on every element.
 * They live here as tokens and classes instead, so the pages stay semantic and
 * so the layout can respond between 360px and 1440px — the exports were fixed
 * at 1440px (landing) and 390px (onboarding).
 */

:root {
  /* Surfaces */
  /* Redesign (Peter 8. 11.): ivory pages, white cards, full plates of the
     brand's yellow and dark green for what stands out. */
  --paper: #F7F4EC;
  --band: #FFF3C4;
  --white: #FFFFFF;
  --card: #F8F6F1;
  --ink: #1C2321;

  /* Text */
  --text: #1C2321;
  --muted: #3A433F;
  --on-dark: #F4F1EA;
  --on-dark-muted: #D8D2C4;
  --on-dark-dim: #C9C2B3;
  --on-dark-list: #E4DED0;

  /* Brand */
  --green: #1F3F36;
  --green-dark: #16302A;
  --green-light: #7FA395;
  --green-pale: #E6EFEA;
  --gold: #B8893B;
  --gold-text: #6B5A2E;
  --gold-soft: #C9B98A;
  --gold-pale: #E2D3A8;
  --sage: #5B665F;

  /* Lines */
  --rule: #ECE7DC;
  --rule-strong: #E2DCCF;
  --border: #CFC8BA;
  --border-soft: #D8D2C4;
  --border-track: #DDD6C8;
  --dot-off: #B9B2A6;
  --field-border: #8C8578;
  --disabled: #8C9C95;

  /* Type */
  /* Redesign (Peter 8. 11.): Cormorant Garamond for headings, DM Sans for
     text. The word LUSSI in the logo is a drawing and keeps its own letters. */
  --nadpis: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serif: var(--nadpis);
  --sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --display: var(--nadpis);

  /* Brand, variant A of the draft (#63): the logo's yellow plate and its
     dark green mark. Yellow is a surface, never text on a light ground. */
  --zluta: #FFC915;
  --zluta-svetla: #FFF3C4;
  --zelena: #1F3F36;
  --slonovina: #F7F4EC;
  --bila: #FFFFFF;

  /* Layout: content up to 1200 px, the same gutter as the header. */
  --page: 1200px;
  --sirka: 1200px;
  --okraj: clamp(16px, 4vw, 48px);

  /* Fluid scale.
   *
   * Each ramp runs from its 360px value to its existing desktop value and is
   * solved to reach the maximum at 1000px. Saturating below 1024px is
   * deliberate: it means every viewport the desktop layout is judged at gets
   * exactly the value it had before, with no sub-pixel drift, while phones
   * get roughly half the spacing and noticeably smaller headings.
   *
   * The comment after each line is "360px value → desktop value". */

  --gutter: clamp(1.25rem, -0.2969rem + 6.875vw, 4rem);            /* 20 → 64 */
  --space-section: clamp(2.5rem, 0.5313rem + 8.75vw, 6rem);        /* 40 → 96 */
  --space-hero-top: clamp(1.75rem, 0.2031rem + 6.875vw, 4.5rem);   /* 28 → 72 */
  --space-hero-bottom: clamp(2.25rem, 0.1406rem + 9.375vw, 6rem);  /* 36 → 96 */
  --space-hero-gap: clamp(1.5rem, 0.0938rem + 6.25vw, 4rem);       /* 24 → 64 */
  --space-stack: clamp(1.25rem, 0.5469rem + 3.125vw, 2.5rem);      /* 20 → 40 */
  --space-grid: clamp(0.875rem, 0.5234rem + 1.5625vw, 1.5rem);     /* 14 → 24 */
  --space-gap-sm: clamp(0.75rem, 0.6094rem + 0.625vw, 1rem);       /* 12 → 16 */
  --space-panel: clamp(1.125rem, 0.6328rem + 2.1875vw, 2rem);      /* 18 → 32 */
  --space-stage: clamp(1.125rem, 0.7734rem + 1.5625vw, 1.75rem);   /* 18 → 28 */
  --space-package: clamp(1rem, 0.7188rem + 1.25vw, 1.5rem);        /* 16 → 24 */
  --space-card: clamp(1.375rem, 0.7422rem + 2.8125vw, 2.5rem);     /* 22 → 40 */

  --type-h1: clamp(1.875rem, 0.6797rem + 5.3125vw, 4rem);          /* 30 → 64 */
  --type-h2: clamp(1.625rem, 0.9922rem + 2.8125vw, 2.75rem);       /* 26 → 44 */
  --type-lead: clamp(1.0625rem, 0.957rem + 0.4688vw, 1.25rem);     /* 17 → 20 */
  --type-intro: clamp(1.03125rem, 0.9434rem + 0.3906vw, 1.1875rem); /* 16.5 → 19 */
  --type-say: clamp(1.3125rem, 1.0664rem + 1.0938vw, 1.75rem);     /* 21 → 28 */

  /* Smallest comfortable tap target. */
  --tap: 44px;
}

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

/* Several blocks below set `display`, which would otherwise beat the user
   agent's `[hidden] { display: none }` and leave hidden screens on the page. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--green); }
a:hover { color: var(--green-dark); }

h1, h2, h3 { font-family: var(--nadpis); font-weight: 600; letter-spacing: -0.005em; line-height: 1.08; margin: 0; }

/* German builds long compounds ("Entwicklungsstand", "Schichtübergreifend"):
   in a narrow column they break, hyphenated wherever the browser knows how. */
:lang(de) :is(h1, h2, h3, h4, .arch__label, .pipe__step) { hyphens: auto; overflow-wrap: anywhere; }

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

button { font-family: inherit; }

/* A single, always-visible focus treatment. The exports had none. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.dark :focus-visible,
.pilot :focus-visible { outline-color: var(--gold-soft); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 20px;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  color: var(--white);
}

.shell {
  max-width: var(--page);
  margin: 0 auto;
  /* env() resolves to 0 where there is no notch, so this is the plain gutter
     everywhere except a landscape phone with rounded corners. */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

:root { --ease: cubic-bezier(0.2, 0.7, 0.3, 1); }

/* ------------------------------------------------------- moving between - */

/*
 * The site changed state by jumping: a panel was closed and then it was
 * open, a card was plain and then it was outlined, the six pages under
 * Segmenty were gone and then they were there. Nothing was wrong with any
 * of those states — what was missing was the moment between them, which is
 * what tells a reader that the thing they just pressed is the thing that
 * moved.
 *
 * Between 150 and 250 milliseconds, on what changes and nothing else. The
 * block at the end of this file takes all of it away again for a reader who
 * has asked their system for less movement.
 */

/* What a pointer lands on. Colour and border only — nothing here moves the
   thing itself, so the page does not shift under the pointer. */
a,
.btn,
.stage,
.tile--link,
.pilot__card--link,
.povel__mic,
.povel__poslat,
.odpoved__hlas,
.vyber select,
.viz-dialog__close {
  transition:
    background-color 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease);
}

/* The hotspots on a drawing swell a little, so they get their own. */
.viz .hs circle { transition: r 180ms var(--ease), fill 180ms var(--ease); }

/* ---------------------------------------------------------- the header - */

/*
 * One header on every page (LV-100, phase 2; written by
 * tools/apply-hlavicka.mjs): the name, the menu in the site's order, the
 * language switch, "Odhlásit" and "Vyzkoušet demo". Yellow, as the logo's
 * plate is: variant A of the draft. Dark green on yellow is 9.6:1.
 *
 * Without the script the menu is a row of links that wraps; with it, "Více…"
 * ends the row and opens the side menu (below), and below 1280 px (where the
 * row no longer fits on one line) the row is not shown and the button opens
 * the same side menu. The bar is then one row: the name on the left, the
 * button on the right, 56 px tall on a phone and 64 px on a tablet.
 * "Vyzkoušet demo" is the first thing in the menu: on top of the side menu
 * below 1280 px, at the end of the row from 1440 px, and nowhere in between.
 */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--zluta);
  color: var(--zelena);
  border-bottom: 1px solid rgba(31, 63, 54, 0.14);
}

.hlavicka__radek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  width: min(100% - 2 * var(--okraj), var(--sirka));
  min-height: 68px;
  margin-inline: auto;
}
@media (max-width: 1279px) { .hlavicka__radek { min-height: 64px; } }
@media (max-width: 599px) { .hlavicka__radek { min-height: 56px; column-gap: 12px; } }

.hlavicka__znacka {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  color: var(--zelena);
  font-family: var(--nadpis);
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.hlavicka__znacka:hover { color: var(--zelena); }
.hlavicka__znacka img { width: 36px; height: 36px; }

.hlavicka__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-left: auto; }

.hlavicka__seznam { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }

.hlavicka__seznam a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: 10px;
  color: var(--zelena);
  font-weight: 600;
  text-decoration: none;
}
.hlavicka__seznam a { transition: background-color 180ms var(--ease), color 180ms var(--ease); }
.hlavicka__seznam a:hover { background: rgba(31, 63, 54, 0.09); color: var(--zelena); }
.hlavicka__seznam a[aria-current] { background: var(--zelena); color: var(--bila); }

/* "Více…" at the end of the row opens the side menu (Peter 30. 10.): an item
   like the others, a button because it opens and goes nowhere. Without the
   script there is no panel to open, so there is no button either. */
.hlavicka__vice-polozka { display: none; }
.hlavicka[data-js] .hlavicka__vice-polozka { display: block; }
.hlavicka__vice {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--zelena);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.hlavicka__vice:hover { background: rgba(31, 63, 54, 0.09); }
.hlavicka__vice[aria-current] { background: var(--zelena); color: var(--bila); }

.hlavicka__nastroje { display: flex; align-items: center; gap: 12px; }
.hlavicka .lang { margin: 0; gap: 6px; }
.hlavicka .lang__opt { color: var(--zelena); }
.hlavicka .lang__opt[aria-current] { color: var(--zelena); text-decoration: underline; text-underline-offset: 4px; }
/* Five languages in the bar: the switch packs tighter than elsewhere, so the header stays one row from 1024 px. */
.hlavicka .lang__opt + .lang__opt { border-left-color: rgba(31, 63, 54, 0.35); padding-left: 8px; }

.hlavicka__odhlasit {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--zelena);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hlavicka__odhlasit:hover { color: var(--zelena); }

.hlavicka__cta.btn { min-height: var(--tap); padding: 0 18px; font-size: 16px; }
/* Demo is the first item of the menu already: the button is shown only where
   the row has room for it beside the menu, and on top of the open panel. */
.hlavicka .hlavicka__cta { display: none; }
/* From 1440 px the bar is a little wider than the content, so the button
   fits beside the menu on one row, after the language switch. */
@media (min-width: 1440px) {
  /* With "Co Lussi umí" in the row (redesign, 8. 11.) the bar keeps a
     narrower margin, so the German row fits beside the button too. */
  .hlavicka__radek { width: min(100% - 48px, 1400px); }
  .hlavicka .hlavicka__cta { display: inline-flex; order: 3; }
  /* Beside "Více…" as well: the button packs tighter, its label whole. */
  .hlavicka__cta.btn { padding: 0 10px; }
}

/* Seven items in the row since the demo app joined the menu (Peter 20. 10.)
   and "Více…" after them (30. 10.): the row packs tighter and is not shown
   below 1280 px, the labels stay whole and the type stays its size. Tight
   enough for the widest fallback type too (DejaVu Sans, when the web fonts
   do not load). */
@media (min-width: 1280px) {
  .hlavicka__radek { column-gap: 12px; }
  .hlavicka__nav { column-gap: 6px; }
  .hlavicka__seznam { gap: 0; }
  .hlavicka__seznam a,
  .hlavicka__vice { padding: 0 4px; }
  .hlavicka__nastroje { gap: 8px; }
  .hlavicka .lang { gap: 4px; }
  .hlavicka .lang__opt + .lang__opt { padding-left: 4px; }
}

.hlavicka__menu { display: none; }

@media (max-width: 1279px) {
  .hlavicka[data-js] .hlavicka__menu {
    display: grid;
    place-items: center;
    order: 3;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(31, 63, 54, 0.4);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
  }

  .hlavicka__pruhy,
  .hlavicka__pruhy::before,
  .hlavicka__pruhy::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--zelena);
  }
  .hlavicka__pruhy { position: relative; }
  .hlavicka__pruhy::before,
  .hlavicka__pruhy::after { content: ''; position: absolute; left: 0; }
  .hlavicka__pruhy::before { top: -6px; }
  .hlavicka__pruhy::after { top: 6px; }

  /* Below 1280 px the row is not shown: the button opens the side menu,
     with the row's items moved into it by side.js. */
  .hlavicka[data-js] .hlavicka__nav { display: none; }
}

/*
 * The side menu (Peter 30. 10., tools/apply-hlavicka.mjs, side.js): a modal
 * <dialog> sliding in from the right over the dimmed page. From 1280 px it
 * holds the pages that are not in the row, in their groups; below 1280 px the
 * row's items on top ("Vyzkoušet demo" first, the plain Demo item folded
 * away), the groups under them and the language switch and "Odhlásit" at the
 * bottom. The page under it does not scroll while it is open.
 */
html[data-bocni] { overflow: hidden; }
/* Where the page has a scrollbar that takes room, the room stays, so nothing moves sideways. */
html[data-bocni='mezera'] { scrollbar-gutter: stable; }

.bocni {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 100vw - 40px);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(31, 63, 54, 0.14);
  background: var(--bila);
  color: var(--zelena);
  box-shadow: -12px 0 32px rgba(28, 35, 33, 0.18);
}
.bocni::backdrop { background: rgba(28, 35, 33, 0.5); }
/* It slides in only for a reader who has not asked for less movement. */
@media (prefers-reduced-motion: no-preference) {
  .bocni[open] { animation: bocni-vjede 220ms var(--ease); }
}
@keyframes bocni-vjede { from { transform: translateX(100%); } to { transform: none; } }

/* The whole of the panel, so that a click on the dialog itself is a click on the dimmed page. */
.bocni__obsah {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
  padding: 8px 20px 24px;
}

.bocni__hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(31, 63, 54, 0.14);
}
.bocni__nazev { margin: 0; font-family: var(--nadpis); font-size: 18px; font-weight: 800; }
.bocni__zavrit {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  margin-right: -6px;
  padding: 0;
  border: 1px solid rgba(31, 63, 54, 0.4);
  border-radius: 12px;
  background: transparent;
  color: var(--zelena);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.bocni__zavrit:hover { background: rgba(31, 63, 54, 0.09); }

.bocni__nav { display: flex; flex-direction: column; flex: 1; }

.bocni__skupina {
  margin: 16px 0 4px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bocni__seznam,
.bocni .hlavicka__seznam { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bocni__seznam a,
.bocni .hlavicka__seznam a {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--tap);
  padding: 6px 12px;
  border-radius: 10px;
  color: var(--zelena);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.bocni__seznam a:hover,
.bocni .hlavicka__seznam a:hover { background: rgba(31, 63, 54, 0.09); }
.bocni__seznam a[aria-current],
.bocni .hlavicka__seznam a[aria-current] { background: var(--zelena); color: var(--bila); }

/* The row's items in the panel, below 1280 px: the primary button on top,
   the plain Demo item and the panel's own opener folded away. */
.bocni__hlavni:empty,
.bocni__nastroje:empty { display: none; }
.bocni__hlavni { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.bocni .hlavicka__cta { display: flex; width: 100%; min-height: 52px; font-size: 17px; }
.bocni .hlavicka__seznam a { font-size: 18px; }
.bocni .hlavicka__polozka-demo,
.hlavicka[data-js] .bocni .hlavicka__vice-polozka { display: none; }
.bocni__nastroje { margin-top: auto; padding-top: 16px; }
.bocni .hlavicka__nastroje {
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(31, 63, 54, 0.18);
}

/* A narrow phone: the name alone, without "Lussi Voice", keeps the button in reach. */
@media (max-width: 359px) {
  .hlavicka__jmeno { display: none; }
}

/* The end of every page: what to do next. */
.vyzva {
  background: var(--zluta-svetla);
  padding-block: var(--space-section);
}
.vyzva__obal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.vyzva h2 { max-width: 28ch; }
.vyzva__akce { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------- AI a soukromí - */

/* Lussi's own sentence, word for word as she says it (lussi-ops, K45). */
.soukromi__veta {
  margin: 0;
  padding: 20px 24px;
  border-left: 4px solid var(--green);
  border-radius: 0 16px 16px 0;
  background: var(--white);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
}

.soukromi__veta p { margin: 0; }

.soukromi__body { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 20px; line-height: 1.6; }
.soukromi__stav { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; line-height: 1.6; }
.soukromi__stav .badge { margin-right: 6px; }

.soukromi h2 { margin-top: 24px; }

/* ------------------------------------------------------------ language - */

/* Two links rather than a dropdown: both languages are one tap away, the
   current one reads as a state, and the pair works with no JavaScript at
   all — each link is the same page in the other language, written into the
   markup when /sk/ is generated. Declared here, above the phone blocks, so
   the phone override that puts it inside the menu is not undone by source
   order. */
.lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 auto;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.lang__opt {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 2px;
  text-decoration: none;
  color: var(--muted);
}

.lang__opt[aria-current] { color: var(--ink); font-weight: 600; }

.lang__opt + .lang__opt { border-left: 1px solid var(--border-soft); padding-left: 12px; }

/* ------------------------------------------------------- moved sections - */

/* The landing page became a rack of pages, and three shapes carry them: a
   tile that is itself a link, a heading with its status beside it, and the
   numbered layers on the solution page. */
.tile--link, .pilot__card--link { text-decoration: none; color: inherit; display: block; }

.tile--link:hover, .pilot__card--link:hover { border-color: var(--green-light); }

.tile__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.tile__head h3 { margin: 0; min-width: 0; hyphens: auto; overflow-wrap: break-word; }

.section__lead { max-width: 62ch; font-size: 18px; color: var(--muted); }

.layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

.layer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
}

.layer__num {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-dark);
  font-family: var(--serif);
  font-weight: 600;
}

.layer h3 { margin: 0; }
.layer p { margin: 0; }

/* ------------------------------------------------------- stav vývoje - */

.stav__area { margin-top: var(--space-block); }

.stav__group { margin-top: 14px; }

.stav__label { margin: 0 0 6px; font-size: 15px; color: var(--muted); }

.stav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 20px;
}

.stav__list li { padding: 6px 0; border-bottom: 1px solid var(--rule); }

/* The line a remembered choice puts at the top of the other language's page.
   Added by lang-switch.js, so it never appears without JavaScript — and it
   never moves the reader anywhere on its own. */
.langbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px max(var(--gutter), env(safe-area-inset-left));
  background: var(--band);
  border-bottom: 1px solid var(--border-soft);
  font-size: 15px;
  color: var(--muted);
}

.langbar__go { color: var(--green-dark); }

.langbar__stay {
  min-height: var(--tap);
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* The standing note above the Slovak demo: the pilot itself runs in Czech,
   and that is worth saying where the reader is about to talk to it. */
.notice {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--gold-soft);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
}

/* Six items beside the lockup stay on one line from 828px up, and the menu
   button does not arrive until 767px: in the band between, the header wraps to
   two rows and grows from 128px to 199px. Measured at 828, but carried to 860
   so a machine whose font metrics land a few pixels wider is still covered —
   the cost of tightening the nav where it would have fitted is nil. */
@media (min-width: 768px) and (max-width: 860px) {
  .site-nav { gap: 14px; font-size: 14px; }
}

/* ---- phone header: compact mark on the left, menu button on the right ---- */

@media (max-width: 767px) {
  .site-header {
    flex-wrap: nowrap;
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .site-header__lockup { display: none; }

  .site-header__home { text-decoration: none; }

  .site-header__compact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
    color: var(--green);
  }

  .site-header__compact img { width: 26px; height: 26px; display: block; }

  .site-header__home {
    min-height: var(--tap);
    display: flex;
    align-items: center;
    line-height: 0;
  }

  /* Only shown once nav.js has enhanced the header; without JavaScript the
     nav stays a plain row and a button that cannot open anything would be a
     dead control. */
  .site-header[data-js] .site-header__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  /* Three bars, drawn from one element so the button stays a single box. */
  .site-header__bars,
  .site-header__bars::before,
  .site-header__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .site-header__bars { position: relative; }

  .site-header__bars::before,
  .site-header__bars::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .site-header__bars::before { top: -6px; }
  .site-header__bars::after { top: 6px; }

  [aria-expanded='true'] .site-header__bars { background: transparent; }
  [aria-expanded='true'] .site-header__bars::before { top: 0; transform: rotate(45deg); }
  [aria-expanded='true'] .site-header__bars::after { top: 0; transform: rotate(-45deg); }

  /* Without JavaScript the nav stays a plain wrapped row: the collapsing only
     applies once nav.js has marked the header as enhanced. */
  .site-header[data-js] .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    gap: 0;
    padding: 8px max(var(--gutter), env(safe-area-inset-left)) 12px
      max(var(--gutter), env(safe-area-inset-right));
    background: var(--paper);
    border-bottom: 1px solid var(--border-track);
    box-shadow: 0 14px 30px rgba(28, 35, 33, 0.1);
  }

  .site-header[data-js] .site-nav[data-open] { display: flex; }

  .site-header[data-js] .site-nav a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 10px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--rule);
  }

  .site-header[data-js] .site-nav a:last-child { border-bottom: none; }

  /* Inside the menu the switch is one row of two, not two rows of one: the
     nav's full-width link styling would otherwise stack CZ above SK. */
  .site-header[data-js] .site-nav .lang { margin: 4px 0 0; }

  .site-header[data-js] .site-nav .lang__opt {
    border-bottom: none;
    padding: 0 2px;
    font-size: 15px;
  }

  .site-header[data-js] .site-nav .lang__opt + .lang__opt { padding-left: 12px; }

  /* Inside the hamburger the six segments are a plain indented list: a
     dropdown inside an already-open menu is a second thing to open. */
  .site-header[data-js] .site-nav__group { position: static; }

  .site-header[data-js] .site-nav__more {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--tap);
    padding: 10px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--rule);
  }

  .site-header[data-js] .site-nav__more::after { content: none; }

  .site-header[data-js] .site-nav__group[data-js] .site-nav__sub,
  .site-header[data-js] .site-nav__sub {
    display: flex;
    position: static;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0 0 0 16px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .site-header[data-js] .site-nav__sub a {
    min-height: var(--tap);
    display: flex;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid var(--rule);
  }
}

/* ------------------------------------------------------ the landing page - */

/* Phase 2: the copy and the animated logo side by side, the logo smaller
   than the full-width plate it used to be, so the heading and the two
   buttons are above the fold on a laptop. On a phone the logo comes second. */
.uvod { padding-block: var(--space-hero-top) var(--space-hero-bottom); }
.uvod__mrizka { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-hero-gap); align-items: center; }
.uvod__text { display: flex; flex-direction: column; gap: var(--space-stack); }
.uvod__text h1 { font-size: var(--type-h1); line-height: 1.05; }
/* The home page's heading names four kinds of home (Peter 11. 11.): a size
   down, so it stays four lines on a laptop and five on a phone. */
.uvod__text h1#hero-title { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem); line-height: 1.08; max-width: 20ch; }
.uvod__logo { padding-top: 0; }
.uvod__logo .logo { width: 100%; max-width: 560px; margin-inline: auto; }
@media (max-width: 1023px) {
  .uvod__mrizka { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* On a phone or tablet the logo stands with the heading, above it, not
     under the buttons (Peter 11. 11.): a mark, larger than it was, at most
     80 % of the column and 320 px (test/mobil-browser.test.js). */
  .uvod__logo { order: -1; padding-top: 0; }
  .uvod__logo .logo { width: min(80%, 320px); }
}
/* "Přehrát znovu" by the logo, unobtrusive: a small link-like button under
   its right edge, not a pill in the middle (Peter 11. 11.). */
.uvod__logo .logo__play { margin: 4px auto 0; min-height: 44px; padding: 8px 4px; font-size: 14px; border: 0; text-decoration: underline; text-underline-offset: 3px; opacity: 0.75; }
.uvod__logo .logo__play:hover, .uvod__logo .logo__play:focus-visible { opacity: 1; }

/* Three steps: said, understood, done. */
.kroky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-grid); margin: var(--space-stack) 0 0; padding: 0; list-style: none; counter-reset: krok; }
.kroky .stage { counter-increment: krok; }
.kroky .stage h3::before { content: counter(krok) '. '; }
@media (max-width: 899px) { .kroky { grid-template-columns: minmax(0, 1fr); } }

/* A story from the pilot: the command, what Lussi did, what she said. */
.pribehy { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-grid); margin-block: var(--space-stack); }
.pribeh { display: flex; flex-direction: column; border: 1px solid var(--rule-strong); border-radius: 16px; background: var(--white); overflow: hidden; }
.pribeh__krok { padding: 16px 20px; }
.pribeh__krok + .pribeh__krok { border-top: 1px solid var(--rule); }
.pribeh__krok--povel { background: var(--zluta-svetla); }
.pribeh__co { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pribeh__povel { margin: 0; font-family: var(--nadpis); font-size: 20px; font-weight: 800; color: var(--zelena); }
.pribeh__akce { margin: 0; padding-left: 18px; }
.pribeh__krok p { margin: 0; }

/* For which building: a card per segment page. */
.objekty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-grid); margin: var(--space-stack) 0 0; padding: 0; list-style: none; }
.objekt-karta { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px 22px; border: 1px solid var(--rule-strong); border-radius: 16px; background: var(--white); color: var(--text); text-decoration: none; }
.objekt-karta:hover { border-color: var(--zelena); color: var(--text); }
.objekt-karta h3 { color: var(--zelena); }
.objekt-karta p { margin: 0; color: var(--muted); }

/* -------------------------------------------- capabilities by area - */

/* Stav vývoje and Podrobnosti (tools/generate-plan.mjs): the ten areas as
   cards, each capability with its status and its layer under the name. */
.souhrn { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0 0 var(--space-stack); padding: 0; list-style: none; }
.souhrn li { display: flex; align-items: center; gap: 8px; }
.souhrn__cislo { font-family: var(--nadpis); font-size: 32px; font-weight: 800; color: var(--zelena); }
.oblasti { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-grid); align-items: start; }
.oblast { padding: 20px 22px; border: 1px solid var(--rule-strong); border-radius: 16px; background: var(--white); }
.oblast__nazev { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.oblast__pocet { font-size: 15px; font-weight: 700; color: var(--muted); }
.oblast__seznam { margin: 0; padding: 0; list-style: none; }
.schopnost { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--rule); }
.schopnost__stitky { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.schopnost__vrstva { font-size: 13px; color: var(--muted); }
.rozcesti { margin-top: var(--space-stack); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* ------------------------------------------- prezentace a historie funkcí - */

.uvod__prezentace { margin: 16px 0 0; font-weight: 600; }
.prezentace { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.prezentace__verze { margin: 0; color: var(--muted); }
.historie__legenda { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-stack); padding: 0; list-style: none; }
.historie__legenda li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.historie__den { margin-top: var(--space-stack); }
.historie__datum { margin: 0 0 8px; }
.historie__seznam { margin: 0; padding: 0; list-style: none; }
.zmena { padding: 12px 0; border-top: 1px solid var(--rule); }
.zmena__hlava { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; }
.zmena__druh { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--zelena); }
.zmena__id { font-size: 13px; font-weight: 600; color: var(--muted); }
.zmena__stav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zmena__popis { margin: 0; }

/* ------------------------------------------------------------------ hero - */

.hero {
  padding-top: var(--space-hero-top);
  padding-bottom: var(--space-hero-bottom);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-hero-gap);
  align-items: center;
}

.hero__copy { display: flex; flex-direction: column; gap: var(--space-stack); }

/* The carousel that used to fill the right half now lives on /demo/. A hero
   with only copy in it keeps the same rhythm by taking the whole width and
   letting the lead set its own measure, rather than leaving half the screen
   empty above the fold. */
.hero:not(:has(.situation)) { grid-template-columns: minmax(0, 1fr); }

.hero:not(:has(.situation)) .hero__lead { max-width: 60ch; }

.hero:not(:has(.situation)) {
  padding-top: calc(var(--space-hero-top) * 0.55);
  padding-bottom: calc(var(--space-hero-bottom) * 0.55);
}

.eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-text);
}

.hero h1 { font-size: var(--type-h1); line-height: 1.05; }

.hero__lead {
  margin: 0;
  font-size: var(--type-lead);
  line-height: 1.6;
  color: var(--muted);
  max-width: 520px;
}

.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  /* A flex box, so the label sits in the middle of whatever height the
     button is given (a min-height in the header, a full-width row on a phone). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
}

.btn--primary { background: var(--green); color: var(--white); border: 2px solid var(--green); }
.btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
.btn--ghost { border: 2px solid var(--green); color: var(--green); background: transparent; }
.btn--ghost:hover { background: var(--green-pale); color: var(--green-dark); }

@media (max-width: 1023px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}

/* Full-width buttons read as one clear pair of actions on a phone. */
@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { text-align: center; }
}

/* ------------------------------------------------------------- badges ---- */

.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge--sm { font-size: 12px; padding: 3px 8px; }

/* Status colours, as data/katalog-schopnosti.json defines them: one full
   colour per status, the same on a badge, on a drawn point and in a legend.
   Classes rather than inline styles so the Content-Security-Policy needs no
   'unsafe-inline'. Two classes, so that no text colour of the block a badge
   sits in (.flow__node span, say) can win over the badge's own: the pairs
   are chosen for WCAG AA and test/kontrast-browser.test.js holds them to it.
   The green keeps the catalogue's colour; white on it is 5:1. */
.badge.badge--ok { background: #1E7F4F; color: #FFFFFF; }
.badge.badge--partial { background: #F08A24; color: #1C2321; }
.badge.badge--soon { background: #6D4C9F; color: #FFFFFF; }
.badge.badge--maybe { background: #AEB8C4; color: #1C2321; }
.badge.badge--platform { background: #E3E9F1; color: #23344D; }
.badge.badge--check { background: #F3E6C4; color: #5A4A20; }
.badge--none { display: none; }

/* How many of a pillar's situations are as far along as its badge says. The
   badge alone would let one finished situation out of ten read as a
   finished pillar. */
.tile__count { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ------------------------------------------------- Lussi core a balíčky - */

/* What the base holds and what is bought on top. The core is one strong card,
 * the packages are tiles whose fill says how they are paid for: solid for the
 * base, half for part of it, a dashed outline for an extra. The sign in front
 * of the name says the same thing in a word, because a fill is not readable
 * to everyone. */

.balicky { display: flex; flex-direction: column; gap: 16px; margin: 24px 0 8px; }
.balicky__title { margin: 0; font-size: 20px; font-family: var(--sans); }

.balicky__obor { margin-top: 16px; padding: 16px 20px; border-radius: 16px; background: var(--card); }
.balicky__obor .balicky__lines { margin-top: 8px; }

.balicky__core {
  background: var(--ink);
  color: var(--paper);
  border-radius: 16px;
  padding: var(--space-panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.balicky__core h3 { margin: 0; font-size: 22px; font-family: var(--sans); color: inherit; }
.balicky__core p { margin: 0; line-height: 1.6; }
.balicky__kicker { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; }
.balicky__hw { opacity: 0.75; font-size: 15px; }

.balicky__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.balicky__item {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--white);
}

.balicky__item.mark--base { background: var(--white); border-color: var(--rule-strong); }
.balicky__item.mark--part { background: linear-gradient(90deg, var(--white) 50%, transparent 50%); }
.balicky__item.mark--extra { background: transparent; border-style: dashed; }

.balicky__name { margin: 0; font-weight: 600; }
.balicky__mark { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.mark { font-weight: 700; }

.balicky__none,
.balicky__legend,
.balicky__note { margin: 0; color: var(--muted); font-size: 14px; }
.balicky__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.balicky__lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.balicky__lines li { line-height: 1.6; }
.balicky__core .balicky__lines { padding-left: 18px; }

/* The empty frame on a segment whose drawing is not done yet. */
.viz__frame--prazdny {
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--rule-strong);
  border-radius: 16px;
  background: var(--white);
}

/* ---------------------------------------------------------- the segments - */

/* The one plain table on the site: six segments, what each one is, and how
 * far Lussi has got with it. On a phone the three columns become three
 * lines, because a sentence in a third of 360 px is a column of syllables. */

.segments {
  width: 100%;
  margin: 24px 0 12px;
  border-collapse: collapse;
  text-align: left;
}

.segments th,
.segments td { padding: 12px 14px 12px 0; vertical-align: top; }

.segments thead th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule-strong);
}

.segments tbody tr + tr th,
.segments tbody tr + tr td { border-top: 1px solid var(--rule); }

.segments tbody th { width: 22%; font-weight: 600; hyphens: auto; overflow-wrap: break-word; }
.segments tbody td:last-child { width: 1%; white-space: nowrap; padding-right: 0; }

.segments__note { color: var(--muted); font-size: 15px; }

/* The two-column variant on /nabidka/: a name and a sentence, where the
 * segments table has a name, a sentence and a badge. Without this the badge
 * column's `white-space: nowrap` would be inherited by the sentence and push
 * the page sideways. */
.segments--pair tbody th { width: 30%; }
.segments--pair tbody td:last-child { width: auto; white-space: normal; }

@media (max-width: 767px) {
  .segments thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .segments,
  .segments tbody,
  .segments tr,
  .segments th,
  .segments td { display: block; width: auto; }

  .segments tbody tr { padding: 14px 0; border-top: 1px solid var(--rule); }
  .segments tbody tr + tr th,
  .segments tbody tr + tr td { border-top: 0; }
  .segments th,
  .segments td { padding: 0 0 6px; }
  .segments tbody td:last-child { width: auto; padding-bottom: 0; }
  /* The name's column width is the desktop table's; stacked it is the row's. */
  .segments tbody th,
  .segments--pair tbody th { width: auto; }
}

/* --------------------------------------------------------------- demo ---- */

/* Less air above than a section has: the demo has to start on the first screen. */
.demo { background: var(--band); padding: clamp(1.25rem, 0.5rem + 3vw, 2.5rem) 0 var(--space-section); }

.demo__inner { display: flex; flex-direction: column; gap: var(--space-stack); }

.demo__intro { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }

/* The demo's heading is the page's h1 and keeps the h2 size it was drawn with. */
.demo__intro h1, .demo__intro h2 { font-size: var(--type-h2); }

.demo__intro p { margin: 0; font-size: var(--type-intro); line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------ the demo itself - */

/* One place for a command, then the answer, then the house. A phone reads
   them in that order in one column; from 1024px the command and the answer
   stand on the left and the house beside them. The diagram of what happened
   inside Lussi is folded under both. */
.zkus {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-grid);
  align-items: start;
}

@media (min-width: 1024px) {
  .zkus { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .zkus > .steps { grid-column: 1 / -1; }
}

.zkus__povel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* The command: the microphone, the field and a send button, in one pill. */
.povel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--field-border);
  border-radius: 999px;
}

.povel:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }

.povel__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 10px 8px 10px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;
}

.povel__input:focus { outline: none; }

.povel__mic {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--green-dark);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.povel__mic:hover { background: var(--green-light); }
.povel__mic[data-stav='pripravuje'],
.povel__mic[data-stav='posloucha'],
.povel__mic[data-stav='posloucha-dal'] { background: var(--green); color: var(--white); }
.povel__mic[data-stav='posloucha'],
.povel__mic[data-stav='posloucha-dal'] { animation: mic-pulse 1.2s ease-in-out infinite; }
.povel__mic svg { width: 24px; height: 24px; }

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 93, 80, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(47, 93, 80, 0); }
}

.povel__poslat {
  flex: none;
  min-height: 48px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.povel__poslat:hover { background: var(--green-dark); }

.povel__stav { margin: -4px 0 0; padding-inline: 16px; font-size: 14px; color: var(--muted); }

/* In a conversation: the way out, next to what the microphone says. */
.povel__rozhovor {
  align-self: flex-start;
  margin: -4px 0 0 16px;
  min-height: var(--tap);
  padding: 8px 16px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--white);
  color: var(--green-dark);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.povel__rozhovor:hover { background: var(--green-pale); }

/* Without the language model every command stands alone, and the page says so. */
.povel__samostatny { margin: 0; padding-inline: 16px; font-size: 14px; color: var(--text); font-weight: 500; }

/* A quiet way to start the conversation over. */
.povel__nova {
  align-self: flex-start;
  min-height: var(--tap);
  margin: -8px 0 0 4px;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--green-dark);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* What the microphone or the keyboard caught, under the field. */
.povel__prepis { margin: -4px 0 0; padding-inline: 16px; font-size: 14px; color: var(--text); }

/* The place and the category as dropdowns, side by side from 480px, one
   above the other below; the commands as buttons across both under them. */
.vyber { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

@media (min-width: 480px) {
  .vyber { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vyber__pole--dotaz { grid-column: 1 / -1; }
}

.vyber__pole { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vyber label,
.vyber__nadpis { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }

.vyber select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-overflow: ellipsis;
}

.vyber select:disabled { color: var(--disabled); background: var(--card); }

/* The commands: one button under another in a box of their own that
   scrolls, about seven high, so a place with ninety commands does not push
   the answer off the screen. Grouped under the category's name when no
   category is picked. The one picked stays marked (aria-pressed). */
.dotazy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 392px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: var(--card);
}

/* The box has a height of its own, so a flex column would squeeze its
   children to fit it; they keep their height and the box scrolls instead,
   or a command on three lines spills over its button's edge. */
.dotazy > * { flex-shrink: 0; }

.dotazy__kategorie { margin: 8px 4px 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dotazy__kategorie:first-child { margin-top: 0; }

.dotaz {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.dotaz:hover { border-color: var(--green); }
.dotaz[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--white); }
.dotaz[aria-pressed="true"] .stitek { background: var(--white); color: var(--text); }
.dotaz__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Who speaks, in a place with staff: a small icon on each command, and a
   heading with the same icon over each block. */
.dotaz__role { display: inline-flex; flex: none; color: var(--muted); }
.dotaz__role svg { width: 20px; height: 20px; }
.dotaz[aria-pressed="true"] .dotaz__role { color: var(--white); }
.dotazy__blok {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 8px 4px 4px;
  border-top: 1px solid var(--field-border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.dotazy__blok:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dotazy__blok svg { width: 20px; height: 20px; flex: none; }

/* Who said the command and where it went, under it. */
.odpoved__kdo { margin: -4px 0 0; font-size: 14px; color: var(--muted); }
.dotaz .stitek { flex: none; }

/* Lussi's answer. */
.odpoved {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  background: var(--white);
  border-radius: 20px;
}

.odpoved[aria-busy='true'] .odpoved__text { color: var(--muted); }

.odpoved__head { display: flex; align-items: center; gap: 10px; }
.odpoved__head h3 { margin: 0; font-size: 18px; font-family: var(--sans); }

.odpoved__hlas {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--green-dark);
  cursor: pointer;
}

.odpoved__hlas:hover { background: var(--card); }
.odpoved__hlas[aria-pressed='true'] { color: var(--sage); }
.odpoved__hlas svg { width: 22px; height: 22px; }

.odpoved__povel { margin: 0; font-size: 15px; color: var(--muted); }
.odpoved__povel strong { color: var(--ink); }

.odpoved__text {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 18px 18px 18px 4px;
  background: var(--card);
  font-size: 17px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Lussi thinks: while the model is asked, three dots after what is shown
   (the word, or the answer as it is being written). Still without motion. */
.odpoved[aria-busy='true'] .odpoved__text::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 6px;
  margin-left: 8px;
  vertical-align: middle;
  background: radial-gradient(circle, var(--green) 2.5px, transparent 3px) 0 0 / 8px 6px repeat-x;
}

@media (prefers-reduced-motion: no-preference) {
  .odpoved[aria-busy='true'] .odpoved__text::after { animation: odpoved-premysli 1s ease-in-out infinite; }
}

@keyframes odpoved-premysli { 50% { opacity: 0.35; } }

.odpoved__dodatek { display: block; margin-top: 6px; font-size: 15px; font-style: italic; color: var(--muted); }
.odpoved__hlaseni { display: block; }
.stopa__misto { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.stopa__hlaseni + .stopa__hlaseni { margin-top: 8px; }
.odpoved__hlaseni + .odpoved__hlaseni { margin-top: 10px; }
.odpoved__misto { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
/* One label for the whole demo: every value in it is simulated. */
.demo__ukazka { margin: 0 0 12px; }

.odpoved__potvrzeni,
.odpoved__telefon {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--gold);
  border-radius: 14px;
  background: #FBF6EA;
}

.odpoved__potvrzeni p,
.odpoved__telefon p { margin: 0; font-size: 15px; line-height: 1.5; }
/* Asked in a public space: the personal answer, in the app, not aloud. */
.odpoved__telefon .aplikace__otazka { font-size: 17px; font-weight: 600; }

/* Where a guest asks from: a small mark beside who speaks. */
.dotaz__misto { display: inline-flex; flex: none; margin-left: -6px; color: var(--muted); }
.dotaz__misto svg { width: 16px; height: 16px; }
.dotaz[aria-pressed="true"] .dotaz__misto { color: var(--white); }
/* The simulated Lussi Voice app: a phone's confirmation, a fingerprint. */
.aplikace { max-width: 420px; border-color: var(--green); background: var(--white); box-shadow: 0 6px 20px rgb(0 0 0 / 0.08); }
.aplikace__hlavicka { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-weight: 700; }
.aplikace__simulace { font-size: 13px; font-weight: 600; color: var(--muted); }
.odpoved__potvrzeni .aplikace__otazka { font-size: 18px; font-weight: 700; }
.odpoved__potvrzeni .aplikace__pozn { font-size: 14px; color: var(--muted); }
.aplikace__otisk { display: inline-flex; align-items: center; gap: 8px; }
.aplikace__ikona { display: inline-flex; width: 22px; height: 22px; }
.aplikace__ikona svg { width: 100%; height: 100%; }
.odpoved__tlacitka { display: flex; flex-wrap: wrap; gap: 8px; }

.odpoved__tlacitka button {
  min-height: var(--tap);
  padding: 8px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* How far along something is: small and neutral. Lussi does not say it. */
.stitek {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* The simulated house. */
.dum {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  background: var(--white);
  border-radius: 20px;
  min-width: 0;
}

.dum__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.dum__head h3 { margin: 0; font-size: 18px; font-family: var(--sans); }
.dum__rezim { font-size: 14px; color: var(--muted); }

.dum__plan { position: relative; }

/* The place, as an axonometric cut-away (demo-dum.js). */
.axo { display: block; width: 100%; height: auto; }
.axo__nazev {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  fill: var(--ink);
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}
/* On a phone the drawing is shown close up, so its labels are smaller. */
@media (max-width: 599px) {
  .axo__nazev { font-size: 15px; }
}
.axo__ikona { color: var(--green-dark); }
.axo__ikona circle { fill: var(--white); stroke: var(--green-dark); stroke-width: 1.5; }
.axo__ikona[data-zmena='true'] circle { fill: #FFC915; }
/* The ring round a changed device's icon (demo-dum.js, ikona). Without
   motion it stays as a still ring; with motion it spreads out three times,
   in the step of its change. */
.axo__ikona[data-zmena='true'] .axo__indikator {
  fill: none;
  stroke: var(--green-dark);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.35);
}
.axo__mistnost[data-svetlo='dim'] .axo__zare { opacity: 0.55; }
.axo__mistnost[data-zmena='true'] .axo__podlaha { stroke: #FFC915; stroke-width: 2.5; }

@media (prefers-reduced-motion: no-preference) {
  .axo__mistnost[data-zmena='true'] .axo__zare { animation: axo-zare 900ms ease-out both; }
  .axo__mistnost[data-zmena='true'] .axo__podlaha { animation: axo-obrys 700ms ease-in-out 2; }
  .axo__ikona[data-zmena='true'] {
    animation: axo-pop 500ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
    transform-box: fill-box;
    transform-origin: center;
  }
  .axo__ikona[data-zmena='true'] .axo__indikator {
    animation: axo-indikator 1.1s ease-out 3 both;
  }
}

@keyframes axo-zare { from { opacity: 0; } }

/* The changes, each on the spot where it happens (demo-dum.js, efekty).
   Several run one after another. Only opacity and transform move. */
.axo__efekt { transform-box: fill-box; }
.axo__krok-1 { animation-delay: 0.35s !important; }
.axo__krok-2 { animation-delay: 0.7s !important; }
.axo__krok-3 { animation-delay: 1.05s !important; }
.axo__krok-4 { animation-delay: 1.4s !important; }
.axo__krok-5 { animation-delay: 1.75s !important; }
.axo__krok-6 { animation-delay: 2.1s !important; }
.axo__krok-7 { animation-delay: 2.45s !important; }

/* Without motion the change is simply there: the effects themselves are
   only the movement, so they stay unseen. */
.axo__svetlo,
.axo__roleta,
.axo__vrata,
.axo__obrazovka,
.axo__noty,
.axo__vlna,
.axo__puls { opacity: 0; }
.axo__nota { font-size: 22px; fill: var(--green-dark); }
.axo__nalada { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .axo__svetlo[data-smer='zap'] { animation: axo-rozzarit 0.9s ease-out both; }
  .axo__svetlo[data-smer='vyp'] { animation: axo-zhasnout 0.9s ease-in both; }
  .axo__roleta { transform-origin: top; }
  .axo__roleta[data-smer='dolu'] { animation: axo-roleta-dolu 1s ease-in-out both; }
  .axo__roleta[data-smer='nahoru'] { animation: axo-roleta-nahoru 1s ease-in-out both; }
  .axo__vrata { transform-origin: top; }
  .axo__vrata[data-smer='otevrit'] { animation: axo-vrata-otevrit 1.1s ease-in-out both; }
  .axo__vrata[data-smer='zavrit'] { animation: axo-vrata-zavrit 1.1s ease-in-out both; }
  .axo__obrazovka[data-smer='zap'] { animation: axo-obrazovka 0.8s ease-out both; }
  .axo__obrazovka[data-smer='vyp'] { animation: axo-zhasnout 0.6s ease-in both; }
  .axo__noty { animation: axo-viditelne 1.2s linear both; }
  .axo__nota { transform-box: fill-box; animation: axo-nota 1.2s ease-out both; }
  .axo__nota-1 { animation-delay: 0.15s; }
  .axo__nota-2 { animation-delay: 0.3s; }
  .axo__vlna { transform-origin: center; animation: axo-vlna 1.2s ease-out both; }
  .axo__puls { transform-origin: center; animation: axo-puls 0.9s ease-out both; }
  .axo__nalada.axo__efekt { animation: axo-nalada 1.2s ease both; }
  /* The golf resort: rain moving across from the west, lightning rings. The
     distance is DEST_POSUN metres along x in demo-dum.js. */
  .axo__dest-pas { animation: axo-dest 7s linear infinite; }
  .axo__blesk-kruh { transform-box: fill-box; transform-origin: center; animation: axo-blesk 1.6s ease-out infinite; }
  .axo__baterie { animation: axo-baterie 1.4s ease-in-out infinite; }
}

.axo__jamka { font-family: var(--sans); font-size: 15px; font-weight: 700; fill: #1F4238; }
.axo__patro { font-family: var(--sans); font-size: 24px; font-weight: 700; fill: #1F4238; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 4px; stroke-linejoin: round; }
/* How far along what Lussi does in a room: the badges' colours (the care home). */
.axo__stav text { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: #FFFFFF; }
.axo__stav[data-stav='ok'] rect { fill: #1E7F4F; }
.axo__stav[data-stav='partial'] rect { fill: #F08A24; }
.axo__stav[data-stav='partial'] text { fill: #1C2321; }
.axo__stav[data-stav='soon'] rect { fill: #6D4C9F; }
.axo__pocasi, .axo__hriste { pointer-events: none; }
@keyframes axo-dest { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(397.5px, 229.5px); opacity: 0; } }
@keyframes axo-blesk { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes axo-baterie { 50% { opacity: 0.35; } }

@keyframes axo-rozzarit { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes axo-zhasnout { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes axo-roleta-dolu { 0% { opacity: 1; transform: scaleY(0); } 85% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes axo-roleta-nahoru { 0% { opacity: 1; transform: scaleY(1); } 85% { opacity: 1; transform: scaleY(0); } 100% { opacity: 0; transform: scaleY(0); } }
@keyframes axo-vrata-otevrit { 0% { opacity: 1; transform: scaleY(1); } 90% { opacity: 1; transform: scaleY(0.05); } 100% { opacity: 0; transform: scaleY(0.05); } }
@keyframes axo-vrata-zavrit { 0% { opacity: 1; transform: scaleY(0.05); } 90% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes axo-obrazovka { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes axo-viditelne { 0%, 100% { opacity: 1; } }
@keyframes axo-nota { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }
@keyframes axo-vlna { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes axo-puls { 0% { opacity: 1; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes axo-nalada { from { opacity: 0; } }
@keyframes axo-indikator { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes axo-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes axo-obrys { 50% { stroke-width: 6; } }

/* On a phone the drawing zooms to what changed; this shows all of it again. */
.dum__celek {
  align-self: flex-start;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--green-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.dum__zmeny {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 12px;
  background: var(--green-pale);
  font-size: 14px;
}

.dum__zmeny li { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; }
.dum__zmena-nazev { font-weight: 600; }

/* The diagram, folded. A details element is a block, not a flex box, in
   every engine; its children are spaced by margin. */
details.steps { display: block; }
details.steps > * + * { margin-top: 16px; }
details.steps > .stopa__pozn { margin-top: 8px; }

/* The diagram, folded. */
.steps > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.steps > summary::-webkit-details-marker { display: none; }

.steps > summary::before {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 180ms var(--ease);
}

.steps[open] > summary::before { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .povel__mic[data-stav='posloucha'],
  .povel__mic[data-stav='posloucha-dal'] { animation: none; }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 15px;
  color: var(--muted);
  list-style: none;
  margin: 0;
  padding: 0;
}

.legend li { display: flex; align-items: center; gap: 8px; margin-right: 12px; }

/* The legend sits under a section lead: a little air above and below it. */
.section__lead + .legend,
.legend + .calc__note { margin-top: 12px; }

/* How many capabilities for a kind of building are in which state. */
.pocty { margin-top: 16px; }
.pocty__title { margin: 0 0 8px; font-size: 15px; color: var(--muted); }

.panel {
  background: var(--white);
  border-radius: 20px;
  padding: var(--space-panel);
  display: flex;
  flex-direction: column;
  gap: var(--space-grid);
}

.panel__step { display: flex; align-items: baseline; gap: 12px; }

.panel__num { font-family: var(--serif); font-size: 28px; color: var(--gold-text); }

.panel__step h3 { margin: 0; font-size: 22px; font-family: var(--sans); }

/* The live diagram "Co se děje v Lussi" (demo-diagram.js). A white panel
   like the state panel under it, and the same blocks as the voice pipeline
   and the ecosystem on /reseni/ and on the landing page: numbered stages on
   one line, cards with a thin border, the status as a badge. */
.steps {
  background: var(--white);
  color: var(--text);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 767px) {
  .steps,
  .odpoved,
  .dum { padding: var(--space-panel); }
}

.steps__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.steps__head h3 { margin: 0; font-size: 20px; font-family: var(--sans); }

.steps__command { margin: 0; font-size: 15px; color: var(--muted); }
.steps__command strong { color: var(--ink); }

.steps__empty { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }

/* A phone shows three devices and folds the rest into one line. */
.stopa__vice { display: none; }

@media (max-width: 767px) {
  .stopa__zarizeni[data-zkraceno] > .zar:nth-child(n + 4) { display: none; }

  .stopa__vice {
    display: block;
    width: 100%;
    min-height: var(--tap);
    margin-top: 8px;
    padding: 8px 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--white);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }
}

.stopa__pozn { margin: -8px 0 0; font-size: 13px; color: var(--sage); }

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

/* One stage: a numbered bullet on the line, and what happened beside it.
   It comes in faded and slightly low, and settles. */
.stopa__etapa {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.stopa__etapa.is-on { opacity: 1; transform: none; }

/* The line from one stage to the next. */
.stopa__etapa:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 2px;
  width: 2px;
  background: var(--rule-strong);
}

.stopa__bod {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--on-dark);
  font-family: var(--serif);
  font-size: 16px;
}

.stopa__bod svg { width: 18px; height: 18px; }
.stopa__etapa[data-etapa='potvrzeni'] .stopa__bod { background: var(--gold); }
.stopa__etapa--skip .stopa__bod { background: var(--dot-off); }
.stopa__etapa--skip .stopa__nazev,
.stopa__etapa--skip .stopa__popis { color: var(--disabled); }

.stopa__obsah { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 4px; }

.stopa__nazev {
  margin: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  font-size: 16px;
  font-weight: 600;
}

.stopa__ms { font-size: 13px; font-weight: 500; color: var(--sage); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stopa__popis { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.stopa__popis--drobne { font-size: 13px; }

/* One sentence, several actions: the plan branches off the line. */
.stopa__akce {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--green-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stopa__akce li { position: relative; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }

.stopa__akce li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0.7em;
  width: 9px;
  height: 2px;
  background: var(--green-light);
}

/* The confirmation: nothing happens to the garage, the front door, the
   alarm or the water valve until the reader says so. */
.stopa__karta {
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 2px solid var(--gold);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stopa__citlive { margin: 0; padding-left: 18px; font-size: 14px; }
.stopa__tlacitka { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.stopa__tlacitka button {
  min-height: var(--tap);
  padding: 10px 20px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.stopa__potvrdit { background: var(--green); color: var(--white); border: 0; }
.stopa__potvrdit:hover { background: var(--green-dark); }
.stopa__zrusit { background: var(--white); color: var(--ink); border: 1px solid var(--border); }
.stopa__zrusit:hover { background: var(--paper); }
.stopa__vysledek { margin: 0; font-size: 15px; font-weight: 600; color: var(--green-dark); }

/* The devices: before → after, with the status of whatever is not ready. */
.stopa__zarizeni {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.zar {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}

.zar__ikona { width: 24px; height: 24px; color: var(--green); }
.zar__ikona svg { display: block; }
.zar__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zar__nazev { font-size: 14px; font-weight: 600; line-height: 1.3; }
.zar__zmena { font-size: 13px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.zar .badge { grid-column: 3; align-self: start; }

.stopa__bublina {
  max-width: 100%;
  padding: 12px 14px;
  background: var(--green-pale);
  border-radius: 14px 14px 14px 4px;
}

.stopa__bublina p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.stopa__bublina .stopa__dodatek { margin-top: 6px; font-style: italic; color: var(--muted); }

/* Lussi's own sentence about how far along this is, under her reply. */
.msg__dodatek { display: block; margin-top: 6px; font-size: 15px; font-style: italic; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  /* The whole diagram at once: no fade, no rise. */
  .stopa__etapa { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------- segments --- */

.section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section--flat { padding: var(--space-section) 0; }
.section--white { background: var(--zluta-svetla); }
.section > h2, .section__inner > h2 { font-size: var(--type-h2); }

.section__inner { display: flex; flex-direction: column; gap: var(--space-stack); }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-grid); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-grid); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-grid); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-grid); }

.tile {
  background: var(--white);
  border-radius: 16px;
  padding: var(--space-panel);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tile h3 { margin: 0; font-size: 22px; font-family: var(--sans); }
.tile p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

.stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-stage);
  border-top: 3px solid var(--green);
}

.stage__num { font-family: var(--serif); font-size: 36px; color: var(--gold-text); }
.stage h3 { margin: 0; font-size: 20px; font-family: var(--sans); }
.stage p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .grid-4, .grid-3, .grid-2, .grid-auto { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- model --- */

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

.model__copy { display: flex; flex-direction: column; gap: 20px; }
.model__copy h2 { font-size: var(--type-h2); }
.model__copy p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
.model__copy .model__note { font-size: 16px; }

.model__cta { align-self: flex-start; }

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

.package {
  background: var(--white);
  border-radius: 14px;
  padding: var(--space-package);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.package__kind {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-text);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.package__price { font-family: var(--serif); font-size: 30px; }

.package__price--unset {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}
.package__what { font-size: 15px; color: var(--muted); }

@media (max-width: 1023px) {
  .model { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .packages { grid-template-columns: minmax(0, 1fr); }
  .model__cta { align-self: stretch; text-align: center; }
}

/* -------------------------------------------------------------- pilot --- */

.pilot { background: var(--green); color: var(--on-dark); padding: var(--space-section) 0; }
.pilot h2 { font-size: var(--type-h2); }
.pilot a { color: var(--gold-pale); }

.pilot__card {
  border: 1px solid var(--green-light);
  border-radius: 16px;
  padding: var(--space-panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pilot__kind {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-pale);
}

.pilot__card h3 { margin: 0; font-size: 24px; font-family: var(--sans); }
.pilot__card p { margin: 0; font-size: 17px; line-height: 1.6; color: #E4EDE8; }

.pilot__facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

.pilot__facts strong { color: var(--ink); }
.pilot__facts a { color: var(--green-dark); }

/* On the green pilot band the same facts are light; on the contact page,
   which is paper, they are ink. */
.pilot .pilot__facts { color: #E4EDE8; }
.pilot .pilot__facts strong,
.pilot .pilot__facts a { color: var(--white); }

/* ------------------------------------------------------- the plan --- */

.plan__group { margin-top: 32px; }

.plan__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 17px;
  font-weight: 500;
  color: var(--muted);
}

.plan__count {
  font-weight: 600;
  color: var(--text);
}

.plan__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 8px 24px;
}

.plan__list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.plan__name { display: block; }

.plan__vrstva {
  display: block;
  font-size: 14px;
  color: var(--muted);
}

/* ------------------------------------------ podrobnosti and ukázky --- */

.podrobnosti__h { font-size: 20px; margin: 0 0 8px; }

.ukazky__list {
  list-style: none;
  margin: 16px 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 12px 24px;
}

.ukazky__item {
  padding: 14px 16px;
  background: var(--card);
  border-radius: 12px;
}

.ukazky__povel { margin: 0 0 6px; font-weight: 600; }
.ukazky__odpoved { margin: 0; color: var(--muted); }

.ukazky__snimky { margin-top: 16px; align-items: start; }

@media (min-width: 768px) {
  .grid-2.ukazky__snimky { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.ukazky__snimek { margin: 0; }

.ukazky__snimek img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--rule-strong);
}

.ukazky__snimek figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------- footer --- */

.site-footer {
  max-width: none;
  margin: 0;
  /* Redesign (Peter 8. 11.): a full plate of the brand's dark green, its
     text kept to the width of the page. */
  padding-inline: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
  background: var(--zelena);
  border-top: 0;
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--on-dark-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer a { color: var(--zluta); }
.site-footer a:hover { color: var(--slonovina); }

.site-footer__logout { margin-left: auto; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--zluta);
}

@media (max-width: 767px) {
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  .site-footer__logout {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
}

/* ------------------------------------------------ calculator: breakeven --- */

.calc__breakeven {
  background: var(--white);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.calc__breakeven h2 { margin: 0 0 4px; }

.calc__be-value {
  margin: 12px 0 4px;
  font-family: var(--nadpis);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--green);
}

.calc__be-value small { font-size: 20px; color: var(--muted); }

.calc__be-lead { margin: 0 0 12px; }

.calc__be-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.calc__navrh {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gold-pale);
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

/* --------------------------------------------------------- onboarding --- */

.wizard {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 430px;
  margin: 0 auto;
  background: var(--paper);
}

@media (min-width: 720px) {
  /* The export was a fixed 390x844 phone. On a desktop it becomes a centred
     card on the page ground rather than a full-bleed column. */
  .wizard {
    max-width: 520px;
    min-height: 0;
    margin: 40px auto;
    border: 1px solid var(--border-track);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(28, 35, 33, 0.08);
  }
  body.wizard-page { padding: 0 20px 40px; }
}

.wizard__head {
  padding: 24px max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.wizard__mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text);
  text-decoration: none;
}

.wizard__mark img { width: 28px; height: 28px; }

.wizard__step { font-size: 14px; color: var(--muted); }

.wizard__track {
  height: 6px;
  background: var(--border-track);
  border-radius: 999px;
  overflow: hidden;
}

.wizard__fill { height: 6px; background: var(--green); border-radius: 999px; transition: width 180ms ease; }

.wizard__body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 8px max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wizard__welcome { display: flex; flex-direction: column; gap: 18px; padding-top: 40px; }
.wizard__welcome img { display: block; width: 100%; height: auto; }
.wizard__welcome h1 { font-size: 34px; line-height: 1.15; }
.wizard__welcome h2 { font-size: 30px; line-height: 1.15; }
.wizard__welcome p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.wizard__welcome p + p { font-size: 15px; line-height: 1.5; }

.wizard__q { display: flex; flex-direction: column; gap: 8px; }
.wizard__q h2 { font-size: 26px; line-height: 1.2; }
.wizard__q p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

.options { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }

.option {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid var(--border-soft);
  background: var(--white);
  color: var(--text);
  border-radius: 12px;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.option[aria-pressed='true'], .option[aria-checked='true'] {
  border-color: var(--green);
  background: var(--green-pale);
}

.option__label { font-weight: 500; }

.wizard__multi { margin: 0; font-size: 14px; color: var(--muted); }

.summary__rows {
  background: var(--white);
  border-radius: 14px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
}

.summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.summary__row:last-child { border-bottom: none; }

.summary__qa { display: flex; flex-direction: column; gap: 2px; }
.summary__q { font-size: 13px; color: var(--muted); }
.summary__a { font-size: 15px; font-weight: 600; }

.recs {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recs h3 { margin: 0; font-size: 17px; font-family: var(--sans); }
.recs li { font-size: 15px; line-height: 1.5; color: var(--on-dark-list); }
.recs ul { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }

.wizard__foot {
  /* The action bar is the last thing above the home indicator on a phone. */
  padding: 12px max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--border-track);
  background: var(--paper);
}

.wizard__back {
  min-height: 52px;
  padding: 12px 20px;
  border: 2px solid var(--green);
  background: transparent;
  color: var(--green);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.wizard__next {
  flex-grow: 1;
  min-height: 52px;
  padding: 12px 20px;
  border: none;
  background: var(--green);
  color: var(--white);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.wizard__next[disabled] { background: var(--disabled); cursor: not-allowed; }

.wizard__home {
  padding: 0 max(24px, env(safe-area-inset-right)) 20px max(24px, env(safe-area-inset-left));
  font-size: 14px;
}

.wizard__home a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* ------------------------------------------------------- dotazník --- */
/* The questionnaire for a test house (/dotaznik/): the wizard's frame,
   with fields as well as choices, "Nevím" on every screen and a summary
   that can go back to any answer. */

.dotaznik { display: flex; flex-direction: column; gap: 16px; }

/* 27 steps do not fit beside the logo and five languages on a phone: the count goes under the bar. */
.dotaznik__krok { margin: -4px 0 0; }

.dotaznik__oddil {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
}

.dotaznik__pole { display: flex; flex-direction: column; gap: 14px; }
.dotaznik__pole--nevim { opacity: 0.55; }

.dotaznik__vstup { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.dotaznik__vstup label,
.dotaznik__popisek { font-size: 15px; font-weight: 600; color: var(--text); }
.dotaznik__skupina { display: flex; flex-direction: column; gap: 6px; }
.dotaznik__popisek { margin: 0; }

.dotaznik__text {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--border-soft);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16 px and up: a phone does not zoom in on focus */
  line-height: 1.4;
}

textarea.dotaznik__text { min-height: 120px; resize: vertical; }
.dotaznik__text:focus { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 1px; }

.option.dotaznik__nevim { justify-content: center; border-style: dashed; min-height: 52px; }

.dotaznik__shrnuti {
  background: var(--white);
  border-radius: 14px;
  padding: 4px 16px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.dotaznik__radek {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.dotaznik__radek:last-child { border-bottom: none; }
.dotaznik__radek .summary__qa { min-width: 0; overflow-wrap: anywhere; }
.dotaznik__prazdne { color: var(--muted); font-weight: 400; }

.dotaznik__upravit {
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.dotaznik__poznamka { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.dotaznik__chyba { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--white); border: 2px solid var(--gold); font-size: 15px; }

/* -------------------------------------------------------------- login --- */

body.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 18px 50px rgba(28, 35, 33, 0.08);
}

.login__logo { display: block; width: 100%; height: auto; }

.login h1 { font-size: 26px; line-height: 1.2; }

.login p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

.login__form { display: flex; flex-direction: column; gap: 12px; }

.login__label { font-size: 15px; font-weight: 600; }

.login__input {
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  font-size: 17px;
  font-family: inherit;
  background: var(--white);
  color: var(--text);
  width: 100%;
}

.login__submit {
  min-height: 52px;
  padding: 12px 20px;
  border: none;
  background: var(--green);
  color: var(--white);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.login__submit:hover { background: var(--green-dark); }

.login__error {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #F6E4E0;
  color: #6B2018;
  font-size: 15px;
}

.login__note { font-size: 14px; }

@media (max-width: 480px) {
  .login { padding: 28px; }
}

/* Neutralised by the reduced-motion rule below, which leaves the highlight
   itself in place — only the settling animation goes. */
@keyframes state-settle {
  from { background: var(--gold-pale); }
  to { background: var(--green-pale); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------- calculator --- */

/* The export used its own palette (--a/--b/--c for the three variants, a
 * greener surface set). Only the three variant colours are genuinely new;
 * everything else maps onto the tokens above, so the page reads as part of
 * the site rather than as a spreadsheet someone pasted in. */
:root {
  --calc-a: #7A8580;
  --calc-b: #2F5D50;
  --calc-c: #B8893B;
}

/* Which of the three a card, a bar or a line belongs to. Written as a data
   attribute on the element rather than as a custom property in a style
   attribute: the gate serves every page under a Content-Security-Policy with
   no 'unsafe-inline', so a style attribute is dropped before it is read and
   the colour never arrives. */
[data-variant='a'] { --variant: var(--calc-a); }
[data-variant='b'] { --variant: var(--calc-b); }
[data-variant='c'] { --variant: var(--calc-c); }

.calc {
  padding-top: var(--space-hero-top);
  padding-bottom: 64px;
}

.calc__intro h1 {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.calc__lead {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-left: 6px solid var(--green);
  border-radius: 14px;
  padding: clamp(16px, 2.5vw, 24px);
}

.calc__lead p {
  margin: 0 0 10px;
  max-width: 90ch;
  line-height: 1.65;
}

.calc__lead p:last-child {
  margin-bottom: 0;
}

.calc__hint,
.calc__note {
  color: var(--muted);
  font-size: 15px;
  max-width: 85ch;
}

.calc__noscript {
  background: var(--gold-pale);
  border-radius: 12px;
  padding: 16px;
}

.calc section {
  margin-top: 40px;
}

.calc h2 {
  font-family: var(--display);
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 0 0 8px;
}

.calc h3 {
  font-size: 17px;
  margin: 28px 0 8px;
}

/* ---- building-type tabs ---- */

.calc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.calc__tabs button {
  font: inherit;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  cursor: pointer;
}

.calc__tabs button[aria-selected='true'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-dark);
  font-weight: 600;
}

/* ---- the investment strip, and the panel it opens ---- */

.calc__invest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 16px;
  padding: clamp(14px, 2vw, 20px);
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}

.calc__invest-label {
  font-size: 13px;
  color: var(--muted);
  flex-basis: 100%;
}

.calc__invest-value {
  font-family: var(--display);
  font-size: clamp(18px, 2.4vw, 22px);
  font-variant-numeric: tabular-nums;
}

.calc__invest-meta {
  font-size: 14px;
  color: var(--muted);
}

.calc__invest button {
  margin-left: auto;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--green);
  background: var(--white);
  color: var(--green);
  cursor: pointer;
}

.calc__panel {
  margin-top: 12px;
  padding: clamp(14px, 2.5vw, 22px);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--card);
}

.calc__inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 24px;
  max-width: 640px;
}

/* ---- the two-column body ---- */

.calc__grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: 32px;
  align-items: start;
}

.calc__inputs {
  position: sticky;
  top: 16px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 20px;
}

/* The configurator's questions: a select is as wide as its widest option
 * unless it is told otherwise, and "A Buderus, Bosch or Junkers boiler with
 * no connection" is wider than a phone. */
.konf__controls {
  min-width: 0;
}

.konf__controls .field {
  margin: 0 0 14px;
}

.konf__controls select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* A select is as wide as its widest option unless it is told otherwise, and
 * one English option — "The customer, in instalments through the
 * subscription" — is wider than a 390px phone. The panel is a column, so
 * everything in it stays inside it. */
.calc__inputs,
.calc__panel {
  min-width: 0;
}

.calc__inputs select,
.calc__inputs input,
.calc__panel select,
.calc__panel input {
  max-width: 100%;
  min-width: 0;
}

.calc__inputs .field,
.calc__panel .field {
  margin: 0 0 16px;
}

.calc__inputs label,
.calc__panel label,
.calc .field__label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  /* An English label and its value do not fit on one 390px line — "Subscription
   * in € per flat per month" against the amount — and a row that cannot wrap
   * sets the whole panel's minimum width. */
  flex-wrap: wrap;
}

.calc .field__check {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-weight: 400;
}

.calc .field__check input {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
}

.calc__inputs small,
.calc__panel small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.calc__inputs output,
.calc__panel output {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--green);
}

/* The export sized these at 34px. This site's floor is --tap (44px), which
 * test/mobile.test.js enforces — and a range slider is the control on this
 * page a reader drags most. */
.calc__inputs input[type='range'],
.calc__panel input[type='range'] {
  width: 100%;
  /* The browser's own 2 px either side would push a full-width slider out. */
  margin-inline: 0;
  accent-color: var(--green);
  min-height: var(--tap);
}

.calc__inputs input[type='number'],
.calc__inputs select,
.calc__panel input[type='number'],
.calc__panel select,
.calc table input {
  font: inherit;
  width: 100%;
  min-height: var(--tap);
  padding: 6px 8px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
}

.calc__pair {
  display: flex;
  gap: 8px;
  margin: 0;
}

/* ---- the three variant cards ---- */

.calc__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.calc__card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-top: 4px solid var(--variant);
  border-radius: 14px;
  padding: 18px;
}

.calc__card.is-best {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}

.calc__badge {
  position: absolute;
  top: -11px;
  right: 14px;
  background: var(--green);
  color: var(--on-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.calc__card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
}

.calc__who {
  color: var(--muted);
  font-size: 14px;
  margin: 6px 0 10px;
}

.calc__mix {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}

.calc__big {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 26px);
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
}

.calc__big small {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.calc__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.calc__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  /* A row that cannot wrap sets the card's minimum width, and through the
   * card the whole two-column layout: "Speech-to-text (Home Assistant Cloud)"
   * against its amount is wider than a 390px phone. */
  flex-wrap: wrap;
}

.calc__card {
  min-width: 0;
}

.calc__row span:last-child,
.calc__row strong:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.calc__row--sum {
  border-top: 1px solid var(--rule-strong);
  padding-top: 6px;
  margin-top: 4px;
}

.calc .is-negative {
  color: #9B3B2E;
}

.calc .is-positive {
  color: var(--green-dark);
}

/* ---- chart ---- */

.calc__legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 8px;
}

.calc__legend i {
  background: var(--variant);
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

.calc__chart {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 16px;
  height: 340px;
}

/* The SVG is drawn at the holder's pixel size, so one user unit is one pixel
   and nothing here has to be scaled back. */
.calc__chart svg { display: block; }
.calc__grid { stroke: var(--line); stroke-width: 1; }
.calc__grid[data-zero='true'] { stroke: var(--muted); }
.calc__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.calc__tick { fill: var(--muted); font-size: 12px; font-family: var(--sans); text-anchor: middle; }
.calc__tick--y,
.calc__tick--end { text-anchor: end; }
.calc__tick--start { text-anchor: start; }
.calc__axis { fill: var(--muted); font-size: 12px; font-family: var(--sans); text-anchor: middle; }

/* ---- tables ---- */

.calc__tablewrap {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
}

.calc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  table-layout: fixed;
}

.calc th,
.calc td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.calc th {
  font-weight: 600;
  background: var(--card);
}

.calc th small {
  display: block;
  font-weight: 400;
  color: var(--muted);
}

.calc__num {
  font-variant-numeric: tabular-nums;
}

.calc tr.calc__group th {
  background: var(--green-pale);
  color: var(--green-dark);
}

.calc tr.calc__sum th,
.calc tr.calc__sum td {
  font-weight: 700;
  border-top: 2px solid var(--ink);
}

/* ---- pillar scores ---- */

.calc__score th[scope='row'] b {
  display: inline-block;
  width: 22px;
  color: var(--green);
  font-family: var(--display);
}

.calc__bar {
  display: inline-flex;
  gap: 3px;
}

.calc__bar i {
  width: 14px;
  height: 8px;
  border-radius: 2px;
  background: var(--border-track);
}

.calc__bar i.is-on {
  background: var(--variant);
}

.calc__why,
.calc__assume {
  margin-top: 12px;
}

.calc__why summary,
.calc__assume summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.calc__boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.calc__pbox {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px;
}

.calc__pbox h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.calc__pbox h4 b {
  display: inline-block;
  width: 20px;
  color: var(--green);
  font-family: var(--display);
}

.calc__pbox p {
  margin: 0 0 8px;
  font-size: 14px;
  border-left: 3px solid var(--variant);
  padding-left: 10px;
}

/* ---- phone ---- */

@media (max-width: 900px) {
  .calc__grid {
    grid-template-columns: 1fr;
  }

  .calc__inputs {
    position: static;
  }
}

/* Below this the tables stop being tables: each row becomes a labelled block,
 * because a five-column financial table cannot be read at 390px. The header
 * row goes to screen readers only and every cell carries its own label. */
@media (max-width: 700px) {
  .calc table,
  .calc thead,
  .calc tbody,
  .calc tr,
  .calc th,
  .calc td {
    display: block;
    width: 100%;
  }

  .calc table {
    table-layout: auto;
  }

  .calc thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .calc tr {
    border-bottom: 1px solid var(--rule);
    padding: 10px 14px;
  }

  .calc tr:last-child {
    border-bottom: 0;
  }

  .calc tbody th {
    padding: 4px 0 6px;
    border: 0;
    background: none;
    font-size: 15px;
  }

  .calc td {
    display: grid;
    grid-template-columns: minmax(90px, 35%) 1fr;
    gap: 10px;
    align-items: start;
    padding: 6px 0;
    border: 0;
  }

  .calc td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
  }

  .calc__invest button {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------- the visualisations ---- */

/* The drawings are 1600×900 exports. They are shown as an image first and
   replaced by the same file inlined once the script runs, so these rules have
   to fit both: the <img> and the <svg> are sized the same way. */
.viz {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The golf resort drawn by the demo's axonometry (areal.js). */
.viz__frame--areal { padding: 8px; background: var(--white); }
.viz__frame--areal .axo { display: block; width: 100%; height: auto; }

.viz__frame {
  position: relative;
  border: 1px solid var(--rule-strong);
  border-radius: 16px;
  background: var(--paper);
  overflow: hidden;
}

.viz img,
.viz__svg {
  display: block;
  width: 100%;
  height: auto;
}

.viz__name { font-weight: 600; color: var(--text); }

.viz figcaption {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* Only a drawing the script has taken over says the points can be tapped. */
.viz figcaption .viz__hint { display: none; }
.viz[data-js] figcaption .viz__hint { display: inline; }
.viz--areal figcaption .viz__hint { display: inline; }
/* A place drawn taller than wide (the care home on two floors): no wider than it reads. */
.viz--vysoka .viz__frame { width: min(100%, 640px); margin-inline: auto; }

.viz .hs { cursor: pointer; }

.viz .hs:hover circle,
.viz .hs:focus-visible circle {
  stroke: var(--gold);
  stroke-width: 4;
}

.viz .hs:focus-visible { outline: none; }

/* One under another and each the full width of the page: the drawings carry
   their own legend at 15.5px against a 1600px canvas, and a second column
   would shrink that below reading size. */
.viz-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
}

/* Enlarging is a phone's answer to a drawing it cannot fit; a desktop shows
   the whole thing at a readable size already. It stands under the drawing
   rather than over it, where it would cover whatever the drawing put in
   that corner. */
.viz__zoom {
  display: none;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--green-dark);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

/* The drawn legend, rebuilt under the drawing for the phone that cannot
   read it inside the frame. */
.viz-legend { display: none; flex-direction: column; gap: 8px; }

.viz-legend__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 12px 0 2px;
  font-size: 14px;
  color: var(--muted);
}

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

.viz-legend__point {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 4px;
  text-align: left;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

/* The same four colours the drawing gives its own circles, so a point
   found in the list and the same point found on the plan look alike. */
.viz-legend__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  background: #1E7F4F;
}

.viz-legend__num--p { color: #1C2321; background: #F08A24; }
.viz-legend__num--n { color: #FFFFFF; background: #6D4C9F; }
.viz-legend__num--r { color: #1C2321; background: #AEB8C4; }

.viz-legend__note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------- the hotspot dialog ---- */

/* A card on a desktop, a sheet pulled up from the bottom of a phone. Both
   are the same <dialog>, so both keep the focus trap, Escape and the
   backdrop the browser gives for nothing. */
.viz-dialog {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: 85vh;
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
  color: var(--text);
}

.viz-dialog::backdrop { background: rgba(28, 35, 33, 0.45); }

/* The way in and the way out, as a transition between two states rather
   than a keyframe animation: the closing state is held until the transition
   ends, which is what lets the dialog leave the page only once it is gone
   from view. */
.viz-dialog,
.viz-dialog::backdrop {
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.viz-dialog[data-closing],
.viz-dialog[data-closing]::backdrop {
  transition-duration: 150ms;
}

.viz-dialog:not([data-open]) { opacity: 0; transform: scale(0.96); }
.viz-dialog:not([data-open])::backdrop { opacity: 0; }
.viz-dialog[data-open] { opacity: 1; transform: none; }

/* While a finger is on it the sheet follows, so it must not also be easing
   towards where the finger was a moment ago. */
.viz-dialog[data-dragging] { transition: none; }

.viz-dialog__handle { display: none; }

.viz-dialog__close {
  float: right;
  width: 40px;
  height: 40px;
  margin: -8px -8px 0 12px;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.viz-dialog__close:hover { background: var(--band); }

.viz-dialog__state {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
}

.viz-dialog h2 { margin: 0 0 12px; font-size: 22px; }

.viz-dialog__what { margin: 0; line-height: 1.6; }

.viz-dialog__how { margin: 22px 0 10px; font-size: 17px; }

.viz-dialog__ok {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.viz-steps {
  margin: 0;
  padding: 0 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.5;
}

/* A chain that does not run yet is drawn as a plan, not as a description. */
.viz-steps--plan {
  padding: 14px 14px 14px 36px;
  border: 1px dashed var(--border);
  border-radius: 16px;
}

.viz-steps__layer {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sage);
}

.viz-steps__item--unused { color: var(--muted); font-style: italic; }

/* ------------------------------------------------------ the whole drawing - */

.viz-zoom {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.viz-zoom::backdrop { background: var(--paper); }

.viz-zoom__bar {
  flex: none;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 8px var(--gutter);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--white);
}

.viz-zoom__hint { margin: 0; font-size: 14px; color: var(--muted); }

.viz-zoom__close {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

/* The drawing at its own size, panned by dragging and pinched to zoom:
   the scroller is what the fingers act on, so nothing has to be
   reimplemented in JavaScript. */
.viz-zoom__frame {
  flex: 1;
  overflow: auto;
  touch-action: pinch-zoom pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.viz-zoom__svg { display: block; width: 1600px; max-width: none; height: auto; }

@media (max-width: 767px) {
  .viz__zoom { display: block; }

  .viz-legend { display: flex; }

  /* The sheet: full width, out of the bottom of the screen, and only as
     tall as it needs to be up to most of the page. The handle is what a
     finger pulls down, and --drag is how far it has come. */
  .viz-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 85dvh;
    margin: auto 0 0;
    padding: 0 var(--gutter) 32px;
    border: none;
    border-radius: 20px 20px 0 0;
    transform: translateY(var(--drag, 0px));
  }

  .viz-dialog:not([data-open]) { transform: translateY(100%); }
  .viz-dialog[data-open] { transform: translateY(var(--drag, 0px)); }
  .viz-dialog[data-closing] { transform: translateY(100%); }

  .viz-dialog__handle {
    display: block;
    position: sticky;
    top: 0;
    margin: 0 calc(-1 * var(--gutter));
    padding: 10px 0 6px;
    background: var(--white);
    cursor: grab;
    touch-action: none;
  }

  .viz-dialog__grip {
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--border);
  }

  .viz-dialog__close {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
    width: var(--tap);
    height: var(--tap);
  }

  .viz-dialog__state { padding-top: 6px; }
}

/* A reader who asked for no movement gets the popup already in place. */
@media (prefers-reduced-motion: reduce) {
  .viz-dialog,
  .viz-dialog::backdrop { transition: none; }

  .viz-dialog:not([data-open]) { opacity: 1; transform: none; }
  .viz-dialog:not([data-open])::backdrop { opacity: 1; }
}

/* ------------------------------------------ diagrams from the presentation */

/* data/nacrty.json, written into the pages by tools/generate-nacrty.mjs.
   Boxes and lists rather than pictures: they reflow on a phone, translate
   through the dictionary and carry their status as a badge a reader can read. */

/* The voice pipeline: five steps in a row, the fourth split in two. */
.pipe {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.pipe__item { display: flex; }
.pipe__item--fork { flex-direction: column; gap: 12px; }

.pipe__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--card);
  border-top: 3px solid var(--green);
  border-radius: 0 0 12px 12px;
}

.pipe__item--fork .pipe__step { border-top-color: var(--gold); }
.pipe__num { margin: 0; font-family: var(--serif); font-size: 28px; color: var(--gold-text); }
.pipe__step h3 { margin: 0; font-size: 18px; font-family: var(--sans); }
.pipe__tech { display: block; font-size: 13px; font-weight: 500; color: var(--sage); }
.pipe__step p:last-child { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.pipe__note { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1023px) {
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe__item--fork { grid-column: 1 / -1; flex-direction: row; }
}

@media (max-width: 599px) {
  .pipe { grid-template-columns: minmax(0, 1fr); }
  .pipe__item--fork { flex-direction: column; }
}

/* The "Dobrou noc" ecosystem: the home, the cloud and the phone. */
.eko {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: "home cloud" "home phone";
  gap: 12px;
  margin-top: 24px;
}

.eko__zone {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--paper);
}

.eko__zone--home { grid-area: home; }
.eko__zone--cloud { grid-area: cloud; }
.eko__zone--phone { grid-area: phone; }

.eko__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green);
}

.eko__sub { margin: 2px 0 12px; font-size: 14px; color: var(--muted); }

.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Each step points at the next one. */
.flow > li + li::before {
  content: "↓";
  display: block;
  margin: -4px 0 4px 16px;
  color: var(--sage);
}

.flow__node {
  margin: 0;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.eko__zone--cloud .flow__node,
.eko__zone--phone .flow__node { margin-top: 12px; }

.flow__node strong { display: block; }
.flow__node span { color: var(--muted); }
.flow__node .badge { margin-top: 6px; }
.flow__node--core { border-color: var(--green); }
.flow__node--reply { background: var(--green-pale); }

.flow__actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.flow__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  font-size: 15px;
}

.eko__text { margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 820px; }

@media (max-width: 767px) {
  .eko { grid-template-columns: minmax(0, 1fr); grid-template-areas: "home" "cloud" "phone"; }
}

/* The architecture: three layers of blocks, the border says the status. */
.arch { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }

.arch__layer {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.arch__label {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green);
}

.arch__bloky {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.arch__blok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 14px;
}

.arch__blok h4 { margin: 0; font-size: 16px; }
.arch__blok p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.arch__blok--m { border-color: #1E7F4F; }
.arch__blok--p { border-color: #F08A24; }
.arch__blok--n { border-color: #6D4C9F; }
.arch__blok--r { border-color: #AEB8C4; }
.arch__blok--x { border-style: dashed; background: var(--card); }

@media (max-width: 767px) {
  .arch__layer { grid-template-columns: minmax(0, 1fr); }
  .arch__label { margin: 0; }
}

/* The stack table: it scrolls inside its own box on a phone, never the page. */
.stack__wrap { overflow-x: auto; margin-top: 16px; }

.stack { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
.stack th,
.stack td { padding: 10px 12px 10px 0; vertical-align: top; border-bottom: 1px solid var(--rule); }
.stack thead th { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sage); }
.stack tbody th { font-weight: 600; }
.stack td:nth-child(3) { color: var(--muted); }

@media (max-width: 599px) {
  .stack thead { display: none; }
  .stack tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .stack th,
  .stack td { padding: 2px 0; border: 0; }
  .stack td:first-child { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sage); }
}

/* A segment's ecosystem: cloud and partner, the core, the zones, who talks. */
.eko-seg {
  margin: 8px 0 32px;
  padding: 20px;
  background: var(--card);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eko-seg__title { margin: 0; font-size: 22px; }
.eko-seg__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.eko-seg__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  font-size: 15px;
}

.eko-seg__box strong { flex-basis: 100%; }
.eko-seg__box > span:not(.badge):not(.eko-seg__state) { flex-basis: 100%; color: var(--muted); }
.eko-seg__box--partner { border-style: dashed; }
.eko-seg__box--core { border: 2px solid var(--green); }
.eko-seg__state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

.eko-seg__zones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.eko-seg__zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--white);
  border-radius: 12px;
}

.eko-seg__zone h4 { margin: 0; font-size: 16px; }
.eko-seg__zone > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.eko-seg__umi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.eko-seg__counts {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 14px;
}

.eko-seg__counts li { display: flex; align-items: center; gap: 4px; }
.eko-seg__note { margin: 0; font-size: 13px; color: var(--muted); }
.eko-seg__who { margin: 0; font-size: 15px; }

@media (max-width: 599px) {
  .eko-seg { padding: 14px; }
  .eko-seg__top { grid-template-columns: minmax(0, 1fr); }
}

/* The diagram's answer when it went to the phone: where, then what the app shows. */
.stopa__misto-odpovedi { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.stopa__telefon { margin: 2px 0 0; padding: 8px 10px; border: 1px solid var(--green); border-radius: 10px; background: var(--white); font-size: 14px; }

/* =================================================================== */
/* Redesign (Peter 8. 11.): the site for owners of finished houses.     */
/*                                                                     */
/* The brand's own colours and nothing else — the yellow plate, the    */
/* dark green, ivory — in full plates; Cormorant Garamond for headings, */
/* DM Sans for text; big type, plenty of air, cards. This layer comes  */
/* last on purpose: it restyles the shared components every page uses  */
/* (header, buttons, cards, sections, the call to action, the footer)  */
/* and adds the home page's and Jak to funguje's own blocks.           */
/* =================================================================== */

:root {
  /* Display sizes for the serif, which reads smaller than a sans at the
     same size. Same rule as the scale above: floor at 360 px, top at 1000 px. */
  --type-hero: clamp(2.5rem, 0.9531rem + 6.875vw, 5.25rem);        /* 40 → 84 */
  --type-nadpis: clamp(2rem, 1.1563rem + 3.75vw, 3.5rem);          /* 32 → 56 */
  --type-krok: clamp(1.625rem, 1.2031rem + 1.875vw, 2.375rem);     /* 26 → 38 */
  --radius: 22px;
  --stin: 0 1px 2px rgba(31, 63, 54, 0.06), 0 12px 32px -18px rgba(31, 63, 54, 0.28);
}

body { font-size: 17px; line-height: 1.6; background: var(--paper); }

.section > h2,
.section__inner > h2 { font-size: var(--type-nadpis); }

.section--white { background: var(--bila); }

.section__lead { font-size: var(--type-lead); line-height: 1.55; }

.eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zelena);
}

/* ----------------------------------------------------------- buttons - */

.btn {
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.btn--primary { background: var(--zelena); border-color: var(--zelena); color: var(--slonovina); }
.btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--slonovina); }
.btn--ghost { border-color: var(--zelena); color: var(--zelena); }
.btn--ghost:hover { background: rgba(31, 63, 54, 0.08); color: var(--zelena); }

/* ------------------------------------------------------------ cards - */

.stage,
.tile,
.objekt-karta {
  border: 0;
  border-radius: var(--radius);
  background: var(--bila);
  box-shadow: var(--stin);
}
.objekt-karta { padding: 26px 28px; gap: 10px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.objekt-karta h3 { font-size: 26px; }
.objekt-karta:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(31, 63, 54, 0.08), 0 18px 40px -18px rgba(31, 63, 54, 0.38); }
.section--white :is(.stage, .tile, .objekt-karta) { background: var(--slonovina); box-shadow: none; }

/* ---------------------------------------------------------- the hero - */

.uvod { padding-block: clamp(2.5rem, 1.1rem + 6.2vw, 6.5rem) clamp(2.5rem, 1.1rem + 6.2vw, 6rem); }
.uvod__text { gap: 22px; }
.uvod__text h1,
.uvod--stranka h1 {
  font-size: var(--type-hero);
  line-height: 1.02;
  font-weight: 600;
  color: var(--zelena);
  max-width: 14ch;
}
.uvod--stranka .shell { display: flex; flex-direction: column; gap: 22px; }
.uvod--stranka h1 { max-width: 18ch; }
.hero__lead { max-width: 38ch; font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.375rem); line-height: 1.5; color: var(--muted); }
.uvod__prezentace { margin: 4px 0 0; font-size: 15px; }

/* ----------------------------------------------- the two ways, home - */

.cesty { padding-block: 0 var(--space-section); }
.cesty__nadpis { font-size: var(--type-nadpis); margin-bottom: var(--space-stack); max-width: 16ch; }
.cesty__mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-grid); }
@media (max-width: 767px) { .cesty__mrizka { grid-template-columns: minmax(0, 1fr); } }

.cesta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  border-radius: calc(var(--radius) + 6px);
}
.cesta h3 { font-size: var(--type-krok); line-height: 1.1; }
.cesta p { margin: 0; font-size: 18px; line-height: 1.55; max-width: 40ch; }
.cesta .cesta__krok {
  font-family: var(--nadpis);
  font-size: 64px;
  line-height: 0.9;
  font-weight: 600;
}
.cesta--zelena { background: var(--zelena); color: var(--slonovina); }
.cesta--zelena h3, .cesta--zelena .cesta__krok { color: var(--zluta); }
.cesta--zluta { background: var(--zluta); color: var(--zelena); }

.cipy { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.cipy li {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid currentColor;
}
.cesty__pozn { margin: var(--space-gap-sm) 0 0; font-size: 18px; font-weight: 600; color: var(--zelena); }

/* ------------------------------------- one house, one app, one voice - */

.ukazka { padding-block: var(--space-section); background: var(--bila); }
.ukazka__mrizka { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: var(--space-hero-gap); align-items: center; }
@media (max-width: 899px) { .ukazka__mrizka { grid-template-columns: minmax(0, 1fr); } }
.ukazka__text { display: flex; flex-direction: column; gap: var(--space-stack); }
.ukazka__text h2 { font-size: var(--type-nadpis); max-width: 18ch; }
.ukazka__dum { margin: 0; padding: clamp(10px, 2vw, 20px); border-radius: var(--radius); background: var(--slonovina); }
.ukazka__dum img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 8px); }

.telefon { margin: 0 auto; width: min(100%, 320px); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.telefon figcaption { font-size: 14px; color: var(--muted); }
.telefon__ram {
  width: 100%;
  padding: 12px;
  border-radius: 44px;
  background: var(--zelena);
  box-shadow: 0 30px 60px -30px rgba(31, 63, 54, 0.6);
}
/* The app's real screen (lussi-app, tools/obrazovky-aplikace.mjs) inside the frame. */
.telefon__snimek { display: block; width: 100%; height: auto; border-radius: 34px; background: var(--slonovina); }

/* ------------------------------------------------- the three steps - */

.kroky .stage { position: relative; padding-top: 84px; }
.kroky .stage h3::before { content: none; }
.kroky .stage::before {
  content: counter(krok);
  position: absolute;
  top: 18px;
  left: var(--space-stage);
  font-family: var(--nadpis);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--zluta);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: var(--zelena);
}
.kroky .stage h3 { font-family: var(--nadpis); font-size: 26px; font-weight: 600; }

.tlacitka { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ------------------------------------ Jak to funguje, step by step - */

.kroky-cesta { padding-block: 0 var(--space-section); }
.krok-seznam { display: grid; gap: var(--space-grid); margin: 0; padding: 0; list-style: none; }
.krok {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'ikona cislo' 'ikona nadpis' 'ikona text';
  column-gap: clamp(18px, 3vw, 40px);
  row-gap: 8px;
  align-items: start;
  padding: clamp(1.5rem, 0.9rem + 2.6vw, 3rem);
  border-radius: calc(var(--radius) + 6px);
  background: var(--bila);
  box-shadow: var(--stin);
}
.krok > :not(.krok__ikona):not(.krok__cislo):not(h2) { grid-column: 2; margin: 0; max-width: 60ch; font-size: 18px; line-height: 1.6; }
.krok__ikona { grid-area: ikona; width: clamp(48px, 6vw, 72px); height: auto; padding: 14px; box-sizing: content-box; border-radius: 50%; background: var(--zluta); color: var(--zelena); }
.krok__cislo { grid-area: cislo; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: var(--zelena); }
.krok h2 { grid-area: nadpis; font-size: var(--type-krok); color: var(--zelena); }
.krok--zluta { background: var(--zluta); box-shadow: none; }
.krok--zluta .krok__ikona { background: var(--zelena); color: var(--zluta); }
.krok--zelena { background: var(--zelena); color: var(--slonovina); box-shadow: none; }
.krok--zelena h2, .krok--zelena .krok__cislo { color: var(--zluta); }
.krok--zelena a { color: var(--zluta); }
@media (max-width: 599px) {
  .krok { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'ikona' 'cislo' 'nadpis' 'text'; }
  .krok > :not(.krok__ikona):not(.krok__cislo):not(h2) { grid-column: 1; }
}

/* --------------------------------------------------- the way on - */

.vyzva { background: var(--zluta); color: var(--zelena); }
.vyzva h2 { font-size: var(--type-nadpis); color: var(--zelena); }
.vyzva .btn--ghost { border-color: var(--zelena); color: var(--zelena); }
.vyzva .btn--ghost:hover { background: rgba(31, 63, 54, 0.1); }
/* The call with a sentence under its heading (#141): what to do and why. */
.vyzva__hlava { max-width: 38rem; }
.vyzva__hlava h2 { max-width: none; }
.vyzva__text { margin: 8px 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--zelena); }

/* --------------------------------------- coming in as you scroll - */

@media (prefers-reduced-motion: no-preference) {
  html[data-odhal] .odhal:not(.odhal--videt) { opacity: 0; transform: translateY(24px); }
  html[data-odhal] .odhal { transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
}

/* ------------------------------------------- Technika, for the curious - */

.technika { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-grid); }
@media (max-width: 899px) { .technika { grid-template-columns: minmax(0, 1fr); } }
.technika__vrstva {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: calc(var(--radius) + 6px);
  background: var(--bila);
  box-shadow: var(--stin);
}
.technika__vrstva h2 { font-size: var(--type-krok); color: var(--zelena); }
.technika__vrstva > p { margin: 0; color: var(--muted); }
.technika__seznam { display: flex; flex-direction: column; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.technika__polozka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'nazev stav' 'tech stav';
  column-gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.technika__nazev { grid-area: nazev; font-weight: 600; }
.technika__tech { grid-area: tech; font-size: 14px; color: var(--muted); }
.technika__polozka .badge { grid-area: stav; }
.technika__podle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--space-grid);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: calc(var(--radius) + 6px);
  background: var(--zelena);
  color: var(--slonovina);
}
.technika__podle h2 { font-size: var(--type-krok); color: var(--zluta); }
.technika__podle p { margin: 0; max-width: 60ch; }

/* ------------------------------------------------ Co Lussi umí - */

.umi-obsah ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.umi-obsah a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--bila);
  color: var(--zelena);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--stin);
}
.umi-obsah a:hover { background: var(--zluta); color: var(--zelena); }
.umi-oblast { display: flex; flex-direction: column; gap: var(--space-gap-sm); scroll-margin-top: 96px; }
.umi-oblast h2 { font-size: var(--type-krok); color: var(--zelena); }
.umi-karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-grid); margin: 0; padding: 0; list-style: none; }
.umi-karta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--bila);
  box-shadow: var(--stin);
}
.umi-karta p { margin: 0; }
.umi-karta__nazev { font-weight: 600; line-height: 1.45; }
.umi-karta__povel { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: auto !important; padding-top: 8px; font-size: 15px; color: var(--muted); }
.umi-karta__povel q { padding: 4px 12px; border-radius: 999px; background: var(--zluta-svetla); color: var(--zelena); font-weight: 600; }

/* The questionnaire's consent and its hidden field (#141). The field is for
   robots: off the screen, out of the tab order and hidden from screen readers. */
.dotaznik__zasady { margin: 16px 0 0; }
.dotaznik__zasady label { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.dotaznik__zasady input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.dotaznik__past { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The home page's call to try the demo (Peter 11. 11.), in place of what
   Lussi does today: a green band, the villa of the demo drawn on a light
   plate beside the copy, larger than the call at the top. */
.demo-vyzva { background: var(--zelena); color: var(--slonovina); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.demo-vyzva__mrizka { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.demo-vyzva h2 { color: var(--zluta); font-size: var(--type-h1); line-height: 1.05; margin: 0 0 16px; }
.demo-vyzva__lead { font-size: 1.15rem; line-height: 1.55; margin: 0 0 24px; color: var(--slonovina); }
.demo-vyzva .btn--primary { background: var(--zluta); border-color: var(--zluta); color: var(--zelena); }
.demo-vyzva .btn--primary:hover { background: #FFD84D; }
.demo-vyzva .btn--ghost { border-color: var(--slonovina); color: var(--slonovina); }
.demo-vyzva__pozn { margin: 16px 0 0; font-size: 0.95rem; color: var(--on-dark-muted); }
.demo-vyzva__kresba { margin: 0; background: var(--paper); border-radius: 24px; padding: clamp(12px, 2vw, 24px); }
.demo-vyzva__kresba figcaption { margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 899px) {
  .demo-vyzva__mrizka { grid-template-columns: minmax(0, 1fr); }
}

/* Narrow phones (#141, an iPhone 12 mini at 375 px). Safari on the iPhone
   draws DM Sans lighter than a desktop does, and at 16 px the running text
   read thin and tight. Below 600 px it is a size larger, a little heavier
   than regular (450, from the variable font: DM Sans is loaded as the range
   400–700) and a touch more open, with the lines spaced to match. Headings
   keep their own weight and spacing. The logo measures its own letters and
   is left alone. */
@media (max-width: 599px) {
  body { font-size: 17px; line-height: 1.6; font-weight: 450; letter-spacing: 0.005em; }
  h1, h2, h3 { letter-spacing: -0.005em; }
  .logo { letter-spacing: normal; }
  .hero__lead { line-height: 1.55; }
}