/* ==========================================================================
   Opieka WordPress — style strony
   Dokłada się do home/tokens.css + home/style.css, nie duplikuje ich.
   Szerokość treści dziedziczy z .section__inner (--container-page = 768px).
   Zero hardcodowanych kolorów i odstępów, wszystko z tokenów.
   ========================================================================== */

/* ---------- NARZĘDZIA ---------- */
/* Treść tylko dla czytników ekranu. Motyw nie miał takiej klasy, a jest
   potrzebna tam, gdzie widzialny napis jest krótszy niż sens (np. trzy razy
   „Umów rozmowę" w cenniku, bez nazwy pakietu). Nie używamy display:none
   ani visibility:hidden, bo te chowają treść także przed czytnikami. */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- POPUP PAKIETÓW ----------
   Okno otwierane kliknięciem w pakiet obsługuje notification-centre, więc
   kolory i szerokość maksymalną bierze z ustawień wpisu. Zostaje jedno:
   wtyczka daje wyśrodkowanej karcie `width: 400px` na sztywno, a ustawienie
   „max-width" tylko ogranicza od góry. Przy ośmiu polach 400px to za ciasno,
   więc pozwalamy karcie dorosnąć do zadeklarowanego maksimum.

   Celujemy przez `:has(#gform_6)`, a nie przez `[data-id="9042"]`: wpis
   powiadomienia można usunąć i odtworzyć, dostanie wtedy nowe ID i reguła
   po cichu przestałaby działać. Formularz w środku jest tym, co tę kartę
   naprawdę identyfikuje.

   ⚠️ NIE STYLOWAĆ TU PÓL FORMULARZA. Wygląd Gravity Forms ma jedno źródło
      prawdy: assets/css/gravity-skin.css i paleta --imp-gf-*. Ten skin jest
      CIEMNY, więc karta popupu musi mieć ciemne tło, inaczej wychodzi jasny
      tekst na białym. Kolory karty ustawia się w panelu wpisu, nie tutaj. */
.nc-floating.nc-pos-center:has(#gform_6) {
  width: var(--nc-max-width-desktop, 400px);
  max-width: calc(100vw - 2 * var(--space-4));

  /* Marginesy wewnętrzne. Wtyczka daje 30px na każdej krawędzi, co przy ośmiu
     polach na pełną szerokość wyglądało, jakby formularz był wciśnięty w ramkę
     (uwaga Łukasza 2026-08-05).
     `--space-5` to clamp z tokenów: około 48px na desktopie i około 25px na
     telefonie. Sztywne 48px zjadłoby przy 390px ekranu prawie trzydzieści
     procent szerokości pól, a token skaluje się sam. */
  padding: var(--space-5);
}

/* Odstępy między polami: podbijamy WŁASNY token skinu formularzy, a nie
   dopisujemy marginesy do .gfield. Dzięki temu nadal jest jedno źródło prawdy,
   a zmiana obowiązuje tylko w tym oknie.
   Skin ma 14px, co wystarcza formularzowi kontaktowemu z czterema polami, ale
   przy ośmiu polach i opisach pod nimi wszystko zlewa się w jeden słup szarych
   prostokątów (uwaga Łukasza 2026-08-05).

   Token MUSI być ustawiony na .gform_wrapper, nie na karcie popupu:
   gravity-skin.css deklaruje go właśnie tam, a bliższa deklaracja wygrywa
   z tą na przodku. Ustawienie go wyżej nie robiło nic. */
.nc-floating.nc-pos-center:has(#gform_6) .gform_wrapper {
  --imp-gf-gap: 22px;
}

/* ---- Imię i telefon obok siebie na desktopie ----
   Osiem pól jedno pod drugim to długi słup, a te dwa mają krótkie wartości,
   więc para skraca formularz bez ściskania czegokolwiek (uwaga Łukasza
   2026-08-05). E-mail zostaje na pełnej szerokości, bo adresy są długie.

   Mechanika: kontener dostaje dwie kolumny, a WSZYSTKIE pola domyślnie
   rozpinają się na oba, poza tą jedną parą. Dzięki temu dodanie nowego pola
   w Gravity Forms nie rozsypie układu, tylko trafi na pełną szerokość.
   Para działa, bo imię i telefon SĄSIADUJĄ w formularzu (kolejność zmieniona
   w GF: imię, telefon, e-mail). Rozdzielenie ich innym polem zepsuje parę. */
.nc-floating.nc-pos-center:has(#gform_6) .gform_fields {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.nc-floating.nc-pos-center:has(#gform_6) .gform_fields > .gfield {
  grid-column: 1 / -1;
}
.nc-floating.nc-pos-center:has(#gform_6) #field_6_5,
.nc-floating.nc-pos-center:has(#gform_6) #field_6_7 {
  grid-column: auto;
}
@media (max-width: 600px) {
  /* Na telefonie wszystko w jednej kolumnie: przy 330px szerokości okna
     połowa to około 130px, a w takim polu nie widać wpisywanego tekstu. */
  .nc-floating.nc-pos-center:has(#gform_6) #field_6_5,
  .nc-floating.nc-pos-center:has(#gform_6) #field_6_7 {
    grid-column: 1 / -1;
  }
}

/* Nagłówek okna: Mansalva i skala tytułu sekcji, nie 18px Rubikiem, jaki daje
   wtyczka. To jest tytuł, a wyglądał jak podpis. */
.nc-floating.nc-pos-center:has(#gform_6) .nc-floating-title {
  font: 400 clamp(2.8rem, 1.8vw + 2.2rem, 4rem)/1.15 var(--font-decorative);
  margin: 0 0 var(--space-3);
}
/* Wstęp: oddech przed pierwszym pytaniem. `:first-of-type`, bo w tym samym
   kontenerze siedzi jeszcze akapit zamykający, pod formularzem. */
.nc-floating.nc-pos-center:has(#gform_6) .nc-floating-body > p:first-of-type {
  margin: 0 0 var(--space-5);
}

/* ---- Wybory jako kafle w dwóch kolumnach ----
   Dotyczy DWÓCH pól radio w tym formularzu: pakietu (`#field_6_1`, cztery
   opcje, więc układa się 2×2) i pytania o sprzedaż (`#field_6_3`, trzy opcje,
   więc trzecia idzie na pełną szerokość pod spodem).

   Trzecia opcja na całą szerokość to ten sam wzorzec, którego strona używa
   w cenniku i w sekcji „czy to Twoja sytuacja": przy trzech elementach
   w dwóch kolumnach ostatni rozciąga się na oba, żeby nie zostawiać dziury.

   ⚠️ Odstępstwo od zasady „stylów formularzy nie dopisujemy poza
      gravity-skin.css". Świadome i zawężone do dwóch pól w JEDNYM oknie, bo
      to nie zmiana wyglądu formularzy w serwisie, a układ tego okna: skin
      renderuje opcje jako pigułki dopasowane do treści w jednym rzędzie,
      a tu mają być kafle równej wielkości. NIE rozszerzać na
      `.gfield--type-radio` w ogóle. */
.nc-floating.nc-pos-center:has(#gform_6) #field_6_1 .gfield_radio,
.nc-floating.nc-pos-center:has(#gform_6) #field_6_3 .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--space-2) !important;
}
/* Trzecia i ostatnia opcja pytania o sprzedaż: pełna szerokość. */
.nc-floating.nc-pos-center:has(#gform_6) #field_6_3 .gchoice:nth-child(3) {
  grid-column: 1 / -1;
}
.nc-floating.nc-pos-center:has(#gform_6) #field_6_1 .gchoice,
.nc-floating.nc-pos-center:has(#gform_6) #field_6_3 .gchoice { position: relative; }
.nc-floating.nc-pos-center:has(#gform_6) #field_6_1 .gchoice label,
.nc-floating.nc-pos-center:has(#gform_6) #field_6_3 .gchoice label {
  display: flex !important;
  align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box;
  min-height: 56px; padding: var(--space-2) var(--space-3) !important;
  text-align: center;
  /* Kafel, nie pigułka: przy pełnej szerokości promień 999px wyglądałby
     jak wydłużona tabletka. */
  border-radius: var(--radius-lg) !important;
  font-size: var(--font-body);
}

/* Plakietka przy najczęściej wybieranym pakiecie. Krótka celowo: „najczęściej
   wybierany" nie mieści się w kaflu, a w cenniku ta informacja już jest.

   ZMIANA 2026-08-26, dwie rzeczy naprawione razem:

   1. Plakietka stała przy pakiecie Pro, a w cenniku „Najpopularniejszy" stoi
      przy Standardzie (pakiety.php, featured => true na Standardzie). Dwa
      różne pakiety oznaczone jako najczęściej wybierany, w oknie i w cenniku.
      Teraz oba wskazują Standard.

   2. Selektor szedł po `input[value="Pro"]`, a takiej wartości w formularzu 6
      nie ma: zmierzone 2026-08-26, trzeci kafel ma etykietę „Pro" i wartość
      „Standard", czyli tę samą co drugi. Plakietka nie renderowała się więc
      NIGDY, a selektor po wartości „Standard" trafiałby w dwa kafle naraz.
      Dlatego wybór po pozycji: Start, Standard, Pro, „Nie wiem", więc
      Standard to drugi kafel. Przy zmianie kolejności opcji w formularzu 6
      trzeba poprawić tę liczbę. Sama zduplikowana wartość jest defektem
      konfiguracji formularza i nie da się jej naprawić z CSS. */
.nc-floating.nc-pos-center:has(#gform_6) #field_6_1 .gchoice:nth-child(2) label::after {
  content: "HIT";
  position: absolute; top: -6px; right: -6px;
  padding: 2px 8px; border-radius: var(--radius-full);
  /* Ciemny tekst na akcencie, nie biały: biel na #FF3434 daje 3,63:1, czyli
     poniżej progu 4,5:1 z WCAG AA dla tekstu 11 px. Ciemny daje 4,80:1. */
  background: var(--color-accent); color: var(--color-text);
  font: var(--fw-black) 1.1rem/1.6 var(--font-sans); letter-spacing: .04em;
}
/* Na zaznaczonym kaflu tło jest już czerwone, więc plakietka musi się
   odwrócić, inaczej zniknie w tle. */
.nc-floating.nc-pos-center:has(#gform_6) #field_6_1 .gchoice:nth-child(2) input:checked + label::after {
  background: var(--surface-base); color: var(--color-accent);
}

/* Zamknięcie okna: zmierzone 32x32 px na desktopie, czyli poniżej minimum
   44 px. Na 390 px wtyczka daje już 44, więc poprawiamy tylko szerszy widok.
   Ikona zostaje tej samej wielkości, rośnie samo pole kliknięcia. */
.nc-floating.nc-pos-center:has(#gform_6) .nc-floating-close {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Przycisk wysyłki: na całą szerokość, wyśrodkowany, z odstępem po obu
   stronach. Pod przyciskiem stoi jeszcze akapit „Odpowiadamy w jeden dzień
   roboczy", który bez tego marginesu przyklejał się do przycisku. */
.nc-floating.nc-pos-center:has(#gform_6) .gform_footer {
  justify-content: center !important;
  margin-top: var(--space-4) !important;
  margin-bottom: var(--space-4) !important;
}
.nc-floating.nc-pos-center:has(#gform_6) .gform_footer input[type="submit"] {
  width: 100% !important;
  min-height: 56px;
}

@media (max-width: 480px) {
  /* Dwie kolumny przy 390px dawałyby na kafel około 130px, a „Nie wiem,
     doradźcie" łamie się wtedy na trzy wiersze. */
  .nc-floating.nc-pos-center:has(#gform_6) #field_6_1 .gfield_radio,
  .nc-floating.nc-pos-center:has(#gform_6) #field_6_3 .gfield_radio {
    grid-template-columns: 1fr !important;
  }
  /* Plakietka wchodzi DO kafla, a nie wystaje nad niego. W jednej kolumnie
     odstęp między kaflami to 8 px, więc przy `top: -6px` chip nachodził na
     dolną krawędź kafla wyżej i czytało się, że opisuje tamten (zrzut
     /tmp/opieka-shots/popup-fin-390.png: „HIT" dotykał zaznaczonego Startu).
     Wyśrodkowany na prawej krawędzi nie ma tej dwuznaczności, a etykieta
     kafla jest krótka i wyśrodkowana, więc nic nie zasłania. */
  .nc-floating.nc-pos-center:has(#gform_6) #field_6_1 .gchoice:nth-child(2) label::after {
    top: 50%; right: var(--space-2);
    transform: translateY(-50%);
  }
}

/* ---------- HERO ---------- */
/* Zapas na przyklejony pasek nawigacji. Sekcja `.section` ma symetryczny
   padding-block, a nawigacja jest `position: fixed`, więc na wąskim ekranie
   znak w nawigacji nachodził na nagłówek hero (zgłoszenie Łukasza 2026-09-09).
   Zmierzone: pasek ma 62px wysokości przy 430px szerokości okna, do tego
   `padding-block: 20px` u góry. Ta sama konstrukcja co w `.sp-page-layout`
   w theme.css, gdzie zapas wynosi `calc(var(--space-5) + 68px)`. */
.opieka-hero { text-align: center; padding-top: calc(var(--space-5) + 68px); }
.opieka-hero .section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.opieka-hero__title {
  font: var(--fw-black) var(--font-h1)/1.06 var(--font-sans);
  letter-spacing: -0.02em;
  margin: 0;
}
.opieka-hero__info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font: var(--fw-medium) var(--font-h5)/1 var(--font-sans);
  color: var(--ink-90);
}
.opieka-hero__info strong { color: var(--color-accent); font-weight: var(--fw-bold); }
.opieka-hero__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-28); flex: none;
}
.opieka-hero__sub {
  margin: 0;
  font: var(--fw-regular) var(--font-h5)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}
/* CTA jedno pod drugim, nie obok siebie. Dotyczy każdego miejsca na stronie,
   nie tylko hero: przy dwóch akcjach obok siebie oko musi wybierać, a w słupku
   jest jasna kolejność, najpierw akcja główna, pod nią alternatywa. */
.opieka-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}
/* Tylko przycisk główny dostaje wymuszoną wysokość. .btn-secondary w tym motywie
   to celowo link z czerwonym podkreśleniem, nie pigułka, więc nie robimy z niego
   przycisku na siłę. */
.opieka-hero__cta .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  box-sizing: border-box;
}

/* Pasek statystyk: ZERO własnych stylów. Sekcja używa gołych klas .stats*
   z home/style.css, więc wygląda dokładnie tak jak na stronie głównej,
   razem z opisami i wysokością karty. Każde nadpisanie tutaj oznaczałoby,
   że przy zmianie na home ta strona zacznie się rozjeżdżać. */

/* ---------- SCENARIUSZE ---------- */
.opieka-scen__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-scen__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.opieka-scen__note {
  margin: 0;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-scen__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* Dwie kolumny przy sześciu pozycjach. Przy 768px kolumny treści trzy
     w rzędzie byłyby za wąskie na odręczny font. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.opieka-scen__item {
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* Ból: Mansalva, wyraźnie większa niż w wersji reactowej, bo tam ginęła. */
.opieka-scen__problem {
  margin: 0;
  font: 400 clamp(2.2rem, 1.6vw + 1.6rem, 2.8rem)/1.28 var(--font-decorative);
  color: var(--color-accent);
}
.opieka-scen__label {
  margin: var(--space-2) 0 0;
  font: var(--fw-semibold) var(--font-caption)/1 var(--font-sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-50);
}
.opieka-scen__solution {
  margin: 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--color-ink);
}

/* ---------- GUIDE ---------- */
.opieka-guide__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-6);
  align-items: center;
}
.opieka-guide__photo { margin: 0; }
.opieka-guide__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  border-radius: var(--radius-2xl);
  background: var(--surface-raised);
}
/* Podpis pod zdjęciem: nazwisko i rola. Bez wyśrodkowania, bo lewa krawędź
   podpisu ma trzymać tę samą osię co krawędź zdjęcia. */
.opieka-guide__caption {
  margin-top: var(--space-3);
  display: flex; flex-direction: column; gap: 2px;
}
.opieka-guide__name {
  font: var(--fw-bold) var(--font-h5)/1.2 var(--font-sans);
  color: var(--color-ink);
}
.opieka-guide__role {
  font: var(--fw-regular) var(--font-caption)/1.4 var(--font-sans);
  color: var(--ink-62);
}

.opieka-guide__text { display: flex; flex-direction: column; gap: var(--space-3); }
.opieka-guide__text h2 {
  font: var(--fw-bold) var(--font-h1)/var(--lh-tight) var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0;
}
.opieka-guide__text p {
  margin: 0;
  font: var(--fw-regular) var(--font-h5)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}

/* ---------- RESPONSYWNOŚĆ ---------- */
@media (max-width: 768px) {
  .opieka-scen__grid { grid-template-columns: 1fr; }
  .opieka-guide__inner { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------- KWALIFIKACJA ---------- */
.opieka-kwal__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-kwal__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0;
}
/* Dwie karty obok siebie, trzecia na dole (uwaga Łukasza 2026-07-28, ten sam
   układ co w pakietach). Trzy kolumny w 768px dawały ~240px na kartę, w której
   siedzi ikona 96px, cytat w --font-h4 i akapit opisu. */
.opieka-kwal__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
}
/* Trzecia karta na pełnej szerokości nie może być pierwszą kartą rozciągniętą
   w poziom, bo obok ikony zostałaby pusta kolumna. Układ jak w sekcji zakresu:
   ikona i cytat w pierwszym rzędzie, opis i podpis na całej szerokości pod nimi. */
.opieka-kwal__grid > li:nth-child(3) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4); row-gap: var(--space-2);
  align-items: center;
}
.opieka-kwal__grid > li:nth-child(3) .opieka-kwal__icon {
  grid-column: 1; grid-row: 1; margin-bottom: 0;
}
.opieka-kwal__grid > li:nth-child(3) .opieka-kwal__quote { grid-column: 2; grid-row: 1; }
.opieka-kwal__grid > li:nth-child(3) .opieka-kwal__desc  { grid-column: 1 / -1; grid-row: 2; }
.opieka-kwal__grid > li:nth-child(3) .opieka-kwal__seek  { grid-column: 1 / -1; grid-row: 3; }
.opieka-kwal__item {
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* Ikony celowo duże. W wersji reactowej miały ~32px i kompletnie ginęły. */
.opieka-kwal__icon {
  width: 96px; height: 96px; object-fit: contain;
  align-self: flex-start;
  margin-bottom: var(--space-2);
}
.opieka-kwal__quote {
  margin: 0;
  font: var(--fw-bold) var(--font-h4)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-kwal__desc {
  margin: 0; flex: 1;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-kwal__seek {
  margin: var(--space-2) 0 0;
  font: var(--fw-semibold) var(--font-caption)/1 var(--font-sans);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-50);
}
.opieka-kwal__seek strong { color: var(--color-accent); }

/* ---------- SKRÓT DO CENNIKA ----------
   Strona ma ponad 21 000 px i nie da się z niej wrócić do ceny: nawigacja
   globalna prowadzi do Usług i Bloga, nie do pakietów.

   Tylko od 769 px w górę. Poniżej działa istniejący `.nav-mobile-bar`
   (Menu + CTA, z-index 101), więc drugi element w tym samym rogu byłby
   dwoma przyciskami bijącymi się o jedno miejsce.

   z-index 90, czyli pod nawigacją (100): elementy są na przeciwnych końcach
   okna, ale gdy rozwinięte menu wejdzie na pełny ekran, ma wygrać ono. */
.opieka-jump { display: none; }
@media (min-width: 769px) {
  .opieka-jump {
    position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 4.8rem; padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-accent); color: var(--color-dark-text);
    font: var(--fw-semibold) var(--font-label)/1 var(--font-sans);
    box-shadow: var(--shadow-lg);
    /* visibility, nie tylko opacity: ukryty skrót musi wypadać z kolejności
       tabulacji, inaczej klawiatura trafia w niewidoczny przycisk. */
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      visibility var(--duration-base) var(--ease-out);
  }
  .opieka-jump:hover { background: var(--color-accent-hover); color: var(--color-dark-text); }
  .opieka-jump.is-visible { opacity: 1; visibility: visible; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .opieka-jump { transition: none; transform: none; }
}

/* ---------- AWARIA: co się dzieje, gdy strona padnie ----------
   Zajęło miejsce po usuniętej sekcji „plan" (jej CSS został tu martwy
   po skasowaniu template-parts/opieka/plan.php).

   Układ świadomie inny niż pozostałe sekcje, żeby strona nie była serią
   wariantów tej samej siatki: kroki to wiersze pełnej szerokości, bez ikon
   i bez kart. Wyróżniony jest tylko jeden krok, kontrastem powierzchni.

   Bez border-top między wierszami: tokens.css deklaruje wprost, że ciemny
   motyw nie używa hairline borderów, a separuje kontrastem i odstępem.
   Rytm robi więc `gap`, nie linia. */
.opieka-awaria__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-awaria__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-3);
}
.opieka-awaria__note {
  margin: 0 auto; max-width: 52ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
/* JEDNA rama na całą procedurę, nie pięć osobnych kart.
   Historia tej decyzji, żeby nie wracać do poprzednich wersji:
     1. Kroki bez teł, z jedną kartą na wyróżnionym: wyglądało na przypadek.
     2. Każdy krok własną kartą: to były DOKŁADNIE te same karty co w sekcji
        „co robimy" obok (ten sam --surface-raised, ten sam --radius-2xl),
        tylko rozciągnięte na pełną szerokość. Zamiast siatki kafli wychodził
        stos kafli, czyli wprost ta monotonia, na którą narzeka Łukasz.
     3. Teraz: jeden panel na całość. Karta jest pojemnikiem na element
        zbioru, a procedura potrzebuje osi i ciągłości, nie segmentacji na
        pięć zamkniętych pudełek.
   Oś robi kolumna numerów, separacja odstępem (bez linii, zgodnie z tokens.css). */
.opieka-awaria__list {
  list-style: none; margin: 0;
  padding: var(--space-5);
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.opieka-awaria__step {
  display: grid; grid-template-columns: 6rem 1fr;
  column-gap: var(--space-3); align-items: start;
}
/* Numer jest jedynym elementem, który komunikuje „to procedura", więc dostaje
   skalę nagłówka. W poprzedniej wersji miał 3.2rem obok pogrubionego tytułu
   i był ozdobnikiem, nie kotwicą. Cyfra w czerwonym kółku byłaby najbardziej
   oczywistym rozwiązaniem i nie miałaby nic wspólnego z językiem important.is. */
.opieka-awaria__num {
  font: var(--fw-regular) var(--font-h1)/0.9 var(--font-decorative);
  color: var(--color-accent);
  transform: rotate(-4deg);
  text-align: center;
}
.opieka-awaria__title {
  margin: 0 0 var(--space-1);
  font: var(--fw-bold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
/* max-width, bo opis biegł przez całą szerokość panelu, czyli 85 do 90 znaków
   w wierszu. Komfort czytania kończy się w okolicach 75. */
.opieka-awaria__desc {
  margin: 0; max-width: 62ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
/* Świadomie BEZ wyróżniania pojedynczego kroku. Uwaga Łukasza 2026-07-28
   trafia w sedno: to lista kroków w kolejności, w jakiej się dzieją, więc
   żaden nie jest ważniejszy, a wyróżnienie sugerowało hierarchię, której tu
   nie ma. Dodatkowy powód, żeby nie wracać do --color-accent-bg: tym tłem
   pakiety oznaczają pakiet polecany i ma to zostać jednoznaczne. */
@media (max-width: 480px) {
  .opieka-awaria__list { padding: var(--space-4); }
  .opieka-awaria__step {
    grid-template-columns: 4.4rem 1fr; column-gap: var(--space-2);
  }
}

/* ---------- CZASY REAKCJI ----------
   Stoi zaraz po awarii, więc musi wyglądać inaczej niż ona, inaczej strona
   ma dwa sąsiadujące stosy wierszy. Awaria to JEDEN panel z osią numerów.
   Tu: wiersze bez wspólnej ramy, a nośnikiem informacji są dwa małe pola
   z czasami. Ciężar wizualny siedzi w liczbach, nie w pojemniku.

   Wyróżnienie alarmu: WYŁĄCZNIE wypełniony chip przy „P0". Bez
   --color-accent-bg na całym wierszu, bo tym tłem cennik oznacza pakiet
   polecany i ma to zostać jednoznaczne (ta sama zasada co w awaria.php).
   Bez borderów, zgodnie z tokens.css: separuje odstęp i kontrast powierzchni. */
.opieka-reakcja__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-reakcja__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-3);
}
.opieka-reakcja__note {
  margin: 0 auto; max-width: 54ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-reakcja__note--sub {
  margin-top: var(--space-2); max-width: 50ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-50);
}
.opieka-reakcja__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-5);
}
/* Wiersz priorytetu: po lewej etykieta (kod + nazwa), po prawej opis i dwa
   czasy. Kluczowe jest jawne przypisanie kolumn. Wcześniej ich nie było, więc
   auto-placement wrzucał listę czasów do lewej kolumny szerokiej na 13rem:
   kafel obejmował samą etykietę, wartość wychodziła poza niego i łamała się
   co słowo, a prawa połowa wiersza stała pusta (zrzut Łukasza 2026-08-26). */
.opieka-reakcja__item {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr);
  column-gap: var(--space-4); row-gap: var(--space-3);
  align-items: start;
}
.opieka-reakcja__label { grid-column: 1; grid-row: 1 / span 2; }
.opieka-reakcja__kiedy { grid-column: 2; grid-row: 1; }
.opieka-reakcja__czasy { grid-column: 2; grid-row: 2; }
.opieka-reakcja__label { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
/* Kod priorytetu w chipie: sam czerwony tekst „P0" gubił się obok nazwy,
   a to on jest kotwicą, po której klient wraca wzrokiem do wiersza. */
.opieka-reakcja__kod {
  align-self: start;
  padding: 0.2em 0.6em; border-radius: var(--radius-sm);
  font: var(--fw-black) var(--font-body)/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--color-accent); background: var(--surface-04);
}
.opieka-reakcja__item--alarm .opieka-reakcja__kod {
  color: var(--surface-base); background: var(--color-accent);
}
.opieka-reakcja__nazwa {
  font: var(--fw-bold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-reakcja__kiedy {
  margin: 0; max-width: 60ch;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
/* Dwa czasy obok siebie, na całą szerokość prawej kolumny. */
.opieka-reakcja__czasy {
  margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
/* Kafel czasu: etykieta nad wartością, nie obok. Układ „etykieta po lewej,
   wartość po prawej" wymagał szerokości, której w kolumnie 270 px nie ma,
   więc wartość łamała się co słowo. Bez white-space: nowrap, bo najdłuższa
   („zegar startuje w najbliższy dzień roboczy") rozpychała kafel poza ekran
   telefonu. */
.opieka-reakcja__czas {
  display: flex; flex-direction: column; row-gap: 2px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-04);
}
.opieka-reakcja__czas dt {
  margin: 0;
  font: var(--fw-medium) var(--font-caption)/1.4 var(--font-sans);
  color: var(--ink-50);
}
.opieka-reakcja__czas dd {
  margin: 0;
  font: var(--fw-semibold) var(--font-body)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-reakcja__zegar {
  margin: var(--space-5) 0 0; max-width: 68ch;
  font: var(--fw-regular) var(--font-body)/1.7 var(--font-sans);
  color: var(--ink-62);
}
.opieka-reakcja__zegar strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
/* Blok „reakcja to nie naprawa" dostaje własną powierzchnię, bo to zmiana
   tematu wewnątrz sekcji: wyżej mówimy, co obiecujemy, tu czego nie. */
.opieka-reakcja__naprawa {
  margin-top: var(--space-5); padding: var(--space-5);
  background: var(--surface-raised); border-radius: var(--radius-2xl);
}
.opieka-reakcja__naprawa-title {
  margin: 0 0 var(--space-2);
  font: var(--fw-bold) var(--font-h4)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-reakcja__naprawa-lead {
  margin: 0; max-width: 66ch;
  font: var(--fw-regular) var(--font-body)/1.7 var(--font-sans);
  color: var(--ink-62);
}
.opieka-reakcja__naprawa-lead strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
.opieka-reakcja__typowe {
  margin: var(--space-4) 0 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.opieka-reakcja__typowy {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr);
  column-gap: var(--space-3);
}
.opieka-reakcja__typowy dt {
  font: var(--fw-semibold) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--color-ink);
}
.opieka-reakcja__typowy dd {
  margin: 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
@media (max-width: 768px) {
  .opieka-reakcja__item { grid-template-columns: 1fr; row-gap: var(--space-2); }
  /* Jedna kolumna: znoszę przypisania kolumn, bo inaczej wszystko celowałoby
     w nieistniejącą drugą kolumnę. */
  .opieka-reakcja__label,
  .opieka-reakcja__kiedy,
  .opieka-reakcja__czasy { grid-column: 1; grid-row: auto; }
  .opieka-reakcja__label { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .opieka-reakcja__typowy { grid-template-columns: 1fr; row-gap: var(--space-1); }
}
@media (max-width: 480px) {
  .opieka-reakcja__czasy { grid-template-columns: 1fr; }
  .opieka-reakcja__naprawa { padding: var(--space-4); }
}

/* ---------- PAKIETY ---------- */
.opieka-pakiety__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-pakiety__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
.opieka-pakiety__note {
  margin: 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
/* Zdanie o tym, że kwota jest punktem wyjścia. Wyraźnie ciszej niż note,
   bo to zastrzeżenie, nie obietnica, ale musi być czytelne przed cenami,
   nie dopiskiem pod nimi. */
.opieka-pakiety__adjust {
  margin: var(--space-2) auto 0; max-width: 58ch;
  font: var(--fw-regular) var(--font-caption)/1.6 var(--font-sans);
  color: var(--ink-50);
}
/* Trzy równe kolumny. Wcześniej były dwie, a Pro schodził pod nie na pełną
   szerokość z osobnym układem poziomym: kolumny miały różne wysokości, karta
   Standard kończyła się pustym polem, a ceny nie stały w jednej linii, więc
   nie dało się ich porównać jednym spojrzeniem (uwaga Łukasza 2026-08-26).
   Poniżej 1024 px schodzimy na jedną kolumnę, bo trzy kolumny w 768 px łamały
   kwotę na dwie linie. */
.opieka-pakiety__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}
/* Linia „Wszystko z pakietu X, plus:" wprowadza listę, więc nie stoi w niej
   z myślnikiem. Reguła musi być globalna dla wszystkich kart: wcześniej
   komentarz stał w środku selektora i zawężał ją do trzeciej karty, więc
   Standard miał tę linię w rozmiarze zwykłego tekstu, a Pro w nagłówkowym. */
.opieka-pakiet__inherit {
  margin: var(--space-3) 0 0;
  font: var(--fw-semibold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
/* Karta w trzech kolumnach kolumny 768 px ma około 240 px, więc padding
   z --space-4 (32 px) zabierałby jej czwartą część szerokości. Węższy
   padding zostawia tekst czytelny bez wychodzenia poza kolumnę serwisu. */
.opieka-pakiet {
  position: relative;
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-3) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
}
/* 2026-09-02: czerwone tło karty wyróżnionej zdjęte na uwagę Łukasza.
   Wyróżnieniem Standardu jest wyłącznie plakietka „Najpopularniejszy". */
.opieka-pakiet__badge {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 14px; border-radius: var(--radius-full);
  /* Zmierzone 2026-08-26: biel na akcencie dawała 3,63:1 przy 13 px, więc
     poniżej progu WCAG AA (4,5:1). Ciemny tekst na tym samym tle daje 4,80:1
     i plakietka zostaje tak samo widoczna. To NIE jest przycisk, więc nie
     dotyka decyzji o kolorach przycisków. */
  background: var(--color-accent); color: var(--color-text);
  font: var(--fw-semibold) var(--font-caption)/1.6 var(--font-sans);
  white-space: nowrap;
}
/* Nazwa pakietu odręczną Mansalvą, wyraźnie większa. */
.opieka-pakiet__name {
  margin: 0;
  font: 400 clamp(2.6rem, 1.6vw + 2rem, 3.4rem)/1 var(--font-decorative);
  color: var(--color-accent);
}
/* Kwota duża, waluta wyraźnie mniejsza. Wcześniej „PLN" miało ten sam rozmiar
   co liczba, więc całość łamała się na dwie linie i zjadała wysokość karty. */
.opieka-pakiet__price {
  margin: var(--space-2) 0 0;
  display: flex; align-items: baseline; gap: .25em;
  font: var(--fw-black) var(--font-h1)/1 var(--font-sans);
  letter-spacing: -0.02em; color: var(--color-ink);
  white-space: nowrap;
}
.opieka-pakiet__cur {
  font-size: .42em;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--ink-62);
}
.opieka-pakiet__unit,
.opieka-pakiet__for {
  margin: 0;
  font: var(--fw-regular) var(--font-caption)/1.5 var(--font-sans);
  color: var(--ink-50);
}
.opieka-pakiet__for { margin-top: var(--space-2); color: var(--ink-62); }
.opieka-pakiet__list {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  /* flex:1 wypycha CTA na dół, więc przyciski są w jednej linii we wszystkich kartach */
  flex: 1;
}
.opieka-pakiet__list li {
  position: relative; padding-left: 22px;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-90);
}
.opieka-pakiet__list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 10px; height: 2px; border-radius: 2px;
  background: var(--color-accent);
}
.opieka-pakiet__cta {
  margin-top: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; box-sizing: border-box; width: 100%;
}
.opieka-pakiet__alt {
  margin: var(--space-2) 0 0;
  text-align: center;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
}
.opieka-pakiet__alt a {
  /* 19 px wysokości to za mało na palec (minimum WCAG to 44 px). */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: var(--space-2);
  color: var(--ink-62); text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- HERO: statystyki ----------
   ZERO własnych rozmiarów. Komponent .stats* ma jedno źródło prawdy w
   home/style.css i tak samo wygląda na home i tutaj.

   Historia: 2026-08-26 stał tu wyjątek ,
   bo „99,7%" w foncie display nie mieściło się w wąskiej karcie. Karty były
   wąskie, bo cztery statystyki dzieliły jeden rząd. 2026-09-08 rząd zmienił
   się w siatkę 2x2, karta ma dwa razy więcej miejsca (zmierzone: 377 px na
   opiece przy oknie 1124 px, czyli więcej niż 336 px na home), więc wyjątek
   przestał być potrzebny i robił już tylko niespójność: 34 px tutaj kontra
   56,9 px na home. Usunięty.

   Jeśli liczba znów zacznie wystawać, popraw komponent w home/style.css
   (albo skróć samą liczbę), nie dodawaj tu lokalnego rozmiaru. */
.opieka-hero .stats__item { overflow: hidden; }

/* ---------- ZAUFALI NAM: wariant z logami (tylko opieka) ----------
   Siatka logotypów stron pod opieką zamiast wielkich kart case study:
   klient opieki chce w sekundę zobaczyć, kto Wam zaufał, a karty o
   budowaniu marek odpowiadają na pytanie, które nie zadał. */
.trusted-logos {
  list-style: none; margin: 0; padding: 0;
  /* Pięć kolumn, bo tyle jest logotypów: przy czterech piąty stawał sam
     w drugim wierszu i sekcja wyglądała na niedokończoną. auto-fit dopasuje
     się, gdy dojdą kolejne. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}
.trusted-logos__item {
  display: flex; align-items: center; justify-content: center;
  min-height: 88px;
  /* Padding space-4 zjadał 64 z 140 px komórki, więc logotyp dostawał 76 px
     i TaxVision renderował się jako pasek 77x14. */
  padding: var(--space-2);
  background: var(--surface-raised); border-radius: var(--radius-lg);
}
/* Logotypy klientów przychodzą w swoich kolorach, a część z nich jest
   ciemna (ZIG ZAG, TAXVISION) i na czarnej karcie po prostu nie było ich
   widać. Ujednolicamy do jasnej sylwetki, kolor wraca na hover. */
.trusted-logos__item img {
  max-height: 40px; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1) opacity(.72);
  transition: filter .25s var(--ease-out, ease);
}
.trusted-logos__item:hover img,
.trusted-logos__item:focus-within img {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .trusted-logos__item img { transition: none; }
}
@media (max-width: 900px) {
  .trusted-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- PRZEWAGA: dlaczego my ----------
   Jedyna sekcja argumentacyjna na stronie, więc świadomie BEZ ikon i siatki
   kafli. Ma wyglądać jak wywód, nie jak zestawienie funkcji.

   2026-08-26: układ zmieniony z dwóch kolumn na jedną. Zmierzone przy 1440 px:
   kolumna lewa 387 px i 607 px wysokości, prawa 317 px i 928 px, czyli 321 px
   pustego pola pod wywodem. W kolumnie 768 px dwie kolumny dawały też h2
   łamane po dwóch słowach („Znamy strony, / które / sami rozwijamy") i tytuły
   skutków po dwa słowa w wierszu („Pulę godzin / liczymy, nie / zgadujemy").
   Kontener 768 px jest decyzją projektową, więc poprawiamy zawartość, nie
   kontener: wywód idzie na pełną szerokość, skutki jako lista pod nim. */
.opieka-przewaga__grid {
  display: flex; flex-direction: column; gap: var(--space-6);
}
.opieka-przewaga__lead h2 {
  margin: 0 0 var(--space-3);
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em;
}
.opieka-przewaga__lead p {
  margin: 0 0 var(--space-3); max-width: 52ch;
  font: var(--fw-regular) var(--font-body)/1.7 var(--font-sans);
  color: var(--ink-62);
}
/* Puenta odręcznie i w akcencie, tak jak strona główna wyróżnia zdanie,
   które ma zostać w pamięci. To jedyne miejsce w tej sekcji z font-decorative,
   bo drugie takie zdanie zabiera pierwszemu całą siłę. */
.opieka-przewaga__punch {
  margin: var(--space-4) 0 0 !important; max-width: 34ch !important;
  font: 400 clamp(2.2rem, 1.4vw + 1.8rem, 3.0rem)/1.3 var(--font-decorative) !important;
  color: var(--color-accent) !important;
}
.opieka-przewaga__skutki {
  list-style: none; margin: 0; padding: 0;
  counter-reset: skutek;
  display: flex; flex-direction: column; gap: var(--space-4);
}
/* Odręczny numer (Mansalva) zamiast kafli bez rytmu: sekcja była "za nudna"
   (uwaga Łukasza 2026-08-26), a numeracja daje oś wzroku bez zamiany wywodu
   w siatkę ikonek. */
.opieka-przewaga__skutek {
  counter-increment: skutek;
  position: relative;
  /* 6.4rem, nie 5.2rem: przy 5.2rem na miejsce cyfry zostawało 20 px, a „2"
     w Mansalvie jest szersza i dotykała pierwszej litery tytułu. Cyfra dostaje
     własną, stałą szerokość, żeby wszystkie trzy startowały w jednej osi. */
  padding: var(--space-4) var(--space-4) var(--space-4) 6.4rem;
  background: var(--surface-raised); border-radius: var(--radius-xl);
}
.opieka-przewaga__skutek::before {
  content: counter(skutek);
  position: absolute; left: var(--space-4); top: calc(var(--space-4) - 0.1em);
  width: 3.2rem;
  font: 400 3.4rem/1 var(--font-decorative);
  color: var(--color-accent);
}
.opieka-przewaga__skutek-title {
  margin: 0 0 var(--space-1);
  font: var(--fw-bold) var(--font-h4)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-przewaga__skutek-desc {
  margin: 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
@media (max-width: 768px) {
  .opieka-przewaga__grid { gap: var(--space-5); }
  .opieka-przewaga__skutek { padding-left: var(--space-4); padding-top: 4.6rem; }
  .opieka-przewaga__skutek::before { top: var(--space-2); }
}

/* ---------- PULA GODZIN ----------
   Cztery pytania jako lista definicji, bo to dosłownie pary pytanie-odpowiedź.
   Bez akordeonu: te odpowiedzi mają być przeczytane, a nie schowane za
   kliknięciem. Akordeon jest niżej, w FAQ, i tam jest na miejscu. */
.opieka-pula__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-pula__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-3);
}
.opieka-pula__note {
  margin: 0 auto; max-width: 56ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-pula__zasady {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.opieka-pula__zasada {
  padding: var(--space-4);
  background: var(--surface-raised); border-radius: var(--radius-2xl);
}
.opieka-pula__pytanie {
  margin: 0 0 var(--space-2);
  font: var(--fw-bold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-pula__odpowiedz {
  margin: 0;
  font: var(--fw-regular) var(--font-body)/1.7 var(--font-sans);
  color: var(--ink-62);
}
.opieka-pula__rozliczenie { margin-top: var(--space-5); }
.opieka-pula__rozliczenie-title {
  margin: 0 0 var(--space-3); text-align: center;
  font: var(--fw-bold) var(--font-h4)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-pula__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* Wiersze na tle 04, nie na kartach: to tabela rozliczeń, więc ma się czytać
   jako zestawienie, nie jako sześć osobnych propozycji. */
.opieka-pula__wiersz {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-4); align-items: baseline;
  padding: var(--space-3);
  background: var(--surface-04); border-radius: var(--radius-md);
}
.opieka-pula__wiersz-co {
  font: var(--fw-semibold) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--color-ink);
}
.opieka-pula__wiersz-jak {
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
/* Jedyny wiersz na naszą niekorzyść, więc jedyny wyróżniony. Akcent na tekście,
   nie tłem: tłem accent-bg cennik oznacza pakiet polecany. */
.opieka-pula__wiersz--plus .opieka-pula__wiersz-jak {
  color: var(--color-accent); font-weight: var(--fw-semibold);
}
@media (max-width: 768px) {
  .opieka-pula__zasady { grid-template-columns: 1fr; }
  .opieka-pula__wiersz { grid-template-columns: 1fr; row-gap: var(--space-1); }
}

/* ---------- GRANICE: czego nie obiecujemy ----------
   ⚠️ NIE zmniejszać do caption i NIE chować w details. Cała wartość tej sekcji
   polega na tym, że zastrzeżenia są widoczne przed decyzją, a nie do
   znalezienia po niej. Wygląda więc jak pełnoprawna sekcja oferty. */
.opieka-granice__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-granice__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-3);
}
.opieka-granice__note {
  margin: 0 auto; max-width: 52ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-granice__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.opieka-granice__item {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: var(--space-3); align-items: start;
}
/* Krzyżyk rysowany dwoma pseudoelementami, nie ikoną z pliku: to jedyny znak
   „nie" na stronie, więc nie warto pod niego generować assetu, a kształt jest
   na tyle prosty, że CSS wystarcza. Lekki obrót, żeby nie był idealny. */
.opieka-granice__mark {
  position: relative; display: block;
  width: 2rem; height: 2rem; margin-top: .2em;
  transform: rotate(-6deg);
}
.opieka-granice__mark::before,
.opieka-granice__mark::after {
  content: ''; position: absolute; top: 50%; left: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--color-accent);
}
.opieka-granice__mark::before { transform: rotate(45deg); }
.opieka-granice__mark::after  { transform: rotate(-45deg); }
.opieka-granice__title {
  margin: 0 0 var(--space-1);
  font: var(--fw-bold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-granice__desc {
  margin: 0; max-width: 66ch;
  font: var(--fw-regular) var(--font-body)/1.7 var(--font-sans);
  color: var(--ink-62);
}

/* ---------- WYJŚCIE ----------
   Jeden panel, lista z myślnikami akcentu, tak jak punkty w cenniku.
   Celowo ta sama forma co lista korzyści pakietu: to też są korzyści,
   tylko dotyczą momentu odejścia. */
.opieka-wyjscie__head { text-align: center; margin-bottom: var(--space-5); }
.opieka-wyjscie__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-3);
}
.opieka-wyjscie__note {
  margin: 0 auto; max-width: 50ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-wyjscie__list {
  list-style: none; margin: 0; padding: var(--space-5);
  background: var(--surface-raised); border-radius: var(--radius-2xl);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.opieka-wyjscie__item {
  position: relative; padding-left: 26px;
  font: var(--fw-regular) var(--font-body)/1.7 var(--font-sans);
  color: var(--ink-90);
}
/* Pogrubione sedno punktu: jaśniejsze od resztu wiersza, tak jak w sekcji
   „Jak działają godziny". Bez tego bold gubi się na ink-90. */
.opieka-wyjscie__item strong {
  color: var(--color-ink); font-weight: var(--fw-semibold);
}
.opieka-wyjscie__item::before {
  content: ''; position: absolute; left: 0; top: .7em;
  width: 12px; height: 2px; border-radius: 2px;
  background: var(--color-accent);
}
@media (max-width: 480px) {
  .opieka-wyjscie__list { padding: var(--space-4); }
}

/* ---------- WTYCZKI PREMIUM ---------- */
.opieka-wtyczki__head { text-align: center; margin-bottom: var(--space-5); }
.opieka-wtyczki__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
.opieka-wtyczki__note {
  margin: 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
/* Warunek trwania licencji: ciszej niż kwota oszczędności, bo to zastrzeżenie,
   ale nie schowane, bo od przemilczenia tego zaczyna się problem. */
.opieka-wtyczki__term {
  margin: var(--space-2) auto 0; max-width: 56ch;
  font: var(--fw-regular) var(--font-caption)/1.6 var(--font-sans);
  color: var(--ink-50);
}
.opieka-wtyczki__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.opieka-wtyczki__item {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: 2px;
}
.opieka-wtyczki__name {
  font: var(--fw-bold) var(--font-body)/1.3 var(--font-sans);
  color: var(--color-ink);
}
.opieka-wtyczki__role {
  font: var(--fw-regular) var(--font-caption)/1.4 var(--font-sans);
  color: var(--ink-50);
}

/* Trzy kolumny mieszczą się dopiero od 1200 px: przy 1024 px karta miała
   243 px, czyli tyle, że kwota „1 699 PLN" stawała na granicy złamania.
   Niżej jedna kolumna wyśrodkowana, bo dwie dla trzech pakietów zostawiają
   pustą połowę wiersza. */
@media (max-width: 1199px) {
  .opieka-pakiety__grid { grid-template-columns: 1fr; }
  .opieka-pakiet { max-width: 42rem; margin-inline: auto; width: 100%; }
}
@media (max-width: 768px) {
  .opieka-kwal__grid { grid-template-columns: 1fr; }
  /* Na jednej kolumnie trzecia karta wraca do zwykłego stosu, inaczej ikona
     i cytat zostałyby obok siebie w bardzo wąskim wierszu. */
  .opieka-kwal__grid > li:nth-child(3) { display: flex; }
  .opieka-kwal__grid > li:nth-child(3) .opieka-kwal__icon { margin-bottom: var(--space-2); }
}

/* ---------- WTYCZKI: rozwijana pełna lista ---------- */
.opieka-wtyczki__more { margin-top: var(--space-4); text-align: center; }
.opieka-wtyczki__more summary {
  cursor: pointer;
  /* Zmierzone 22,4 px wysokosci, czyli polowa minimum WCAG (44 px) dla celu
     dotykowego. inline-flex + min-height zamiast inline-block. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: var(--space-3);
  font: var(--fw-semibold) var(--font-body)/1.4 var(--font-sans);
  color: var(--color-ink);
  list-style: none;
}
.opieka-wtyczki__more summary::-webkit-details-marker { display: none; }
.opieka-wtyczki__more summary:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 4px;
}
.opieka-wtyczki__more[open] summary { margin-bottom: var(--space-4); }
.opieka-wtyczki__all {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center;
}
.opieka-wtyczki__all li {
  padding: 6px 14px; border-radius: var(--radius-full);
  background: var(--surface-raised);
  font: var(--fw-regular) var(--font-caption)/1.4 var(--font-sans);
  color: var(--ink-62);
}

/* Karta wtyczki z logotypem: logo po lewej, tekst po prawej. */
.opieka-wtyczki__item {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}
/* Logotypy monochromatyczne, kolor dopiero na hover. To ten sam zamysł co
   .ai-logo__mark na stronie głównej (szary --ink-50, na hover --brand), tylko
   inna technika: tam jednokolorowe SVG idą przez mask, a tu mamy pełnokolorowe
   rastry producentów, na których maska alfa dałaby szare prostokąty zamiast
   logo. Filtr odbarwia, ale zachowuje kształt znaku. */
.opieka-wtyczki__logo {
  width: 48px; height: 48px; flex: none;
  object-fit: contain;
  border-radius: var(--radius-sm);
  /* Samo odbarwienie, BEZ rozjaśniania. Wcześniej brightness(1.75) podnosiło
     tło kolorowych kafelków (ACF, Fluent Forms, Security Ninja) do poziomu
     jasności ich białego znaku i logo znikało. Grayscale zachowuje wewnętrzny
     kontrast każdego znaku, niezależnie czy jest jasny na ciemnym, czy odwrotnie. */
  filter: grayscale(1) contrast(1.05);
  opacity: 0.85;
  transition: filter var(--duration-slow) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out);
}
.opieka-wtyczki__item:hover .opieka-wtyczki__logo {
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .opieka-wtyczki__logo { transition: none; }
}
.opieka-wtyczki__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Kluczowa fraza sekcji: ile klient oszczędza. Wyróżniona, bo to jedyny
   twardy argument liczbowy w tej sekcji. */
.opieka-wtyczki__save {
  margin: var(--space-3) 0 0;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-90);
}
.opieka-wtyczki__save strong {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

/* ---------- ZAKRES OPIEKI ---------- */
.opieka-zakres__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-zakres__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
.opieka-zakres__note {
  margin: 0;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-zakres__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
}
/* Siatka karty: ikona i tytuł obok siebie w pierwszym rzędzie, opis w drugim
   na pełnej szerokości. Bez tego opis kończył się w prawej kolumnie i pod
   ikoną zostawała pusta dziura. */
.opieka-zakres__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: center;
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
}
.opieka-zakres__ico {
  grid-column: 1; grid-row: 1;
  width: 72px; height: 72px; flex: none; object-fit: contain;
}
.opieka-zakres__title {
  grid-column: 2; grid-row: 1;
  margin: 0;
  font: var(--fw-bold) var(--font-h4)/var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.opieka-zakres__desc {
  /* pełna szerokość karty, także pod ikoną */
  grid-column: 1 / -1; grid-row: 2;
  margin: 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
@media (max-width: 768px) {
  .opieka-zakres__grid { grid-template-columns: 1fr; }
  .opieka-zakres__ico { width: 56px; height: 56px; }
}

/* ---------- POZA PAKIETEM ---------- */
.opieka-poza__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-poza__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
.opieka-poza__note {
  margin: 0 auto; max-width: 60ch;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-poza__inner {
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--space-4); align-items: start;
}
/* Stawka: jedyna karta z akcentem w tej sekcji, bo to jej główna informacja. */
.opieka-poza__rate {
  background: var(--color-accent-bg);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
}
.opieka-poza__rate-num {
  margin: 0;
  display: flex; align-items: baseline; gap: .25em;
  font: var(--fw-black) var(--font-h1)/1 var(--font-sans);
  letter-spacing: -0.02em; color: var(--color-accent);
  white-space: nowrap;
}
/* Waluta mniejsza od kwoty, tak samo jak w cenniku pakietów. */
.opieka-poza__rate-cur {
  font-size: .42em; font-weight: var(--fw-semibold); letter-spacing: 0;
}
.opieka-poza__rate-unit {
  margin: var(--space-1) 0 var(--space-3);
  font: var(--fw-regular) var(--font-caption)/1.5 var(--font-sans);
  color: var(--ink-62);
}
.opieka-poza__rate-desc {
  margin: 0;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-90);
}
.opieka-poza__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* Nazwa i szacunek godzin w jednym rzędzie, opis pod nimi na pełnej szerokości.
   Ten sam wzorzec co karty w sekcji zakresu, żeby nie mnożyć układów. */
.opieka-poza__item {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: grid; grid-template-columns: 1fr auto;
  column-gap: var(--space-3); row-gap: 4px;
  align-items: baseline;
}
.opieka-poza__what {
  grid-column: 1;
  font: var(--fw-semibold) var(--font-body)/1.35 var(--font-sans);
  color: var(--color-ink);
}
.opieka-poza__hours {
  grid-column: 2;
  padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--surface-04); color: var(--color-accent);
  font: var(--fw-semibold) var(--font-caption)/1.5 var(--font-sans);
  white-space: nowrap;
}
.opieka-poza__foot {
  margin: var(--space-5) auto 0; max-width: 60ch; text-align: center;
  font: var(--fw-regular) var(--font-caption)/1.6 var(--font-sans);
  color: var(--ink-50);
}
@media (max-width: 768px) {
  .opieka-poza__inner { grid-template-columns: 1fr; }
}

/* ---------- HISTORIA KLIENTA ---------- */
.opieka-historia__head { text-align: center; margin-bottom: var(--space-6); }
.opieka-historia__head h2 {
  font: var(--fw-black) var(--font-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: -0.01em; margin: 0 0 var(--space-2);
}
.opieka-historia__note {
  margin: 0;
  font: var(--fw-regular) var(--font-h5)/var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
}
.opieka-historia__cols {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
  align-items: stretch;
}
.opieka-historia__col {
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
}
/* Strona „po" na akcencie, bo to ona jest puentą sekcji. */
.opieka-historia__col--po { background: var(--color-accent-bg); }
.opieka-historia__label {
  margin: 0 0 var(--space-3);
  font: var(--fw-semibold) var(--font-caption)/1 var(--font-sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-50);
}
.opieka-historia__col--po .opieka-historia__label { color: var(--color-accent); }
.opieka-historia__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.opieka-historia__list li {
  position: relative; padding-left: 22px;
  font: var(--fw-regular) var(--font-body)/var(--lh-normal) var(--font-sans);
  color: var(--ink-90);
}
.opieka-historia__list li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 10px; height: 2px; border-radius: 2px;
  background: var(--ink-28);
}
.opieka-historia__col--po .opieka-historia__list li::before { background: var(--color-accent); }

/* Puenta odręcznie i duża, bo to najmocniejsze zdanie w sekcji.
   Uwaga Łukasza z wersji reactowej: cytat był za mały i ginął. */
.opieka-historia__quote {
  margin: var(--space-5) auto 0; max-width: 32ch; text-align: center;
  font: 400 clamp(2.6rem, 1.8vw + 2rem, 3.6rem)/1.25 var(--font-decorative);
  color: var(--color-accent);
}
.opieka-historia__proof {
  margin: var(--space-3) auto 0; max-width: 60ch; text-align: center;
  font: var(--fw-regular) var(--font-caption)/1.6 var(--font-sans);
  color: var(--ink-50);
}
@media (max-width: 768px) {
  .opieka-historia__cols { grid-template-columns: 1fr; }
}

.opieka-poza__cta { margin: var(--space-4) 0 0; text-align: center; }
.opieka-poza__cta .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; box-sizing: border-box;
}
@media (max-width: 768px) {
  }