/* ══════════════════════════════════════════════════════════════
   PLANY I CENNIK — WARSTWA WIZUALNA
   Wersja 1.0, 16.08.2026

   DLACZEGO OSOBNY PLIK, A NIE KONIEC mc-lp.css:
   dwa razy tego wieczoru `mc-lp.css` zostało nadpisane w całości przez
   równoległą pracę nad nagłówkiem i hero — dopisany blok znikał bez śladu.
   Arkusz cennika stoi więc osobno i zależy od `ph-masterclass`, dzięki czemu
   wchodzi po nim w kolejności i wygrywa przy tej samej szczegółowości.
   Nikt inny tego pliku nie tyka.

   ZAŁOŻENIE: trzy kafle nie mogą ważyć tyle samo, skoro sprzedać ma się
   jeden. START i PRO zostają w beżu i schodzą do roli tła; kafel
   założycielski idzie na czerń marki i dostaje jedyny na stronie pasek
   postępu. Wyróżnienie niesie kolor, nie rozmiar — rząd stoi równo.

   Paleta i zmienne pochodzą z `mc-lp.css` (`.mc`).
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   NAGŁÓWEK STRONY — UKŁAD Z HERO STRONY GŁÓWNEJ

   Wyśrodkowany słupek tekstu (znaczek, dwuwierszowy nagłówek, lead, akapit,
   adnotacja — jedno pod drugim) zajmował 442 px i spychał kafle poniżej
   krawędzi ekranu: przy oknie 872 px widać było ledwie 320 px kafla.

   Ten sam chwyt co w hero na stronie głównej: dwie równe kolumny, nagłówek
   po lewej, cała treść objaśniająca po prawej, wszystko do lewej krawędzi.
   Wysokość schodzi o ponad połowę, a kafle wjeżdżają w pierwszy ekran.

   Skala pisma odwzorowuje `.mc-hero__h1` (waga, tracking, `padding-right: 40px`
   jako przerwa między kolumnami) — wartości wpisane wprost, nie przez wspólną
   klasę, żeby zmiana hero nie ruszała cennika bez wiedzy o tym.
   Siatka celowo NIE bierze `margin-inline` z hero: ma trzymać krawędzie
   równo z kaflami, a te siedzą w kontenerze `.mc-wrap`.
   ══════════════════════════════════════════════════════════════ */

.mc-cen-naglowek {
  padding: 34px 0 36px;
  text-align: left;
}

/* Trzy rzeczy w jednym pasie: pastylka, nagłówek, reszta treści.
   Dwie pierwsze kolumny szerokości własnej, trzecia zabiera resztę -
   dzięki temu tekst objaśniający dostaje najwięcej miejsca i łamie się
   na najmniejszą liczbę wierszy, a cały pas zostaje niski. */
.mc-cen-naglowek__grid {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: 44px;
  align-items: center;
}

/* Pastylka stoi w rzędzie, więc dolny odstęp z układu pionowego przestał
   mieć sens. `align-self` trzeba nadpisać wprost: arkusz bazowy daje jej
   `flex-start`, żeby nie rozciągała się w kolumnach flex, a tutaj przez to
   wisiała 29 px nad nagłówkiem zamiast stać z nim w jednej osi. */
.mc-cen-naglowek .mc-badge--dwie {
  margin-bottom: 0;
  flex: none;
  align-self: center;
}

.mc-cen-naglowek .mc-cen__h1 { align-self: center; }

/* Nagłówek małą literą - „Wybierz swój plan", nie wersaliki. Zawijanie
   wyłączone: ma stać w jednym wierszu obok pastylki, a nie łamać się
   na dwa i podnosić cały pas. */
.mc-cen__h1 {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: none;
  white-space: nowrap;
}

.mc-cen__h1 span { display: inline; }

/* Reszta treści - 17 px z interlinią 1,55, czyli 26,4 px na wiersz.
   Przy tym stopniu pisma to odstęp, który jeszcze wiąże wiersze w akapit,
   a już nie zbija ich w blok. */
.mc-cen__lead {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.mc-cen__lead-txt {
  max-width: none;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #46454a;
}

.mc-cen__netto {
  max-width: none;
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mc-szary);
}

/* Komunikat "chodzi o..." przy wejściu z bramki - wyróżniony jak
   `.mc-sub__uwaga` na /subskrypcja/, bo to jedyne wyjaśnienie, po co
   gość tu w ogóle trafił. */
.mc-cen__cel {
  max-width: none;
  margin: 14px 0 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  font-size: 15.5px;
  line-height: 1.55;
  color: #56555b;
}

/* Poniżej 1200 px trzy kolumny robią się ciasne: nagłówek z pastylką
   zostają w rzędzie, treść schodzi pod nie na całą szerokość. */
@media (max-width: 1200px) {
  .mc-cen-naglowek__grid {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 18px;
    column-gap: 28px;
    align-items: start;
  }
  .mc-cen-naglowek__side { grid-column: 1 / -1; }
  .mc-cen-naglowek .mc-badge--dwie { align-self: center; }
  .mc-cen__h1 { align-self: center; }
}

@media (max-width: 700px) {
  .mc-cen-naglowek { padding: 20px 0 26px; }
  .mc-cen-naglowek__grid { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .mc-cen__h1 { white-space: normal; }
  .mc-cen__lead,
  .mc-cen__lead-txt,
  .mc-cen__netto { font-size: 16px; }
}

/* ── siatka: równe kafle ── */

/* `stretch` plus `height: 100%` na karcie sprawia, że wszystkie trzy kończą
   się w tej samej linii niezależnie od długości listy; przycisk dociska
   `margin-top: auto`, więc zostaje przy dolnej krawędzi. */
.mc-cen-plany__grid { align-items: stretch; }

.mc-cen-plan {
  position: relative;
  height: 100%;
  border: 1px solid transparent;

  /* Jeden odstęp boczny dla całego wnętrza kafla. Nie może siedzieć na samej
     karcie, bo zdjęcie ma iść od krawędzi do krawędzi - dlatego bierze go
     każdy blok treści z osobna, z tej jednej zmiennej. */
  --mc-cen-pad: 30px;
}

.mc-cen-plan__cennik,
.mc-cen-plan__dodatki,
.mc-cen-punkty {
  padding-inline: var(--mc-cen-pad);
}

/* Blok pod listą oddziela się od przycisku, ale tylko gdy coś w nim jest -
   pusty w kaflach miesięcznych nie może dokładać odstępu. */
.mc-cen-plan__dodatki:not(:empty) { padding-bottom: 26px; }

@media (max-width: 620px) {
  .mc-cen-plan { --mc-cen-pad: 22px; }
}

/* ── wiersze zestrojone między kaflami ──

   Sama równa wysokość kart nie wystarczy: kafel założycielski niesie więcej
   treści niż dwa pozostałe, więc bez strojenia jego lista i przycisk stawały
   na innej wysokości. Oko czyta to jako bałagan, nawet nie umiejąc nazwać
   przyczyny.

   `subgrid` przekazuje wiersze siatki nadrzędnej do wnętrza karty, więc
   wszystkie trzy dzielą te same sześć poziomów: zdjęcie, nazwa, ceny,
   lista, dodatki, przycisk. Każdy wiersz jest tak wysoki, jak najwyższa
   zawartość w nim - ceny stają w jednej linii, ptaszki w jednej linii,
   przyciski w jednej linii, bez jednej wartości wpisanej z ręki.

   Warunek: każdy kafel musi oddać komplet sześciu elementów, także pustych -
   dlatego szablon zawsze renderuje `__dodatki`, nawet gdy nie ma czego w nie
   włożyć. Bez `subgrid` (starsze przeglądarki) zostaje układ kolumnowy
   z poprzedniej wersji, czyli stan sprzed tej zmiany. */

@supports (grid-template-rows: subgrid) {
  @media (min-width: 1001px) {
    /* Kolejność wierszy: zdjęcie, nazwa, ceny, lista, dodatki (licznik
       i dopisek), przycisk. To lista rośnie, więc `1fr` siedzi na niej -
       dzięki temu licznik przykleja się do dołu listy, a nie pływa. */
    .mc-cen-plany__grid { grid-template-rows: auto auto auto auto 1fr auto auto; }

    .mc-cen-plan {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    /* W siatce osie zamieniają się rolami: to, co w kolumnie flex centrowało
       w poziomie (`align-self`), tutaj centruje w pionie. Stąd `justify-self`. */
    .mc-cen-plan__nazwa { justify-self: center; align-self: start; }

    /* Opis pakietu trzyma stałą szerokość kolumny, żeby dwa zdania obok
       jednego nie rozpychały kafla na boki. */
    .mc-cen-plan__zajawka { justify-self: center; }

    .mc-cen-plan__btn {
      justify-self: center;
      align-self: end;
      margin-top: 0;
    }

    .mc-cen-plan__zajawka,
    .mc-cen-plan__cennik,
    .mc-cen-plan__dodatki,
    .mc-cen-punkty { align-self: start; }
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mc-cen-plan { transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease; }
  .mc-cen-plan:hover { transform: translateY(-6px); }
}

/* ── wstęga na zdjęciu (domyślnie nieużywana) ── */

/* Pasek na całą szerokość zamiast pastylki w rogu: pastylka wchodziła
   w pastylkę z nazwą planu. Pole w panelu jest puste, więc wstęga się nie
   renderuje — wpisanie tekstu ją przywraca. */
.mc-cen-plan__wstega {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  margin: 0;
  padding: 10px 16px;
  background: rgba(28, 27, 31, .88);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

.mc-cen-plan--founders .mc-cen-plan__wstega {
  background: var(--mc-bez-100);
  color: var(--mc-czarny);
}

/* ── blok cenowy ── */

.mc-cen-plan__cennik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* Cena właściwa i przekreślona stoją w jednym wierszu, wyrównane do linii
   pisma. Przekreślona idzie ZA ceną: wzrok trafia najpierw na to, co się
   płaci, a stara kwota działa dopiero jako punkt odniesienia. */
.mc-cen-plan__ceny {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
}

/* Przekreślenie własne, grubsze i w kolorze akcentu — domyślna kreska
   przy tym stopniu pisma po prostu ginie. */
.mc-cen-plan__cena-stara {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--mc-szary);
}

.mc-cen-plan__cena-stara s {
  text-decoration: line-through;
  text-decoration-color: var(--mc-bez-100);
  text-decoration-thickness: 2px;
}

.mc-cen-plan__cena {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  line-height: 1;
}

/* Cyfry tabelaryczne: 99, 369 i 2520 mają wtedy tę samą szerokość znaku,
   więc trzy kafle nie „drgają" względem siebie przy zmianie cen. */
.mc-cen-plan__kwota {
  font-size: clamp(40px, 4vw, 54px);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Waluta schodzi o klasę niżej — w oko ma wpadać liczba, nie „zł". */
.mc-cen-plan__waluta {
  font-size: 20px;
  font-weight: 600;
  color: var(--mc-szary);
}

.mc-cen-plan__cena-opis {
  margin: 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.45;
  color: #46454a;
}

.mc-cen-plan__dopisek {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: #46454a;
}

/* ── znaczek oszczędności ── */

.mc-cen-plan__chip {
  margin: 4px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mc-bez-100);
  color: var(--mc-czarny);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── lista: ptaszki zamiast kropek ── */

/* Kropka mówi „punkt listy", ptaszek mówi „to dostajesz". W cenniku
   to różnica w odbiorze, nie w ozdobie. */
.mc-cen-punkty {
  margin: 26px 0 22px;
  display: grid;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.45;
}

.mc-cen-punkty li {
  list-style: none;
  position: relative;
  padding-left: 28px;
}

.mc-cen-punkty li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .35em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--mc-bez-100);
  border-bottom: 2px solid var(--mc-bez-100);
  transform: rotate(-45deg);
}

/* ── licznik miejsc z paskiem ── */

.mc-cen-licznik { margin: 0; }

.mc-cen-licznik__opis {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--mc-czarny);
}

.mc-cen-licznik__opis strong { font-size: 19px; font-weight: 700; }

.mc-cen-licznik__pasek {
  height: 6px;
  border-radius: 999px;
  background: rgba(28, 27, 31, .12);
  overflow: hidden;
}

.mc-cen-licznik__pasek span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mc-bez-100);
}

.mc-cen-licznik--koniec {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--mc-szary);
}

/* ══════════════════════════════════════════════════════════════
   KAFEL ZAŁOŻYCIELSKI
   ══════════════════════════════════════════════════════════════ */

.mc-cen-plan--founders {
  background: var(--mc-czarny);
  border-color: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: 0 28px 64px -28px rgba(28, 27, 31, .6);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mc-cen-plan--founders:hover { box-shadow: 0 34px 74px -26px rgba(28, 27, 31, .68); }
}

/* Pastylka z nazwą ma białe tło, ale nie ustawia koloru pisma — na ciemnej
   karcie dziedziczyła biel z rodzica i znikała. Kolor wpisany wprost. */
.mc-cen-plan--founders .mc-cen-plan__nazwa {
  color: var(--mc-czarny);
  border-color: transparent;
}

/* Kontrasty na czerni #1c1b1f: biel 16,9:1, biel 74% ok. 8,8:1,
   beż #eddbc7 12,5:1, beż-100 #c3a38c 7,9:1 — wszystkie ponad AA. */
.mc-cen-plan--founders .mc-cen-plan__cena-opis    { color: rgba(255, 255, 255, .74); }
.mc-cen-plan--founders .mc-cen-plan__waluta       { color: rgba(255, 255, 255, .6); }
.mc-cen-plan--founders .mc-cen-plan__cena-stara   { color: rgba(255, 255, 255, .5); }
.mc-cen-plan--founders .mc-cen-plan__cena-stara s { text-decoration-color: var(--mc-bez-100); }
.mc-cen-plan--founders .mc-cen-plan__dopisek      { color: var(--mc-bez); }
.mc-cen-plan--founders .mc-cen-punkty             { color: rgba(255, 255, 255, .92); }

.mc-cen-plan--founders .mc-cen-punkty li::before {
  border-left-color: var(--mc-bez);
  border-bottom-color: var(--mc-bez);
}

.mc-cen-plan--founders .mc-cen-plan__chip {
  background: var(--mc-bez);
  color: var(--mc-czarny);
}

.mc-cen-plan--founders .mc-cen-licznik__opis       { color: #fff; }
.mc-cen-plan--founders .mc-cen-licznik__pasek      { background: rgba(255, 255, 255, .18); }
.mc-cen-plan--founders .mc-cen-licznik__pasek span { background: var(--mc-bez); }

/* ── przyciski: trzy wagi zamiast jednej ── */

.mc-cen-plan__btn {
  align-self: center;
  margin-top: auto;
  min-width: 208px;
  text-align: center;

  /* Obrys przezroczysty także tam, gdzie go nie widać. Bez tego przyciski
     z obrysem są o 3 px wyższe od pełnych i przy wyrównaniu do dolnej
     krawędzi ich górne krawędzie rozjeżdżają się o tyle samo. */
  border: 1.5px solid transparent;
}

/* START nie ma konkurować z niczym — schodzi do samego obrysu. */
.mc-cen-plan:not(.mc-cen-plan--wyrozniony):not(.mc-cen-plan--founders) .mc-cen-plan__btn {
  background: transparent;
  border-color: var(--mc-czarny);
  color: var(--mc-czarny);
}

.mc-cen-plan:not(.mc-cen-plan--wyrozniony):not(.mc-cen-plan--founders) .mc-cen-plan__btn:hover {
  background: var(--mc-czarny);
  color: #fff;
}

.mc-cen-plan--founders .mc-cen-plan__btn {
  background: var(--mc-bez-100);
  color: var(--mc-czarny);
  font-weight: 700;
}

.mc-cen-plan--founders .mc-cen-plan__btn:hover { background: var(--mc-bez); }

/* ══════════════════════════════════════════════════════════════
   SEKCJA FOUNDERS POD KAFLAMI
   ══════════════════════════════════════════════════════════════ */

/* W kolumnie tekstu wszystko trzyma lewą krawędź — inaczej blok rozjeżdża
   się z nagłówkiem i listą nad nim. */
.mc-cen-fo__tresc .mc-cen-licznik        { margin: 0 0 24px; max-width: 340px; }
.mc-cen-fo__tresc .mc-cen-licznik__opis  { text-align: left; }
.mc-cen-fo__tresc .mc-cen-plan__cena-opis,
.mc-cen-fo__tresc .mc-cen-plan__dopisek  { text-align: left; }
.mc-cen-fo__tresc .mc-cen-plan__dopisek  { margin: 12px 0 0; }
/* W kaflu znaczek kurczy się do treści dzięki `align-items: center` na kolumnie
   flex. Tutaj stoi w zwykłym bloku, więc rozciągałby się na całą szerokość
   kolumny — `inline-block` przywraca mu szerokość napisu. */
.mc-cen-fo__tresc .mc-cen-plan__chip     { display: inline-block; margin: 14px 0 0; }
.mc-cen-fo__tresc .mc-cen-punkty         { padding: 0; }

.mc-cen-fo__wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 28px;
}

.mc-cen-fo__wiersz .mc-cen-fo__cena { justify-content: flex-start; margin-top: 0; }

/* ══════════════════════════════════════════════════════════════
   TELEFON
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  /* Na wąskim ekranie decyduje kolejność, nie sąsiedztwo — oferta, która ma
     się sprzedać, idzie na górę rzędu. Równa wysokość przestaje mieć sens,
     gdy kafle stoją jeden pod drugim. */
  .mc-cen-plany__grid { display: flex; flex-direction: column; }
  .mc-cen-plan--founders { order: -1; }
  .mc-cen-plan { height: auto; }

  .mc-cen-plan__kwota { font-size: 42px; }
  .mc-cen-fo__tresc .mc-cen-licznik { max-width: none; }
}

/* Zaproszenie w sekcji Founders — akapit zamiast listy (17.08.2026).
   Ma się czytać jak tekst, nie jak wyliczenie, więc dostaje szerszą
   interlinię niż punkty i nie bierze wcięcia po ptaszkach. */
.mc-cen-fo__manifest {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: #46454a;
}

/* Odstępy między sekcjami: 60-80 px, jak na reszcie serwisu (18.08.2026).
   Zastępuje poprzednią łatkę „20 px mocniej" (17.08) - te 20 px na bazowym
   37 px z `mc-lp.css` dawało zaledwie 57 px, kafle i Founders się zlewały.
   Bazowe `.mc-cen-plany`/`.mc-cen-fo` z `mc-lp.css` to martwy fragment z ery
   „dwie trzecie mniej" (16.08), nie objęty żadnym z późniejszych bloków
   60-80 px (te obejmują tylko `mc-foto`/`mc-plat`/`mc-czl-*`/`mc-spo-*`).
   Ten arkusz wchodzi po `mc-lp.css` (zależność `ph-masterclass`), więc przy
   tej samej szczegółowości wygrywa bez `!important`. */
.mc-cen-plany { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }
.mc-cen-fo    { padding-bottom: clamp(3.75rem, 5.5vw, 5rem); }

/* Zaproszenie na wąskim ekranie (17.08.2026).

   Filtr sierotek z `ph-masterclass-lp.php` wstawia w tym akapicie 21 twardych
   spacji i skleja po kilka słów naraz („która nie tylko korzysta"). W kolumnie
   1300 px to niewidoczne, ale przy 310 px takie zbitki nie mieszczą się do
   końca wiersza i tekst robi się poszarpany.

   Mniejszy stopień pisma skraca zbitki na tyle, że wchodzą w wiersz,
   a `text-wrap: pretty` wyrównuje resztę.

   BEZ `hyphens: auto` - przeglądarka dzieli polskie słowa źle nawet przy
   `lang="pl"`: sprawdzone na żywo, wychodziło „wyglądaj-ą" i „decy-duje".
   Pojedyncza litera przeniesiona do nowego wiersza jest gorsza niż
   nierówny prawy margines.

   Prawdziwe lekarstwo to łagodniejszy filtr sierotek, ale ten siedzi
   w pliku wspólnym dla całego serwisu - osobna decyzja. */
@media (max-width: 700px) {
  .mc-cen-fo__manifest {
    font-size: 15.5px;
    line-height: 1.6;
    text-wrap: pretty;
  }
}

/* ── hover przycisków: czerń pod białym pismem (17.08.2026) ──

   Do tej pory najechanie dawało czarne tło, ale pismo zostawało czarne -
   napis znikał. Winowajcą jest `mc-lp.css`:
   `.mc-btn--bezowy { color: var(--mc-czarny) !important }`.
   `!important` bije każdą szczegółowość, więc jedynym wyjściem jest
   odpowiedzieć tym samym - stąd `!important` tutaj, wbrew normalnej zasadzie.

   Biel na #1c1b1f to kontrast 16,9:1, czyli daleko ponad AAA.
   `opacity: 1` kasuje bazowe przygaszenie `.mc-btn:hover` - na czarnym tle
   robiło z czerni brudny grafit. */

.mc-cen-plan__btn:hover,
.mc-cen-plan__btn:focus-visible,
.mc-cen-fo__tresc .mc-btn:hover,
.mc-cen-fo__tresc .mc-btn:focus-visible {
  background: var(--mc-czarny) !important;
  color: #fff !important;
  border-color: var(--mc-czarny) !important;
  opacity: 1;
}

/* Widoczna obwódka przy nawigacji klawiaturą - sam kolor tła to za mało,
   gdy przycisk już jest czarny. */
.mc-cen-plan__btn:focus-visible,
.mc-cen-fo__tresc .mc-btn:focus-visible {
  outline: 2px solid var(--mc-bez-100);
  outline-offset: 3px;
}

/* Etykieta w pierwszym wierszu dopisku („Gwarancja ceny") — wyróżnienie
   niesie <strong> z panelu, tu tylko odrobinę mocniejszy kolor i odstęp
   od zdania pod spodem. */
.mc-cen-plan__dopisek strong {
  display: inline-block;
  margin-bottom: 2px;
  font-weight: 700;
}

.mc-cen-plan--founders .mc-cen-plan__dopisek strong { color: #fff; }


/* ---------- Opis pakietu pod nazwą (21.08.2026) ----------
   Jedno zdanie odpowiadające na „co to w ogóle jest ten pakiet", zanim
   człowiek zacznie czytać cenę i listę ptaszków. Renderuje się zawsze,
   także pusty - `subgrid` zestraja wiersze tylko wtedy, gdy każdy kafel
   odda komplet elementów, a `:empty` pilnuje, żeby pusty nie zabierał
   wysokości. */

.mc-cen-plan__zajawka {
  max-width: 30ch;
  margin: 0 0 0.875rem;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mc-szary, #6b6a6e);
}

.mc-cen-plan__zajawka:empty { display: none; }

.mc-cen-plan--founders .mc-cen-plan__zajawka { color: rgba(255, 255, 255, .74); }

@media (max-width: 1000px) {
  .mc-cen-plan__zajawka { max-width: 42ch; margin-inline: auto; }
}

/* ── jak przejść na wyższy plan (23.08.2026, zadanie E2) ──

   Akapit pod kaflami, poza siatką - `mc-cen-plany__grid` jest `subgrid`,
   więc cokolwiek wpadnie do środka, dostanie kolumnę kafla.
   Wąska miara i wyśrodkowanie, bo to jedno zdanie doklejone do trzech
   kolumn, a nie kolejna sekcja: ma się czytać jak przypis, nie jak oferta. */

.mc-cen-plany__zmiana {
  max-width: 54rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mc-szary, #6b6a6e);
  text-wrap: pretty;
}

@media (max-width: 700px) {
  .mc-cen-plany__zmiana { font-size: 0.9375rem; }
}