/* ==========================================================================
   Tipptopp — tokens (source of truth: DESIGN.md)
   ========================================================================== */

:root {
  --yellow: #e9c243;
  --yellow-deep: #cea52c;
  --yellow-tint: #f7e7b4;
  --red: #cc262f;
  --red-deep: #a81d25;
  --black: #111111;
  --black-soft: #3d3833;
  --cream: #fdf4e0;
  --white: #ffffff;

  --font-display: Anton, 'Arial Narrow', Impact, sans-serif;
  --font-body: Karla, 'Segoe UI', system-ui, sans-serif;

  --radius-card: 24px;
  --radius-panel: 40px;
  --radius-pill: 999px;

  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  --measure: 62ch;
  --container: 1180px;

  --shadow-rest: 0 6px 20px rgba(17, 17, 17, 0.07);
  --shadow-lift: 0 14px 32px rgba(17, 17, 17, 0.13);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, blockquote, figure, address { margin: 0; }
button { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--black);
  background: var(--cream);
}

h1, h2, h3, .footer__headline {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  /* 1.18, nie 1. Zmierzone metryki Antona: wersalik sięga 0,86em nad baseline,
     a ogonek „Ę"/„Ą" schodzi 0,305em pod niego. Przy leadingu 1 ogonek z jednej
     linii wchodził w literę następnej o 0,165em (przy 88px to 14px zachodzenia
     — „SIĘ" nad „GDZIE" w hero). 0,305 + 0,86 = 1,165 to próg zerowego styku,
     1.18 zostawia ~1,5px luzu. Anton nie ma leadingu na polskie diakrytyki
     i tego nie da się obejść inaczej niż odstępem. */
  line-height: 1.18;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.75rem, 8vw, 5.5rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.25rem); }
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  font-size: 1.1875rem;
  line-height: 1.25;
}

p { max-width: var(--measure); }

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 960px) {
  .wrap { padding-inline: 48px; }
}

.center { text-align: center; }
.center p { margin-inline: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .footer :focus-visible { outline-color: var(--yellow); }

.hl { color: var(--yellow); }

/* ==========================================================================
   Buttons / tags / links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  padding: 17px 32px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
              transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--yellow:hover { background: var(--yellow-deep); box-shadow: var(--shadow-lift); }

.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-deep); box-shadow: var(--shadow-lift); }

.btn--outline { background: transparent; border-color: currentColor; color: var(--cream); }
.btn--outline:hover { background: rgba(253, 244, 224, 0.14); }

/* Wariant do banera cookies i bramki mapy — miejsca użytkowe, gdzie pełnowymiarowy
   CTA przytłaczałby treść, dla której się pojawił. Wysokość zostaje powyżej 44px
   razem z paddingiem, więc cel dotykowy się nie psuje. */
.btn--small { font-size: 0.9375rem; padding: 11px 22px; }

.badge {
  display: inline-flex;
  align-items: center;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-lg);
}

.tag {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-md);
}
.tag--yellow { background: var(--yellow); color: var(--black); }
.tag--red { background: var(--red); color: var(--white); }
.tag--plain { background: var(--cream); color: var(--black-soft); }

.text-link {
  display: inline-block;
  font-weight: 700;
  color: var(--red);
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
  transition: opacity 0.2s var(--ease-out);
}
.text-link:hover { opacity: 0.7; }

/* Gwiazdki i separatory biorą kolor z tekstu, zamiast mieć własny żółty.
   Dzięki temu na każdym tle (czerń hero, biel kart) siedzą w tym samym kolorze
   co sąsiadujący tekst i nie tworzą trzeciego koloru. */
.stars { color: currentColor; letter-spacing: 2px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: 12px 12px 0;
  position: relative;
}

.hero__panel {
  position: relative;
  background: var(--black);
  color: var(--cream);
  /* Dolne rogi PROSTE, nie 40px. Falbanka ma 46px wysokości, z czego lita masa
     to dolne 23px — a łuk zaokrąglenia 40px sięgał 17px wyżej niż ta masa, więc
     w obu dolnych narożnikach zostawał czarny sierp wystający zza falbanki
     („włosek" na krawędzi). Zaokrąglenia i tak nie widać: dolny pas panelu jest
     w całości przykryty kremową falbanką, która leży na kremowym tle strony —
     to ona rysuje dolną krawędź hero, nie border-radius panelu. */
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  padding: var(--space-lg) 20px calc(var(--space-xl) + 40px);
  overflow: hidden;
}

@media (min-width: 960px) {
  .hero { padding: 16px 16px 0; }
  .hero__panel { padding: var(--space-lg) 48px calc(var(--space-xl) + 56px); }
}

/* --- nav --- */

.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.nav__logo {
  display: block;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}
.nav__logo:hover { transform: rotate(-3deg) scale(1.04); }
.nav__logo img { height: 56px; width: auto; }

@media (min-width: 900px) {
  .nav__logo img { height: 68px; }
}

.nav__side {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Below the split-nav breakpoint only the phone stays; the anchors would
   crowd the logo and every section is reachable by scrolling anyway. */
.nav__side a:not(.nav__phone) { display: none; }
.nav__side--left { display: none; }

.nav__side a {
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: #ddd6c8;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.nav__side a:not(.nav__phone):hover { background: rgba(253, 244, 224, 0.12); color: var(--cream); }

.nav__phone {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--cream);
  border: 2px solid var(--yellow);
  padding: 8px 18px;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.nav__phone:hover { background: var(--yellow); color: var(--black); }

@media (min-width: 900px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }
  .nav__side { flex: 1 1 0; flex-wrap: nowrap; }
  .nav__side--left { display: flex; justify-content: flex-end; }
  .nav__side--right { justify-content: flex-start; }
  .nav__side a:not(.nav__phone) { display: inline-block; }
}

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

.hero__content {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.hero h1 { color: var(--cream); margin-bottom: var(--space-md); }

.hero__lead {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.125rem, 2.4vw, 1.75rem);
  color: var(--yellow);
  margin: 0 auto var(--space-lg);
  letter-spacing: 0.01em;
}

.hero__sub {
  color: #d6cfc1;
  font-size: 1.0625rem;
  max-width: 54ch;
  margin: 0 auto var(--space-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #d6cfc1;
  font-size: 0.9375rem;
  margin-inline: auto;
}

/* --- scalloped bottom edge --- */

.hero__scallop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  /* SVG jest skalowany przez `slice`, więc powyżej ~2300px łuk robi się wyższy
     niż 46px i dolina wypadała POD dolną krawędzią — między łukami zostawał
     czarny pasek panelu. Dolina siedzi na 2vw, więc tyle musi mieć minimum;
     poniżej 2300px `max()` zwraca dotychczasowe 46px. */
  height: max(46px, 2vw);
  fill: var(--cream);
}

/* --- stamps: a scattered row of perforated cards over the hero edge --- */

.stamps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: -44px;
  position: relative;
  z-index: 2;
  padding-inline: 16px;
  /* drop-shadow, not box-shadow: the perforation mask on each stamp would clip
     a box-shadow away. filter runs before mask on the same element, so it has
     to sit on the parent, where it sees the already-masked alpha. */
  filter: drop-shadow(0 5px 10px rgba(17, 17, 17, 0.22));
}

.stamp {
  --w: 132px;

  /* Trzy wielkości wyprowadzone z szerokości znaczka, żeby skalowały się razem
     z nim i trzymały stałe proporcje na każdym ekranie.

     ŻELAZNA ZASADA: --perf MUSI być wyraźnie mniejsze niż --bord.
     Wycięcie perforacji ma środek NA krawędzi, więc sięga `--perf` w głąb
     znaczka. Gdy było odwrotnie (perf 8px przy ramce 7px, a w portrecie 9px),
     każdy ząbek wygryzał się głębiej niż biała ramka i na jego dnie odsłaniało
     się kolorowe tło — ramka wyglądała, jakby kolor z niej wyciekał. Zapas
     (--bord − --perf) musi też pokryć antyaliasing łuku, stąd 0,025×--w. */
  --bord: calc(var(--w) * 0.075);  /* biała ramka znaczka */
  --perf: calc(var(--w) * 0.05);   /* promień wycięcia — zawsze < --bord */

  /* Perforacja z CZTERECH stron, jak w prawdziwym znaczku — wcześniej ząbki
     były tylko u góry i u dołu, a boki zostawały gładkie.

     Rozstaw w procentach, nie w px: znaczek ma proporcje 4/5, więc 7 ząbków
     w poziomie i 9 w pionie dzieli obie krawędzie BEZ RESZTY. Przy stałym
     rozstawie ostatni ząbek przy każdej krawędzi wypadał ucięty i rząd
     wyglądał na niedbały. 2×--perf (0,1×--w) mieści się z zapasem w ząbku
     (0,143×--w), więc sąsiednie okręgi się nie stykają — styczne dają
     artefakty antyaliasingu w punkcie styku.

     Środek to nadal JEDEN ciągły prostokąt, bez kafelkowania: dwie połówki po
     50% zostawiały włosową szczelinę przez całą karteczkę. Pasy krawędziowe
     mają `--perf + 1px`, więc zachodzą na środek o 1px i nie ma szwu. */
  --stamp-mask:
    radial-gradient(circle var(--perf) at 50% 0, #0000 97%, #000 100%)
      0 0 / calc(100% / 7) calc(var(--perf) + 1px) repeat-x,
    radial-gradient(circle var(--perf) at 50% 100%, #0000 97%, #000 100%)
      0 100% / calc(100% / 7) calc(var(--perf) + 1px) repeat-x,
    radial-gradient(circle var(--perf) at 0 50%, #0000 97%, #000 100%)
      0 0 / calc(var(--perf) + 1px) calc(100% / 9) repeat-y,
    radial-gradient(circle var(--perf) at 100% 50%, #0000 97%, #000 100%)
      100% 0 / calc(var(--perf) + 1px) calc(100% / 9) repeat-y,
    linear-gradient(#000, #000)
      50% 50% / calc(100% - var(--perf) * 2) calc(100% - var(--perf) * 2) no-repeat;

  width: var(--w);
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  /* Treść musi mieć oddech od białej ramki i od ząbków perforacji — przy
     12px/8px podpisy dobijały praktycznie do krawędzi znaczka. Liczone z `--w`,
     żeby skalowało się razem ze znaczkiem i na telefonie nie zjadało pola treści
     małej karteczki. Nie procentami: procentowy padding odnosi się do szerokości
     RODZICA (całego rzędu), więc na desktopie dawał ponad 130px. */
  padding: calc(var(--w) * 0.12) calc(var(--w) * 0.1);
  /* Papierowy margines znaczka. Bez niego czarne karteczki znikały
     na czarnym panelu hero, na który nachodzą. Tło przycięte do padding-box,
     żeby kolor w ogóle nie wchodził pod ramkę — inaczej na krawędzi ząbka
     antyaliasing miesza kolor z bielą i ramka wygląda na brudną. */
  border: var(--bord) solid var(--white);
  background-clip: padding-box;
  transition: transform 0.3s var(--ease-out);
  mask: var(--stamp-mask);
  -webkit-mask: var(--stamp-mask);
}

/* Flag colours (black / red / gold), in the brand's own tones rather than the
   literal flag hex, so the row stays consistent with the rest of the page. */
/* `background-color`, nie skrót `background` — skrót resetowałby ustawione
   wyżej `background-clip: padding-box` z powrotem na border-box i kolor znów
   wchodziłby pod białą ramkę. */
.stamp--black { background-color: var(--black);  color: var(--yellow); }
.stamp--red   { background-color: var(--red);    color: var(--cream); }
.stamp--gold  { background-color: var(--yellow); color: var(--black); }

/* rotations — deliberately uneven so the row reads as scattered, not tiled */
.stamp--r0   { transform: rotate(6deg); }
.stamp--r1   { transform: rotate(-8deg); }
.stamp--r2   { transform: rotate(5deg); }
.stamp--r3   { transform: rotate(7deg); }
.stamp--r4   { transform: rotate(-5deg); }
.stamp--r5   { transform: rotate(-7deg); }

.stamp:hover { transform: rotate(0deg) scale(1.06); }

/* Znaczek z portretem (`.stamp--lead` + `.stamp__photo`) zdjęty 12 sierpnia 2026
   — zdjęcie Haliny zostaje tylko przy „O mnie". Rząd jest od tej pory parzysty
   i w całości dekoracyjny. Gdyby portret miał wrócić: był o połowę większy od
   reszty (`--w: 178px`, w media query 200px i min(30vw, 142px)), obrócony
   o -3°, a samo zdjęcie musiało mieć `height: auto` i `aspect-ratio: 1/1` —
   pole treści znaczka nie mieści kadru 4:5, a bez `height: auto` atrybut
   `height` z HTML-a wyłącza `aspect-ratio` i karteczka robi się słupkiem. */

.stamp__glyph {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.95;
}
/* Trójwierszowe glify były o połowę mniejsze od „ß" obok i rząd czytał się
   jak zestaw dwóch różnych rzeczy: jednej dużej i kilku drobnych.

   Rozmiar liczony z `--w`, nie w `rem`: te dwa znaczki mają TRZY wiersze, więc
   jako jedyne mogą przerosnąć pole treści. Stała wartość w rem trzymała się
   na desktopie, ale przy `--w: min(22vw, 108px)` z media query trzy wiersze
   wychodziły poza padding na ząbki perforacji.
   Wyprowadzenie: pole treści ma wysokość --w × (1,25 − 2×0,075 − 2×0,12)
   = 0,86×--w, a trzy wiersze zajmują 3 × fs × line-height. Przy 0,2×--w
   i leadingu 1,3 daje to 0,78×--w — mieści się z zapasem przy KAŻDYM --w.

   Leading 1,3, nie 1,1: w Antonie kropki umlautu sięgają wyżej niż wersalik,
   więc przy 1,1 kropki „Ö" dobijały do dolnej krawędzi „Ä" nad nim i litery
   czytały się jak sklejone. 1,3 zostawia między nimi wyraźną przerwę. */
.stamp__glyph--umlaut,
.stamp__glyph--articles {
  font-size: calc(var(--w) * 0.2);
  line-height: 1.3;
}
.stamp__glyph--articles { text-transform: lowercase; }
.stamp__glyph--small {
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* No opacity fade here: at 0.75 the cream caption drops to 3.3:1 on the red
   stamps. Size and letter-spacing already mark it as secondary. */
.stamp__caption {
  font-family: var(--font-body);
  font-weight: 700;
  /* 0.5625rem to było 9px — poniżej progu, przy którym wersaliki z odstępem
     dają się przeczytać bez wysiłku. Podpis może się teraz łamać na dwa
     wiersze („BRANDENBURGER TOR" przestaje mieścić się w jednym) i to jest
     świadoma zamiana: dwa czytelne wiersze biją jeden nieczytelny. Stąd też
     mniejszy letter-spacing — przy 11px nie jest już potrzebny do rozdzielenia
     liter, a zjadał szerokość. */
  font-size: 0.6875rem;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Rozmiar liczony z `--w`, nie w stałych px: przy `--w: min(22vw, 108px)`
   z media query stała szerokość wychodziła poza pole treści znaczka.
   Trzy warianty, bo trzy budowle mają różne proporcje — a wyrównywać trzeba
   ich MASĘ OPTYCZNĄ, nie liczbę pikseli. Wspólna `width` dawała katedrę dwa
   razy wyższą od zamku, bo zamek jest szeroki i niski, a katedra odwrotnie. */
.stamp__icon {
  width: calc(var(--w) * 0.57);
  height: auto;
  fill: currentColor;
}
/* Zamek: 134×82, najszerszy z trójki. */
.stamp__icon--wide { width: calc(var(--w) * 0.62); }
/* Katedra: 92×104, jedyna wyższa niż szersza — skalowana wysokością. */
.stamp__icon--tall { width: auto; height: calc(var(--w) * 0.53); }

/* Two symbol cards are decoration; on small screens they cost more than they
   add, so the row keeps the portrait plus one symbol on each side. */
/* Rząd MUSI zostać jednym rzędem. `flex-wrap` zrzucał nadmiarowe znaczki do
   drugiego rzędu i rozsypany rząd czytał się wtedy jak przypadkowa kolumna,
   a lustrzana symetria kolorów flagi znikała. Pięć znaczków przy 132/178px
   potrzebuje 864px razem z odstępami i paddingiem — poniżej tego progu zostają
   trzy (czerwony · zdjęcie · czerwony), czyli symetria bez dwóch skrajnych. */
/* Rząd ODEJMUJE znaczki schodząc w dół, zawsze parami — pojedyncze zniknięcie
   psuje lustro kolorów. Siedem sztuk przy 148/200px i odstępie 20px potrzebuje
   1208px plus padding, więc pełny komplet pokazujemy dopiero od 1280px.
   Poniżej wracamy do piątki, którą rząd nosił wcześniej. */
@media (max-width: 1279px) {
  .stamp--r0, .stamp--r5 { display: none; }
}

/* Do 12 sierpnia 2026 stał tu drugi próg (`max-width: 880px`), który chował
   parę `r1`/`r4`. Zniknął razem ze znaczkiem-portretem i to nie jest
   uproszczenie „bo ładniej":

   1. Portret miał 178px, więc piątka znaczków wymagała ok. 800px i poniżej
      880px faktycznie się nie mieściła. Bez niego czwórka schodzi znacznie
      niżej (zmierzone wartości niżej).
   2. Ważniejsze: rząd jest lustrem kolorów flagi (złoty, czarny, czerwony |
      czerwony, czarny, złoty), a portret był w nim jedynym złotym poniżej
      1280px. Po jego zdjęciu ukrycie pary `r1`/`r4` zostawiało DWA CZERWONE
      znaczki i cały rząd tracił kolor (sprawdzone w przeglądarce).

   Dlatego zamiast chować kolejną parę, próg zwężania przesunął się z 560px na
   700px — czwórka w stałych 132px potrzebuje 671px (zmierzone; obrót poszerza
   bounding box, więc suma jest większa niż 4×132), a po zwężeniu do 108px
   mieści się w 528px. */
@media (max-width: 700px) {
  .stamp { --w: min(22vw, 108px); }
  .stamps { margin-top: -48px; gap: 8px; padding-inline: 8px; }
  /* W zwężonym znaczku „BRANDENBURGER" (93px) nie mieści się w polu treści
     (56px) i maska perforacji ucinała mu oba końce. Ikona niesie sens sama,
     a rząd jest `aria-hidden`, więc podpisy gasną tu wszystkie. (Do 12 sierpnia
     2026 wyjątkiem był znaczek ze zdjęciem — zniknął razem z portretem.) */
  .stamp__caption { display: none; }
}

/* Ostatni próg: na telefonie czwórka nie zmieści się NIGDY, bo przy
   `--w: 22vw` same znaczki zajmują 88vw, a dochodzą jeszcze przerwy, padding
   i poszerzenie z obrotu — przy 390px czwórka potrzebuje 428px, czyli więcej
   niż jest ekranu, i rząd łamał się na dwie linie. Trójka potrzebuje 325px.

   Znika tu POJEDYNCZY znaczek, nie para — wbrew regule z reszty rzędu i to
   celowo: rząd jest lustrem kolorów, więc zdjęcie pary zawsze zostawia dwa
   znaczki tego samego koloru (czerwony + czerwony). Ukrycie samego `r2` daje
   czarny-czerwony-czarny, czyli lustro i dwa kolory. Zostaje przy tym Brama
   Brandenburska — jedyny landmark, jaki na tej szerokości przetrwał. */
@media (max-width: 560px) {
  .stamp--r2 { display: none; }
}

@media (min-width: 1000px) {
  .stamps { gap: 20px; }
  .stamp { --w: 148px; }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding-block: var(--space-xl); }

/* Dwie sekcje czytane jako jeden blok, domknięte wspólnym CTA („Jak zacząć"
   + „Wycena"). Bez tego między nimi stoją dwa pełne paddingi i para rozjeżdża
   się na dwie osobne myśli — a to CTA na końcu drugiej odpowiada na obie. */
.section--pair { padding-bottom: 0; }
/* `.steps` odsuwa się od dołu na wysokość skasowanego już przycisku — razem
   z paddingiem następnej sekcji dawało to podwójną przerwę w środku pary. */
.section--pair .steps { margin-bottom: 0; }

.section__title {
  text-align: center;
  margin-bottom: var(--space-lg);
}
/* Jedyny nagłówek sekcji łamany na dwa wiersze — i jedyny, w którym ogonek
   spotyka się z literą z wiersza niżej. Systemowe 1.18 jest ledwie nad progiem
   zerowego styku (0,86em wersalika + 0,305em ogonka = 1,165em), więc „Ę" z „UCZĘ"
   dotykało „I" w „CHCIAŁABYM". 1.26 daje ~5px prześwitu przy 52px.
   Podziału wiersza tu nie ruszać — patrz komentarz przy tym nagłówku w HTML-u. */
.section__title--left { text-align: left; line-height: 1.26; }

/* Sekcja z samym tekstem (Wycena) — bez tego wiersz rozciąga się na całą
   szerokość kontenera i robi się nieczytelny na desktopie. */
.wrap.narrow {
  max-width: 68ch;
}
.wrap.narrow p + p { margin-top: var(--space-md); }
.wrap.narrow .center { margin-top: var(--space-lg); }

/* --- shared card --- */

.card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: var(--shadow-rest);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--black-soft); }

/* ==========================================================================
   Skróty do sekcji (tylko mobile)
   ========================================================================== */

/* Jedyny w tym pliku pasek przewijany w poziomie. `scroll-snap` na chipach,
   bo bez niego kciuk zostawia pasek w połowie chipa i wygląda to na przypadek.
   Maski gradientowej na krawędziach NIE MA celowo: pasek ma 7 pozycji, więc
   zawsze widać, że coś wychodzi za kadr, a maska na kremowym gruncie robi
   brudną smugę zamiast sugestii przewijania. */
.chips {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: var(--space-md) 20px;
  /* pasek przewijania schowany: jest krótki, a widoczny „wyskakuje" i przesuwa
     treść w Chrome na Androidzie */
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chips a {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: var(--white);
  color: var(--black);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-rest);
  /* Cel dotykowy: 44px to norma (WCAG 2.5.5 / iOS HIG), a sam padding dawał 43 —
     jeden piksel poniżej. Wymuszamy wysokość zamiast dokładać padding, żeby próg
     nie zależał od rozmiaru fontu; centrowanie, bo bez niego tekst siada u góry. */
  min-height: 44px;
  display: flex;
  align-items: center;
}
.chips a:active { background: var(--yellow-tint); }

/* Powyżej 760px linki w hero działają, więc pasek jest zbędnym powtórzeniem. */
@media (min-width: 760px) {
  .chips { display: none; }
}

/* ==========================================================================
   Dla kogo
   ========================================================================== */

.who {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 860px) {
  .who { grid-template-columns: 1fr 1fr; }
  .who__item--small { grid-column: 1 / -1; }
}

.who__item--small { background: var(--yellow-tint); box-shadow: none; }

/* Cytat wyciągnięty przed sekcję opinii. Świadomie NIE jest kartą: karta
   dołożona pod trzema kartami czytałaby się jak czwarta kategoria „dla kogo".
   Zamiast tła i cienia dostaje skalę i czerwoną kreskę wiodącą — to głos
   w tekście, nie kolejny kafel.
   Kreska jest cienka (3px) i pionowa przy krawędzi: gruby kolorowy border-left
   na karcie jest maniera, ale przy cytacie pełni rolę znaku cytowania. */
.pull-quote {
  margin: var(--space-lg) 0 0;
  padding-left: var(--space-md);
  border-left: 3px solid var(--red);
  max-width: 58ch;
}
.pull-quote blockquote {
  margin: 0;
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--black);
}
.pull-quote figcaption {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--black-soft);
}
.pull-quote__link { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 860px) {
  /* Na szerokim ekranie cytat wchodzi pod prawą kolumnę kart, żeby nie zostawiać
     pustego pasa po lewej pod kaflem dla dzieci. */
  .pull-quote { margin-left: auto; }
}

/* ==========================================================================
   O mnie (split)
   ========================================================================== */

.split {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.split__text p { margin-bottom: var(--space-md); color: var(--black-soft); }
.split__text .btn { margin-top: var(--space-sm); }
.split__text .section__title { margin-bottom: var(--space-lg); }

.zigzag-panel {
  /* ten sam układ trzech warstw co w .stamp, obrócony na pionowe krawędzie */
  --perf: 13px;
  --tile: 30px;
  --panel-mask:
    radial-gradient(circle var(--perf) at 0 50%, #0000 97%, #000 100%)
      0 0 / calc(var(--perf) + 1px) var(--tile) repeat-y,
    radial-gradient(circle var(--perf) at 100% 50%, #0000 97%, #000 100%)
      100% 0 / calc(var(--perf) + 1px) var(--tile) repeat-y,
    linear-gradient(#000, #000)
      50% 50% / calc(100% - var(--perf) * 2) 100% no-repeat;

  background: var(--yellow);
  color: var(--black);
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  mask: var(--panel-mask);
  -webkit-mask: var(--panel-mask);
}
/* Wariant ze zdjęciem: panel przestaje być polem tekstowym i staje się samą
   wycinankową ramką. Padding i żółte tło muszą zejść, inaczej zdjęcie pływa
   w żółtej obwódce; `aspect-ratio` przechodzi na 4/5, bo taki jest kadr
   oryginału (pusty panel zostaje poziomy 5/4 — to dwie różne role). */
.zigzag-panel--photo {
  aspect-ratio: 4 / 5;
  padding: 0;
  background: none;
}
.zigzag-panel--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* W sekcji „O mnie" jest JEDNO zdjęcie. Przez chwilę 12 sierpnia 2026 stała pod
   nim druga, mniejsza odbitka (`.about-media__print`) nachodząca na lewy dolny
   róg panelu — zdjęta decyzją właścicielki. Gdyby miała wrócić: pozycjonowana
   absolutnie względem `.split__media` z `position: relative`, kwadrat 38%
   szerokości, biała ramka, `rotate(-5deg)` i `box-shadow` (bez perforacji —
   dwa wycinankowe elementy jeden na drugim zlewają się w poszarpaną plamę),
   a poniżej 700px musiała wchodzić do środka panelu, bo przy 390px stawała
   5px od krawędzi ekranu i czytała się jak ucięta. */

.zigzag-panel small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  margin-top: 6px;
}

@media (min-width: 860px) {
  .split { flex-direction: row; align-items: center; gap: var(--space-xl); }
  .split__text { flex: 1 1 52%; }
  .split__media { flex: 1 1 48%; min-width: 0; }
}

/* --- pasek zaufania (trzy liczby pod „O mnie") --- */

.facts {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  list-style: none;
}

.facts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.facts__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  line-height: 1;
  /* Czerń, nie żółć: żółty marki na kremowym gruncie daje ok. 1,7:1. */
  color: var(--black);
}

.facts__label {
  font-size: 0.9375rem;
  color: var(--black-soft);
  max-width: 22ch;
}

@media (min-width: 700px) {
  .facts { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}

/* ==========================================================================
   Oferta
   ========================================================================== */

.card--levels {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
  background: var(--black);
  color: var(--cream);
}
.card--levels h3 { color: var(--cream); }
.card--levels p { color: #d6cfc1; }

@media (min-width: 780px) {
  .card--levels { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-xl); }
  .card--levels__text { max-width: 42ch; }
}

.level-meter {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 130px;
  width: 100%;
  max-width: 300px;
  flex-shrink: 0;
}

.level-meter__bar {
  flex: 1;
  height: var(--h);
  min-height: 40px;
  background: var(--yellow);
  border-radius: var(--radius-pill) var(--radius-pill) 8px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 9px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--black);
}

.offer-grid {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 700px) { .offer-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Dlaczego Tipptopp
   ========================================================================== */

.why {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.why__burst {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  flex-shrink: 0;
}

.burst {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--yellow) 0deg 7deg, #0000 7deg 14deg);
  animation: burst-spin 90s linear infinite;
}

@keyframes burst-spin {
  to { transform: rotate(360deg); }
}

.why__stat {
  position: relative;
  background: var(--red);
  color: var(--white);
  width: 152px;
  height: 152px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}
.why__stat strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1;
}
.why__stat span { font-size: 0.8125rem; line-height: 1.25; }

.why__list {
  display: grid;
  gap: var(--space-md);
}

.why__item {
  background: var(--yellow-tint);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}

/* PROTOTYP — umlaut jako punktor.
   Dwie kropki rysowane gradientem, nie glif „¨" z fontu: Karla stawia diarezę
   wysoko nad linią pisma i z własnym, nierównym światłem po bokach, więc
   z tekstem sąsiadującym nigdy nie trafiała w jedną linię. Rysowane kropki
   mają stałą średnicę i rozstaw liczony od rozmiaru tekstu.
   Kolor `--red`, bo to jedyny akcent, który na `--yellow-tint` daje kontrast
   (żółć na żółci znika, czerń czytałaby się jak kolejny znak interpunkcyjny). */
/* Punktor WISZĄCY: siedzi w paddingu karty (32px), a nie w kolumnie tekstu.
   Wersja z `padding-left` zabierała nagłówkom 30px szerokości i dwa z czterech
   zawijały się na drugą linię — przy czterech kartach w siatce 2×2 psuło to
   wyrównanie wierszy. Tekst zostaje tam, gdzie był; zmienia się tylko to,
   co jest po jego lewej. */
.why__item h3 {
  position: relative;
  margin-bottom: 6px;
}
.why__item h3::before {
  content: "";
  position: absolute;
  left: -26px;
  /* 0.42em od góry wiersza trafia mniej więcej w połowę wysokości wersalika
     przy line-height 1.25 — kropki mają siedzieć w optycznej osi pierwszej
     linii, a nie na jej górnej krawędzi. */
  top: 0.42em;
  width: 20px;
  height: 6px;
  background:
    radial-gradient(circle at 3px 3px, var(--red) 2.5px, transparent 3px),
    radial-gradient(circle at 17px 3px, var(--red) 2.5px, transparent 3px);
}
.why__item p { color: var(--black-soft); }

@media (min-width: 900px) {
  .why { flex-direction: row; align-items: flex-start; gap: var(--space-xl); }
  .why__burst { position: sticky; top: 32px; width: 260px; }
  .why__list { flex: 1; grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Szybki test
   ========================================================================== */

.quiz__lead {
  color: var(--black-soft);
  max-width: 60ch;
  margin-bottom: var(--space-lg);
}

.quiz { padding: var(--space-lg) var(--space-md); }

.quiz__list {
  display: grid;
  gap: var(--space-lg);
  counter-reset: none;   /* numery są w treści (`.quiz__num`), nie z licznika */
}

.quiz__q fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Zdanie z luką jest tu TREŚCIĄ pytania, więc idzie w `<legend>`. Karla, nie
   Anton: to tekst czytany, a Anton jest zarezerwowany dla nagłówków. */
.quiz__q legend {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--black);
  margin-bottom: var(--space-sm);
  line-height: 1.45;
}
.quiz__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--black);
  font-size: 0.875rem;
}

/* Odpowiedzi jako pigułki: własny radio jest tu zbędny, ale MUSI zostać
   w drzewie (nie `display: none`), żeby działała klawiatura i czytnik ekranu.
   Dlatego jest przezroczysty i rozciągnięty na całą pigułkę — klik w etykietę
   to klik w kontrolkę, a fokus rysuje się na pigułce przez `:has()`. */
.quiz__q label {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 8px 8px 0;
  border-radius: var(--radius-pill);
  background: var(--cream);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-out);
}
.quiz__q label span {
  padding: 11px 18px;
  font-size: 1rem;
  color: var(--black);
}
.quiz__q input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.quiz__q label:hover { background: var(--yellow-tint); }
.quiz__q label:has(input:checked) { background: var(--yellow); }

/* Ocena po kliknięciu „Pokaż wynik".

   Specyficzność: `:has(input:checked)` wyżej liczy się jako (0,2,2), więc samo
   `label.is-wrong` (0,2,1) przegrałoby z żółtym tłem zaznaczenia. Stąd `:has()`
   powtórzone w selektorze błędu — (0,3,2) wygrywa.

   Poprawna odpowiedź dostaje obwódkę, a nie inny kolor: w palecie nie ma zieleni,
   a dokładanie jej pod jeden stan zepsułoby system. Obwódka `inset` zamiast
   `outline`, żeby nie zderzać się z pierścieniem fokusu.

   Kolor nigdzie nie niesie informacji sam: przy każdym błędzie stoi „Poprawnie: …"
   zwykłym tekstem. */
.quiz__q label.is-wrong:has(input:checked) { background: var(--red); }
.quiz__q label.is-wrong span { color: var(--white); }   /* White-on-Red Rule */
.quiz__q label.is-correct { box-shadow: inset 0 0 0 2px var(--black); }

.quiz__fix {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: var(--black-soft);
}
.quiz__fix strong { color: var(--black); }
.quiz__q label:has(input:focus-visible) {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.quiz__foot { margin-top: var(--space-lg); }

/* Przycisk ma sens tylko z JS-em — bez niego zostaje zdanie z telefonem.
   Domyślnie więc odwrotnie niż zwykle: przycisk schowany, zdanie widoczne. */
.quiz__run { display: none; }
html.js .quiz__run { display: inline-flex; }
html.js .quiz__nojs { display: none; }
.quiz__nojs { color: var(--black-soft); font-size: 0.9375rem; }

.quiz__hint {
  margin-top: var(--space-sm);
  color: var(--black-soft);
  font-size: 0.9375rem;
}
.quiz__hint[hidden] { display: none; }

/* Licznik postępu. Treść wpisuje `main.js`, więc bez JS-a element jest pusty —
   `:empty` gasi go razem z marginesem, żeby nie zostawiał dziury w układzie. */
.quiz__progress {
  margin-top: var(--space-sm);
  color: var(--black-soft);
  font-size: 0.9375rem;
}
.quiz__progress:empty { display: none; }

/* Reset wygląda jak link, nie jak drugi przycisk: obok żółtego CTA „Umów darmowy
   test" dwa przyciski konkurowałyby o to samo kliknięcie, a to jest akcja
   drugorzędna. Cel dotykowy trzyma `padding` + `min-height`. */
.quiz__reset {
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--black-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.quiz__reset:hover { color: var(--black); }

/* Wynik: żółte tło z tokena paneli drugorzędnych, nie nowy kolor. */
.quiz__result {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background: var(--yellow-tint);
}
.quiz__result[hidden] { display: none; }
.quiz__result:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.quiz__score {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black-soft);
}
/* Jedyne miejsce w tej sekcji dla Antona: wynik jest tu nagłówkiem odpowiedzi,
   a nie tekstem czytanym. */
.quiz__level {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.1;
  margin: 4px 0 var(--space-sm);
  color: var(--black);
}
.quiz__desc { color: var(--black-soft); max-width: 56ch; }
.quiz__cta { margin-top: var(--space-md); }
.quiz__note {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--black-soft);
  max-width: 56ch;
}

@media (min-width: 700px) {
  .quiz { padding: var(--space-lg); }
  .quiz__result { padding: var(--space-lg); }
}

/* ==========================================================================
   Jak zacząć
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.steps li {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: var(--shadow-rest);
}

.steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--black-soft); }

@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Opinie
   ========================================================================== */

.reviews {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
@media (min-width: 820px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

/* Kolumnowy flex + `margin-top: auto` na podpisie: opinie mają różną długość,
   a bez tego podpisy wisiały na trzech różnych wysokościach. */
.review {
  display: flex;
  flex-direction: column;
}

.review .stars { display: block; margin-bottom: var(--space-md); }
.review cite {
  display: block;
  margin-top: auto;
  padding-top: var(--space-md);
  font-style: normal;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--black-soft);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--space-md);
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-rest);
}

.faq__item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.0625rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  /* Cel dotykowy 44px — jednowierszowe pytania dawały 40. Tu wystarczy
     `min-height`, bo pole jest już wyśrodkowanym flexem. */
  min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--red);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { color: var(--black-soft); margin-top: var(--space-md); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--black);
  color: var(--cream);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  padding-block: var(--space-xl) var(--space-lg);
  margin-top: var(--space-lg);
  text-align: center;
}

.footer__cta-label {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.footer__headline {
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  color: var(--cream);
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  max-width: none;
}

.footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.footer__cols {
  display: grid;
  gap: var(--space-lg);
  text-align: left;
  padding-block: var(--space-lg);
  border-top: 1px solid rgba(253, 244, 224, 0.16);
}
@media (min-width: 760px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }

.footer__col { display: flex; flex-direction: column; gap: 6px; }
.footer__col address { font-style: normal; color: #b8b1a4; }
.footer__col a { color: #ddd6c8; transition: color 0.2s var(--ease-out); }
.footer__col a:hover { color: var(--yellow); }

.footer__logo {
  width: 200px;
  height: auto;
  margin-bottom: var(--space-sm);
}

.footer__heading {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 4px;
}

/* Drugi nagłówek w tej samej kolumnie stopki potrzebuje odstępu od listy
   linków nad nim — inaczej „Dokumenty" czyta się jako kolejny link. */
.footer__heading--spaced { margin-top: var(--space-md); }

.footer__area {
  color: #b8b1a4;
  font-size: 0.875rem;
  margin-top: var(--space-sm);
  max-width: 34ch;
}

/* Dane identyfikujące usługodawcę (art. 5 u.ś.u.d.e.). Ciszej od `.footer__area`
   — to obowiązek informacyjny, nie treść sprzedażowa — ale nie ciszej niż
   `.footer__fineprint` (#8e877b), bo dane firmy muszą dać się przeczytać.
   #a49d90 na #111 daje ~7,3:1, czyli z zapasem powyżej AA. */
.footer__legal {
  color: #a49d90;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: var(--space-sm);
  max-width: 40ch;
}

/* Mapa Google. Stała wysokość, nie `aspect-ratio` — przy proporcji kontener
   kurczył się do wysokości narzuconej przez `max-height` i mapa przestawała
   trzymać szerokość kolumny. Radius kart, żeby nie odstawała od systemu. */
.map-embed {
  height: 300px;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  background: var(--black-soft);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Zasłona mapy do czasu zgody. Zdejmuje ją `main.js`, podmieniając całą
   zawartość `.map-embed` na <iframe>. */
.map-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: 100%;
  padding: var(--space-md);
  text-align: center;
}
.map-gate__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--cream);
}
/* #b8b0a2 na tle #2a2723 daje 5,3:1 — to informacja o cookies, nie podpis,
   więc kontrast musi zostać czytelny mimo drugorzędnej roli. */
.map-gate__note {
  max-width: 48ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #b8b0a2;
}
.map-gate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: 4px;
}

/* ==========================================================================
   Okienko kontaktowe
   ========================================================================== */

/* `<dialog>` rozciągnięty na CAŁY ekran, a kremowa karta siedzi w środku —
   i to nie jest ozdoba. Dialog wielkości samej karty nie dostaje zdarzenia
   `click` z kliknięcia obok siebie: `::backdrop` nie jest celem trafienia,
   a treść strony pod modalem jest `inert`. Zamykanie kliknięciem w tło
   działa dopiero, gdy tłem jest sam `<dialog>` (sprawdzone w przeglądarce:
   przy karcie 560px klik obok nie zamykał niczego).
   Skutek uboczny: `display` trzeba wieszać na `[open]`, bo `.contact { display }`
   nadpisałoby `dialog:not([open]) { display: none }` z arkusza przeglądarki
   i okienko wisiałoby na ekranie na stałe. */
.contact {
  width: 100%;
  max-width: none;
  /* `svh`, nie `vh`: na iOS pasek adresu wlicza się do `vh`, więc dolna część
     okienka (telefon i e-mail awaryjny) wychodziła poza ekran. */
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: var(--space-md);
  border: 0;
  background: transparent;
  color: var(--black-soft);
  overflow: auto;
}
.contact[open] {
  display: grid;
  place-items: center;
}
/* Domyślny backdrop jest za jasny na kremowej stronie — karta się w nim gubi. */
.contact::backdrop { background: rgba(17, 17, 17, 0.62); }

/* Karta: ten sam materiał co karty w treści (`.card`), a nie biel, żeby okienko
   nie wyglądało jak systemowy dialog wklejony w cudzy layout.
   `max-height: 100%` liczy się od wysokości dialogu POMNIEJSZONEJ o jego padding,
   więc karta rośnie do treści i dostaje własny pasek przewijania dopiero wtedy,
   gdy naprawdę nie ma miejsca (niski ekran, otwarta klawiatura). Sztywne `86svh`
   dawało pasek nawet na desktopie, gdzie miejsca było w nadmiarze. */
.contact__form {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

.contact__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.contact__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1;
  color: var(--black);
}

/* Krzyżyk: 44x44 px celu dotykowego przy 24-pikselowym znaku. Pozycjonowany
   ujemnym marginesem, żeby optycznie stał w narożniku karty, a nie odsuwał
   tytułu w dół. */
.contact__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -10px -4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--black-soft);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}
.contact__close:hover { background: rgba(17, 17, 17, 0.08); }

.contact__lead {
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 46ch;
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact__field label {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--black);
}
.contact__hint { font-weight: 400; color: var(--black-soft); }

/* Pola: biel na kremie daje im czytelną krawędź bez dorysowywania ramki
   w kolorze marki. `font-size: 1rem` (nie mniej) — poniżej 16px Safari na iOS
   sam przybliża stronę przy wejściu w pole i układ podskakuje. */
.contact__field input,
.contact__field select,
.contact__field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--black);
  background: var(--white);
  border: 2px solid rgba(17, 17, 17, 0.14);
  border-radius: 14px;
  padding: 12px 14px;
  width: 100%;
}
.contact__field textarea { resize: vertical; min-height: 96px; }
.contact__field input:focus-visible,
.contact__field select:focus-visible,
.contact__field textarea:focus-visible { outline-offset: 1px; }

.contact__send { width: 100%; }

/* Pułapka na boty. Chowamy JĄ SAMĄ, nie `type="hidden"` — boty pomijają pola
   ukryte typem, a wypełniają widoczne w kodzie. `position: absolute` + `left`
   poza ekranem zamiast `display: none`, bo część botów sprawdza wyliczony styl
   i pomija pola z `display: none`. Człowiek tego nie zobaczy ani nie doklika:
   pole jest poza kadrem, wyjęte z kolejności tabulacji i `aria-hidden`. */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Komunikat po wysłaniu. Bez zieleni — nie ma jej w palecie i nie dokładamy
   jej pod jeden stan (ta sama zasada co przy informacji zwrotnej w kwizie).
   Sukces niesie treść zdania, a nie kolor; błąd dostaje czerwień marki, bo ta
   w systemie już jest i znaczy „uwaga". */
.contact__status {
  margin-top: var(--space-sm);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 700;
}
.contact__status--blad { color: var(--red); }

.contact__consent {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--black-soft);
}

.contact__alt {
  font-size: 0.875rem;
  line-height: 1.7;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(17, 17, 17, 0.12);
}
.contact__alt-link {
  font-weight: 700;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Przycisk kopiowania udaje link, bo stoi w zdaniu — ale jest <button>, bo nie
   prowadzi pod żaden adres (ta sama zasada co `.footer__cookie-btn`). */
.contact__copy {
  background: none;
  border: 0;
  padding: 0;
  margin-left: var(--space-sm);
  font: inherit;
  color: var(--black-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact__copy[hidden] { display: none; }

@media (min-width: 560px) {
  .contact__form { padding: var(--space-lg); }
}

/* ==========================================================================
   Baner zgody na cookies
   ========================================================================== */

/* z-index 95: nad sticky CTA (90), pod nawigacją pominięcia (200). Baner ma
   przykryć sticky CTA na telefonie — dopóki decyzja nie zapadła, jest ważniejszy
   niż kolejny przycisk kontaktu, a oba naraz na dole ekranu się nie mieszczą. */

/* KRAWĘDŹ JEST OBOWIĄZKOWA, NIE OZDOBNA — ta sama zasada co przy znaczkach
   („Bez niej czarne karteczki znikały na czarnym panelu hero"). Baner ma tło
   `--black` i przy wejściu na stronę nachodzi na panel hero, który ma DOKŁADNIE
   ten sam kolor: zmierzone, oba `rgb(17,17,17)`, nachodzenie 43px przy wysokości
   okna 821px. Cień tego nie ratował, bo `--shadow-lift` jest czarny — na czerni
   nie istnieje. Efekt: baner czytał się jak dziura w panelu, widać było same
   przyciski. Kremowa krawędź daje mu kształt niezależny od podłoża, a mocniejszy,
   ciemniejszy cień pracuje dalej tam, gdzie baner stoi na kremowym gruncie.
   Nie zdejmuj krawędzi ani nie wracaj do `--shadow-lift`. */
.cookie {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 95;
  background: var(--black);
  color: var(--cream);
  border: 2px solid rgba(253, 244, 224, 0.32);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.45);
  padding: var(--space-md);
}
.cookie[hidden] { display: none; }

/* Wjazd od dołu — jedyna animacja poza reveal i marquee… którego już nie ma.
   Nie jest dekoracją: ruch mówi „to warstwa NAD stroną, nie jej fragment", co na
   czarnym hero robi połowę roboty za kolor. Klasę nakłada `main.js` przy każdym
   pokazaniu banera (także z „Ustawienia cookies"), żeby wjazd zagrał również przy
   powrocie do decyzji. Globalny blok `prefers-reduced-motion` w Resecie skraca to
   do zera, więc nie potrzeba tu osobnego wyjątku. */
.cookie.is-in { animation: cookie-in 420ms var(--ease-out) both; }

@keyframes cookie-in {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.cookie__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--container);
  margin-inline: auto;
}
.cookie__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.125rem;
  margin-bottom: 4px;
}
.cookie__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #cfc6b6;
  max-width: 78ch;
}
.cookie__text a { color: var(--yellow); text-decoration: underline; }

/* Oba przyciski w jednym rzędzie i o tej samej wadze — patrz komentarz w HTML.
   `flex-wrap`, bo „Akceptuję / Odrzucam" po polsku bywa dłuższe niż wąski ekran. */
.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.cookie__actions .btn { flex: 1 1 auto; }

@media (min-width: 760px) {
  .cookie__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }
  .cookie__actions { flex: 0 0 auto; }
  .cookie__actions .btn { flex: 0 0 auto; }
}

/* Telefon + „Skopiuj" w jednym wierszu. `tel:` na desktopie bywa martwy, a numer
   jest tu główną drogą kontaktu — kopiowanie ratuje tę ścieżkę. */
.footer__phone-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.footer__copy {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: #a49d90;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__copy[hidden] { display: none; }
/* Na telefonie `tel:` po prostu działa, więc przycisk jest tam zbędnym szumem
   obok numeru — i tak jest tam sticky CTA z tym samym telefonem. */
@media (max-width: 759px) {
  .footer__copy { display: none; }
}

/* Przycisk „Ustawienia cookies" w stopce udaje link, bo stoi w kolumnie linków —
   ale musi być <button>, bo nie prowadzi pod żaden adres. */
.footer__cookie-btn {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__cookie-btn[hidden] { display: none; }

@media (min-width: 760px) {
  .map-embed { height: 380px; }
}

.footer__fineprint {
  color: #8e877b;
  font-size: 0.8125rem;
  margin-inline: auto;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(253, 244, 224, 0.16);
}

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */

.sticky-cta { display: none; }

.js .sticky-cta {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 90;
  display: flex;
  gap: var(--space-sm);
  padding: 8px;
  background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: 0 -6px 26px rgba(17, 17, 17, 0.18);
  transform: translateY(160%);
  transition: transform 0.3s var(--ease-out);
}
.js .sticky-cta.is-active { transform: translateY(0); }

.sticky-cta__phone {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--red);
  padding: 12px 18px;
  border: 2px solid var(--red);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.sticky-cta__btn { flex: 1; padding: 12px 16px; font-size: 0.9375rem; }

@media (min-width: 760px) {
  .js .sticky-cta { display: none; }
}

/* ==========================================================================
   Scroll reveal (progressive enhancement — see main.js)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Podstrony dokumentowe (polityka prywatności, standardy ochrony małoletnich)
   ========================================================================== */

/* Czarny panel z pełnym zaokrągleniem — hero strony głównej ma zaokrąglone
   tylko górne rogi, bo dół przykrywa falbanka. Tu falbanki nie ma, więc panel
   domyka się z czterech stron i „leży" na kremowym tle jak karta. */
.doc-hero { padding: 12px 12px 0; }

.doc-hero__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--black);
  color: var(--cream);
  border-radius: var(--radius-panel);
  padding: var(--space-md) 20px;
}

@media (min-width: 960px) {
  .doc-hero { padding: 16px 16px 0; }
  .doc-hero__panel { padding: var(--space-md) 32px; }
}

.doc-hero__logo { display: block; transition: transform 0.2s var(--ease-out); }
.doc-hero__logo:hover { transform: rotate(-3deg) scale(1.04); }
.doc-hero__logo img { height: 44px; width: auto; }

.doc-hero__back {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--cream);
  transition: color 0.2s var(--ease-out);
}
.doc-hero__back:hover { color: var(--yellow); }
.doc-hero :focus-visible { outline-color: var(--yellow); }

/* --- treść dokumentu --- */

.doc { padding-block: var(--space-xl) var(--space-lg); }

/* Węższa miara niż `--measure`: dokumenty prawne czyta się liniowo i długimi
   akapitami, więc kolumna musi być krótsza niż w sekcjach marketingowych. */
.doc__wrap { max-width: 74ch; }

/* Mniejszy niż h1 na landingu (8vw): tam nagłówek jest plakatem i ma trzymać
   cały ekran, tutaj jest etykietą dokumentu nad kolumną tekstu. Przy 8vw
   „Standardy Ochrony Małoletnich" zajmowało trzy linie i spychało treść
   poniżej zgięcia. */
.doc__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin-bottom: var(--space-md);
}

.doc__lead {
  font-size: 1.1875rem;
  color: var(--black-soft);
  margin-bottom: var(--space-md);
}

/* `max-width: none`, bo globalne `p { max-width: var(--measure) }` obcinało
   też kreskę pod tym akapitem — linia kończyła się w połowie kolumny. */
.doc__meta {
  font-size: 0.875rem;
  color: var(--black-soft);
  max-width: none;
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid rgba(17, 17, 17, 0.12);
}

.doc__section { margin-top: var(--space-lg); }
.doc__section h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin-bottom: var(--space-sm);
}
.doc__section h3 {
  margin-top: var(--space-md);
  margin-bottom: 4px;
}
.doc__section p + p { margin-top: var(--space-md); }
.doc__section p { color: var(--black-soft); }

/* Listy w dokumentach potrzebują punktorów — globalny reset zdejmuje je
   wszystkim listom na stronie, bo w sekcjach marketingowych są zbędne. */
.doc__list {
  list-style: disc;
  padding-left: 1.25em;
  margin-top: var(--space-sm);
  color: var(--black-soft);
}
.doc__list li + li { margin-top: 6px; }
.doc__list li { max-width: var(--measure); }
/* Ta sama pułapka co przy `.doc__address + p` niżej: `.doc__section p + p` nie
   łapie akapitu po liście, więc tekst doklejał się do ostatniego punktu bez
   odstępu (widoczne w punktach 3 i 5 polityki prywatności). */
.doc__list + p { margin-top: var(--space-md); }

/* Dane administratora w polityce prywatności. `<address>` jest tu poprawnym
   elementem semantycznie, ale przeglądarki renderują go kursywą — a to blok
   danych do odczytania, nie cytat. Zdejmujemy kursywę i dokładamy oddech,
   żeby odcinał się od akapitów wokół bez potrzeby ramki. */
.doc__address {
  font-style: normal;
  color: var(--black-soft);
  line-height: 1.7;
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 3px solid var(--yellow);
}
/* `.doc__section p + p` nie łapie akapitu po `<address>`, więc bez tego tekst
   dokleja się do ostatniego wiersza adresu. */
.doc__address + p { margin-top: var(--space-md); }

/* --- miejsca na treść od właścicielki --- */

.doc-placeholder {
  background: var(--white);
  border: 2px dashed rgba(17, 17, 17, 0.28);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  margin-top: var(--space-md);
}
.doc-placeholder--tall { padding-block: calc(var(--space-lg) + var(--space-md)); }

.doc-placeholder__label {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-sm);
}

.doc-placeholder__hint {
  font-size: 0.9375rem;
  color: var(--black-soft);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(17, 17, 17, 0.12);
}

/* --- wersje dokumentu --- */

/* Style `.doc-toc` usunięte razem ze spisem treści na podstronie Standardów —
   patrz komentarz w tamtym pliku. `scroll-margin-top` niżej ZOSTAJE: kotwice
   `#wersja-pelna` i `#wersja-skrocona` nadal działają z linków zewnętrznych. */

.doc-version {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 2px solid rgba(17, 17, 17, 0.12);
  /* Kotwica wchodząca z zewnątrz ląduje pod górną krawędzią okna — bez tego
     nagłówek wersji przykleja się do samej góry i traci oddech. */
  scroll-margin-top: var(--space-lg);
}

.doc-version__kicker {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.doc-version--skrocona .doc-version__kicker { color: var(--yellow-deep); }

.doc-version__title {
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  margin-bottom: var(--space-sm);
}
.doc-version__note { color: var(--black-soft); }

/* --- karta pliku do pobrania --- */

/* Zwykły <a href> do pliku, nie przycisk z JS-em: działa bez skryptów, można
   go otworzyć w nowej karcie i skopiować adres — a na FTP nie ma czego psuć. */
.doc-file {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  margin-top: var(--space-md);
  max-width: 30rem;
  box-shadow: var(--shadow-rest);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.doc-file:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.doc-file__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 56px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  /* Ścięty róg — znaczek „zagiętej kartki”, ten sam wycinankowy język co
     znaczki w hero, tylko w miniaturze. */
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
}
.doc-file--skrocona .doc-file__icon { background: var(--yellow-deep); color: var(--black); }

.doc-file__text { display: flex; flex-direction: column; gap: 2px; }
.doc-file__name { font-weight: 700; }
.doc-file__meta { font-size: 0.875rem; color: var(--black-soft); }

/* --- checkbox zgody (gotowy na wypadek formularza w przyszłości) --- */

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.9375rem;
  color: var(--black-soft);
  cursor: pointer;
}
.consent input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--red);
}
.consent a { font-weight: 700; text-decoration: underline; }

/* --- stopka podstrony --- */

/* Świadomie bez NAP-u (adres, telefon) — pełne dane kontaktowe żyją tylko
   w stopce strony głównej i w JSON-LD. Powielenie ich tutaj oznaczałoby piąte
   miejsce do zaktualizowania przy zmianie adresu i realne ryzyko rozjazdu. */
.doc-foot {
  background: var(--black);
  color: var(--cream);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  margin-top: var(--space-xl);
  padding-block: var(--space-lg);
}

.doc-foot__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
}

@media (min-width: 760px) {
  .doc-foot__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.doc-foot__copy { color: #8e877b; font-size: 0.8125rem; max-width: none; }

.doc-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  font-size: 0.875rem;
}
.doc-foot__links a { color: #ddd6c8; transition: color 0.2s var(--ease-out); }
.doc-foot__links a:hover { color: var(--yellow); }
.doc-foot__links a[aria-current="page"] { color: var(--yellow); font-weight: 700; }
.doc-foot :focus-visible { outline-color: var(--yellow); }

/* ==========================================================================
   Druk (służy też za „pobierz jako PDF" — przeglądarka zapisuje do PDF-u)
   ========================================================================== */

@media print {
  /* Nawigacja, przyciski i ozdoby nie niosą treści na papierze. */
  .doc-hero,
  .doc-foot,
  .doc-file,
  .doc .tag,
  .sticky-cta,
  .skip-link,
  .cookie,
  .contact,
  .map-embed { display: none !important; }

  body { background: var(--white); }
  .doc { padding-block: 0; }
  .doc__wrap { max-width: none; padding-inline: 0; }
  .doc-placeholder { border-color: #999; }

  /* Adresy odnośników na papierze giną, więc drukujemy je obok tekstu. */
  .doc a[href^="http"]::after,
  .doc a[href^="mailto:"]::after,
  .doc a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }

  .doc-version {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
    break-inside: auto;
  }
  .doc-version__head { display: block; }

  h1, h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}