/* ============================================================
   ONLY FAST CARS — podstrona /program-partnerski
   Winieta redakcyjna dla właścicieli aut: czysta typografia, kreski
   łamu i liczby — bez ani jednej fotografii. Układ trzyma się reguł
   site.css (wersaliki .display, czerwień tylko jako akcent, kaskady
   .rvg, akordeon .pytania), więc tutaj siedzą wyłącznie rzeczy własne
   tej strony.

   Ruch według jednej zasady: transform i opacity, nic więcej. Wejścia
   idą na ease-out (szybki start, miękkie dojście), czasy poniżej
   sekundy dla treści i 150–250 ms dla odpowiedzi na dotyk. Wspólne
   krzywe stoją w zmiennych niżej, żeby cała strona oddychała jednym
   rytmem; tryb ograniczonego ruchu gasi wszystko na końcu pliku.
   ============================================================ */

.pp-page {
  /* mocny ease-out do wejść i miękka sprężyna do drobnych odpowiedzi;
     te same wartości co w odsłonięciach .rvg w site.css, żeby ruch tej
     strony nie miał własnego, obcego charakteru */
  --pp-wyjazd: cubic-bezier(.16, .86, .22, 1);
  --pp-dotyk: cubic-bezier(.2, .8, .2, 1);
  background: var(--bg0);
}
.pp-page section { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* pigułka z hero (.hf-all) niesie własną, jasną nakładkę; tekst musi zostać
   ciemny także wtedy, gdy dziedziczy kolor z sekcji */
.pp-page .btn-primary.hf-all { color: #0b0b0c; }
html[data-motyw="jasny"] .pp-page .btn-primary.hf-all { color: #f5f5f4; }

/* Każdy przycisk potwierdza wciśnięcie lekkim skurczem — bez tego klik
   w ciemny prostokąt wygląda, jakby nie doszedł. Skala zamiast koloru,
   bo skala działa tak samo na białej pigułce i na duchu. */
.pp-page .btn:active { transform: scale(.97); }

/* ============================================================
   NAGŁÓWEK — typografia na osi strony
   ============================================================ */
.pp-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(48px, 8vw, 112px)) 0 clamp(52px, 7vw, 96px);
  text-align: center;
}

/* --- żar pod treścią ---
   Dwie plamy firmowej czerwieni na dużym rozmyciu, ledwo ponad próg
   widzenia; suną powoli pełną pętlą (żadnego wahadła — patrz prace.html,
   skąd ten zabieg pochodzi). To ma być tlący się węgiel, nie kolorowe tło. */
.pp-zar { position: absolute; inset: -10%; z-index: 0; pointer-events: none; }
.pp-zar span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
}
.pp-zar span:nth-child(1) {
  width: 46vmax; height: 46vmax; top: -18vmax; right: -10vmax;
  background: radial-gradient(circle, rgba(227, 34, 39, .12), transparent 65%);
  animation: pp-zar-a 53s ease-in-out infinite;
}
.pp-zar span:nth-child(2) {
  width: 34vmax; height: 26vmax; bottom: -12vmax; left: 6vmax;
  background: radial-gradient(ellipse at center, rgba(255, 74, 80, .07), transparent 68%);
  animation: pp-zar-b 71s ease-in-out infinite;
}
@keyframes pp-zar-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(-9vmax, 7vmax, 0) scale(1.1); }
  66%  { transform: translate3d(-3vmax, 12vmax, 0) scale(.94); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes pp-zar-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(10vmax, -5vmax, 0) scale(1.08); }
  66%  { transform: translate3d(4vmax, -10vmax, 0) scale(.95); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
/* na białym tle plamy się sumują z jasnością; schodzi samo natężenie */
html[data-motyw="jasny"] .pp-zar { opacity: .5; }

.pp-hero-tresc { position: relative; z-index: 1; }

/* --- tytuł w maskach słów ---
   Zewnętrzny span (.hwm) przycina, wewnętrzny (.hw) wjeżdża od dołu — ten
   sam ruch co hero miasta. Stan początkowy wisi wyłącznie na .hw, których
   bez skryptu w ogóle nie ma, więc bez JavaScriptu tytuł po prostu stoi. */
.pp-h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  line-height: 1.1;
}
.pp-h1-czlon { display: block; }
.pp-h1 .hwm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.pp-h1 .hw {
  display: inline-block;
  transform: translateY(1.12em);
  transition: transform 1.1s var(--pp-wyjazd);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.pp-h1.gra .hw { transform: none; }

/* --- kaskada wejścia reszty nagłówka ---
   Stany początkowe wchodzą dopiero z klasą pp-intro na <html> (dodaje ją
   skrypt przed pierwszym malowaniem), więc bez JavaScriptu nic nie znika. */
html.pp-intro .pp-hero [data-wejscie] { opacity: 0; transform: translateY(18px); }
html.pp-intro.pp-go .pp-hero [data-wejscie] {
  opacity: 1;
  transform: none;
  transition: opacity .85s ease, transform .95s var(--pp-wyjazd);
  transition-delay: calc(var(--w, 0) * 110ms + .45s);
}

.pp-lead { margin: clamp(18px, 2.4vw, 26px) auto 0; line-height: 1.8; max-width: 54ch; }

/* Para przycisków w jednym rycie: równe kolumny dają obu pigułkom szerokość
   dłuższego napisu. .hf-all ma własną wysokość 44 px i mniejszy krój niż
   zwykły .btn, więc oba dostają te same miary. */
.pp-akcje {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin-top: clamp(24px, 3vw, 34px);
  margin-inline: auto;
}
.pp-akcje .btn { height: 44px; padding: 0 26px; font-size: .86rem; }

/* --- trzy liczby na osi ---
   Bez linii nad rzędem — działowe są tylko krótkie pionowe kreski między
   kolumnami, rysowane na sąsiedzie, żeby skrajne kolumny zostały czyste. */
.pp-liczby {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 44px);
  margin: clamp(40px, 5.4vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.pp-liczby li { position: relative; }
.pp-liczby li + li::before {
  content: "";
  position: absolute;
  left: calc(clamp(18px, 3vw, 44px) / -2);
  top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line);
}
.pp-liczby strong {
  display: flex; align-items: baseline; justify-content: center; gap: .18em;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  /* liczba dobiega od zera i po drodze zmienia liczbę znaków; tabelaryczne
     cyfry trzymają szerokość, więc podpis pod spodem nie drga */
  font-variant-numeric: tabular-nums;
}
/* samą liczbę niesie <i>, bo skrypt podmienia w niej treść klatka po
   klatce; kursywa z domyślnego stylu przeglądarki jest tu przypadkiem */
.pp-liczby strong i { font-style: normal; }
.pp-liczby strong span { font-size: .44em; color: var(--dim); font-weight: 400; }
.pp-liczby p {
  margin: 10px auto 0;
  color: var(--dim);
  font-size: .82rem;
  line-height: 1.7;
  max-width: 30ch;
}

/* ============================================================
   PASY TREŚCI — wspólny szkielet
   ============================================================ */
.pp-proces, .pp-cennik { padding-block: clamp(64px, 8.5vw, 120px); }
.pp-warto, .pp-zglos-pas { padding-block: clamp(64px, 8.5vw, 120px); background: var(--bg1); border-block: 1px solid var(--line); }
/* akordeon FAQ (site.css) sam niesie tło --bg1; sąsiadujące pasy strony
   przeplatają się z nim kolorem bez dodatkowych reguł */

/* nagłówki sekcji stoją na osi strony, jak cała reszta treści */
.pp-glowa { margin-inline: auto; margin-bottom: clamp(30px, 4vw, 50px); max-width: 64ch; text-align: center; }
.pp-glowa .pyt-kicker { display: block; }
.pp-glowa h2 { font-size: clamp(1.5rem, 2.9vw, 2.2rem); }
.pp-glowa .lead { margin: 14px auto 0; line-height: 1.8; }

/* ============================================================
   JAK TO DZIAŁA — cztery kroki w kartach
   Karty jak na starej stronie programu, tylko w języku tego serwisu:
   powierzchnia z ledwo widocznym gradientem, hairline i promień z
   tokenów. W środku czerwona plakietka z numerem, tytuł i opis;
   wszystko na osi karty. Wchodzą kaskadą .rvg. */
.pp-kroki {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin: 0; padding: 0;
  list-style: none;
}
.pp-kroki li {
  padding: clamp(24px, 2.6vw, 32px) 20px clamp(26px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  text-align: center;
  transition: transform .3s var(--pp-dotyk), border-color .3s, box-shadow .3s;
}
@media (hover: hover) and (pointer: fine) {
  .pp-kroki li:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 22px 50px -30px rgba(0, 0, 0, .9);
  }
  html[data-motyw="jasny"] .pp-kroki li:hover { border-color: rgba(23, 24, 27, .22); }
}
/* plakietka: pełne koło w czerwieni marki, numer bielą */
.pp-krok-no {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 8px 22px rgba(227, 34, 39, .3);
  font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pp-kroki h3 {
  margin: 16px 0 0;
  font-size: .92rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}
.pp-kroki p { margin: 11px auto 0; color: var(--dim); font-size: .855rem; line-height: 1.75; max-width: 30ch; }
html[data-motyw="jasny"] .pp-kroki li { background: var(--bg1); }

/* ============================================================
   DLACZEGO WARTO — łam z hairline'ami zamiast kart
   ============================================================ */
.pp-warto-lam {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 44px);
  margin: 0; padding: 0;
  list-style: none;
}
.pp-warto-lam li { position: relative; padding: 4px 0 6px; text-align: center; }
/* kreski działowe między kolumnami; rysowane na sąsiedzie, żeby pierwsza
   kolumna nie dostała kreski przy lewej krawędzi kontenera */
.pp-warto-lam li + li::before {
  content: "";
  position: absolute;
  left: calc(clamp(24px, 3vw, 44px) / -2);
  top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line);
}
.pp-warto-lam svg { display: block; width: 20px; height: 20px; margin-inline: auto; color: var(--red2); }
.pp-warto-lam h3 {
  margin: 16px 0 0;
  font-size: .92rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}
.pp-warto-lam p { margin: 11px auto 0; color: var(--dim); font-size: .855rem; line-height: 1.75; max-width: 32ch; }

/* ============================================================
   ILE MOŻESZ ZAROBIĆ — notowania
   Wiersze jak tabela kursów: numer, model, kwota w cyfrach
   tabelarycznych i pas udziału pod spodem. Pas pokazuje górną granicę
   widełek względem najlepszego modelu (--udzial z HTML) i rozciąga się
   scaleX dopiero po wejściu w kadr, każdy wiersz chwilę po swoim
   odsłonięciu.
   ============================================================ */
.pp-notowania { border-top: 1px solid var(--line); }
.pp-model {
  position: relative;
  display: grid;
  grid-template-columns: clamp(34px, 4vw, 56px) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: clamp(12px, 2vw, 28px);
  padding: clamp(20px, 2.6vw, 30px) 2px clamp(22px, 2.8vw, 32px);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pp-model:hover { background: rgba(255, 255, 255, .028); }
  html[data-motyw="jasny"] .pp-model:hover { background: rgba(23, 24, 27, .035); }
  /* kwota łapie czerwień dopiero pod kursorem — to odpowiedź, nie ozdoba */
  .pp-model:hover .pp-model-kwota { color: var(--red2); }
}
.pp-model-no {
  grid-row: 1;
  font-size: .74rem; font-weight: 500; letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}
.pp-model-glowa { grid-row: 1; min-width: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pp-model-glowa h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.15;
}
.pp-model-glowa p {
  margin: 0;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.pp-model-kwota {
  grid-row: 1;
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color .25s ease;
}
.pp-model-kwota span { font-size: .62em; color: var(--dim); font-weight: 400; letter-spacing: .04em; }

/* pas udziału: włoskowa ścieżka przez całą szerokość i wypełnienie do
   --udzial; kropka na końcu to jedyny czerwony punkt wiersza */
.pp-model-pas {
  grid-column: 2 / -1;
  grid-row: 2;
  position: relative;
  display: block;
  height: 1px;
  margin-top: clamp(14px, 1.8vw, 20px);
  background: var(--line);
}
.pp-model-pas i {
  position: absolute; inset: 0;
  background: currentColor;
  color: var(--ink);
  transform: scaleX(var(--udzial, 0));
  transform-origin: left;
  transition: transform 1.2s var(--pp-wyjazd);
  transition-delay: calc(var(--i, 0) * 110ms + .35s);
}
.pp-model-pas i::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  /* kropka jedzie na końcu pasa, więc dziedziczy jego skalowanie; kontra
     skalą odwrotną trzyma ją okrągłą niezależnie od --udzial */
  transform: translateY(-50%) scaleX(calc(1 / var(--udzial, 1)));
}
/* przed odsłonięciem pas stoi zwinięty; rozciąga go dopiero .rvg.in */
.pp-notowania:not(.in) .pp-model-pas i { transform: scaleX(0); }

.pp-cennik-uwaga { margin: clamp(22px, 3vw, 32px) 0 0; text-align: center; }
.pp-cennik-uwaga span { display: inline-block; color: var(--dim); font-size: .875rem; line-height: 1.75; }

/* ============================================================
   ZGŁOSZENIE POJAZDU
   Lewa kolumna mówi, co się stanie po wysłaniu; prawa zbiera dane.
   Formularz bierze pola z .field/.form-grid w site.css — to ten sam
   język co formularz rezerwacji, tylko z innymi rubrykami.
   ============================================================ */
.pp-zglos {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.pp-zglos-intro h2 { font-size: clamp(1.5rem, 2.9vw, 2.2rem); }
.pp-zglos-intro .lead { margin: 16px 0 0; line-height: 1.8; }
.pp-zglos-punkty {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.pp-zglos-punkty li {
  position: relative;
  padding-left: 24px;
  color: var(--dim);
  font-size: .875rem;
  line-height: 1.6;
}
.pp-zglos-punkty li::before {
  content: "";
  position: absolute; left: 0; top: .48em;
  width: 11px; height: 1px;
  background: var(--red);
}
.pp-zglos-kontakt { margin: clamp(20px, 2.6vw, 28px) 0 0; color: var(--dim); font-size: .855rem; }
.pp-zglos-kontakt a { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pp-zglos-kontakt a:hover { color: var(--red2); } }

.pp-form { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); }
/* Pole wyboru bierze wygląd z .field w site.css, ale strzałkę rysuje sobie
   samo: natywna kończy się stylem systemu i w ciemnym motywie potrafi być
   czarna na czarnym. */
.pp-form .field select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.pp-form .field select option { background: var(--bg1); color: var(--ink); }
/* W motywie jasnym pola dostają w site.css skrót `background: #fff`, a skrót
   kasuje obrazek tła razem z kolorem — strzałka znikała. Rysunek trzeba więc
   podać jeszcze raz, selektorem mocniejszym od tamtego. */
html[data-motyw="jasny"] .pp-form .field select {
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
html[data-motyw="jasny"] .pp-form .field select option { background: #fff; color: #17181b; }

.pp-zgoda {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: clamp(18px, 2.2vw, 24px);
  color: var(--dim);
  font-size: .82rem;
  line-height: 1.65;
  cursor: pointer;
}
.pp-zgoda input {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--red);
  cursor: pointer;
}
.pp-zgoda a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pp-zgoda b { color: var(--red2); }
.pp-zgoda.err span { color: var(--red2); }

.pp-form-stopka {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  margin-top: clamp(20px, 2.4vw, 26px);
}
.pp-form-stopka .btn { height: 46px; padding: 0 30px; font-size: .88rem; }
/* Komunikat ma stałą wysokość, żeby przycisk nie podskakiwał, gdy pojawia
   się błąd; pusty wiersz i tak nic nie zajmuje wizualnie. */
.pp-form-info { margin: 0; min-height: 1.3em; font-size: .84rem; color: var(--dim); }
.pp-form-info.err { color: var(--red2); }
.pp-form-info.ok { color: #8fe3b0; }
html[data-motyw="jasny"] .pp-form-info.ok { color: #1d7a4c; }

/* Ekran po wysłaniu: formularz znika, a na jego miejscu zostaje jedno
   potwierdzenie. Zostawianie wypełnionych pól kusiło do wysłania drugi raz. */
.pp-form--wyslany { display: grid; gap: 14px; justify-items: start; text-align: left; }
.pp-form--wyslany h3 { margin: 0; font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.pp-form--wyslany p { margin: 0; color: var(--dim); font-size: .89rem; line-height: 1.75; }

/* ============================================================
   ZAMKNIĘCIE — finał typograficzny na osi strony
   ============================================================ */
.pp-final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 8.5vw, 120px);
  text-align: center;
}
.pp-final-tresc { position: relative; }
.pp-final .pyt-kicker { display: block; }
.pp-final-tresc h2 { font-size: clamp(1.5rem, 3.1vw, 2.4rem); max-width: 24ch; margin-inline: auto; }
.pp-final-tresc .lead { margin: 16px auto 0; line-height: 1.8; }
.pp-final .pp-akcje { margin-top: clamp(24px, 3.2vw, 36px); }

/* ============================================================
   WĄSKI EKRAN
   ============================================================ */
@media (max-width: 1000px) {
  .pp-kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-warto-lam { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pp-warto-lam li { padding-block: clamp(20px, 3vw, 28px); }
  .pp-warto-lam li + li::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .pp-zglos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pp-akcje { grid-auto-flow: row; width: 100%; }
  /* Trzy liczby jedna pod drugą: w rzędzie na telefonie zostawały po dwa
     słowa w wierszu podpisu. Pionowe działowe schodzą; wystarczy światło. */
  .pp-liczby { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pp-liczby li + li::before { display: none; }
  .pp-liczby p { max-width: 34ch; }
  .pp-kroki { grid-template-columns: minmax(0, 1fr); }
  /* wiersz notowań łamie się na dwa piętra: model u góry, kwota pod nim */
  .pp-model { grid-template-columns: clamp(30px, 8vw, 40px) minmax(0, 1fr); row-gap: 8px; }
  .pp-model-kwota { grid-column: 2; grid-row: 2; }
  .pp-model-pas { grid-column: 2; grid-row: 3; margin-top: 12px; }
  .pp-form { padding: 20px 16px 22px; }
  .pp-form-stopka .btn { width: 100%; }
}
@media (max-width: 560px) {
  /* siatka pól schodzi do jednej kolumny; przy dwóch pole „Wersja silnikowa"
     mieściło już tylko trzy znaki podpowiedzi */
  .pp-form .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   OGRANICZONY RUCH
   Kto prosił system o mniej ruchu, dostaje stronę nieruchomą: żar
   stoi, tytuł nie wjeżdża (maski zostają, ale bez przesunięcia),
   linie i pasy są od razu w stanie końcowym. Odsłonięcia .rvg gasi
   globalna reguła w site.css.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pp-zar span { animation: none; }
  .pp-h1 .hw { transform: none; transition: none; }
  html.pp-intro .pp-hero [data-wejscie] { opacity: 1; transform: none; transition: none; }
  .pp-model-pas i,
  .pp-notowania:not(.in) .pp-model-pas i { transform: scaleX(var(--udzial, 0)); transition: none; }
  .pp-page .btn:active { transform: none; }
}