/*
Theme Name: EPPWR
Theme URI: https://eppwr.pl
Description: Autorski motyw strony sprzedażowej EPPWR. Własny silnik wielojęzyczny (8 języków), waluty przypisane do krajów, geolokalizacja z Cloudflare, tłumaczenie maszynowe OpenAI z ręczną korektą.
Author: Patryk
Version: 0.52.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: ppwr24
*/

:root {
  --pp-bg:        #F1F0EC;
  --pp-surface:   #FFFFFF;
  --pp-soft:      #F7F6F3;
  --pp-ink:       #16181C;
  --pp-ink-2:     #3C4149;
  --pp-muted:     #5A5F68;
  --pp-faint:     #8A8F97;
  --pp-blue:      #2E6BEF;
  --pp-blue-dark: #1B4FC0;
  --pp-blue-soft: #EEF3FE;
  --pp-alert:     #B4472B;
  --pp-ok:        #4ADE80;

  --pp-r-card:    24px;
  --pp-r-inner:   18px;
  --pp-r-pill:    999px;
  --pp-gap:       14px;

  --pp-sans:      Inter, Helvetica, Arial, sans-serif;
  --pp-display:   'Space Grotesk', Helvetica, sans-serif;
  --pp-display-tracking: -.03em;
  --pp-mono:      'IBM Plex Mono', ui-monospace, monospace;

  /* Projekt był rysowany przy 1440 px treści. Powyżej tej szerokości
     wiersz akapitu przekracza kilkadziesiąt znaków i czyta się gorzej,
     a karta dokumentu w sekcji nagłówkowej odjeżdża od tytułu tak daleko,
     że przestają wyglądać na jedną kompozycję. Doliczone 28 px to
     wewnętrzny odstęp powłoki po obu stronach. */
  --pp-max:       1468px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pp-bg);
  color: var(--pp-ink);
  font-family: var(--pp-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pp-blue); text-decoration: none; }
a:hover { color: var(--pp-blue-dark); }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--pp-display);
  font-weight: 600;
  /* Zacieśnienie zależy od kroju: Inter w dużych stopniach jest luźniejszy
     od Space Grotesk i przy tej samej wartości wyglądałby na rozsypany.
     Wartość wstawia PHP razem z wyborem kroju; zapas jest na wypadek,
     gdyby style wczytały się bez niej. */
  letter-spacing: var(--pp-display-tracking, -.03em);
  overflow-wrap: break-word;
}

.pp-shell {
  min-height: 100vh;
  max-width: var(--pp-max);
  margin-inline: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--pp-gap);
}

/* --- przełącznik języka ------------------------------------------------ */
.pp-lang { position: relative; }
.pp-lang__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: var(--pp-r-pill);
  font-family: var(--pp-mono); font-size: 12px; letter-spacing: .06em;
  border: 1px solid rgba(22,24,28,.18); background: none;
  color: inherit; cursor: pointer;
}
.pp-lang__menu {
  position: absolute; top: 44px; right: 0; z-index: 80;
  background: #fff; border-radius: 14px; padding: 6px; min-width: 190px;
  box-shadow: 0 20px 50px -20px rgba(10,20,60,.4);
  border: 1px solid rgba(22,24,28,.08);
  display: none; gap: 2px;
}
.pp-lang[data-open="1"] .pp-lang__menu { display: grid; }
.pp-lang__item {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-radius: 9px; font-size: 13.5px; color: var(--pp-ink);
}
.pp-lang__label { display: flex; align-items: center; gap: 10px; }
.pp-lang__item:hover { background: var(--pp-blue-soft); }
.pp-lang__item[aria-current="true"] { background: var(--pp-soft); }
.pp-lang__code { font-family: var(--pp-mono); font-size: 11px; color: var(--pp-faint); }
.pp-flag {
  width: 20px; height: 14px; border-radius: 3px; display: inline-block;
  box-shadow: 0 0 0 1px rgba(22,24,28,.12) inset;
}

/* --- baner geolokalizacji ---------------------------------------------- */
.pp-geo {
  border-radius: 16px; background: var(--pp-ink); color: #fff;
  padding: 14px 18px; display: flex; align-items: center;
  justify-content: center; gap: 14px; flex-wrap: wrap;
  font-size: 14px;
}
.pp-geo__cta {
  padding: 8px 16px; border-radius: var(--pp-r-pill);
  background: var(--pp-blue); color: #fff; font-weight: 600; font-size: 13.5px;
  border: 0; cursor: pointer;
}
.pp-geo__cta:hover { background: #fff; color: var(--pp-ink); }
.pp-geo__dismiss {
  background: none; border: 0; color: rgba(255,255,255,.6);
  font-size: 15px; cursor: pointer;
}
.pp-geo__dismiss:hover { color: #fff; }

/* --- płaski przełącznik w stopce ---------------------------------------- */
.pp-footer {
  position: relative; z-index: 1;
  border-radius: var(--pp-r-card);
  background: var(--pp-ink);
  color: rgba(255,255,255,.65);
  padding: 40px;
}
.pp-langblock .pp-eyebrow { display: block; }
.pp-lang-flat { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-lang-flat__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--pp-r-pill);
  font-family: var(--pp-mono); font-size: 11px; letter-spacing: .06em;
  border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.65);
}
.pp-lang-flat__item:hover,
.pp-lang-flat__item[aria-current="true"] { border-color: #fff; color: #fff; }

/* =========================================================================
   Układ stron — karty na tle, tak jak w projekcie
   ====================================================================== */

.pp-card {
  border-radius: var(--pp-r-card);
  background: var(--pp-surface);
  padding: 56px 40px;
}
.pp-card--dark  { background: var(--pp-ink); color: #fff; }
.pp-card--blue  { background: var(--pp-blue); color: #fff; }
.pp-card--frame { padding: 14px; display: flex; }
.pp-card--frame > * { flex: 1; min-width: 0; }
.pp-card--col   { display: flex; flex-direction: column; padding: 44px 40px; }
.pp-card--dark .pp-h2,
.pp-card--dark .pp-h3,
.pp-card--blue .pp-h2 { color: #fff; }

.pp-split { display: grid; gap: var(--pp-gap); }
.pp-split--5-7 { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.pp-split--7-5 { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }

.pp-grid { display: grid; gap: var(--pp-gap); margin-top: 44px; }
.pp-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.pp-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.pp-sechead {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: 24px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.pp-measure { max-width: 56em; margin-top: 20px; }

/* --- typografia ---------------------------------------------------------- */
.pp-h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.18; }
.pp-h2--big { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; }
.pp-h3 { font-size: 19px; line-height: 1.3; }
.pp-h3--sm { font-size: 17.5px; line-height: 1.35; }
.pp-body { font-size: 17px; line-height: 1.7; color: var(--pp-ink-2); }
.pp-body--dim   { color: rgba(255,255,255,.7); }
.pp-body--light { color: rgba(255,255,255,.85); }
.pp-body--muted { color: var(--pp-muted); }
.pp-small { font-size: 15px; line-height: 1.6; color: var(--pp-muted); }
.pp-small--dim { color: rgba(255,255,255,.68); }
.pp-kicker {
  margin-top: auto; padding-top: 28px;
  font-family: var(--pp-display); font-size: 21px; font-weight: 600; color: #fff;
}
/* Nadtytuły: 11 px w szeroko rozstrzelonej mono było ładne w projekcie
   i nieczytelne na ekranie. Większy stopień, mniejsza rozstrzelina,
   mocniejszy kontrast. */
.pp-eyebrow {
  font-family: var(--pp-mono); font-size: 12.5px;
  letter-spacing: .08em; color: var(--pp-muted);
}
.pp-eyebrow--dim   { color: rgba(255,255,255,.68); }
.pp-eyebrow--light { color: rgba(255,255,255,.82); }
.pp-eyebrow--blue  { color: var(--pp-blue); }
.pp-link { font-size: 14.5px; font-weight: 600; color: var(--pp-blue); }
.pp-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.pp-hp { position: absolute; left: -9999px; }

/* --- przyciski ----------------------------------------------------------- */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: var(--pp-r-pill);
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; text-align: center;
  /* Obwódka jest zawsze, tylko w większości odmian przezroczysta.
     Przy `border: 0` przycisk z obwódką wychodził o 3 px wyższy od
     sąsiada bez niej i para w nagłówku stała nierówno. */
  border: 1.5px solid transparent;
}
.pp-btn--lg { padding: 16px 28px; font-size: 16px; }
.pp-btn--solid   { background: var(--pp-ink); color: #fff; }
.pp-btn--solid:hover { background: var(--pp-blue); color: #fff; }
.pp-btn--ghost   { background: var(--pp-blue-soft); border-color: var(--pp-blue); color: var(--pp-blue-dark); }
.pp-btn--ghost:hover { background: var(--pp-blue); color: #fff; }
.pp-btn--dark    { background: var(--pp-ink); color: #fff; }
.pp-btn--dark:hover { background: #fff; color: var(--pp-ink); }
.pp-btn--outline { border-color: rgba(255,255,255,.5); color: #fff; font-weight: 500; }
.pp-btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.pp-btn--white   { background: #fff; color: var(--pp-ink); }
.pp-btn--primary { background: var(--pp-blue); color: #fff; }
.pp-btn--primary:hover { background: var(--pp-blue-dark); color: #fff; }

/* --- pasek promocyjny ---------------------------------------------------- */
/* Atrybut `hidden` musi wygrywać z układem.
   Przeglądarka ma własną regułę [hidden] { display: none }, ale każda
   reguła autora — także zwykłe `display: flex` — bije ją specyficznością.
   Bez tego pasek informacyjny pokazywał się mimo zamknięcia i mimo
   ciasteczka, a `hidden` w JS nic nie robił. Dotyczy też odpowiedzi FAQ,
   kart quizu i komunikatu o kodzie rabatowym. */
[hidden] { display: none !important; }

.pp-topbar {
  border-radius: 16px; background: var(--pp-ink); color: #fff;
  padding: 12px 46px; display: flex; align-items: center;
  justify-content: center; gap: 14px; position: relative; flex-wrap: wrap;
}
.pp-topbar__badge {
  font-family: var(--pp-mono); font-size: 11.5px; letter-spacing: .07em;
  background: var(--pp-blue); padding: 4px 9px; border-radius: var(--pp-r-pill);
  white-space: nowrap;
}
.pp-topbar__text { font-size: 14px; font-weight: 500; text-align: center; }
.pp-topbar__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 99px; border: 0;
  background: none; color: rgba(255,255,255,.6); font-size: 15px; cursor: pointer;
}
.pp-topbar__close:hover { background: rgba(255,255,255,.12); color: #fff; }

/* --- nawigacja ----------------------------------------------------------- */
.pp-header { border-radius: var(--pp-r-card); background: var(--pp-surface); }
.pp-nav {
  padding: 0 36px; min-height: 66px;
  display: flex; align-items: center; gap: 32px;
}
.pp-logo { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--pp-ink); }
.pp-logo__mark { width: 24px; height: 24px; border-radius: 7px; background: var(--pp-blue); }
.pp-logo__text { font-family: var(--pp-display); font-size: 17px; font-weight: 700; }
.pp-logo--dark, .pp-nav--inv .pp-logo { color: #fff; }
.pp-nav--inv .pp-logo__mark, .pp-logo--dark .pp-logo__mark { background: #fff; }
.pp-logo--dark .pp-logo__mark { background: var(--pp-blue); }

.pp-nav__links { display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.pp-nav__links a { color: var(--pp-muted); }
.pp-nav__links a:hover { color: var(--pp-ink); }
.pp-nav--inv .pp-nav__links a { color: rgba(255,255,255,.8); }
.pp-nav--inv .pp-nav__links a:hover { color: #fff; }

.pp-nav__actions { display: flex; gap: 8px; align-items: center; }
.pp-nav--inv .pp-lang__btn { color: #fff; border-color: rgba(255,255,255,.4); }
.pp-nav--inv .pp-btn--ghost { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.pp-nav--inv .pp-btn--ghost:hover { background: #fff; color: var(--pp-ink); }
.pp-nav--inv .pp-btn--solid { background: #fff; color: var(--pp-ink); }
.pp-nav--inv .pp-btn--solid:hover { background: var(--pp-ink); color: #fff; }

.pp-burger {
  display: none; width: 44px; height: 40px; border: 0; background: none;
  cursor: pointer; padding: 10px; flex-direction: column; justify-content: center; gap: 6px;
  color: var(--pp-ink);
}
.pp-burger span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}

/* Na ciemnym nagłówku strony głównej kreski były czarne na niebieskim:
   `currentColor` brał kolor z korzenia dokumentu, bo odmiana odwrócona
   ustawiała barwę odnośnikom i przyciskom, ale nie samemu paskowi. */
.pp-nav--inv .pp-burger { color: #fff; }

/* Kreski składają się w krzyżyk, gdy menu jest otwarte. Ten sam przycisk
   otwiera i zamyka, więc jego kształt musi mówić, co zrobi kliknięcie. */
.pp-burger.jest-krzyzykiem span:first-child { transform: translateY(4px) rotate(45deg); }
.pp-burger.jest-krzyzykiem span:last-child  { transform: translateY(-4px) rotate(-45deg); }



/* --- bohater ------------------------------------------------------------- */
.pp-hero { border-radius: var(--pp-r-card); background: var(--pp-blue); overflow: hidden; color: #fff; }
.pp-hero__head { border-bottom: 1px solid rgba(255,255,255,.18); }
/* Kolumny równej wysokości: karta dowodów wypełnia kolumnę, więc nad nią
   nie zostaje puste pole, a wynik siada na linii przycisków. */
.pp-hero__body {
  display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: 48px; padding: 64px 36px 0; align-items: end;
}
.pp-hero__text {
  padding-bottom: 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.pp-hero__title {
  margin-top: 24px; font-size: clamp(42px, 5.4vw, 80px);
  line-height: .98; color: #fff;
}
.pp-hero__lead {
  margin-top: 24px; font-size: 19px; line-height: 1.6;
  color: rgba(255,255,255,.86); max-width: 30em;
}
.pp-hero__cta { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }

/* --- karta dokumentu ----------------------------------------------------- */
/* --- karta bilansu masowego w nagłówku ----------------------------------- */
.pp-doccard {
  border-radius: 18px 18px 0 0; background: #fff; color: var(--pp-ink);
  padding: 28px 28px 0; align-self: stretch;
  display: flex; flex-direction: column; gap: 22px;
  overflow: hidden;
}
.pp-doccard__top { display: flex; flex-direction: column; gap: 5px; }
.pp-doccard__eyebrow {
  font-family: var(--pp-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--pp-faint); text-transform: uppercase;
}
.pp-doccard__title {
  font-family: var(--pp-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em;
}

/* Pasek proporcji: szerokość segmentu to udział masowy komponentu. */
.pp-mass { display: flex; gap: 3px; height: 44px; }
.pp-mass__seg { border-radius: 5px; min-width: 6px; }
.pp-mass__seg.is-ok { background: var(--pp-blue); }
.pp-mass__seg.is-warn { background: #E5A23C; }
.pp-mass__seg.is-missing {
  background: repeating-linear-gradient(
    -45deg, var(--pp-alert) 0 5px, #E5806A 5px 10px
  );
}

.pp-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pp-docs__row {
  display: grid; grid-template-columns: 10px minmax(0,1fr) auto;
  align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 11px; background: var(--pp-soft);
}
.pp-docs__mark { width: 10px; height: 10px; border-radius: 99px; background: var(--pp-blue); }
.pp-docs__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-docs__name { font-size: 14.5px; font-weight: 600; }
.pp-docs__meta { font-size: 12.5px; color: var(--pp-muted); }
.pp-docs__value { font-family: var(--pp-mono); font-size: 15px; font-weight: 500; }

.pp-docs__row.is-warn { background: #FBF1E8; }
.pp-docs__row.is-warn .pp-docs__mark { background: #D08A2C; }
.pp-docs__row.is-warn .pp-docs__value { color: #9A5E12; }
.pp-docs__row.is-missing { background: #FBEDE9; }
.pp-docs__row.is-missing .pp-docs__mark { background: var(--pp-alert); }
.pp-docs__row.is-missing .pp-docs__name,
.pp-docs__row.is-missing .pp-docs__value { color: var(--pp-alert); }

/* Werdykt: schodzi do samego dołu sekcji, bez zaokrągleń. */
.pp-verdict {
  margin: auto -28px 0; padding: 24px 28px 26px;
  background: var(--pp-ink); color: #fff;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 20px;
}
.pp-verdict__label {
  font-family: var(--pp-mono); font-size: 12px; letter-spacing: .08em;
  color: rgba(255,255,255,.62); align-self: center;
}
.pp-verdict__value {
  grid-row: 1; grid-column: 2; align-self: center;
  font-family: var(--pp-display); font-size: 26px; font-weight: 700;
  letter-spacing: -.02em; color: #FF9F8A;
}
.pp-verdict__note {
  grid-column: 1 / -1;
  font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.62);
}
.pp-verdict__note strong { color: #fff; font-weight: 600; }

/* --- karty sekcji -------------------------------------------------------- */
.pp-frame { position: relative; flex: 1; border-radius: 14px; overflow: hidden; min-height: 420px; }
.pp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-imgslot {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; background: var(--pp-soft); border-radius: 14px;
  color: var(--pp-faint); font-size: 14px;
}

.pp-step { border-radius: var(--pp-r-inner); background: var(--pp-soft); padding: 28px 26px; }
.pp-step:hover { background: var(--pp-blue-soft); }
.pp-step__num {
  display: inline-flex; width: 34px; height: 34px; border-radius: 99px;
  background: var(--pp-blue); color: #fff; align-items: center; justify-content: center;
  font-family: var(--pp-mono); font-size: 13px; margin-bottom: 18px;
}
.pp-step .pp-small, .pp-diff .pp-small { margin-top: 10px; }

.pp-diff {
  border-radius: var(--pp-r-inner);
  border: 1px solid rgba(255,255,255,.14); padding: 28px 26px;
}
.pp-diff:hover { border-color: var(--pp-blue); background: rgba(46,107,239,.12); }

.pp-aboutlink { margin-top: 24px; }

.pp-quizcta {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px);
  gap: 48px; align-items: center; color: #fff;
}
.pp-quizcta:hover { background: var(--pp-blue-dark); color: #fff; }
.pp-quizcta .pp-body { margin-top: 14px; max-width: 34em; }

.pp-quizcta__cta {
  display: flex; align-items: center; gap: 18px;
  margin-top: 28px; flex-wrap: wrap;
}
.pp-quizcta__meta { font-size: 13.5px; color: rgba(255,255,255,.72); }

/* Kartki pytań lekko przesunięte względem siebie — sugerują talię,
   z której quiz odsłania kolejne. */
.pp-quizcta__peek { display: flex; flex-direction: column; gap: 10px; }
.pp-quizcta__q {
  display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px;
  align-items: center;
  background: rgba(255,255,255,.12); border-radius: 12px;
  padding: 15px 18px; font-size: 14.5px; line-height: 1.45;
}
.pp-quizcta__q:nth-child(2) { margin-left: 16px; }
.pp-quizcta__q:nth-child(3) { margin-left: 32px; }
.pp-quizcta__n {
  width: 26px; height: 26px; border-radius: 99px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pp-mono); font-size: 12px;
}
.pp-quizcta__more {
  margin-left: 48px; font-size: 20px; letter-spacing: .1em;
  color: rgba(255,255,255,.5); line-height: 1;
}

/* --- cennik -------------------------------------------------------------- */
.pp-toggle {
  margin-top: 24px; display: inline-flex;
  border-radius: var(--pp-r-pill); background: var(--pp-bg); padding: 4px;
}
.pp-toggle__btn {
  padding: 10px 22px; border-radius: var(--pp-r-pill); border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--pp-muted);
}
.pp-toggle__btn.is-active { background: var(--pp-ink); color: #fff; }

/* Karty równej wysokości — przy `align-items: start` krótszy pakiet
   kończył się w połowie i wyglądał jak niedokończony. */
.pp-plans {
  margin-top: 10px; display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--pp-gap); align-items: stretch;
}
.pp-plan {
  border-radius: 20px; padding: 40px 36px;
  display: flex; flex-direction: column; position: relative;
}
.pp-plan--blue { background: var(--pp-blue); color: #fff; }
.pp-plan--soft { background: var(--pp-soft); }
.pp-plan__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pp-plan__name { font-family: var(--pp-display); font-size: 28px; font-weight: 600; }
.pp-plan--blue .pp-plan__name { color: #fff; }
.pp-plan__price { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-plan__amount {
  font-family: var(--pp-display); font-size: clamp(40px, 3.6vw, 54px);
  font-weight: 700; letter-spacing: -.04em;
}
.pp-plan__per { font-size: 15px; color: var(--pp-muted); }
.pp-plan--blue .pp-plan__per { color: rgba(255,255,255,.75); }
.pp-plan__year {
  display: block; margin-top: 6px;
  font-family: var(--pp-mono); font-size: 12px; color: var(--pp-faint);
}
.pp-plan--blue .pp-plan__year { color: rgba(255,255,255,.65); }
.pp-plan__features { list-style: none; margin: 28px 0 30px; padding: 0; display: grid; }
.pp-plan__features li {
  display: flex; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid rgba(22,24,28,.1);
  font-size: 15px; line-height: 1.5; color: var(--pp-ink-2);
}
.pp-plan--blue .pp-plan__features li { border-color: rgba(255,255,255,.2); color: #fff; }
/* Przycisk spada do dołu karty, więc oba są na jednej linii; odstęp
   robi lista funkcji, nie wnętrze odnośnika. */
.pp-plan__cta { margin-top: auto; }
.pp-plan--blue .pp-plan__cta { background: #fff; color: var(--pp-ink); }
.pp-plan--blue .pp-plan__cta:hover { background: var(--pp-ink); color: #fff; }
.pp-plan--soft .pp-plan__cta { border: 1px solid rgba(22,24,28,.25); }
.pp-plan--soft .pp-plan__cta:hover { background: var(--pp-ink); color: #fff; }

/* Czarna dwupikselowa obwódka była jedynym takim elementem na stronie
   i czytała się jak ostrzeżenie prawne, choć treść jest uspokajająca.
   Miękkie tło pasuje do reszty i nie krzyczy. */
.pp-afterbox {
  margin-top: var(--pp-gap); border-radius: 18px;
  background: var(--pp-soft); padding: 30px 34px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 34px;
  align-items: start;
}
.pp-afterbox__head { display: flex; flex-direction: column; gap: 12px; }
.pp-afterbox__lead { margin: 0; font-size: 16px; }
.pp-afterbox__lead strong { color: var(--pp-ink); }

.pp-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp-stages__item {
  display: grid; grid-template-columns: minmax(0,200px) minmax(0,1fr); gap: 18px;
  padding: 13px 16px; border-radius: 9px; background: var(--pp-surface);
  align-items: baseline;
}
.pp-stages__when { font-size: 14px; font-weight: 600; }
.pp-stages__what { font-size: 14px; line-height: 1.55; color: var(--pp-muted); }

@media (max-width: 900px) {
  .pp-afterbox { grid-template-columns: minmax(0,1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .pp-stages__item { grid-template-columns: minmax(0,1fr); gap: 3px; }
}

/* --- kontakt i FAQ ------------------------------------------------------- */
/* Kafelki idą tuż pod tekstem. `margin-top: auto` spychało je na dół
   karty, która rozciąga się do wysokości sąsiedniej kolumny z FAQ —
   powstawała pustka i sekcja przestawała wyglądać na kontakt. */
.pp-help__links { margin-top: 30px; display: grid; gap: 10px; }
.pp-contactbox {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  border-radius: 16px; padding: 18px 22px;
}

/* Wariant z ikoną — używany na stronie głównej. Stopka i strona kontaktu
   korzystają z wersji podstawowej, dlatego zmiany są w osobnych regułach. */
.pp-contactbox:has(.pp-contactbox__icon) {
  display: grid; grid-template-columns: 44px minmax(0,1fr);
  align-items: center; gap: 16px; padding: 16px 20px;
}
.pp-contactbox__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.pp-contactbox--dark .pp-contactbox__icon { background: rgba(255,255,255,.2); color: #fff; }
.pp-contactbox--light .pp-contactbox__icon { background: var(--pp-blue-soft); color: var(--pp-blue); }
.pp-contactbox__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-contactbox__text .pp-contactbox__label { margin: 0; }
.pp-contactbox--dark  { background: var(--pp-blue); color: #fff; }
.pp-contactbox--dark:hover { background: var(--pp-blue-dark); color: #fff; }
.pp-contactbox--light { background: var(--pp-soft); color: var(--pp-ink); }
.pp-contactbox--light:hover { background: var(--pp-blue-soft); color: var(--pp-ink); }
.pp-contactbox__label {
  display: block; font-family: var(--pp-mono); font-size: 12px;
  letter-spacing: .08em; color: var(--pp-muted); margin-bottom: 4px;
}
.pp-contactbox--dark .pp-contactbox__label { color: rgba(255,255,255,.75); }
.pp-contactbox__value { font-family: var(--pp-display); font-size: 20px; font-weight: 600; }

.pp-faq { margin-top: 28px; border-top: 1px solid rgba(22,24,28,.12); }
.pp-faq__item { border-bottom: 1px solid rgba(22,24,28,.12); }
.pp-faq__q {
  width: 100%; display: grid; grid-template-columns: minmax(0,1fr) 28px;
  gap: 18px; align-items: baseline; padding: 19px 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 16.5px; font-weight: 600; line-height: 1.4; color: inherit;
}
.pp-faq__sign { font-family: var(--pp-mono); font-size: 17px; color: var(--pp-blue); text-align: right; }
.pp-faq__a p { padding: 0 40px 22px 0; font-size: 15px; line-height: 1.7; color: var(--pp-muted); }

/* --- widget oddzwonienia ------------------------------------------------- */
/* Widget przykleja się do prawej krawędzi treści, a nie okna — na szerokim
   monitorze przycisk przy samej krawędzi ekranu wygląda, jakby należał do
   przeglądarki, a nie do strony.

   Kontener jest przezroczysty dla kliknięć i rozciągnięty na całą szerokość
   powłoki. Prostsze `right: calc(...100vw...)` myliłoby się o szerokość
   paska przewijania, bo jednostka vw go wlicza. */
/* Nad stopką widget znika: przy końcu strony i tak nie ma czego łapać,
   a przykrywał treść i odnośniki. Klasę zdejmuje i nakłada skrypt. */
.pp-cb.is-hidden {
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
}
.pp-cb {
  transition: opacity .25s, transform .25s, visibility .25s;
  position: fixed;
  inset: auto 0 0 0;
  max-width: var(--pp-max);
  margin-inline: auto;
  padding: 0 22px 22px;
  z-index: 90;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.pp-cb > * { pointer-events: auto; }
.pp-cb__panel {
  width: 330px; max-width: calc(100vw - 44px);
  border-radius: 20px; background: #fff; padding: 26px 24px;
  box-shadow: 0 30px 70px -25px rgba(10,20,60,.55);
}
.pp-cb__title { font-size: 19px; line-height: 1.25; }
.pp-cb__body { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--pp-muted); }
.pp-cb__label { display: block; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--pp-ink-2); }
.pp-cb__times { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.pp-cb__submit { margin-top: 18px; width: 100%; }
.pp-cb__consent { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--pp-faint); }
.pp-cb__error { margin-top: 10px; font-size: 13px; color: var(--pp-alert); }
.pp-cb__done { text-align: center; padding: 8px 0; }
.pp-cb__tick {
  display: flex; margin: 0 auto; width: 44px; height: 44px; border-radius: 99px;
  background: var(--pp-blue); color: #fff; align-items: center; justify-content: center; font-size: 20px;
}
.pp-cb__toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--pp-r-pill); border: 0;
  background: var(--pp-blue); color: #fff; font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 16px 40px -14px rgba(27,79,192,.7);
}
.pp-cb__toggle:hover { background: var(--pp-ink); }
.pp-cb__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--pp-ok); }

.pp-input {
  width: 100%; margin-top: 16px; padding: 13px 15px;
  border-radius: 12px; border: 1.5px solid rgba(22,24,28,.14);
  font: inherit; font-size: 15px; background: #FAFAF8; outline: none;
}
.pp-input:focus { border-color: var(--pp-blue); }

.pp-chip { cursor: pointer; }
.pp-chip input { position: absolute; opacity: 0; }
.pp-chip span {
  display: inline-block; padding: 8px 13px; border-radius: var(--pp-r-pill);
  font-size: 13px; font-weight: 500; border: 1.5px solid rgba(22,24,28,.16);
  background: #fff; color: var(--pp-ink-2);
}
.pp-chip input:checked + span { border-color: var(--pp-blue); background: var(--pp-blue-soft); color: var(--pp-blue-dark); }
.pp-chip input:focus-visible + span { outline: 2px solid var(--pp-blue); outline-offset: 2px; }

/* --- stopka -------------------------------------------------------------- */
.pp-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 36px; flex-wrap: wrap; }
.pp-footer__tagline { margin-top: 16px; font-size: 15px; line-height: 1.7; max-width: 34em; }
.pp-footer__contact { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-footer__contact .pp-contactbox {
  flex-direction: column; align-items: flex-start; gap: 4px;
  border: 1px solid rgba(255,255,255,.16); color: #fff; padding: 16px 22px;
}
.pp-footer__contact .pp-contactbox:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.pp-footer__contact .pp-contactbox__label { color: rgba(255,255,255,.62); }

/* Telefon wypełniony kolorem marki — w stopce dwie identyczne, ledwo
   widoczne ramki nie podpowiadały, że to odnośniki. */
.pp-footer__contact .pp-contactbox--accent {
  background: var(--pp-blue); border-color: var(--pp-blue);
}
.pp-footer__contact .pp-contactbox--accent:hover {
  background: var(--pp-blue-dark); border-color: var(--pp-blue-dark);
}
.pp-footer__contact .pp-contactbox--accent .pp-contactbox__label { color: rgba(255,255,255,.78); }
.pp-footer__contact .pp-contactbox__value { font-size: 18px; }

.pp-footer__cols {
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 36px;
}
.pp-footer__col { display: grid; gap: 11px; font-size: 14px; align-content: start; }
.pp-footer__col a { color: rgba(255,255,255,.62); }
.pp-footer__col a:hover { color: #fff; }

/* Nagłówki kolumn: pełna biel przy odnośnikach na 62% — wcześniej obie
   warstwy miały niemal identyczną jasność i etykieta zlewała się z listą.
   Wielkie litery wymuszone stylem, bo w bazie mogą siedzieć starsze
   teksty pisane normalnie. */
.pp-footer .pp-eyebrow--dim {
  color: rgba(255,255,255,.95);
  text-transform: uppercase;
}
.pp-footer__col .pp-eyebrow--dim { margin-bottom: 3px; }

.pp-footer__bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 28px; flex-wrap: wrap;
}
/* Dwie kolumny po dwie pozycje: w stopce nie ma miejsca na cztery w rzędzie,
   a jeden długi słupek zjadałby całą wysokość obok przełącznika języka. */
/* Język po lewej, znak Unii po prawej — wiersz znów ma dwa końce, więc
   wyrównanie do krawędzi jest naturalne. */
/* Znak Unii przy lewej krawędzi, pod przełącznikiem języka. Wyrównanie
   do prawej brało się stąd, że stał w tym samym wierszu co języki —
   po przeniesieniu w dół nie ma już czego się trzymać po tamtej stronie. */
.pp-eu { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.pp-eu__flag { display: block; width: 45px; height: auto; border-radius: 3px; }
.pp-eu__note {
  font-family: var(--pp-mono); font-size: 10.5px; letter-spacing: .06em;
  color: rgba(255,255,255,.45); text-transform: uppercase;
}

.pp-footer__legal {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--pp-mono); font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.4);
}

/* Podpis wykonawcy: słowo i znak w jednej linii bazowej. Znak jest biały
   na przezroczystym tle, więc dostaje przygaszenie zamiast własnego koloru
   — ma być obecny, ale nie konkurować z nazwą marki po drugiej stronie. */
.pp-footer__reg { display: inline-flex; align-items: center; gap: 10px; }
.pp-credit__label { white-space: nowrap; }
.pp-credit__mark { display: inline-flex; opacity: .55; transition: opacity .14s ease; }
.pp-credit__mark img { display: block; height: 18px; width: auto; }
a.pp-credit__mark:hover { opacity: 1; }

/* =========================================================================
   Zwężanie
   ====================================================================== */

@media (max-width: 1080px) {
  .pp-split--5-7, .pp-split--7-5, .pp-hero__body { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .pp-plans { grid-template-columns: minmax(0,1fr); }
  .pp-grid--3, .pp-grid--4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  /* Cztery kolumny mieszczą się dopiero na szerokim ekranie; niżej
     dwie po dwie, a na telefonie jedna pod drugą. */
  .pp-footer__cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; }
  .pp-nav__links { display: none; }
  .pp-burger { display: flex; }
  .pp-card, .pp-nav, .pp-hero__body { padding-left: 26px; padding-right: 26px; }
  .pp-hero__body { padding-top: 48px; }
  .pp-hero__text { padding-bottom: 40px; }
}

@media (max-width: 720px) {
  .pp-grid--3, .pp-grid--4, .pp-plans, .pp-footer__cols { grid-template-columns: minmax(0,1fr); }
  .pp-card { padding: 36px 20px; }

  /* Pasek nawigacji mieścił logo, przełącznik języka, dwa przyciski
     i hamburger. Na telefonie to się nie mieści w żadnej konfiguracji —
     oba przyciski są w menu pod hamburgerem, więc tutaj znikają. */
  .pp-nav { padding: 0 18px; gap: 12px; min-height: 60px; }
  .pp-nav__actions .pp-btn { display: none; }
  .pp-nav__actions { gap: 4px; }
  .pp-logo__text { font-size: 16px; }

  .pp-topbar { padding: 11px 40px 11px 16px; gap: 8px; }
  .pp-topbar__text { font-size: 13px; }

  .pp-hero__body { padding: 36px 20px 0; gap: 32px; }
  .pp-hero__text { padding-bottom: 32px; }
  .pp-hero__title { font-size: clamp(32px, 9vw, 46px); }
  .pp-hero__lead { font-size: 17px; }
  .pp-hero__cta .pp-btn { width: 100%; }

  .pp-doccard { padding: 20px 18px; }
  .pp-doccard__value { gap: 10px; }

  .pp-step, .pp-diff { padding: 24px 20px; }
  .pp-plan { padding: 30px 22px; }
  .pp-afterbox { padding: 26px 22px; }
  .pp-summary { padding: 30px 22px; }
  .pp-footer { padding: 30px 20px; }
  .pp-footer__cols { margin-top: 36px; padding-top: 28px; gap: 26px; }
  /* Na telefonie wiersz i tak się łamie, więc oba bloki zaczynają się
     przy tej samej krawędzi zamiast rozjeżdżać na przeciwne strony. */
  .pp-footer__bottom { margin-top: 32px; justify-content: flex-start; }
  .pp-crumbs { padding: 16px 20px; }
  .pp-article__body { padding: 30px 20px 44px; }
  .pp-prose p, .pp-prose li { font-size: 17px; }

  /* Etykieta i wartość w kafelkach kontaktowych nie mieszczą się obok
     siebie przy dłuższym adresie e-mail. */
  .pp-contactbox { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pp-contactbox__value { font-size: 17px; }

  .pp-quizcta { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .pp-quizcta__q:nth-child(2),
  .pp-quizcta__q:nth-child(3) { margin-left: 0; }
  .pp-quizcta__more { margin-left: 0; }
  .pp-quizcta .pp-btn { width: 100%; }

  /* Kontener jest rozciągnięty na całą szerokość — odsunięcie robi jego
     wewnętrzny odstęp, nie właściwości right i bottom. */
  .pp-cb { padding: 0 12px 12px; }
  .pp-cb__panel { width: 100%; max-width: calc(100vw - 24px); padding: 22px 20px; }
  .pp-cb__toggle { padding: 13px 18px; font-size: 14px; }

  .pp-fields .pp-input { padding: 13px 14px; }
  .pp-sumrow { font-size: 14px; }
}

/* Bardzo wąskie ekrany — poniżej tej szerokości liczy się już każdy piksel. */
@media (max-width: 400px) {
  .pp-shell { padding: 8px; gap: 8px; }
  .pp-card { padding: 30px 16px; }
  .pp-nav { padding: 0 14px; }
  .pp-hero__body { padding: 30px 16px 0; }
  .pp-hero__title { font-size: clamp(29px, 8.6vw, 36px); }
  .pp-quiz__card { padding: 26px 18px; }
  .pp-quiz__opt { padding: 16px 18px; font-size: 16px; }
  .pp-doccard__num { font-size: 52px; }
}

/* Cokolwiek szerokiego wpadnie do treści — obrazek, tabela, długi adres —
   ma zostać wewnątrz karty, a nie rozpychać całej strony w poziomie. */
img, video, iframe { max-width: 100%; height: auto; }
.pp-prose table { display: block; overflow-x: auto; }
body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Menu mobilne na jasnym nagłówku — ten sam układ, odwrócone kolory. */

/* =========================================================================
   Quiz
   ====================================================================== */
/* Płaski błękit na całą wysokość ekranu to dużo koloru i nic poza nim.
   Warstwy dają mu głębię, nie zabierając czytelności białej karcie:
   ciemniejszy granat w rogach, dwie miękkie poświaty i siatka kropek.

   Wszystko z gradientów — na stronie, na której liczy się każde
   kliknięcie, tło nie ma prawa opóźniać wyświetlenia pierwszego pytania. */
.pp-quizwrap {
  position: relative; overflow: hidden;
  border-radius: var(--pp-r-card);
  padding: 14px; min-height: calc(100vh - 160px);
  background:
    radial-gradient(58% 46% at 12% 4%, rgba(126,163,250,.55) 0%, rgba(126,163,250,0) 62%),
    radial-gradient(52% 44% at 92% 96%, rgba(20,58,150,.6) 0%, rgba(20,58,150,0) 60%),
    linear-gradient(152deg, #3F79F2 0%, #2E6BEF 45%, #1F51C8 100%);
}

/* Dwie warstwy faktury: pierścienie rozchodzące się spod karty i siatka
   kropek. Obie wygaszone tam, gdzie leży karta — pod nią i tak ich nie
   widać, a przy krawędziach dają ekranowi głębię zamiast jednolitej
   płaszczyzny koloru. */
.pp-quizwrap::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 50% 34%,
      rgba(255,255,255,.13) 0 1.5px,
      transparent 1.5px 92px),
    radial-gradient(circle, rgba(255,255,255,.55) 1.5px, transparent 1.6px) 0 0 / 28px 28px;
  opacity: .5;
  mask-image: radial-gradient(58% 50% at 50% 36%, transparent 30%, #000 82%);
  -webkit-mask-image: radial-gradient(58% 50% at 50% 36%, transparent 30%, #000 82%);
}

/* Delikatna smuga światła u góry — daje wrażenie, że karta na czymś leży,
   a nie że jest naklejona na jednolitą płaszczyznę. */
.pp-quizwrap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 100%);
}

.pp-quizwrap > * { position: relative; z-index: 1; }
.pp-quiz { max-width: 860px; margin: 0 auto; padding: 56px 20px 72px; }
.pp-quiz__card {
  border-radius: 22px; background: #fff; padding: 48px 44px;
  /* Dwa cienie: bliski trzyma krawędź, daleki odrywa kartę od tła.
     Jeden cień albo obrysowuje, albo unosi — nigdy oba naraz. */
  box-shadow:
    0 2px 6px rgba(10,20,60,.14),
    0 40px 80px -32px rgba(8,18,54,.55);
}
.pp-quiz__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--pp-mono); font-size: 12px; letter-spacing: .1em; color: var(--pp-faint);
}
.pp-quiz__back { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.pp-quiz__back:hover { color: var(--pp-ink); }
.pp-quiz__progress {
  margin-top: 16px; height: 6px; border-radius: 99px;
  background: #EEEDE9; overflow: hidden;
}
.pp-quiz__progress span { display: block; height: 6px; background: var(--pp-blue); transition: width .25s; }
.pp-quiz__q {
  margin-top: 40px; font-family: var(--pp-display); font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.03em;
}
.pp-quiz__options { margin-top: 32px; display: grid; gap: 10px; }
.pp-quiz__opt {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  border-radius: 14px; border: 1.5px solid rgba(22,24,28,.14); padding: 19px 24px;
  font: inherit; font-size: 17px; font-weight: 500; background: #fff;
  cursor: pointer; text-align: left; color: var(--pp-ink);
}
.pp-quiz__opt:hover { border-color: var(--pp-blue); background: var(--pp-blue-soft); }
.pp-quiz__opt:last-child span:last-child { color: var(--pp-blue); }
.pp-quiz__note { margin-top: 32px; font-size: 13px; line-height: 1.65; color: var(--pp-faint); }

.pp-quiz__result {
  margin-top: 18px; font-family: var(--pp-display); font-weight: 600;
  font-size: clamp(28px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -.03em;
}
.pp-quiz__body { margin-top: 20px; font-size: 18px; line-height: 1.75; color: var(--pp-ink-2); }
.pp-quiz__actions { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; }
.pp-quiz__restart { border: 1px solid rgba(22,24,28,.2); background: none; }
.pp-quiz__restart:hover { background: var(--pp-bg); }
.pp-quiz__help {
  margin-top: 14px; border-radius: 20px; background: #fff;
  padding: 30px 32px;
}

/* =========================================================================
   Blog
   ====================================================================== */
.pp-blog__title { margin-top: 16px; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; max-width: 16em; }
.pp-blog__lead { margin-top: 16px; max-width: 40em; }

.pp-grid--2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-top: 28px; }

.pp-post { border-radius: 20px; background: var(--pp-soft); overflow: hidden; }
.pp-post:hover { background: var(--pp-blue-soft); }
.pp-post__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.pp-post__img { height: 220px; overflow: hidden; }
.pp-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-post__img .pp-imgslot { min-height: 220px; border-radius: 0; }
.pp-post__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pp-post__meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--pp-mono); font-size: 11px; letter-spacing: .08em; color: var(--pp-faint);
}
.pp-post__kind { color: var(--pp-blue); }
.pp-post__title { font-size: 21px; }

.pp-article { padding: 0; overflow: hidden; }
.pp-crumbs {
  padding: 20px 32px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: 13.5px; color: var(--pp-faint); border-bottom: 1px solid rgba(22,24,28,.07);
}
.pp-crumbs a { color: var(--pp-faint); }
.pp-crumbs a:hover { color: var(--pp-blue); }
.pp-crumbs .is-current { color: var(--pp-ink); font-weight: 500; }
.pp-article__hero { height: 380px; }
.pp-article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Szerokość kolumny tekstu — przestawiana ustawieniem motywu, nie arkuszem
   z wtyczki. 780 px to około 75 znaków w wierszu, czyli miara, przy której
   oko trafia w początek następnej linii bez szukania. Szersze warianty są,
   bo bywają potrzebne przy tekstach z szerokimi tabelami, ale nie są
   domyślne z tego samego powodu, dla którego gazety mają wąskie łamy. */
.pp-article__body { max-width: 780px; margin: 0 auto; padding: 56px 32px 80px; }
.pp-article--szeroki .pp-article__body { max-width: 1040px; }
.pp-article--pelny   .pp-article__body { max-width: none; padding-inline: 48px; }

/* Podpis pod obrazkiem wyróżnionym trzyma się tej samej miary co tekst. */
.pp-article--szeroki .pp-aiflag--hero { max-width: 1040px; }
.pp-article--pelny   .pp-aiflag--hero { max-width: none; padding-inline: 48px; }
.pp-article__title { margin-top: 22px; font-size: clamp(30px, 4vw, 48px); line-height: 1.06; }
.pp-article__cta { display: block; margin-top: 52px; padding: 40px; }
.pp-article__cta .pp-body { margin-top: 10px; }
.pp-article__cta .pp-btn { margin-top: 22px; }

.pp-prose { margin-top: 36px; }
.pp-prose > * + * { margin-top: 24px; }
.pp-prose p, .pp-prose li { font-size: 18px; line-height: 1.75; color: #26292F; }
.pp-prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 44px; }
.pp-prose h3 { font-size: 21px; margin-top: 34px; }
.pp-prose ul, .pp-prose ol { padding-left: 22px; }
.pp-prose li + li { margin-top: 8px; }
.pp-prose img { max-width: 100%; height: auto; border-radius: 14px; }
.pp-prose blockquote {
  border-left: 3px solid var(--pp-blue); padding-left: 20px;
  font-size: 19px; line-height: 1.7; color: var(--pp-ink-2);
}
.pp-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.pp-prose th, .pp-prose td { padding: 10px 12px; border-bottom: 1px solid rgba(22,24,28,.12); text-align: left; }

@media (max-width: 1080px) {
  .pp-grid--2 { grid-template-columns: minmax(0,1fr); }
  .pp-quiz { padding: 32px 4px 48px; }
  .pp-quiz__card { padding: 32px 24px; }
  .pp-article__hero { height: 240px; }
  .pp-article__body { padding: 36px 22px 56px; }
  .pp-aiflag--hero { padding: 12px 22px 0; }
}

/* =========================================================================
   Pomoc i kontakt
   ====================================================================== */
.pp-help__head { margin-top: 16px; align-items: end; gap: 44px; }
.pp-step__num--dark { background: var(--pp-ink); }

.pp-deflist { margin: 24px 0 0; border-top: 1px solid rgba(22,24,28,.12); }
.pp-deflist__row {
  display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr);
  gap: 32px; padding: 20px 4px; border-bottom: 1px solid rgba(22,24,28,.1);
}
.pp-deflist dt { font-size: 16px; font-weight: 600; }
.pp-deflist dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--pp-muted); }

.pp-contact__cards { margin-top: 40px; }
.pp-bigbox {
  border-radius: 20px; padding: 36px 34px;
  display: flex; flex-direction: column; gap: 6px;
}
.pp-bigbox--dark { background: var(--pp-ink); color: #fff; }
.pp-bigbox--dark:hover { background: var(--pp-blue); color: #fff; }
.pp-bigbox--soft { background: var(--pp-soft); color: var(--pp-ink); }
.pp-bigbox--soft:hover { background: var(--pp-blue-soft); color: var(--pp-ink); }
.pp-bigbox--dark .pp-contactbox__label { color: rgba(255,255,255,.55); }
.pp-bigbox__value {
  font-family: var(--pp-display); font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700; letter-spacing: -.02em; word-break: break-word;
}
.pp-bigbox__note { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--pp-muted); }
.pp-bigbox--dark .pp-bigbox__note { color: rgba(255,255,255,.65); }

.pp-cbbox {
  margin-top: var(--pp-gap); width: 100%; border: 0; cursor: pointer;
  padding: 32px 34px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
  text-align: left; font: inherit;
}
.pp-cbbox:hover { background: var(--pp-blue-dark); }
.pp-cbbox__title { display: block; color: #fff; }
.pp-cbbox__body { display: block; margin-top: 8px; }

.pp-firmdata {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid rgba(22,24,28,.1);
  display: flex; gap: 40px; flex-wrap: wrap;
  font-size: 14.5px; color: var(--pp-muted);
}
.pp-firmdata .pp-eyebrow { display: block; margin-bottom: 4px; font-size: 11.5px; letter-spacing: .1em; }

@media (max-width: 1080px) {
  .pp-deflist__row { grid-template-columns: minmax(0,1fr); gap: 8px; }
}

/* =========================================================================
   Zamówienie
   ====================================================================== */
.pp-checkout { align-items: start; }
.pp-checkout__title { margin-top: 16px; font-family: var(--pp-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.03em; }
.pp-checkout__lead { margin-top: 12px; }
.pp-checkout__pay { margin-top: 40px; font-size: 22px; }
.pp-checkout__terms { margin-top: 28px; font-size: 13px; color: var(--pp-faint); }

.pp-fields {
  margin-top: 32px; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px;
}
.pp-field { display: grid; gap: 7px; margin: 0; }
.pp-field--wide { grid-column: 1 / -1; }
.pp-field label { font-size: 13px; font-weight: 600; color: var(--pp-ink-2); }
.pp-field__opt { font-weight: 400; color: var(--pp-faint); }
.pp-field__note { font-size: 12.5px; line-height: 1.55; color: var(--pp-faint); }
.pp-fields .pp-input { margin-top: 0; padding: 14px 16px; border-radius: 12px; }
select.pp-input { appearance: none; background-image: none; }

.pp-paybox {
  margin-top: 16px; border-radius: 14px;
  border: 1.5px solid rgba(22,24,28,.14); background: #FAFAF8;
  padding: 20px 22px; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
}
.pp-paybox > div { flex: 1; min-width: 260px; }
.pp-paybox .pp-small { margin-top: 6px; font-size: 13.5px; }

/* --- podsumowanie -------------------------------------------------------- */
.pp-summary { position: sticky; top: 14px; padding: 40px 36px; }
.pp-toggle--dark { display: flex; width: 100%; margin-top: 18px; background: rgba(255,255,255,.1); }
.pp-toggle--dark .pp-toggle__btn { flex: 1; padding: 9px 6px; font-size: 13.5px; color: rgba(255,255,255,.7); }
.pp-toggle--dark .pp-toggle__btn.is-active { background: #fff; color: var(--pp-ink); }

.pp-picks { margin-top: 14px; display: grid; gap: 8px; }
.pp-pick {
  width: 100%; text-align: left; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.18); background: transparent;
  padding: 18px 20px; font: inherit; color: #fff;
}
.pp-pick.is-active { border-color: var(--pp-blue); background: rgba(46,107,239,.18); }
.pp-pick__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pp-pick__name { font-family: var(--pp-display); font-size: 19px; font-weight: 600; }
.pp-pick__price { font-family: var(--pp-mono); font-size: 15px; }

.pp-promo { margin-top: 24px; }
.pp-promo__row { margin-top: 8px; display: flex; gap: 8px; }
.pp-input--mono {
  margin-top: 0; flex: 1; min-width: 0; padding: 12px 14px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: #fff;
  font-family: var(--pp-mono); font-size: 13.5px;
  letter-spacing: .06em; text-transform: uppercase;
}
.pp-input--mono::placeholder { color: rgba(255,255,255,.4); }
.pp-promo .pp-btn--outline { padding: 12px 18px; border-radius: 12px; }
.pp-promo__msg { display: block; margin-top: 8px; font-size: 13px; }
.pp-promo__msg.is-ok { color: #7FDCA4; }
.pp-promo__msg.is-bad { color: #FF9F8A; }

.pp-sumrows {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: grid; gap: 9px; font-size: 14.5px;
}
.pp-sumrow { display: flex; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.75); }
.pp-sumrow--total {
  padding-top: 9px; border-top: 1px solid rgba(255,255,255,.15);
  font-weight: 600; font-size: 16px; color: #fff;
}
.pp-mono { font-family: var(--pp-mono); white-space: nowrap; }
.pp-vatnote { margin-top: 12px; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.45); }
.pp-summary__cta { width: 100%; margin-top: 20px; }

.pp-guarantees { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13px; color: rgba(255,255,255,.6); }
.pp-guarantees li::before { content: "\2713"; margin-right: 7px; }

/* --- komunikaty i ekran po zakupie --------------------------------------- */
.pp-notice { padding: 22px 28px; display: grid; gap: 6px; font-size: 15px; line-height: 1.6; }
.pp-notice--error { border-left: 4px solid var(--pp-alert); color: var(--pp-alert); }

.pp-done { padding: 14px; display: flex; min-height: 60vh; }
.pp-done__inner {
  flex: 1; border-radius: 16px; background: var(--pp-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 32px;
}
.pp-done__tick {
  width: 64px; height: 64px; border-radius: 99px;
  background: var(--pp-blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.pp-done__tick.is-wait { background: var(--pp-faint); }
.pp-done__title {
  margin-top: 28px; max-width: 18em;
  font-family: var(--pp-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.03em;
}
.pp-done__body { margin-top: 16px; max-width: 44em; }
.pp-done__actions { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pp-done__contact { margin-top: 28px; font-family: var(--pp-mono); font-size: 12px; color: var(--pp-faint); }

@media (max-width: 1080px) {
  .pp-fields { grid-template-columns: minmax(0,1fr); }
  .pp-summary { position: static; }
}

/* --- rytm pionowy sekcji przypadku --------------------------------------- */
.pp-case { display: flex; flex-direction: column; justify-content: center; }
.pp-case .pp-eyebrow { margin-bottom: 18px; }
.pp-case .pp-h2 { margin-bottom: 20px; }
.pp-case .pp-body { margin-bottom: 26px; }
.pp-case .pp-kicker { margin: 0; }

/* --- oś czasu: od warunkowej do pełnej ----------------------------------- */
.pp-tl {
  display: flex; flex-direction: column; justify-content: center;
  gap: 22px; padding: 30px 34px; height: 100%;
}
.pp-tl__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 26px; position: relative;
}
/* Linia łącząca kropki — zaczyna się przy pierwszej i kończy przy ostatniej. */
.pp-tl__list::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 2px; background: rgba(22,24,28,.14);
}
.pp-tl__item {
  display: grid; grid-template-columns: 16px 74px minmax(0,1fr);
  gap: 14px; align-items: baseline; position: relative;
}
.pp-tl__dot {
  width: 16px; height: 16px; border-radius: 99px;
  background: #fff; border: 2px solid var(--pp-faint);
  align-self: start; margin-top: 2px; position: relative; z-index: 1;
}
.pp-tl__item.is-alert .pp-tl__dot { border-color: var(--pp-alert); background: var(--pp-alert); }
.pp-tl__item.is-ok .pp-tl__dot { border-color: #1F9D63; background: #1F9D63; }
.pp-tl__date {
  font-family: var(--pp-mono); font-size: 12px; color: var(--pp-faint);
  white-space: nowrap;
}
.pp-tl__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-tl__title { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.pp-tl__item.is-alert .pp-tl__title { color: var(--pp-alert); }
.pp-tl__item.is-ok .pp-tl__title { color: #16744A; }
.pp-tl__meta { font-size: 14px; line-height: 1.6; color: var(--pp-muted); }

.pp-tl__arch {
  margin: 4px 0 0; padding: 16px 20px; border-radius: 12px;
  background: var(--pp-soft); font-size: 14px; line-height: 1.65; color: var(--pp-ink-2);
}
.pp-tl__arch strong { color: var(--pp-ink); }

@media (max-width: 720px) {
  .pp-tl { padding: 20px 16px; }
  .pp-tl__item { grid-template-columns: 16px minmax(0,1fr); }
  .pp-tl__date { grid-column: 2; order: -1; }
  .pp-tl__body { grid-column: 2; }
}

/* --- jak to działa: kroki jako sekwencja --------------------------------- */
.pp-flow {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0; margin-top: 12px;
}
.pp-flow__step { position: relative; padding: 0 22px; }
.pp-flow__step:first-child { padding-left: 0; }
.pp-flow__step:last-child { padding-right: 0; }

/* Linia biegnie przez środek rysunków i łączy kroki w jedną drogę. */
.pp-flow__step::before {
  content: ""; position: absolute; top: 34px; left: 0; right: 100%;
  height: 2px; background: rgba(22,24,28,.12);
}
.pp-flow__step + .pp-flow__step::before { right: auto; width: 100%; left: -50%; }
.pp-flow__step:first-child::before { display: none; }

.pp-flow__art {
  position: relative; z-index: 1; width: 72px; height: 68px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pp-surface); margin-bottom: 18px;
}
.pp-flow__num {
  display: block; font-family: var(--pp-mono); font-size: 11px;
  letter-spacing: .16em; color: var(--pp-faint); margin-bottom: 8px;
}
.pp-flow .pp-small { margin-top: 10px; }

/* Rysunki: jeden odcień błękitu plus szarość, żeby nie konkurowały
   z kartą bilansu w nagłówku. */
.pp-gl { display: block; }
.pp-gl-paper { fill: none; stroke: var(--pp-ink); stroke-width: 2.5; }
.pp-gl-read { fill: var(--pp-blue); }
.pp-gl-empty { fill: none; stroke: var(--pp-faint); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pp-gl-badge { fill: var(--pp-blue); }
.pp-gl-tick { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pp-gl-solid { fill: #DCDAD2; }
.pp-gl-part { fill: var(--pp-blue); }
.pp-gl-part2 { fill: #E5A23C; }
.pp-gl-part3 { fill: var(--pp-alert); }
.pp-gl-top { fill: var(--pp-blue); }
.pp-gl-arrow { fill: none; stroke: var(--pp-faint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pp-gl-pen { fill: none; stroke: var(--pp-blue); stroke-width: 2.5; stroke-linecap: round; }
.pp-gl-rule { fill: #DCDAD2; }
/* Strzałka w kolorze marki — tam, gdzie ruch jest sednem rysunku, a nie
   tylko połączeniem dwóch brył. */
.pp-gl-arrowb { fill: none; stroke: var(--pp-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pp-gl-onblue { fill: rgba(255,255,255,.9); }
.pp-gl-topfill { fill: var(--pp-blue); }
/* Wypełnienie kolorem tła, żeby bryła nachodząca na inną ją zasłaniała
   zamiast prześwitywać. */
.pp-gl-card { fill: var(--pp-surface); stroke: var(--pp-ink); stroke-width: 2.5; stroke-linejoin: round; }

@media (max-width: 980px) {
  .pp-flow { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 0; }
  .pp-flow__step:nth-child(odd) { padding-left: 0; }
  .pp-flow__step:nth-child(even) { padding-right: 0; }
  .pp-flow__step:nth-child(odd)::before { display: none; }
}
@media (max-width: 620px) {
  .pp-flow { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .pp-flow__step { padding: 0; }
  .pp-flow__step::before { display: none; }
}

/* --- zestawienie: arkusz kontra aplikacja -------------------------------- */
.pp-vs { margin-top: 8px; display: flex; flex-direction: column; }

.pp-vs__head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0 20px; padding: 0 0 12px 0; margin-left: 34%;
}
.pp-vs__col {
  font-family: var(--pp-mono); font-size: 13px; letter-spacing: .07em;
  padding-left: 30px;
}
.pp-vs__col--old { color: rgba(255,255,255,.6); }
.pp-vs__col--new { color: #A9C0FF; }

.pp-vs__row {
  display: grid; grid-template-columns: 34% minmax(0,1fr) minmax(0,1fr);
  gap: 0 20px; align-items: start;
  padding: 22px 0; border-top: 1px solid rgba(255,255,255,.14);
}
.pp-vs__row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }

.pp-vs__topic {
  font-size: 17.5px; line-height: 1.3; font-weight: 600;
  letter-spacing: -.01em; color: #fff; margin: 0; padding-right: 20px;
}

.pp-vs__side { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; }
.pp-vs__mark { margin-top: 2px; }
.pp-vs__side--old .pp-vs__mark { color: rgba(255,255,255,.35); }
.pp-vs__side--new .pp-vs__mark { color: #7E9DFF; }
.pp-vs__text { margin: 0; font-size: 14.5px; line-height: 1.6; }
.pp-vs__side--old .pp-vs__text { color: rgba(255,255,255,.5); }
.pp-vs__side--new .pp-vs__text { color: rgba(255,255,255,.86); }

@media (max-width: 900px) {
  .pp-vs__head { display: none; }
  .pp-vs__row { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 20px 0; }
  .pp-vs__topic { padding-right: 0; margin-bottom: 2px; }
  /* Bez nagłówków kolumn każda strona musi się przedstawić sama. */
  .pp-vs__side::before {
    content: attr(data-label); grid-column: 1 / -1;
    font-family: var(--pp-mono); font-size: 12px; letter-spacing: .07em;
    margin-bottom: 2px;
  }
  .pp-vs__side--old::before { color: rgba(255,255,255,.32); }
  .pp-vs__side--new::before { color: #9DB8FF; }
}

/* --- czym jest PPWR: fakty i pytania ------------------------------------- */
.pp-about { margin-top: 4px; }
.pp-about__intro { margin: 0; }

/* Cztery fakty w rzędzie: liczba nad podpisem, żeby przy równej
   szerokości kolumn nie łamały się w losowych miejscach. */
.pp-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 3px;
}
.pp-facts__item {
  display: flex; flex-direction: column; gap: 7px;
  padding: 20px 22px; border-radius: 12px; background: var(--pp-soft);
}
.pp-facts__value {
  font-family: var(--pp-mono); font-size: 19px; font-weight: 500;
  color: var(--pp-ink); white-space: nowrap; letter-spacing: -.01em;
}
.pp-facts__label { font-size: 13.5px; line-height: 1.5; color: var(--pp-muted); }

.pp-about__faqlabel { display: block; margin-top: 52px; margin-bottom: 10px; }

/* Pytania jako lista z liniami zamiast sześciu ramek — mniej pudełek,
   ten sam materiał czyta się szybciej. */
.pp-qalist {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0 48px; border-top: 1px solid rgba(22,24,28,.12);
}
.pp-qalist__row { padding: 22px 0; border-bottom: 1px solid rgba(22,24,28,.1); }
.pp-qalist__q {
  margin: 0 0 8px; font-size: 16.5px; line-height: 1.35;
  font-weight: 600; letter-spacing: -.01em;
}
.pp-qalist__a { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--pp-muted); }

@media (max-width: 980px) {
  .pp-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pp-qalist { grid-template-columns: minmax(0,1fr); gap: 0; }
}
@media (max-width: 560px) {
  .pp-facts { grid-template-columns: minmax(0,1fr); }
  .pp-facts__item { padding: 16px 18px; }
}

/* --- cennik: rozliczenie, etykieta, adresat ------------------------------ */
.pp-plan__toggle { margin-top: 22px; align-self: flex-start; }
.pp-plan--blue .pp-toggle { background: rgba(255,255,255,.16); }
.pp-plan--blue .pp-toggle__btn { color: rgba(255,255,255,.85); }
.pp-plan--blue .pp-toggle__btn.is-active { background: #fff; color: var(--pp-ink); }

.pp-plan__badge {
  position: absolute; top: 0; right: 36px; transform: translateY(-50%);
  font-family: var(--pp-mono); font-size: 11.5px; letter-spacing: .07em;
  background: var(--pp-ink); color: #fff;
  padding: 7px 14px; border-radius: var(--pp-r-pill);
}

.pp-plan__for {
  margin: 16px 0 0; font-size: 15px; line-height: 1.6;
  color: var(--pp-muted); max-width: 30em;
}
.pp-plan--blue .pp-plan__for { color: rgba(255,255,255,.8); }

@media (max-width: 720px) {
  .pp-plan__badge { right: 24px; }
}

/* --- karta kontaktu na stronie głównej ------------------------------------ */
/* Karta jest tak wysoka jak sąsiednie FAQ, więc treść wyśrodkowana w pionie
   zamiast przyklejonej do góry — pustka rozkłada się równo, a nie zbiera
   na dole. */
/* Treść przy górnej krawędzi, nie na środku karty. Wyśrodkowanie
   przesuwało ją w dół albo w górę zależnie od tego, która karta w parze
   jest wyższa — a wysokość karty z pytaniami zmienia się z ich liczbą.
   Nagłówki obu kart stoją równo tylko wtedy, gdy obie zaczynają od góry. */
.pp-helpcard { justify-content: flex-start; }
.pp-helpcard .pp-eyebrow { margin-bottom: 16px; }
.pp-helpcard .pp-h2 { margin-bottom: 14px; }
.pp-helpcard .pp-body { margin-bottom: 0; }
.pp-helpcard .pp-help__links { margin-top: 30px; }
.pp-helpcard .pp-contactbox__value { font-size: 19px; }

/* Odstępy przepisane jeden do jednego z kafla kontaktu obok. Nagłówki
   obu kart mają stać na tej samej wysokości, a stoją tylko wtedy, gdy
   wszystko nad nimi ma identyczną wysokość — nadtytuł i jego margines. */
/* Kafel pytań ustawiony dokładnie jak kafel kontaktu obok: to samo
   wypełnienie i ten sam układ kolumnowy.

   Układ jest tu ważniejszy od wypełnienia. W zwykłym bloku margines dolny
   nadtytułu i górny nagłówka zlewają się w jeden, w kolumnie elastycznej
   sumują — różnica wychodziła czternaście pikseli i to ona przesuwała
   nagłówek pytań w dół. Sama zmiana wypełnienia by tego nie naprawiła. */
.pp-faqcard { display: flex; flex-direction: column; padding: 44px 40px; }
.pp-faqcard .pp-eyebrow { display: block; margin-bottom: 16px; }
.pp-faqcard .pp-h2 { margin-bottom: 14px; }

/* --- plan wieczysty ------------------------------------------------------- */
.pp-plan--outline {
  background: transparent;
  border: 1.5px solid rgba(22,24,28,.16);
}
.pp-plan__amount--alt {
  font-family: var(--pp-display); font-size: 27px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15;
}

/* --- okno modalne --------------------------------------------------------- */
.pp-modal {
  border: 0; padding: 0; background: transparent;
  max-width: 640px; width: calc(100% - 32px);
  color: var(--pp-ink);
}
.pp-modal::backdrop { background: rgba(16,18,22,.55); backdrop-filter: blur(3px); }

.pp-modal__body {
  background: var(--pp-surface); border-radius: 20px;
  padding: 38px 40px 32px; position: relative;
  /* Pion przewijamy, poziom nigdy — okno ma szerokość ekranu i cokolwiek
     z niej wystaje, jest błędem układu, a nie treścią do obejrzenia. */
  max-height: 88vh; overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 24px 60px rgba(16,18,22,.28);
}
.pp-modal__x { position: absolute; top: 0; right: 0; z-index: 2; }
.pp-modal__close {
  border: 0; background: transparent; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--pp-faint);
  padding: 16px 20px;
}
.pp-modal__close:hover { color: var(--pp-ink); }

.pp-modal__title {
  margin: 10px 0 0; font-family: var(--pp-display);
  font-size: 27px; line-height: 1.2; letter-spacing: -.02em;
}
.pp-modal__lead { margin: 10px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--pp-muted); }
.pp-modal__consent { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--pp-faint); }
.pp-modal__error {
  margin: 12px 0 0; font-size: 14px; color: var(--pp-alert);
}

/* Siatkę dwukolumnową wnosi klasa .pp-leadform, wspólna z formularzem
   na stronie kontaktu. Tutaj zostaje tylko odstęp pod wprowadzeniem. */
.pp-quote__form > .pp-modal__lead { margin-bottom: 8px; }

.pp-label { font-size: 13.5px; font-weight: 600; }
.pp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-quote__submit { margin-top: 6px; }

.pp-quote__done { text-align: center; padding: 22px 0 8px; }
.pp-quote__done .pp-modal__lead { max-width: 34em; margin-inline: auto; }
.pp-quote__done .pp-btn { margin-top: 22px; }

@media (max-width: 560px) {
  .pp-modal__body { padding: 30px 22px 26px; }
  .pp-quote__form { grid-template-columns: minmax(0,1fr); }
  .pp-modal__title { font-size: 23px; }
}

/* --- zapewnienia w stopce ------------------------------------------------- */
/* Równe przerwy, nie równe kolumny. Przy siatce każda pozycja dostawała
   ten sam slot, ale teksty mają różną długość, więc po krótszym zostawało
   więcej powietrza. Rozkład od krawędzi do krawędzi wyrównuje to, co widać
   naprawdę — odstęp między sąsiednimi pozycjami. */
.pp-trust {
  list-style: none; margin: 40px 0 0; padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap;
}
.pp-trust__item {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.72);
}
.pp-trust__icon { flex: none; color: #8FA9F5; margin-top: 1px; }

@media (max-width: 980px) {
  /* Po złamaniu w dwie linie rozkład od krawędzi do krawędzi rozjeżdża
     ostatni wiersz — wtedy lepsza jest zwykła siatka. */
  .pp-trust { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .pp-trust { gap: 12px 20px; margin-top: 30px; }
  .pp-trust__item { font-size: 13px; }
}
@media (max-width: 480px) {
  .pp-trust { grid-template-columns: minmax(0,1fr); }
}

/* --- sekcja porównania: własne tło ---------------------------------------- */
/* Trzecia ciemna płaszczyzna na stronie nie może być kolejną płaską czernią.
   Granat z delikatną siatką i poświatą czyta się jak arkusz kalkulacyjny —
   pasuje do tematu sekcji, a przy tym odróżnia ją od karty wyżej.
   Wszystko gradientami: zero plików do wczytania. */
.pp-card--grid {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(46,107,239,.28) 0%, rgba(46,107,239,0) 55%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 56px),
    #0E1526;
  position: relative; overflow: hidden;
}
/* Siatka wygasza się ku dołowi, żeby nie walczyła z tekstem w wierszach. */
.pp-card--grid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,21,38,0) 30%, rgba(14,21,38,.9) 100%);
}
.pp-card--grid > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .pp-card--grid { transition: background-color .3s; }
}

/* --- strona kontaktu ------------------------------------------------------ */
.pp-contact {
  margin-top: 40px; display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 44px;
  align-items: start;
}

.pp-leadform {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px;
}
.pp-leadform > *:not(.pp-field--half) { grid-column: 1 / -1; }
.pp-contact__h { margin: 10px 0 0; }
.pp-contact__lead { margin: 10px 0 6px; }
.pp-contact__consent { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--pp-faint); }
.pp-leadform__submit { margin-top: 4px; }

/* Lista rozwijana bez własnej strzałki wygląda jak zwykłe pole tekstowe.
   Znacznik rysowany tłem, żeby nie dokładać elementu do znacznika. */
.pp-select {
  appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A5F68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}

.pp-contact__done { text-align: center; padding: 40px 20px; }
.pp-contact__done .pp-h2 { margin-top: 14px; }
.pp-contact__done .pp-body { margin-top: 10px; }

/* Kolumna z kontaktem towarzyszy formularzowi przy przewijaniu —
   przy dłuższej wiadomości numer telefonu inaczej ucieka poza ekran.
   Przyklejenie działa tylko tam, gdzie kolumny stoją obok siebie. */
.pp-contact__side { display: grid; gap: 12px; align-self: start; }

@media (min-width: 981px) {
  .pp-contact__side { position: sticky; top: 24px; }
}
.pp-bigbox__value--sm { font-size: 21px; word-break: break-word; }

.pp-cbbox--side {
  display: grid; gap: 8px; text-align: left; width: 100%;
  border: 0; cursor: pointer; border-radius: 18px;
  background: var(--pp-blue); color: #fff; padding: 26px 28px;
}
.pp-cbbox--side:hover { background: var(--pp-blue-dark); }
.pp-cbbox--side .pp-cbbox__title { font-family: var(--pp-display); font-size: 19px; font-weight: 600; }
.pp-cbbox--side .pp-cbbox__body { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.82); }
.pp-cbbox__btn { justify-self: start; margin-top: 10px; }

.pp-contact__attach {
  margin: 4px 0 0; padding: 16px 20px; border-radius: 12px;
  background: var(--pp-soft); font-size: 13.5px; line-height: 1.6; color: var(--pp-muted);
}
.pp-contact__attach strong { color: var(--pp-ink); }


@media (max-width: 980px) {
  .pp-contact { grid-template-columns: minmax(0,1fr); gap: 34px; }
}
@media (max-width: 560px) {
  .pp-leadform { grid-template-columns: minmax(0,1fr); }
}

/* --- wybór plików --------------------------------------------------------- */
.pp-files {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border: 1.5px dashed rgba(22,24,28,.2);
  border-radius: 12px; cursor: pointer; background: var(--pp-soft);
}
.pp-files:hover { border-color: var(--pp-blue); }
.pp-files input[type="file"] { position: absolute; left: -9999px; }
.pp-files__btn {
  flex: none; padding: 8px 16px; border-radius: var(--pp-r-pill);
  background: var(--pp-surface); border: 1px solid rgba(22,24,28,.16);
  font-size: 14px; font-weight: 500;
}
.pp-files__list { font-size: 13.5px; color: var(--pp-faint); min-width: 0; word-break: break-word; }
.pp-files__list.has-files { color: var(--pp-ink); }
.pp-files__hint { font-size: 12.5px; color: var(--pp-faint); }

/* --- nagłówek bloga: tło z linii ------------------------------------------ */
/* Poziome linie jak w zapisanym zeszycie, gasnące ku prawej stronie,
   plus delikatna poświata marki. Motyw pasuje do sekcji z wiedzą,
   a rysunek powstaje z gradientów — bez żadnego pliku. */
.pp-card--paper {
  position: relative; overflow: hidden;
  background:
    radial-gradient(85% 130% at 100% 0%, rgba(46,107,239,.16) 0%, rgba(46,107,239,0) 62%),
    repeating-linear-gradient(180deg, rgba(22,24,28,.1) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(22,24,28,.05) 0 1px, transparent 1px 30px),
    var(--pp-surface);
}
/* Linie wygaszone tam, gdzie leży tekst — inaczej przeszkadzają w czytaniu. */
.pp-card--paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--pp-surface) 4%, rgba(255,255,255,.82) 40%, rgba(255,255,255,0) 72%);
}
.pp-card--paper > * { position: relative; z-index: 1; }

/* --- tła nagłówków podstron ----------------------------------------------- */
/* Rysunek jest osobnym elementem w prawej połowie karty, a nie obrazkiem
   w tle. Dzięki `slice` w SVG dochodzi do obu krawędzi niezależnie od
   wysokości nagłówka — a ta zmienia się z długością tytułu w każdym
   z ośmiu języków. Plik rastrowy albo by się rozmywał, albo zostawiał
   pas pustki u dołu; oba warianty widać było na pierwszy rzut oka.

   Tło karty jest wyraźnie zabarwione, nie białe: nagłówek podstrony ma
   się różnić od kart z treścią pod spodem, a nie tylko mieć w rogu
   obrazek. */
.pp-card--art {
  position: relative; overflow: hidden;
  background:
    linear-gradient(104deg,
      var(--pp-surface) 0%,
      #F2F6FE 42%,
      #E4EDFD 74%,
      #DCE7FB 100%);
}
.pp-card--art > *:not(.pp-card__art) { position: relative; z-index: 2; }

.pp-card__art {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(62%, 720px); z-index: 0;
  pointer-events: none;
}
.pp-ha { display: block; width: 100%; height: 100%; }

/* Pas wygaszenia trzyma tekst czytelnym niezależnie od tego, jak daleko
   w lewo sięgnie rysunek przy wąskim ekranie. */
.pp-card__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    #EEF3FE 0%,
    rgba(238,243,254,.75) 22%,
    rgba(238,243,254,0) 52%);
}

@media (max-width: 900px) {
  /* Na wąskim ekranie rysunek schodzi do prawego górnego rogu i blednie —
     inaczej wchodzi pod tekst, a tekst jest tu ważniejszy. */
  .pp-card__art { width: 74%; bottom: auto; height: 62%; opacity: .5; }
  .pp-card__art::after {
    background: linear-gradient(160deg, rgba(238,243,254,0) 30%, #EEF3FE 92%);
  }
}

/* --- treść wklejona z zewnętrznego edytora --------------------------------- */
/* Artykuły przygotowywane poza kokpitem bywają owinięte we własny znacznik
   z klasą `ppwr-article`. Nie ma powodu, żeby wyglądały inaczej niż wpisy
   pisane w edytorze — więc zamiast dorabiać do nich osobny arkusz,
   podpinamy je pod te same reguły co `.pp-prose`.

   Sekcje wewnątrz dostają odstęp, bo to one zastępują tam akapity jako
   jednostka podziału, a `aside` służy za ramkę „najważniejsze". */
/* Typografia na samym opakowaniu, nie tylko na akapitach. Gdyby na serwerze
   zabrakło rozszerzenia DOM, luźny tekst nie zostanie zawinięty w akapit —
   i wtedy to te wartości decydują, czy pierwszy blok wygląda jak reszta. */
.pp-prose .ppwr-article { font-size: 18px; line-height: 1.75; color: #26292F; }

.pp-prose .ppwr-article > section { margin-top: 44px; }
.pp-prose .ppwr-article > section:first-of-type { margin-top: 28px; }
.pp-prose .ppwr-article h2 { margin-bottom: 14px; }
.pp-prose .ppwr-article p { margin: 0 0 18px; }

.pp-prose .ppwr-article aside {
  margin: 22px 0; padding: 18px 22px;
  background: var(--pp-soft); border-left: 4px solid var(--pp-blue);
  border-radius: 4px; font-size: 16.5px; line-height: 1.6;
}

/* Tabela w takim tekście bywa szersza niż kolumna — dostaje własne
   przewijanie w poziomie zamiast rozpychać cały wpis. */
.pp-prose .ppwr-article .table-responsive { overflow-x: auto; margin: 26px 0 28px; }
.pp-prose .ppwr-article table { width: 100%; min-width: 560px; }

.pp-prose .ppwr-article #zrodla small {
  display: block; margin-top: 22px;
  font-size: 14px; line-height: 1.55; color: var(--pp-muted);
}

/* --- czas czytania i pasek postępu ---------------------------------------- */
.pp-post__read { position: relative; padding-left: 18px; }
.pp-post__read::before {
  content: ""; position: absolute; left: 6px; top: 50%;
  width: 3px; height: 3px; border-radius: 99px;
  background: currentColor; opacity: .45; transform: translateY(-50%);
}

.pp-readbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 120; pointer-events: none;
  background: transparent;
  opacity: 0; transition: opacity .25s;
}
.pp-readbar.is-on { opacity: 1; }
.pp-readbar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--pp-blue) 0%, #7E9DFF 60%, #A9C0FF 100%);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(46,107,239,.5);
}

/* --- udostępnianie wpisu -------------------------------------------------- */
.pp-share {
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(22,24,28,.12);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.pp-share__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pp-share__btn {
  display: inline-flex; align-items: center; gap: 9px;
  width: 44px; height: 44px; justify-content: center;
  border-radius: 12px; border: 1px solid rgba(22,24,28,.14);
  background: var(--pp-surface); color: var(--pp-ink-2);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.pp-share__btn:hover { border-color: var(--pp-ink); color: var(--pp-ink); }

/* Barwy serwisów tylko po najechaniu — rząd kolorowych kwadratów
   przeciągałby uwagę z tekstu na przyciski. */
.pp-share__btn--linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.pp-share__btn--facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.pp-share__btn--whatsapp:hover { background: #25D366; border-color: #25D366; color: #fff; }
.pp-share__btn--mail:hover     { background: var(--pp-ink); border-color: var(--pp-ink); color: #fff; }

.pp-share__btn--copy {
  width: auto; padding: 0 16px; font-size: 14px; font-weight: 500;
  font-family: inherit;
}
.pp-share__btn--copy.is-done {
  background: #E8F6EE; border-color: #1F9D63; color: #16744A;
}

@media (max-width: 560px) {
  .pp-share { gap: 14px; }
  .pp-share__label { display: none; }
  .pp-share__btn--copy { width: 44px; padding: 0; }
}


/* --- logo z pliku ---------------------------------------------------------- */
.pp-logo__img { display: block; height: 34px; width: auto; max-width: 190px; object-fit: contain; }
/* Logo w stopce większe niż w nagłówku — stopka ma więcej powietrza,
   a znak jest tam jedynym elementem marki. */
.pp-footer .pp-logo__img { height: 40px; }

/* --- przyklejony nagłówek podstron ----------------------------------------- */
.pp-header--sticky {
  position: sticky; top: 10px; z-index: 90;
  box-shadow: 0 10px 30px rgba(16,18,22,.08);
}

/* --- stały pasek strony głównej -------------------------------------------- */
/* Nawigacja w bohaterze nie może się przykleić (karta przycina zawartość
   zaokrągleniem), więc po jej zniknięciu zjeżdża z góry ten sam nagłówek,
   który podstrony mają na stałe — ta sama szerokość, karta i zawartość. */
.pp-fixednav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  transform: translateY(-105%); transition: transform .28s ease;
  pointer-events: none;
}
.pp-fixednav.is-on { transform: translateY(0); }
.pp-fixednav__inner {
  max-width: var(--pp-max); margin-inline: auto;
  padding: 10px 14px 0;
}
.pp-fixednav .pp-header {
  pointer-events: auto;
  box-shadow: 0 12px 34px rgba(16,18,22,.12);
}

/* Na wąskim ekranie pasek był wyłączony. Skutek: po przewinięciu bohatera
   na stronie głównej nie zostawało nic — ani odnośników, ani przycisku
   menu — i jedyną drogą do nawigacji był powrót na samą górę.

   Zostaje więc także na telefonie, tyle że w wersji zwiniętej: znak marki
   i hamburger. Pełny zestaw odnośników i tak jest tam ukryty, a to, czego
   naprawdę brakowało, to sposób otwarcia menu. */
@media (max-width: 900px) {
  .pp-fixednav__inner { padding: 8px 8px 0; }
  .pp-fixednav .pp-nav { min-height: 56px; }
}

/* --- centrum pomocy ------------------------------------------------------- */
/* Pole i przycisk tej samej wysokości i o tym samym zaokrągleniu —
   .pp-input niesie własny margines górny z formularzy, który tutaj
   zsuwał je względem przycisku. */
.pp-kb__search {
  margin-top: 30px; display: flex; gap: 10px; max-width: 620px;
  align-items: stretch;
}
.pp-kb__input { flex: 1; margin-top: 0; }
.pp-kb__search .pp-btn {
  flex: none; padding: 0 24px; border-radius: 12px;
}

/* Trzy kroki na dobry początek. Kafle w karcie, a nie luzem na tle strony:
   wcześniej były ani sekcją, ani listą — czymś zawieszonym pomiędzy. */
.pp-kb__startgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px; margin-top: 26px;
}
.pp-kb__starttile {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--pp-soft); border: 1px solid transparent;
  border-radius: 18px; padding: 22px 22px 24px;
  color: var(--pp-ink);
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.pp-kb__starttile:hover {
  background: var(--pp-surface); border-color: rgba(46,107,239,.3);
  transform: translateY(-2px);
}

/* Numer zamiast powtórzonego znaku zapytania przy każdym kaflu. Trzy
   identyczne ikony obok siebie niczego nie rozróżniały, a to jest droga
   od pierwszego logowania — kolejność ma tu znaczenie. */
.pp-kb__n {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--pp-blue-soft); color: var(--pp-blue-dark);
  font-family: var(--pp-mono); font-size: 12.5px;
}
.pp-kb__startbody { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pp-kb__starttitle { font-size: 16px; font-weight: 600; line-height: 1.35; }
.pp-kb__startlead { font-size: 13.5px; line-height: 1.6; color: var(--pp-muted); }

.pp-kb__arrow {
  flex: none; margin-top: 4px; color: var(--pp-faint);
  transition: color .14s ease, transform .14s ease;
}
.pp-kb__starttile:hover .pp-kb__arrow { color: var(--pp-blue); transform: translateX(3px); }

@media (max-width: 900px) {
  .pp-kb__startgrid { grid-template-columns: minmax(0,1fr); }
}

.pp-kb {
  display: grid; grid-template-columns: minmax(0,280px) minmax(0,1fr);
  gap: var(--pp-gap); align-items: start;
}
.pp-kb__side { padding: 28px 24px; position: sticky; top: 86px; }
.pp-kb__sidetitle { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.pp-kb__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pp-kb__cats a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14.5px; color: var(--pp-ink-2);
}
.pp-kb__cats a:hover { background: var(--pp-soft); color: var(--pp-ink); }
.pp-kb__cats a[aria-current="true"] { background: var(--pp-blue-soft); color: var(--pp-blue-dark); font-weight: 600; }

.pp-kb__main { display: grid; gap: var(--pp-gap); }
.pp-kb__catlead { margin-top: 10px; }

.pp-kb__grid {
  margin-top: 26px; display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px;
}
.pp-kb__tile {
  display: block; padding: 22px; border-radius: 14px;
  background: var(--pp-soft); color: var(--pp-ink);
}
.pp-kb__tile:hover { background: var(--pp-blue-soft); }
.pp-kb__tiletitle { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.pp-kb__tile .pp-small { margin: 8px 0 0; color: var(--pp-muted); }

.pp-kb__pager {
  margin-top: 30px; padding-top: 20px;
  border-top: 1px solid rgba(22,24,28,.1);
  display: flex; justify-content: space-between; gap: 20px;
  font-size: 14.5px;
}
.pp-kb__pager a { color: var(--pp-ink-2); font-weight: 500; }
.pp-kb__pager a:hover { color: var(--pp-blue); }

.pp-kb__cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.pp-kb__cta .pp-body { margin-top: 10px; max-width: 44em; }
.pp-kb__cta--inline {
  margin-top: 44px; padding: 24px 28px; border-radius: 16px;
  background: var(--pp-soft);
}
.pp-kb__cta--inline .pp-small { margin: 6px 0 0; color: var(--pp-muted); max-width: 44em; }

.pp-kb__article .pp-prose { margin-top: 26px; }

@media (max-width: 1080px) {
  .pp-kb { grid-template-columns: minmax(0,1fr); }
  .pp-kb__side { position: static; }
  .pp-kb__cats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pp-kb__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .pp-kb__cats, .pp-kb__grid { grid-template-columns: minmax(0,1fr); }
  .pp-kb__search { flex-direction: column; }
}

/* --- nawigacja: stan „jesteś tutaj" -------------------------------------- */
/* Dział bieżący na kolor marki. Kropka pod odnośnikiem zamiast podkreślenia:
   podkreślenie w menu czyta się jak zwykły link, kropka jak znacznik. */
.pp-nav__links a.is-current { color: var(--pp-blue); font-weight: 600; position: relative; }
.pp-nav__links a.is-current::after {
  content: ""; position: absolute; left: 50%; bottom: -9px;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--pp-blue);
}
/* Na ciemnym pasku granat marki tonie w tle — tam świeci sam biały. */
.pp-nav--inv .pp-nav__links a.is-current { color: #fff; }
.pp-nav--inv .pp-nav__links a.is-current::after { background: #fff; }


/* --- blog: pasek kategorii i siatka 3 w rzędzie --------------------------- */
/* Pigułki zamiast listy odnośników: kategoria to wybór jednej z kilku,
   a nie przejście dalej. Licznik przy nazwie mówi z góry, ile tam jest —
   nikt nie klika w kategorię z dwoma wpisami, spodziewając się dwudziestu. */
/* Pasek kategorii jako zakładki tekstowe, nie pigułki.
   
   Pigułka zajmuje z każdej strony kilkanaście pikseli na wypełnienie
   i obwódkę. Przy czterech kategoriach to nie miało znaczenia, przy
   siedmiu rząd się łamie i ostatnia zostaje sama w drugiej linii —
   wygląda to jak niedokończony układ, a nie jak wybór.

   Zakładka tekstowa zajmuje tyle, ile ma znaków. W tej samej szerokości
   mieści się ich dwa razy więcej, a gdy kiedyś przestaną się mieścić,
   pasek przewija się w bok zamiast łamać — jeden rząd zostaje jednym
   rzędem niezależnie od liczby kategorii.

   To także bliżej reszty witryny: nagłówki sekcji są tu typograficzne,
   a nie obudowane ramkami. */
.pp-filter {
  display: flex; gap: 22px;
  margin-top: 30px; padding-bottom: 0;
  border-bottom: 1px solid rgba(22,24,28,.08);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pp-filter::-webkit-scrollbar { display: none; }

.pp-filter__btn {
  position: relative; flex: none;
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 0 0 16px; border: 0; background: none; cursor: pointer;
  color: var(--pp-muted);
  font-weight: 500; font-size: 14.5px; line-height: 1.2; white-space: nowrap;
  transition: color .14s ease;
}

/* Podkreślenie wybranej zakładki siada na kresce oddzielającej pasek
   od wpisów — dlatego jest pozycjonowane, a nie dopisane obwódką. */
.pp-filter__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px; background: transparent;
  transition: background .14s ease;
}

.pp-filter__btn:hover { color: var(--pp-ink); }
.pp-filter__btn.is-on { color: var(--pp-ink); }
.pp-filter__btn.is-on::after { background: var(--pp-blue); }

/* Licznik jest informacją drugiego rzędu — ma być czytelny, ale nie ma
   konkurować z nazwą kategorii o uwagę. */
.pp-filter__n {
  font-family: var(--pp-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--pp-faint);
}
.pp-filter__btn.is-on .pp-filter__n { color: var(--pp-blue); }

/* Zwężenie paska przy przewijaniu daje znać, że coś jest dalej w prawo.
   Bez tego przewijalny rząd na szerokim ekranie wygląda jak pełna lista. */
.pp-filterwrap { position: relative; }
.pp-filterwrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 48px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--pp-surface) 75%);
}

/* Karta w rzędzie trzech jest o jedną trzecią węższa niż w rzędzie dwóch,
   więc zdjęcie i marginesy idą w dół — inaczej na tytuł zostają dwie linie. */
.pp-blogrid { margin-top: 28px; }
.pp-blogrid .pp-post__img,
.pp-blogrid .pp-post__img .pp-imgslot { height: 178px; min-height: 178px; }
.pp-blogrid .pp-post__body { padding: 20px 22px 24px; }
.pp-blogrid .pp-post__title { font-size: 19px; }

.pp-blogempty { margin-top: 34px; }

@media (max-width: 760px) {
  .pp-filter { gap: 18px; }
  .pp-filter__btn { font-size: 14px; padding-bottom: 13px; }
}

/* =========================================================================
   Umawianie prezentacji
   ====================================================================== */
.pp-meet { padding: 52px 48px 56px; }
.pp-meet__head { max-width: 44em; }
.pp-meet__title { margin-top: 16px; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.05; }
.pp-meet__lead { margin-top: 16px; }
.pp-meet__none { margin-top: 32px; }

.pp-meet__flash { padding: 22px 32px; margin-bottom: var(--pp-gap); }
.pp-meet__flash--ok  { border-left: 4px solid var(--pp-blue); }
.pp-meet__flash--err { border-left: 4px solid var(--pp-alert); }

/* Dwie kolumny: kalendarz po lewej, cała reszta po prawej. Kalendarz jedzie
   z ekranem, bo prawa kolumna rośnie w miarę wybierania — godziny, osoba,
   formularz — i bez tego wybrany dzień uciekałby poza widok. */
.pp-meet__grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; margin-top: 38px; align-items: start; }
/* Nagłówek jest przyklejony 10 px od góry i ma 66 px wysokości, więc
   kalendarz musi zaczynać się poniżej — inaczej pasek nawigacji zjeżdża
   na nazwę miesiąca i strzałki przewijania. */
.pp-meet__left { position: sticky; top: 96px; }
.pp-meet__right { min-width: 0; display: flex; flex-direction: column; gap: 30px; }

.pp-meet__block { min-width: 0; }
.pp-meet__step { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pp-meet__num {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--pp-ink); color: #fff;
  font-family: var(--pp-mono); font-size: 12px;
}
/* Wielka litera tylko na początku. `capitalize` podnosiłoby każdy wyraz
   i nagłówek brzmiał jak „Wybierz Dzień W Kalendarzu". */
.pp-meet__steptitle { font-size: 18px; font-family: var(--pp-display); }
.pp-meet__steptitle::first-letter { text-transform: uppercase; }

/* Strefa jako zdanie pod kalendarzem, nie jako pole wyboru. */
.pp-meet__tzinfo {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(22,24,28,.08);
  font-size: 12.5px; color: var(--pp-faint);
}
.pp-meet__tzinfo strong { color: var(--pp-ink-2); font-weight: 500; }

.pp-meet__cal {
  background: var(--pp-soft); border-radius: 20px; padding: 22px 24px 26px;
}
.pp-meet__calhead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; font-size: 16px;
}
.pp-meet__calhead strong { text-transform: capitalize; }
.pp-meet__nav {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(22,24,28,.12); background: var(--pp-surface);
  font-size: 19px; line-height: 1; color: var(--pp-ink-2);
}
.pp-meet__nav:hover:not(:disabled) { border-color: var(--pp-blue); color: var(--pp-blue); }
.pp-meet__nav:disabled { opacity: .3; cursor: default; }

.pp-meet__dows, .pp-meet__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pp-meet__dows {
  margin-bottom: 6px; text-align: center;
  font-family: var(--pp-mono); font-size: 10.5px; letter-spacing: .07em;
  color: var(--pp-faint); text-transform: uppercase;
}

.pp-meet__day {
  aspect-ratio: 1; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--pp-surface); color: var(--pp-ink);
  font: 500 15px/1 inherit;
  transition: background .12s ease, color .12s ease;
}
/* Dzień z wolnym terminem niesie kropkę — sam kolor tła nie wystarcza,
   bo przy jednym rzucie oka „jaśniejsze" i „ciemniejsze" zlewa się w jedno. */
.pp-meet__day:not(.is-off) { position: relative; font-weight: 600; }
.pp-meet__day:not(.is-off)::after {
  content: ""; position: absolute; left: 50%; bottom: 7px;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--pp-blue);
}
.pp-meet__day:not(.is-off):hover { background: var(--pp-blue-soft); }
.pp-meet__day.is-off { background: transparent; color: var(--pp-faint); cursor: default; }
.pp-meet__day.is-on { background: var(--pp-blue); color: #fff; }
.pp-meet__day.is-on::after { background: rgba(255,255,255,.85); }

.pp-meet__loading { margin-top: 16px; font-size: 13.5px; color: var(--pp-faint); }

/* min-width: 0 na dziecku siatki — bez tego długa nazwa strefy w polu
   wyboru rozpycha kolumnę i kalendarz obok się kurczy. */
.pp-meet__slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 9px;
}
.pp-meet__slots:empty { display: none; }
.pp-meet__slot {
  padding: 12px 8px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid rgba(22,24,28,.14); background: var(--pp-surface);
  font: 500 15px/1 inherit; color: var(--pp-ink);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.pp-meet__slot:hover { border-color: var(--pp-blue); color: var(--pp-blue); }
.pp-meet__slot.is-on { background: var(--pp-blue); border-color: var(--pp-blue); color: #fff; }

/* Podpowiedź stoi w miejscu godzin, dopóki nie ma czego pokazać, więc nie
   potrzebuje odstępu od góry — sama jest treścią tego miejsca. */
.pp-meet__hint { font-size: 13.5px; line-height: 1.6; color: var(--pp-faint); max-width: 34em; }

/* --- wybór osoby --------------------------------------------------------- */
.pp-meet__people {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
}
.pp-meet__person {
  position: relative;
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 14px 16px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid rgba(22,24,28,.12); background: var(--pp-surface);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.pp-meet__person:hover { border-color: var(--pp-blue); }
.pp-meet__person.is-on {
  border-color: var(--pp-blue); background: var(--pp-blue-soft);
  box-shadow: 0 0 0 3px rgba(46,107,239,.14);
}

/* Ptaszek w rogu wybranej karty. Sama obwódka wystarcza, gdy karty są dwie;
   przy pięciu twarzach w rzędzie trzeba znaku, który widać bez porównywania
   odcieni sąsiadów. */
.pp-meet__person.is-on::after {
  content: ""; position: absolute; top: 10px; right: 12px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pp-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.pp-meet__avatar {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--pp-soft);
}
.pp-meet__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-meet__initials { font: 600 15px/1 inherit; color: var(--pp-muted); }
.pp-meet__pinfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-meet__pinfo strong { font-size: 14.5px; }
.pp-meet__pinfo span { font-size: 12.5px; color: var(--pp-faint); }

/* --- formularz ----------------------------------------------------------- */
/* Formularz jest kartą, nie doklejką — dlatego własne tło zamiast kreski
   oddzielającej. Pokazuje się dopiero po wybraniu godziny. */
.pp-meet__form {
  background: var(--pp-soft); border-radius: var(--pp-r-inner); padding: 26px 26px 24px;
}

.pp-meet__chosen {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: 14px; background: var(--pp-blue-soft);
}
.pp-meet__chosen strong { font-size: 16.5px; text-transform: capitalize; }
.pp-meet__chosen span { font-size: 13px; color: var(--pp-muted); }

/* Dwie kolumny: imię z firmą, adres z telefonem. Prawa kolumna ma teraz
   całą szerokość poza kalendarzem, więc pola mieszczą się bez ściskania. */
.pp-meet__fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 16px; margin-top: 20px; }
/* Reguły zawężone do dwóch formularzy, które je wprowadziły. Napisane
   luzem, jako samo `.pp-field`, nadpisywały pola w oknie wyceny i na
   stronie kontaktu — a razem z nimi ukryte przełączniki wyboru w chipach,
   którym `width: 100%` i wypełnienie rozpychały okno w bok. Stąd brał się
   poziomy pasek przewijania w oknie licencji bezterminowej. */
.pp-meet__fields .pp-field,
.pp-pform__fields .pp-field { display: flex; flex-direction: column; gap: 7px; }

.pp-meet__fields .pp-field > span,
.pp-pform__fields .pp-field > span { font-size: 13.5px; font-weight: 500; color: var(--pp-ink-2); }

.pp-meet__fields .pp-field input,
.pp-meet__fields .pp-field textarea,
.pp-pform__fields .pp-field input,
.pp-pform__fields .pp-field textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px;
  border: 1.5px solid rgba(22,24,28,.14); background: #FAFAF8;
  font: inherit; font-size: 15px; outline: none; resize: vertical;
}
.pp-meet__fields .pp-field input:focus,
.pp-meet__fields .pp-field textarea:focus,
.pp-pform__fields .pp-field input:focus,
.pp-pform__fields .pp-field textarea:focus { border-color: var(--pp-blue); }

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

.pp-meet__error {
  margin-top: 16px; padding: 13px 16px; border-radius: 12px;
  background: #FBEEEA; color: var(--pp-alert); font-size: 14px;
}
.pp-meet__send { width: 100%; margin-top: 20px; }
.pp-meet__send:disabled { opacity: .4; cursor: default; }
.pp-meet__small { margin-top: 14px; font-size: 12.5px; color: var(--pp-faint); }

/* --- potwierdzenie ------------------------------------------------------- */
.pp-meet__done {
  display: block; text-align: center;
  background: var(--pp-soft); border-radius: var(--pp-r-inner); padding: 40px 28px 34px;
}
.pp-meet__tick {
  width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pp-blue-soft); color: var(--pp-blue);
}
.pp-meet__done .pp-body { margin-top: 10px; max-width: 34em; margin-left: auto; margin-right: auto; }
#pp-meet-donewhen { font-size: 17px; color: var(--pp-ink); text-transform: capitalize; }

@media (max-width: 1080px) {
  /* Poniżej tej szerokości kalendarz i reszta nie mieszczą się obok siebie.
     Wszystko schodzi w jeden ciąg, a przyklejony kalendarz traci sens —
     przy przewijaniu zasłaniałby to, po co się przewija. */
  .pp-meet__grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .pp-meet__left { position: static; }
}

@media (max-width: 760px) {
  /* Na telefonie dwie kolumny dają pola po pół ekranu — adres e-mail
     przestaje się w nich mieścić. */
  .pp-meet__fields { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 900px) {
  .pp-meet { padding: 34px 22px 40px; }
  .pp-meet__form { padding: 22px 20px 20px; }
}

/* =========================================================================
   Cennik — jedna licencja
   ====================================================================== */
/* Oferta na ciemnym granacie, szczegóły na jasnym tle obok. Podział niesie
   znaczenie: po lewej to, co kupujesz, po prawej to, co musisz wiedzieć,
   żeby o tym rozmawiać. */
.pp-price__main { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--pp-gap); margin-top: 40px; align-items: stretch; }

.pp-price__offer {
  background: var(--pp-ink); color: #fff;
  border-radius: var(--pp-r-inner); padding: 40px 40px 34px;
  display: flex; flex-direction: column;
}
.pp-price__name { margin-top: 14px; font-family: var(--pp-display); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; }
.pp-price__for { margin-top: 16px; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.76); max-width: 32em; }

/* list-style i padding zerowane jawnie. Motyw nie ma globalnego zerowania
   list, więc przeglądarka dokładała tym trzem listom swoje 40 px wcięcia —
   to był ten „lewy margines", a nie żaden odstęp w projekcie. */
.pp-price__terms { margin-top: 30px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
/* Kreska wraca, ale przy samej krawędzi karty: to ona wyznacza lewą oś,
   a tekst stoi 16 px za nią. */
.pp-price__terms li { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 2px solid var(--pp-blue); }
.pp-price__terms strong { font-size: 15.5px; }
.pp-price__terms span { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.66); }

/* margin-top:auto dociska przyciski do dołu karty — obie kolumny kończą
   się równo niezależnie od tego, ile pozycji ma lista obok. */
.pp-price__actions { margin-top: auto; padding-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; }
.pp-price__quote { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.34); cursor: pointer; }
.pp-price__quote:hover { background: rgba(255,255,255,.24); }
.pp-price__note { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.5); max-width: 34em; }

.pp-price__side { display: flex; flex-direction: column; gap: var(--pp-gap); }
.pp-price__block { background: var(--pp-soft); border-radius: var(--pp-r-inner); padding: 30px 32px; }

.pp-price__list { margin-top: 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.pp-price__list li { display: flex; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--pp-ink-2); }
.pp-price__list li > span { color: var(--pp-blue); flex: 0 0 auto; }

.pp-price__factors { margin-top: 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 15px; }
.pp-price__factors li { display: flex; gap: 13px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--pp-muted); }
.pp-price__factors strong { display: block; color: var(--pp-ink); font-size: 15px; margin-bottom: 2px; }
.pp-price__fn {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--pp-blue-soft); color: var(--pp-blue-dark);
  font-family: var(--pp-mono); font-size: 12px;
}

@media (max-width: 1080px) {
  .pp-price__main { grid-template-columns: minmax(0,1fr); }
  .pp-price__offer { padding: 32px 26px 28px; }
  .pp-price__block { padding: 26px 24px; }
}



/* =========================================================================
   Co nowego — roadmapa
   ====================================================================== */
/* Pasek etapów z licznikami stoi nad listą, a lista nad sekcjami opisowymi.
   Kolejność jest decyzją: opisy czyta się przyjemniej, ale to plany są
   powodem, dla którego ktoś wchodzi na tę stronę. */
.pp-road__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pp-road__btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border: 1px solid rgba(22,24,28,.12); border-radius: 999px;
  background: var(--pp-surface); color: var(--pp-ink-2); cursor: pointer;
  font: 500 14px/1 inherit;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
/* Barwa etapu widoczna też w spoczynku. Same kropki na białym tle gubiły
   się w rzędzie czterech identycznych pigułek — a to one mają od razu
   powiedzieć, że lista dzieli się na trzy różne rzeczy. */
.pp-road__btn[data-state="done"]  { background: var(--pp-blue-soft); border-color: rgba(46,107,239,.24); }
.pp-road__btn[data-state="doing"] { background: #FDF3E3; border-color: rgba(232,163,61,.4); }
.pp-road__btn[data-state="plan"]  { background: var(--pp-soft); border-color: rgba(22,24,28,.14); }
.pp-road__btn:hover { border-color: rgba(46,107,239,.45); color: var(--pp-blue); }
.pp-road__btn.is-on { background: var(--pp-ink); border-color: var(--pp-ink); color: #fff; }
/* Wybrany filtr przyjmuje barwę swojego etapu — ten sam kolor co tło
   wierszy, które właśnie zostały na ekranie. */
.pp-road__btn[data-state="done"].is-on  { background: var(--pp-blue); border-color: var(--pp-blue); }
.pp-road__btn[data-state="doing"].is-on { background: #B4761B; border-color: #B4761B; }
.pp-road__btn[data-state="plan"].is-on  { background: var(--pp-muted); border-color: var(--pp-muted); }
.pp-road__n { font-family: var(--pp-mono); font-size: 11.5px; color: var(--pp-faint); }
.pp-road__btn.is-on .pp-road__n { color: rgba(255,255,255,.7); }

/* Kropka niesie ten sam kolor co znacznik przy pozycji, więc filtr i lista
   czytają się jako jedno, a nie jako dwa niezależne oznaczenia. */
.pp-road__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.pp-road__dot--all   { background: var(--pp-faint); }
.pp-road__dot--done  { background: var(--pp-blue); }
.pp-road__dot--doing { background: #E8A33D; }
.pp-road__dot--plan  { background: rgba(22,24,28,.2); }

.pp-road__hint { margin-top: 14px; color: var(--pp-faint); }

/* Wiersze rozdzielone kreską wyglądały jednakowo niezależnie od etapu —
   różnicę niósł tylko mały znaczek po lewej. Teraz etap ma własne tło
   i pasek przy krawędzi, więc widać go z odległości, z jakiej czyta się
   całą listę, a nie dopiero po wpatrzeniu się w pojedynczy wiersz. */
.pp-road__list { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.pp-road__item {
  display: grid; grid-template-columns: 34px 1fr 200px; gap: 16px;
  align-items: start; padding: 20px 22px;
  border-radius: var(--pp-r-inner); border-left: 3px solid transparent;
}
.pp-road__mark {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; align-self: start;
}

.pp-road__item.is-done  { background: var(--pp-blue-soft); border-left-color: var(--pp-blue); }
.pp-road__item.is-doing { background: #FDF3E3; border-left-color: #E8A33D; }
.pp-road__item.is-plan  { background: var(--pp-soft); border-left-color: rgba(22,24,28,.16); }

.pp-road__item.is-done  .pp-road__mark { background: rgba(46,107,239,.16); color: var(--pp-blue-dark); }
.pp-road__item.is-doing .pp-road__mark { background: rgba(232,163,61,.22); color: #96610F; }
.pp-road__item.is-plan  .pp-road__mark { background: rgba(22,24,28,.07); color: var(--pp-muted); }

/* Etap wypisany słowem, w tym samym kolorze co pasek — nazwa i barwa
   mówią to samo, więc nikt nie musi się domyślać, co znaczy pomarańcz. */
.pp-road__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.pp-road__badge {
  padding: 4px 11px; border-radius: var(--pp-r-pill);
  font-family: var(--pp-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.pp-road__item.is-done  .pp-road__badge { background: var(--pp-blue); color: #fff; }
.pp-road__item.is-doing .pp-road__badge { background: #B4761B; color: #fff; }
.pp-road__item.is-plan  .pp-road__badge { background: rgba(22,24,28,.1); color: var(--pp-ink-2); }

.pp-road__body { min-width: 0; }
.pp-road__title { font-size: 18px; }
.pp-road__text { margin-top: 6px; color: var(--pp-muted); max-width: 46em; }

.pp-road__date {
  text-align: right;
  font-family: var(--pp-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--pp-ink-2); text-transform: uppercase;
}
.pp-road__date.is-empty { color: var(--pp-faint); text-transform: none; letter-spacing: 0; font-style: italic; }

@media (max-width: 860px) {
  /* Etap i termin schodzą pod tekst — kolumna 200 px na telefonie
     zjadałaby połowę wiersza i tytuły łamałyby się po dwa słowa. */
  .pp-road__item { grid-template-columns: 34px 1fr; padding: 18px; }
  .pp-road__meta { grid-column: 2; flex-direction: row; align-items: center; gap: 10px; margin-top: 10px; }
  .pp-road__date { text-align: left; }
}

/* =========================================================================
   Co nowego — wyróżnione zmiany
   ====================================================================== */
.pp-feat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 26px; }
.pp-feat--flip .pp-feat__text { order: 2; }
.pp-feat__text .pp-body { margin-top: 14px; max-width: 34em; }
.pp-feat__art { background: var(--pp-soft); border-radius: var(--pp-r-inner); padding: 30px 32px; }
.pp-feat__svg { width: 100%; max-width: 320px; margin: 0 auto; display: block; color: var(--pp-ink-2); }

.pp-feat__mail { background: var(--pp-surface); border-radius: 14px; padding: 16px 18px 14px; }
.pp-feat__mailhead {
  display: flex; align-items: center; gap: 8px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(22,24,28,.08);
  font-family: var(--pp-mono); font-size: 11px; letter-spacing: .05em;
  color: var(--pp-muted); text-transform: uppercase;
}
.pp-feat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pp-blue); flex: 0 0 auto; }
.pp-feat__rows { display: flex; flex-direction: column; }
.pp-feat__row { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 14px; }
.pp-feat__row + .pp-feat__row { border-top: 1px solid rgba(22,24,28,.06); }
.pp-feat__rowtext { flex: 1; min-width: 0; color: var(--pp-ink-2); }
.pp-feat__mark { flex: 0 0 auto; display: grid; place-items: center; }
.pp-feat__row.is-done .pp-feat__mark { color: var(--pp-blue); }
.pp-feat__row.is-wait .pp-feat__mark { color: var(--pp-faint); }
.pp-feat__state { font-family: var(--pp-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--pp-faint); white-space: nowrap; }
.pp-feat__row.is-done .pp-feat__state { color: var(--pp-blue); }

.pp-newscta { text-align: center; padding: 52px 40px; }
.pp-newscta .pp-body { margin: 14px auto 0; max-width: 40em; }
.pp-newscta .pp-btn { margin-top: 24px; }

@media (max-width: 900px) {
  .pp-feat__grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
  /* Na wąskim ekranie tekst zawsze przed makietą — odwrócona kolejność
     ma sens tylko wtedy, gdy oba stoją obok siebie. */
  .pp-feat--flip .pp-feat__text { order: 0; }
  .pp-feat__art { padding: 22px 20px; }
  .pp-newscta { padding: 36px 22px; }
}

/* --- zrzut z aplikacji ---------------------------------------------------- */
/* Zrzut leży na ramce z cieniem, żeby czytał się jak okno programu, a nie
   jak obrazek wklejony w tekst. Bez podpisu i bez atrapy paska przeglądarki
   — to zrzut panelu, nie strony internetowej, a fałszywa ramka przeglądarki
   mówiłaby o nim nieprawdę. */
.pp-shot { margin: 0; border-radius: 14px; overflow: hidden; background: var(--pp-surface); }
.pp-shot img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid rgba(22,24,28,.1);
  box-shadow: 0 18px 44px -22px rgba(16,18,22,.4);
}

/* --- makieta dokumentu --------------------------------------------------- */
/* Wspólna dla rysunku i deklaracji zbiorczej: obie mówią o gotowym
   dokumencie, więc obie wyglądają jak kartka, a nie jak zrzut ekranu. */
.pp-doc { background: var(--pp-surface); border-radius: 14px; padding: 18px 20px 16px; }
.pp-doc__head {
  padding-bottom: 13px; border-bottom: 1px solid rgba(22,24,28,.08);
  font-family: var(--pp-mono); font-size: 11px; letter-spacing: .05em;
  color: var(--pp-muted); text-transform: uppercase;
}

/* Treść dokumentu jako paski: chodzi o to, że coś tam jest, a nie o to,
   co dokładnie — tekst zaproszony na makietę zaczyna się czytać i odciąga
   uwagę od załącznika, który jest tu sednem. */
.pp-doc__lines { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 20px; }
.pp-doc__lines span { height: 7px; border-radius: 4px; background: rgba(22,24,28,.08); }
.pp-doc__short { width: 58%; }

.pp-doc__att { border-top: 1px dashed rgba(22,24,28,.16); padding-top: 14px; }
.pp-doc__attlabel {
  font-family: var(--pp-mono); font-size: 10px; letter-spacing: .07em;
  color: var(--pp-blue); text-transform: uppercase;
}
.pp-doc__file {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  padding: 10px 12px; border-radius: 11px; background: var(--pp-blue-soft);
}
.pp-doc__thumb { width: 54px; height: 34px; flex: 0 0 54px; color: var(--pp-ink-2); }
.pp-doc__name { font-family: var(--pp-mono); font-size: 12px; color: var(--pp-ink-2); word-break: break-all; }

.pp-doc__rows { display: flex; flex-direction: column; margin-top: 4px; }
.pp-doc__rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; font-size: 14px;
}
.pp-doc__rows li + li { border-top: 1px solid rgba(22,24,28,.06); }
.pp-doc__rowtext { color: var(--pp-ink-2); }
.pp-doc__dim { font-family: var(--pp-mono); font-size: 11.5px; color: var(--pp-faint); white-space: nowrap; }
.pp-doc__foot {
  margin-top: 14px; padding-top: 13px; border-top: 1px dashed rgba(22,24,28,.16);
  font-family: var(--pp-mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--pp-blue); text-transform: uppercase;
}

/* Pole puste przy wysyłce dostaje czerwoną obwódkę. Sam komunikat pod
   formularzem nie mówi, do którego pola wrócić — przy pięciu polach to
   różnica między poprawką a szukaniem. */
.pp-meet__fields .pp-field input.jest-puste,
.pp-meet__fields .pp-field textarea.jest-puste { border-color: var(--pp-alert); background: #FBEEEA; }

/* =========================================================================
   Program partnerski
   ====================================================================== */
.pp-phero { padding: 58px 48px 56px; }
.pp-phero__text { max-width: 44em; }
.pp-phero__title { margin-top: 16px; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; }
.pp-phero__lead { margin-top: 18px; max-width: 40em; }
.pp-phero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }

/* Trzy kroki spięte linią biegnącą za numerami — ten sam rytm co „jak to
   działa" na stronie głównej, bo to ta sama obietnica: że roboty jest mało. */
.pp-psteps {
  position: relative; list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px;
}
.pp-psteps__item { position: relative; padding-top: 84px; }
/* Linia biegnie na wysokości środka rysunku, tak jak na stronie głównej. */
.pp-psteps__item::before {
  content: ""; position: absolute; top: 34px; left: 84px; right: -30px;
  height: 1px; background: rgba(22,24,28,.12);
}
.pp-psteps__item:last-child::before { display: none; }
/* Rysunek zamiast cyfry, w tym samym języku co „Jak to działa" na stronie
   głównej: pełne bryły, jeden akcent na kolor marki. Bez kafelka pod spodem
   — tam rysunki też stoją wprost na tle sekcji. */
.pp-psteps__ico { position: absolute; top: 0; left: 0; display: block; }
.pp-psteps__ico .pp-gl { display: block; }
.pp-psteps__item .pp-h3 { font-size: 20px; }
.pp-psteps__item .pp-small { margin-top: 10px; color: var(--pp-muted); }

.pp-pwho { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--pp-gap); margin-top: 34px; }
.pp-pwho__item { background: var(--pp-soft); border-radius: var(--pp-r-inner); padding: 26px 24px 28px; }
.pp-pwho__ico {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 13px; background: var(--pp-blue-soft); color: var(--pp-blue-dark);
}
.pp-pwho__item .pp-h3 { margin-top: 18px; font-size: 18px; }
.pp-pwho__item .pp-small { margin-top: 9px; color: var(--pp-muted); }

.pp-pterms { padding: 52px 48px 50px; }
.pp-pterms__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.pp-pterms__title { margin-top: 14px; max-width: 15em; }
.pp-pterms__body { margin-top: 18px; }

/* Rysunek dostaje własną kolumnę bez ramki: na ciemnym tle każda obwódka
   robi z niego kafelek, a ma być otwartą przestrzenią. */
.pp-pterms__art { display: block; }
.pp-partart { display: block; width: 100%; height: auto; max-width: 460px; margin-left: auto; }

/* Formularz i pytania obok siebie: pytania są tu odpowiedzią na wahanie,
   które pojawia się dokładnie w chwili patrzenia na puste pola. */
.pp-pform__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.pp-pform__left .pp-body { margin-top: 12px; max-width: 34em; }
.pp-pform__form { margin-top: 26px; }
.pp-pform__fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 16px; }
.pp-pform__form .pp-btn { width: 100%; margin-top: 20px; }
.pp-pform__consent { margin-top: 14px; font-size: 12.5px; color: var(--pp-faint); }
.pp-pform__done { text-align: center; padding: 30px 0 10px; }
.pp-pform__done .pp-body { margin: 12px auto 0; max-width: 32em; }

/* Kolumna z pytaniami jedzie z ekranem — formularz obok jest długi,
   a pytania mają być pod ręką w chwili wahania, nie na jego początku. */
.pp-pform__faq { position: sticky; top: 96px; }

.pp-pfaq { margin-top: 18px; }
.pp-pfaq__row { padding: 18px 0; border-top: 1px solid rgba(22,24,28,.08); }
.pp-pfaq__row:first-child { border-top: 0; padding-top: 8px; }
.pp-pfaq dt { font-size: 15.5px; font-weight: 600; color: var(--pp-ink); }
.pp-pfaq dd { margin: 7px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--pp-muted); }

@media (max-width: 1080px) {
  .pp-pterms__grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .pp-pwho { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pp-pform__grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .pp-pform__faq { position: static; }
}

@media (max-width: 760px) {
  .pp-phero, .pp-pterms { padding: 36px 22px 34px; }
  .pp-psteps { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .pp-psteps__item::before { display: none; }
  .pp-pwho { grid-template-columns: minmax(0,1fr); }
  .pp-pform__fields { grid-template-columns: minmax(0,1fr); }
}

/* =========================================================================
   Domknięcie strony głównej
   ====================================================================== */
/* Poświata wychodzi z dołu, nie z góry: sekcja styka się ze stopką, która
   też jest ciemna, więc rozjaśnienie przy dolnej krawędzi wiąże je w jedną
   bryłę zamiast zostawiać szew. Kolor marki zamiast fioletu z podglądu —
   niebieski jest tu jedyną barwą akcentową na całej stronie. */
/* Sekcja wchodzi pod stopkę: ujemny margines zjada odstęp między kartami
   i jeszcze kawałek, więc zaokrąglony róg stopki nachodzi na poświatę
   zamiast zostawiać nad nią szew. Dolne wypełnienie rośnie o tyle samo,
   żeby treść nie wjechała pod spód. */
.pp-close {
  position: relative; overflow: hidden; z-index: 0;
  border-radius: var(--pp-r-card);
  padding: 96px 40px 168px;
  margin-bottom: calc(-1 * var(--pp-gap) - 60px);
  text-align: center;
  background:
    radial-gradient(130% 100% at 50% 108%, rgba(46,107,239,.55) 0%, rgba(46,107,239,.12) 48%, rgba(46,107,239,0) 74%),
    radial-gradient(90% 70% at 50% 96%, rgba(46,107,239,.32) 0%, rgba(46,107,239,0) 62%),
    var(--pp-ink);
}
.pp-close > * { position: relative; z-index: 1; }

.pp-close__mark { display: block; margin: 0 auto 34px; width: 46px; height: 46px; }

.pp-close__title {
  margin: 0 auto; max-width: 15em;
  font-family: var(--pp-display); font-weight: 700; color: #fff;
  font-size: clamp(34px, 5vw, 62px); line-height: 1.03; letter-spacing: -.02em;
}
.pp-close__lead {
  margin: 24px auto 0; max-width: 34em;
  font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.66);
}
/* Na ciemnym tle domknięcia zwykły `--solid` byłby czarny na czarnym,
   a jego stan najechania rozjaśniałby się do niebieskiego — czyli
   dokładnie odwrotnie, niż podpowiada wzrok. Tu kolor marki jest stanem
   spoczynku, a ciemniejszy odcień reakcją na kursor. */
.pp-close__cta { margin-top: 34px; background: var(--pp-blue); color: #fff; }
.pp-close__cta:hover { background: var(--pp-blue-dark); color: #fff; }

/* Dopisek celowo drobny i rozstrzelony: to zdanie ma uspokoić, a nie
   zabiegać — po przycisku nic już nie powinno krzyczeć. */
.pp-close__note {
  margin: 26px auto 0; max-width: 40em;
  font-family: var(--pp-mono); font-size: 11px; line-height: 1.7;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

@media (max-width: 760px) {
  .pp-close { padding: 64px 22px 116px; margin-bottom: calc(-1 * var(--pp-gap) - 44px); }
  .pp-close__mark { margin-bottom: 26px; width: 40px; height: 40px; }
  .pp-close__lead { font-size: 15.5px; }
}

/* =========================================================================
   Oznaczenie grafiki wygenerowanej przez AI (art. 50 AI Act)
   ====================================================================== */
/* Podpis, nie nakładka na obrazku. Ma być czytelny przy pierwszym zetknięciu,
   dostępny dla czytnika ekranu i nieznikający przy powiększeniu grafiki —
   nakładka nie spełnia żadnego z tych trzech warunków.

   Wyraźny, ale nie krzykliwy: to informacja, nie ostrzeżenie. Znacznik „AI”
   niesie treść dla kogoś, kto tylko przebiega wzrokiem, a pełne zdanie obok
   dla kogoś, kto czyta. */
.pp-aiflag {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--pp-faint);
}
.pp-aiflag__mark {
  flex: none; padding: 2px 7px; border-radius: 6px;
  background: var(--pp-blue-soft); color: var(--pp-blue-dark);
  font-family: var(--pp-mono); font-size: 10.5px; letter-spacing: .06em;
}

/* Gdy obrazek ma już własny podpis, oznaczenie dokleja się pod nim
   w tym samym bloku — dwa osobne podpisy pod jedną grafiką czytałyby się
   jak dwa różne opisy. */
.pp-aiflag--incap { display: flex; margin-top: 6px; }

/* Podpis pod obrazkiem wyróżnionym wchodzi w kolumnę tekstu wpisu — te same
   wartości co w `.pp-article__body`, żeby zaczynał się równo z akapitami,
   a nie przy krawędzi karty. */
.pp-aiflag--hero {
  max-width: 780px; margin: 0 auto; padding: 14px 32px 0;
  justify-content: flex-end;
}

/* Ramka dorobiona wokół obrazka, który jej nie miał. Bez własnego wyglądu:
   ma tylko dać podpisowi miejsce, a nie zmieniać układu wpisu. */
.pp-aifig { margin: 0; }

@media (max-width: 560px) {
  .pp-aiflag { align-items: flex-start; }
}

/* =========================================================================
   Menu mobilne — nakładka
   ====================================================================== */
/* Pełny ekran zamiast listy wysuwanej pod nagłówkiem. Lista rosła razem
   z treścią, więc na niskim ekranie ostatnie pozycje wypadały poza kadr,
   a strona pod spodem przewijała się dalej pod palcem.

   Tło to ta sama ciemna płaszczyzna z niebieską poświatą co sekcja
   domykająca stronę główną — menu ma wyglądać jak część witryny,
   a nie jak systemowy panel doklejony z boku. */
.pp-menu {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  padding: 14px 22px 26px;
  background:
    radial-gradient(120% 80% at 50% 108%, rgba(46,107,239,.5) 0%, rgba(46,107,239,0) 62%),
    var(--pp-ink);
  opacity: 0; transition: opacity .24s ease;
  overflow-y: auto; overscroll-behavior: contain;
}
.pp-menu.jest-otwarte { opacity: 1; }

/* Blokada przewijania strony pod nakładką. Bez tego palec przesuwa treść
   za menu i po zamknięciu ląduje się w innym miejscu strony. */
html.ma-menu, html.ma-menu body { overflow: hidden; }

.pp-menu__bar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.pp-menu__close {
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  background: none; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .14s ease, border-color .14s ease;
}
.pp-menu__close:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

.pp-menu__links { display: flex; flex-direction: column; margin-top: 26px; }

/* Pozycje wchodzą kolejno, z opóźnieniem rosnącym o krok na wiersz.
   Efekt trwa ćwierć sekundy — na tyle, żeby dało się go poczuć, i za
   krótko, żeby zdążył przeszkadzać przy drugim otwarciu. */
.pp-menu__link {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.92);
  font-family: var(--pp-display); font-size: 27px; line-height: 1.15;
  letter-spacing: var(--pp-display-tracking, -.03em);
  opacity: 0; transform: translateY(10px);
}
.pp-menu.jest-otwarte .pp-menu__link {
  opacity: 1; transform: none;
  transition: opacity .3s ease calc(var(--i) * 40ms), transform .3s ease calc(var(--i) * 40ms);
}
.pp-menu__link.is-current { color: #fff; }
.pp-menu__link.is-current .pp-menu__n { color: var(--pp-blue); }

.pp-menu__n {
  flex: none; width: 26px;
  font-family: var(--pp-mono); font-size: 12px; letter-spacing: .04em;
  color: rgba(255,255,255,.35);
}

.pp-menu__foot { margin-top: auto; padding-top: 30px; }
/* Przyciski na pełną szerokość kolumny: w siatce jednokolumnowej element
   o szerokości zależnej od treści wystawałby poza nią przy dłuższym
   tłumaczeniu — a „Umów prezentację" po niemiecku jest wyraźnie dłuższe. */
.pp-menu__cta { display: grid; gap: 10px; }
.pp-menu__cta .pp-btn { width: 100%; justify-content: center; }
/* Dwa przyciski, dwie różne role. Pierwszy — biała plama, bo to jest
   działanie, do którego prowadzi cała strona. Drugi w kolorze marki:
   widoczny, ale wyraźnie drugi w kolejności.

   Wcześniej brał wygląd odmiany „ghost", która ma jasne tło i ciemny
   niebieski napis — na białym tle czytelna, na ciemnym niewidoczna.
   Sam kolor napisu nie wystarczył, bo jasne tło zostawało. */
.pp-menu__cta .pp-btn--solid { background: #fff; color: var(--pp-ink); border-color: #fff; }
.pp-menu__cta .pp-btn--solid:hover { background: rgba(255,255,255,.86); color: var(--pp-ink); }

.pp-menu__cta .pp-btn--ghost {
  background: var(--pp-blue); border-color: var(--pp-blue); color: #fff;
}
.pp-menu__cta .pp-btn--ghost:hover { background: var(--pp-blue-dark); border-color: var(--pp-blue-dark); color: #fff; }

/* Telefon i adres jeden pod drugim, każdy jako pełny wiersz do dotknięcia.
   Obok siebie i drobnym pismem wyglądały na przypis, a to jest najczęstszy
   powód, dla którego ktoś otwiera menu na telefonie: chce zadzwonić.

   Cały wiersz jest celem kliknięcia, nie sam tekst — kciuk nie trafia
   w linijkę monospace tak dokładnie jak kursor. */
.pp-menu__kontakt { display: grid; gap: 8px; margin-top: 22px; }
.pp-menu__kontakt a {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 16px; font-weight: 500;
  transition: background .14s ease, border-color .14s ease;
}
.pp-menu__kontakt a:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.26); }
.pp-menu__kontakt svg { flex: none; color: var(--pp-blue-soft); }

/* Podpis nad wartością: „ZADZWOŃ" i „NAPISZ" mówią, co się stanie po
   dotknięciu — sam numer tego nie mówi, dopóki się go nie przeczyta. */
.pp-menu__kontakt b { display: block; font-weight: 500; }
.pp-menu__kontakt small {
  display: block; margin-bottom: 2px;
  font-family: var(--pp-mono); font-size: 10.5px; letter-spacing: .08em;
  color: rgba(255,255,255,.45);
}

.pp-menu__langi { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.pp-menu__langi .pp-langblock .pp-eyebrow { color: rgba(255,255,255,.45); }

/* Nakładka jest wyłącznie mobilna: na szerokim ekranie widać pełne menu
   w pasku, a nakładka mogłaby zostać otwarta po zmianie orientacji. */
@media (min-width: 901px) {
  .pp-menu { display: none; }
}

/* Ruch wyłączony na życzenie systemu — pozycje pokazują się od razu. */
@media (prefers-reduced-motion: reduce) {
  .pp-menu, .pp-menu__link, .pp-burger span { transition: none; }
  .pp-menu__link { opacity: 1; transform: none; }
}