/* =========================================================================
   Werner Harmony — arkusz glowny
   Port z „Werner Harmony Mockup mobile.html".
   Tokeny zdublowane z theme.json: theme.json karmi edytor, :root karmi front.

   ---------------------------------------------------------------------
   REJESTR ODSTEPSTW OD MAKIETY
   ---------------------------------------------------------------------
   Ten motyw NIE jest pikselowym portem makiety i nigdy nim nie byl.
   Porownanie maszynowe regul BAZOWYCH (bez @media, po odjeciu panelu dev
   i routera SPA) daje:

       212  selektorow bazowych w makiecie — wszystkie maja odpowiednik
         0  komponentow zgubionych
        58  deklaracji o innej wartosci, w 10 grupach decyzyjnych ponizej

   Kazda grupa ma uzasadnienie przy samej regule — tu jest tylko spis, zeby
   nikt nie musial zgadywac, co jest decyzja, a co niedorobka. Dopisujac
   kolejna zmiane, dopisz ja tutaj razem z powodem i przelicz liczby.

   1. KROJ NAGLOWKOWY: Fraunces -> Cormorant Garamond    1 dekl.  [:root, fonts.css]
      Powod w fonts.css: rysunek j, f, l we Fraunces (zawiniety ogon, hak)
      byl odbierany jako dziwaczny. To charakter kroju, nie ustawienie —
      wylaczenie ligatur nic nie zmienialo. Decyzja potwierdzona 2026-08-21.
      Pociaga za soba grupy 2, 3 i 4. Najwieksze pojedyncze odstepstwo.

   2. OSIE ZMIENNE SOFT / WONK — usuniete                3 dekl.  [.h-display, .hero h1, .pagehead h1]
      Makieta deklarowala font-variation-settings:"SOFT" 20-30,"WONK" 1,
      ale ladowala krój zapytaniem
          family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..500
      — subset BEZ osi SOFT i WONK. Te deklaracje nie mialy czego przestawiac
      juz w samej makiecie. Usuniecie ich nie zmienia niczego na ekranie.

   3. REKALIBRACJA WAG pod Cormorant                    10 dekl.  [reset, „Warstwa WordPressa"]
      Cormorant ma default wght 300 i cienszy rysunek niz Fraunces przy tej
      samej wadze nominalnej — bez korekty naglowki 16-23 px gubily wlosowe
      kreski i ogonki a, e na telefonie.
        w gore (display): h3, h4 400->500 · .hero h1 300->400
                          .pagehead h1 300->400 · .hero__badge b 400->500
                          .acc__btn 400->500
        w dol (UI):       .eyebrow · .link-arrow · .field label
                          .price-row__val  500->400

   4. UI PONIZEJ ~28 px WRACA DO JOST                    6 dekl.  [.acc__btn, .price-row h3, .drawer .navlink--m]
      Ten sam powod co grupa 3, tylko rozwiazany zamiana kroju zamiast wagi:
      ponizej progu czytelnosci Cormorant ustepuje miejsca Jost.
      Towarzyszy temu letter-spacing -.01em -> -.005em (Jost jest szerszy
      przy tym stopniu) — takze w .indication h3.

   5. KONTRAST — 3 tokeny                                3 dekl.  [:root]
      --wh-ink-mute   #7C8A84 -> #616F69   3,48:1 -> 5,09:1   WCAG AA
      --wh-green-400  #7EA492 -> #4E7462   2,66:1 -> 5,07:1
      --wh-nude-600   #B07A5F -> #955F44   3,17:1 -> 4,59:1

   6. NAGLOWEK — przebudowany, nie przepisany           17 dekl.  [„HEADER", „Naglowek — dopiecia"]
      --hdr-h 78 -> 96 px (pasek urosl do dwoch wierszy), .brand img
      52 -> 58 px, po przyklejeniu 42 -> 40 px. Szklo (backdrop-filter)
      przeniesione ze stanu bazowego na .is-stuck: u gory pasek jest kryjacy,
      mleczny robi sie dopiero, gdy unosi sie nad trescia. Cien -> linia.
      Siatka 1fr auto 1fr -> minmax(0,1fr) auto minmax(0,1fr), bo bez tego
      logo znosilo z osi na waskim ekranie. .hero padding-block u gory
      96 -> 52 px, zeby wyzszy pasek nie zostawial 200 px pustki nad
      pierwszym slowem. .hero h1 line-height 1,03 -> 1,14 (Cormorant).

   7. NAWIGACJA                                          9 dekl.  [„HEADER"]
      .navlink .845 -> .78rem, tracking .11 -> .14em, waga 400 -> 500.
      Podkreslenie przepisane z animacji `right` na `transform` — kompozytowana,
      nie wywoluje layoutu przy kazdej klatce. Stan aktywny nie jest juz waga,
      tylko kolorem + stalym podkresleniem: mocniejszy niz w makiecie.

   8. KADR ZDJEC — zdjety, potem czesciowo cofniety      3 dekl.  [.split__media img]
      Makieta wymuszala aspect-ratio + object-fit:cover wszedzie. Na prawdziwym
      materiale Karoliny ciela portrety o 23%, a panoramy o 42% — znikala
      czesc glowy i gora obudowy aparatu, wiec kadr zdjeto.
      2026-08-21: HERO wrocilo do kadru makiety (3/3.4 + object-position:center),
      bo na docelowym zdjeciu obcina pusta sciane, a obie osoby zostaja w calosci.
      Sprawdzone na pliku, nie zalozone. Hero jest odtad zgodne z makieta i nie
      liczy sie juz jako odstepstwo.
      SPLITY zostaja bez kadru: ida w swoich proporcjach, z sufitem wysokosci.
      KOSZT, SWIADOMY: rytm sekcji split zalezy od tego, co zostanie wgrane.
      Patrz OTWARTE DECYZJE.

   9. DROBNE, POLICZONE                                  4 dekl.  [.indications, .qr-card img]
      .indications  auto-fit -> repeat(4,1fr) — siatka 4x2 zamiast rozjazdu
      .qr-card img  104 -> 148 px — 104 px dawalo modul 1,70 px, za malo dla
                    aparatu telefonu przy 135-znakowym linku Booksy

   USUNIETE Z MAKIETY W CALOSCI: panel notatek wdrozeniowych (.devpanel,
   .devbtn) i router SPA (.page) — WordPress serwuje realne strony.

   ---------------------------------------------------------------------
   10. FORMULARZ I ODDECH PO NAGLOWKU                     2 dekl.  [.pagehead + .section, .form__row]
       .pagehead + .section--flush-top  0 -> clamp(56px,7vw,110px). Makieta daje
       tam 129,6 px. `flush-top` istnieje, by skleic sekcje o TYM SAMYM tle;
       po naglowku strony tlo sie zmienia i zerowy odstep robil ostra krawedz
       przez cala szerokosc. Wartosc nizsza niz w makiecie, bo nasz `.pagehead`
       ma inna wysokosc — dobrana pomiarem, nie przepisana.
       .form__row  align-items normal -> start. To NAPRAWA bledu makiety:
       domyslny stretch rozciagal tylko drugie pole w wierszu i „Telefon"
       wychodzil o 8 px wyzszy niz „Imie". Zmierzone przed i po.

   ROZSZERZENIA — komponenty, ktorych makieta nie ma
   ---------------------------------------------------------------------
   Nie sa odstepstwami: nie maja w makiecie odpowiednika do porownania.
   Wynikaja z tresci Karoliny, ktorej makieta nie znala.
   • .goals__grupa / .goals__poz-grupy / .goals__samodzielny — dokumenty
     Dye-VL grupuja wskazania naglowkami („Zmiany naczyniowe:"). Bez tego
     naglowki ginely razem z porzadkiem, ktory nadala autorka.
   • .aftercare__row--ciag + .sr-only — okres zalecenia wypisywany tylko przy
     zmianie; „NA CO DZIEN" trzy razy pod soba przestawalo cokolwiek niesc.
     Powtorzony okres zostaje w drzewie dostepnosci: oko widzi raz, czytnik
     ekranu slyszy przy kazdym zaleceniu.
   • .field__opc — pole e-mail. Makieta JE MA, my nie mielismy; to zblizenie
     do makiety, nie odejscie od niej.

   OTWARTE DECYZJE — nie usterki, tylko nierozstrzygniete
   ---------------------------------------------------------------------
   • Kadr sekcji split (grupa 8). Hero juz rozstrzygniete — wrocilo do makiety.
     Splity: dzis cale kadry kosztem rytmu. Alternatywa: object-fit:cover
     z object-position ustawianym per zdjecie, tak jak zrobiono w hero.
     Dowod problemu: makijaz-wieczorowy-1.jpg ma 481x713 px w slocie 986 px —
     zaden kadr tego nie naprawi, ten plik jest po prostu za maly.

   ---------------------------------------------------------------------
   METODA
   ---------------------------------------------------------------------
   Liczby wyzej pochodza z maszynowego porownania regul bazowych makiety
   i tego arkusza (@media analizowane osobno, komentarze pominiete).
   Po zmianie makiety albo arkusza przestana sie zgadzac — wtedy przelicz,
   nie zgaduj.
   ========================================================================= */

/* =========================================================================
   WERNERHARMONY - DESIGN TOKENS
   Wszystko sterowane zmiennymi. W motywie WP -> theme.json + :root override.
   ========================================================================= */

:root{
  /* --- kolor bazowy (wyprowadzony z zieleni logo) --- */
  --wh-green-900:#12302A;
  --wh-green-800:#1B4038;
  --wh-green-700:#2E5C4B;
  --wh-green-600:#3F7360;
  --wh-green-400:#4E7462;
  --wh-green-200:#BCD2C4;
  --wh-green-50:#E9F1EB;

  /* --- kolor drugiej dyscypliny: wizaz --- */
  --wh-nude-700:#8A5C46;
  --wh-nude-600:#955F44;
  --wh-nude-300:#E2C6B4;
  --wh-nude-50:#F7EEE8;

  /* --- neutralne --- */
  --wh-ink:#15231E;
  --wh-ink-soft:#4C5C55;
  --wh-ink-mute:#616F69;
  --wh-paper:#FCFBF7;
  --wh-paper-2:#F2F0E9;
  --wh-white:#FFFFFF;
  --wh-line:rgba(21,35,30,.13);
  --wh-line-soft:rgba(21,35,30,.07);

  /* --- tokeny tonalne: przelaczane per sekcja (data-tone) --- */
  --accent:var(--wh-green-700);
  --accent-strong:var(--wh-green-900);
  --accent-soft:var(--wh-green-50);
  --accent-line:var(--wh-green-200);
  --accent-mid:var(--wh-green-400);

  /* --- typografia --- */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Jost","Helvetica Neue",Arial,sans-serif;

  --fs-eyebrow:.72rem;
  --fs-body:1.0125rem;
  --fs-lead:clamp(1.06rem,.98rem + .4vw,1.22rem);
  --fs-h3:clamp(1.22rem,1.1rem + .5vw,1.45rem);
  --fs-h2:clamp(1.75rem,1.35rem + 1.7vw,2.85rem);
  --fs-h1:clamp(2.35rem,1.6rem + 3.4vw,4.35rem);

  /* --- rytm i geometria --- */
  --wrap:1240px;
  --wrap-narrow:760px;
  --gutter:clamp(20px,5vw,64px);
  --sec-y:clamp(64px,9vw,132px);
  --r-s:4px;
  --r-m:10px;
  --r-l:22px;
  --shadow-s:0 2px 14px rgba(21,35,30,.06);
  --shadow-m:0 18px 50px -22px rgba(21,35,30,.28);
  --hdr-h:96px;
  --hdr-h-stuck:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-tone="wizaz"]{
  --accent:var(--wh-nude-600);
  --accent-strong:var(--wh-nude-700);
  --accent-soft:var(--wh-nude-50);
  --accent-line:var(--wh-nude-300);
  --accent-mid:var(--wh-nude-300);
}

/* =========================================================================
   RESET
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--wh-paper);color:var(--wh-ink);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:300;
  line-height:1.68;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
/* text-wrap:balance — bez tego „Alma Harmony XL PRO -" konczylo linie
   myslnikiem, a ostatnia linia zostawala z jednym slowem. */
/* Cormorant ma default wght 300 i cienszy rysunek niz Fraunces przy tej samej
   wadze nominalnej. Naglowki h3/h4 mieszcza sie w 16-23 px, gdzie wlosowe
   kreski i ogonki a, e gina na telefonie — stad rozdzielenie wag. */
h1,h2,h3,h4{margin:0;font-family:var(--font-display);line-height:1.1;
  letter-spacing:-.015em;text-wrap:balance}
h1,h2{font-weight:400}
h3,h4{font-weight:500}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* =========================================================================
   PRYMITYWY
   ========================================================================= */
.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - var(--gutter)*2,var(--wrap-narrow))}
.section{padding-block:var(--sec-y);position:relative}
.section--tint{background:var(--wh-paper-2)}
.section--accent-tint{background:var(--accent-soft);transition:background-color .7s var(--ease)}
.section--dark{background:var(--wh-green-900);color:#EAF0EC}
.section--flush-top{padding-top:clamp(36px,5vw,64px)}
/* Wyjatek: `flush-top` istnieje po to, by skleic sasiadujace sekcje o TYM SAMYM
   tle. Zaraz po naglowku strony tlo sie zmienia (--wh-paper-2 na przezroczyste),
   wiec zerowy odstep robil ostra krawedz przez cala szerokosc — tresc zaczynala
   sie w polowie kroku. Mockup daje tam pelny oddech. */
.pagehead + .section--flush-top{padding-top:clamp(56px,7vw,110px)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.1em;
  transition:color .7s var(--ease);
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.section--dark .eyebrow{color:var(--wh-green-200)}

.h-display{font-size:var(--fs-h2)}
.h-display em{font-style:italic;color:var(--accent);transition:color .7s var(--ease)}
.lead{font-size:var(--fs-lead);color:var(--wh-ink-soft);line-height:1.62;max-width:60ch}
.section--dark .lead{color:#C3D2C8}
.muted{color:var(--wh-ink-mute)}
.mt-s{margin-top:1rem}.mt-m{margin-top:1.8rem}.mt-l{margin-top:2.8rem}

/* przyciski */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.92em 1.85em;border-radius:100px;
  font-size:.9rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-strong)}
.btn--ghost{border-color:var(--wh-line);color:var(--wh-ink)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--light{background:#fff;color:var(--wh-green-900)}
.btn--light:hover{background:var(--wh-green-50)}
.btn--outline-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--sm{padding:.7em 1.35em;font-size:.78rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.86rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);padding-bottom:.35em;
  border-bottom:1px solid var(--accent-line);
  transition:gap .3s var(--ease),border-color .3s var(--ease),color .7s var(--ease);
}
.link-arrow:hover{gap:1em;border-color:var(--accent)}
.link-arrow svg{width:15px;height:15px}
.section--dark .link-arrow{color:var(--wh-green-200);border-color:rgba(188,210,196,.35)}

/* =========================================================================
   HEADER
   ========================================================================= */
.skip{
  position:absolute;left:12px;top:-60px;z-index:200;background:var(--wh-green-900);
  color:#fff;padding:.7em 1.2em;border-radius:var(--r-s);transition:top .2s;
}
.skip:focus{top:12px}

/* W normalnym przeplywie, nad naglowkiem: przewiniecie go poza widok
   jest sygnalem do kondensacji paska. */
#hdr-sentinel{height:24px;pointer-events:none}
.site-header{
  position:sticky;top:0;z-index:100;background:var(--wh-paper);
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             backdrop-filter .4s var(--ease);
}
/* Albo linia, albo cien — nigdy oba. Blur wlaczamy dopiero po przewinieciu,
   bo nad jednolitym tlem przy zerowym scrollu nie robi nic poza rozmyciem
   wlasnej krawedzi. */
.site-header.is-stuck{background:rgba(252,251,247,.94);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--wh-line-soft)}
.hdr{
  /* Logo ma byc na srodku STRONY, nie na srodku tego, co zostalo po przycisku.
     Gdy CTA jest kolumna siatki, zabiera 174 px z prawej i spycha cala trojke
     nawigacja|logo|nawigacja w lewo — logo ladowalo na 604 px zamiast 720.
     Dlatego CTA wychodzi z przeplywu, a siatka 1fr auto 1fr rozpina sie na
     pelna szerokosc kontenera. Prawa nawigacja dostaje odsuniecie, zeby
     ostatni link nie wchodzil pod przycisk. */
  position:relative;
  display:grid;
  /* minmax(0,...) — bez tego kolumny nie zejda ponizej szerokosci swoich
     linkow i przy waskim ekranie logo znosi z osi o kilkanascie pikseli. */
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  column-gap:clamp(24px,3vw,44px);
  min-height:var(--hdr-h);
  transition:min-height .4s var(--ease);
}
.brand{justify-content:center}
.hdr__actions{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;
}
/* Lustro przycisku: ten sam mechanizm, druga krawedz. */
.hdr__social{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:14px;
}
.hdr__social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--wh-ink-soft);border:1px solid var(--wh-line);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.hdr__social a:hover{color:var(--wh-paper);background:var(--accent);border-color:var(--accent)}
.hdr__social svg{width:17px;height:17px}
@media(max-width:1200px){.hdr__social{display:none}}
.site-header.is-stuck .hdr{min-height:var(--hdr-h-stuck)}
/* Stala przerwa zamiast space-between. Rozpychanie na szerokosc kolumny
   dawalo 180 px odstepu po lewej i 52 px po prawej, bo prawa kolumna
   oddaje miejsce przyciskowi. Teraz obie grupy maja te sama przerwe
   i dosuwaja sie do loga — odleglosc do niego jest rowna z konstrukcji. */
.hdr__nav{display:flex;align-items:center;width:100%;gap:clamp(20px,2.4vw,38px)}
.hdr__nav--l{justify-content:flex-end;padding-left:var(--social-space,120px)}
.hdr__nav--r{justify-content:flex-start}
/* Miejsce na przycisk wyjety z przeplywu — mierzone zmienna, zeby zmiana
   tekstu CTA nie wymagala poprawiania wartosci w dwoch miejscach. */
.hdr__nav--r{padding-right:var(--cta-space,196px)}
/* letter-spacing dokłada pustke ZA ostatnia litera — bez tego ostatni link
   nie jest optycznie wyrownany do krawedzi kontenera. */
.hdr__nav .navlink:last-child{margin-right:-.14em}
.hdr__actions{display:flex;align-items:center;justify-self:end}

.navlink{
  position:relative;font-size:.78rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wh-ink-soft);padding-block:12px;
  transition:color .3s var(--ease);
}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .32s var(--ease)}


.navlink.is-active{color:var(--wh-green-900)}
.navlink.is-active::after{transform:scaleX(1);transform-origin:left;background:var(--wh-green-700)}
.navlink.is-active::after{right:0}

.brand{display:flex;align-items:center;justify-content:flex-start;padding:0}
.brand img{height:58px;width:auto;transition:height .4s var(--ease)}
.site-header.is-stuck .brand img{height:40px}
.brand__fallback{font-weight:500;
  font-family:var(--font-display);font-size:1.28rem;letter-spacing:.06em;
  color:var(--wh-green-800);line-height:1.05;text-align:center;
}
.brand__fallback span{
  display:block;font-family:var(--font-body);font-size:.6rem;font-weight:400;
  letter-spacing:.4em;color:var(--wh-green-600);text-transform:uppercase;margin-top:.35em;
}
.hdr__cta{margin-left:14px}
.hdr__burger{display:none}

/* mobilne menu */
.burger{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
}
.burger span{display:block;width:22px;height:1.5px;background:var(--wh-ink);position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--wh-ink);transition:.3s var(--ease);
}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--hdr-h) 0 0;z-index:99;background:var(--wh-paper);
  padding:clamp(24px,7vw,48px) var(--gutter) 40px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  overflow-y:auto;
}
.drawer.is-open{opacity:1;transform:none;visibility:visible}
.drawer a.navlink--m{font-weight:500;
  font-family:var(--font-display);font-size:1.6rem;letter-spacing:-.01em;
  text-transform:none;color:var(--wh-ink);padding:.5em 0;
  border-bottom:1px solid var(--wh-line-soft);
}
.drawer a.navlink--m.is-active{color:var(--accent)}
.drawer__foot{margin-top:auto;padding-top:32px;display:grid;gap:12px}

/* =========================================================================
   HERO
   ========================================================================= */
/* Gorny padding zmniejszony: pasek naglowka urosl do dwoch wierszy,
   wiec 96px nad naglowkiem dawalo 200px pustki przed pierwszym slowem. */
.hero{position:relative;padding-block:clamp(28px,3.5vw,52px) clamp(56px,8vw,110px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero__eyebrow{color:var(--wh-green-600)}
.hero h1{
  font-size:var(--fs-h1);font-weight:400;line-height:1.14;letter-spacing:-.03em;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--wh-green-700)}
.hero__lead{margin-top:1.5rem;max-width:44ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.4rem}
.hero__media{position:relative}
.hero__media img{
  /* Kadr z makiety, ale TYLKO tutaj. Sprawdzone na docelowym zdjeciu: przy
   3/3.4 znika pusta sciana i szafki po prawej, a obie osoby zostaja w calosci.
   Bez kadru zdjecie ma 385px i hero wyglada o polowe nizsze niz w makiecie.
   Pozostale zdjecia (portret na „o mnie", aparat) zostaja bez kadru — tam
   ciecie zabieralo czesc glowy i gore obudowy. */
  width:100%;aspect-ratio:3/3.4;object-fit:cover;object-position:center;
  border-radius:var(--r-l) var(--r-l) 140px 140px;
  background:linear-gradient(150deg,var(--wh-green-200),var(--wh-paper-2));
}
.hero__badge{
  position:absolute;left:-26px;bottom:38px;background:var(--wh-white);
  border-radius:var(--r-m);padding:16px 20px;box-shadow:var(--shadow-m);
  display:flex;align-items:center;gap:12px;max-width:250px;
}
.hero__badge b{font-family:var(--font-display);font-size:1.5rem;font-weight:500;color:var(--wh-green-700);line-height:1}
.hero__badge small{font-size:.76rem;line-height:1.35;color:var(--wh-ink-soft);letter-spacing:.02em}

/* pasek zaufania */
.trust{border-block:1px solid var(--wh-line-soft);background:var(--wh-white)}
.trust ul{display:grid;grid-template-columns:repeat(3,1fr);}
.trust li{padding:26px 30px;display:flex;gap:14px;align-items:flex-start}
.trust li+li{border-left:1px solid var(--wh-line-soft)}
.trust svg{width:22px;height:22px;flex:0 0 auto;color:var(--wh-green-600);margin-top:3px}
.trust b{display:block;font-weight:500;font-size:.94rem;letter-spacing:.01em}
.trust span{font-size:.86rem;color:var(--wh-ink-mute);line-height:1.5}

/* =========================================================================
   SPLIT (obraz + tekst)
   ========================================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5.5vw,88px);align-items:center}
/* Bez zdjecia siatka dwukolumnowa zostawiala martwa polowe ekranu. Jedna
   kolumna z sufitem szerokosci trzyma wiersz w granicach czytelnosci —
   tekst rozciagniety na 1160 px czyta sie gorzej niz pusta kolumna wyglada. */
.split--bez-obrazu{grid-template-columns:minmax(0,68ch)}
.split--reverse .split__media{order:2}
.split__media img{
/* Pelne zdjecie, ale z sufitem wysokosci: portret 0.67 bez tego byl o 353 px
   wyzszy niz kolumna tekstu obok i zostawial pustke. Skaluje sie w dol,
   nie kadruje. */
  width:auto;max-width:100%;height:auto;max-height:clamp(420px,44vw,600px);
  border-radius:var(--r-l);
  background:var(--wh-paper-2);position:relative;z-index:1;
}
/* width:fit-content — kontener kurczy sie do zdjecia, wiec ramka dekoracyjna
   (::after) trzyma sie jego krawedzi, a nie krawedzi kolumny. */
.split__media{position:relative;isolation:isolate;width:fit-content;margin-inline:auto}
.split__media::after{
  content:"";position:absolute;inset:auto -18px -18px auto;width:52%;height:46%;
  border:1px solid var(--accent-line);border-radius:var(--r-l);z-index:0;
  transition:border-color .7s var(--ease);
}

/* =========================================================================
   ZAKRES / KARTY WSKAZAN
   ========================================================================= */
.indications{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--wh-line-soft);border:1px solid var(--wh-line-soft);border-radius:var(--r-m);overflow:hidden}
.indication{background:var(--wh-paper);padding:26px 24px 28px;transition:background-color .35s var(--ease)}
.indication:hover{background:var(--wh-white)}
.indication__no{
  font-family:var(--font-body);font-size:.72rem;letter-spacing:.2em;color:var(--accent-mid);
  display:block;margin-bottom:14px;transition:color .7s var(--ease);
}
.indication h3{font-size:1.06rem;letter-spacing:-.01em}
.indication p{margin-top:.55em;font-size:.9rem;color:var(--wh-ink-mute);line-height:1.6}

/* karty zabiegow */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:clamp(16px,2vw,26px)}
.card{
  background:var(--wh-white);border:1px solid var(--wh-line-soft);border-radius:var(--r-l);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--accent-line)}

/* --------------------------------------------------------------------------
   Cała karta klikalna

   Kliknięcie łapało wyłącznie tekst tytułu — kilkanaście pikseli wysokości
   w kaflu, który ma ich ponad dwieście. Kursor zmieniał się na rękę dopiero
   nad samym napisem, więc kafel wyglądał na klikalny i nie był.

   Wzorzec „stretched link": link zostaje JEDEN, w nagłówku, a jego pseudo-
   element rozciąga się na całą kartę. Nie dokładamy drugiego odnośnika ani
   `onclick` na kontenerze — czytnik ekranu i klawiatura dostają dokładnie
   jeden cel z sensowną nazwą, dokładnie jak przedtem.

   Karty bez linku w nagłówku (`parts/cards.php`) zostają nieklikalne, bo
   reguła wymaga istnienia `a`.
   -------------------------------------------------------------------------- */
/* Cały mechanizm w `@supports`, bo składa się z DWÓCH reguł o różnej
   odporności. `.card:has(…)` w przeglądarce bez `:has()` jest selektorem
   nieprawidłowym i cała reguła przepada — ale `a::after` z `position:absolute`
   nie używa `:has()` i zostaje. Bez `position:relative` na karcie nakładka
   szuka najbliższego pozycjonowanego przodka; gdy go nie ma, pozycjonuje się
   względem viewportu i staje się przezroczystą płachtą na całą stronę,
   przechwytującą każde kliknięcie.

   Dotyczy Firefoksa do 120 i Safari do 15.3. Przy braku obsługi nie dzieje się
   nic: karta zachowuje się jak przedtem, klikalny jest sam tytuł. */
@supports selector(:has(*)){
  .card:has(:is(h2, h3) > a){position:relative;cursor:pointer}

  .card:has(:is(h2, h3) > a) :is(h2, h3) > a::after{
    content:"";position:absolute;inset:0;
    border-radius:inherit;
    /* Nad tłem karty, pod treścią, która mogłaby być interaktywna w przyszłości. */
    z-index:1;
  }

  /* Obrys fokusu ma obejmować kartę, a nie sam napis — inaczej klawiatura
     pokazuje coś innego niż mysz. */
  .card:has(:is(h2, h3) > a:focus-visible){
    outline:2px solid var(--accent);outline-offset:3px;
  }
  .card:has(:is(h2, h3) > a) :is(h2, h3) > a:focus-visible{outline:none}
}

/* Świadomy koszt tego wzorca: nakładka leży NAD treścią, więc tekstu w karcie
   nie da się zaznaczyć myszą. Podniesienie treści ponad nakładkę cofnęłoby
   całą zmianę — kliknięcie w opis znów nic by nie robiło. Kafel jest do
   klikania, nie do kopiowania; pełna treść zabiegu jest na jego stronie. */
.card__tag{
  align-self:flex-start;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-strong);background:var(--accent-soft);padding:.45em .9em;border-radius:100px;
  margin-bottom:16px;transition:background-color .7s var(--ease),color .7s var(--ease);
}
/* `.card__tytul` to ten sam tytul kafla, tylko jako h2 — poziom naglowka
   zmienil sie dla hierarchii dokumentu, wyglad ma zostac bez zmian. */
.card h3,.card .card__tytul{font-size:var(--fs-h3)}
.card p{margin-top:.7em;font-size:.94rem;color:var(--wh-ink-soft)}
.card__meta{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--wh-line-soft);
  display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.82rem;color:var(--wh-ink-mute);
}
.card__meta b{font-weight:500;color:var(--wh-ink-soft)}

/* lista cech (checki) */
.ticks{display:grid;gap:.75em}
.ticks li{display:flex;gap:.85em;align-items:flex-start;font-size:.98rem}
.ticks svg{width:17px;height:17px;flex:0 0 auto;margin-top:5px;color:var(--accent);transition:color .7s var(--ease)}
.section--dark .ticks svg{color:var(--wh-green-200)}
.ticks--2{grid-template-columns:1fr 1fr;gap:.75em 2em}

/* =========================================================================
   SYGNATURA: LINIA HARMONII
   ========================================================================= */
.harmony-line{padding-block:clamp(28px,5vw,60px);display:block;overflow:hidden}
.harmony-line svg{width:100%;height:76px;display:block}
.harmony-line path{
  fill:none;stroke-width:1.25;
  stroke-dasharray:2400;stroke-dashoffset:2400;
  transition:stroke-dashoffset 2.4s var(--ease),stroke 1s var(--ease);
}
.harmony-line.is-in path{stroke-dashoffset:0}
.harmony-line .l1{stroke:var(--wh-green-400)}
.harmony-line .l2{stroke:var(--wh-nude-300);transition-delay:.35s}

/* =========================================================================
   KROKI WIZYTY
   ========================================================================= */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--wh-line-soft);border-radius:var(--r-m);overflow:hidden}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--4{grid-template-columns:repeat(4,1fr)}
/* Dwie kolumny — dla liczb krokow dzielacych sie przez 2, ale nie przez 3 ani 4. */
.steps--2{grid-template-columns:repeat(2,1fr)}

/* Kroki zapisane zdaniami: dwie kolumny niezależnie od ich liczby. Trzy kolumny
   dawały czternaście znaków w wierszu, dwie dają około czterdziestu pięciu —
   w paśmie, w którym oko nie gubi początku następnego wiersza.
   Klasa przychodzi z PHP, bo `:has()` nie może zawierać `:has()`. */

/* Domkniecie ostatniego rzedu.
   `.steps` ma tlo i odstep 1 px, wiec pusta komorka to nie brak tresci, tylko
   widoczny szary prostokat. Gdy liczba krokow nie dzieli sie przez liczbe kolumn,
   ostatni kafel rozciaga sie na reszte rzedu.

   Reguly siedza w CSS, a nie w PHP, bo liczba kolumn zmienia sie na kazdym
   progu szerokosci — wartosc policzona raz pod desktop przestawala pasowac
   po zwezeniu okna i dziura wracala. `:nth-child` liczy sie na nowo sam. */
.steps--2 > .step:last-child:nth-child(odd){grid-column:span 2}
.steps--3 > .step:last-child:nth-child(3n+1){grid-column:span 3}
.steps--3 > .step:last-child:nth-child(3n+2){grid-column:span 2}
.steps--4 > .step:last-child:nth-child(4n+1){grid-column:span 4}
.steps--4 > .step:last-child:nth-child(4n+2){grid-column:span 3}
.steps--4 > .step:last-child:nth-child(4n+3){grid-column:span 2}


.step{background:var(--wh-paper);padding:clamp(24px,3vw,34px);counter-increment:s}
.section--tint .step{background:var(--wh-paper-2)}
.step::before{font-weight:400;
  content:counter(s,decimal-leading-zero);display:block;
  font-family:var(--font-display);font-size:1.85rem;color:var(--accent-mid);
  line-height:1;margin-bottom:16px;transition:color .7s var(--ease);
}
.step h3{font-size:1.06rem}
/* Krok bez własnego nagłówka niesie całe zdanie, więc akapit jest tu treścią
   główną, a nie dopiskiem: pełny rozmiar i pełny kontrast zamiast wyciszonego. */
.step p{margin-top:.5em;font-size:.9rem;color:var(--wh-ink-mute);line-height:1.6}
.step:not(:has(h3)) p{font-size:1rem;color:var(--wh-ink-soft);margin-top:0}

/* =========================================================================
   AKORDEON
   ========================================================================= */
.acc{border-top:1px solid var(--wh-line)}
.acc__item{border-bottom:1px solid var(--wh-line)}
.acc__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:1.25em 0;text-align:left;font-size:1.02rem;font-weight:500;
  font-family:var(--font-display);letter-spacing:-.01em;
}
.acc__btn:hover{color:var(--accent)}
.acc__icon{position:relative;width:16px;height:16px;flex:0 0 auto}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;background:var(--accent);transition:transform .35s var(--ease);
}
.acc__icon::before{top:7.5px;left:0;width:16px;height:1px}
.acc__icon::after{left:7.5px;top:0;width:1px;height:16px}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:rotate(90deg)}
.acc__panel{overflow:hidden;height:0;transition:height .35s var(--ease)}
.acc__panel-inner{padding:0 0 1.5em;max-width:68ch;color:var(--wh-ink-soft);font-size:.96rem}

/* =========================================================================
   CENNIK / LISTA USLUG
   ========================================================================= */
.pricelist{display:grid;gap:0}
.price-row{
  display:grid;grid-template-columns:1fr auto;gap:10px 28px;align-items:baseline;
  padding:1.15em 0;border-bottom:1px solid var(--wh-line-soft);
}
.price-row:first-child{border-top:1px solid var(--wh-line-soft)}
.price-row h3{font-size:1.05rem;font-family:var(--font-display)}
.price-row p{margin:.35em 0 0;font-size:.89rem;color:var(--wh-ink-mute);max-width:56ch}
.price-row__val{font-size:.92rem;font-weight:500;color:var(--accent);white-space:nowrap;transition:color .7s var(--ease)}

/* =========================================================================
   CTA PASEK
   ========================================================================= */
.cta-band{
  background:var(--wh-green-900);color:#EAF0EC;border-radius:var(--r-l);
  padding:clamp(34px,5vw,68px);display:grid;grid-template-columns:1.3fr auto;
  gap:clamp(24px,4vw,52px);align-items:center;
}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.3vw,2.3rem)}
.cta-band p{color:#B9CCC0;margin-top:.7em;max-width:52ch}
/* Pas CTA na stronie wizazu: paleta nude zamiast zieleni. Tlo bylo wpisane
   na sztywno, wiec `data-tone` przelaczal tokeny akcentu, ale nie tlo —
   zielony blok na stronie w kolorach nude wygladal jak wklejony z innej strony. */
[data-tone="wizaz"] .cta-band{background:var(--wh-nude-800,#4A3229)}
[data-tone="wizaz"] .cta-band p{color:var(--wh-nude-100,#EADFD8)}
.cta-band__actions{display:flex;flex-direction:column;gap:12px;min-width:250px}

/* =========================================================================
   FORMULARZ
   ========================================================================= */
.form{display:grid;gap:18px}
/* `start` jest tu konieczne, nie kosmetyczne. Domyslny stretch rozciagal
   tylko drugie pole w wierszu — „Telefon" wychodzil o 8px wyzszy niz „Imie"
   i oba przestawaly stac w jednej linii. */
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.field{display:grid;gap:.5em}
.field label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wh-ink-mute);font-weight:500}
/* „opcjonalnie" ma byc czytelne, ale nie konkurowac z nazwa pola. */
.field__opc{text-transform:none;letter-spacing:.02em;font-weight:400;opacity:.72;margin-left:.5em}
.field input,.field select,.field textarea{
  font:inherit;font-size:.98rem;padding:.85em 1em;border:1px solid var(--wh-line);
  border-radius:var(--r-s);background:var(--wh-white);color:var(--wh-ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:130px;resize:vertical}
/* Mockup daje przyciskowi pelna szerokosc formularza — trudniej go przeoczyc
   i lepiej wypada na dotyku. Przycisk siedzi w <p>, wiec szerokosc idzie na nim. */
.form__wyslij{margin:0}
.form__wyslij .btn{width:100%;justify-content:center}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.consent{display:flex;gap:.8em;align-items:flex-start;font-size:.82rem;color:var(--wh-ink-mute);line-height:1.55}
.consent input{margin-top:4px;accent-color:var(--accent)}
/* Link do polityki mial ten sam kolor, grubosc i brak podkreslenia co reszta
   etykiety — byl nierozpoznawalny. To zgoda RODO, wiec dostep do polityki
   musi byc widoczny przed jej zaznaczeniem. */
.consent a{color:var(--wh-green-900);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:var(--accent-line)}
.consent a:hover{text-decoration-color:currentColor}
.form__note{font-size:.82rem;color:var(--wh-ink-mute)}
.form__ok{
  display:none;padding:1em 1.2em;border-radius:var(--r-s);
  background:var(--accent-soft);color:var(--accent-strong);font-size:.94rem;
}
.form__ok.is-visible{display:block}

/* =========================================================================
   KONTAKT
   ========================================================================= */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,76px);align-items:start}
.contact-item{padding:1.35em 0;border-bottom:1px solid var(--wh-line-soft)}
.contact-item:first-child{border-top:1px solid var(--wh-line-soft)}
.contact-item h3{font-size:1.02rem}
.contact-item p{margin-top:.4em;font-size:.93rem;color:var(--wh-ink-soft)}
.contact-item a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.qr-card{
  background:var(--wh-white);border:1px solid var(--wh-line-soft);border-radius:var(--r-l);
  padding:26px;display:flex;gap:22px;align-items:center;box-shadow:var(--shadow-s);
}
/* 104px dawalo modul 1,70 px — za malo dla aparatu telefonu przy 135-znakowym
   linku Booksy. 148px + korekcja M zamiast H daje modul 2,90 px. */
.qr-card img{width:148px;height:148px;object-fit:contain;background:var(--wh-white);
  border-radius:var(--r-s);padding:6px}
.map-embed{
  aspect-ratio:16/10;border-radius:var(--r-l);overflow:hidden;
  background:
    repeating-linear-gradient(45deg,var(--wh-green-50) 0 14px,transparent 14px 28px),
    var(--wh-paper-2);
  display:grid;place-items:center;color:var(--wh-ink-mute);font-size:.86rem;
  border:1px solid var(--wh-line-soft);text-align:center;padding:20px;
}

/* =========================================================================
   PAGE HEAD (podstrony)
   ========================================================================= */
.pagehead{padding-block:clamp(44px,6vw,86px) clamp(30px,4vw,52px);background:var(--wh-paper-2)}
.pagehead h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.5rem);font-weight:400}
.pagehead p{margin-top:1rem;max-width:56ch}
.crumbs{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wh-ink-mute);margin-bottom:1.4em}
.crumbs a:hover{color:var(--accent)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--wh-green-900);color:#B9CCC0;padding-block:clamp(48px,6vw,84px) 28px;margin-top:auto}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px)}
.foot__logo img{height:64px;width:auto;filter:brightness(0) invert(1);opacity:.92}
/* Naglowki kolumn stopki byly h4 po h2 z tresci strony — czytnik ekranu
   i wyszukiwarka widzialy przeskok o dwa poziomy. Sa h2, bo to sekcje
   najwyzszego poziomu wewnatrz stopki. Wyglad bez zmian. */
.foot h4,.foot__naglowek{
  font-family:var(--font-body);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:#7FA391;margin:0 0 1.2em;font-weight:500;
}
.foot ul{display:grid;gap:.7em;font-size:.93rem}
.foot a:hover{color:#fff}
.foot p{font-size:.93rem;line-height:1.65}
.socials{display:flex;gap:10px;margin-top:1.4em}
.socials a{
  width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:50%;
  display:grid;place-items:center;transition:.3s var(--ease);
}
.socials a:hover{background:#fff;color:var(--wh-green-900);border-color:#fff}
.socials svg{width:17px;height:17px}
.foot__bar{
  margin-top:clamp(36px,5vw,64px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#7FA391;
}
/* Lewa strona paska: nota o prawach autorskich i podpis wykonawcy obok siebie,
   na wąskim ekranie jeden pod drugim. Osobna grupa, żeby `space-between` dalej
   odpychało menu prawne do prawej krawędzi, zamiast rozrzucać trzy elementy. */
.foot__bar-l{display:flex;flex-wrap:wrap;gap:2px 18px}
/* Menu prawne to gołe `<a>` bez opakowania — bez tego kontenera `space-between`
   rozrzucało oba odnośniki po całej szerokości paska, a przy ~600 px jeden z nich
   spadał sam do drugiego rzędu. Opakowane zawijają się razem, jako jedna grupa. */
.foot__prawne{display:flex;flex-wrap:wrap;gap:2px 16px}
.foot__autor a{
  color:#A8C5B4;text-decoration:underline;text-decoration-color:rgba(168,197,180,.4);
  text-underline-offset:3px;transition:color .3s var(--ease),text-decoration-color .3s var(--ease);
}
.foot__autor a:hover,.foot__autor a:focus-visible{color:#fff;text-decoration-color:#fff}

/* =========================================================================
   MOBILNY PASEK AKCJI
   ========================================================================= */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  grid-template-columns:repeat(3,1fr);background:var(--wh-white);
  border-top:1px solid var(--wh-line);box-shadow:0 -6px 24px rgba(21,35,30,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar a{
  display:grid;place-items:center;gap:4px;padding:11px 4px 12px;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--wh-ink-soft);
}
.actionbar a+a{border-left:1px solid var(--wh-line-soft)}
.actionbar svg{width:19px;height:19px;color:var(--accent)}
.actionbar a.is-primary{background:var(--accent);color:#fff}
.actionbar a.is-primary svg{color:#fff}

/* =========================================================================
   ROUTER STRON
   ========================================================================= */
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}

/* =========================================================================
   PANEL NOTATEK WDROZENIOWYCH (tylko mockup - usunac w produkcji)
   ========================================================================= */
/* =========================================================================
   RESPONSYWNOSC
   ========================================================================= */
@media (max-width:1080px){
  .foot__grid{grid-template-columns:1fr 1fr}
  /* Ponizej 1080 px wszystkie warianty schodza do dwoch kolumn, wiec
     domkniecie rzedu przelicza sie na zasade parzystosci. */
  .steps--3,.steps--4{grid-template-columns:1fr 1fr}
  .steps > .step:last-child{grid-column:auto}
  .steps > .step:last-child:nth-child(odd){grid-column:span 2}
}
@media (max-width:900px){
  :root{--hdr-h:66px}
  .hdr{grid-template-columns:auto 1fr auto}
  .hdr__nav{display:none}
  .hdr__burger{display:block}
  .brand{justify-content:flex-start}
  .brand img{height:40px}
  .site-header.is-stuck .brand img{height:36px}
  .hdr__cta{display:none}
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero__media{order:-1}
  /* Bez kadru takze na mobile — makieta wymuszala tu 4/3.2 i ucinala
     zdjecia dokladnie tak samo jak na desktopie. */
  /* Na waskim ekranie kolumna jest szeroka, wiec pionowy kadr bylby za wysoki. */
  .hero__media img{aspect-ratio:4/3.2;border-radius:var(--r-l)}
  .hero__badge{left:auto;right:14px;bottom:-18px}
  .split,.contact-grid{grid-template-columns:1fr;gap:32px}
  .split--reverse .split__media{order:0}
  .split__media img{height:auto;max-height:clamp(360px,80vw,520px)}
  .trust ul{grid-template-columns:1fr}
  .trust li+li{border-left:0;border-top:1px solid var(--wh-line-soft)}
  .steps--2,.steps--3,.steps--4{grid-template-columns:1fr}
  /* Jedna kolumna — nie ma czego domykac. */
  .steps > .step:last-child{grid-column:auto}
  .cta-band{grid-template-columns:1fr}
  .ticks--2{grid-template-columns:1fr}
  .actionbar{display:grid}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* iOS: pola ponizej 16px wymuszaja zoom przy focusie */
  .field input,.field select,.field textarea{font-size:16px;padding:.9em 1em}
  .cta-band__actions{min-width:0;width:100%}
  .cta-band__actions .btn{width:100%}
  .hero__actions .btn{flex:1 1 auto;min-width:190px}
  .drawer{overscroll-behavior:contain}
  .foot ul{gap:1em}
  /* Powiekszenie celu dotykowego dla TEKSTOWYCH linkow stopki. Kolka social
     maja juz 40x40 i wlasne `display:grid` do wysrodkowania ikony — bez tego
     wyjatku regula podmieniala im `display` na `inline-block` i ikona ladowala
     w lewym gornym rogu kolka zamiast w srodku. Ponizej 900 px, wiec na
     desktopie wygladalo poprawnie i defekt siedzial niezauwazony. */
  .foot a:not(.socials a),.contact-item a{display:inline-block;padding-block:2px}
  .acc__btn{padding-block:1.05em}
}
@media (max-width:640px){
  .form__row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .price-row{grid-template-columns:1fr}
  .indications{grid-template-columns:1fr}
  .hero__badge{position:static;margin-top:16px;max-width:none}
  .qr-card{flex-direction:column;align-items:flex-start;gap:18px;padding:22px}
  .harmony-line svg{height:52px}
  .pagehead{padding-bottom:26px}
  .actionbar a{font-size:.64rem;letter-spacing:.05em}
}
@media (hover:none){
  .btn:hover,.card:hover{transform:none}
  .card:hover{box-shadow:none;border-color:var(--wh-line-soft)}
  a,button{-webkit-tap-highlight-color:rgba(46,92,75,.12)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* =========================================================================
   Warstwa WordPressa
   ========================================================================= */

/* poprawka kontrastu: tekst drugorzedny w makiecie mial wage 300 */
.muted,.eyebrow,.crumbs,.consent,.form__note,
.indication__no,.link-arrow,.price-row__val,
.field label,.footer__addr{font-weight:400}

/* Siatka wskazan schodkowo. Reguła 1-kolumnowa MUSI byc ostatnia — makieta
   ustawia ja przy 640px wczesniej w pliku, wiec bez powtorzenia tutaj moje
   820px->2 kolumny wygrywalo przy 320px i kafelki wystawaly poza ekran. */
@media(max-width:1080px){.indications{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.indications{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.indications{grid-template-columns:1fr}}

.screen-reader-text{position:absolute!important;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}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;margin:0;
  clip:auto;clip-path:none;white-space:normal}

.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}

.prose{max-width:var(--wrap-narrow)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.14;margin-top:2em}
.prose h3{font-family:var(--font-display);font-size:var(--fs-h3);margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose blockquote{border-left:2px solid var(--accent-line);padding-left:1.2em;color:var(--wh-ink-soft)}

.alignwide{max-width:var(--wrap)}
.alignfull{max-width:none;margin-inline:calc(50% - 50vw);width:100vw}
.wp-caption-text,figcaption{font-size:.85rem;color:var(--wh-ink-mute);margin-top:.6em}

:where(img,video){max-width:100%}
/* WP wstawia width/height do <img>. Zerowa specyficznosc jest konieczna —
   inaczej bije .brand img{height:72px} i logo rosnie do naturalnej wysokosci. */
:where(img[width][height]){height:auto}

/* bez JS reveal ma byc widoczny */
.no-js .rv{opacity:1;transform:none}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}


/* =========================================================================
   Nagłówek — dopięcia po rekomendacji projektowej
   ========================================================================= */

.navlink:hover::after,
.navlink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.navlink:hover{color:var(--wh-green-800)}

/* Przygaszenie reszty przy najechaniu na jeden link. */
.hdr__nav:hover .navlink{opacity:.5}
.hdr__nav .navlink:hover,
.hdr__nav .navlink.is-active{opacity:1}

/* Przycisk skaczacy o 2px w kurczacym sie pasku wyglada niestabilnie —
   translateY zostaje w hero i sekcjach CTA, w naglowku nie. */
.hdr__cta:hover{transform:none}

/* Kotwice pod skondensowany pasek. */
:target{scroll-margin-top:calc(var(--hdr-h-stuck) + 16px)}

/* 6 pozycji + logo miedzy nimi + CTA: ponizej 1200px zaczyna sie tloczyc. */
@media(max-width:1200px){
  :root{--hdr-h:72px;--hdr-h-stuck:64px}
  .hdr{grid-template-columns:auto 1fr;column-gap:20px}
  .hdr__nav,.hdr__actions{display:none}
  .hdr__burger{display:block;justify-self:end}
  .brand img{height:44px}
  .site-header.is-stuck .brand img{height:40px}
  .drawer{inset:var(--hdr-h-stuck) 0 0}
}

@media(prefers-reduced-motion:reduce){
  .hdr,.brand img,.site-header{transition:none}
}

/* Bez JS burger nie otworzy szuflady, wiec nawigacja musi zostac widoczna —
   inaczej przy zablokowanym skrypcie strona nie ma zadnej nawigacji. */
@media(max-width:1200px){
  .no-js .hdr{grid-template-columns:1fr}
  .no-js .hdr__nav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px 20px;padding-bottom:12px}
  .no-js .hdr__actions{display:flex}
  .no-js .hdr__burger{display:none}
}


/* Wycinanka: bez ramki i bez panelu pod spodem. Oba elementy zakladaja
   zdjecie z krawedzia — przy przezroczystym PNG czytaja sie jak artefakt. */
.split__media--cutout::after{display:none}
.split__media--cutout img{background:transparent}


/* =========================================================================
   Hybryda krojow — Cormorant tylko od 28 px w gore
   =========================================================================
   Cormorant Garamond ma najnizsza wysokosc x z badanych krojow (38,6% wobec
   46,0% u Josta) i os wagi, ktora pogrubia wylacznie grube laski: masa litery
   rosnie z w400 na w500 o 14%, kreska wlosowa praktycznie wcale.

   Polski diakrytyk — kreska nad o, c, s, n i ogonek w a, e — jest rysowany
   gruboscia wlosowa. Przy 16 px i DPR 2 daje to 0,62 px urzadzenia, czyli
   ponizej jednego piksela. Podbicie wagi tego nie naprawia.

   Prog 1,00 px urzadzenia wypada przy 28 px CSS — dokladnie tam, gdzie
   zaczyna sie --fs-h2. Ponizej progu krojem jest Jost (2,40 px na diakrytyku).
   ========================================================================= */

.card h3,.card .card__tytul,
.step h3,
.indication h3,
.price-row h3,
.contact-item h3,
.acc__btn,
.drawer a.navlink--m{
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:-.005em;   /* Jost jest szerszy niz Cormorant przy tym stopniu */
}

/* Jost ma wieksza wysokosc x, wiec ciasna interlinia naglowkowa dusi tekst. */
.card h3,.card .card__tytul,
.step h3,
.indication h3,
.price-row h3,
.contact-item h3{line-height:1.28}


/* Baner zgody — nad paskiem akcji, nie zasłania go na telefonie. */
.consent-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--wh-green-900);color:var(--wh-paper);
  padding:16px 0 calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(21,35,30,.18);
}
.consent-bar__inner{display:flex;align-items:center;gap:24px;justify-content:space-between}
.consent-bar p{font-size:.86rem;line-height:1.5;max-width:64ch;margin:0}
.consent-bar a{color:var(--wh-green-200);text-underline-offset:3px}
.consent-bar__actions{display:flex;gap:10px;flex:none}
.consent-bar .btn:not(.btn--primary){
  background:transparent;color:var(--wh-paper);border:1px solid rgba(252,251,247,.35)}
.consent-bar .btn:not(.btn--primary):hover{border-color:var(--wh-paper)}
@media(max-width:900px){
  .consent-bar{bottom:calc(64px + env(safe-area-inset-bottom))}
  .consent-bar__inner{flex-direction:column;align-items:flex-start;gap:14px}
  .consent-bar__actions{width:100%}
  .consent-bar__actions .btn{flex:1}
}


/* Dokumenty prawne: kolumna czytelnicza wyrownana do tytulu strony.
   .prose siedzi teraz w pelnej szerokosci .wrap, wiec zaczyna sie tam,
   gdzie H1 — bez 240 px rozjazdu, ktory czytal sie jak dwa uklady. */
.prose{max-width:72ch}

/* Tabele w dokumentach: naglowek wyrozniony, wiersze oddzielone wlosowa linia. */
/* wp-block-table dokłada wlasne ramki — celujemy w figure, zeby wygrac
   specyficznoscia bez !important. */
.prose .wp-block-table,
.prose figure.wp-block-table{margin-block:1.4em;overflow-x:auto}
.prose .wp-block-table table,
.prose table{width:100%;border-collapse:collapse;font-size:.94rem;border:0}
/* WordPress daje thead grube 3px podkreslenie w kolorze tekstu — zdejmujemy,
   bo linia i tak jest na komorkach naglowka. */
.prose .wp-block-table thead,
.prose .wp-block-table tfoot,
.prose thead,
.prose tfoot,
.prose tbody,
.prose tr{border:0}
.prose .wp-block-table thead th,
.prose thead th{
  text-align:left;font-family:var(--font-body);font-weight:500;font-size:.76rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--wh-ink-soft);
  padding:0 1em .7em 0;border:0;border-bottom:1px solid var(--accent-line);
}
.prose .wp-block-table tbody td,
.prose tbody td{padding:.85em 1em .85em 0;border:0;border-bottom:1px solid var(--wh-line-soft);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
.prose table code{font-size:.88em;background:var(--wh-paper-2);padding:.15em .4em;border-radius:3px}

@media(max-width:640px){
  .prose table{font-size:.86rem}
  .prose thead th,.prose .wp-block-table tbody td,
.prose tbody td{padding-right:.6em}
}



/* Parametry zabiegu — lista definicji, nie tabela: na telefonie zawija sie
   naturalnie, a etykieta zostaje przy wartosci. */
.params{margin:0}
.params__row{display:flex;gap:1.2em;padding:.7em 0;border-bottom:1px solid var(--wh-line-soft)}
.params__row:last-child{border-bottom:0}
.params dt{flex:0 0 42%;font-family:var(--font-body);font-weight:500;font-size:.82rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--wh-ink-soft)}
.params dd{margin:0;font-size:.98rem}
@media(max-width:640px){
  .params__row{flex-direction:column;gap:.2em}
  .params dt{flex:none}
}

/* Lista przeciwwskazan — ten sam rytm co .ticks, ale znak ostrzegawczy. */
.ticks--no li::before{content:"—";color:var(--wh-nude-600)}

/* Karta zabiegu jako link — cala powierzchnia klikalna, bez zagniezdzania <a>. */
.card h3 a{color:inherit;text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card:has(h3 a):hover{border-color:var(--accent-line)}


/* Przelacznik grup wskazan — druga sciezka do zabiegow, obok kafelkow. */
.grupy{display:flex;flex-wrap:wrap;gap:10px}
.grupy__link{
  display:inline-flex;align-items:center;gap:8px;
  padding:.6em 1.1em;border:1px solid var(--wh-line);border-radius:999px;
  font-family:var(--font-body);font-size:.82rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--wh-ink-soft);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.grupy__link span{font-size:.74rem;opacity:.6}
.grupy__link:hover{color:var(--accent-strong);border-color:var(--accent-line)}
.grupy__link.is-active{background:var(--accent);border-color:var(--accent);color:var(--wh-paper)}
.grupy__link.is-active span{opacity:.75}

/* Kafelek wskazania jako link — cala powierzchnia klikalna. */
.indication{position:relative}
.indication h3 a{color:inherit;text-decoration:none}
.indication h3 a::after{content:"";position:absolute;inset:0}


/* =========================================================================
   Strona zabiegu — port z makiety wernerharmony-zabieg-mockup.html
   Nowe komponenty: hero zabiegu (.thero), pasek faktow (.facts),
   uklad z przyklejonym panelem (.layout + .booking + .toc),
   przeciwwskazania w kolumnach (.contra), os czasu zalecen (.aftercare).
   ========================================================================= */

strong,b{font-weight:500;color:var(--wh-ink)}
/* Ciemne sekcje maja jasny tekst, ale regula wyzej wstawiala w nie ciemny
   atrament — nazwy gabinetow w stopce mialy kontrast 1.15 przy wymaganych 4.5. */
.site-footer strong,.site-footer b,
.booking strong,.booking b{color:inherit}
.btn--full{width:100%}
.hdr__nav--right{justify-content:flex-end}
.navlink:hover::after{right:0}
/* Pasek postępu przewijania. Reguła istniała w motywie od dawna, ale bez
   znacznika w HTML i bez skryptu — czyli martwa. Podpięta, nie dopisana od nowa:
   drugi `.progress` z `left/right` przegrywał z jawnym `width:0` stąd i wychodził
   zerowej szerokości.

   Siedzi NA dolnej krawędzi nagłówka, nie pod nim — nagłówek ma własną linię
   1 px, więc osobny element pod spodem dawałby dwie kreski jedna na drugiej. */
.progress{
  position:absolute;left:0;bottom:-2px;height:3px;width:0;
  background:linear-gradient(90deg,var(--wh-green-800),var(--wh-green-600));
  pointer-events:none;z-index:1;
  /* Zaokraglony koniec — pasek konczy sie miekko zamiast urwana kreska. */
  border-radius:0 3px 3px 0;
  /* Bez szyny pod spodem: na samej gorze strony nie ma czego pokazywac, wiec
     paska po prostu nie ma. Pojawia sie, gdy czytelnik ruszy w dol. */
  opacity:0;transition:width .1s linear,opacity .25s var(--ease);
}
.progress.is-widoczny{opacity:1}
@media(prefers-reduced-motion:reduce){.progress{transition:none}}
.thero{padding-block:clamp(32px,4.5vw,60px) 0;background:var(--wh-paper-2)}
.crumbs span{opacity:.5;margin:0 .5em}
.thero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:end}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.4em}
.tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500; padding:.5em 1em;border-radius:100px;background:var(--accent-soft);color:var(--accent-strong);}
.tag--outline{background:transparent;border:1px solid var(--wh-line);color:var(--wh-ink-soft)}
.thero h1{font-size:var(--fs-h1);font-weight:400;letter-spacing:-.02em}
.thero h1 em{font-style:italic}
.thero__sub{margin-top:1em;font-size:.94rem;letter-spacing:.03em;color:var(--wh-ink-mute); padding-left:1em;border-left:2px solid var(--accent-line);}
.thero__lead{margin-top:1.4rem;max-width:52ch}
.thero__media{padding-bottom:clamp(28px,4vw,52px)}
.thero__media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-l);background:var(--wh-green-50)}
.thero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:2rem 0 clamp(28px,4vw,52px)}
.facts{background:var(--wh-white);border-top:1px solid var(--wh-line-soft);border-bottom:1px solid var(--wh-line-soft)}
.facts__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.fact{padding:22px 24px}
.fact+.fact{border-left:1px solid var(--wh-line-soft)}
.fact dt{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wh-ink-mute);margin-bottom:.6em}
.fact dd{margin:0;font-family:var(--font-display);font-size:1.12rem;line-height:1.25;color:var(--wh-green-800)}
.fact dd small{display:block;font-family:var(--font-body);font-size:.78rem;color:var(--wh-ink-mute);margin-top:.35em;letter-spacing:.02em}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:clamp(32px,4.5vw,76px);align-items:start}
/* Panel wyzszy niz okno NIE przykleja sie — przegladarka nie ma czego
   przypiac. Panel ma 975 px, okno 900 px, wiec sticky nie dzialal wcale.
   Rozwiazanie: kolumna przewija sie wlasnym scrollem, gdy nie miesci sie
   w ekranie, a sama pozostaje przyklejona. */
/* Zgodnie z mockupem: przyklejony panel, BEZ wewnetrznego scrolla.
   Gdy panel jest wyzszy niz okno, przypiecie gory ukryloby jego dol na
   zawsze — wtedy JS nadaje .toc--tall i przypinamy dol zamiast gory:
   panel jedzie z trescia, a gdy dojedzie, staje. Cala zawartosc dostepna. */
.toc{
  position:sticky;top:calc(var(--hdr-h-stuck) + 20px);
  display:grid;gap:22px;align-self:start;
}
/* sticky z `bottom` nie zaczepia sie w grid-itemie (sprawdzone: panel jechal
   dalej za trescia). Dlatego dalej `top`, tylko ujemny — wyliczany z realnej
   wysokosci panelu, ktora podaje JS w --toc-h. Dol panelu siada przy dole okna. */
.toc--tall{top:calc(100vh - var(--toc-h) - 20px)}
.toc__box{background:var(--wh-white);border:1px solid var(--wh-line-soft);border-radius:var(--r-l);padding:24px}
.toc h4{font-family:var(--font-body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wh-ink-mute);margin:0 0 1.2em;font-weight:500}
.toc ul{display:grid;gap:.15em}
/* TYLKO linki spisu tresci. Bez `nav` selektor (0,1,1) bil `.btn--outline-light`
   (0,1,0) i malowal przycisk z numerem telefonu na ciemny — kontrast 2.00. */
.toc nav a{display:block;font-size:.9rem;color:var(--wh-ink-soft);padding:.45em 0 .45em .95em; border-left:2px solid var(--wh-line-soft);transition:.25s var(--ease);}
.toc nav a:hover{color:var(--accent);border-color:var(--accent-line)}
.toc nav a.is-current{color:var(--wh-green-900);border-color:var(--accent);font-weight:400}
.booking{background:var(--wh-green-900);color:#C3D2C8;border-radius:var(--r-l);padding:26px}
.booking h3{color:#fff;font-size:1.32rem;margin-bottom:.5em}
.booking p{font-size:.88rem;line-height:1.6}
.booking__actions{display:grid;gap:10px;margin-top:1.4em}
.booking__meta{margin-top:1.3em;padding-top:1.1em;border-top:1px solid rgba(255,255,255,.14);font-size:.8rem;color:#7FA391}
.article > section{scroll-margin-top:calc(var(--hdr-h-stuck) + 24px)}
.article > section + section{margin-top:clamp(44px,5.5vw,76px)}
.article h2{font-size:var(--fs-h2);margin-bottom:.7em}
.article h2 em{font-style:italic;color:var(--accent)}
.article h3{font-size:var(--fs-h3);margin:1.8em 0 .6em}
.article p{max-width:70ch;color:var(--wh-ink-soft)}
.article p.first{font-size:var(--fs-lead);color:var(--wh-ink)}
.depth{background:var(--wh-white);border:1px solid var(--wh-line-soft);border-radius:var(--r-l); padding:clamp(20px,3vw,30px);margin-top:2rem;}
.depth__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.depth__head h3{font-size:1.05rem;margin:0}
.depth__head span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wh-ink-mute)}
.depth svg{width:100%;height:auto;display:block}
.depth .lyr-label{font-family:var(--font-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:var(--wh-ink-mute)}
.depth .lyr-note{font-family:var(--font-body);font-size:11.5px;fill:var(--wh-green-800)}
.depth .beam{opacity:0;transform-origin:center}
.depth.is-in .beam{animation:beamDrop 2.6s var(--ease) infinite}
.depth.is-in .beam:nth-of-type(2){animation-delay:.35s}
.depth.is-in .beam:nth-of-type(3){animation-delay:.7s}
.depth.is-in .beam:nth-of-type(4){animation-delay:1.05s}
0%{opacity:0;transform:translateY(-14px)}
25%{opacity:1;transform:translateY(0)}
70%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(0)}
.depth__legend{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:16px;font-size:.82rem;color:var(--wh-ink-mute)}
.depth__legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.55em;vertical-align:-1px}
/* Trzy kolumny, nie dwie. Pozycje wskazań są krótkie („Pajączki", „Piegi") —
   w kolumnie o szerokości 839 px dawały siedemnaście znaków w wierszu i resztę
   pustki, przez co lista rozjeżdżała się w pionie i przestawała się skanować.
   Trzy węższe kolumny mieszczą tę samą treść na jednym ekranie. */
/* Kolumny KURCZĄ SIĘ do treści, nie rozciągają na równe części.
   Trzy równe kolumny po 590 px przy pozycjach długości 25 znaków zostawiały
   między tekstem a sąsiednią kolumną kilkaset pikseli pustki — oko musiało
   skakać przez pół ekranu, a lista czytała się jak rozsypane punkty.
   `max-content` w `auto-fill` upycha tyle kolumn, ile się mieści, każdą
   szerokości najdłuższej pozycji.

   Warianty stoją TUŻ ZA regułą bazową celowo. Wcześniej siedziały w odległym
   bloku `@media`, który w pliku wypadał WCZEŚNIEJ niż `.goals` — przy równej
   specyficzności wygrywa kolejność, więc trzy kolumny zostawały do progu 900 px. */
.goals{
  /* Kolumny CSS, nie siatka. W siatce pozycje płyną W POPRZEK, więc każda grupa
     kończyła się dziurą w ostatnim rzędzie, a oko wędrowało przez pół ekranu
     między sąsiednimi hasłami. `columns` puszcza tekst W DÓŁ kolumny: pozycje
     jednej grupy stoją pod sobą, kolumny wypełniają się równo, a nagłówek grupy
     przechodzi w poprzek dzięki `column-span`.
     To jest właściwy prymityw do listy krótkich haseł — siatka służy do układów
     dwuwymiarowych, a tu wymiar jest jeden. */
  columns:3;column-gap:3rem;margin-top:1.6rem;
}
@media(max-width:1080px){.goals{columns:2}}
@media(max-width:640px){.goals{columns:1}}
/* Naglowek grupy wskazan z dokumentu — nie jest celem, wiec bez punktora. */
.goals__poz-grupy{
  column-span:all;list-style:none;padding-left:0;margin-top:2.2em;
  /* Bez tego przeglądarka może rozdzielić nagłówek od pierwszej pozycji
     na granicy kolumn. */
  break-after:avoid;
}
  .goals__poz-grupy:first-child{margin-top:0}
  /* Linia POD nagłówkiem grupy zamiast kreski z boku: kreska przy tekście była
     kilkupikselowym śladem, którego nie widać, a linia na pełną szerokość
     naprawdę oddziela grupy. */
  .goals__poz-grupy .goals__grupa{
    padding-bottom:.7em;border-bottom:1px solid var(--wh-line);
    color:var(--accent-strong);
  }
/* Pozycja stojaca poza grupami — w dokumencie osobna kategoria bez podpunktow.
   Odstep zamiast naglowka, zeby nie sugerowala przynaleznosci do poprzedniej. */
/* Pozycja spoza grup — w dokumencie „Fotoodmładzanie" jest osobną, trzecią
   kategorią, nie częścią zmian pigmentacyjnych. W układzie kolumnowym
   wylądowałaby na końcu ostatniej kolumny poprzedniej grupy i czytałaby się
   jako jej element, więc przechodzi w poprzek i dostaje odstęp nad sobą. */
.goals__samodzielny{column-span:all;margin-top:2em;break-before:column}
.goals__poz-grupy::before{content:none}
/* `.goals h3` — bez podniesienia specyficznosci wygrywa ogolna regula dla
   naglowkow w artykule i etykieta grupy renderuje sie w 23px zamiast 11.5px. */
.goals .goals__grupa{margin:0;font-family:var(--font-body);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wh-ink-mute);
  margin-top:1.4em;padding-left:0}
.goals__poz-grupy:first-child .goals__grupa{margin-top:0}

.goals li{display:flex;gap:.8em;align-items:flex-start;font-size:.97rem;
  color:var(--wh-ink-soft);break-inside:avoid;margin-bottom:.55em}

/* Punktory. Reguła `.goals svg` istniała w arkuszu, ale w znaczniku nie ma
   żadnego `<svg>` — pozycje szły gołym tekstem. Krótkie hasła („Piegi",
   „Pajączki") bez znaku wiodącego zlewają się z sąsiednią kolumną, bo nic nie
   pokazuje, gdzie zaczyna się pozycja. Kropka z pseudoelementu zamiast ikony:
   nie dokłada znacznika i nie trafia do drzewa dostępności, gdzie `<li>` samo
   w sobie już mówi czytnikowi, że to element listy. */
.goals li:not(.goals__poz-grupy)::before{
  content:"";flex:0 0 auto;width:5px;height:5px;margin-top:.62em;
  border-radius:50%;background:var(--accent);
}
.goals svg{width:16px;height:16px;flex:0 0 auto;margin-top:6px;color:var(--accent)}/* auto-fit przy 4 kolumnach dawal 3+1 i wielka pustke w drugim rzedzie.
   auto-fill z wezsza baza upycha wszystkie cztery w jednym rzedzie. */
/* Kolumna tresci ma ~840px. Cztery kolumny to po 190px — nazwy lekow lamaly
   sie na piec linii. Dwie kolumny po ~400px czytaja sie jak tabela, a karty
   w rzedzie wyrownuja wysokosc (stretch), wiec dna sie nie rozjezdzaja. */
.contra{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(14px,1.6vw,20px);margin-top:1.8rem}
.contra__col{background:var(--wh-white);border:1px solid var(--wh-line-soft);border-radius:var(--r-m);padding:22px}
.contra__col h3{font-size:.98rem;scroll-margin-top:calc(var(--hdr-h-stuck) + 20px);margin:0 0 1em;padding-bottom:.7em;border-bottom:1px solid var(--wh-line-soft)}
.contra__col ul{display:grid;gap:.6em}
.contra__col li{display:flex;gap:.7em;font-size:.9rem;color:var(--wh-ink-soft);line-height:1.5}
.contra__col li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-mid);flex:0 0 auto;margin-top:.62em}
/* Uwaga to dopisek POD pozycja, nie druga kolumna. Wymaga wlasnego
   kontenera <span> w markupie — sam tekst li bylby osobnym itemem flexa. */
.contra__col li > span{min-width:0}
.contra__col li em{font-style:normal;color:var(--wh-ink-mute);font-size:.85em;
  display:block;margin-top:.15em}
.contra__col--hard{border-color:var(--wh-nude-300);background:var(--wh-warn-bg)}
.contra__col--hard li::before{background:var(--wh-nude-600)}
.disclaimer{margin-top:1.8rem;padding:18px 22px;border-radius:var(--r-m); background:var(--wh-warn-bg);border:1px solid var(--wh-nude-300); display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;}
.disclaimer svg{width:22px;height:22px;color:var(--wh-warn);margin-top:2px}
.disclaimer p{font-size:.88rem;color:var(--wh-nude-700);max-width:none;margin:0}
.device{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3.5vw,52px);align-items:center;margin-top:1.8rem}
.device img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-l);background:var(--wh-paper-2)}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;margin-top:2rem}
.rel-card{background:var(--wh-white);border:1px solid var(--wh-line-soft);border-radius:var(--r-l); padding:26px;display:flex;flex-direction:column;gap:.5em; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--accent-line)}
.rel-card span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-mid)}
.rel-card h3{font-size:1.12rem}
.rel-card p{font-size:.9rem;color:var(--wh-ink-mute);margin:0}

@media (max-width:1180px){
  .layout{grid-template-columns:minmax(0,1fr) 300px}
  .facts__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fact:nth-child(3n+1){border-left:0}
  .fact:nth-child(n+4){border-top:1px solid var(--wh-line-soft)}
}
@media (max-width:1000px){
  .layout{grid-template-columns:1fr}
  .toc{position:static;order:-1;grid-template-columns:1fr;gap:16px}
  .toc__box{display:none}
  .thero__grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .thero__media{padding-bottom:0;order:-1}
  .device{grid-template-columns:1fr}
  .device img{aspect-ratio:4/3}
}
@media (max-width:900px){
  .cta-band__actions .btn{width:100%}
  .thero__actions .btn{flex:1 1 auto;min-width:180px}
}
@media (max-width:640px){
  /* minmax(0,…) — bez tego kolumna nie zejdzie ponizej swojej tresci
     i przy 320px pasek faktow wypycha strone poza ekran. */
  .facts__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact{border-left:0 !important;border-top:1px solid var(--wh-line-soft)}
  .fact:nth-child(odd){border-right:1px solid var(--wh-line-soft)}  .depth__head{margin-bottom:10px}
}
@media (hover:none){
  .btn:hover,.rel-card:hover{transform:none}
  .rel-card:hover{box-shadow:none;border-color:var(--wh-line-soft)}
  a,button{-webkit-tap-highlight-color:rgba(46,92,75,.12)}
}
@media (prefers-reduced-motion:reduce){
  .depth .beam{opacity:1}
}


/* Os czasu zalecen — okres po lewej, zalecenie po prawej. */
/* Wiersz kontynuujacy ten sam okres — bez powtorzonej etykiety i bez
   kreski oddzielajacej, zeby czytalo sie jak jedna pozycja z punktami. */
/* Tresc tylko dla czytnikow ekranu — znika z oczu, zostaje w drzewie
   dostepnosci. `clip-path` zamiast `display:none`, bo `none` usuwa
   element takze z odczytu. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(max-width:640px){
}

/* Sekcje w kolumnie tresci — rytm pionowy bez wlasnych .section */
.article > section + section{margin-top:clamp(48px,6vw,84px)}
.article .prose{max-width:none}


/* Trwaly dostep do ustawien cookies — wycofanie zgody musi byc tak samo
   latwe jak jej udzielenie. */
.consent-reopen{
  position:fixed;left:16px;bottom:16px;z-index:150;
  padding:.55em 1em;border-radius:999px;
  background:var(--wh-paper);border:1px solid var(--wh-line);
  font-family:var(--font-body);font-size:.72rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--wh-ink-soft);
  box-shadow:var(--shadow-s);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.consent-reopen:hover{color:var(--accent-strong);border-color:var(--accent-line)}
@media(max-width:900px){
  .consent-reopen{bottom:calc(72px + env(safe-area-inset-bottom));left:12px}
}

.field__hint{display:block;margin-top:.5em;font-size:.78rem;line-height:1.5;color:var(--wh-ink-mute)}


/* Dlugie wartosci w pasku faktow („Twarz, szyja, dekolt”) musza sie lamac,
   inaczej rozpychaja kolumne siatki. */
.fact dt,.fact dd{overflow-wrap:anywhere}

/* Szuflada mobilna: szerokosc okna, nie zawartosci. */
.drawer{max-width:100vw;overflow-x:hidden}

/* ==========================================================================
   POSTĘP PRZEWIJANIA I POWRÓT NA GÓRĘ
   ========================================================================== */

/* Powrót na górę. Kolory te same co przycisk główny, żeby nie wprowadzać
   trzeciego wariantu przycisku do systemu. */
.gora{
  position:fixed;right:22px;z-index:96;
  /* Nad paskiem akcji na telefonie (64 px) plus obszar bezpieczny iOS.
     Na desktopie paska nie ma, więc `--wh-dock` schodzi do zera niżej. */
  bottom:calc(22px + var(--wh-dock,0px) + env(safe-area-inset-bottom));
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;border:1px solid transparent;
  box-shadow:0 10px 30px -12px rgba(21,35,30,.5);
  cursor:pointer;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .3s var(--ease);
}
.gora[hidden]{display:none}
.gora.is-widoczny{opacity:1;transform:none}
.gora:hover{background:var(--accent-strong)}
.gora:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:900px){
  /* Pasek akcji zajmuje dół ekranu — przycisk musi stać nad nim. */
  :root{--wh-dock:64px}
  .gora{right:16px;width:42px;height:42px}
}

@media(prefers-reduced-motion:reduce){
  .gora{transition:opacity .01ms}
}

/* --------------------------------------------------------------------------
   ZALECENIA POZABIEGOWE — tabela „kiedy → co robić"

   Wcześniej siatka div-ów bez nagłówka kolumn: lewa kolumna z okresem nie była
   niczym podpisana, więc czytelnik musiał się domyślić, czym jest. Teraz
   tabela, okres jako plakietka i wyraźna linia między GRUPAMI okresów, nie
   między każdym wierszem — rytm ma nieść informację, a nie dzielić po równo.
   -------------------------------------------------------------------------- */
.aftercare{width:100%;border-collapse:collapse;margin-top:1.6rem;table-layout:fixed}
.aftercare th,.aftercare td{text-align:left;vertical-align:top}

.aftercare thead th{
  font-family:var(--font-body);font-weight:500;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wh-ink-mute);
  padding:0 0 .9em;border-bottom:1px solid var(--wh-line);
}
.aftercare thead th:first-child{width:9.5rem}

/* Linia oddziela GRUPY okresów. Wiersz będący ciągiem tego samego okresu
   dostaje linię lżejszą i tylko po stronie treści — widać, że należy do grupy
   powyżej, a nie zaczyna nową. */
.aftercare__grupa > *{border-top:1px solid var(--wh-line);padding-top:1.15em}
.aftercare tbody tr:first-child > *{border-top:none}
.aftercare__ciag .aftercare__what{border-top:1px solid var(--wh-line-soft);padding-top:.85em}
.aftercare tbody tr > *{padding-bottom:1.15em}

.aftercare__when{padding-right:1.5rem;font-weight:400}
.aftercare__chip{
  display:inline-block;font-family:var(--font-body);font-weight:500;
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-strong);background:var(--accent-soft);
  padding:.45em .85em;border-radius:100px;white-space:nowrap;
}
.aftercare__what{
  font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--wh-ink-soft);
}

@media(max-width:640px){
  /* Na telefonie kolumna czasu nad treścią — 9,5 rem obok tekstu zostawiałoby
     tekstowi około dwudziestu znaków w wierszu. */
  .aftercare,.aftercare thead,.aftercare tbody,
  .aftercare tr,.aftercare th,.aftercare td{display:block;width:auto}
  .aftercare thead{display:none}
  .aftercare__when{padding:0 0 .5em}
  .aftercare__grupa > *{border-top:none;padding-top:0}
  .aftercare__grupa{border-top:1px solid var(--wh-line);padding-top:1.2em;margin-top:1.2em}
  .aftercare tbody tr:first-child{border-top:none;padding-top:0;margin-top:0}
  .aftercare__ciag .aftercare__what{border-top:none;padding-top:0}
  .aftercare__ciag{margin-top:.9em}
}


/* ==========================================================================
   KROKI ZAPISANE ZDANIAMI — na samym końcu arkusza, celowo

   Wpis dostaje jednocześnie `steps--N` (z liczby kroków) i `steps--zdania`
   (bo kroki są zdaniami). Obie klasy mają tę samą specyficzność, więc decyduje
   kolejność w pliku — a reguły `steps--N` żyją także w blokach `@media`
   rozsianych niżej. Dopóki blok zdaniowy stał wyżej, wynik zależał od tego,
   którą klasę dobrała liczba kroków: cztery dawały jedną kolumnę, pięć dwie,
   a siedem tworzyło niejawny trzeci tor w siatce zadeklarowanej jako dwukolumnowa.

   Tu, na końcu, zdanie wygrywa zawsze i zachowanie przestaje zależeć od liczby.
   ========================================================================== */
.steps--zdania{grid-template-columns:repeat(2,1fr)}
.steps--zdania > .step:last-child{grid-column:auto}
.steps--zdania > .step:last-child:nth-child(odd){grid-column:span 2}

/* Poniżej 900 px zawsze jedna kolumna: zdanie w kolumnie o połowie szerokości
   telefonu i tak nie ma się gdzie zmieścić. */
@media(max-width:900px){
  .steps--zdania{grid-template-columns:1fr}
  .steps--zdania > .step:last-child:nth-child(odd){grid-column:auto}
}