/* Wygenerowano z: dane/branding_worshipstyle.md */
:root {
  --ws-rozowy: #E71E80;
  --ws-rozowy-rgb: 231, 30, 128;
  --ws-rozowy-sredni: #EC5D9B;
  --ws-rozowy-sredni-rgb: 236, 93, 155;
  --ws-malina: #C70F58;
  --ws-malina-rgb: 199, 15, 88;
  --ws-rozowy-jasny: #F8C9DF;
  --ws-rozowy-jasny-rgb: 248, 201, 223;
  --ws-pudrowy: #F7E4E6;
  --ws-pudrowy-rgb: 247, 228, 230;
  --ws-czerwony: #E41E1A;
  --ws-czerwony-rgb: 228, 30, 26;
  --ws-turkus: #00B2C6;
  --ws-turkus-rgb: 0, 178, 198;
  --ws-granat: #1F2E63;
  --ws-granat-rgb: 31, 46, 99;
  --ws-zloty: #F5BB16;
  --ws-zloty-rgb: 245, 187, 22;
  --ws-szary: #E6E6E6;
  --ws-szary-rgb: 230, 230, 230;
}

@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-Variable.c682df9f.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Itim';src:url('fonts/Itim-Regular.f8247937.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --tekst:#2A2A33;
  --tekst-jasny:#5C5C6B;
  --tlo:#FFFFFF;
  --tresc:1000px;
  --cien:0 18px 44px rgba(var(--ws-granat-rgb),.10);
  --cien-mocny:0 26px 60px rgba(var(--ws-malina-rgb),.18);
  --nav-h:66px;          /* wysokość paska nawigacji */
  --podglad-liczb:76px;  /* ile paska z liczbami wchodzi w pierwszy ekran; 0 = zdjęcie dokładnie do dołu okna */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--tlo);color:var(--tekst);
  font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:17px;line-height:1.72;font-weight:500;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--ws-malina)}

/* ── siatka ─────────────────────────────────────────── */
.wrap{max-width:var(--tresc);margin:0 auto;padding:0 28px}
.sekcja{padding:104px 0}
.sekcja.ciasno{padding:76px 0}
.sekcja.pudrowa{background:var(--ws-pudrowy)}
.sekcja.jasna{background:#FCFAFB}
.sekcja.granatowa{background:var(--ws-granat);color:#fff}
.sekcja.granatowa .naglowek h2{color:#fff}
.sekcja.granatowa p{color:rgba(255,255,255,.86)}

/* ── typografia ─────────────────────────────────────── */
h1,h2,h3,h4{font-weight:800;line-height:1.14;letter-spacing:-.02em;margin:0 0 .5em}
h2{font-size:42px}
h3{font-size:23px;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.05em}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;
  font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ws-rozowy);
}
.eyebrow::before{content:'';width:38px;height:2px;background:var(--ws-rozowy);border-radius:2px}
.sekcja.granatowa .eyebrow{color:var(--ws-rozowy-jasny)}
.sekcja.granatowa .eyebrow::before{background:var(--ws-rozowy-jasny)}
.naglowek{max-width:720px;margin-bottom:52px}
.naglowek.srodek{margin-left:auto;margin-right:auto;text-align:center}
.naglowek.srodek .eyebrow{justify-content:center}
.naglowek p{color:var(--tekst-jasny);font-size:18px;margin-bottom:0}
.info-wstep{display:grid;grid-template-columns:1fr .95fr;gap:56px;align-items:center;margin-bottom:52px}
.info-wstep .naglowek{max-width:none;margin-bottom:0}
.info-foto{height:280px;border-radius:22px;overflow:hidden;box-shadow:var(--cien)}
.info-foto img{width:100%;height:100%;object-fit:cover;object-position:center 68%}
.podpis-itim{font-family:'Itim',cursive;font-size:26px;color:var(--ws-malina);line-height:1.5}

/* ── nawigacja ──────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(var(--ws-granat-rgb),.09);
}
.nav-in{max-width:1180px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;gap:28px}
.nav a.logo{display:flex;align-items:center;transition:opacity .18s}
.nav a.logo:hover{opacity:.72}
.nav img{height:46px;width:auto;display:block}
/* Wysokość dobrana pomiarem: napis w pliku logo zajmuje 20,1% jego wysokości,
   więc 50 px daje wersaliki ok. 10 px — tyle, ile mają wielkie litery w linkach menu (14 px). */
.nav a.logo .logo-poziom{height:50px;width:auto;object-fit:contain}
.nav-linki{display:flex;gap:26px;margin-left:auto;font-size:14px;font-weight:600}
.nav-linki a{color:var(--ws-granat);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.nav-linki a:hover{color:var(--ws-rozowy);border-color:var(--ws-rozowy)}

/* ── przyciski ──────────────────────────────────────── */
.btn{
  display:inline-block;padding:17px 38px;border-radius:999px;text-decoration:none;
  font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  background:var(--ws-rozowy);color:#fff;border:2px solid var(--ws-rozowy);
  box-shadow:0 12px 28px rgba(var(--ws-rozowy-rgb),.30);transition:transform .18s,box-shadow .18s,background .18s;
}
.btn:hover{transform:translateY(-2px);background:var(--ws-malina);border-color:var(--ws-malina);box-shadow:0 16px 34px rgba(var(--ws-malina-rgb),.34)}
.btn.duzy{padding:21px 52px;font-size:16.5px}
.btn.linia{background:transparent;color:var(--ws-rozowy);box-shadow:none}
.btn.linia:hover{background:var(--ws-rozowy);color:#fff}
.btn.biala{background:#fff;color:var(--ws-malina);border-color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.btn.biala:hover{background:var(--ws-zloty);border-color:var(--ws-zloty);color:var(--ws-granat);box-shadow:0 0 32px 6px rgba(255,255,255,.45)}
.nav .btn{padding:12px 26px;font-size:13px;box-shadow:none}
.cta-srodek{text-align:center;margin-top:48px}
.cta-nota{margin-top:14px;font-size:14px;color:var(--tekst-jasny)}

/* ── hero ───────────────────────────────────────────── */
.hero{position:relative;min-height:max(600px, calc(100vh - var(--nav-h) - var(--podglad-liczb)));display:flex;align-items:center;overflow:hidden;background:var(--ws-granat)}
.hero img.tlo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,26,54,.86) 0%,rgba(var(--ws-granat-rgb),.66) 38%,rgba(var(--ws-malina-rgb),.34) 72%,rgba(var(--ws-rozowy-rgb),.16) 100%);
}
.hero-in{position:relative;z-index:2;width:100%;color:#fff;padding:52px 0 48px}
.hero-in .wrap{max-width:var(--tresc)}
.hero .znacznik{
  display:inline-block;padding:9px 20px;border-radius:999px;margin-bottom:22px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.36);
  font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.hero h1{font-size:54px;margin-bottom:14px;text-shadow:0 2px 30px rgba(0,0,0,.22)}
.hero .haslo{font-family:'Itim',cursive;font-size:32px;color:var(--ws-rozowy-jasny);margin-bottom:26px;letter-spacing:0}
.hero .lead{font-size:16.5px;font-weight:700;margin-bottom:12px;color:rgba(255,255,255,.94)}
.hero ul{list-style:none;padding:0;margin:0 0 26px;max-width:640px}
.hero ul li{position:relative;padding-left:34px;margin-bottom:8px;color:rgba(255,255,255,.95)}
.hero ul li::before{
  content:'✦';position:absolute;left:0;top:-1px;color:var(--ws-zloty);font-size:17px;
}
.hero .puenta{font-size:20px;font-weight:800;max-width:640px;margin:0 0 28px;line-height:1.35}
.hero-akcje{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-akcje .obok{font-size:14px;color:rgba(255,255,255,.82)}

/* ── pasek liczb ────────────────────────────────────── */
.liczby{background:var(--ws-granat);color:#fff;padding:30px 0}
.liczby-siatka{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center}
.liczby .l-w{font-size:29px;font-weight:800;color:var(--ws-rozowy-jasny);line-height:1.1;font-feature-settings:"tnum"}
.liczby .l-o{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:8px;line-height:1.4}
.liczby-siatka > div + div{border-left:1px solid rgba(255,255,255,.14)}

/* ── układ tekst + zdjęcie ──────────────────────────── */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.split.odwrotnie .split-foto{order:-1}
.split-foto{position:relative}
.split-foto img{border-radius:22px;box-shadow:var(--cien);width:100%;height:100%;max-height:560px;object-fit:cover}
.split-foto::after{
  content:'';position:absolute;width:120px;height:120px;right:-18px;bottom:-18px;z-index:-1;
  background:var(--ws-rozowy-jasny);border-radius:20px;
}
.split-tekst h2{font-size:38px}
.split-tekst p{color:var(--tekst-jasny)}
/* Zespolony blok: nagłówek + akapit + zdjęcie jako jedna kompozycja */
.wstep-blok{
  display:grid;grid-template-columns:1.06fr .94fr;align-items:stretch;
  background:linear-gradient(135deg,#FCF6F8 0%,var(--ws-pudrowy) 100%);
  border-radius:28px;overflow:hidden;box-shadow:var(--cien);
}
.wstep-blok-tekst{padding:52px 46px;display:flex;flex-direction:column;justify-content:center}
.wstep-blok-tekst h2{font-size:36px;line-height:1.14;margin:0 0 18px;text-wrap:balance}
.wstep-blok-tekst p{color:var(--tekst-jasny);margin:0;text-wrap:pretty}
.wstep-blok-foto{position:relative;min-height:380px;overflow:hidden}
/* Zdjęcie wstępu odbite w poziomie (decyzja Piotra 2026-08-18). */
.wstep-blok-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;object-position:center center}

/* Blok wprowadzający sekcji WSTĘP — pełna szerokość, wyśrodkowany */
.wstep-intro{text-align:center;max-width:860px;margin:0 auto 56px}
.wstep-intro .eyebrow{justify-content:center;margin-bottom:20px}
.wstep-pytanie{
  font-weight:800;color:var(--tekst);letter-spacing:-.02em;
  font-size:30px;line-height:1.28;margin:0 0 20px;text-wrap:balance;
}
.wstep-zaproszenie{color:var(--tekst-jasny);font-size:17px;max-width:66ch;margin:0 auto 12px;text-wrap:pretty}
.wstep-opis{max-width:100%;margin:44px auto 0}
/* Wyśrodkowany blok, naturalne łamanie — bez justowania i bez dzielenia wyrazów */
.wstep-opis{text-align:center}
.wstep-opis p{color:var(--tekst-jasny);text-wrap:pretty}
.wstep-puenta{margin-top:18px;font-size:18px;color:var(--tekst) !important;text-wrap:balance}

.split.lista{align-items:start}
.split.lista .split-foto{position:sticky;top:104px}
.split.lista .split-foto img{max-height:460px}
.siatka.pelna{grid-template-columns:1fr}

/* ── karty / bento ──────────────────────────────────── */
.siatka{display:grid;gap:20px}
.siatka.k2{grid-template-columns:repeat(2,1fr)}
.siatka.k3{grid-template-columns:repeat(3,1fr)}
.karta{
  background:#fff;border:1px solid rgba(var(--ws-granat-rgb),.10);border-radius:20px;padding:26px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.karta:hover{transform:translateY(-4px);box-shadow:var(--cien);border-color:var(--ws-rozowy-jasny)}
.karta h3{font-size:18px;margin-bottom:9px}
.karta p{font-size:15px;color:#4A4A58;margin:0;line-height:1.65}
/* Ikony znormalizowane 2026-08-18: przycięte do zawartości i wyśrodkowane w kwadracie,
   dzięki czemu nie potrzebują już indywidualnych korekt translateY. Wyrównanie do GÓRY
   nagłówka — wtedy ikony stoją na tej samej wysokości niezależnie od długości tytułu. */
/* Ikona kotwiczona do rogu karty (2026-08-19): ten sam odstęp od górnej i prawej
   prawej krawędzi (17 px) w KAŻDEJ karcie. Odstęp górny podniesiony 17 -> 24 px
   (2026-08-19, pomiar w Chrome): przy 17 px środek ikony padał na 41 px, a środek
   strefy tytułu (blok o stałych 50 px + padding 28) na 53 px, więc ikona optycznie
   wisiała nad tekstem. Wartości 24 px i 30 px sprawdzone renderem — 30 px spychało
   ikonę pod linię tytułu, 24 px trzyma ją równo z pierwszym wersem.
   Dzięki wyjęciu z flow tytuł 1- i 2-wersowy nie przesuwa już ikony. */
.karta-z-ikona{position:relative}
.karta-naglowek{display:flex;align-items:center;gap:14px;margin-bottom:9px}
.karta-naglowek h3{margin:0;order:1;flex:1 1 auto}
/* Miejsce pod ikonę rezerwuje pływający „klin” wysoki na dwa wersy — dzięki temu
   dopiero trzeci wers tytułu korzysta z pełnej szerokości karty (2026-08-19). */
.karta-naglowek h3::before{display:none}
.ikona-kursu{order:2;flex:0 0 46px;width:46px;height:46px;object-fit:contain;margin-block:-23px}

/* Karty z ikoną w siatce „rowne" (2026-08-18): wysokość nagłówka wyrównana w rzędzie
   subgridem, więc akapity w sąsiednich kartach zaczynają się na tym samym poziomie
   i kolejne wersy trzymają wspólną linię bazową. */
.siatka.rowne .karta{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start;row-gap:0}
/* Sekcja „Zyskasz" (2026-08-19): tytuły mają od 2 do 6 wersów, więc ikona centrowana
   na CAŁYM napisie lądowała za każdym razem gdzie indziej (zmierzone środki: 20,5 / 30,8
   / 41,0 px). Tutaj kotwiczymy ją na styku pierwszego i drugiego wersu — stała wysokość
   dla wszystkich 9 kafelków. W sekcji „Co dostaniesz" ta reguła NIE obowiązuje: są tam
   tytuły jednowersowe, dla których taka kotwica wypadłaby pod tekstem. */
.siatka.rowne .karta-naglowek{position:relative}
.siatka.rowne .ikona-kursu{position:absolute;right:0;top:20px;transform:translateY(-50%);margin-block:0}
/* Pływający klin rezerwuje miejsce pod ikonę w dwóch pierwszych wersach — ikona jest
   wyjęta z flow, więc bez niego tekst wszedłby pod nią. */
.siatka.rowne .karta-naglowek h3::before{content:"";display:block;float:right;width:60px;height:44px}
.siatka.rowne .karta-naglowek{align-self:start;margin-bottom:12px}
.siatka.rowne .karta p{margin:0}
@supports not (grid-template-rows:subgrid){
  .siatka.rowne .karta{display:block}
  .siatka.rowne .karta-naglowek{min-height:76px}
}
/* Optyczne wyśrodkowanie piktogramów względem nagłówków. */
.karta .nr{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:16px;
  border-radius:11px;background:var(--ws-pudrowy);color:var(--ws-malina);font-size:13px;font-weight:800;
}

/* Kroki „Jak wygląda Kurs" (2026-08-18): numer w jednej linii z tytułem, a wysokość
   nagłówków wyrównana w rzędzie subgridem — dzięki temu akapity w sąsiednich kartach
   startują na tym samym poziomie niezależnie od długości tytułu. */
.krok-glowa{display:flex;align-items:center;gap:12px;margin-bottom:10px;align-self:start}
.krok-glowa .nr{margin-bottom:0;flex:0 0 34px}
.krok-glowa h3{margin:0}
/* row-gap:0 — subgrid dziedziczy odstęp siatki (20 px) także między wierszami karty,
   przez co akapit odjeżdżał od nagłówka. Odstęp daje tu margines .krok-glowa. */
.siatka.kroki .karta{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start;row-gap:0}
.siatka.kroki .karta-foto{grid-row:span 2;display:block}
@supports not (grid-template-rows:subgrid){
  .siatka.kroki .karta{display:block}
  .krok-glowa{min-height:58px;align-items:center}
}
.karta-foto{min-height:280px;padding:0;overflow:hidden}
.karta-foto img{width:100%;height:100%;object-fit:cover}
/* W siatce „Co dostaniesz” wysokość zdjęcia dopasowuje się do treści sąsiednich kart. */
.karty-dopasowane .karta-foto{min-height:0}
.karta-foto-ostatnia img{transform:scale(1.12);transform-origin:center bottom}
/* Kafelek ze zdjęciem poziomym: wypełnia wysokość wiersza, kadr przycięty po bokach
   (decyzja Piotra 2026-08-18). */
.karta-foto-pozioma img{object-position:center 42%}
/* Kafelek niski: zdjęcie poziome w całości, karta nie rozciąga się na wiersz. */
.karta-foto-niska{align-self:start;aspect-ratio:3/2;min-height:0}
/* Zdjęcie w siatce kroków: gdy kadr jest wyższy niż kafelek, obcinamy GÓRĘ,
   nigdy boków ani dołu (kadr Piotra 2026-08-18). */
.siatka.kroki .karta-foto img{object-position:center bottom}

/* grupa „co zyskasz” */
.grupa{margin-bottom:56px}
.grupa:last-child{margin-bottom:0}
.grupa-tytul{display:flex;align-items:baseline;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--ws-rozowy-jasny)}
.grupa-tytul .nr-duzy{font-size:15px;font-weight:800;color:var(--ws-rozowy);letter-spacing:.1em}
.grupa-tytul h3{font-size:27px;margin:0}
.grupa-zyskasz-4 .siatka{grid-template-columns:repeat(2,1fr)}


/* ── listy tak / nie ────────────────────────────────── */
.dwie-listy{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.lista-box{background:#fff;border-radius:22px;padding:32px 30px;border:1px solid rgba(var(--ws-granat-rgb),.10)}
.lista-box.nie{background:#FBFBFC}
.lista-box h3{font-size:19px;margin-bottom:20px}
.lista-box.tak h3{color:var(--ws-rozowy)}
.lista-box.nie h3{color:var(--tekst-jasny)}
.lista-box ul{list-style:none;padding:0;margin:0}
.lista-box li{position:relative;padding-left:32px;margin-bottom:13px;font-size:15.5px;line-height:1.6}
.lista-box.tak li::before{content:'✓';position:absolute;left:0;top:0;color:var(--ws-rozowy);font-weight:800}
.lista-box.nie li::before{content:'✕';position:absolute;left:0;top:0;color:#B9B9C4;font-weight:800}
.lista-lub{margin:20px 0 6px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ws-rozowy)}

/* lista „dzięki kursowi” / „podsumujmy” */
.lista-strzalki{list-style:none;padding:0;margin:0}
.lista-strzalki li{position:relative;padding-left:34px;margin-bottom:14px;line-height:1.62}
.lista-strzalki li::before{content:'→';position:absolute;left:0;top:0;color:var(--ws-rozowy);font-weight:800}
.lista-2kol{columns:2;column-gap:44px}
.lista-2kol li{break-inside:avoid}

/* ── wideo ──────────────────────────────────────────── */
.wideo{position:relative;padding-top:56.25%;border-radius:22px;overflow:hidden;box-shadow:var(--cien);background:#000}
.wideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.przypis{max-width:820px;margin:28px auto 0;font-size:12px;line-height:1.6;color:var(--tekst-jasny);text-align:center}

.fasada{position:relative;padding-top:56.25%;border-radius:22px;overflow:hidden;
  box-shadow:var(--cien);background:#111;cursor:pointer;border:0;padding-left:0;padding-right:0;width:100%;display:block}
.fasada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s,filter .3s;filter:saturate(.96)}
.fasada:hover img{transform:scale(1.04);filter:saturate(1.05)}
.fasada::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--ws-granat-rgb),.10),rgba(var(--ws-granat-rgb),.45))}
.fasada .play{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:var(--ws-rozowy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(var(--ws-rozowy-rgb),.5);transition:transform .2s,background .2s;
}
.fasada:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--ws-malina)}
.fasada .play::before{content:'';border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}

/* ── prowadzący ─────────────────────────────────────── */
.prowadzacy-maria{margin-bottom:22px}
.osoby{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.osoba{background:#fff;border:1px solid rgba(var(--ws-granat-rgb),.10);border-radius:22px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.osoba:hover{transform:translateY(-4px);box-shadow:var(--cien)}
.osoba .foto{aspect-ratio:3/4;overflow:hidden;background:var(--ws-pudrowy)}
.osoba .foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
/* Nowe zdjęcie Marii jest poziome 3:2 — karta pokazuje je w całości (Piotr 2026-08-18). */
.osoba-maria .foto{aspect-ratio:3/2}
.osoba-maria .foto img{object-position:center center}
.osoba .tresc{padding:24px 24px 26px}
.osoba h3{font-size:19px;margin-bottom:6px}
.osoba .rola{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-rozowy);margin-bottom:16px}
.osoba ul{list-style:none;padding:0;margin:0}
.osoba li{position:relative;padding-left:18px;margin-bottom:9px;font-size:14px;line-height:1.58;color:var(--tekst-jasny)}
.osoba li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--ws-rozowy-jasny)}
.osoba details summary{cursor:pointer;list-style:none;margin-top:12px;font-size:13px;font-weight:800;color:var(--ws-malina);letter-spacing:.04em}
.osoba details summary::-webkit-details-marker{display:none}
.osoba details[open] summary{margin-bottom:12px}

.osoby > .osoba:nth-child(7):last-child{grid-column:2}

/* ── opinie ─────────────────────────────────────────── */
.opinie{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.opinia{
  background:#fff;border-radius:22px;padding:32px 28px;border:1px solid rgba(var(--ws-granat-rgb),.10);position:relative;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.opinia:hover{transform:translateY(-4px);box-shadow:var(--cien);border-color:var(--ws-rozowy-jasny)}
.opinia::before{content:'„';position:absolute;top:-10px;left:22px;font-size:76px;color:var(--ws-rozowy-jasny);font-family:Georgia,serif;line-height:1}
.opinia p{position:relative;font-size:15px;line-height:1.68;color:var(--tekst);margin:22px 0 18px}
.opinia .kto{font-size:13.5px;font-weight:800;color:var(--ws-malina);letter-spacing:.03em}
.opinie-wideo{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.opinie-wideo .kto{margin-top:12px;font-size:13.5px;font-weight:800;color:var(--ws-malina);text-align:center}
.opinie-wideo-nowe{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:560px;margin:0 auto 30px}
.opinie-wideo-nowe .kto{margin-top:12px;font-size:13.5px;font-weight:800;color:var(--ws-malina);text-align:center}

br.lam-m{display:none}
.lam-m-sp{display:inline;font-style:normal}
.faq-foto{display:none}

/* ── akordeony ──────────────────────────────────────── */
.akordeon{border-top:1px solid rgba(var(--ws-granat-rgb),.12)}
.akordeon details{border-bottom:1px solid rgba(var(--ws-granat-rgb),.12)}
.akordeon summary{
  cursor:pointer;list-style:none;padding:22px 48px 22px 0;position:relative;
  font-weight:700;font-size:17px;color:var(--ws-granat);transition:color .18s;
}
.akordeon summary::-webkit-details-marker{display:none}
.akordeon summary:hover{color:var(--ws-rozowy)}
.akordeon summary::after{
  content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:400;color:var(--ws-rozowy);transition:transform .22s;
}
.akordeon details[open] summary::after{content:'–'}
.akordeon .tresc{padding:0 48px 26px 0;color:var(--tekst-jasny);font-size:15.5px}
.akordeon .tresc p:last-child{margin-bottom:0}
.akordeon .tresc ul,.akordeon .tresc ol{margin:0 0 1em;padding-left:22px}
.akordeon .tresc li{margin-bottom:7px}
.tabela-harmonogram-wrap{overflow-x:auto;margin:14px 0 20px;border-radius:14px;box-shadow:var(--cien)}
.tabela-harmonogram{border-collapse:collapse;width:100%;min-width:600px;font-size:13.5px}
.tabela-harmonogram th{background:var(--ws-rozowy);color:#fff;padding:11px 14px;text-align:left;font-weight:800;font-size:12.5px;letter-spacing:.02em}
.tabela-harmonogram th:not(:first-child){text-align:center}
.tabela-harmonogram td{padding:9px 14px;border-bottom:1px solid rgba(var(--ws-granat-rgb),.10);vertical-align:middle;background:#fff}
.tabela-harmonogram tbody tr:nth-child(even) td{background:var(--ws-rozowy-jasny)}
.tabela-harmonogram td.tytul{font-weight:700;color:var(--ws-granat)}
.tabela-harmonogram td:not(.tytul){text-align:center}
.modul-nr{display:inline-block;min-width:158px;padding-right:18px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ws-rozowy)}

/* ── terminy ────────────────────────────────────────── */
.terminy-wstep{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-bottom:52px}
.terminy-wstep .naglowek{margin-bottom:0}
.terminy-foto{height:250px;border-radius:22px;overflow:hidden;box-shadow:var(--cien)}
.terminy-foto img{width:100%;height:100%;object-fit:cover}
.terminy{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:28px}
.termin{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px dashed rgba(var(--ws-granat-rgb),.18);font-size:15.5px}
.termin b{color:var(--ws-granat);white-space:nowrap}
.termin span{color:var(--tekst-jasny);text-align:right}
.noty{font-size:14px;color:var(--tekst-jasny);line-height:1.65}
.noty p{margin-bottom:.7em}

/* ── cena ───────────────────────────────────────────── */
.cena-box{
  --odstep-ceny:36px;
  background:linear-gradient(135deg,#41558F 0%,#664275 52%,var(--ws-rozowy) 100%);
  color:#fff;border-radius:28px;padding:56px 56px 52px;box-shadow:var(--cien-mocny);text-align:center;
}
.cena-box h2{max-width:820px;font-size:48px;line-height:1.08;color:#fff;margin:0 auto 10px}
.cena-box .edycja{font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ws-rozowy-jasny);margin-bottom:var(--odstep-ceny)}
.cena-kwoty{display:flex;align-items:baseline;justify-content:center;gap:20px;margin-bottom:10px}
.cena-nowa{font-size:76px;font-weight:800;letter-spacing:-.03em;line-height:1}
.cena-nowa span{font-size:32px;font-weight:700;margin-left:6px}
.cena-komunikat{display:grid;gap:4px;margin:0 auto 18px;font-size:16px;line-height:1.45;color:rgba(255,255,255,.86)}
.cena-raty{font-size:20px;color:rgba(255,255,255,.9);margin-bottom:6px}
.cena-raty b{color:var(--ws-zloty)}
.cena-info{font-size:16px;color:rgba(255,255,255,.78);margin-bottom:0}
.cena-box .btn{margin-top:0}
.opinie-nota{
  max-width:760px;margin:34px auto 0;text-align:center;
  font-size:13px;line-height:1.6;color:var(--tekst-jasny);
}
.cena-drobne{margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.6)}
.cena-drobne span{display:block}
.cena-plusy{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:0;padding:var(--odstep-ceny) 0}
.cena-plus{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:10px 20px;font-size:13.5px;font-weight:600;
}
.licznik{display:flex;justify-content:center;gap:14px;margin:0 0 var(--odstep-ceny)}
.licznik div{background:linear-gradient(135deg,var(--ws-rozowy) 0%,var(--ws-malina) 100%);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:14px 20px;min-width:94px;box-shadow:0 10px 24px rgba(95,11,55,.20)}
.licznik b{display:block;font-size:36px;font-weight:800;line-height:1.1;font-feature-settings:"tnum"}
.licznik span{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.licznik-tytul{font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--ws-rozowy-jasny);margin-bottom:14px}

/* ── newsletter i stopka ────────────────────────────── */
.newsletter{background:var(--ws-pudrowy);padding:76px 0}
.newsletter .wrap{text-align:center}
.newsletter h2{font-size:34px;margin-bottom:6px}
.newsletter .podpis-itim{margin-bottom:18px;display:block}
.newsletter p{color:var(--tekst-jasny);max-width:560px;margin:0 auto 28px}
.nl-form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.nl-form input{
  padding:15px 22px;border-radius:999px;border:1px solid rgba(var(--ws-granat-rgb),.16);
  font-family:inherit;font-size:15px;min-width:220px;background:#fff;
}
.nl-form input:focus{outline:2px solid var(--ws-rozowy);outline-offset:1px}
.nl-form button{cursor:pointer;font-family:inherit}
.nl-zgoda{font-size:12px;color:var(--tekst-jasny);max-width:680px;margin:0 auto;line-height:1.55}

footer{background:var(--ws-granat);color:rgba(255,255,255,.72);padding:56px 0 44px;font-size:14px}
footer .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
footer img{height:56px;width:auto;opacity:.95}
footer .linki{margin-left:auto;display:flex;gap:24px}
footer a{color:rgba(255,255,255,.86);text-decoration:none}
footer a:hover{color:var(--ws-rozowy-jasny)}
footer .prawa{width:100%;padding-top:24px;margin-top:8px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.5)}

/* ── wejścia ────────────────────────────────────────── */
.wjazd{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.wjazd.widoczne{opacity:1;transform:none}

/* ── kafelki zwijane (na telefonie akordeon, na desktopie zwykła karta) ──
   Znacznik <details> jest w HTML zawsze, ale poza telefonem treść trzymamy
   widoczną wymuszonym display:block, a nagłówek jest nieklikalny — dzięki temu
   widok na komputerze nie zmienia się ani o piksel (Piotr, 2026-08-19). */
/* Kafelki są w HTML otwarte (atrybut open) — zamknięty <details> Chrome chowa
   przez content-visibility, więc wymuszanie widoku CSS-em nie działa. Zwijanie
   włącza skrypt wyłącznie na telefonie; poza telefonem summary jest nieklikalne. */
.zwijana > summary{list-style:none;cursor:default;pointer-events:none;-webkit-user-select:auto}
.zwijana > summary::-webkit-details-marker{display:none}

/* Miękkie łamanie wersu w nagłówkach: na desktopie łamie jak <br>,
   na telefonie zamienia się w zwykłą spację (patrz miekkie_lamanie w zbuduj.py). */
.lam-sp{display:none}

/* Sygnet logo i przycisk rozwijanego menu — wyłącznie telefon.
   Poza telefonem w pasku stoi logo poziome i zwykłe linki. */
.nav .logo-znak{display:none}
.menu-przycisk{display:none}

/* ── responsywność ─────────────────────────────────── */
@media (max-width:900px){
  .wrap{padding-left:22px;padding-right:22px}
  .sekcja{padding:80px 0}
  .sekcja.ciasno{padding:60px 0}
  .nav-in{padding-left:20px;padding-right:20px;gap:16px}
  .nav-linki{gap:16px;font-size:13px}
  .nav .btn{padding:11px 18px;font-size:12px}

  .liczby-siatka{grid-template-columns:repeat(4,1fr)}
  .split,.terminy-wstep{grid-template-columns:1fr;gap:36px}
  .info-wstep{grid-template-columns:1fr;gap:36px}
  .wstep-blok{grid-template-columns:1fr}
  .wstep-blok-foto{min-height:300px}
  /* wersy ustawione pod desktop — na wąskim ekranie łamiemy naturalnie */
  .wstep-opis br{display:none}
  .split.odwrotnie .split-foto{order:initial}
  .split.lista .split-foto{position:static}
  .osoba-maria .foto{aspect-ratio:2/1}
  .siatka.k3,.osoby,.opinie,.opinie-wideo{grid-template-columns:repeat(2,1fr)}
  .osoby > .osoba:nth-child(7):last-child{grid-column:auto}
  .terminy-wstep{margin-bottom:38px}
}

@media (max-width:640px){
  .wrap{padding-left:18px;padding-right:18px}
  .sekcja{padding:64px 0}
  h1{font-size:40px}
  h2,.split-tekst h2{font-size:32px}
  .wstep-pytanie{font-size:24px}
  .wstep-intro{margin-bottom:40px}
  .wstep-opis{margin-top:32px}
  .wstep-blok-tekst{padding:34px 26px}
  .wstep-blok-tekst h2{font-size:30px}
  .naglowek{margin-bottom:36px}
  .naglowek p{font-size:16px}

  /* [2] Pasek górny: sygnet, przycisk menu na środku, przycisk zapisu.
     Menu rozwija się pod paskiem — kotwice do wszystkich sekcji. */
  .nav-in{padding:8px 16px;gap:10px;position:relative;justify-content:space-between}
  .nav a.logo .logo-poziom{display:none}
  .nav .logo-znak{display:block;height:48px;width:auto}
  .menu-przycisk{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:52px;height:44px;padding:0 12px;
    /* Równe marginesy auto = przycisk siada dokładnie w połowie odstępu
       między logo a guzikiem zapisu (Piotr 2026-08-19). Środek paska
       wypadał za blisko guzika i łatwo było kliknąć nie w to. */
    margin:0 auto;
    background:transparent;border:0;cursor:pointer;
  }
  .menu-przycisk span{display:block;height:3px;border-radius:2px;background:var(--ws-rozowy);transition:transform .2s,opacity .2s}
  .menu-przycisk[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-przycisk[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-przycisk[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .nav-linki{
    display:block;position:absolute;left:0;right:0;top:100%;margin:0;
    background:#fff;border-bottom:1px solid rgba(var(--ws-granat-rgb),.10);
    box-shadow:0 18px 34px rgba(var(--ws-granat-rgb),.14);
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s ease,visibility .25s;
  }
  .nav-linki.otwarte{max-height:70vh;overflow-y:auto;visibility:visible}
  .nav-linki a{
    display:flex;align-items:center;min-height:52px;padding:0 22px;
    font-size:16px;font-weight:600;border-bottom:1px solid rgba(var(--ws-granat-rgb),.08);border-left:0;
  }
  .nav-linki a:last-child{border-bottom:0}
  .nav-linki a:hover{border-color:rgba(var(--ws-granat-rgb),.08);background:var(--ws-pudrowy)}
  .nav .btn{padding:12px 18px;font-size:11.5px;flex:0 0 auto}

  .hero{min-height:620px}
  .hero h1{font-size:40px}
  .hero .haslo{font-size:27px}
  .hero-akcje .btn{width:100%;text-align:center}

  .liczby-siatka{grid-template-columns:repeat(2,1fr);gap:16px 8px}
  .liczby-siatka > div + div{border-left:0}
  .siatka.k2,.siatka.k3,.osoby,.opinie,.opinie-wideo,.opinie-wideo-nowe,.dwie-listy,.grupa-zyskasz-4 .siatka{grid-template-columns:1fr}
  .opinie-wideo-nowe{max-width:320px}
  .osoba-maria .foto{aspect-ratio:3/2}
  .karta{padding:22px}
  .ikona-kursu{flex:0 0 42px;width:42px;height:42px;margin-block:-21px}
  .karta-naglowek{min-height:0}
  .karta-naglowek h3::before{width:54px;height:32px}
  .lista-2kol{columns:1}
  .termin{flex-direction:column;gap:2px}
  .termin span{text-align:left}
  .modul-nr{display:block;min-width:0;padding:0 0 6px}

  .cena-box{padding:38px 20px 34px;border-radius:22px}
  .cena-box h2{font-size:36px}
  .cena-nowa{font-size:60px}
  .licznik{flex-wrap:wrap;gap:10px}
  .licznik div{min-width:76px;padding:12px 14px}
  .licznik b{font-size:30px}
  .cena-plus{border-radius:18px;text-align:center}
  .btn.duzy{padding:18px 26px;font-size:14px}

  /* [1] Nagłówek hero mieści się w trzech wersach (Piotr 2026-08-19). */
  .hero h1{font-size:33px}
  .hero .haslo{font-size:24px}

  /* [2] Pasek liczb schodzi z telefonu — na desktopie zostaje. */
  .liczby{display:none}

  /* [3,4,7] Kafelki zwijane: widać sam nagłówek z ikoną, treść po dotknięciu. */
  .zwijana{padding:0}
  .zwijana > summary{
    cursor:pointer;pointer-events:auto;display:flex;align-items:center;gap:14px;
    min-height:0;padding:16px 38px 16px 18px;margin:0;position:relative;
  }
  .zwijana > summary h3{font-size:15.5px;line-height:1.32;margin:0;text-wrap:balance}
  .zwijana > summary::after{
    content:'+';position:absolute;right:14px;top:50%;transform:translateY(-50%);
    font-size:24px;font-weight:400;color:var(--ws-rozowy);line-height:1;
  }
  .zwijana[open] > summary::after{content:'\2013'}
  .zwijana > p{padding:0 20px 16px;margin:0}
  .zwijana[open]{border-color:var(--ws-rozowy-jasny);box-shadow:var(--cien)}
  /* w trybie zwijanym ikona stoi w wierszu nagłówka, nie w rogu karty */
  /* Selektor MUSI być co najmniej tak szczegółowy jak `.siatka.rowne .ikona-kursu`
     (trzy klasy, wyżej w pliku) — inaczej ikona zostaje `position:absolute`
     w prawym rogu karty i nachodzi na znak „+". Późniejsza pozycja w pliku
     nie wystarcza, gdy specyficzność jest niższa (Piotr 2026-08-19). */
  .zwijana .ikona-kursu,
  .siatka.rowne .zwijana .ikona-kursu,
  .siatka.kroki .zwijana .ikona-kursu{position:static;flex:0 0 34px;width:34px;height:34px;
    margin-block:0;transform:none}   /* transform TEŻ trzeba cofnąć: samo position:static
       zostawiało translateY(-50%) z wersji desktopowej i podnosiło ikonę o 17 px */
  .zwijana .karta-naglowek{min-height:0;margin:0}
  /* Klin rezerwujący miejsce pod ikonę też musi zniknąć w akordeonie — i tak jak
     przy .ikona-kursu selektor MUSI dorównać `.siatka.rowne .karta-naglowek h3::before`
     (0,3,2), inaczej klin zostaje, rozpycha wiersz nagłówka i wypycha ikonę
     do pierwszego wersu zamiast na środek (pomiar Chrome 2026-08-19). */
  .zwijana .karta-naglowek h3::before,
  .siatka.rowne .zwijana .karta-naglowek h3::before,
  .siatka.kroki .zwijana .karta-naglowek h3::before{display:none}
  .zwijana .krok-glowa{margin:0}
  .zwijana .krok-glowa .nr{flex:0 0 30px;width:30px;height:30px;margin:0}
  /* subgrid wyrównywał wysokości w rzędach — w akordeonie nie ma czego wyrównywać */
  .siatka.rowne .karta,.siatka.kroki .karta{display:block;grid-row:auto}
  .siatka.rowne .karta-naglowek{min-height:0}
  .siatka{gap:12px}

  /* [5] Różowy kwadrat pod zdjęciem nie dotyka krawędzi ekranu. */
  .split-foto::after{width:88px;height:88px;right:10px;bottom:-12px}

  /* [6] Zdjęcia w kafelkach wypełniają kafelek po brzegi — reguła .karta
     (padding 24/22 px) nie może ich obejmować. */
  .karta-foto{padding:0;min-height:0;aspect-ratio:3/2}
  .karta-foto img{width:100%;height:100%;object-fit:cover}
  .karta-foto-niska{aspect-ratio:3/2}

  /* Miękkie łamanie = spacja; nagłówki łamią się naturalnie. */
  br.lam{display:none}
  .lam-sp{display:inline;font-style:normal}

  /* [1] Kafelek zwijany bez zapasu pod tekstem — regułę marginesu z siatki
     „rowne" (12 px) trzeba przebić własną, bardziej szczegółową. */
  .siatka.rowne .zwijana > summary,.siatka.kroki .zwijana > summary{margin:0}

  /* [6] Nazwa Kursu w bloku ceny łamie się dokładnie jak w hero. */
  .cena-box h2{font-size:33px}

  /* [5] Opinie na przemian: tekst — film — tekst — film… */
  .opinie-splot{display:grid;gap:20px}
  .opinie-splot > .opinie,.opinie-splot > .opinie-wideo{display:contents}
  .opinie-splot .opinia:nth-child(1){order:1}
  .opinie-splot .opinie-wideo > div:nth-child(1){order:2}
  .opinie-splot .opinia:nth-child(2){order:3}
  .opinie-splot .opinie-wideo > div:nth-child(2){order:4}
  .opinie-splot .opinia:nth-child(3){order:5}
  .opinie-splot .opinie-wideo > div:nth-child(3){order:6}
  /* podpis pod filmem w tej samej osi co podpis w karcie z tekstem
     (karta ma padding 28 px + 1 px obramowania) */
  .opinie-wideo .kto{text-align:left;padding-left:29px}

  /* [FAQ] zdjęcie z sekcji Regulamin pokazujemy dopiero pod pytaniami FAQ */
  #regulamin .info-wstep .info-foto{display:none}
  .faq-foto{display:block;margin-top:28px;border-radius:22px;overflow:hidden;height:210px}
  .faq-foto img{width:100%;height:100%;object-fit:cover;display:block}

  /* [5,6] W sekcjach „Regulamin" i „FAQ" zdjęcie otwiera sekcję. */
  .info-wstep.foto-nad{display:flex;flex-direction:column;align-items:stretch;gap:28px}
  .info-wstep.foto-nad .info-foto{order:-1;height:210px}
  /* łamanie wersów w tytule ustawione pod desktop — na telefonie łamiemy naturalnie */
  .info-wstep.foto-nad .naglowek h2 br{display:none}

  /* [8] Maria dostaje pionowy kadr, jak pozostałe portrety. */
  .osoba-maria .foto{aspect-ratio:3/4}
  .osoba-maria .foto img{object-position:center 18%}

  /* [9] „Czytaj więcej" jako pełnowymiarowy przycisk (44 px). */
  .osoba details summary{
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;margin-top:16px;padding:10px 18px;
    border:1.5px solid var(--ws-rozowy);border-radius:999px;
    font-size:14px;color:var(--ws-rozowy);
  }
  .osoba details[open] summary{margin-bottom:14px}

  /* [10] Licznik promocji: cztery kafelki w jednym rzędzie. */
  .licznik{flex-wrap:nowrap;gap:7px}
  .licznik div{flex:1 1 0;min-width:0;padding:11px 4px;border-radius:12px}
  .licznik b{font-size:25px}
  .licznik span{font-size:9px;letter-spacing:.06em}
  .licznik-tytul{font-size:14px;letter-spacing:.1em}

  /* [11] Klauzula Omnibus czytelna: 13 px zamiast 12,5. */
  .cena-drobne{font-size:13px;line-height:1.55;color:rgba(255,255,255,.72)}
  .cena-info,.cena-komunikat{font-size:15px}
  br.lam-m{display:inline}
  .lam-m-sp{display:none}
  /* równe wersy — koniec z jednym słowem samotnym w ostatnim wierszu */
  .cena-raty,.cena-komunikat span,.cena-info,.cena-drobne span,.licznik-tytul,
  .cena-plus{text-wrap:balance}
  .opinie-nota{font-size:13px}

  /* [12] Stopka: logo, linki jako pełne przyciski, dane firmy na końcu. */
  footer{padding:44px 0 36px}
  footer .wrap{flex-direction:column;align-items:center;text-align:center;gap:18px}
  footer img{height:48px}
  footer .linki{margin-left:0;flex-direction:column;width:100%;gap:10px}
  footer .linki a{
    display:flex;align-items:center;justify-content:center;min-height:46px;
    padding:12px 18px;border:1px solid rgba(255,255,255,.20);border-radius:999px;
    font-weight:600;font-size:15px;
  }
  footer .prawa{text-align:center;font-size:12.5px;line-height:1.7;margin-top:0}

}

@media (prefers-reduced-motion:reduce){
  .wjazd{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}