/* ============================================================================
 * XALTUM - Wspolpraca B2B (partnerzy).
 * FAZA 1 (audyt spojnosci 2026-07-09): landing ujednolicony ze STRONA GLOWNA + /skd/.
 * ----------------------------------------------------------------------------
 * Zasady po refaktorze:
 * - ZERO wartosci koloru/promienia/cienia/fontu poza tokenami (tokens.css). Wylacznie var().
 * - Przyciski = komponent systemu (.btn/.btn-primary/.btn-outline/.btn-dark) - patrz page-wspolpraca.php.
 *   Ten plik NIE redefiniuje wygladu przyciskow (tylko ukladowe: szerokosc/margines).
 * - Pola formularza = komponent systemu (.form-row/.form-label/.form-input/.form-select/.form-error).
 * - FAQ = natywny <details> systemu (.faq-item/.faq-trigger/.chev/.faq-answer-inner). Bez JS.
 * - Rytm/kontener/typografia z tokenow (--sect-y/--maxw/--pad/--fs-body/--lh-body).
 * - Szklo tam, gdzie serwis go uzywa: na ciemnych powierzchniach (grad-dark) -> panel kalkulatora.
 *   Na jasnych sekcjach karty = .card systemu (bialy + --line + --r-m + --sh); blur na plaskim
 *   kremie nic nie daje, wiec go tam nie stosujemy (decyzja udokumentowana w docs/audyt).
 * - Pulapka --navy*: w permanentnym light mode remapuje na cream. Na ciemnym tle wylacznie
 *   var(--anchor)/var(--anchor-deep) (zweryfikowane w computed).
 * Wszystko scoped pod .wsp, zeby generyczne klasy nie kolidowaly z globalnymi motywu.
 * ========================================================================== */
.wsp {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: left;
}
.wsp .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: left;
}
.wsp h1, .wsp h2, .wsp h3 { font-family: 'Montserrat', sans-serif; }
.wsp img { max-width: 100%; display: block; }
.wsp a { color: inherit; }
.wsp .eyebrow {
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 18px;
}
.wsp .wsp-sec { padding: var(--sect-y) 0; }

/* Uklad przyciskow w sekcjach (wyglad = system, tu tylko rozmieszczenie). */
.wsp .calc-cta .btn,
.wsp .wsp-form button[type="submit"] { width: 100%; }

/* ===== HERO = struktura hero glownej (globalne style motywu). ===== */
/* Jedyny override: pasek liczb ma 4 kolumny (glowna ma 3). */
.hero-wsp .hero-trust-inner { grid-template-columns: repeat(3, 1fr); } /* Etap 2: 3 statystyki B2B */
@media (max-width: 700px) { .hero-wsp .hero-trust-inner { grid-template-columns: repeat(2, 1fr); } }

/* ===== BRANCHES / MODELS ===== */
.wsp .branches h2, .wsp .models h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.1; max-width: 760px; }
.wsp .branches .intro, .wsp .models .intro { margin-top: 20px; max-width: 640px; color: var(--ink-soft); }
.wsp .branch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 64px;
}
.wsp .branch {
  padding: 48px 44px 52px;
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--sh-1);
}
.wsp .branch-tag { font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
.wsp .branch h3 { font-size: var(--fs-h3); font-weight: 800; margin-top: 14px; line-height: 1.2; }
.wsp .branch p { margin-top: 18px; color: var(--ink-soft); }
.wsp .branch ul { list-style: none; margin-top: 26px; }
.wsp .branch li { padding: 13px 0; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: baseline; }
.wsp .branch li:last-child { border-bottom: 1px solid var(--line); }
.wsp .branch li::before { content: ""; width: 8px; height: 8px; background: var(--gold); flex: none; position: relative; top: -1px; border-radius: var(--r-s); }
.wsp .branch-foot { margin-top: 26px; font-size: var(--fs-note); color: var(--ink-soft); }
.wsp .branch-foot strong { color: var(--ink); }
.wsp .branch-proof { margin-top: 26px; padding: 4px 0 4px 16px; border-left: 3px solid var(--gold); font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.wsp .branch-proof + .branch-foot { margin-top: 20px; }
.wsp .models-after { margin-top: 40px; display: flex; gap: 20px 28px; align-items: center; flex-wrap: wrap; }
.wsp .models-after p { margin: 0; color: var(--ink-soft); max-width: 620px; }
.wsp .how-context { margin-top: 12px; font-size: 15px; font-weight:700; color: var(--gold-dark); max-width: 660px; }
.wsp .calc-note-model { margin-top: 14px; font-size: 14px; font-weight:700; color: var(--gold); }
@media (max-width: 860px) {
  .wsp .branch-grid { grid-template-columns: 1fr; }
  .wsp .branch { padding: 32px 24px 36px; }
}

/* ===== HOW ===== */
.wsp .how { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wsp .how h2 { font-size: var(--fs-h2); font-weight: 800; }
.wsp .how .intro { margin-top: 20px; max-width: 640px; color: var(--ink-soft); }
/*
 * 4.18.0: karta kroku reaguje na kursor - unosi sie i ciepleje.
 *
 * Tlo i ramka karty sa zablokowane `!important` w pozniejszej warstwie
 * (`.step { background: transparent !important; border: 0 !important }`),
 * a widoczna ramka to w rzeczywistosci CIEN z light-mode, tez `!important`.
 * Stad `!important` po tej stronie - inaczej hover zmienialby tylko pozycje.
 * Ramki nie ruszamy (jest zerowa), wiec nic sie nie przesuwa.
 */
.wsp .step {
	transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.wsp .step:hover {
	transform: translateY(-4px);
	background: #FBF6EC !important;
	box-shadow: 0 22px 44px -26px rgba(20, 34, 74, .45), 0 0 0 1px rgba(217, 126, 39, .35) !important;
}
@media (hover: none) {
	.wsp .step:hover { transform: none; background: transparent !important; }
}

/* 4.12.0: karty rownej wysokosci. Przy align-items:start kazda konczyla sie
   tam, gdzie konczyl sie jej tekst - trzy ramki o roznej wysokosci. */
.wsp .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 64px; align-items: stretch; }
.wsp .step { display: flex; flex-direction: column; }
.wsp .step-num { font-weight: 800; font-size: 60px; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--gold); }
.wsp .step h3 { font-size: var(--fs-h3); font-weight: 700; margin-top: 18px; }
.wsp .step p { margin-top: 12px; color: var(--ink-soft); }
.wsp .step-time { display: inline-block; margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--anchor); border: 1px solid var(--line); border-radius: var(--r-s); padding: 7px 12px; }
@media (max-width: 860px) { .wsp .steps { grid-template-columns: 1fr; gap: 40px; } }

/* ===== CALCULATOR (ciemna sekcja, panel = liquid glass jak /skd/) ===== */
.wsp .calc { background: var(--grad-dark); color: var(--cream); }
.wsp .calc h2 { font-size: var(--fs-h2); font-weight: 800; }
.wsp .calc .intro { margin-top: 18px; max-width: 560px; color: rgba(255, 255, 255, .75); }
.wsp .calc-box {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--sh-3);
}
.wsp .calc-left { padding: 48px 48px 52px; border-right: 1px solid var(--glass-border); }
.wsp .calc-right { padding: 48px 48px 52px; background: rgba(var(--anchor-deep-rgb), .55); display: flex; flex-direction: column; justify-content: center; }
.wsp .calc-label { font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); display: block; margin-bottom: 14px; }
.wsp .seg { display: flex; border: 1px solid var(--line-on-dark); border-radius: var(--r-s); overflow: hidden; margin-bottom: 44px; }
.wsp .seg button { flex: 1; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 16px 10px; background: transparent; color: rgba(255, 255, 255, .75); border: none; cursor: pointer; transition: background .15s, color .15s; }
.wsp .seg button.active { background: var(--gold); color: var(--anchor); }
.wsp .seg button:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.wsp .slider-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.wsp .slider-val { font-weight: 800; font-size: 40px; color: var(--gold); }
.wsp .slider-val small { font-size: 16px; font-weight:700; color: rgba(255, 255, 255, .75); margin-left: 8px; }
.wsp input[type=range] { width: 100%; appearance: none; -webkit-appearance: none; height: 4px; background: var(--line-on-dark); outline: none; margin: 18px 0 6px; border-radius: var(--r-pill); }
.wsp input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; background: var(--gold); cursor: pointer; border: none; border-radius: 50%; }
.wsp input[type=range]::-moz-range-thumb { width: 26px; height: 26px; background: var(--gold); cursor: pointer; border: none; border-radius: 50%; }
.wsp input[type=range]:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.wsp .slider-scale { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, .5); }
.wsp .calc-result-label { font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.wsp .calc-month { font-weight: 800; font-size: clamp(48px, 5vw, 68px); line-height: 1.05; color: var(--gold); margin-top: 12px; }
.wsp .calc-year { margin-top: 18px; font-size: var(--fs-body); color: rgba(255, 255, 255, .82); }
.wsp .calc-year strong { color: var(--cream); font-weight: 700; }
.wsp .calc-cta { margin-top: 34px; }
.wsp .calc-disclaimer { margin-top: 40px; font-size: 13px; color: rgba(255, 255, 255, .5); max-width: 640px; }
@media (max-width: 900px) {
  .wsp .calc-box { grid-template-columns: 1fr; }
  .wsp .calc-left { border-right: none; border-bottom: 1px solid var(--glass-border); }
  .wsp .calc-left, .wsp .calc-right { padding: 34px 26px 38px; }
}

/* ===== PANEL (portal) - karty = .card systemu ===== */
/* 4.18.0: dopisane `.ppanel`. Sekcja panelu zmienila klase w 4.10.0
   (.panel -> .ppanel) i od tego czasu jej H2 nie lapal rozmiaru sekcyjnego.
   Zmierzone na produkcji: 24.75 px z generycznego `h2 { 1.5em }` przy 42 px
   we wszystkich pozostalych sekcjach strony. */
.wsp .panel h2, .wsp .ppanel h2 { font-size: var(--fs-h2); font-weight: 800; max-width: 760px; }
.wsp .panel .intro { margin-top: 20px; max-width: 640px; color: var(--ink-soft); }
.wsp .panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.wsp .shot { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-1); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.wsp .shot:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.wsp .shot-frame { aspect-ratio: 4/3; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; background: var(--cream-2); }
.wsp .shot-frame.has-shot { background: var(--cream-2); }
.wsp .shot-frame img { width: 100%; height: 100%; object-fit: contain; }
.wsp .shot-frame span { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); border: 1px dashed var(--line); padding: 10px 16px; background: var(--cream); border-radius: var(--r-s); text-align: center; }
.wsp .shot-body { padding: 26px 26px 30px; }
.wsp .shot-body h3 { font-size: 18px; font-weight: 700; }
.wsp .shot-body p { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 860px) { .wsp .panel-grid { grid-template-columns: 1fr; } }

/* ===== RULES / INDEKS (ciemna sekcja) ===== */
.wsp .rules { background: var(--grad-dark); color: var(--cream); }
.wsp .rules h2 { font-size: var(--fs-h2); font-weight: 800; }
.wsp .rules .intro { margin-top: 20px; max-width: 620px; color: rgba(255, 255, 255, .75); }
.wsp .rules-after { margin-top: 44px; display: flex; gap: 26px; align-items: center; justify-content: center; flex-wrap: wrap; }
.wsp .rules-after p { font-size: 15px; color: rgba(255, 255, 255, .7); margin: 0; }
.wsp .idx { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; margin-top: 60px; align-items: start; }
.wsp .idx-nav { border-top: 1px solid var(--line-on-dark); }
.wsp .idx-row { border-bottom: 1px solid var(--line-on-dark); }
.wsp .idx-item { display: flex; gap: 20px; align-items: baseline; width: 100%; text-align: left; background: none; border: none; padding: 22px 4px; cursor: pointer; transition: padding .15s; font-family: inherit; }
.wsp .idx-item .n { font-weight: 800; font-size: 15px; color: rgba(255, 255, 255, .4); flex: none; width: 40px; }
.wsp .idx-item .t { font-weight: 700; font-size: 21px; color: rgba(255, 255, 255, .55); transition: color .15s; }
.wsp .idx-row.active .idx-item { padding-left: 16px; }
.wsp .idx-row.active .n { color: var(--gold); }
.wsp .idx-row.active .t { color: var(--cream); }
.wsp .idx-item:hover .t { color: var(--cream); }
.wsp .idx-item:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.wsp .idx-desc { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.wsp .idx-row.active .idx-desc { max-height: 260px; }
.wsp .idx-desc p { padding: 0 8px 22px 60px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .75); }
.wsp .idx-row.active .idx-desc p { padding-left: 60px; }
.wsp .idx-view { border-left: 3px solid var(--gold); padding-left: 48px; position: sticky; top: 110px; }
.wsp .idx-para { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(52px, 6.5vw, 88px); line-height: 1; color: var(--gold); letter-spacing: .02em; }
.wsp .idx-view h3 { font-weight: 800; font-size: var(--fs-h2); margin-top: 18px; color: var(--cream); }
.wsp .idx-view-desc { margin-top: 22px; font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, .78); max-width: 460px; }
/*
 * Desktop: opis TYLKO w prawej kolumnie (idx-view). Mobile: opis pod punktem.
 * 4.12.0: regula ponizej mierzyla sie z `.wsp .idx-row.active .idx-desc`
 * (o klase wyzsza specyficznosc), wiec przegrywala mimo pozniejszej pozycji -
 * opis aktywnej zasady byl widoczny w OBU kolumnach naraz. display:none
 * na kontenerze konczy spor bez podbijania selektorow.
 */
@media (min-width: 861px) { .wsp .idx-desc { display: none; } }
@media (max-width: 860px) { .wsp .idx { grid-template-columns: 1fr; gap: 0; } .wsp .idx-view { display: none; } }

/* ===== OPIEKUN ===== */
.wsp .opiekun .wrap { display: grid; grid-template-columns: 440px 1fr; gap: 72px; align-items: center; }
.wsp .opiekun-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wsp .opiekun-name { font-weight: 700; font-size: 15px; color: var(--ink); margin-top: 12px; }
.wsp .opiekun-photo { aspect-ratio: 3/4; width: 100%; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wsp .opiekun-photo.has-photo { background: var(--cream-2); }
.wsp .opiekun-photo img { width: 100%; height: 100%; object-fit: cover; }
.wsp .opiekun-photo span { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); border: 1px dashed var(--line); padding: 10px 16px; background: var(--cream); border-radius: var(--r-s); text-align: center; }
.wsp .opiekun h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; }
.wsp .opiekun .role { font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); margin-top: 14px; }
.wsp .opiekun .txt { margin-top: 22px; color: var(--ink-soft); max-width: 540px; }
.wsp .opiekun-contact { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.wsp .opiekun-phone { text-decoration: none; color: var(--anchor); }
.wsp .opiekun-phone:hover { color: var(--gold-dark); }
@media (max-width: 860px) { .wsp .opiekun .wrap { grid-template-columns: 1fr; gap: 40px; } .wsp .opiekun-photos { max-width: 440px; } }

/* ===== FORM (ciemna sekcja; formularz = biala karta systemu z polami .form-*) ===== */
.wsp .contact { background: var(--grad-dark); color: var(--cream); }
.wsp .contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.wsp .contact h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.1; }
.wsp .contact .intro { margin-top: 22px; color: rgba(255, 255, 255, .78); max-width: 460px; }
.wsp .contact-steps { margin-top: 36px; list-style: none; }
.wsp .contact-steps li { padding: 16px 0; border-top: 1px solid var(--line-on-dark); color: rgba(255, 255, 255, .85); display: flex; gap: 16px; align-items: baseline; }
.wsp .contact-steps li strong { font-weight: 800; color: var(--gold); flex: none; }
.wsp .wsp-form {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-l);
  box-shadow: var(--sh-3);
  padding: 44px 44px 48px;
}
.wsp .wsp-form .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); margin: 26px 0; }
.wsp .wsp-form .consent input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.wsp .wsp-form .consent a { color: var(--gold-ink); text-decoration: underline; }
.wsp .wsp-form .form-note { margin-top: 18px; font-size: 13px; color: var(--ink-muted); text-align: center; }
.wsp .wsp-form-success { background: rgba(var(--gold-rgb), .1); border: 1px solid var(--gold); border-radius: var(--r-l); padding: 28px; color: var(--cream); font-size: 16px; }
@media (max-width: 900px) {
  .wsp .contact .wrap { grid-template-columns: 1fr; gap: 48px; }
  .wsp .wsp-form { padding: 32px 24px 36px; }
}

/* iOS: pola >=16px na mobile, zeby focus nie zoomowal viewportu. System .form-input=15px
 * globalnie (bug dot. wszystkich formularzy) - tu lokalnie na tym landingu, mobile only.
 * Rekomendacja globalna: podbic .form-input do 16px @mobile w main.css (patrz docs/audyt). */
@media (max-width: 768px) {
  .wsp .wsp-form .form-input,
  .wsp .wsp-form .form-select { font-size: 16px; }
}

/* ===== FAQ (natywny <details> systemu; brak stylu triggerow/kart tutaj) ===== */
.wsp .faq h2 { font-size: var(--fs-h2); font-weight: 800; }
.wsp .faq .faq-list { margin-top: 44px; max-width: 860px; }

@media (prefers-reduced-motion: reduce) { .wsp * { transition: none !important; animation: none !important; } }

/* ===== MOBILE TUNING (<=480px) ===== */
@media (max-width: 480px) {
  .wsp .eyebrow { font-size: 12px; margin-bottom: 12px; }
  .wsp .branches h2, .wsp .models h2, .wsp .how h2, .wsp .calc h2, .wsp .panel h2, .wsp .ppanel h2, .wsp .rules h2, .wsp .contact h2, .wsp .faq h2 { line-height: 1.18; }
  .wsp .branches .intro, .wsp .models .intro, .wsp .how .intro, .wsp .calc .intro, .wsp .panel .intro, .wsp .ppanel .intro, .wsp .rules .intro, .wsp .contact .intro { margin-top: 14px; }
  .wsp .branch-grid { margin-top: 36px; }
  .wsp .branch h3 { font-size: 22px; }
  .wsp .steps { margin-top: 40px; }
  .wsp .calc-box { margin-top: 36px; }
  .wsp .calc-month { font-size: 44px; }
  .wsp .panel-grid { margin-top: 36px; }
  .wsp .idx { margin-top: 36px; }
  .wsp .idx-item { padding: 18px 4px; }
  .wsp .idx-item .t { font-size: 18px; }
  .wsp .opiekun .wrap { gap: 32px; }
  .wsp .opiekun-photos .opiekun-phone { font-size: 17px; }
  .wsp .opiekun-contact .btn { width: 100%; }
  .wsp .contact .wrap { gap: 34px; }
  .wsp .contact-steps { margin-top: 26px; }
  .wsp .contact-steps li { padding: 12px 0; gap: 12px; }
  .wsp .wsp-form { padding: 24px 18px 28px; }
  .wsp .wsp-form .consent { margin: 16px 0; font-size: 12px; }
  .wsp .wsp-form .form-note { margin-top: 14px; font-size: 12px; }
  .wsp .faq .faq-list { margin-top: 32px; }
}

/* ============================================================================
 * AUDYT 07.2026 - przebudowa /wspolpraca/ pod konwersje B2B (wspolpraca-plan-zmian.md)
 * Etapy 1,2,4,5,8. Tokeny only, scoped pod .wsp. Zero em-dash.
 * ========================================================================== */

/* ETAP 1.2 - pasek liczbowy nad foldem (hero, ciemne tlo) */
.hero-wsp .hero-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 28px 0 6px; max-width: 520px;
}
.hero-wsp .hero-metric + .hero-metric { border-left: 1px solid var(--line); padding-left: 22px; }
.hero-wsp .hero-metric { display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; }
.hero-wsp .hm-num { font-weight: 800; font-size: 30px; line-height: 1; color: var(--gold); white-space: nowrap; }
.hero-wsp .hm-lbl { font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); max-width: 180px; }
/* ETAP 1.4 - linia odbiorcy */
.hero-wsp .hero-audience { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); max-width: 560px; }
/*
 * 4.10.4: odstep nad przyciskiem. Regula main.css `.hero-single + .hero-cta`
 * nie lapie, bo miedzy nimi stoi linia odbiorcy - przycisk dotykal jej
 * gornym bokiem (zmierzone: 0 px). Wczesniej maskowal to pasek liczb.
 */
.hero-wsp .hero-cta { margin-top: 28px; }

/* ETAP 4.1/4.2 - tabela porownawcza modeli (jasna sekcja) */
.wsp .model-compare { margin-top: 56px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wsp .model-compare table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; min-width: 620px; }
.wsp .model-compare th, .wsp .model-compare td { padding: 20px 22px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-size: 15.5px; }
.wsp .model-compare thead th, .wsp .model-compare .mc-corner { border-top: none; }
.wsp .model-compare thead th { background: var(--cream-2); }
.wsp .model-compare .mc-col { display: block; font-weight: 800; font-size: 17px; color: var(--anchor); }
.wsp .model-compare tbody th { font-weight: 700; color: var(--ink); width: 32%; background: var(--cream); }
.wsp .model-compare td { color: var(--ink-soft); }
/* 4.12.0: wyrozniona jest kolumna Modelu B (badge "Najczesciej wybierany"
   przeniesiony). Klasa nazywa sie .mc-hi, a nie .mc-a, zeby nie klamala. */
.wsp .model-compare .mc-hi { background: rgba(var(--gold-rgb), .06); }
.wsp .model-compare thead .mc-hi { background: rgba(var(--gold-rgb), .12); }
.wsp .model-compare .mc-hi.mc-hi { color: var(--ink); font-weight: 600; }
.wsp .model-compare .mc-badge { display: inline-block; margin-bottom: 8px; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--anchor); background: var(--gold); padding: 5px 11px; border-radius: var(--r-s); }

/* ETAP 5 - sekcja "Klient zostaje Twoj" (ciemna, nadrzedna zasada) */
.wsp .klient-twoj { background: var(--grad-dark); color: var(--cream); text-align: center; }
.wsp .klient-twoj .eyebrow { color: var(--gold); }
.wsp .klient-twoj h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; line-height: 1.1; max-width: 880px; margin: 0 auto; }
.wsp .klient-twoj .kt-lead { margin: 28px auto 0; max-width: 680px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.85); }
.wsp .klient-twoj .kt-note { margin: 22px auto 0; max-width: 620px; font-weight: 700; color: var(--gold); }
.wsp .klient-twoj .kt-cta { margin-top: 40px; display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.wsp .klient-twoj .kt-details { text-align: left; max-width: 640px; margin: 12px auto 0; }
.wsp .klient-twoj .kt-details summary { list-style: none; cursor: pointer; }
.wsp .klient-twoj .kt-details summary::-webkit-details-marker { display: none; }
.wsp .klient-twoj .kt-list { list-style: none; margin: 22px auto 0; max-width: 620px; text-align: left; }
.wsp .klient-twoj .kt-list li { padding: 14px 0 14px 28px; border-top: 1px solid var(--line-on-dark); position: relative; color: rgba(255,255,255,.85); font-size: 15.5px; }
.wsp .klient-twoj .kt-list li:last-child { border-bottom: 1px solid var(--line-on-dark); }
.wsp .klient-twoj .kt-list li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 8px; height: 8px; background: var(--gold); border-radius: var(--r-s); }

/* ETAP 8 - dowod spoleczny od partnerow (jasna sekcja, 3 karty) */
.wsp .proof h2 { font-size: var(--fs-h2); font-weight: 800; max-width: 760px; }
.wsp .proof .intro { margin-top: 20px; max-width: 640px; color: var(--ink-soft); }
/* ---------- Case study (4.17.0) ----------
 * Trzy kwadraty obok siebie wypadly na zyczenie klienta. Teraz pasy na pelna
 * szerokosc, jeden pod drugim: z lewej historia sprawy, z prawej granatowy
 * blok wyniku. Czyta sie jak lista spraw, a nie jak trzy rownolegle kafle -
 * i kazda historia dostaje tyle miejsca, ile potrzebuje.
 */
.wsp .proof-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; }
.wsp .proof-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 320px;
	align-items: stretch;
	padding: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold);
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.wsp .proof-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -24px rgba(20, 34, 74, .4);
	border-color: rgba(217, 126, 39, .5);
	border-left-color: var(--gold-dark);
}
.wsp .proof-card > * { min-width: 0; }
.wsp .proof-card .pc-body { padding: 28px 32px; display: flex; flex-direction: column; }
.wsp .proof-card .pc-head { display: block; }
.wsp .proof-card .pc-branza { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--anchor); }
.wsp .proof-card .pc-region {
	display: block; margin-top: 3px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--gold-dark);
}
.wsp .proof-card .pc-story { margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }

/* Sciezka sprawy - cztery etapy, ostatni domkniety pomaranczem. */
.wsp .proof-card .pc-path { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin: 18px 0 0; padding: 0; }
.wsp .proof-card .pc-path-step {
	display: flex; align-items: center; gap: 6px;
	padding-right: 16px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
	color: var(--ink-muted); white-space: nowrap;
}
.wsp .proof-card .pc-path-step::before { content: ""; width: 7px; height: 7px; background: #D9D3C4; flex: none; }
.wsp .proof-card .pc-path-step.is-end { color: var(--anchor); }
.wsp .proof-card .pc-path-step.is-end::before { background: var(--gold); }

/* Blok wyniku - prawa kolumna paska, na calej jego wysokosci. */
.wsp .proof-card .pc-payout {
	display: flex; flex-direction: column; justify-content: center;
	padding: 26px 30px;
	background: var(--anchor);
}
.wsp .proof-card .pc-payout-lbl { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.wsp .proof-card .pc-payout-num { display: block; margin-top: 8px; font-size: clamp(30px, 2.6vw, 38px); font-weight: 800; line-height: 1; color: var(--cream); }
.wsp .proof-card .pc-payout-sub { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .62); }

@media (max-width: 860px) {
	.wsp .proof-card { grid-template-columns: 1fr; }
	.wsp .proof-card .pc-body { padding: 24px 22px; }
	.wsp .proof-card .pc-payout { padding: 20px 22px; }
	.wsp .proof-card .pc-payout-num { font-size: 30px; }
}

.wsp .proof-foot { margin-top: 34px; font-size: 14.5px; color: var(--ink-soft); max-width: 720px; }

/* Responsywnosc nowych sekcji */
@media (max-width: 860px) {
  .wsp .proof-grid { grid-template-columns: 1fr; }
  .wsp .proof-card .pc-payout-num { font-size: 30px; }
  .wsp .klient-twoj .kt-cta { flex-direction: column; }
  .wsp .klient-twoj .kt-cta .btn { width: 100%; max-width: 340px; }
}
@media (max-width: 700px) {
  .hero-wsp .hero-metrics { grid-template-columns: 1fr; gap: 16px; }
  .hero-wsp .hm-lbl { max-width: none; }
}
@media (max-width: 480px) {
  .wsp .model-compare { margin-top: 36px; }
  .wsp .klient-twoj h2 { line-height: 1.16; }
  .wsp .proof-grid { margin-top: 36px; }
}

/* Etap 7 (audyt 07.2026): kalkulator - dwa modele w wyniku */
.wsp .calc-models { display: grid; gap: 18px; margin-top: 14px; }
.wsp .calc-model { padding: 18px 20px; border: 1px solid var(--line-on-dark); border-radius: var(--r-m); }
.wsp .calc-model--b { border-color: var(--gold); background: rgba(var(--gold-rgb), .08); }
.wsp .calc-model .cm-label { display: block; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 8px; }
.wsp .calc-model--b .cm-label { color: var(--gold); }
.wsp .calc-model .calc-month { font-weight: 800; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.02; color: var(--cream); margin-top: 0; }
.wsp .calc-model--b .calc-month { color: var(--gold); }
.wsp .calc-model .calc-year { margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,.75); }
.wsp .calc-model .calc-year strong { color: var(--cream); font-weight: 700; }


/* ============================================================
   4.10.0 CHROME PARTNERSKI (brief v2, zadanie 1)
   ============================================================
   Pasek i stopka wylacznie dla /wspolpraca/. Partner nie ma tu ani jednego
   linku do oferty dla poszkodowanych - to byl glowny zarzut briefu.
   Kolory twarde: var(--navy*) w trybie jasnym remapuje sie na krem. */

.pnav {
	position: sticky;
	top: 0;
	z-index: 900;
	background: #FAF7F0;
	border-bottom: 1px solid #E3DCC8;
}
.pnav-inner {
	max-width: 1320px;
	margin: 0 auto;
	height: 72px;
	padding: 0 clamp(16px, 3vw, 32px);
	display: flex;
	align-items: center;
	gap: 16px;
}
.pnav-inner > * { flex: none; }
.pnav-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.pnav-logo img {
	display: block;
	height: 36px;
	width: auto;
	min-width: 120px;
	object-fit: contain;
	object-position: left center;
}
.pnav-logo-text { display: none; font-weight: 900; color: #14224A; letter-spacing: .02em; }

/* Lockup "Partnerzy" - mowi partnerowi, ze jest we wlasciwym miejscu. */
.pnav-lockup {
	flex: none;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #D97E27;
	padding-left: 14px;
	border-left: 1px solid #E3DCC8;
	line-height: 1;
}

/*
 * 4.12.2: typografia paska partnerskiego zrownana z paskiem glownym
 * (.x26-link w nav-2026.css). Rodzina byla ta sama - Montserrat - ale linki
 * mialy 500/14.5 px zamiast 700/13.5 px, wiec przy porownaniu obu paskow
 * partnerski czytal sie jak inny krój: cienszy i wiekszy.
 */
.pnav-links { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.pnav-links a {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .005em;
	line-height: 1;
	color: #1F3565;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}
.pnav-links a:hover { color: #D97E27; }

.pnav-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #14224A;
	text-decoration: none;
	white-space: nowrap;
}
.pnav-phone svg { width: 18px; height: 18px; flex: none; }
.pnav-phone:hover { color: #D97E27; }

.pnav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 17px;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	border: 1.5px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pnav-btn-outline { color: #14224A; border-color: #14224A; background: transparent; }
.pnav-btn-outline:hover { background: #14224A; color: #FAF7F0; }
.pnav-btn-primary { background: #F09C33; color: #14224A; border-color: #F09C33; }
.pnav-btn-primary:hover { background: #D97E27; border-color: #D97E27; }

.pnav-toggle { display: none; }
.pnav-mobile { display: none; }

@media (max-width: 1200px) {
	.pnav-links { display: none; }
}
@media (max-width: 1100px) {
	.pnav-phone { display: none; }
	.pnav-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		margin-left: auto;
		width: 44px;
		height: 44px;
		padding: 0 9px;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.pnav-toggle span { display: block; height: 2px; background: #14224A; }
	.pnav-btn-outline { display: none; }
	.pnav-mobile {
		display: none;
		flex-direction: column;
		padding: 8px clamp(16px, 3vw, 32px) 18px;
		background: #FAF7F0;
		border-top: 1px solid #E3DCC8;
	}
	.pnav-mobile[hidden] { display: none; }
	.pnav-mobile.is-open { display: flex; }
	.pnav-mobile a {
		padding: 13px 0;
		font-size: 16px;
		font-weight: 600;
		color: #14224A;
		text-decoration: none;
		border-bottom: 1px solid #E3DCC8;
	}
	.pnav-mobile-cta {
		margin-top: 14px;
		text-align: center;
		background: #F09C33;
		border-bottom: 0 !important;
		padding: 14px 0 !important;
	}
}
@media (max-width: 560px) {
	.pnav-btn-primary { display: none; }
	.pnav-lockup { padding-left: 10px; }
}

/* ---------- Stopka partnerska ---------- */
.pfooter-cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding: 56px 0 40px;
}
.pfooter-logo { display: block; height: 34px; width: auto; margin-bottom: 18px; }
.pfooter-lead { font-size: 14.5px; line-height: 1.65; color: rgba(250, 247, 240, .72); margin: 0 0 20px; max-width: 34em; }
.pfooter-col ul { list-style: none; margin: 0; padding: 0; }
.pfooter-col li { margin-bottom: 10px; }
.pfooter-col a { font-size: 14.5px; color: rgba(250, 247, 240, .78); text-decoration: none; }
.pfooter-col a:hover { color: #F09C33; }
.pfooter-legal address { font-style: normal; display: flex; flex-direction: column; gap: 6px; }
.pfooter-legal address span { font-size: 13.5px; line-height: 1.5; color: rgba(250, 247, 240, .62); }
.pfooter-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pfooter-links { display: flex; gap: 22px; flex-wrap: wrap; }
.pfooter-links a { font-size: 13.5px; color: rgba(250, 247, 240, .72); text-decoration: none; }
.pfooter-links a:hover { color: #F09C33; }

@media (max-width: 900px) {
	.pfooter-cols { grid-template-columns: 1fr 1fr; gap: 32px; padding: 44px 0 32px; }
}
@media (max-width: 560px) {
	.pfooter-cols { grid-template-columns: 1fr; }
}


/* ---------- Panel partnera (brief v2, zadanie 2) ---------- */
.wsp .ppanel { background: #FAF7F0; }
.ppanel-head { max-width: 40em; margin: 0 0 clamp(28px, 4vw, 44px); }
.ppanel-head h2 { margin: 10px 0 14px; }
.ppanel-lead { font-size: 17px; line-height: 1.6; color: #5A6580; margin: 0; max-width: 34em; }

/* Trzy zrzuty w pasku - panel ma wiecej niz jeden ekran i strona ma to pokazac. */
.ppanel-shots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.6vw, 34px);
	margin: 0 0 clamp(28px, 4vw, 40px);
}
.ppanel-shot { margin: 0; }
.ppanel-shot-frame {
	display: block;
	border: 1px solid rgba(20, 34, 74, .12);
	background: #fff;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
/*
 * cover, nie contain: trzeci zrzut ma granatowe tlo, wiec letterboxing dolozylby
 * biale pasy. Kadr od gory - naglowek ekranu jest tym, co identyfikuje widok.
 */
.ppanel-shot-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ppanel-shot figcaption { display: block; margin-top: 16px; }
.ppanel-shot-h { display: block; font-size: 16px; font-weight: 800; line-height: 1.35; color: #14224A; }
.ppanel-shot-d { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: #5A6580; }
.ppanel-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.ppanel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 26px;
	font-size: 15px;
	font-weight: 700;
	color: #14224A;
	background: transparent;
	border: 1.5px solid #14224A;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.ppanel-btn:hover { background: #14224A; color: #FAF7F0; }

.ppanel-link {
	display: inline-block;
	font-size: 14.5px;
	font-weight: 600;
	color: #1F3565;
	text-decoration: underline;
}
.ppanel-link:hover { color: #D97E27; }

@media (max-width: 860px) {
	.ppanel-shots { grid-template-columns: 1fr; gap: 26px; }
	.ppanel-link { margin-left: 0; }
	.ppanel-actions { gap: 14px; }
	.ppanel-btn { width: 100%; }
}

/* ---------- Zakreslenie markerem w hero (4.17.0) ----------
 * Gradient zamiast tla calego wiersza: pas konczy sie na wysokosci tekstu,
 * wiec wyglada jak pociagniecie zakreslaczem, a nie jak podswietlony blok.
 * Bez wplywu na wysokosc linii, wiec nic sie nie przesuwa.
 */
.wsp .hero-sub .mark {
	/*
	 * Pas liczony w `em`, nie w procentach linii. Przy line-height 1.7 procenty
	 * odmierzaly sie od CALEGO wiersza, wiec zakreslenie ladowalo pod literami
	 * i wygladalo jak przekreslenie. `em` wiaze pas z krojem, nie z interlinia.
	 */
	background-image: linear-gradient(rgba(240, 156, 51, .45), rgba(240, 156, 51, .45));
	background-size: 100% .78em;
	background-position: 0 .2em;
	background-repeat: no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 3px;
	font-weight: 700;
	color: var(--anchor);
}

/* ---------- Numery krokow bez kremowego kwadratu (4.17.0) ----------
 * `.step-num` z theme.css ma `background: var(--navy-dark)`, a w trybie jasnym
 * ta zmienna remapuje sie na krem - stad kwadrat 56x56 pod cyfra. Na tej stronie
 * numer ma byc sama liczba.
 */
.wsp .step-num {
	display: block;
	width: auto; height: auto;
	background: none;
	margin-bottom: 0;
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--gold);
	-webkit-text-stroke: 0;
}

/* ---------- Makieta panelu partnera (4.14.0) ----------
 * Odtworzenie portalu w kodzie. Zero grafik: ramka, paski zamiast nazwisk,
 * badge statusu i licznik kwoty. Uklad 50/50 - makieta po lewej, trzy zalety
 * po prawej, podswietlona ta, ktora opisuje biezaca scene.
 */
.pmock { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 52px); align-items: center; margin-bottom: clamp(28px, 4vw, 40px); }
.pmock > * { min-width: 0; }
.pmock-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid rgba(20, 34, 74, .12);
	box-shadow: 0 30px 60px -30px rgba(20, 34, 74, .45);
}
.pmock-bar {
	display: flex; align-items: center; gap: 12px;
	padding: 0 18px; height: 46px;
	background: #14224A;
}
.pmock-bar-logo { font-weight: 900; font-size: 15px; letter-spacing: .06em; color: #FAF7F0; }
.pmock-bar-logo span { color: #F09C33; }
.pmock-bar-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* Sceny leza jedna na drugiej - przelaczenie nie rusza wysokosci ramki. */
.pmock-scene {
	position: absolute;
	inset: 46px 0 0 0;
	display: flex; flex-direction: column; gap: 12px;
	padding: 22px clamp(18px, 3vw, 28px);
	opacity: 0; visibility: hidden;
	transform: translateY(10px);
	transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.pmock-scene.is-active { opacity: 1; visibility: visible; transform: none; }
.pmock-h { font-size: 15.5px; font-weight: 800; color: #14224A; }

/* scena 1: formularz */
.pmock-field { display: flex; flex-direction: column; gap: 5px; }
.pmock-flabel { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A94AC; }
.pmock-input {
	display: flex; align-items: center;
	min-height: 34px; padding: 0 11px;
	font-size: 13.5px; font-weight: 600; color: #14224A;
	background: #FAF7F0;
	border: 1px solid #E3DCC8;
}
.pmock-input::after { content: ""; width: 1.5px; height: 15px; margin-left: 2px; background: #D97E27; opacity: 0; }
.pmock-input.is-typing::after { opacity: 1; animation: pmockKursor .9s steps(2) infinite; }
@keyframes pmockKursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.pmock-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pmock-chip {
	padding: 6px 10px;
	font-size: 11.5px; font-weight: 700;
	color: #5A6580; background: #FAF7F0; border: 1px solid #E3DCC8;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.pmock-chip.is-on { color: #14224A; background: rgba(240, 156, 51, .22); border-color: #F09C33; }
.pmock-drop {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	margin-top: 2px; padding: 14px 12px;
	background: #FAF7F0;
	border: 1px dashed #D9D3C4;
	color: #8A94AC;
}
.pmock-drop-ico svg { display: block; width: 18px; height: 18px; }
.pmock-drop-txt { font-size: 12.5px; font-weight: 700; color: #5A6580; }
.pmock-drop-txt em { font-style: normal; font-weight: 500; color: #8A94AC; }
.pmock-cta {
	display: flex; align-items: center; justify-content: center;
	margin-top: auto; height: 38px;
	font-size: 13px; font-weight: 800;
	color: #14224A; background: #F09C33;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pmock-cta.is-hit { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(217, 126, 39, .8); }

/* scena 2: lista spraw ze statusem */
.pmock-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.pmock-filter {
	padding: 5px 9px;
	font-size: 11px; font-weight: 700;
	color: #5A6580; background: #FAF7F0; border: 1px solid #E3DCC8;
}
.pmock-filter b { font-weight: 800; color: #8A94AC; }
.pmock-filter.is-on { color: #FAF7F0; background: #14224A; border-color: #14224A; }
.pmock-filter.is-on b { color: #F09C33; }
.pmock-row {
	display: flex; align-items: center; gap: 11px;
	padding: 11px 12px;
	background: #FAF7F0;
	border-left: 3px solid #E3DCC8;
}
.pmock-row.is-live { border-left-color: #F09C33; background: #FFFFFF; box-shadow: 0 8px 20px -12px rgba(20,34,74,.4); }
.pmock-ava {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	font-size: 11px; font-weight: 800; color: #1F3565;
	background: rgba(31, 53, 101, .1);
}
.pmock-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Paski zamiast nazwisk - na stronie nie pokazujemy danych klientow. */
.pmock-lines i { display: block; height: 7px; background: rgba(20, 34, 74, .16); }
.pmock-lines i.mid { width: 70%; }
.pmock-lines i.short { width: 42%; background: rgba(20, 34, 74, .09); }
.pmock-badge {
	flex: none;
	padding: 5px 10px;
	font-size: 10.5px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
	color: #14224A; background: rgba(240, 156, 51, .9);
	transition: background .3s ease, color .3s ease;
}
.pmock-badge--quiet { color: #5A6580; background: rgba(20, 34, 74, .08); }

/* scena 3: rozliczenie */
.pmock-scene--money { justify-content: center; gap: 14px; }
.pmock-tile { padding: 18px 20px; background: #14224A; }
.pmock-tile--quiet { background: rgba(20, 34, 74, .06); }
.pmock-tile-lbl { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #F09C33; }
.pmock-tile--quiet .pmock-tile-lbl { color: #8A94AC; }
.pmock-tile-num { display: block; margin-top: 7px; font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1; color: #FAF7F0; }
.pmock-tile--quiet .pmock-tile-num { color: #3A4763; font-size: 22px; }
.pmock-tile-sub { display: block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.6); }

/* lista zalet - podswietlona ta, ktora opisuje biezaca scene */
.pmock-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/*
 * 4.18.0: kreska przed zaleta nie mowila, ze w pozycje mozna kliknac.
 * Zamiast niej kwadrat z numerem sceny - ten sam ksztalt co numery krokow
 * i etykiety TY/MY nizej. Doszedl kursor, stan hover i obrys focusu.
 */
.pmock-steps { counter-reset: pmock; }
/*
 * Siatka, nie flex: przy flexie tytul i opis staly OBOK siebie jako dwie
 * kolumny. Numer zajmuje pierwsza kolumne przez oba wiersze, tekst druga.
 */
.pmock-step {
	position: relative;
	display: grid;
	grid-template-columns: 26px 1fr;
	column-gap: 14px;
	align-items: start;
	padding: 15px 14px 15px 12px;
	border: 1px solid transparent;
	cursor: pointer;
	opacity: .55;
	transition: opacity .3s ease, background .2s ease, border-color .2s ease;
}
.pmock-step::before {
	counter-increment: pmock;
	content: counter(pmock);
	position: static;
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	font-size: 12.5px; font-weight: 800; line-height: 1;
	color: #8A94AC;
	background: #F2EDE0;
	border: 1px solid #E3DCC8;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.pmock-step:hover { opacity: .85; background: rgba(20, 34, 74, .04); border-color: #E3DCC8; }
.pmock-step:focus-visible { outline: 2px solid #D97E27; outline-offset: 2px; }
.pmock-step.is-active { opacity: 1; background: rgba(240, 156, 51, .1); border-color: rgba(240, 156, 51, .45); }
.pmock-step.is-active::before { color: #14224A; background: #F09C33; border-color: #F09C33; }
.pmock-step-h { grid-column: 2; grid-row: 1; display: block; font-size: 17px; font-weight: 800; line-height: 1.3; color: #14224A; }
.pmock-step-p { grid-column: 2; grid-row: 2; display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: #5A6580; }

@media (max-width: 860px) {
	.pmock { grid-template-columns: 1fr; gap: 26px; }
	/*
	 * Ramka staje sie wyzsza, bo sceny sa pozycjonowane absolutnie - przy 4/3
	 * i szerokosci 350 px formularz nie miescil sie w kadrze i urywal na
	 * "Rodzaj sprawy". Zmierzone: najwyzsza scena potrzebuje ok. 360 px.
	 */
	.pmock-frame { aspect-ratio: 4 / 5; }
	.pmock-scene { padding: 18px 16px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	/* Bez ruchu: pierwsza scena stoi, kursor nie miga, przyciski nie skacza. */
	.pmock-scene { transition: none; }
	.pmock-input.is-typing::after { animation: none; }
	.pmock-cta { transition: none; }
}

/* ---------- Film o portalu (4.13.0) ---------- */
.ppanel-video { margin: 0 0 clamp(28px, 4vw, 40px); }
.ppanel-video-btn {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 1px solid rgba(20, 34, 74, .12);
	background: #14224A;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.ppanel-video-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ppanel-video-play {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center;
	width: 76px; height: 76px;
	border-radius: 50%;
	background: rgba(217, 126, 39, .94);
	color: #fff;
	transition: transform .18s ease, background .18s ease;
}
.ppanel-video-play svg { width: 34px; height: 34px; margin-left: 4px; }
.ppanel-video-btn:hover .ppanel-video-play,
.ppanel-video-btn:focus-visible .ppanel-video-play { transform: translate(-50%, -50%) scale(1.06); background: #D97E27; }
.ppanel-video figcaption { margin-top: 14px; font-size: 14.5px; color: #5A6580; }
.ppanel-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- Znak zapytania w tabeli modeli (4.13.0) ---------- */
.wsp .mc-hint { position: relative; display: inline-flex; margin-left: 6px; vertical-align: middle; cursor: help; }
.wsp .mc-hint-mark {
	display: flex; align-items: center; justify-content: center;
	width: 18px; height: 18px;
	font-size: 11px; font-weight: 800; line-height: 1;
	color: #14224A;
	border: 1.5px solid rgba(20, 34, 74, .3);
	border-radius: 50%;
}
.wsp .mc-hint:hover .mc-hint-mark, .wsp .mc-hint:focus-visible .mc-hint-mark { color: #D97E27; border-color: #D97E27; }
.wsp .mc-hint-txt {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: max-content;
	max-width: 260px;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: #FAF7F0;
	background: #14224A;
	border-radius: var(--r-m);
	box-shadow: 0 14px 30px -12px rgba(0,0,0,.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 5;
	pointer-events: none;
}
.wsp .mc-hint:hover .mc-hint-txt, .wsp .mc-hint:focus-visible .mc-hint-txt {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
@media (max-width: 700px) {
	/* Dymek przy krawedzi ekranu uciekal poza widok - kotwiczymy do prawej. */
	.wsp .mc-hint-txt { left: auto; right: 0; transform: none; max-width: 220px; }
	.wsp .mc-hint:hover .mc-hint-txt, .wsp .mc-hint:focus-visible .mc-hint-txt { transform: none; }
}

/* ---------- Kroki: kto wykonuje + dwa warianty (4.13.0) ---------- */
/*
 * .seg powstal dla granatowej sekcji kalkulatora, wiec nieaktywny przycisk ma
 * kolor rgba(255,255,255,.75). Na kremowym tle sekcji krokow byl niewidoczny
 * (kontrast 1.1) - stad wariant jasny.
 */
.wsp .how-seg { margin-top: 30px; margin-bottom: 0; max-width: 460px; border-color: var(--line); }
.wsp .how-seg button { color: #3A4763; }
.wsp .how-seg button:hover { background: rgba(20, 34, 74, .05); }
.wsp .how-seg button.active { background: var(--gold); color: var(--anchor); }
.wsp .steps-legend { margin: 34px 0 -18px; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); grid-column: 1 / -1; }
.wsp .step-head { display: flex; align-items: center; gap: 12px; }
/*
 * 4.13.1: etykieta byla nieczytelna na produkcji. Dwie przyczyny naraz.
 *
 * 1. KOLOR. Regula light-mode
 *    `:root[data-mode="light"] :is(.service-card, ..., .step, ...) :is(h1..h6,p,li,span:not(.accent),...)`
 *    lapie KAZDY span wewnatrz .step - w tym etykiete - i ma specyficznosc
 *    (0,4,1) przez `span:not(.accent)` w drugim :is(). Zaden rozsadnie krotki
 *    selektor tego nie przebije, wiec kolory ida z !important - tak samo jak
 *    kolory wskaznika FAQ, ktore przegrywaly z ta sama warstwa (CLAUDE.md).
 *    Zmierzony kontrast przed poprawka: 1.29 (granat na granacie).
 * 2. SKALA. 11 px w kapitalikach obok cyfry 60 px ginelo niezaleznie od koloru.
 */
.wsp .step-who {
	display: inline-flex; align-items: center;
	height: 26px; padding: 0 12px;
	font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	border-radius: var(--r-s);
}
.wsp .step-who--ty { color: #14224A !important; background: #F09C33 !important; }
.wsp .step-who--my { color: #FAF7F0 !important; background: #14224A !important; }
/* Przelacznik dziala tylko z JS - bez niego oba warianty stoja pod soba. */
.wsp .js-how .steps-legend { display: none; }
.wsp .js-how .steps.is-hidden { display: none; }

/* ---------- Kalkulator: pole wartosci sprawy (4.12.0) ---------- */
.wsp .calc-val-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
.wsp .calc-val-row input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 16px;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: var(--cream);
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--line-on-dark);
	border-radius: var(--r-m);
}
.wsp .calc-val-row input:focus-visible { border-color: var(--gold); outline: none; }
.wsp .calc-val-suffix { font-weight: 800; font-size: 18px; color: rgba(255, 255, 255, .7); flex: none; }
.wsp .calc-b-text {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--gold);
	margin: 0;
}

/* ---------- Opiekunowie: numer pod zdjeciem wlasciciela (4.12.1) ---------- */
.wsp .opiekun-photos .opiekun-phone {
	display: inline-block;
	margin-top: 4px;
	font-weight: 800;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: .01em;
	white-space: nowrap;
}
.wsp .opiekun-photos .opiekun-phone:hover { color: var(--gold-dark); }

/* ---------- H1 hero: bez sieroty (brief v2, zadanie 6.3) ---------- */
.wsp .hero h1 { text-wrap: balance; }

/* ---------- Mikrocopy nad formularzem ---------- */
.wsp-form-micro {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}

/* ---------- Widget oddzwaniania nie nachodzi na wynik kalkulatora (6.4) ---------- */
.wsp .calc { position: relative; z-index: 2; }

/* ---------- Panel partnera, wariant "film" (4.19.0, przerysowany 4.20.0) ----------
 * Odwzorowanie produkcyjnego portalu, nie stylizacja: gorny pasek, granatowy
 * blok powitalny z kwotami i opiekunem, pasek instrukcji, dwie kolumny
 * (formularz | jak wspolpracujemy), na dole lista przekazanych spraw.
 * Wszystko na JEDNEJ przewijanej stronie - film przewija ja zamiast klikac
 * w menu, bo portal menu bocznego nie ma.
 *
 * Kolory wpisane twardo (jak w .pmock): var(--navy*) w light mode remapuje
 * sie na krem i makieta portalu straci kontrast. Zaokraglenia sa czescia
 * wygladu portalu - w reszcie sekcji obowiazuje geometria motywu.
 * Zielen statusow z portalu zamieniona na granat (kanon marki).
 */
.pfilm {
	--pfilm-klik: #2E9E5B; /* kolor blysku kliknięcia - jedno miejsce */
	display: grid;
	grid-template-columns: 75% 25%;
	gap: 0;
	align-items: stretch;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.pfilm-app {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: #FAF7F0;
	border: 1px solid rgba(20, 34, 74, .12);
	box-shadow: 0 34px 70px -34px rgba(20, 34, 74, .5);
}

/* pasek portalu - nie przewija sie razem ze strona */
.pfilm-top {
	display: flex; align-items: center; gap: 14px;
	height: 42px; padding: 0 16px;
	background: #14224A;
}
.pfilm-logo { font-weight: 900; font-size: 13.5px; letter-spacing: .06em; color: #FAF7F0; }
.pfilm-logo span { color: #F09C33; }
.pfilm-back { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.55); }
.pfilm-back::before { content: "\2190"; margin-right: 5px; }
.pfilm-top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.pfilm-user {
	display: flex; align-items: center; gap: 7px;
	padding: 4px 10px 4px 4px;
	font-size: 10.5px; font-weight: 700; color: #FAF7F0;
	background: rgba(255,255,255,.09); border-radius: 20px;
}
.pfilm-user i {
	display: flex; align-items: center; justify-content: center;
	width: 18px; height: 18px;
	font-style: normal; font-size: 8.5px; font-weight: 800;
	color: #14224A; background: #F09C33; border-radius: 50%;
}
.pfilm-top-link { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.55); }

/* obszar przewijania: .pfilm-page jedzie transformem */
.pfilm-scroll { position: relative; height: calc(100% - 42px); overflow: hidden; }
.pfilm-page {
	position: absolute; left: 0; right: 0; top: 0;
	display: flex; flex-direction: column; gap: 12px;
	padding: 14px clamp(14px, 2vw, 26px) 20px;
	transform: translateY(0);
	transition: transform .85s cubic-bezier(.4, .1, .2, 1);
}

/* blok powitalny */
.pfilm-hero {
	display: flex; flex-direction: column; gap: 11px;
	padding: 16px 18px;
	background: linear-gradient(135deg, #14224A 0%, #0D1834 100%);
	border-radius: 10px;
}
.pfilm-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #F09C33; }
.pfilm-eyebrow--dark { color: #D97E27; }
.pfilm-hi { font-size: 19px; font-weight: 800; line-height: 1.1; color: #FAF7F0; }
.pfilm-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pfilm-kpi-box {
	padding: 11px 13px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 8px;
}
.pfilm-kpi-box.is-lead { border-top: 2px solid #F09C33; }
.pfilm-kpi-l { display: flex; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.pfilm-kpi-l svg { display: block; width: 11px; height: 11px; flex: none; }
.pfilm-kpi-box.is-lead .pfilm-kpi-l { color: #F09C33; }
.pfilm-kpi-n { display: block; margin-top: 5px; font-size: 21px; font-weight: 800; line-height: 1; color: #FAF7F0; }
.pfilm-kpi-s { display: block; margin-top: 5px; font-size: 9.5px; color: rgba(255,255,255,.5); }

.pfilm-care {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 13px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 8px;
}
.pfilm-care-ava {
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; flex: none;
	font-size: 10px; font-weight: 800; color: #14224A;
	background: #F09C33; border-radius: 50%;
}
.pfilm-care-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pfilm-care-l { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #F09C33; }
.pfilm-care-n { font-size: 12.5px; font-weight: 700; color: #FAF7F0; }
.pfilm-care-btns { display: flex; gap: 8px; margin-left: auto; }
.pfilm-care-btn svg { display: block; width: 12px; height: 12px; flex: none; color: #F09C33; }
.pfilm-care-btn {
	display: flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	font-size: 10.5px; font-weight: 700; color: #FAF7F0;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 6px;
	white-space: nowrap;
}

/* pasek "Pierwszy raz w panelu?" */
.pfilm-hint {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px;
	background: #FFFFFF;
	border: 1px solid #E3DCC8; border-left: 3px solid #F09C33;
	border-radius: 6px;
}
.pfilm-hint-ico {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; flex: none;
	font-size: 11px; font-weight: 800; color: #FAF7F0; background: #14224A; border-radius: 50%;
}
.pfilm-hint-txt { font-size: 10.5px; line-height: 1.45; color: #5A6580; }
.pfilm-hint-txt b { display: block; font-size: 11.5px; color: #14224A; }
.pfilm-hint-btn {
	margin-left: auto; padding: 6px 12px;
	font-size: 10.5px; font-weight: 800; color: #14224A; background: #F09C33;
	border-radius: 6px; white-space: nowrap;
}

/* dwie kolumny portalu */
.pfilm-cols { display: grid; grid-template-columns: 1.32fr .68fr; gap: 12px; align-items: start; }
.pfilm-card {
	display: flex; flex-direction: column; gap: 9px;
	padding: 14px 16px;
	background: #FFFFFF;
	border: 1px solid #E3DCC8; border-left: 3px solid #F09C33;
	border-radius: 8px;
}
.pfilm-card-h {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	font-size: 13px; font-weight: 800; color: #14224A;
}
.pfilm-card-h em {
	flex-basis: 100%;
	font-style: normal; font-size: 10px; font-weight: 500; color: #8A94AC;
}
.pfilm-card-ico {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	font-size: 14px; font-weight: 700; color: #F09C33; background: #14224A; border-radius: 6px;
}

.pfilm-field { display: flex; flex-direction: column; gap: 4px; }
.pfilm-label { font-size: 9.5px; font-weight: 700; color: #5A6580; }
.pfilm-label b { color: #D97E27; }
.pfilm-label em { font-style: normal; font-weight: 500; color: #8A94AC; }
.pfilm-input, .pfilm-area {
	display: flex; align-items: center;
	min-height: 28px; padding: 6px 10px;
	font-size: 11.5px; font-weight: 600; color: #14224A;
	background: #FFFFFF; border: 1px solid #E3DCC8; border-radius: 6px;
}
.pfilm-area { align-items: flex-start; min-height: 42px; font-weight: 500; line-height: 1.45; }
.pfilm-input::after, .pfilm-area::after { content: ""; width: 1.5px; height: 13px; margin-left: 2px; background: #D97E27; opacity: 0; }
.pfilm-input.is-typing, .pfilm-area.is-typing { border-color: #D97E27; box-shadow: 0 0 0 3px rgba(240, 156, 51, .12); }
.pfilm-input.is-typing::after, .pfilm-area.is-typing::after { opacity: 1; animation: pfilmKursor .9s steps(2) infinite; }
@keyframes pfilmKursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.pfilm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pfilm-chip {
	padding: 5px 10px;
	font-size: 10.5px; font-weight: 700; color: #5A6580;
	background: #FAF7F0; border: 1px solid #E3DCC8; border-radius: 20px;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.pfilm-chip.is-on { color: #14224A; background: rgba(240, 156, 51, .22); border-color: #F09C33; }

.pfilm-drop {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 12px;
	background: #FAF7F0; border: 1px dashed #D9D3C4; border-radius: 6px;
}
.pfilm-drop-ico { display: block; width: 16px; height: 16px; color: #8A94AC; }
.pfilm-drop-ico svg { display: block; width: 100%; height: 100%; }
.pfilm-drop-t { font-size: 10.5px; font-weight: 700; color: #5A6580; }
.pfilm-drop-t b { color: #D97E27; }
.pfilm-drop-s { font-size: 9px; color: #8A94AC; }

.pfilm-consent {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 10px; line-height: 1.45; color: #5A6580;
}
.pfilm-box {
	width: 14px; height: 14px; flex: none; margin-top: 1px;
	background: #FFFFFF; border: 1px solid #D9D3C4; border-radius: 3px;
	transition: background .25s ease, border-color .25s ease;
}
.pfilm-consent.is-on .pfilm-box { background: #14224A; border-color: #14224A; }
.pfilm-consent.is-on .pfilm-box::after {
	content: ""; display: block; width: 4px; height: 8px; margin: 0 auto;
	border: solid #F09C33; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}

.pfilm-cta {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	padding: 9px 18px;
	font-size: 12px; font-weight: 800; color: #14224A;
	background: #F09C33; border-radius: 6px;
	/* Plynne przejscie pomarancz -> granat daje w polowie brudny braz,
	   wiec kolor przelacza sie natychmiast - animujemy tylko ruch. */
	transition: transform .2s ease, box-shadow .2s ease;
}
.pfilm-cta::after { content: "\2192"; }
.pfilm-cta.is-hit { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(217, 126, 39, .85); }
.pfilm-cta.is-done { background: #14224A; color: #FAF7F0; }
.pfilm-cta.is-done::after { content: "\2713"; }

.pfilm-how-list { list-style: none; margin: 0; padding: 0; counter-reset: pfilmhow; display: flex; flex-direction: column; gap: 9px; }
.pfilm-how-list li {
	position: relative;
	padding-left: 26px;
	font-size: 10.5px; line-height: 1.5; color: #5A6580;
}
.pfilm-how-list li::before {
	counter-increment: pfilmhow; content: counter(pfilmhow);
	position: absolute; left: 0; top: 0;
	display: flex; align-items: center; justify-content: center;
	width: 18px; height: 18px;
	font-size: 9.5px; font-weight: 800; color: #F09C33; background: #14224A; border-radius: 5px;
}

/* lista przekazanych spraw */
.pfilm-cases { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pfilm-cases-h { font-size: 15px; font-weight: 800; color: #14224A; }
.pfilm-cases-h b { margin-left: 6px; font-size: 12px; color: #D97E27; }
.pfilm-cases-s { font-size: 10px; color: #8A94AC; }
.pfilm-search {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px;
	font-size: 10.5px; color: #8A94AC;
	background: #FFFFFF; border: 1px solid #E3DCC8; border-radius: 6px;
}
.pfilm-search-ico { display: block; width: 13px; height: 13px; }
.pfilm-search-ico svg { display: block; width: 100%; height: 100%; }

.pfilm-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.pfilm-filter {
	padding: 5px 9px;
	font-size: 9.5px; font-weight: 700; color: #5A6580;
	background: #FFFFFF; border: 1px solid #E3DCC8; border-radius: 20px;
}
.pfilm-filter b { margin-left: 3px; font-weight: 800; color: #8A94AC; }
.pfilm-filter.is-on { color: #FAF7F0; background: #14224A; border-color: #14224A; }
.pfilm-filter.is-on b { color: #F09C33; }

.pfilm-case {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px;
	background: #FFFFFF;
	border: 1px solid #E3DCC8; border-left: 3px solid #8A94AC;
	border-radius: 6px;
	transition: opacity .45s ease, transform .45s ease, box-shadow .3s ease, border-color .3s ease;
}
.pfilm-case.is-fresh { border-left-color: #F09C33; box-shadow: 0 10px 24px -16px rgba(20, 34, 74, .55); }
.pfilm-case.is-hidden { opacity: 0; transform: translateY(-10px); }
.pfilm-case-ava {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; flex: none;
	font-size: 9.5px; font-weight: 800; color: #14224A;
	background: #F2EDE0; border-radius: 6px;
}
.pfilm-case.is-fresh .pfilm-case-ava { color: #FAF7F0; background: #14224A; }
.pfilm-case-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pfilm-case-n { font-size: 11.5px; font-weight: 800; color: #14224A; }
.pfilm-case-m { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 9.5px; color: #8A94AC; }
.pfilm-doc {
	padding: 2px 7px;
	font-size: 8.5px; font-weight: 700; color: #1F3565;
	background: #F2EDE0; border: 1px solid #E3DCC8; border-radius: 20px;
	opacity: 0; transition: opacity .35s ease;
}
.pfilm-doc.is-on, .pfilm-case:not(.is-fresh) .pfilm-doc { opacity: 1; }
.pfilm-case-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pfilm-status {
	padding: 4px 9px;
	font-size: 9px; font-weight: 800; letter-spacing: .02em;
	color: #14224A; background: #F09C33; border-radius: 20px;
	white-space: nowrap;
}
.pfilm-status--quiet { color: #5A6580; background: #F2EDE0; }
.pfilm-status--pay { color: #FAF7F0; background: #1F3565; }
.pfilm-kwota { font-size: 11px; font-weight: 800; color: #D97E27; white-space: nowrap; }
.pfilm-kwota:empty { display: none; }

/* kursor - jedzie po scenie, klika.
 * Kolor blysku kliknięcia w jednej zmiennej: podmiana --pfilm-klik przestawia
 * pierscien i poswiate naraz. */
.pfilm-cursor {
	position: absolute; left: 0; top: 0;
	width: 30px; height: 30px;
	transform: translate(-60px, -60px);
	transition: transform .72s cubic-bezier(.33, .68, .3, 1);
	pointer-events: none;
	z-index: 5;
	filter: drop-shadow(0 5px 10px rgba(20, 34, 74, .4));
}
.pfilm-cursor svg { display: block; width: 100%; height: 100%; transition: transform .18s ease; }
/* Grot "naciska" przy kliknieciu - skalujemy SVG, bo transform samego kursora
   trzyma jego pozycje na scenie. */
.pfilm-cursor.is-click svg { transform: scale(.86); }

/* poswiata */
.pfilm-cursor::before,
.pfilm-cursor::after {
	content: "";
	position: absolute; left: 2px; top: 2px;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}
.pfilm-cursor::before {
	width: 46px; height: 46px; margin: -23px 0 0 -23px;
	background: var(--pfilm-klik);
}
/* pierscien */
.pfilm-cursor::after {
	width: 42px; height: 42px; margin: -21px 0 0 -21px;
	border: 2.5px solid var(--pfilm-klik);
}
.pfilm-cursor.is-click::before { animation: pfilmBlysk .55s ease-out; }
.pfilm-cursor.is-click::after { animation: pfilmKlik .55s ease-out; }
@keyframes pfilmKlik {
	0% { opacity: 1; transform: scale(.25); }
	70% { opacity: .55; }
	100% { opacity: 0; transform: scale(1.9); }
}
@keyframes pfilmBlysk {
	0% { opacity: .45; transform: scale(.2); }
	100% { opacity: 0; transform: scale(1.35); }
}

/* pasek odtwarzacza */
.pfilm-player { display: flex; flex-direction: column; justify-content: center; gap: 20px; height: 100%; padding-left: clamp(20px, 2.4vw, 36px); }
.pfilm-play {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0;
	color: #FAF7F0; background: #14224A;
	border: 0; cursor: pointer;
	transition: background .25s ease, transform .2s ease;
}
.pfilm-play:hover { background: #1F3565; transform: translateY(-1px); }
.pfilm-play-ico { display: block; width: 17px; height: 17px; }
.pfilm-play-ico svg { display: block; width: 100%; height: 100%; }
.pfilm-play-ico .pfilm-i-play { display: none; }
.pfilm.is-paused .pfilm-play-ico .pfilm-i-play { display: block; }
.pfilm.is-paused .pfilm-play-ico .pfilm-i-pause { display: none; }

.pfilm-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.pfilm-chapter {
	display: block; width: 100%; padding: 0; text-align: left;
	background: none; border: 0; cursor: pointer;
	opacity: .82;
	transition: opacity .3s ease;
}
.pfilm-chapter:hover { opacity: 1; }
.pfilm-chapter.is-active { opacity: 1; }
.pfilm-chapter-bar { display: block; height: 3px; background: rgba(20, 34, 74, .14); }
.pfilm-chapter-bar i { display: block; height: 100%; width: 0; background: #D97E27; }
.pfilm-chapter-t { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 800; color: var(--ink-soft); transition: color .3s ease; }
.pfilm-chapter.is-active .pfilm-chapter-t { color: var(--anchor); }
.pfilm-chapter-p { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 900px) {
	/* Za waska kolumna zjadalaby opisy - wracaja pod makiete, po dwa w rzedzie. */
	.pfilm { grid-template-columns: 1fr; gap: 22px; }
	.pfilm-player { padding-left: 0; }
	.pfilm-app { aspect-ratio: 4 / 3; max-height: none; }
	.pfilm-cols { grid-template-columns: 1fr; }
	.pfilm-player { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
	.pfilm-chapters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 620px) {
	.pfilm-app { aspect-ratio: 3 / 4; }
	.pfilm-back, .pfilm-top-link { display: none; }
	.pfilm-kpi { grid-template-columns: 1fr; }
	.pfilm-care { flex-wrap: wrap; }
	.pfilm-care-btns { margin-left: 0; width: 100%; }
	.pfilm-hint-btn { display: none; }
	.pfilm-case-right { flex-direction: column; align-items: flex-end; gap: 4px; }
	.pfilm-chapters { display: grid; grid-template-columns: 1fr; gap: 10px; }
	.pfilm-chapter-p { display: none; }
	.pfilm-chapter-t { margin-top: 7px; }
}

/* Bez ruchu: kursor znika, przewijanie i przejscia natychmiastowe. */
@media (prefers-reduced-motion: reduce) {
	.pfilm-cursor { display: none; }
	.pfilm-page, .pfilm-case, .pfilm-doc, .pfilm-chip, .pfilm-cta { transition: none; }
}

/* Etykieta nad wariantem makiety - widoczna TYLKO w trybie "oba" (staging). */
.wsp .ppanel-wariant {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 14px;
	font-size: 13px; font-weight: 700; color: var(--ink-soft);
}
.wsp .ppanel-wariant + .pmock { margin-top: 0; }
.wsp .ppanel-wariant span {
	padding: 4px 10px;
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--cream); background: var(--anchor);
}
.wsp .pfilm + .ppanel-wariant { margin-top: clamp(40px, 6vw, 72px); }