@charset "UTF-8";
/* ==========================================================================
   Twoje Miejsce — warstwa wizualna
   Krok 3 planu. Źródło prawdy: Twoje-Miejsce-makieta-strona-glowna.html
   (zaakceptowana przez Natalię 10.08.2026).

   Makieta jest referencją i nie jest dalej rozbudowywana. Ten plik przenosi
   z niej paletę, typografię i skalę odstępów do zmiennych; style sekcji
   dochodzą w Kroku 7 razem z treścią.

   Kolejność: 1 zmienne · 2 reset · 3 typografia · 4 układ · 5 focus
              6 placeholdery · 7 pasek górny · 8 stopka
   ========================================================================== */

/* ============ 1. ZMIENNE ================================================= */

:root{
  /* --- paleta, nazwy i wartości 1:1 z makiety --- */
  --noc:#1c2130;          /* granat zmierzchu */
  --noc-glebia:#141824;   /* sylwetki, stopka */
  --sliwka:#3b3550;       /* przejście zmierzch → wnętrze */
  --okno:#ffc98a;         /* światło w oknie, CTA na ciemnym */
  --okno-mocne:#f5b36b;   /* okno w stanie hover */
  --wnetrze:#f6efe3;      /* krem lampowy, tło sekcji jasnych */
  --wnetrze-cien:#efe5d2; /* cieplejszy pas, sekcje naprzemienne */
  --szalwia:#54695a;      /* zieleń szałwiowa, kolor marki */
  --szalwia-glebia:#3f5146;
  --miod:#b97e3f;         /* akcent, tła CTA na jasnym */
  --atrament:#2b2a26;     /* tekst na kremie */
  --mgla:#f3ede2;         /* tekst na ciemnym */
  --mgla-cicha:#c9c4bb;   /* tekst drugorzędny na ciemnym */
  --mgla-stopki:#8b93a8;  /* etykiety kolumn stopki */
  --kryzys-tlo:#1e2434;
  --kryzys-ramka:#333d54;
  --linia:#d9cdb8;        /* obrys kart na kremie */
  --linia-ciepla:#e2d7c2;
  --karta:#fbf7ee;        /* tło kart na kremie */

  /* --- pierścień focusa ---
     Osobny token, bo --miod z makiety daje na kremie 3,00:1, a na
     --wnetrze-cien już tylko 2,75:1, czyli poniżej progu SC 1.4.11.
     Ciemniejszy odcień z tej samej rodziny: 4,43:1 i 4,05:1. */
  --pierscien:#9a6224;

  /* --- typografia --- */
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;

  --tekst-xs:.78rem;      /* etykiety wersalikowe */
  --tekst-s:.85rem;       /* pasek, drobne podpisy */
  --tekst-m:.95rem;       /* stopka, elementy interfejsu */
  --tekst-r:.98rem;       /* proza drobniejsza */
  --tekst-base:1.1875rem; /* 19px — baza; minimum z granic bezpieczeństwa to 18px */
  --tekst-l:clamp(1.45rem,3.2vw,1.9rem);
  --tekst-xl:clamp(1.5rem,3.4vw,2.1rem);
  --tekst-hero:clamp(2rem,5.6vw,3.4rem);

  --interlinia:1.65;
  --interlinia-naglowka:1.25;

  /* --- skala odstępów ---
     Progresja ~1,4×. Stopnie 2, 4, 5, 6 i 8 trafiają w wartości,
     których makieta używa najczęściej. */
  --odstep-1:.3rem;
  --odstep-2:.55rem;
  --odstep-3:.8rem;
  --odstep-4:1.1rem;
  --odstep-5:1.6rem;
  --odstep-6:2.2rem;
  --odstep-7:3.2rem;
  --odstep-8:4.5rem;   /* pion sekcji */
  --odstep-9:6rem;

  --promien-s:8px;
  --promien-m:14px;
  --promien-l:16px;
  --promien-xl:20px;
  --promien-pigulka:999px;

  --dotyk:48px;        /* minimalna strefa dotyku z granic bezpieczeństwa */

  /* Wysokość paska liczona ze składników, nie wpisana z palca. Pasek jest
     position:fixed, więc body odsuwa się o tę samą wartość — gdyby obie
     liczby żyły osobno, pierwsza zmiana odstępu w Kroku 7 wsunęłaby treść
     pod pasek. Mobile: dwa rzędy po --dotyk plus przerwa między nimi. */
  --wys-paska:calc(var(--odstep-2) * 2 + var(--dotyk) * 2 + var(--odstep-2));
  --szer-tresci:44rem;
  --szer-szeroka:64rem;
}

/* Osoba oglądająca nocą w trybie ciemnym dostaje o ~6% przygaszone kremy.
   Zachowane z makiety. */
@media (prefers-color-scheme:dark){
  :root{ --wnetrze:#eee5d4; --wnetrze-cien:#e5dbc6 }
}

/* ============ 2. RESET =================================================== */

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--wys-paska) + var(--odstep-3));
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit}

/* ============ 3. TYPOGRAFIA ============================================== */

body{
  font-family:var(--serif);
  font-size:var(--tekst-base);
  line-height:var(--interlinia);
  color:var(--atrament);
  background:var(--noc);
  padding-top:var(--wys-paska); /* pasek jest fixed i nie może zakrywać treści */
}

h1,h2,h3{font-weight:400;line-height:var(--interlinia-naglowka);text-wrap:balance}
h1{font-size:var(--tekst-hero);letter-spacing:.005em;max-width:15ch}
h2{font-size:var(--tekst-xl);max-width:26ch}
h3{font-size:1.12rem;font-weight:600}

p{max-width:36rem}
p + p{margin-top:var(--odstep-4)}

.sans{font-family:var(--sans)}
.cichy{color:#5d5a52;font-size:var(--tekst-r)}

/* Etykieta sekcji: wersaliki z zapaloną szybką okna zamiast kropki. */
.etykieta{
  font-family:var(--sans);font-size:var(--tekst-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--szalwia);margin-bottom:var(--odstep-3);
  display:flex;align-items:center;gap:var(--odstep-2);
}
.etykieta::before{
  content:"";width:.85rem;height:1.05rem;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--okno),var(--okno-mocne));
  box-shadow:0 0 10px rgba(255,201,138,.55);
}

/* --okno ma na kremie 1,31:1. Nigdy jako tekst na jasnym tle —
   wyłącznie na --noc, --noc-glebia, --sliwka i --szalwia-glebia. */

.tylko-dla-czytnika{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ============ 4. UKŁAD =================================================== */

.srodek{max-width:var(--szer-tresci);margin-inline:auto;padding-inline:var(--odstep-4)}
.srodek-szeroki{max-width:var(--szer-szeroka);margin-inline:auto;padding-inline:var(--odstep-4)}

/* Krem jest domyślnym płótnem wnętrza. Bez tego ciemny --atrament leży na
   ciemnym tle body i wychodzi 1,12:1. W makiecie nie było tego widać, bo
   każda sekcja miała własne tło; tu sekcje są jeszcze puste.
   Ciemne tło body zostaje pod hero, które w Kroku 7 pomaluje się samo. */
main{background:var(--wnetrze)}
main section{padding:var(--odstep-8) 0}

/* ============ 5. FOCUS =================================================== */

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--pierscien);
  outline-offset:2px;
  border-radius:4px;
}
/* Na ciemnym tle ciemny pierścień znika, więc konteksty ciemne
   przestawiają token na światło okna: 6,99:1 na pasku, 11,78:1 w stopce. */
.pasek,footer,.kryzys{--pierscien:var(--okno)}

.skip{
  position:fixed;top:var(--odstep-2);left:var(--odstep-3);z-index:30;
  transform:translateY(-250%);
  background:var(--noc-glebia);color:var(--okno);
  font-family:var(--sans);font-size:.9rem;
  display:inline-flex;align-items:center;min-height:var(--dotyk);
  padding:0 1.1rem;border-radius:var(--promien-s);text-decoration:none;
}
.skip:focus{transform:none}

/* ============ 6. PLACEHOLDERY ===========================================
   Reguła projektu: brakujące dane są widoczne, nigdy schowane w komentarzu.
   Każdy nosi atrybut data-placeholder z identyfikatorem PH-, po którym
   Krok 9 buduje rejestr jednym grepem. W tym komentarzu identyfikator jest
   celowo rozbity, żeby nie wpadł do tamtego zestawienia jako fałszywy wpis.
   ======================================================================== */

[data-placeholder]{
  --ph-obrys:var(--szalwia);
  --ph-tekst:var(--szalwia-glebia);
  font-family:var(--sans);
  border:1px dashed var(--ph-obrys);
  border-radius:var(--promien-s);
  color:var(--ph-tekst);
}
.pasek [data-placeholder],footer [data-placeholder]{
  --ph-obrys:rgba(255,201,138,.5);
  --ph-tekst:var(--mgla-cicha);
}

/* Blok placeholdera w treści — z widocznym identyfikatorem, bo te ekrany
   są jawnie w budowie. */
.placeholder-blok{
  display:block;max-width:36rem;
  padding:var(--odstep-4);
  font-size:var(--tekst-m);line-height:1.5;
  background:rgba(84,105,90,.06);
}
.placeholder-blok .id{
  display:inline-block;font-weight:700;letter-spacing:.06em;
  font-size:var(--tekst-xs);text-transform:uppercase;
  margin-bottom:var(--odstep-1);
}
.placeholder-blok .kto{display:block;margin-top:var(--odstep-2);font-size:var(--tekst-s);opacity:.85}

/* ============ ZNAK MARKI (PH-LOGO-01 zdjęty 01.09.2026) ==================
   Natalia dostarczyła oryginał: dom rysowany jedną linią, w środku serce,
   pod spodem odręczne „Twoje miejsce". Pliki w /assets/logo/, wersja biała
   i czarna, PNG z przezroczystością plus wektor EPS.

   Znak jest PIONOWY (proporcja 0,91) i niesie nazwę w sobie — ale nazwa
   siedzi w dolnych 14% wysokości. W pasku dałoby to napis wysoki na kilka
   pikseli, czyli plamkę udającą tekst. Dlatego pasek dostaje SAM SYGNET
   (dom z sercem, bez napisu), a nazwa zostaje słowem obok. Pełny znak
   z napisem stoi w stopce, gdzie ma 120 px i napis daje się przeczytać.

   SYGNET POCHODZI Z OSOBNEGO PLIKU, nie z wycinania pełnego logo, i to jest
   poprawka z 01.09 wieczorem. Pierwsza wersja wycinała górę pełnego znaku
   linią poziomą — a ta linia przechodziła przez wysoki zawijas litery „T"
   z napisu „Twoje miejsce", bo T sięga wyżej niż reszta liter i wchodzi pod
   sam domek. W pasku wisiał więc pod domem kawałek litery udający kreskę.
   Natalia przysłała gotowy sygnet (Twoje_Miejsce_FAVICON.png, sam dom
   z sercem) i znak jest robiony z niego: przycięty do bounding boxa
   i przemalowany na biało z zachowaniem alfy. Proporcja 1,098.

   ROZMIAR. 28 px, nie 38 px. Przy 38 px znak był prawie trzy razy wyższy
   od tekstu paska (13,6 px) i przeciągał na siebie cały pasek — pierwsza
   rzecz, którą Paweł zobaczył po wdrożeniu. 28 px to tyle, ile miał dawny
   placeholder, i tyle mieści się w rzędzie bez rozpychania go: strefa dotyku
   marki i tak trzyma 48 px przez min-height, więc pasek nie zmienia wysokości.

   Tło paska i stopki jest ciemne, stąd wersja biała. ==================== */
.znak{flex:none;display:block;height:28px;width:auto}

/* ============ 7. PASEK GÓRNY ============================================
   Mobile: dwa rzędy, cała nawigacja widoczna, zero chowania pod hamburger.
   Rodzic na telefonie ma dojść wszędzie jednym gestem.
   Desktop od 820 px: jeden rząd, nawigacja wyśrodkowana.
   Tło rgba(20,24,36,.86) — sprawdzone nad białym pikselem: najsłabsza
   para (mgla-cicha) trzyma 6,73:1.
   ======================================================================== */

.pasek{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:grid;
  grid-template-columns:auto auto 1fr;
  grid-template-areas:
    "marka tel pilne"
    "nawig nawig nawig";
  align-items:center;
  gap:var(--odstep-2) var(--odstep-3);
  padding:var(--odstep-2) var(--odstep-4);
  background:rgba(20,24,36,.86);
  color:var(--mgla);
  font-family:var(--sans);font-size:var(--tekst-s);
}
@supports (backdrop-filter:blur(6px)){
  .pasek{backdrop-filter:blur(6px)}
}

.pasek .marka{
  grid-area:marka;
  display:inline-flex;align-items:center;gap:var(--odstep-2);
  min-height:var(--dotyk);
  font-family:var(--serif);font-size:1.02rem;letter-spacing:.04em;
  text-decoration:none;white-space:nowrap;color:var(--mgla);
}
/* Poniżej 820 px słowny znak marki ustępuje miejsca — rząd pierwszy musi
   pomieścić jeszcze numer i „Jeśli to pilne”, a ten drugi nie może być
   przycięty. Nazwa zostaje w aria-label, więc czytnik ekranu jej nie traci.
   Wcześniejsza wersja tej notatki zakładała, że reguła zniknie razem
   z placeholderem, bo „docelowe logo niesie nazwę w samym znaku". Oryginał
   przyszedł 01.09 i owszem, niesie — ale w postaci, której nie da się złożyć
   w pasku (patrz notatka przy .znak). W pasku stoi sam sygnet, więc reguła
   ZOSTAJE. Sygnet jest przy tym węższy od dawnego placeholdera (ok. 40 px
   zamiast 66), więc miejsca w pierwszym rzędzie przybyło — gdyby kiedyś
   pokazać nazwę i na telefonie, to jest ten zapas. */
@media (max-width:819px){
  .pasek .marka span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
}
.pasek .marka:hover .znak,
.pasek .marka:focus-visible .znak{opacity:.82}

.pasek .nawigacja{
  grid-area:nawig;
  display:flex;gap:var(--odstep-2);
  overflow-x:auto;scrollbar-width:none;
}
.pasek .nawigacja::-webkit-scrollbar{display:none}
/* Odstęp przeniesiony z gap do padding linku: ta sama szerokość rzędu,
   ale palec trafia w pole, nie w same litery. */
.pasek .nawigacja a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--dotyk);padding-inline:.5rem;
  text-decoration:none;color:var(--mgla-cicha);white-space:nowrap;
}
.pasek .nawigacja a:hover,
.pasek .nawigacja a:focus-visible{color:var(--okno)}
.pasek .nawigacja a[aria-current="page"]{
  color:var(--okno);
  box-shadow:inset 0 -2px 0 rgba(255,201,138,.55);
}

/* Numer telefonu centrum. Do 25.08 stał tu placeholder PH-TEL-01, świadomie
   NIE będący linkiem tel:, żeby nie dało się opublikować zmyślonego numeru.
   Rozmowa z 25.08 rozstrzygnęła: 508 184 410 staje się numerem firmowym,
   Natalia bierze sobie nowy prywatny. Element jest teraz linkiem.
   Na wąskim ekranie zamiast numeru stoi słowo „Zadzwoń” — numer w całości
   nie mieści się w pierwszym rzędzie obok „Jeśli to pilne”, a przycięty
   numer jest gorszy niż jego brak. Pełny numer czyta czytnik ekranu
   i widzi go każdy od 820 px w górę. */
.pasek .tel{
  grid-area:tel;
  display:inline-flex;align-items:center;gap:.35rem;
  min-height:var(--dotyk);
  padding:0 .7rem;white-space:nowrap;font-size:var(--tekst-s);
  text-decoration:none;color:var(--mgla);
}
.pasek .tel:hover,.pasek .tel:focus-visible{color:var(--okno)}
.pasek .tel .pelna{display:none}

.pasek .pilne{
  grid-area:pilne;justify-self:end;
  display:inline-flex;align-items:center;min-height:var(--dotyk);
  text-decoration:none;color:var(--mgla);white-space:nowrap;
  border:1px solid rgba(243,237,226,.35);border-radius:var(--promien-pigulka);
  padding:0 .85rem;
}
.pasek .pilne:hover,.pasek .pilne:focus-visible{border-color:var(--okno);color:var(--okno)}

@media (min-width:820px){
  /* jeden rząd, więc jedna strefa dotyku zamiast dwóch */
  :root{--wys-paska:calc(var(--odstep-2) * 2 + var(--dotyk))}
  .pasek{
    grid-template-columns:auto 1fr auto auto;
    grid-template-areas:"marka nawig tel pilne";
    gap:var(--odstep-4);
    padding:var(--odstep-2) var(--odstep-5);
  }
  .pasek .nawigacja{justify-content:center;gap:var(--odstep-4);overflow:visible}
  .pasek .tel .pelna{display:inline}
  .pasek .tel .skrot{display:none}
}

/* ============ 8. STOPKA =================================================
   Tor kryzysowy stoi w stopce każdej podstrony. Spokojny blok, nigdy
   popup, nigdy baner nad hero. Numery klikalne przez tel:.
   ======================================================================== */

footer{
  background:var(--noc-glebia);color:var(--mgla-cicha);
  padding:var(--odstep-7) 0 var(--odstep-6);
  font-size:var(--tekst-r);
}

.kryzys{
  background:var(--kryzys-tlo);border:1px solid var(--kryzys-ramka);
  border-radius:var(--promien-l);
  padding:var(--odstep-5);
  color:var(--mgla);max-width:var(--szer-tresci);
}
.kryzys h2{font-size:1.15rem;font-weight:600;line-height:1.35;max-width:none}
.kryzys p{margin-top:var(--odstep-2);font-size:var(--tekst-r);color:var(--mgla-cicha);max-width:none}
.kryzys ul{list-style:none;margin-top:var(--odstep-4);display:grid;gap:var(--odstep-2)}
.kryzys li{font-family:var(--sans);font-size:var(--tekst-m)}
/* Pełna strefa dotyku, nie 36 px z samej interlinii. W te cztery numery
   celuje ktoś zdenerwowany, po ciemku, jedną ręką — to najważniejsze
   punkty dotykowe w całym serwisie. */
.kryzys a{
  color:var(--okno);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;
  min-height:var(--dotyk);min-width:var(--dotyk);
  padding-right:.4rem;
}
.kryzys a:hover{text-decoration:underline}

.stopka-dane{margin-top:var(--odstep-6);display:grid;gap:var(--odstep-5)}
@media (min-width:760px){ .stopka-dane{grid-template-columns:1fr 1fr 1fr} }
.stopka-dane h3{
  font-family:var(--sans);font-size:var(--tekst-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--mgla-stopki);margin-bottom:var(--odstep-2);
}
.stopka-dane p{font-size:var(--tekst-m);line-height:1.6;color:var(--mgla-cicha);max-width:none}
/* padding-block dobrany tak, żeby pole linku sięgnęło --dotyk;
   inline-block rozpycha wiersz, więc linki rozdzielone <br> nie zachodzą. */
.stopka-dane a{
  color:var(--mgla-cicha);display:inline-block;
  padding:.75rem 0;min-width:var(--dotyk);
}
.stopka-dane a:hover{color:var(--okno)}
.stopka-dane [data-placeholder]{
  display:inline-block;padding:.3rem .55rem;margin-top:.3rem;font-size:var(--tekst-s);
}

/* Pełny znak z napisem. 120 px zamiast dawnych 76 px placeholdera: przy 76 px
   odręczny napis pod domem schodził do 9 px wysokości i rozmazywał się.
   opacity .92 zostaje — stopka jest ciemna, czysta biel na niej krzyczy. */
.logo-stopka{width:auto;height:120px;opacity:.92;margin-top:var(--odstep-6);display:block}

.prywatnosc{
  margin-top:var(--odstep-6);font-family:var(--sans);
  font-size:var(--tekst-s);color:var(--mgla-stopki);max-width:38rem;
}
.sygnatura{margin-top:var(--odstep-4);font-style:italic;font-size:.9rem;color:var(--mgla-stopki)}

/* ============ 9. RUCH ====================================================
   Granica z Kroku 7: elementy pojawiają się raz, opacity plus przesunięcie
   maks. 16 px, 400–600 ms. Zero scroll-jackingu, zero karuzel. Bez JS strona
   jest w pełni czytelna, bo stan domyślny .reveal to stan widoczny —
   ukrywa dopiero klasa .js, którą dopisuje skrypt.
   Jedyny wyjątek od ciszy to paralaksa nieba w hero (sekcja 10).
   ======================================================================== */

.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease-out,transform .55s ease-out}
.js .reveal.w-kadrze{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ============ 10. HERO ===================================================
   Zmierzch: gradient z makiety, tekst na ciemnym. Scena domu jest rysunkiem
   zastępczym i czeka na zdjęcie z sesji (PH-HERO-01).
   ======================================================================== */

.hero{
  /* Gradient zostaje pod zdjeciem: widac go, zanim plik sie doczyta, i wypelnia
     sekcje, gdyby zdjecie kiedys znikelo. */
  background:linear-gradient(180deg,#12151f 0%,var(--noc) 45%,#2b2a44 78%,var(--sliwka) 100%);
  color:var(--mgla);
  overflow:hidden;position:relative;
  /* Wysokosc MUSI rosnac razem z szerokoscia, inaczej na szerokim ekranie
     proporcja sekcji ucieka do 2,5:1 przy zdjeciu 1,6:1, cover przycina kadr
     w pionie i okna domu laduja tuz nad kremowym pasem zaufania — nastepna
     sekcja wizualnie wchodzi na nie. Stad drugi skladnik: 50vw.
       1280 px -> 760 px (2 : 1,7)
       1920 px -> 960 px (2 : 2,0)
       2560 px -> 1000 px, i tu sie zatrzymuje, zeby sekcja nie zjadla ekranu. */
  min-height:max(min(78vh,760px), min(50vw,1000px));
  display:flex;align-items:center;
  padding:var(--odstep-8) 0;
}
.hero .srodek{max-width:var(--szer-szeroka)}
.hero h1{color:var(--mgla)}
.hero .podtytul{
  margin-top:var(--odstep-4);max-width:38rem;
  font-family:var(--sans);font-size:1.02rem;line-height:1.6;
  color:var(--mgla-cicha);
}
.hero .podtytul strong{color:var(--mgla);font-weight:600}
.hero .akcje{margin-top:var(--odstep-5);display:flex;gap:var(--odstep-4);align-items:center;flex-wrap:wrap}

.przycisk{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--dotyk);
  text-decoration:none;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  color:var(--noc-glebia);background:var(--okno);
  padding:0 1.5rem;border-radius:var(--promien-pigulka);
}
.przycisk:hover{background:var(--okno-mocne)}

/* Numer telefonu obok przycisku. Nie jest linkiem tel:, bo numeru nie ma —
   ta sama zasada co w pasku górnym. Zamienia się w <a class="tel"> razem
   z PH-TEL-01. */
.hero .tel-obok{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:var(--dotyk);padding:0 .7rem;
  font-family:var(--sans);font-size:.95rem;color:var(--mgla-cicha);
}
.hero .tel-obok a{
  display:inline-flex;align-items:center;min-height:var(--dotyk);
  color:var(--okno);text-decoration:none;
}
.hero .tel-obok a:hover{text-decoration:underline}

/* Scena zastępcza. Rysunek jest szeroki, więc siedzi poza .srodek. */
/* Hero jest kontekstem ciemnym, wiec placeholdery przestawiaja tokeny na
   swiatlo okna. Domyslna szalwia dawala tu 1,4:1 do 1,9:1 — pod progiem. */
.hero [data-placeholder]{--ph-obrys:rgba(255,201,138,.5);--ph-tekst:var(--mgla-cicha)}
.hero .placeholder-blok{background:rgba(243,237,226,.05)}
.hero .placeholder-blok .id{color:var(--okno)}

/* ---- TLO HERO: zdjecie domu za tekstem ----------------------------------
   Kontener jest WYZSZY od sekcji. To zapas na paralakse: bez niego w kadr
   weszlaby krawedz zdjecia.

   DLACZEGO NIE `cover` NA SZEROKOSC EKRANU (zmiana 14.09).
   Dom zajmuje CALA szerokosc oryginalu — 4000 px z 4000. Przy `cover` szerokosc
   zdjecia zawsze rowna sie szerokosci okna, wiec dom zawsze byl szeroki na caly
   ekran, a pas 2:1 pokazywal z niego poziomy plaster: kalenica poza kadrem,
   dolne okno przyciete, tuje wchodzace w okna. Zadne `object-position` tego nie
   naprawia, bo to nie kwestia polozenia kadru, tylko jego proporcji.
   Dlatego zdjecie wpisuje sie CALE w wysokosc sekcji (`contain`), a boki gasna
   w gradiencie sekcji. Dom jest przez to mniejszy i widac cala bryle.
   Mierzone: przy 1440 px zdjecie ma 850 px szerokosci zamiast 1440. */
.hero-tlo{
  position:absolute;left:0;right:0;top:-6%;height:112%;
  z-index:0;overflow:hidden;
  will-change:transform;
}
.hero-tlo .dom-foto{
  position:absolute;left:-3%;top:-3%;width:106%;height:106%;
  object-fit:cover;object-position:50% 20%;
}
@media (min-width:701px){
  /* 89,3% = 100/112 — zdjecie ma byc wysokie na SEKCJE, nie na kontener,
     inaczej zapas paralaksy zjadlby kalenice i dol. inset+margin:auto zamiast
     translate, bo transform na <img> nalezy do paralaksy myszy z ruch.js. */
  .hero-tlo .dom-foto{
    left:0;right:0;top:0;bottom:0;margin:auto;
    width:auto;height:89.3%;max-width:100%;
    object-fit:contain;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  }
}
/* Przenikanie napisow z budynkiem. Mocne u gory, gdzie stoi h1; niemal zadne
   w polowie, gdzie jest dom i swiecace okno; lekko wracajace u dolu, zeby
   sekcja miala czym przejsc w kremowy pas zaufania.

   WAZNE: gradient siedzi na SEKCJI, nie na kontenerze tla. Do 09.09 wieczorem
   byl w .hero-tlo::after, czyli na elemencie, ktory paralaksa przesuwa —
   przyciemnienie jechalo razem ze zdjeciem, lokalny kontrast nigdzie sie nie
   zmienial i ruchu po prostu nie bylo widac. Tu ma stac nieruchomo. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(18,21,31,.86) 0%,
      rgba(18,21,31,.66) 32%,
      rgba(18,21,31,.24) 58%,
      rgba(18,21,31,.06) 78%),
    linear-gradient(180deg,
      rgba(18,21,31,.72) 0%,
      rgba(18,21,31,.34) 26%,
      rgba(18,21,31,.10) 54%,
      rgba(18,21,31,.14) 76%,
      rgba(28,33,48,.46) 100%);
}
/* Napisy maja sie z budynkiem PRZENIKAC, a nie lezec na czarnej plamie — wiec
   zamiast mocniejszego przyciemnienia tla kazdy napis niesie wlasny cien.
   Dziala tam, gdzie akurat wypadnie jasna sciana albo swiecace okno. */
.hero h1{text-shadow:0 2px 10px rgba(10,12,18,.55), 0 0 34px rgba(10,12,18,.40)}
.hero .podtytul{text-shadow:0 1px 6px rgba(10,12,18,.80), 0 0 20px rgba(10,12,18,.55)}
.hero .tel-obok{text-shadow:0 1px 6px rgba(10,12,18,.75)}
/* width:100% jest konieczne: .hero jest flexem, a bez tego .srodek zwezila by sie
   do szerokosci tresci i caly tekst odjechalby od lewej krawedzi na srodek. */
.hero .srodek{position:relative;z-index:2;width:100%}

/* Na telefonie sekcja jest waska i wysoka (0,53:1), a zdjecie poziome (1,6:1),
   wiec cover wycina z niego waski srodkowy pas — czyli sama sciane miedzy oknami.
   Przesuniecie w prawo wprowadza w kadr swiecace okno; bez tego telefon pokazuje
   ciemna plame i nie widac, ze to w ogole dom. */
@media (max-width:700px){
  .hero-tlo .dom-foto{object-position:62% 46%}
  .hero{min-height:min(72vh,640px)}

  /* Na telefonie tekst idzie przez cala szerokosc i laduje NA swiecacym oknie,
     bo sekcja jest waska i cover nie zostawia zapasu w pionie — object-position
     w osi Y nie ma tu czego przesuwac. Zmierzony kontrast podtytulu spadal do
     1,5:1, czyli ponizej jakiegokolwiek progu czytelnosci. Stad mocniejsze
     przyciemnienie gory: okno zostaje widoczne nizej, tekst odzyskuje tlo. */
  .hero::before{
    background:linear-gradient(180deg,
      rgba(18,21,31,.93) 0%,
      rgba(18,21,31,.90) 42%,
      rgba(18,21,31,.78) 62%,
      rgba(18,21,31,.42) 82%,
      rgba(28,33,48,.48) 100%);
  }
}
.hero-scena .podpis{
  max-width:var(--szer-tresci);margin:var(--odstep-5) auto 0;
  padding:0 var(--odstep-4) var(--odstep-6);
}

/* ============ 11. PAS ZAUFANIA ========================================== */

.zaufanie{background:var(--wnetrze-cien)}
.zaufanie ul{list-style:none;display:grid;gap:var(--odstep-4)}
@media (min-width:700px){ .zaufanie ul{grid-template-columns:1fr 1fr} }
.zaufanie li{
  font-family:var(--sans);font-size:var(--tekst-m);line-height:1.5;
  padding-left:1.5rem;position:relative;max-width:30rem;
}
.zaufanie li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:.6rem;height:.75rem;border-radius:2px;
  background:linear-gradient(180deg,var(--okno),var(--okno-mocne));
  box-shadow:0 0 8px rgba(255,201,138,.5);
}

/* ============ 12. LUSTRO STANU I OFERTA =================================
   Lustro to trzy zwykłe kotwice w obrębie strony. Nic się nie zapisuje,
   nic nie jest liczone i nie ma werdyktu — dlatego zdanie o przewijaniu
   stoi tuż pod kartami i przy składzie nie wolno go skracać.
   ======================================================================== */

.oferta{background:var(--wnetrze)}

.lustro{
  background:var(--karta);
  border:1px solid var(--linia-ciepla);
  border-radius:var(--promien-xl);
  padding:var(--odstep-6) clamp(1.2rem,4vw,2.6rem);
}
.lustro h2{max-width:30ch}
.lustro .lead{margin-top:var(--odstep-3)}
.lustro .karty{display:grid;gap:var(--odstep-3);margin-top:var(--odstep-5)}
@media (min-width:700px){ .lustro .karty{grid-template-columns:1fr 1fr} }
.karta{
  display:block;text-decoration:none;
  border:1px solid var(--linia);border-radius:var(--promien-m);
  padding:var(--odstep-4);
  font-family:var(--sans);font-size:var(--tekst-r);line-height:1.45;
  color:var(--atrament);background:var(--wnetrze);
  min-height:var(--dotyk);
}
.karta:hover,.karta:focus-visible{border-color:var(--szalwia);background:var(--wnetrze-cien)}
.karta span{display:block;margin-top:var(--odstep-1);color:var(--szalwia-glebia);font-size:var(--tekst-s)}
.lustro .pozwolenie{margin-top:var(--odstep-5);color:#5d5a52;font-size:var(--tekst-r)}

/* Sześć kart usług. Pierwsze dwie, diagnoza i dietetyka, sąsiadują ze sobą
   w każdym układzie siatki i to nie jest kosmetyka: dietetyka domyka drogę,
   która dla rodzica zaczyna się słowem spektrum, i działa jako wyróżnik
   wyłącznie stojąc obok diagnozy (wniosek 4 z researchu fraz).
   Karty są kotwicami, czyli celami linków z lustra, a nie linkami.
   Podstron /diagnoza/, /dietetyka/ i pozostałych nie ma — to sloty Etapu 2. */
.uslugi{display:grid;gap:var(--odstep-4);margin-top:var(--odstep-5)}
@media (min-width:640px){ .uslugi{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .uslugi{grid-template-columns:1fr 1fr 1fr} }
.usluga{
  background:var(--karta);border:1px solid var(--linia-ciepla);
  border-radius:var(--promien-l);
  padding:var(--odstep-5) var(--odstep-4);
  scroll-margin-top:calc(var(--wys-paska) + var(--odstep-4));
}
.usluga h3{max-width:24ch}
.usluga p{margin-top:var(--odstep-3);font-size:var(--tekst-r);line-height:1.55;max-width:none}
.oferta .etykieta{margin-top:var(--odstep-8)}

/* ============ 13. WYRÓŻNIK ==============================================
   Sekcja o czekaniu jest czystą typografią. Bez czerwieni, bez licznika,
   bez zdania w rodzaju "nie czekaj, bo". Liczby noszą datę pomiaru i link
   do źródła.
   ======================================================================== */

.wyroznik{background:var(--szalwia-glebia);color:var(--mgla)}
.wyroznik h2{color:var(--mgla)}
.wyroznik .etykieta{color:#bcd0bd}
.wyroznik p{margin-top:var(--odstep-4);color:#e8e4da}
.wyroznik a{color:var(--okno)}
.wyroznik .nasz-termin{
  margin-top:var(--odstep-5);
  border-left:3px solid var(--okno);padding-left:var(--odstep-4);
}
.wyroznik .dietetyka{
  margin-top:var(--odstep-6);
  background:rgba(20,24,36,.22);border-radius:var(--promien-m);
  padding:var(--odstep-5);
}
.wyroznik .dietetyka p:first-child{margin-top:0}
.wyroznik .tiki{margin-top:var(--odstep-6)}
.wyroznik [data-placeholder]{--ph-obrys:rgba(255,201,138,.55);--ph-tekst:#e8e4da}

/* ============ 14. PIERWSZA WIZYTA ======================================= */

.wizyta{background:var(--wnetrze)}
.wizyta .otwarcie{margin-top:var(--odstep-4);font-size:var(--tekst-l);line-height:1.35;max-width:24ch}
.wizyta ol{list-style:none;counter-reset:krok;display:grid;gap:var(--odstep-4);margin-top:var(--odstep-6)}
@media (min-width:820px){ .wizyta ol{grid-template-columns:1fr 1fr} }
.wizyta li{
  counter-increment:krok;
  background:var(--karta);border:1px solid var(--linia-ciepla);
  border-radius:var(--promien-l);
  padding:var(--odstep-5) var(--odstep-4) var(--odstep-5) var(--odstep-6);
  position:relative;font-size:var(--tekst-r);line-height:1.55;
}
.wizyta li::before{
  content:counter(krok);
  position:absolute;left:var(--odstep-4);top:var(--odstep-5);
  font-family:var(--sans);font-weight:700;font-size:var(--tekst-s);
  color:var(--szalwia-glebia);
}
.wizyta li b{display:block;margin-bottom:var(--odstep-1)}

/* ============ 15. ZESPÓŁ, OPINIE, CENNIK — zapowiedzi ================== */

.zespol-teaser{background:var(--wnetrze-cien)}
.dalej{
  display:inline-flex;align-items:center;min-height:var(--dotyk);
  margin-top:var(--odstep-5);
  font-family:var(--sans);font-size:var(--tekst-m);font-weight:600;
  color:var(--szalwia-glebia);
}
.dalej:hover{color:var(--miod)}

.opinie{background:var(--wnetrze)}
.opinie .ocena{
  font-size:var(--tekst-l);line-height:1.3;
  color:var(--szalwia-glebia);margin-top:var(--odstep-4);
}
.opinie a{color:var(--szalwia-glebia)}

.cennik-teaser{background:var(--wnetrze-cien)}

/* ============ 16. KONTAKT ===============================================
   E-mail stoi tu na równi z telefonem, tą samą czcionką i w tym samym
   rzędzie. W Etapie 1 nie ma formularza, więc dla osoby, która nie zadzwoni,
   to jedyne wejście, a część osób w kryzysie nie zadzwoni.
   ======================================================================== */

.kontakt{background:var(--noc-glebia);color:var(--mgla-cicha)}
.kontakt h2{color:var(--mgla)}
.kontakt .etykieta{color:var(--okno)}
.kontakt .otwarcie{color:var(--mgla);margin-top:var(--odstep-4)}
.kontakt .adres{
  margin-top:var(--odstep-6);font-family:var(--sans);
  font-size:var(--tekst-m);line-height:1.65;color:var(--mgla-cicha);
}
.kontakt .adres strong{color:var(--mgla);font-size:var(--tekst-base);font-weight:600}
.kontakt .dane{
  margin-top:var(--odstep-5);display:grid;gap:var(--odstep-4);
  font-family:var(--sans);font-size:var(--tekst-m);
}
@media (min-width:700px){ .kontakt .dane{grid-template-columns:1fr 1fr} }
.kontakt .dane dt{
  color:var(--mgla-stopki);font-size:var(--tekst-xs);
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.kontakt .dane dd{margin-top:var(--odstep-2);color:var(--mgla)}
/* Telefon w sekcji kontaktu dostaje pełną strefę dotyku — celuje w niego
   ktoś na telefonie, jedną ręką, po zdecydowaniu się. */
.kontakt .dane dd a{display:inline-flex;align-items:center;min-height:var(--dotyk)}
/* Link do map pod adresem. Strefa dotyku jak przy telefonie i torze kryzysowym —
   celuje w niego ten sam palec, na tym samym ekranie, w drodze do poradni.
   Podkreślenie zostaje: to jedyny link w tym akapicie i ma wyglądać na link. */
.kontakt .adres .link-mapa{
  display:inline-flex;align-items:center;min-height:var(--dotyk);
  margin-top:var(--odstep-2);font-size:var(--tekst-m);
}
.kontakt .planowa{margin-top:var(--odstep-6);color:var(--mgla-cicha)}
/* Link do toru kryzysowego dostaje pelna strefe dotyku, tak samo jak same
   numery w stopce. To ten sam palec i ten sam moment. */
.kontakt .planowa a{display:inline-flex;align-items:center;min-height:var(--dotyk)}
.kontakt a{color:var(--okno)}
.kontakt [data-placeholder]{--ph-obrys:rgba(255,201,138,.5);--ph-tekst:var(--mgla-cicha)}
.kontakt .placeholder-blok{background:rgba(243,237,226,.05)}

/* ============ 17. PLACEHOLDER W LINII TEKSTU ============================
   Brakująca dana w środku zdania. Ten sam obrys co blok, ale nie rozbija
   akapitu — zdanie da się przeczytać razem z luką i od razu widać, czego
   w nim nie ma. Krok 9 zbiera to tym samym grepem po data-placeholder.
   ======================================================================== */

.ph{
  display:inline-block;
  padding:.1rem .45rem;
  font-size:.9em;line-height:1.4;
  font-weight:600;letter-spacing:.01em;
}

/* ============ 18. PAS TWARZY W TEASERZE ZESPOŁU =========================
   Portrety to dziś ramki z identyfikatorem, nie zdjęcia. Ramka trzyma
   docelowe proporcje kadru, żeby po sesji nic się w układzie nie ruszyło.
   ======================================================================== */

.teaser-osoby{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--odstep-5);
  margin-top:var(--odstep-6);
}
/* Dwie kolumny nawet na najwezszym ekranie. Przy jednej kolumnie ramka
   portretu ma na telefonie 375x469 px i cztery takie pod soba robia
   z pasa twarzy dluga sciane pustych prostokatow.

   Flex, nie grid, i to jest zmiana z 30.08. Grid trzyma sztywna siatke,
   wiec przy dziewieciu twarzach ostatni rzad mial jedna twarz dosunieta
   do lewej i osiem pustych miejsc obok. Flex z justify-content:center
   dosrodkowuje niepelny rzad sam, przy kazdej liczbie osob: dziewiec
   uklada sie 4+4+1 ze srodkowana ostatnia, jedenascie 4+4+3. Szerokosci
   licza sie tak samo jak w gridzie, wiec pelne rzedy wygladaja identycznie
   jak przedtem. */
.teaser-osoby li{
  flex:0 0 calc((100% - var(--odstep-5)) / 2);
  font-family:var(--sans);font-size:var(--tekst-m);line-height:1.45;
}
/* Media query MUSI stac po regule wyzej: obie maja te sama specyficznosc,
   a skrot `flex` ustawia takze flex-basis, wiec postawiony pozniej skasowalby
   cztery kolumny na desktopie. */
@media (min-width:900px){ .teaser-osoby li{flex-basis:calc((100% - 3 * var(--odstep-5)) / 4)} }
.teaser-osoby .portret{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:4 / 5;width:100%;margin-bottom:var(--odstep-3);
  border-radius:var(--promien-m);
  background:rgba(84,105,90,.06);
  font-size:var(--tekst-xs);font-weight:700;letter-spacing:.04em;
  padding:var(--odstep-2);
}
.teaser-osoby b{display:block;font-weight:600;font-size:var(--tekst-base);font-family:var(--serif)}
.teaser-osoby .rola{
  display:block;margin-top:var(--odstep-1);
  font-size:var(--tekst-s);color:var(--szalwia-glebia);
}

/* ============ 19. PODSTRONA /zespol/ ====================================
   Karta jest jednym blokiem: portret, imię, rola, trzy pozycje w liście
   opisowej i biogram prozą. Wiersz „Nie przyjmuje” nie jest dodatkiem —
   dobre dopasowanie oszczędza kilka tygodni, złe kosztuje wizytę i sporo
   odwagi, więc stoi na karcie tak samo widocznie jak reszta.

   Kotwica #imie-nazwisko bez polskich znaków: część osób ma już ruch na
   własne nazwisko i karta przechwytuje go na naszą domenę.
   ======================================================================== */

.zespol{background:var(--wnetrze)}
.zespol .wstep{margin-top:var(--odstep-4);font-size:var(--tekst-l);line-height:1.4;max-width:34ch}

.zespol .siatka{display:grid;gap:var(--odstep-5);margin-top:var(--odstep-7);align-items:start}
@media (min-width:760px){ .zespol .siatka{grid-template-columns:1fr 1fr} }
@media (min-width:1120px){ .zespol .siatka{grid-template-columns:1fr 1fr 1fr} }

.osoba{
  background:var(--karta);border:1px solid var(--linia-ciepla);
  border-radius:var(--promien-l);
  padding:var(--odstep-5) var(--odstep-4);
  scroll-margin-top:calc(var(--wys-paska) + var(--odstep-4));
}
.osoba .portret{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:4 / 5;width:100%;max-width:15rem;
  margin-bottom:var(--odstep-4);
  border-radius:var(--promien-m);
  background:rgba(84,105,90,.06);
  font-size:var(--tekst-xs);font-weight:700;letter-spacing:.04em;
  padding:var(--odstep-2);
}

/* Portret, ktory JEST juz zdjeciem, a nie ramka z identyfikatorem. Pierwszy
   taki wszedl 01.09 przy Marcie Bielinskiej. Regula stoi PO obu blokach wyzej
   i celowo ma wyzsza specyficznosc (`img.portret` zamiast samego `.portret`),
   bo musi skasowac trzy rzeczy ustawione pod napis: flex, padding i tlo ramki.

   Wymiary zostaja z regul wyzej — te same 4:5 i ta sama szerokosc — wiec
   zdjecie wchodzi dokladnie w miejsce, ktore ramka trzymala od poczatku
   i w ukladzie nic sie nie rusza. `object-fit:cover` wypelnia kadr bez
   scisniecia twarzy, gdyby ktores zdjecie przyszlo w innych proporcjach niz
   4:5; wtedy przycina, a nie deformuje. */
.teaser-osoby img.portret,
.osoba img.portret{
  display:block;
  object-fit:cover;object-position:center 30%;
  padding:0;background:none;
}
.osoba h2{font-size:1.32rem;max-width:none}
.osoba .rola{
  margin-top:var(--odstep-2);font-family:var(--sans);
  font-size:var(--tekst-s);line-height:1.45;color:var(--szalwia-glebia);max-width:none;
}
.osoba dl{margin-top:var(--odstep-4);font-family:var(--sans);font-size:var(--tekst-s);line-height:1.5}
.osoba dt{
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:var(--tekst-xs);color:var(--szalwia);
  margin-top:var(--odstep-3);
}
.osoba dt:first-child{margin-top:0}
.osoba dd{margin-top:var(--odstep-1)}
.osoba .biogram{margin-top:var(--odstep-4);font-size:var(--tekst-r);line-height:1.55;max-width:none}
.osoba .placeholder-blok{max-width:none}

/* Karta bez materiału. Ta sama ramka i ta sama szerokość co reszta, żeby
   z siatki było widać, ile miejsc czeka, a nie tylko ile jest zajętych. */
.osoba.pusta{
  background:transparent;border-style:dashed;border-color:var(--linia);
  display:flex;align-items:center;
}
.osoba.pusta .placeholder-blok{border:0;background:none;padding:0}

/* ============ 20. PODSTRONA /cennik/ ====================================
   Pakiety nad tabelą, bo tam siedzi marża centrum i tam pytanie „ile
   kosztuje diagnoza” dostaje odpowiedź razem z listą tego, co jest w cenie.
   Tabela na wąskim ekranie przewija się we własnej ramce, nie rozpycha
   strony — poziome przewijanie całego dokumentu jest w tym projekcie
   twardo wykluczone.
   ======================================================================== */

.cennik{background:var(--wnetrze)}
.cennik .wstep{margin-top:var(--odstep-4);font-size:var(--tekst-l);line-height:1.4;max-width:34ch}
.cennik h2{margin-top:var(--odstep-8)}
.cennik h2 + .cichy{margin-top:var(--odstep-3)}

.pakiety{display:grid;gap:var(--odstep-5);margin-top:var(--odstep-5)}
@media (min-width:820px){ .pakiety{grid-template-columns:1fr 1fr;align-items:start} }
.pakiet{
  background:var(--karta);border:1px solid var(--linia-ciepla);
  border-radius:var(--promien-l);
  padding:var(--odstep-5) var(--odstep-4);
}
.pakiet h3{max-width:26ch}
.pakiet .kwota{margin-top:var(--odstep-3)}
.pakiet .obejmuje-nag{
  margin-top:var(--odstep-4);font-family:var(--sans);
  font-size:var(--tekst-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--szalwia);
}
.pakiet ul{margin-top:var(--odstep-2);padding-left:1.1rem;font-size:var(--tekst-r);line-height:1.5}
.pakiet li{margin-top:var(--odstep-2)}
.pakiet .uwaga{
  margin-top:var(--odstep-4);font-family:var(--sans);
  font-size:var(--tekst-s);line-height:1.5;color:#5d5a52;max-width:none;
}

.tabela-otoczka{
  margin-top:var(--odstep-5);
  overflow-x:auto;
  border:1px solid var(--linia-ciepla);border-radius:var(--promien-l);
  background:var(--karta);
}
.cennik table{border-collapse:collapse;width:100%;min-width:34rem;font-family:var(--sans)}
.cennik caption{
  caption-side:top;text-align:left;
  padding:var(--odstep-4) var(--odstep-4) 0;
  font-size:var(--tekst-s);color:#5d5a52;
}
.cennik th,.cennik td{
  text-align:left;vertical-align:top;
  padding:var(--odstep-4);
  border-bottom:1px solid var(--linia-ciepla);
  font-size:var(--tekst-s);line-height:1.5;
}
.cennik thead th{
  font-size:var(--tekst-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--szalwia);
}
.cennik tbody th{font-weight:600;font-size:var(--tekst-m)}
.cennik tbody tr:last-child th,.cennik tbody tr:last-child td{border-bottom:0}

/* ============ 21. FAQ ===================================================
   Do FAQPage w Kroku 8 wchodzą wyłącznie pytania bez placeholdera w treści.
   Pytanie z widocznym „PH-…” dałoby Google pustą obietnicę.
   ======================================================================== */

.faq{background:var(--wnetrze-cien)}
.pytanie{
  margin-top:var(--odstep-6);
  padding-top:var(--odstep-6);
  border-top:1px solid var(--linia);
}
.pytanie:first-of-type{border-top:0;padding-top:0}
.pytanie h3{font-size:1.22rem;max-width:32ch}
.pytanie p{margin-top:var(--odstep-3);font-size:var(--tekst-r);line-height:1.6}
.pytanie .placeholder-blok{margin-top:var(--odstep-4)}

/* ============ 22. DOKUMENT — /polityka-prywatnosci/ =====================
   Długi tekst do czytania, nie do przeglądania. Jedna kolumna, wyraźne
   nagłówki, odstępy zamiast ramek.
   ======================================================================== */

.dokument{background:var(--wnetrze)}
.dokument .wstep{margin-top:var(--odstep-4);font-size:var(--tekst-l);line-height:1.4;max-width:38ch}
.dokument .wersja{
  margin-top:var(--odstep-4);font-family:var(--sans);
  font-size:var(--tekst-s);color:#5d5a52;
}
.dokument h2{margin-top:var(--odstep-7);font-size:1.45rem}
.dokument h3{margin-top:var(--odstep-5);font-size:1.08rem}
.dokument p{margin-top:var(--odstep-4);font-size:var(--tekst-r);line-height:1.65}
.dokument ul{
  margin-top:var(--odstep-4);padding-left:1.2rem;
  max-width:36rem;font-size:var(--tekst-r);line-height:1.6;
}
.dokument li{margin-top:var(--odstep-3)}
.dokument .cichy{
  margin-top:var(--odstep-7);padding-top:var(--odstep-5);
  border-top:1px solid var(--linia);
}

/* Kolumna z ceną w tabeli cennika nie łamie identyfikatora na dwie linie. */
.cennik tbody td:last-child{white-space:nowrap}