/* ==========================================================================
   magdalena-borowiec.pl — wspólny arkusz stylów
   Współdzielony przez landingi lokalne (/psycholog-katowice, docelowo /psycholog-tychy).
   Zero zależności zewnętrznych. Fonty self-hosted.
   ========================================================================== */

/* --- Fonty ---------------------------------------------------------------
   Subsetowane do polskiego zestawu znaków (latin + latin-ext PL).
   Zmienne osie wagi zachowane: Inter 400–600, Source Serif 4 500–600.
   size-adjust/ascent-override na foncie zastępczym — bez tego `swap` daje skok CLS.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/assets/fonts/sourceserif4-var.woff2') format('woff2');
}
/* Metryki dopasowane do Inter — eliminują reflow przy zamianie fontu. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}
/* Metryki dopasowane do Source Serif 4. */
@font-face {
  font-family: 'Serif Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 96%;
  ascent-override: 105%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* --- Zmienne -------------------------------------------------------------
   Kontrasty policzone wg WCAG 2.x (relative luminance). Wartości w komentarzach
   są zmierzone, nie szacowane. Nie zmieniać bez przeliczenia.
   ------------------------------------------------------------------------ */
:root {
  --krem:        #F4EFE7;
  --piasek:      #EAE2D5;
  --biel:        #FFFFFF;
  --grafit:      #33302B;  /* 11,48:1 na kremie */
  --muted:       #5F5A55;  /* 5,96:1 na kremie, 5,30:1 na piasku — AA na obu tłach */
  --terakota:    #B4553B;  /* wypełnienie CTA; biały tekst = 4,88:1 */
  --terakota-d:  #A34A34;  /* hover + linki tekstowe; 5,12:1 na kremie */
  --szarosc:     #5F6569;  /* ikony, obramowania; 5,17:1 na kremie */
  --blad:        #8C2F1E;  /* 7,22:1 na kremie */
  --sukces:      #276749;  /* 6,73:1 na bieli; 5,94:1 na #EAF3ED */
  --sukces-tlo:  #EAF3ED;
  --dab:         #C08A57;  /* 2,62:1 — WYŁĄCZNIE dekoracja, nigdy nośnik informacji */

  --tekst:       17px;
  --linia:       1.65;
  --szer-tekst:  680px;
  --szer-max:    1100px;
  --nav-h:       64px;
  --radius:      10px;

  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', 'Serif Fallback', Georgia, 'Times New Roman', serif;
}

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

/* Atrybut `hidden` działa przez `display: none` z arkusza przeglądarki, więc
   przegrywa z każdą własną regułą `display` (np. `.btn { display: inline-flex }`).
   Po udanej wysyłce przycisk zostawał na ekranie z napisem „Wysyłam…”.
   Ta reguła musi stać wysoko i mieć !important — inaczej problem wraca
   przy każdej nowej klasie z własnym `display`. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--krem);
  color: var(--grafit);
  font: 400 var(--tekst)/var(--linia) var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.005em; }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.75rem); text-wrap: balance; }
.h1__nazwisko { display: block; }
h2 { font-size: clamp(1.65rem, 3.5vw, 2.35rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
p  { margin: 0 0 1.1em; }
a  { color: var(--terakota-d); text-underline-offset: .18em; }
a:hover { color: var(--grafit); }

/* Focus widoczny wszędzie, z zapasem od sticky nav. */
:focus-visible {
  outline: 3px solid var(--terakota-d);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--grafit); color: var(--biel);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--biel); }

.wrap { width: 100%; max-width: var(--szer-max); margin-inline: auto; padding-inline: 20px; }
.proza { max-width: var(--szer-tekst); }
.center { margin-inline: auto; }

/* Klasy narzędziowe. Atrybuty style="" nie mogą istnieć — ścisłe CSP
   (style-src 'self', bez 'unsafe-inline') blokuje style inline. */
.bez-marginesu { margin: 0; }
.bez-marg-gora { margin-top: 0; }
.bez-marg-dol  { margin-bottom: 0; }
.tel-duzy { font-size: 1.2rem; font-weight: 600; }
.drobne { color: var(--muted); font-size: .9rem; }
.stopka__opis { margin: 0; color: rgba(244, 239, 231, .75); }
.pole__legenda { display: block; font-weight: 500; font-size: .95rem; margin-bottom: .4rem; }

/* --- Sekcje --------------------------------------------------------------- */
section { padding-block: clamp(48px, 8vw, 80px); }
/* Naprzemienne pasy tła — identycznie na desktopie i na mobile. */
.sekcja--piasek { background: var(--piasek); }

.eyebrow {
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--szarosc); margin: 0 0 .9rem; font-weight: 500;
}
.lead { font-size: 1.15rem; color: var(--grafit); }

/* --- Nawigacja ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(244, 239, 231, .88);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  transition: box-shadow .2s ease;
}
.nav--scrolled { box-shadow: 0 1px 0 rgba(51, 48, 43, .1), 0 6px 20px -12px rgba(51, 48, 43, .35); }
.nav__inner { display: flex; align-items: center; gap: 1rem; height: 100%; min-width: 0; }
.nav__inner > * { min-width: 0; } /* bez tego elementy flex nie kurczą się i rozpychają stronę */
/* Monogram + tekst = pozioma wersja lockupu. Selektory celują w
   .nav__brand-tekst > span, a nie w każdy span wewnątrz — inaczej reguły
   trafiałyby też w sam kontener tekstu. */
.nav__brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--grafit); margin-right: auto; }
.nav__logo { height: 38px; width: auto; flex: none; display: block; }
.nav__brand-tekst { display: flex; flex-direction: column; line-height: 1.2; }
.nav__brand-tekst b { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; }
.nav__brand-tekst > span { font-size: .76rem; color: var(--muted); letter-spacing: .02em; }
.nav__links { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { color: var(--grafit); text-decoration: none; font-size: .93rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav__links a:hover { border-bottom-color: var(--terakota); }
.nav__tel { display: inline-flex; align-items: center; gap: .4rem; color: var(--grafit); text-decoration: none; font-weight: 500; font-size: .93rem; white-space: nowrap; }
.nav__tel:hover { color: var(--terakota-d); }
.nav__toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--grafit); flex: none; }
.nav__cta { flex: none; }
.etykieta--krotka { display: none; }

@media (max-width: 900px) {
  :root { --nav-h: 56px; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--krem);
    border-bottom: 1px solid rgba(51, 48, 43, .12);
    padding: .5rem 20px 1rem;
    display: none;
  }
  .nav__links[data-open='true'] { display: flex; }
  .nav__links a { padding: .8rem 0; border-bottom: 1px solid rgba(51, 48, 43, .08); width: 100%; }
  .nav__toggle { display: inline-flex; order: 3; }
  .nav .btn { padding: .6rem .9rem; font-size: .88rem; min-height: 44px; }
  /* Cel dotykowy min. 44×44 px (WCAG 2.5.5). Samo SVG ma 17×17, z paddingiem
     wychodziło ~33×33 — przy 83% ruchu mobilnego to realna bariera i
     prawdopodobne źródło części martwych kliknięć. Sąsiedni .nav .btn ma
     min-height: 44px już wcześniej; to wyrównanie, nie nowa reguła. */
  .nav__tel { flex: none; padding: .5rem; min-width: 44px; min-height: 44px; justify-content: center; }
  .nav__tel span { display: none; }
  .nav__brand-tekst b { font-size: .95rem; }
  .nav__logo { height: 32px; }
  .nav__brand { gap: .5rem; }
  .nav__inner { gap: .5rem; }
}

/* Poniżej ~430 px nawet skrócony pasek nie mieści pełnej etykiety CTA.
   Zostaje sam monogram — znak rozpoznawalny bez podpisu. */
@media (max-width: 430px) {
  .etykieta--pelna { display: none; }
  .etykieta--krotka { display: inline; }
  .nav__brand-tekst { display: none; }
  .nav .btn { padding: .55rem .85rem; }
}

/* --- Przyciski ------------------------------------------------------------
   Wypełnienie terakotą + biały tekst = 4,88:1 (AA także dla drobnego tekstu).
   Terakota NIGDY jako kolor tekstu na kremie (4,26:1 — oblewa AA).
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.5rem;
  background: var(--terakota); color: var(--biel);
  font: 500 1rem/1 var(--sans);
  border: 0; border-radius: var(--radius); cursor: pointer;
  text-decoration: none; transition: background .15s ease;
}
.btn:hover { background: var(--terakota-d); color: var(--biel); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn--ghost {
  background: transparent; color: var(--grafit);
  border: 1.5px solid var(--szarosc);
}
.btn--ghost:hover { background: var(--biel); color: var(--grafit); border-color: var(--grafit); }
.btn--full { width: 100%; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-top: clamp(36px, 5vw, 56px); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero__foto { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px -34px rgba(51, 48, 43, .55); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-top: 1.6rem; }
.hero__tel { display: flex; flex-direction: column; line-height: 1.3; }
.hero__tel a { font-weight: 600; text-decoration: none; font-size: 1.05rem; }
.hero__tel small { color: var(--muted); font-size: .82rem; }
/* Cena i kwalifikacje w pierwszym ekranie. #oferta (cennik) było najczęściej
   odwiedzaną sekcją na płatnym ruchu — cena ma być widoczna bez scrolla. */
.hero__fakty { margin-top: 1rem; font-size: .95rem; line-height: 1.5; }
.hero__fakty span { display: block; color: var(--muted); font-size: .88rem; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__foto { order: -1; }
}

/* Pasek zaufania — lista, nie karty. */
.zaufanie { border-block: 1px solid rgba(51, 48, 43, .12); padding-block: 1.1rem; }
.zaufanie ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  font-size: .9rem; color: var(--szarosc);
}
.zaufanie li { display: flex; align-items: center; gap: .5rem; }
.zaufanie li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--terakota); flex: none;
}

/* --- Lista „Dla kogo” ------------------------------------------------------ */
.dlakogo { list-style: none; margin: 0 0 2rem; padding: 0; max-width: var(--szer-tekst); }
.dlakogo li { position: relative; padding: .7rem 0 .7rem 1.9rem; border-bottom: 1px solid rgba(51, 48, 43, .09); }
.dlakogo li:last-child { border-bottom: 0; }
.dlakogo li::before {
  content: ''; position: absolute; left: 0; top: 1.35rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--terakota);
}

/* --- Cytat ---------------------------------------------------------------- */
.cytat {
  max-width: 640px; margin: 2.5rem auto 0; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 1.28rem; line-height: 1.5;
  color: var(--muted);
}
.cytat cite { display: block; margin-top: .8rem; font-size: .85rem; font-style: normal; letter-spacing: .04em; }

/* --- O mnie / Gabinet ----------------------------------------------------- */
.split { display: grid; grid-template-columns: 380px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
/* Gabinet (jedyne dwa użycia split--rev) dostaje ~połowę szerokości. Landscape
   ściśnięty do 380 px był mały i nieczytelny — pół na pół jak harmonia-mysli.eu. */
.split--rev { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .split, .split--rev { grid-template-columns: 1fr; } }

/* Portret jest jasny i chłodny — biała karta, nie kremowe tło,
   inaczej wygląda jak wycinanka. */
.portret {
  background: var(--biel); padding: 10px; border-radius: var(--radius);
  box-shadow: 0 18px 44px -30px rgba(51, 48, 43, .55);
}
.portret img { border-radius: 6px; }

/* Zamknięcie sekcji „Kim jestem” — osobiste zaproszenie z podpisem. */
.podpis {
  margin: 1.6rem 0 0; padding: 1.1rem 1.3rem;
  background: var(--biel); border-left: 3px solid var(--dab);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .98rem;
}
.podpis__imie {
  display: block; margin-top: .6rem;
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--grafit);
}

.fakty { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.fakty li { padding: .65rem 0; border-bottom: 1px solid rgba(51, 48, 43, .09); font-size: .95rem; }
.fakty li:last-child { border-bottom: 0; }

.foto-blok { border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 44px -30px rgba(51, 48, 43, .5); }

/* --- Kroki (jedyne karty na stronie) -------------------------------------- */
.kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.krok { background: var(--biel); border-radius: var(--radius); padding: 1.6rem 1.4rem; }
.krok__nr {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--krem); color: var(--szarosc);
  font-family: var(--serif); font-weight: 600; font-size: 1rem; margin-bottom: .9rem;
}
.krok p { margin: 0; font-size: .96rem; }
@media (max-width: 780px) { .kroki { grid-template-columns: 1fr; } }

.nota { color: var(--muted); font-size: .94rem; margin-top: 1.6rem; }

/* --- Oferta (karty usług) --------------------------------------------------
   Drugie po krokach miejsce, gdzie karty są uzasadnione: cztery równorzędne
   opcje, które użytkownik porównuje. Bez ciężkich cieni — sama biel na piasku.
   -------------------------------------------------------------------------- */
.h2__akcent { font-style: italic; color: var(--terakota-d); }

.oferta__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 780px) { .oferta__grid { grid-template-columns: 1fr; } }

.usluga {
  background: var(--biel); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  display: flex; flex-direction: column;
  border: 1px solid rgba(51, 48, 43, .07);
}
.usluga h3 { font-size: 1.28rem; font-weight: 500; margin-bottom: .7rem; }
/* flex:1 dosuwa stopkę karty do dołu — bez tego ceny w jednym wierszu
   stoją na różnych wysokościach, zależnie od długości opisu. */
.usluga p { font-size: .96rem; margin: 0; flex: 1 1 auto; }
/* Bez telefonu i CTA na karcie — jedno CTA na sekcję wystarczy.
   Cena i czas w jednej linii bazowej. */
.usluga__dol {
  display: flex; align-items: baseline; gap: .75rem;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(51, 48, 43, .12);
}
.usluga__cena { font-family: var(--serif); font-size: 1.65rem; font-weight: 600; line-height: 1; }
.usluga__czas { color: var(--muted); font-size: .9rem; }
.usluga__czas::before { content: '·'; margin-right: .6rem; color: var(--muted); }

/* Piąta usługa (online) nie jest piątą pozycją cennika, tylko innym sposobem
   spotkania — stąd karta na całą szerokość zamiast sieroty w siatce 2×2.
   Cena po prawej, oddzielona pionową linią. */
.usluga--szeroka {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem);
}
.usluga--szeroka .usluga__tresc { flex: 1 1 auto; }
.usluga--szeroka h3 { margin-bottom: .45rem; }
.usluga--szeroka p { flex: none; }
.usluga--szeroka .usluga__dol {
  flex: none; margin: 0; padding: .2rem 0 .2rem clamp(1.5rem, 3vw, 2.5rem);
  border-top: 0; border-left: 1px solid rgba(51, 48, 43, .12);
}
@media (max-width: 780px) {
  .usluga--szeroka { flex-direction: column; align-items: stretch; gap: 0; }
  .usluga--szeroka .usluga__dol {
    margin-top: 1.6rem; padding: 1.2rem 0 0;
    border-left: 0; border-top: 1px solid rgba(51, 48, 43, .12);
  }
}

.oferta__nota { color: var(--muted); font-size: .92rem; margin-top: 1.8rem; }

/* --- Gabinety (strona główna) ---------------------------------------------
   Dziś jedna lokalizacja, ale siatka jest przygotowana na dwie: przy dwóch
   kartach automatycznie ustawiają się obok siebie, przy jednej zajmuje ona
   pełną szerokość i układa się poziomo (zdjęcie | treść).
   -------------------------------------------------------------------------- */
.gabinety__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1.5rem; }

.gabinet {
  background: var(--biel); border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(51, 48, 43, .07);
  display: grid; grid-template-columns: 1fr;
}
/* Jedna karta na całą szerokość → układ poziomy. Dwie karty → pionowy. */
.gabinety__grid:has(.gabinet:only-child) .gabinet { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
@media (max-width: 780px) {
  .gabinety__grid:has(.gabinet:only-child) .gabinet { grid-template-columns: 1fr; }
}
.gabinet__foto img { width: 100%; height: 100%; object-fit: cover; }
.gabinet__tresc { padding: clamp(1.4rem, 2.6vw, 2rem); }
.gabinet__tresc h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: .25rem; }
.gabinet__adres { color: var(--muted); margin-bottom: 1rem; }
.gabinet__linki { margin: 0; font-weight: 500; line-height: 2; }

/* Portret w hero strony głównej — węższy niż zdjęcie gabinetu na landingu. */
.hero__portret { max-width: 380px; margin-inline: auto; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: var(--szer-tekst); }
.faq__item { border-bottom: 1px solid rgba(51, 48, 43, .12); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; min-height: 48px;
  font: 500 1.05rem/1.4 var(--sans); color: var(--grafit);
}
.faq__q::after {
  content: ''; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--szarosc); border-bottom: 2px solid var(--szarosc);
  transform: rotate(45deg); transition: transform .18s ease; margin-right: 4px;
}
.faq__q[aria-expanded='true']::after { transform: rotate(-135deg); }
.faq__a { padding: 0 0 1.2rem; color: var(--grafit); max-width: 60ch; }
.faq__a[hidden] { display: none; }

/* --- Formularz ------------------------------------------------------------ */
.kontakt__grid { display: grid; grid-template-columns: 1fr 380px; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .kontakt__grid { grid-template-columns: 1fr; } }

.form { background: var(--biel); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.pole { margin-bottom: 1.15rem; }
.pole > label { display: block; font-weight: 500; font-size: .95rem; margin-bottom: .4rem; }
.pole input[type='text'], .pole input[type='email'], .pole input[type='tel'] {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  font: 400 1rem/1.4 var(--sans); color: var(--grafit);
  background: var(--krem);
  border: 1.5px solid var(--szarosc); border-radius: 8px;
}
.pole input::placeholder { color: var(--muted); }
.pole input[aria-invalid='true'] { border-color: var(--blad); }

.kanal { display: flex; gap: .6rem; }
.kanal label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem;
  border: 1.5px solid var(--szarosc); border-radius: 8px; cursor: pointer;
  font-size: .95rem;
}
.kanal input { accent-color: var(--terakota); }
.kanal label:has(input:checked) { border-color: var(--terakota); background: var(--krem); box-shadow: inset 0 0 0 1px var(--terakota); }

/* Zgoda art. 9 ust. 2 lit. a — jeden checkbox, nigdy zaznaczony domyślnie. */
.zgoda { margin: 1.25rem 0; }
.zgoda__label { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: .87rem; line-height: 1.5; color: var(--grafit); }
.zgoda__label input { flex: none; width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--terakota); }

/* Błąd niesiony kolorem + ikoną + tekstem (SC 1.4.1) */
.blad { display: none; align-items: center; gap: .4rem; color: var(--blad); font-size: .88rem; margin-top: .4rem; }
.blad::before { content: '!'; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--blad); color: var(--biel); font-size: .72rem; font-weight: 700; }
.blad[data-show='true'] { display: flex; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__nota { font-size: .84rem; color: var(--muted); margin: 1rem 0 0; }
.form__status { margin-top: 1rem; font-size: .95rem; }
.form__status[data-stan='ok'] { color: var(--grafit); }
.form__status[data-stan='err'] { color: var(--blad); }

/* Stan po udanej wysyłce. Wcześniej zostawała zachęta do wypełnienia
   formularza, którego już nie było, a pod nią luźne zdanie — wyglądało
   jak awaria, nie jak potwierdzenie. */
.sukces { text-align: center; padding: .5rem 0 .25rem; }
.sukces__ikona {
  width: 56px; height: 56px; margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  background: var(--sukces-tlo); border-radius: 50%;
  color: var(--sukces);
}
.sukces h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--sukces); margin-bottom: .5rem; }
.sukces p { margin: 0 0 .8rem; }
.sukces p:last-child { margin-bottom: 0; font-size: .93rem; color: var(--muted); }
.sukces a { font-weight: 600; white-space: nowrap; }
.sukces:focus { outline: none; }

.klauzula { margin-top: 1.25rem; font-size: .82rem; color: var(--muted); }
.klauzula summary { cursor: pointer; font-weight: 500; padding: .35rem 0; min-height: 32px; }
.klauzula[open] summary { margin-bottom: .5rem; }
.klauzula p { margin: 0 0 .6em; }

.kontakt__dane { font-size: .98rem; }
.kontakt__dane a { font-weight: 500; }
.kontakt__dane p { margin-bottom: .8em; }

/* --- Kryzys (cicho: grafit na piasku, bez ikon, bez czerwieni) ------------- */
.kryzys { background: var(--piasek); }
.kryzys__box { max-width: var(--szer-tekst); font-size: .95rem; }
.kryzys__tytul {
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: normal;
}
.kryzys__box ul { list-style: none; margin: 0; padding: 0; }
.kryzys__box li { padding: .3rem 0; }
.kryzys__box b { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   PODSTRONA PRAWNA (polityka prywatności)
   Układ wzorowany na patentcore.digital: hero, przyklejony spis treści
   po lewej, treść po prawej. Paleta i typografia bez zmian.
   ========================================================================== */
.prawna-hero { background: var(--piasek); padding-block: clamp(40px, 6vw, 72px); }
/* Nagłówek podstrony na tle domyślnym — jak hero na stronie głównej.
   Pas kryzysowy ma tło --piasek i musi kontrastować z sekcją nad sobą, więc
   ostatnia sekcja treści zawsze jest kremowa. Przy parzystej liczbie sekcji
   wychodzi to tylko wtedy, gdy nagłówek startuje od kremu, nie od piasku. */
.prawna-hero--jasny { background: var(--krem); }
.prawna-hero h1 { margin-bottom: .3em; }
.prawna-hero__data { color: var(--muted); font-size: .92rem; margin: 0; }

.prawna-grid { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .prawna-grid { grid-template-columns: 1fr; } }

.spis {
  position: sticky; top: calc(var(--nav-h) + 20px); align-self: start;
  max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto;
  background: var(--biel); border: 1px solid rgba(51, 48, 43, .1);
  border-radius: var(--radius); padding: 1.25rem 1.4rem;
}
.spis h2 { font-family: var(--sans); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--szarosc); margin-bottom: .9rem; }
.spis ol { list-style: none; margin: 0; padding: 0; counter-reset: spis; }
.spis li { counter-increment: spis; }
.spis a {
  display: flex; gap: .55rem; padding: .38rem 0;
  color: var(--grafit); text-decoration: none; font-size: .88rem; line-height: 1.4;
  border-left: 2px solid transparent; padding-left: .6rem; margin-left: -.6rem;
}
.spis a::before { content: counter(spis) '.'; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.spis a:hover { color: var(--terakota-d); }
/* Podświetlenie aktywnej sekcji ustawia JS (IntersectionObserver). */
.spis a[aria-current='true'] { color: var(--terakota-d); font-weight: 500; border-left-color: var(--terakota); }

@media (max-width: 900px) {
  .spis { position: static; max-height: none; margin-bottom: 2rem; }
}

.prawna-tresc { max-width: 72ch; }
.prawna-tresc h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 0; }
.prawna-tresc section { padding-bottom: 2.2rem; margin-bottom: 2.2rem; border-bottom: 1px solid rgba(51, 48, 43, .1); }
.prawna-tresc section:last-child { border-bottom: 0; }
.prawna-tresc h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 1.4rem 0 .5rem; }
.prawna-tresc ul, .prawna-tresc ol { padding-left: 1.2rem; }
.prawna-tresc li { margin-bottom: .45rem; }
.prawna-tresc dt { font-weight: 600; margin-top: .9rem; }
.prawna-tresc dd { margin: .2rem 0 0; }

/* Tabela cookies / retencji — przewija się we własnym kontenerze, nie rozpycha strony. */
.tabela-wrap { overflow-x: auto; margin: 1rem 0; }
.prawna-tresc table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .9rem; }
.prawna-tresc th, .prawna-tresc td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid rgba(51, 48, 43, .12); vertical-align: top; }
.prawna-tresc th { font-weight: 600; background: var(--piasek); }

/* Blok wyróżniony. Używany dla informacji o prawie sprzeciwu — art. 21 ust. 4
   RODO każe przedstawić ją „jasno i odrębnie od wszelkich innych informacji”,
   więc nie może być punktem na liście ośmiu praw. */
.wyrozniony {
  background: var(--biel); border-left: 3px solid var(--terakota);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem; margin: 1.2rem 0; font-size: .92rem;
}
/* Tylko PIERWSZY <strong> jest etykietą bloku. Bez :first-child każde
   pogrubienie w środku zdania zamieniało się w wersalikowy nagłówek. */
.wyrozniony > strong:first-child { display: block; color: var(--terakota-d); margin-bottom: .3rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }

.wroc { display: inline-flex; align-items: center; gap: .4rem; margin-top: 2rem; font-weight: 500; text-decoration: none; }

/* --- Stopka --------------------------------------------------------------- */
.stopka { background: var(--grafit); color: var(--krem); padding-block: clamp(40px, 5vw, 60px); font-size: .92rem; }
.stopka a { color: var(--krem); }
.stopka a:hover { color: var(--dab); }
.stopka__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.stopka h3 { font-size: 1rem; color: var(--krem); }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { padding: .22rem 0; }
.stopka__dol { border-top: 1px solid rgba(244, 239, 231, .18); margin-top: 2.2rem; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; color: rgba(244, 239, 231, .72); font-size: .85rem; }

/* --- Opinie -----------------------------------------------------------------
   Jedna domyka opis sposobu pracy, druga stoi w #oferta między notą a wezwaniem.
   Wizualnie cicha — ten sam rejestr co .wyrozniony (belka terakoty na lekkim
   tle), bez gwiazdek, bez awatara, bez cudzysłowów-ozdobników. Na stronie
   o zdrowiu psychicznym oprawa rodem z e-commerce obniża wiarygodność. */
.opinia {
  margin: 2.5rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--terakota);
  background: rgba(51, 48, 43, .035);
  border-radius: 4px;
}
.opinia blockquote { margin: 0; }
/* Cudzysłowy polskie („ … ”) dokładane przez CSS, NIE wpisane w treść — tekst
   w HTML zostaje dosłownym oryginałem opinii, a kopiowanie go nie zabiera
   naszej interpunkcji. text-indent wiesza otwierający cudzysłów w marginesie,
   żeby lewa krawędź akapitu została prosta. */
.opinia blockquote p { margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; }
.opinia blockquote p + p { margin-top: .85rem; }
/* Cudzysłów i wysunięcie WYŁĄCZNIE na skrajnych akapitach. Reguła na każdym
   `p` dawała przy cytacie wieloakapitowym osobną parę cudzysłowów wokół
   każdego akapitu i wieszała każdy z nich w marginesie. Cytat jednoakapitowy
   zachowuje się dokładnie jak wcześniej — first-of-type i last-of-type to
   wtedy ten sam element. */
.opinia blockquote p:first-of-type { text-indent: -.42em; }
.opinia blockquote p:first-of-type::before { content: "\201E"; }
.opinia blockquote p:last-of-type::after { content: "\201D"; }
.opinia figcaption { margin-top: .85rem; font-size: .88rem; font-weight: 500; color: var(--grafit); }
/* Informacja o zgodzie nie jest ozdobnikiem — przy publikowaniu opinii
   obowiązuje informacja o tym, czy i jak weryfikowana jest ich autentyczność. */
.opinia figcaption span { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
@media (max-width: 780px) {
  .opinia { padding: 1rem 1.15rem; margin: 2rem 0; }
  .opinia blockquote p { font-size: 1rem; }
}

/* --- Pasek akcji (tylko mobile) -------------------------------------------
   Kontakt z dowolnej głębokości scrolla — sesje z sitelinków wchodzą w środek
   strony i nigdy nie widzą nagłówka. Stonowany celowo: cała strona jest
   wizualnie cicha, jaskrawy stały pasek na stronie o zdrowiu psychicznym
   czytałby się jako nacisk. Bez animacji wejścia. Chowaniem przy formularzu,
   sekcji kryzysowej i stopce steruje main.js (atrybut hidden). */
.pasek-akcji { display: none; }

@media (max-width: 900px) {
  .pasek-akcji {
    display: flex; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    /* env() jest konieczny: bez niego pasek ląduje pod paskiem Safari na
       iPhonie i zbiera przypadkowe dotknięcia. */
    padding: .6rem 20px calc(.6rem + env(safe-area-inset-bottom));
    background: var(--krem);
    border-top: 1px solid rgba(51, 48, 43, .12);
  }
  /* Wyższa specyficzność niż reguła wyżej — inaczej display:flex wygrywa. */
  .pasek-akcji[hidden] { display: none; }
  .pasek-akcji .btn { flex: 1; min-height: 44px; justify-content: center; }
  /* Żeby pasek nie przykrywał końca treści na stronach, gdzie występuje. */
  body:has(#pasek-akcji) { padding-bottom: 76px; }
}