/* Asystent AI dla Twojego zespołu od AI Biznes Lab, strona /zespol (wcześniej /pracownicy; nazwa i adres
   z decyzji Mirka 10.10.2026, nazwa arkusza i klas zostaje techniczna).
   Projekty sekcji: DO_OCENY/AIBIZNESLAB/pracownicy/ (01 v2, 02, 03 v3, 04, 05 przed i po; akceptacje 09.10 i 10.10.2026).
   Klocki FRAME jak na /czujka: płótno, czarna kreska, fiolet jako jedyny kolor akcji, ostre rogi.
   Pomarańcz tylko jako sygnał AI w rycinach i w podkreśleniu z projektu hero. */

body.mkt-page { --mkt-muted: oklch(42% 0.018 295); --mkt-line: oklch(88% 0.01 295); --pr-signal: #F26A1B; overflow-x: visible; }
.pr-page :where(h1, h2, h3, p, figure, ul, fieldset, legend) { margin: 0; }
.pr-page :is(h1, h2, h3) { font-weight: 600; letter-spacing: -.035em; color: var(--frame-ink); }
.pr-page :where(p) { line-height: 1.65; color: var(--mkt-muted); text-wrap: pretty; }
.pr-page :where(ul) { padding: 0; margin: 0; list-style: none; }
.pr-page :where(section) { padding-block: 4.5rem 5.5rem; scroll-margin-top: 6rem; } /* WHY: baza przez :where(), żeby odstęp pojedynczej sekcji (pierwszy ekran) mógł ją nadpisać jedną klasą */
.pr-page img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

.pr-h1 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: 1.04; text-wrap: balance; } /* WHY: projekt hero ma nagłówek na trzy linie w połowie szerokości ramy */
.pr-h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.08; text-wrap: balance; }
.pr-lead { font-size: 1.1875rem; margin-block: 1.5rem 0; } /* WHY: projekt sekcji ma lead większy od tekstu listy */
.pr-mark { text-decoration: underline; text-decoration-color: var(--pr-signal); text-decoration-thickness: .1em; text-underline-offset: .14em; text-decoration-skip-ink: none; }

/* Przycisk jak na /czujka i /marketing: fiolet, czarny tekst, cienka rama */
.pr-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: .875rem 1.75rem; border: 1px solid var(--frame-ink); border-radius: 0; background: var(--frame-violet); font: inherit; font-size: 1rem; font-weight: 600; color: var(--frame-ink); text-decoration: none; cursor: pointer; }
.pr-btn:hover { background: var(--frame-ink); color: var(--frame-canvas); }
.pr-btn:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 2px; }
.pr-btn[disabled] { opacity: .6; cursor: progress; }
.pr-note { font-size: .9375rem; }

/* Pierwszy ekran */
.pr-hero { padding-block: 4.5rem 0; } /* WHY: pas stanowisk zamyka pierwszy ekran linią, więc następna sekcja zaczyna się po jednym odstępie górnym, jak pod pasem logotypów na /marketing */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 3rem; align-items: center; }
.pr-kicker { margin-bottom: 1.5rem; font-size: 1rem; font-weight: 600; color: var(--frame-ink); }
.pr-hero-actions { display: grid; gap: 1rem; justify-items: start; margin-top: 2.25rem; }
.pr-hero-art img { max-width: 52rem; margin-inline: auto; }
.pr-roles { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: 3rem; padding-block: 1.75rem; border-block: 1px solid var(--frame-ink); }
.pr-roles-label { font-size: 1.0625rem; }
.pr-roles-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pr-roles-list li { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; color: var(--frame-ink); text-align: center; }

/* Przed i po: nagłówek, szeroka rycina, pod nią dwie kolumny w cienkich liniach.
   Projekt 05 (akceptacja Mirka 10.10.2026): lewa kolumna stoi pod lewą połową ryciny, prawa pod prawą,
   a każde zdanie lewej kolumny ma odpowiednik w tym samym wierszu prawej. Kontrast niesie rycina
   i waga pisma, bez ikon, numerów i kolorowych znaczników. */
.pr-shift-art { margin-top: 1.5rem; }
.pr-shift-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(4, auto); column-gap: 3.5rem; margin-top: 2rem; }
.pr-shift-col, .pr-shift-list { display: grid; grid-template-rows: subgrid; } /* WHY: obie kolumny dzielą te same wiersze, więc para zdań stoi na jednej wysokości także wtedy, gdy jedno z nich łamie się na dwa wiersze */
.pr-shift-col { grid-row: 1 / -1; }
.pr-shift-list { grid-row: 2 / -1; border-top: 1px solid var(--frame-ink); }
.pr-shift-col h3 { margin-bottom: 1rem; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; } /* WHY: w projekcie 05 etykiety kolumn podpisują połowy ryciny, więc są większe niż etykiety widoków w sekcji portalu */
.pr-shift-list li { display: flex; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--frame-ink); font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.4; text-wrap: balance; } /* WHY: wiersz jak w liście „Co dostaje jedna osoba”; zdanie krótsze od sąsiada z pary stoi w środku wysokości wiersza */
.pr-shift-today li { font-weight: 400; color: var(--mkt-muted); }
.pr-shift-after li { font-weight: 500; color: var(--frame-ink); }

/* Jeden portal: wariant B (akceptacja Mirka 11.10.2026). Nagłówek po lewej i lead po prawej, nad panoramą
   napis, że to przykład; pod panoramą dwie kolumny jak w sekcji „przed i po”: lewa pod biurkiem właściciela,
   prawa pod biurkiem osoby z zespołu. Na telefonie każda kolumna dostaje własny kadr zamiast panoramy.
   Przełącznik data-czujka na sekcji pokazuje albo ukrywa wszystko, co dotyczy Czujki firmy. */
.pr-portal-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.pr-portal-head .pr-lead { margin-top: 0; } /* WHY: w projekcie B lead stoi obok nagłówka, równo z jego górną krawędzią */
.pr-portal-flag { margin-top: 2.5rem; font-size: .8125rem; line-height: 1.4; text-align: right; }
.pr-portal-art { margin-top: .75rem; }
.pr-portal-phone { display: none; }
.pr-portal[data-czujka="off"] .pr-czujka-on, .pr-portal[data-czujka="on"] .pr-czujka-off { display: none; }
.pr-portal-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mkt-line); }
.pr-portal-point { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; color: var(--frame-ink); } /* WHY: w projekcie B pierwsza linia kolumny jest pogrubiona i czarna, jak wiersz kolumny „Z asystentem” */
.pr-portal-note { margin-top: .625rem; font-size: 1.0625rem; } /* WHY: dalsze linie kolumny w projekcie B są szare i nieco mniejsze od pierwszej */
.pr-data { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--frame-ink); font-size: .9375rem; color: var(--frame-ink); }

/* Co dostaje jedna osoba: lista w cienkich liniach, rycina po prawej.
   Projekt 03 v3 (akceptacja Mirka 10.10.2026): punkt zaczyna pogrubiona czarna kotwica, reszta zdania
   stoi w tej samej linii zwykłym szarym pismem; bez numerów, ikon i punktorów. */
.pr-kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center; }
.pr-kit-list { margin-top: 2.25rem; border-top: 1px solid var(--frame-ink); }
.pr-kit-list li { padding-block: 1rem; border-bottom: 1px solid var(--frame-ink); font-size: clamp(1rem, 1.3vw, 1.125rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.4; color: var(--mkt-muted); text-wrap: balance; } /* WHY: projekt 03 v3 ma każdy punkt w jednej linii; najdłuższy punkt ma 573 px przy 18 px, a kolumna na oknie 1280 ma 557 px, więc pismo zwęża się z oknem. Gdy punkt mimo to się łamie (wąskie okno, telefon), dwa wiersze są równe, bez ogona z dwóch słów */
.pr-kit-list strong { font-weight: 600; color: var(--frame-ink); }
.pr-kit-art img { max-width: 44rem; margin-inline: auto; }

/* Cena i zapis */
.pr-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 3.5rem; align-items: start; }
.pr-signup { grid-column: 2; grid-row: 1 / span 2; scroll-margin-top: 6rem; }
.pr-price { margin-top: 2rem; font-size: clamp(3rem, 5.2vw, 4.5rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--frame-ink); }
.pr-price-unit { margin-top: .5rem; font-size: 1.375rem; color: var(--frame-ink); }
.pr-terms { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.8; }
.pr-partner-note { margin-top: 1rem; font-size: 1.125rem; line-height: 1.8; }
.pr-partner-note strong { font-weight: 650; color: var(--frame-ink); } /* WHY: zdanie o partnerze stoi przy linii o koncie ChatGPT, bo tam klient pyta, skąd wziąć konto (korekta Mirka 10.10.2026) */
.pr-offer-art { grid-column: 1; margin-top: 1.5rem; }
.pr-offer-art img { max-width: 40rem; }
.pr-signup { padding: 2.5rem; border: 1px solid var(--frame-ink); background: var(--frame-canvas); }
.pr-signup h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.15; }
.pr-signup-note { margin-top: .5rem; font-size: .9375rem; }
.pr-form { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.pr-field { display: grid; gap: .5rem; }
.pr-field[hidden] { display: none; }
.pr-field span, .pr-roles-legend { font-size: .9375rem; font-weight: 600; color: var(--frame-ink); }
.pr-input { width: 100%; min-height: 52px; padding: .875rem 1rem; border: 1px solid var(--frame-ink); border-radius: 0; background: #fff; font: inherit; font-size: 1rem; color: var(--frame-ink); }
.pr-input:focus-visible { outline: 2px solid var(--frame-violet); outline-offset: 2px; }
.pr-input[aria-invalid="true"] { border-color: var(--frame-error); }
.pr-roles-field { display: grid; grid-template-columns: repeat(3, max-content); gap: .75rem 1.75rem; padding: 0; border: 0; } /* WHY: projekt sekcji 04 ma stanowiska w trzech kolumnach */
.pr-roles-legend { grid-column: 1 / -1; }
.pr-roles-field label, .pr-consent { display: inline-flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; line-height: 1.5; color: var(--frame-ink); cursor: pointer; }
.pr-roles-field input, .pr-consent input { flex: none; width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--frame-violet); }
.pr-consent { color: var(--mkt-muted); }
.pr-consent a { color: var(--frame-ink); }
.pr-form-error { font-size: .9375rem; color: var(--frame-error); }
.pr-form .pr-submit { width: 100%; font-weight: 600; } /* WHY: przycisk formularza ma tę samą wagę co przycisk w pierwszym ekranie */
.pr-success { margin-top: 1.75rem; padding: 1.25rem; border: 1px solid var(--frame-ink); background: color-mix(in oklch, var(--frame-violet) 12%, transparent); }
.pr-success h3 { margin-bottom: .5rem; font-size: 1.25rem; }
.pr-success p { color: var(--frame-ink); }

@media (max-width: 900px) {
  .pr-page :where(section) { padding-block: 3rem 3.5rem; }
  .pr-hero { padding-bottom: 0; }
  .pr-hero, .pr-kit, .pr-offer { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pr-signup, .pr-offer-art { grid-column: 1; grid-row: auto; }
  .pr-offer-art { margin-top: 0; }
  .pr-signup { order: 2; }
  .pr-portal-head, .pr-portal-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pr-portal-head .pr-lead { margin-top: 1.5rem; } /* WHY: w jednej kolumnie lead wraca pod nagłówek z odstępem jak w innych sekcjach */
  .pr-portal-flag { margin-top: 2rem; text-align: left; }
  .pr-portal-art { display: none; }
  .pr-portal-cols { row-gap: 2.5rem; margin-top: 1rem; padding-top: 0; border-top: 0; }
  .pr-portal-phone { display: block; margin-bottom: 1.25rem; }
  .pr-portal-phone img { max-width: 30rem; margin-inline: auto; } /* WHY: kadr na telefon ma 960 px, więc na tablecie nie rośnie ponad dwukrotność szerokości telefonu */
  .pr-roles { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
  .pr-roles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-roles-list li { font-size: 1.125rem; text-align: left; }
  .pr-shift-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 2.5rem; }
  .pr-shift-col, .pr-shift-list { display: block; grid-row: auto; }
  .pr-shift-art img { max-width: 30rem; margin-inline: auto; } /* WHY: na telefonie rycina stoi w dwóch piętrach (dziś nad zespołem przy stole), żeby postacie nie malały do miniatury; plik ma 824 px, więc na tablecie nie rośnie ponad swój rozmiar */
  .pr-kit-list li { font-size: 1.125rem; } /* WHY: w jednej kolumnie lista ma całą szerokość strony, więc wraca pełny rozmiar pisma z projektu */
  .pr-signup { padding: 1.5rem; }
  .pr-btn { width: 100%; }
  .pr-roles-field { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}