/* Podstrona VoiceAudit (/voiceaudit/). Spec: docs/specs/2026-10-26-voiceaudit-podstrona-design.md (§6.1 wejście,
   §6.2 do §6.8 i §6.10 sekcje, §6.9 plan rozwoju), makiety: docs/specs/2026-10-26-voiceaudit-makiety/
   (baner-b-i-plan-rozwoju.html: sekcje B i Plan; szkic-calej-strony.html: szkic sekcji 2 do 8).
   Kolory i fonty tylko ze zmiennych tokens.css i shared.css; odcienie przez color-mix() z tych zmiennych.
   Papier (--papier niżej) to krem rozjaśniony prawie do bieli: powierzchnia karty ekranu i kartki.

   Ruch (zasady v3): w spoczynku rusza się jedna rzecz (bursztynowa kropka statusu albo kropka „Teraz”, każda tylko
   w widoku, przez klasę fala--gra z interactions.js). Scena wejścia gra raz; jej stan końcowy jest stanem domyślnym
   tego arkusza, a stan „przed” istnieje tylko pod html.js i bez ograniczonego ruchu. Animujemy wyłącznie transform
   i opacity. */

/* Logo „bbmg.” w nawigacji i stopce to jedyne użycie EB Garamond na tej stronie. Pełny plik serwisu (120 KB) ładował się
   przed pierwszym malowaniem i wydłużał LCP na wolnym łączu o ok. 0,6 s, więc ta strona dostaje własny podzbiór
   tylko z literami „bbmg.” (waga 800 z fonts/EBGaramond-VariableFont_wght.woff2, ok. 1 KB). Późniejszy @font-face tej
   samej rodziny wygrywa z shared.css na zakresie znaków, wygląd logo bez zmian. Zmiana tekstu logo = nowy podzbiór
   (test tests/test_voiceaudit_strona.py pilnuje liter). */
@font-face { font-family: 'EB Garamond'; src: url('/voiceaudit/eb-garamond-logo.woff2?v=1') format('woff2'); font-weight: 400 800;
  font-style: normal; font-display: swap; unicode-range: U+002E, U+0062, U+0067, U+006D; }

/* Kanon nie ma bieli, a karta ekranu platformy i kartka są białe: papier z kremu. */
:root { --papier: color-mix(in srgb, var(--cream) 25%, white); }

/* ---------- Wejście: układ ---------- */
.va-wejscie { background: var(--cream); padding: calc(var(--nav-height) + clamp(24px, 3vw, 44px)) 0 clamp(64px, 7vw, 104px); overflow-x: clip; }
.va-wejscie__uklad { max-width: 1320px; margin: 0 auto; padding: 0 var(--container-px); display: grid;
  grid-template-columns: minmax(0, 29.5rem) minmax(0, 1fr); gap: clamp(40px, 4.4vw, 64px); align-items: center; }

.va-status { display: inline-flex; align-items: center; gap: 12px; font: 500 17px/1.4 var(--font-body); color: var(--deep-teal); margin-bottom: clamp(22px, 2.4vw, 32px); }
/* 17 px (przegląd zadania 3); na wąskim telefonie 16 px, bo w 17 px znacznik łamie się na dwa wiersze z jednym słowem. */
@media (max-width: 420px) { .va-status { font-size: 16px; } }
.va-status i { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.va-status i::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--amber); opacity: 0; }
/* Fala tylko dla tych, którzy nie prosili o mniej ruchu (reguła „reduce” przegrywała swoistością z .fala--gra::after). */
@media (prefers-reduced-motion: no-preference) {
  .va-status i.fala--gra::after { animation: va-ping 2.6s ease-out infinite; }
}
@keyframes va-ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

.va-wejscie h1 { font: 400 clamp(42px, 3.7vw, 56px)/1.04 var(--font-display); letter-spacing: -.02em; color: var(--deep-teal); text-wrap: balance; }
/* Dwa zdania, dwa ruchy: najpierw słuchać, potem rozmawiać. Drugie zdanie w drugim wierszu, wcięte i w kursywie,
   jak drugi wiersz H1 na pozostałych podstronach (.hero-sub h1 .l2 i em). */
.va-wejscie h1 em { display: block; padding-left: .55em; margin-top: .06em; font-style: italic; font-weight: 500; color: var(--amber-deep); }
.va-wejscie .lead { margin-top: clamp(20px, 2vw, 28px); font-size: clamp(18px, 1.35vw, 20px); }
.va-wejscie .btns { margin-top: clamp(28px, 3vw, 40px); }
/* Nowa linia w przycisku tylko, gdy się nie mieści (320 px): .btn jest nowrap, a dłuższa etykieta wystawała poza ekran. */
.va-wejscie .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; }

/* ---------- Scena: kompozycja ---------- */
/* Komputer z tyłu po lewej, telefon z przodu po prawej, niżej i zachodząc na komputer; kartka pod komputerem.
   Kartka nie zakrywa napisów żadnego urządzenia, więc stan końcowy pokazuje rozmowy i wynik naraz. */
.va-scena { margin: 0; min-width: 0; }
.scena { --tel: 244px; --zakladka: 44px; --przygas: .5; position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--tel) - var(--zakladka)); grid-template-rows: auto auto; }
.scena__urz--laptop { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
.scena__urz--telefon { grid-column: 2; grid-row: 1 / span 2; width: var(--tel); margin-left: calc(-1 * var(--zakladka)); margin-top: 64px; position: relative; z-index: 2; }
.kartka { grid-column: 1; grid-row: 2; align-self: start; margin: 16px calc(var(--zakladka) + 16px) 0 2.5%; position: relative; z-index: 3; }

.scena__kiedy { font: 400 15px/1.3 var(--font-body); color: var(--ink-60); margin: 0 0 12px 2px; }
.scena__urz--telefon .scena__kiedy { text-align: right; margin-right: 4px; }

/* ---------- Urządzenia ---------- */
.laptop__pokrywa { background: var(--dark-teal); border-radius: 16px 16px 5px 5px; padding: 11px 11px 13px; }
.laptop__ekran { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 5px; }
.laptop__podstawa { position: relative; height: 13px; margin: 0 -5.5%; border-radius: 2px 2px 14px 14px; background: color-mix(in srgb, var(--dark-teal) 84%, var(--cream)); }
.laptop__podstawa::after { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 5px; transform: translateX(-50%); border-radius: 0 0 7px 7px; background: color-mix(in srgb, var(--dark-teal) 62%, var(--cream)); }

.telefon { background: var(--dark-teal); border-radius: 38px; padding: 9px; box-shadow: 0 2px 4px color-mix(in srgb, var(--dark-teal) 8%, transparent), 0 24px 56px color-mix(in srgb, var(--dark-teal) 22%, transparent); }
.telefon__ekran { position: relative; min-height: 470px; padding: 40px 9px 16px; border-radius: 30px; }
.telefon__ekran::before { content: ''; position: absolute; top: 11px; left: 50%; width: 70px; height: 20px; margin-left: -35px; border-radius: 10px; background: var(--dark-teal); }

/* Przygasają ekrany i podpisy, nie obudowy: urządzenia zostają przedmiotami, a uwagę bierze kartka. */
.scena__urz .ekran__karta, .scena__urz .scena__kiedy { opacity: var(--przygas); transition: opacity .9s ease; }

/* ---------- Ekran rozmowy uczestnika (motyw BBMG) ---------- */
/* Jak na platformie: tło (canvas) w kremie, biała karta z cienką linią, „Pytanie 1 z 5”, kropki postępu
   (bieżąca o stopień większa, w bursztynie; przed nami puste kółka), oddychający znak mikrofonu ze zdaniem
   „Rozmowa trwa. Mów swobodnie.” i pole napisów na żywo w kolorze tła. Rozmiary w skali sceny. */
.ekran { background: var(--cream); }
.ekran__karta { width: 100%; background: var(--papier); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 14px; padding: 15px 18px 16px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 14px 30px -22px color-mix(in srgb, var(--ink) 30%, transparent); }
.ekran__postep { font: 400 13px/1.4 var(--font-body); color: var(--ink-60); font-variant-numeric: tabular-nums; }
.kropki { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.kropki i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink-60) 50%, transparent); }
.kropki i.kropki__biezaca { width: 10px; height: 10px; border: 0; background: var(--amber); }
.ekran__mik { display: flex; align-items: center; gap: 13px; margin-top: 13px; }
.ekran__mik p { font: 400 15px/1.35 var(--font-body); color: var(--ink); }
.mik { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; }
.mik::before, .mik::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.mik::before { background: color-mix(in srgb, var(--deep-teal) 25%, transparent); opacity: .5; }
.mik::after { background: var(--teal-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep-teal) 40%, transparent); }
.mik i { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--deep-teal); }
@keyframes va-oddech { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.45); opacity: 0; } }

/* Napisy na żywo: „Asystent:” zwykłym kolorem tekstu, „Ty:” przygaszonym, etykieta w wadze 500 (jak na platformie).
   isolation: zaznaczenie słów (z-index: -1) maluje się nad tłem pola, pod tekstem. */
.ekran__napisy { isolation: isolate; display: flex; flex-direction: column; gap: 7px; margin-top: 13px; padding: 11px 14px; border-radius: 10px; background: var(--cream); }
.kw { font: 400 14.5px/1.45 var(--font-body); color: var(--ink); }
.kw--ty { color: var(--ink-60); }
.kw__kto { font-weight: 500; }
/* „dopytanie” to znacznik strony nad ekranem platformy, nie jej tekst: bursztynowa plakietka. */
.dopytanie { display: inline-block; margin-right: 5px; padding: 3px 8px 4px; border-radius: 999px; font: 600 12px/1 var(--font-body); letter-spacing: .01em; color: var(--ink);
  background: color-mix(in srgb, var(--amber) 34%, transparent); vertical-align: 1px; }

/* Fragment odpowiedzi, który trafi na kartkę: bursztynowy zakreślacz. Bez JS i w stanie końcowym tło stoi na
   samym <mark>; gdy scena.js rozbije tekst na słowa, zakreślacz rysuje się słowo po słowie (scaleX). */
mark.fr { color: var(--ink); background: color-mix(in srgb, var(--amber) 46%, var(--cream)); border-radius: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 46%, var(--cream)); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Kartka „Na spotkanie” ---------- */
.kartka { background: var(--papier); border-radius: 6px; padding: 22px 28px 8px; box-shadow: 0 2px 4px color-mix(in srgb, var(--dark-teal) 6%, transparent), 0 22px 48px color-mix(in srgb, var(--dark-teal) 18%, transparent); }
.kartka__tytul { font: 500 32px/1 var(--font-display); letter-spacing: -.01em; color: var(--deep-teal); }
.kartka__pod { margin-top: 8px; font: 400 15px/1.45 var(--font-body); color: var(--ink-60); }
.kartka__tematy { list-style: none; margin-top: 12px; }
.temat { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "k n i" ". c c"; column-gap: 14px; align-items: baseline; padding: 11px 0 10px; border-top: 1px solid color-mix(in srgb, var(--deep-teal) 15%, transparent); }
.temat__tresc { display: contents; }
.temat__kropka { grid-area: k; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); align-self: start; margin-top: 7px; }
.temat__nazwa { grid-area: n; font: 600 16.5px/1.35 var(--font-body); color: var(--deep-teal); }
.temat__cytaty { grid-area: c; margin-top: 3px; font: 400 15px/1.5 var(--font-body); color: var(--ink-60); }
.cyt__slowa { color: var(--ink); background: color-mix(in srgb, var(--amber) 34%, var(--papier)); border-radius: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 34%, var(--papier)); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.temat__ile { grid-area: i; font: 500 15px/1.35 var(--font-body); color: var(--ink-60); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Podpis i „Odtwórz” ---------- */
.va-scena__podpis { margin-top: 26px; max-width: 62ch; font: 400 17px/1.6 var(--font-body); color: var(--ink-60); text-wrap: pretty; }
/* Cel dotyku 44 px bez rozpychania wiersza: dopełnienie zjedzone ujemnym marginesem. Widoczny tylko, gdy scena
   naprawdę gra (JS działa, bez ograniczonego ruchu). */
.va-odtworz { display: none; padding: 12px 8px; margin: -12px -8px -12px 0; background: none; border: 0; cursor: pointer;
  font: 600 17px/1.2 var(--font-body); color: var(--deep-teal); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.va-odtworz:hover { color: var(--dark-teal); }

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

/* ---------- Scena: stan „przed” i przebieg (tylko z JS i bez ograniczonego ruchu) ---------- */
/* .scena--koniec: scena doszła do końca (albo nie gra), czyli stan domyślny. Póki go nie ma, wszystko, co się
   pojawia, czeka ukryte, aż scena.js nada mu .jest. Klasa bez-sceny (skrypt w <head>, gdy scena.js nie ruszył)
   przywraca stan końcowy. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.bez-sceny) .va-odtworz { display: inline-block; }

  html.js:not(.bez-sceny) .scena:not(.scena--koniec) .scena__urz:not(.przygas) .ekran__karta,
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) .scena__urz:not(.przygas) .scena__kiedy { opacity: 1; }
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) .kw:not(.jest),
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) .kw__kto:not(.jest),
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) .dopytanie:not(.jest),
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) .sl:not(.jest),
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) .temat:not(.jest),
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) .cyt:not(.jest) { opacity: 0; }
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) .kartka:not(.jest) { opacity: 0; transform: translateY(32px); }

  .scena .kw, .scena .kw__kto, .scena .dopytanie, .scena .sl, .scena .temat, .scena .cyt { transition: opacity .28s ease; }
  .scena .kartka { transition: opacity .7s ease, transform .9s cubic-bezier(.3, .6, .2, 1); }

  /* Zakreślacz słowo po słowie (po rozbiciu na słowa): tło przechodzi z <mark> na ::before każdego słowa. */
  .scena--rozbita mark.fr { background: none; box-shadow: none; }
  .scena--rozbita mark.fr .sl { position: relative; display: inline-block; }
  .scena--rozbita mark.fr .sl::before { content: ''; position: absolute; z-index: -1; left: -.1em; right: -.32em; top: .1em; bottom: .06em;
    background: color-mix(in srgb, var(--amber) 46%, var(--cream)); transform-origin: 0 50%; transition: transform .32s cubic-bezier(.3, .6, .2, 1); }
  .scena--rozbita mark.fr .sl:last-child::before { right: -.1em; }
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) mark.fr:not(.jest) .sl::before { transform: scaleX(0); }
  /* Do zaznaczenia fragment ma kolor swojej wypowiedzi (przygaszony przy „Ty:”), inaczej zdradzałby się wcześniej. */
  html.js:not(.bez-sceny) .scena:not(.scena--koniec) mark.fr:not(.jest) { color: inherit; }

  /* Oddech znaku mikrofonu tylko w trakcie rozmowy; gdy urządzenia przygasają, rozmowa jest skończona. */
  .scena--gra .scena__urz:not(.przygas) .mik::before { animation: va-oddech 2.4s ease-in-out infinite; }

  /* Reset przed powtórką: bez przejść, żeby scena nie „odjeżdżała” na oczach. */
  .scena--reset *, .scena--reset *::before, .scena.scena--reset .kartka { transition: none !important; }
}


/* Fragment w locie z ekranu na kartkę (tworzy go scena.js; Web Animations, tylko transform i opacity). */
.scena__lot { position: absolute; z-index: 10; left: 0; top: 0; white-space: nowrap; pointer-events: none; transform-origin: 0 0; color: var(--ink);
  background: color-mix(in srgb, var(--amber) 52%, var(--cream)); border-radius: 2px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 52%, var(--cream)), 0 8px 20px color-mix(in srgb, var(--dark-teal) 18%, transparent); }

/* ---------- Plan rozwoju ---------- */
.va-plan { background: var(--cream-dark); }
.va-plan__glowa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.va-plan__glowa .lead { margin-top: 0; }
.va-plan__glowa time { color: var(--ink); font-weight: 500; white-space: nowrap; }

.va-plan__kolumny { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--dark-teal); }
.va-plan__kol { padding: 26px clamp(24px, 3vw, 40px) 4px 0; }
.va-plan__kol + .va-plan__kol { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid color-mix(in srgb, var(--deep-teal) 18%, transparent); }
.va-plan__kol h3 { display: flex; align-items: center; gap: 14px; font: italic 500 clamp(32px, 2.8vw, 40px)/1.05 var(--font-display); letter-spacing: -.01em; color: var(--deep-teal); }
.va-plan__kol--teraz h3 { color: var(--amber-deep); }
.va-plan__kol--teraz h3 i { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
.va-plan__kol--teraz h3 i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--amber); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .va-plan__kol--teraz h3 i.fala--gra::after { animation: va-ping 2.6s ease-out infinite; }
}
.va-plan__kiedy { margin: 8px 0 24px; font: 400 17px/1.4 var(--font-body); color: var(--ink-60); }
.va-plan__pozycje { list-style: none; }
.va-plan__pozycje li { padding-bottom: 24px; }
.va-plan__pozycje p { font: 400 17px/1.55 var(--font-body); color: var(--ink-60); text-wrap: pretty; }
.va-plan__pozycje .va-plan__tytul { margin-bottom: 4px; font: 600 18px/1.35 var(--font-body); color: var(--ink); }

.va-zmiany { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(56px, 6vw, 88px); }
.va-zmiany__glowa h3 { font: italic 500 clamp(30px, 2.6vw, 36px)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--deep-teal); }
.va-zmiany__glowa p { margin-top: 8px; font: 400 17px/1.5 var(--font-body); color: var(--ink-60); }
.va-zmiany__lista { list-style: none; }
.va-zmiany__lista li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 15px 0; border-top: 1px solid color-mix(in srgb, var(--deep-teal) 16%, transparent); }
.va-zmiany__lista li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 16%, transparent); }
.va-zmiany__nr { font: 400 26px/1 var(--font-display); color: var(--deep-teal); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.va-zmiany__lista p { font: 400 17px/1.55 var(--font-body); color: var(--ink); text-wrap: pretty; }
/* Bez JS lista jest pełna, a przycisk ukryty; z JS widać pięć pierwszych pozycji (liczy pozycja, bez klasy na wierszu). Przełącznik obsługuje scena.js,
   więc gdy on nie ruszył (klasa bez-sceny), lista też zostaje pełna, a przycisk ukryty. */
.va-zmiany__przelacz { display: none; }
html.js:not(.bez-sceny) .va-zmiany:not(.otwarte) .va-zmiany__lista li:nth-child(n+6) { display: none; }
html.js:not(.bez-sceny) .va-zmiany:not(.otwarte) .va-zmiany__lista li:nth-child(5) { border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 16%, transparent); }
html.js:not(.bez-sceny) .va-zmiany__przelacz { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 600 17px/1.2 var(--font-body); color: var(--deep-teal); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.va-zmiany__przelacz:hover { color: var(--dark-teal); }

/* ---------- Sekcje 6.2 do 6.8 i 6.10 ---------- */
/* Rytm tła: krem i piasek (--cream-dark) na przemian, dwie ciemne sekcje (dane, rozmowa) jak „Zacznijmy od rozmowy”
   na reszcie serwisu. Bez kart: treść w kolumnach i wierszach z cienkimi liniami, jak plan rozwoju. Trzy rysunki
   (kroki, warstwy, rząd kropek) mówią podpisem, co znaczy jedna kropka; poza nimi strona stoi, rusza się tylko
   wejście i kropki „Teraz”. */
.va-sekcja--piasek { background: var(--cream-dark); }
/* Wejście i pierwsza sekcja mają to samo tło; cienka linia je rozdziela (jak .hero-sub + .sekcja--krem). */
.va-wejscie + .sekcja { border-top: 1px solid color-mix(in srgb, var(--deep-teal) 14%, transparent); }

.va-link { color: var(--deep-teal); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.va-link:hover { color: var(--dark-teal); }

/* Podpis rysunku („Jedna kropka to…”). */
.va-podpis { margin-top: 18px; max-width: 60ch; font: 400 17px/1.5 var(--font-body); color: var(--ink-60); }
.sekcja--ciemna .va-podpis { color: color-mix(in srgb, var(--cream) 80%, var(--dark-teal)); }

/* Dwie kolumny: nagłówek po lewej, treść po prawej (co zyskuje firma, jak to działa, obawy). */
.va-dwie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 88px); align-items: start; }

/* Kropki rysunków (inline SVG): człowiek pełna zieleń, AI bursztyn, serwer BBMG kółko; na ciemnym tle jasne. */
.va-k--czlowiek { fill: var(--deep-teal); }
.va-k--ai { fill: var(--amber); }
.va-k--serwer { fill: var(--cream); stroke: var(--deep-teal); stroke-width: 2; }
.va-k--jasna { fill: var(--cream); }
.va-k--puste { fill: var(--dark-teal); stroke: color-mix(in srgb, var(--cream) 70%, var(--dark-teal)); stroke-width: 1.5; stroke-dasharray: 2.6 2.4; }

/* ---------- 6.2 Po co: trzy myśli pod jedną kreską, jak kolumny planu ---------- */
.va-mysli { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1.5px solid var(--dark-teal); }
.va-mysli li { padding: 26px clamp(24px, 3vw, 40px) 0 0; }
.va-mysli li + li { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid color-mix(in srgb, var(--deep-teal) 18%, transparent); }
.va-mysli h3 { font: 500 clamp(28px, 2.4vw, 34px)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--deep-teal); text-wrap: balance; }
.va-mysli p { margin-top: 14px; font: 400 clamp(17px, 1.25vw, 18px)/1.6 var(--font-body); color: var(--ink-60); text-wrap: pretty; }

/* ---------- 6.3 i 6.5: punkty (tytuł i zdanie) w wierszach z linią ---------- */
.va-punkty { list-style: none; }
.va-punkty li { padding: 22px 0 24px; border-top: 1px solid color-mix(in srgb, var(--deep-teal) 18%, transparent); }
.va-punkty li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 18%, transparent); }
.va-punkty h3 { font: 600 clamp(19px, 1.45vw, 21px)/1.35 var(--font-body); color: var(--deep-teal); text-wrap: balance; }
.va-punkty p { margin-top: 6px; max-width: 60ch; font: 400 clamp(17px, 1.25vw, 18px)/1.6 var(--font-body); color: var(--ink-60); text-wrap: pretty; }
.va-dwie > .va-punkty { margin-top: 8px; }
/* Co potrafi: osiem pozycji w dwóch kolumnach; dolna linia pod ostatnim wierszem obu kolumn. */
.va-punkty--dwa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); margin-top: clamp(36px, 4vw, 56px); }
.va-punkty--dwa li:nth-last-child(2) { border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 18%, transparent); }

/* ---------- 6.4 Jak to działa: oś pięciu kroków ---------- */
/* Krok: kropka, numer, tytuł w pierwszym wierszu (30 px), opis pod tytułem. Oś łączy środki kropek (--y: środek
   pierwszego wiersza) z odstępem 4 px nad i pod kropką; odcinek między krokami 2 i 3 (oba widzi uczestnik) jest
   bursztynowy, jak ich kropki. */
.va-kroki { list-style: none; margin-top: 6px; }
.va-krok { --y: 15px; position: relative; display: grid; grid-template-columns: 24px 2.2rem minmax(0, 1fr); grid-template-rows: 30px auto; column-gap: 14px; padding-bottom: clamp(26px, 2.6vw, 36px); }
.va-krok::after { content: ''; position: absolute; left: 11px; top: calc(var(--y) + 12px); bottom: calc(12px - var(--y)); width: 2px; border-radius: 1px; background: color-mix(in srgb, var(--deep-teal) 20%, transparent); }
.va-krok:last-child { padding-bottom: 0; }
.va-krok:last-child::after { display: none; }
.va-krok--uczestnik:has(+ .va-krok--uczestnik)::after { background: var(--amber); }
.va-krok__kropka { grid-column: 1; grid-row: 1; width: 16px; height: 16px; margin: calc(var(--y) - 8px) 0 0 4px; fill: var(--deep-teal); }
.va-krok--uczestnik .va-krok__kropka { fill: var(--amber); }
.va-krok__nr { grid-column: 2; grid-row: 1; align-self: baseline; font: 400 30px/30px var(--font-display); color: var(--deep-teal); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.va-krok h3 { grid-column: 3; grid-row: 1; align-self: baseline; font: 600 clamp(19px, 1.5vw, 21px)/30px var(--font-body); color: var(--ink); }
.va-krok p { grid-column: 3; grid-row: 2; margin-top: 6px; max-width: 60ch; font: 400 clamp(17px, 1.25vw, 18px)/1.6 var(--font-body); color: var(--ink-60); text-wrap: pretty; }
.va-dwie__glowa .va-podpis { margin-top: 22px; }
/* Na komputerze nagłówek, lead i podpis zostają w oknie, gdy obok przewija się pięć kroków. */
@media (min-width: 901px) { #jak .va-dwie__glowa { position: sticky; top: calc(var(--nav-height) + 40px); } }

/* ---------- 6.6 Warstwy: gdzie AI, gdzie człowiek ---------- */
/* Wiersz warstwy: tor (trzy pasy po --pas: człowiek, serwer BBMG, AI) i treść. Kropka stoi w pasie tego, kto pracuje
   (--x), na wysokości pierwszego wiersza nazwy (--y). Linia: pionowy ogon od kropki w dół, kończący się --zakret nad
   dołem wiersza, i łuk SVG od tego miejsca (koniec ogona poprzedniej warstwy) do bieżącej kropki; tak powstaje jedna
   droga przez sześć warstw. W warstwie 4 ogon wychodzi z kropki AI w lewo i zakręca w pas serwera (AI zgłasza,
   serwer zapisuje). */
.va-warstwy { --pas: 56px; --kr: 16px; --y: 36px; --zakret: 44px; --linia: color-mix(in srgb, var(--deep-teal) 34%, var(--cream)); margin: clamp(40px, 5vw, 64px) 0 0; }
.va-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 32px; margin-bottom: 20px; font: 500 17px/1.3 var(--font-body); color: var(--ink); }
.va-legenda li { display: inline-flex; align-items: center; gap: 10px; }
.va-legenda svg { flex: none; width: 16px; height: 16px; overflow: visible; }
.va-warstwy__lista { list-style: none; }
.va-warstwa { --x: 0; display: grid; grid-template-columns: calc(3 * var(--pas)) minmax(0, 1fr); column-gap: clamp(16px, 3vw, 44px); }
.va-warstwa--serwer { --x: 1; }
.va-warstwa--ai { --x: 2; }
.va-warstwa__tor { position: relative; }
.va-warstwa__luk { position: absolute; left: 0; top: calc(-1 * var(--zakret)); width: 100%; height: calc(var(--y) + var(--zakret)); overflow: visible; }
.va-warstwa__luk path { fill: none; stroke: var(--linia); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.va-warstwa__tor::after { content: ''; position: absolute; top: var(--y); bottom: var(--zakret); left: calc((var(--x) + .5) * var(--pas) - .75px); width: 1.5px; background: var(--linia); }
.va-warstwa--zglasza .va-warstwa__tor::after { top: calc(var(--y) - .75px); left: calc(1.5 * var(--pas) - .75px); width: var(--pas); background: none;
  border-top: 1.5px solid var(--linia); border-left: 1.5px solid var(--linia); border-top-left-radius: 14px; }
.va-warstwa:last-child .va-warstwa__tor::after { display: none; }
.va-warstwa__kropka { position: absolute; z-index: 1; top: calc(var(--y) - var(--kr) / 2); left: calc((var(--x) + .5) * var(--pas) - var(--kr) / 2); width: var(--kr); height: var(--kr); overflow: visible; }

.va-warstwa__tresc { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(24px, 3vw, 48px);
  padding: 20px 0 28px; border-top: 1px solid color-mix(in srgb, var(--deep-teal) 16%, transparent); }
.va-warstwa:last-child .va-warstwa__tresc { border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 16%, transparent); }
.va-warstwa h3 { grid-column: 1; display: flex; align-items: baseline; gap: 12px; font: 600 20px/32px var(--font-body); color: var(--ink); }
.va-warstwa__nr { flex: none; width: 20px; font: 400 30px/32px var(--font-display); color: var(--deep-teal); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.va-warstwa__kto { grid-column: 1; align-self: start; padding-left: 32px; font: 400 17px/1.45 var(--font-body); color: var(--ink-60); }
.va-warstwa__opis { grid-column: 2; grid-row: 1 / span 2; padding-top: 2px; max-width: 60ch; font: 400 clamp(17px, 1.25vw, 18px)/1.6 var(--font-body); color: var(--ink); text-wrap: pretty; }
.va-warstwa__narzedzia { grid-column: 2; margin-top: 10px; max-width: 60ch; font: 400 17px/1.55 var(--font-body); color: var(--ink-60); text-wrap: pretty; }
.va-warstwy__pod { margin-top: clamp(28px, 3vw, 40px); max-width: 62ch; }
.va-warstwy__pod p { font: 400 clamp(17px, 1.25vw, 18px)/1.6 var(--font-body); color: var(--ink); }
.va-warstwy__pod .va-warstwy__tworca { margin-top: 8px; color: var(--ink-60); }

/* ---------- 6.7 Obawy ---------- */
.va-obawy__tekst p { margin-top: 20px; max-width: 54ch; font: 400 clamp(18px, 1.35vw, 20px)/1.6 var(--font-body); color: var(--ink-60); text-wrap: pretty; }
.va-obawy__tekst .h2 + p { margin-top: 28px; }
.va-obawy__co .blok-h3 { margin-top: 0; }
.va-obawy__lista { list-style: none; margin-top: 20px; }
.va-obawy__lista li { padding: 15px 0 16px; border-top: 1px solid color-mix(in srgb, var(--deep-teal) 18%, transparent); font: 400 clamp(17px, 1.25vw, 18px)/1.55 var(--font-body); color: var(--ink); text-wrap: pretty; }
.va-obawy__lista li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 18%, transparent); }

/* ---------- 6.8 Dane: rząd pięciu kropek i fakty ---------- */
/* Kropka nad nazwą miejsca; łącznik od środka kropki do środka następnej (szerokość kolumny plus odstęp). */
.va-droga { --odstep: clamp(16px, 2vw, 32px); --linia: color-mix(in srgb, var(--cream) 34%, var(--dark-teal)); margin: clamp(40px, 5vw, 64px) 0 0; }
.va-droga__lista { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--odstep); }
.va-droga__lista li { position: relative; padding-top: 42px; }
.va-droga__lista li::before { content: ''; position: absolute; top: 10.25px; left: 11px; width: calc(100% + var(--odstep)); height: 1.5px; background: var(--linia); }
.va-droga__lista li:last-child::before { display: none; }
.va-droga__kropka { position: absolute; z-index: 1; left: 0; top: 0; width: 22px; height: 22px; overflow: visible; }
.va-droga__nazwa { font: 600 clamp(18px, 1.4vw, 20px)/1.3 var(--font-body); color: var(--cream); }
.va-droga__gdzie { margin-top: 6px; max-width: 26ch; font: 400 17px/1.5 var(--font-body); color: color-mix(in srgb, var(--cream) 80%, var(--dark-teal)); text-wrap: pretty; }
.va-droga .va-podpis { margin-top: 28px; }

.va-fakty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); margin-top: clamp(48px, 5vw, 72px); }
.va-fakty > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 2px 20px; padding: 15px 0 16px; border-top: 1px solid color-mix(in srgb, var(--cream) 20%, var(--dark-teal)); }
.va-fakty > div:nth-last-child(-n + 2) { border-bottom: 1px solid color-mix(in srgb, var(--cream) 20%, var(--dark-teal)); }
.va-fakty dt { font: 400 17px/1.5 var(--font-body); color: color-mix(in srgb, var(--cream) 76%, var(--dark-teal)); }
.va-fakty dd { font: 400 clamp(17px, 1.25vw, 18px)/1.5 var(--font-body); color: var(--cream); text-wrap: pretty; }
.va-dane__prosba { margin-top: clamp(36px, 4vw, 52px); max-width: 60ch; font: 400 clamp(18px, 1.45vw, 21px)/1.55 var(--font-body); color: var(--cream); }

/* ---------- 6.10 PDF i rozmowa ---------- */
.va-koniec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pdf rozmowa"; gap: clamp(48px, 6vw, 104px); align-items: center; }
.va-koniec__rozmowa { grid-area: rozmowa; }
.va-koniec__pdf { grid-area: pdf; }
.va-koniec__uwaga { margin-top: 18px; max-width: 54ch; font: 400 17px/1.6 var(--font-body); color: color-mix(in srgb, var(--cream) 78%, var(--dark-teal)); }
.va-koniec__podpis { margin-top: 30px; max-width: 46ch; font: 400 17px/1.55 var(--font-body); color: color-mix(in srgb, var(--cream) 80%, var(--dark-teal)); text-wrap: pretty; }
.va-koniec__pdf .btns { margin-top: 20px; }
/* Miniatury dwóch stron PDF: ramki A4 obok siebie, druga niżej. Obrazy (472 × 668, 2x ramki) renderuje z PDF-u
   scripts/pdf_voiceaudit.py; tło ramki widać tylko, zanim obraz się wczyta. */
.va-pdf { display: grid; grid-template-columns: repeat(2, minmax(0, 236px)); gap: clamp(14px, 2vw, 24px); align-items: start; }
.va-pdf__strona { aspect-ratio: 210 / 297; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--cream) 6%, var(--dark-teal));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 22%, var(--dark-teal)); }
.va-pdf__strona img { display: block; width: 100%; height: 100%; }
.va-pdf__strona--2 { margin-top: 36px; }

/* ---------- Sekcje: szerokości ---------- */
@media (max-width: 900px) {
  .va-dwie { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .va-dwie > .va-punkty { margin-top: 0; }
  .va-mysli { grid-template-columns: minmax(0, 1fr); }
  .va-mysli li, .va-mysli li + li { padding: 22px 0 26px; border-left: 0; }
  .va-mysli li + li { border-top: 1px solid color-mix(in srgb, var(--deep-teal) 18%, transparent); }
  .va-mysli li:last-child { padding-bottom: 0; }

  .va-warstwy { --pas: 30px; --kr: 14px; }
  .va-warstwa__tresc { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-bottom: 24px; }
  .va-warstwa h3 { font-size: 19px; }
  .va-warstwa__opis { grid-column: 1; grid-row: auto; margin-top: 8px; padding-top: 0; }
  .va-warstwa__narzedzia { grid-column: 1; }

  .va-droga__lista { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .va-droga__lista li { padding: 0 0 26px 40px; }
  .va-droga__lista li:last-child { padding-bottom: 0; }
  .va-droga__lista li::before { top: 11px; left: 10.25px; width: 1.5px; height: 100%; }
  .va-droga__gdzie { max-width: 40ch; }
  .va-fakty { grid-template-columns: minmax(0, 1fr); }
  .va-fakty > div:nth-last-child(2) { border-bottom: 0; }

  .va-koniec { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rozmowa" "pdf"; gap: 56px; }
}
@media (max-width: 760px) {
  .va-punkty--dwa { grid-template-columns: minmax(0, 1fr); }
  .va-punkty--dwa li:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .va-krok { grid-template-columns: 24px 1.15rem minmax(0, 1fr); column-gap: 12px; }
  .va-fakty > div { grid-template-columns: minmax(0, 1fr); }
  .va-pdf__strona--2 { margin-top: 24px; }
}

/* ---------- Szerokości ---------- */
/* Mniejszy laptop (1100-1399 px): węższy telefon oddaje miejsce komputerowi i kartce, które wtedy mniej się łamią. */
@media (min-width: 1100px) and (max-width: 1399px) { .scena { --tel: 226px; --zakladka: 40px; } }
/* Poniżej 1100 px tekst nad sceną; scena zachowuje układ komputer, telefon, kartka. */
@media (max-width: 1099px) {
  .va-wejscie__uklad { grid-template-columns: minmax(0, 1fr); }
  .va-wejscie__tekst { max-width: 40rem; }
  .va-wejscie .lead { font-size: clamp(18px, 2.4vw, 20px); }
  .va-scena { max-width: 780px; }
}
@media (max-width: 900px) {
  .va-plan__glowa { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
  .va-plan__kolumny { grid-template-columns: minmax(0, 1fr); }
  .va-plan__kol, .va-plan__kol + .va-plan__kol { padding: 24px 0 4px; border-left: 0; }
  .va-plan__kol + .va-plan__kol { border-top: 1px solid color-mix(in srgb, var(--deep-teal) 18%, transparent); }
  .va-zmiany { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .va-plan__kol h3 { font-size: 32px; }
  .va-zmiany__glowa h3 { font-size: 30px; }
}
/* Telefon: komputer na górze, telefon pod nim, kartka pod telefonem (spec §6.1). */
@media (max-width: 640px) {
  .scena { --tel: min(276px, 80%); }
  .scena { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .scena__urz--laptop, .scena__urz--telefon, .kartka { grid-column: 1; grid-row: auto; }
  .scena__urz--telefon { justify-self: center; margin: 36px 0 0; }
  .scena__urz--telefon .scena__kiedy { text-align: left; }
  .kartka { margin: 36px 0 0; padding: 22px 20px 8px; }
  .laptop__pokrywa { padding: 8px 8px 10px; border-radius: 13px 13px 4px 4px; }
  .laptop__ekran { aspect-ratio: auto; padding: 12px 12px; }
  .laptop__podstawa { margin: 0 -3%; height: 11px; }
  .ekran__karta { padding: 14px 14px 15px; }
  .kw { font-size: 14px; }
  .va-zmiany__lista li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}