/* ===== Muzyka dla Laika — wspólny silnik CSS ===== */
:root{
  --ms-ink:#0F1116;         /* chłodna prawie-czerń */
  --ms-ink-2:#171A22;
  --ms-ink-3:#22262F;
  --ms-violet:#8177F5;      /* akcent główny */
  --ms-violet-tekst:#5449CC; /* fiolet jako TEKST i jako tło pod białym tekstem: 6,56:1 na białym, 5,86:1 na piasku */
  --ms-violet-2:#6055D6;
  --ms-violet-lt:#B3ACFA;
  --ms-sand:#F0A93B;        /* akcent ciepły: tła przycisków, akcenty graficzne, tekst na ciemnym */
  --ms-sand-tekst:#8A4F00;  /* ten sam akcent jako TEKST na jasnym tle (5,9:1; sam #F0A93B ma 1,8:1) */
  --ms-paper:#F4F2EC;       /* jasny len */
  --ms-white:#FBFAF7;
  --ms-text:#191C23;
  --ms-muted:#5B616E;
  --ms-line:rgba(15,17,22,.10);
  --radius:14px;
}
*{box-sizing:border-box}
/* Przeglądarka nadaje <figure> margines 1em 40px. Bez tego resetu karty ze zdjęciami były o 80 px
   węższe od swojej kolumny siatki i sprawiały wrażenie trzech wąskich pasków z wielkimi odstępami
   (zgłoszenie Michała, 08.09.2026). Podpisy i marginesy sekcji ustawiamy w regułach niżej. */
figure{margin:0}
/* [hidden] musi wygrywać z autorskim display, inaczej element z display:flex albo grid nadal zajmuje
   miejsce po ustawieniu atrybutu. Złapane 08.09.2026 na kartach filmoteki: schowane karty dalej miały
   672 px wysokości i strona urosła zamiast zmaleć. */
[hidden]{display:none!important}
html{color-scheme:only light}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* 13.09 (CLS, zgłoszenie EDYCJA): miejsce na nagłówek budowany skryptem zarezerwowane przed jego wstawieniem */
body:not(.ms-head-ready){padding-top:124px}
body{
  margin:0;
  font-family:'DM Sans','DM Sans Fallback',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ms-text);
  background:var(--ms-paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.62;
  font-size:16.5px;
}
h1,h2,h3,h4{font-family:'DM Sans','DM Sans Fallback',Georgia,serif;letter-spacing:-.015em;line-height:1.18;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block} /* 13.09 (TESTY P1): height:auto, bo atrybuty width/height rozciągały obrazy skalowane przez CSS */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ms-violet);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- header / nav ---- */
/* ===== Nagłówek w stylu devstyle (dwa wiersze) ===== */
header.ms-head{position:sticky;top:0;z-index:60;background:var(--ms-ink);border-bottom:1px solid rgba(255,255,255,.09)}

/* wiersz 1: logo · wyszukiwarka · Kontakt/Konto/CTA */
.ms-headrow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px;max-width:1180px;margin:0 auto}
.ms-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;min-height:44px;box-sizing:border-box}
.ms-logo svg{width:26px;height:26px;flex:none}
.ms-logo .word{display:flex;flex-direction:column;line-height:1.05}
.ms-logo .word b{font-family:'DM Sans','DM Sans Fallback',sans-serif;font-size:24px;letter-spacing:-.02em;color:#FBFAF7;font-weight:700}
.ms-logo .word b em{font-style:normal;color:var(--ms-violet-lt)}
.ms-logo .word i{font-style:normal;font-size:12px;letter-spacing:.04em;
  color:rgba(251,250,247,.80);margin-top:4px;font-weight:500;white-space:nowrap;
  font-family:'DM Sans','DM Sans Fallback',sans-serif}

/* wyszukiwarka kliencka */

/* prawy klaster */
.ms-corner{display:flex;align-items:center;gap:10px;flex:none}
.ms-corner-link,.ms-konto{display:flex;align-items:center;gap:6px;min-height:44px;box-sizing:border-box;color:rgba(251,250,247,.82);text-decoration:none;
  font-size:14px;font-weight:500;padding:8px 10px;border-radius:9px;white-space:nowrap}
.ms-corner-link:hover,.ms-konto:hover{background:rgba(255,255,255,.08);color:#fff}
.ms-corner-link.here,.ms-konto.here{color:#fff;font-weight:700}
/* 19.09 (pakiet B, B1): Konto jako mała ikonka bez napisu (nazwa w aria-label i title) */
.ms-konto{padding:8px;min-width:44px;justify-content:center}
.ms-cta{background:var(--ms-violet-2)!important;color:#fff!important;font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:10px;text-decoration:none;white-space:nowrap;border:none;display:inline-block;min-height:44px;box-sizing:border-box}
.ms-cta:hover{background:var(--ms-violet)!important;color:#fff!important}

/* wiersz 2: chipy kategorii */
.ms-chips{max-width:1180px;margin:0 auto;padding:0 24px 12px;display:flex;gap:8px;flex-wrap:wrap}
.ms-chip{position:relative}
.ms-chip>button{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#FBFAF7;font-family:inherit;font-size:14.5px;font-weight:600;padding:9px 16px;min-height:44px;box-sizing:border-box;border-radius:999px;cursor:pointer;white-space:nowrap}
.ms-chip>button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.ms-chip>button .ms-cnt{font-size:11.5px;color:var(--ms-violet-lt);font-family:'JetBrains Mono',monospace;font-weight:500}
.ms-chip>button .ms-car{opacity:.6;font-size:11px}
.ms-chip>button.here{border-color:var(--ms-violet)}
/* 26.09 (S3): pozycja menu bez rozwijania („Narzędzia”), wygląda jak pozostałe chipy */
.ms-chip>a.ms-chip-link{display:flex;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#FBFAF7;font-family:inherit;font-size:14.5px;font-weight:600;line-height:normal;padding:9px 16px;min-height:44px;box-sizing:border-box;border-radius:999px;text-decoration:none;white-space:nowrap}
.ms-chip>a.ms-chip-link:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.ms-chip>a.ms-chip-link.here{border-color:var(--ms-violet)}
.ms-chip.open>button{background:var(--ms-violet-2);border-color:var(--ms-violet-2)}
.ms-chip.open>button .ms-cnt{color:rgba(255,255,255,.78)}

/* chip z własną stroną (D75, np. „Edycja jesienna"): nazwa = link, strzałka osobno rozwija skróty */
.ms-chip.ms-chip-split{display:flex;align-items:stretch;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:999px}
.ms-chip.ms-chip-split:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.ms-chip.ms-chip-split .ms-chip-name{display:flex;align-items:center;color:#FBFAF7;font-family:inherit;
  font-size:14.5px;font-weight:600;padding:9px 6px 9px 16px;min-height:44px;box-sizing:border-box;white-space:nowrap;text-decoration:none;border-radius:999px 0 0 999px}
.ms-chip.ms-chip-split .ms-chip-name.here{color:var(--ms-violet-lt)}
.ms-chip.ms-chip-split .ms-chip-car{display:flex;align-items:center;gap:5px;background:none;border:0;
  border-left:1px solid rgba(255,255,255,.14);color:#FBFAF7;font-family:inherit;cursor:pointer;
  padding:9px 14px 9px 9px;min-height:44px;box-sizing:border-box;border-radius:0 999px 999px 0}
.ms-chip.ms-chip-split .ms-chip-car:hover{background:rgba(255,255,255,.1)}
.ms-chip.ms-chip-split .ms-chip-car .ms-cnt{font-size:11.5px;color:var(--ms-violet-lt);font-family:'JetBrains Mono',monospace;font-weight:500}
.ms-chip.ms-chip-split .ms-chip-car .ms-car{opacity:.6;font-size:11px}
.ms-chip.ms-chip-split.open{background:var(--ms-violet-2);border-color:var(--ms-violet-2)}
.ms-chip.ms-chip-split.open .ms-chip-car{border-left-color:rgba(255,255,255,.3)}
.ms-chip.ms-chip-split.open .ms-chip-car .ms-cnt{color:rgba(255,255,255,.78)}

/* mega-menu (rozwijane) */
.ms-mega,.ms-mega.two{position:absolute;top:calc(100% + 8px);left:0;background:var(--ms-ink-2);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;box-shadow:0 20px 44px rgba(0,0,0,.5);display:none;z-index:70}
.ms-mega{min-width:266px}
.ms-mega.two{grid-template-columns:1fr 1fr;gap:6px 22px;min-width:540px}
.ms-chip.open .ms-mega{display:block}
.ms-chip.open .ms-mega.two{display:grid}
.ms-mega-col{display:flex;flex-direction:column}
.ms-mega-col .ms-mega-title{margin:2px 0 6px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ms-violet-lt);
  font-weight:600;font-family:'JetBrains Mono',monospace}
.ms-mega-col a{display:block;padding:8px 11px;border-radius:8px;color:rgba(251,250,247,.86);text-decoration:none;font-size:14px}
.ms-mega-col a:hover{background:rgba(255,255,255,.09);color:#fff}
.ms-mega-col a.here{color:var(--ms-violet-lt);font-weight:700}

/* hamburger + menu mobilne (ukryte na desktopie) */
.ms-burger{display:none;background:none;border:0;color:#FBFAF7;font-size:25px;line-height:1;cursor:pointer;padding:10px 12px;min-width:44px;min-height:44px}
.ms-mobile{display:none}

@media(max-width:980px){
  body:not(.ms-head-ready){padding-top:66px}
  .ms-chips{display:none}
  .ms-corner{display:none}
  .ms-burger{display:block}
  .ms-mobile.open{display:block;border-top:1px solid rgba(255,255,255,.09);padding:8px;max-height:78vh;overflow-y:auto}
  .ms-mob-sec>button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;
    color:#FBFAF7;font-family:inherit;font-size:15px;font-weight:600;padding:11px 12px;min-height:44px;box-sizing:border-box;border-radius:9px;cursor:pointer}
  .ms-mob-sec>button:hover{background:rgba(255,255,255,.06)}
  /* grupa z własną stroną: nazwa = link, strzałka osobno (44 px) rozwija skróty */
  .ms-mob-row{display:flex;align-items:stretch}
  .ms-mob-name{flex:1;display:flex;align-items:center;color:#FBFAF7;font-family:inherit;font-size:15px;
    font-weight:600;padding:11px 12px;min-height:44px;box-sizing:border-box;text-decoration:none;border-radius:9px}
  .ms-mob-name:hover,.ms-mob-name.here{background:rgba(255,255,255,.06)}
  .ms-mob-car{background:none;border:0;color:#FBFAF7;cursor:pointer;min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:13px}
  .ms-mob-car:hover{background:rgba(255,255,255,.06)}
  .ms-mob-plain{display:flex;align-items:center;min-height:44px;color:#FBFAF7;font-family:inherit;font-size:15px;font-weight:600;
    padding:11px 12px;border-radius:9px;text-decoration:none}
  .ms-mob-plain:hover,.ms-mob-plain.here{background:rgba(255,255,255,.06)}
  .ms-mob-list{display:none;padding:2px 0 8px 12px}
  .ms-mob-sec.open .ms-mob-list{display:block}
  /* 08.09: pozycje rozwiniętego podmenu miały 39 px i stykały się bez odstępu, więc trafienie palcem było
     loterią. Minimum 44 px wysokości dotyku (zalecenie WCAG 2.2 i wytycznych Apple) plus odstęp między nimi. */
  .ms-mob-list a{display:flex;align-items:center;min-height:44px;padding:8px 11px;border-radius:8px;color:rgba(251,250,247,.82);text-decoration:none;font-size:14px}
  .ms-mob-list a+a{margin-top:4px}
  .ms-mob-list a:hover,.ms-mob-list a.here{background:rgba(255,255,255,.08);color:#fff}
  .ms-mob-corner{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px 6px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
  .ms-mob-link{display:inline-flex;align-items:center;min-height:44px;color:rgba(251,250,247,.82);text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;
    border:1px solid rgba(255,255,255,.14);border-radius:9px}
  /* 19.09 (pakiet B, uwagi WORK): Konto jako ikonka; otwarte menu nie przewija strony pod spodem */
  .ms-mob-konto{justify-content:center;min-width:44px;padding:8px}
  /* 21.09.2026 (Michał: „kiedy klikam na burgera menu, to zacina się scrollowanie”): blokady przewijania
     całej strony przy otwartym menu już nie ma. Menu jest panelem w nagłówku, nie nakładką na cały ekran,
     i przewija się samo (max-height 78vh + overflow-y:auto), więc strona pod spodem może zostać ruchoma. */
  .ms-mobile.open{overscroll-behavior:contain}
  html.ms-menu-otwarte .mdl-launcher{display:none}
}
/* 19.09 (pakiet B, uwaga WORK „Zapisz się dwa razy”): przycisk zapisu stoi w wierszu nagłówka obok hamburgera,
   więc w rozwiniętym menu go nie powtarzamy; poniżej 341 px wiersz nagłówka go nie ma, wtedy zostaje w menu */
@media(min-width:341px) and (max-width:980px){.ms-mob-corner .ms-cta{display:none}}
@media(max-width:520px){
  .ms-logo .word b{font-size:20px}
  /* 13.09.2026 (Michał): podtytuł pod logo widoczny także na telefonie, mniejszą czcionką */
  .ms-logo .word i{display:block;font-size:10px;letter-spacing:.02em;white-space:nowrap}
  .ms-headrow{gap:12px;padding:10px 16px}
}

/* ---- hero ---- */
.ms-hero{background:var(--ms-ink);color:#FBFAF7;padding:74px 24px 78px;position:relative;overflow:hidden}
.ms-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 90% at 12% 0%,rgba(129,119,245,.30),transparent 62%),
             radial-gradient(60% 80% at 92% 20%,rgba(240,169,59,.14),transparent 60%);pointer-events:none}
.ms-hero .inner{position:relative;max-width:880px;margin:0 auto}
.ms-hero .kicker{font-family:'JetBrains Mono',monospace;color:var(--ms-violet-lt);font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px}
.ms-hero h1{font-size:clamp(31px,5.4vw,55px);margin:0 0 18px;letter-spacing:-.025em}
.ms-hero h1 em{font-style:normal;color:var(--ms-violet-lt)}
.ms-hero p.lead{font-size:clamp(16.5px,2.1vw,20px);opacity:.9;max-width:640px;margin:0 0 28px;line-height:1.62}
.ms-hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.ms-hero.center .inner{text-align:center}
.ms-hero.center p.lead{margin-left:auto;margin-right:auto}
.ms-hero.center .btns{justify-content:center}

/* ---- przyciski ---- */
.btn{display:inline-block;padding:12px 24px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;border:2px solid transparent;text-align:center;font-family:inherit}
.btn-violet{background:var(--ms-violet-2);color:#fff}
.btn-violet:hover{background:var(--ms-violet)}
.btn-sand{background:var(--ms-sand);color:#241a0c}
/* alias: przyciski btn-orange uzywaja tego samego cieplego akcentu co btn-sand */
.btn-orange{background:var(--ms-sand);color:#241a0c}
.btn-orange:hover{background:#f5bc60;color:#241a0c}
.btn-sand:hover{background:#f5bc60}
.btn-paper{background:var(--ms-paper);color:var(--ms-ink)}
.btn-paper:hover{background:#fff}
/* 08.09 (przegląd techniczny roboczej): btn-outline miał na stałe biały tekst i białą ramkę, więc na
   jasnych sekcjach był praktycznie niewidoczny (kontrast 1,07:1 przy wymaganych 4,5:1; „Zobacz repertuar”
   na /karaoke, „Wolę mailem” na /start i kilkadziesiąt innych). Teraz przycisk bierze kolor tekstu swojego
   otoczenia: w ciemnych blokach jest jasny (18,1:1), na lnie ciemny (16,9:1), i działa też w blokach,
   których nie trzeba wymieniać z nazwy (.ms-news, .sec.dark .card, gradienty). Ramka: ten sam kolor
   przygaszony do 45 procent; starsze przeglądarki bez color-mix dostają pełny currentColor. */
.btn-outline{border-color:currentColor;color:inherit}
.btn-outline{border-color:color-mix(in srgb,currentColor 45%,transparent)}
.btn-outline:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
/* btn-ghost: fiolet 6055D6 na lnie ma 4,98:1 (dobrze), ale na prawie-czerni tylko 3,39:1 → jasny fiolet.
   Tu kolor jest akcentem marki, nie kolorem otoczenia, więc ciemne bloki wymieniamy z nazwy. */
.btn-ghost{border-color:var(--ms-violet);color:var(--ms-violet-2)}
.btn-ghost:hover{background:rgba(129,119,245,.12)}
.ms-hero .btn-ghost,.sec.dark .btn-ghost,footer.ms-foot .btn-ghost,.crisis-box .btn-ghost,
.banner-over .btn-ghost,.cena-box .btn-ghost,.ms-news .btn-ghost,.hope-feat .btn-ghost,
.sek-tlo .btn-ghost,.sek-pas .btn-ghost{
  border-color:var(--ms-violet-lt);color:var(--ms-violet-lt)}

/* ---- sekcje ---- */
.sec{padding:66px 0;background:var(--ms-paper)}
.sec.alt{background:var(--ms-white)}
.sec.dark{background:var(--ms-ink);color:#FBFAF7}
.sec.dark h2,.sec.dark h3{color:#FBFAF7}
.sec.dark a.inl,.ms-hero a.inl{color:var(--ms-violet-lt)}
/* 28.09.2026 (S1, pas „co dalej" wstawiany przez site.js przed stopką na stronach wiedzy/narzędzi/dowodu) */
.ms-co-dalej{padding:32px 0}
.ms-co-dalej-w{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px}
.ms-co-dalej-etyk{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ms-violet-2);flex:0 0 auto}
.ms-co-dalej-linki{display:flex;flex-wrap:wrap;gap:12px;flex:1 1 auto}
.ms-co-dalej-linki .btn{min-height:44px;display:inline-flex;align-items:center}
.sec-head{max-width:760px;margin:0 0 34px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-kicker{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ms-violet-2);margin:0 0 10px;font-weight:500}
.sec.dark .sec-kicker{color:var(--ms-violet-lt)}
.sec-title{font-size:clamp(25px,3.4vw,36px);margin:0 0 14px;letter-spacing:-.02em}
/* 09.09: podtytuł sekcji brał stały szary --ms-muted, więc na ciemnym tle robionym stylem wpisanym
   w stronę (a nie klasą .sec.dark) miał kontrast 3,04:1 zamiast 4,5:1, jak na /portal w sekcji ogłoszeń.
   Zamiast wymieniać takie sekcje z nazwy, kolor liczy się od koloru tekstu otoczenia: na jasnym wychodzi
   ten sam szary co dotąd, na ciemnym jasny. Pierwsza linia to zapas dla starszych przeglądarek. */
.sec-sub{font-size:17px;color:var(--ms-muted);margin:0;line-height:1.62}
.sec-sub{color:color-mix(in srgb,currentColor 74%,transparent)}
.sec.dark .sec-sub{color:rgba(251,250,247,.78)}

/* ---- tekst ---- */
.prose{max-width:720px}
.prose p{margin:0 0 17px}
.prose h3{font-size:18px;line-height:1.3;margin:28px 0 9px}
.prose h4{font-size:17.5px;margin:26px 0 8px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 8px}
a.inl{color:var(--ms-violet-2);text-decoration:underline;text-underline-offset:2px}
a.inl:hover{color:var(--ms-ink)}
/* uwaga #55 (tylko build/pages/program.html): odnośniki tekstowe w treści jako małe przyciski,
   nie hiperłącza. Nowa, osobna klasa — a.inl zostaje nietknięta dla pozostałych stron. */
a.btn-inl{display:inline-block;padding:2px 12px;margin:1px 0;border-radius:999px;
  background:var(--ms-violet-2);color:#fff;font-weight:600;font-size:.93em;
  line-height:1.6;text-decoration:none;white-space:normal}
a.btn-inl:hover{background:var(--ms-violet)}
.sec.dark a.btn-inl,.ms-hero a.btn-inl{background:var(--ms-violet-lt);color:var(--ms-ink)}
.lead-p{font-size:19px;line-height:1.6;color:var(--ms-text)}

/* ---- karty ---- */
.grid{display:grid;gap:20px}
/* przycisk odsłaniający resztę zwiniętej listy (patrz zwinDlugieListy w site.js) */
.zwin-wiecej{display:block;margin:16px auto 0}
/* ---- Znaki na kaflu filmu (od 08.09) ----
   20.09 (pakiet D r2): sama galeria rozwijana znikła z podstron (jedna Galeria pod /galeria),
   ale znak odtwarzania i czas trwania rysuje na kaflu build/js/galeria.js, więc te dwie reguły
   zostają. Wygląd .yt-play,.mdl-kafel-play stoi niżej w pliku (pakiet B r3). */
.mdl-kafel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.mdl-kafel-czas{position:absolute;right:8px;bottom:8px;background:rgba(15,17,22,.78);color:#FBFAF7;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;line-height:1;padding:4px 7px;
  border-radius:6px;pointer-events:none}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
/* Blok asymetryczny: jedna rzecz ważniejsza od dwóch pozostałych dostaje większe pole i zdjęcie,
   zamiast identycznej karty. Powstał po ocenie kompozycji całego serwisu (08.09.2026). */
.grid.g-glowna{grid-template-columns:1.55fr 1fr}
.g-glowna .karta-glowna{grid-row:span 2;padding:0;overflow:hidden;display:flex;flex-direction:column}
.g-glowna .karta-glowna img{width:100%;height:280px;object-fit:cover;display:block}
.g-glowna .karta-glowna .tresc{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.g-glowna .karta-glowna h3{font-size:26px;margin:0}
.g-glowna .karta-glowna p{margin:0}
.g-glowna .karta-glowna:nth-child(n+4){grid-column:1/-1;grid-row:auto;display:flex;flex-direction:row;align-items:stretch}
.g-glowna .karta-glowna:nth-child(n+4) img{width:44%;height:auto;min-height:220px;flex:0 0 44%}
.g-glowna .karta-glowna:nth-child(n+4) .tresc{justify-content:center}
@media(max-width:900px){.grid.g-glowna{grid-template-columns:1fr}
  .g-glowna .karta-glowna:nth-child(n+4){flex-direction:column}.g-glowna .karta-glowna:nth-child(n+4) img{width:100%;flex:none;min-height:0}
  .g-glowna .karta-glowna{grid-row:auto}.g-glowna .karta-glowna img{height:200px}}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--ms-white);border:1px solid var(--ms-line);border-radius:var(--radius);padding:24px}
.sec.alt .card{background:var(--ms-paper)}
.sec.dark .card{background:var(--ms-ink-2);border-color:rgba(255,255,255,.1)}
.card h3{font-size:19px;margin:0 0 9px}
.card p{margin:0 0 10px;color:var(--ms-muted);font-size:15.4px}
.sec.dark .card p{color:rgba(251,250,247,.76)}
.card .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ms-violet-2);letter-spacing:.14em;display:block;margin:0 0 10px}
.sec.dark .card .num{color:var(--ms-violet-lt)}
.card a.more{font-weight:700;font-size:14.5px;color:var(--ms-violet-2)}
.sec.dark .card a.more{color:var(--ms-violet-lt)}
/* 02.09 (Michał): karty czysto informacyjne nie mają wyglądać jak przyciski.
   Płaski, redakcyjny układ z akcentem z lewej; wypukłe kafle zostają tylko tam,
   gdzie NAPRAWDĘ się klika (a.card.link) i przy zdjęciach (.widoki). */
div.card,figure.card{background:transparent;border:0;border-left:3px solid var(--ms-line);
  border-radius:0;padding:2px 0 4px 20px}
.sec.alt div.card{background:transparent}
/* 20.09 (pakiet B, paczka Michała: „usunąć szare kreski, które na telefonie wyglądają jak niepotrzebne linie”):
   na telefonie akcent z lewej znika, odstęp zostaje ten sam, żeby nic się nie przesunęło; na komputerze kreska zostaje */
@media(max-width:720px){div.card,figure.card{border-left-color:transparent}.sec.dark div.card{border-left-color:transparent}}
.sec.dark div.card{background:transparent;border-left-color:rgba(255,255,255,.25)}
.widoki div.card,.widoki figure.card,figure.card.widoki{background:var(--ms-white);
  border:1px solid var(--ms-line);border-radius:var(--radius)}

.card.link{display:block;transition:transform .12s ease,border-color .12s ease}
.card.link:hover{transform:translateY(-2px);border-color:var(--ms-violet)}

/* ---- oś czasu (trzy światy) ---- */
.era{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:start;padding:26px 0;border-top:1px solid var(--ms-line)}
.era:first-child{border-top:none}
.era .yr{font-family:'DM Sans','DM Sans Fallback',sans-serif;font-size:32px;font-weight:700;color:var(--ms-violet-2);letter-spacing:-.02em;line-height:1}
.era .yr small{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ms-muted);margin-top:8px;font-weight:500}
.era h3{font-size:20px;margin:0 0 10px}
.era p{margin:0 0 10px;color:var(--ms-muted)}
@media(max-width:700px){.era{grid-template-columns:1fr;gap:12px}.era .yr{font-size:26px}.era .yr small{display:inline;margin-left:12px}}

/* ---- lista narzędzi ---- */
.tool{border-top:1px solid var(--ms-line);padding:20px 0;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.tool:first-child{border-top:none}
.tool h4{margin:0 0 6px;font-size:17.5px}
.tool p{margin:0;color:var(--ms-muted);font-size:15.4px}
.tool .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ms-violet-2);white-space:nowrap;padding-top:3px}
@media(max-width:620px){.tool{grid-template-columns:1fr}.tool .tag{order:-1;padding-top:0}}

/* ---- cytat / wyróżnienie ---- */
.pull{border-left:3px solid var(--ms-violet);padding:4px 0 4px 20px;margin:26px 0;font-size:19px;line-height:1.55;
  font-family:'DM Sans','DM Sans Fallback',sans-serif;font-weight:500}
.note{background:var(--ms-white);border:1px solid var(--ms-line);border-left:3px solid var(--ms-sand);
  border-radius:10px;padding:18px 20px;margin:24px 0;font-size:15.4px;color:var(--ms-muted)}
.sec.alt .note{background:var(--ms-paper)}

/* ---- FAQ ---- */
.faq details{border-bottom:1px solid var(--ms-line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;font-family:'DM Sans','DM Sans Fallback',sans-serif;list-style:none;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--ms-violet-2);font-family:'JetBrains Mono',monospace;margin-right:11px}
.faq details[open] summary::before{content:"–"}
.faq details p{margin:12px 0 0;color:var(--ms-muted)}

/* ---- newsletter ---- */
.ms-news{background:var(--ms-ink-2);color:#FBFAF7;border-radius:var(--radius);padding:32px;border:1px solid rgba(255,255,255,.1)}
.ms-news h3{margin:0 0 10px;font-size:22px}
.ms-news p{margin:0 0 16px;color:rgba(251,250,247,.78);font-size:15.4px}
.ms-news .note-s{font-size:12.6px;color:rgba(251,250,247,.55);margin:12px 0 0}
.ms-news .note-s a{text-decoration:underline;color:var(--ms-violet-lt)}
.ms-news-f{display:flex;gap:10px;flex-wrap:wrap}
.ms-news-f input{flex:1 1 240px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#FBFAF7;font-family:inherit;font-size:15px}
.ms-news-f input::placeholder{color:rgba(251,250,247,.45)}
.ms-news-f select{flex:1 1 200px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#FBFAF7;font-family:inherit;font-size:15px}
.ms-news-f option{background:var(--ms-ink-2);color:#FBFAF7}

/* ---- stopka ---- */
footer.ms-foot{background:var(--ms-ink);color:#FBFAF7;padding:56px 0 30px;font-size:14.6px}
footer.ms-foot .fgrid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:30px}
@media(max-width:1100px){footer.ms-foot .fgrid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:820px){footer.ms-foot .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer.ms-foot .fgrid{grid-template-columns:1fr}}
footer.ms-foot h5{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ms-violet-lt);margin:0 0 14px;font-weight:500}
footer.ms-foot p{margin:0 0 10px;color:rgba(251,250,247,.72);line-height:1.6}
footer.ms-foot a{color:rgba(251,250,247,.82)}
footer.ms-foot a:hover{color:#fff;text-decoration:underline}
footer.ms-foot nav{display:flex;flex-direction:column;gap:8px;background:transparent}
/* 08.09: 26 odnośników stopki miało 17 do 24 px wysokości przy odstępie 8 px, żaden nie sięgał 44 px
   wymaganych dla dotyku. Na ekranach dotykowych rozsuwamy je do 44 px i zmniejszamy odstęp, żeby stopka
   nie urosła bardziej, niż to konieczne. Na desktopie z myszą zostaje gęściej, bo tam celowanie jest łatwe. */
@media(max-width:820px){
  footer.ms-foot nav{gap:0}
  footer.ms-foot nav a,footer.ms-foot .bottom a{display:flex;align-items:center;min-height:44px}
  footer.ms-foot .bottom a{display:inline-flex}
}
/* 08.09 (decyzja STRONY): 44 px na 26 pozycjach dawało stopkę na dwa ekrany telefonu, więc poniżej 560 px
   odnośniki układają się w dwie kolumny. Nagłówki grup zostają na całej szerokości. Dłuższa etykieta może
   złamać się na dwie linie i to jest przyjęta cena: dwie linie w kolumnie są lepsze niż dwa ekrany przewijania. */
@media(max-width:560px){
  footer.ms-foot nav{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:0;align-items:start}
  footer.ms-foot nav a{line-height:1.3;padding:6px 0}
}
/* Grupy odnośników stopki jako <details>: na telefonie zwinięte, wyżej otwarte i bez znacznika,
   więc wyglądają dokładnie jak wcześniej. Ocena mobilna 08.09.2026. */
footer.ms-foot .fgrupa summary{list-style:none;cursor:pointer}
footer.ms-foot .fgrupa summary::-webkit-details-marker{display:none}
footer.ms-foot .fgrupa summary h5{display:inline-block}
@media(max-width:560px){
  footer.ms-foot .fgrupa summary{display:flex;align-items:center;justify-content:space-between;
    min-height:44px;border-bottom:1px solid rgba(255,255,255,.12)}
  footer.ms-foot .fgrupa summary::after{content:'+';font-size:20px;line-height:1;opacity:.65;padding-left:10px}
  footer.ms-foot .fgrupa[open] summary::after{content:'–'}
  footer.ms-foot .fgrupa[open] nav{padding:6px 0 10px}
}
footer.ms-foot .bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:rgba(251,250,247,.5);font-size:13px}

/* ---- portret ---- */
.portrait-wrap{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:center}
.portrait-wrap img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  display:block;border:1px solid var(--ms-line);
  box-shadow:0 18px 40px rgba(15,17,22,.14)}
.sec.dark .portrait-wrap img{border-color:rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.portrait-wrap.reverse{grid-template-columns:1fr 260px}
.portrait-wrap.reverse img{order:2}
@media(max-width:760px){
  .portrait-wrap,.portrait-wrap.reverse{grid-template-columns:1fr;text-align:center}.portrait-wrap .prose,.portrait-wrap p,.portrait-wrap ul{text-align:left}
  .portrait-wrap img,.portrait-wrap.reverse img{order:-1;max-width:220px;margin:0 auto;aspect-ratio:1/1}
}
.portrait-hero{max-width:210px;margin:0 auto 28px;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;border:2px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.4)}

/* ---- drobiazgi ---- */
.pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid var(--ms-line);color:var(--ms-muted)}
.sec.dark .pill{border-color:rgba(255,255,255,.22);color:rgba(251,250,247,.7)}
.stack{display:flex;gap:10px;flex-wrap:wrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.hr{height:1px;background:var(--ms-line);border:none;margin:36px 0}

/* ---- filmoteka: siatka klikalnych miniatur YouTube ---- */
.yt-cat{font-family:'DM Sans','DM Sans Fallback',sans-serif;font-weight:700;font-size:19px;color:var(--ms-text);
  margin:38px 0 4px;scroll-margin-top:90px}
.yt-cat:first-of-type{margin-top:0}
.yt-note{margin:0 0 16px;font-size:14px;color:var(--ms-muted);background:rgba(129,119,245,.08);
  border-left:3px solid var(--ms-violet);border-radius:0 8px 8px 0;padding:10px 14px;line-height:1.5}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:8px}
.yt-card{background:var(--ms-white);border:1px solid var(--ms-line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
.yt-fr{position:relative;aspect-ratio:16/9;background:#000}
.yt-ph{position:absolute;inset:0;width:100%;border:0;cursor:pointer;background-size:cover;
  background-position:center;display:flex;align-items:center;justify-content:center;padding:0}
/* 19.09 (pakiet B, runda 3; Michał: „na każdym filmie play powinien być symetrycznie”, CHAT: duża biała tarcza
   zasłaniała środek kadru i twarze): jeden znak odtwarzania dla filmów YouTube i kafli galerii. Małe (44 px)
   półprzezroczyste kółko z cienką obwódką, trójkąt rysowany w CSS zamiast znaku ▶ z czcionki (glif siedział
   krzywo), środek trójkąta w środku kółka. Tekst ▶ w .yt-play zostaje w HTML, ale jest niewidoczny. */
.yt-play,.mdl-kafel-play{display:block;width:44px;height:44px;box-sizing:border-box;border-radius:50%;
  background:rgba(15,17,22,.5);border:1.5px solid rgba(255,255,255,.85);box-shadow:0 2px 10px rgba(0,0,0,.25);
  font-size:0;color:transparent;padding:0;transition:background .15s}
.yt-play::after,.mdl-kafel-play::after{content:'';position:absolute;left:50%;top:50%;border-style:solid;
  border-width:8px 0 8px 13px;border-color:transparent transparent transparent #FBFAF7;transform:translate(-40%,-50%)}
.yt-play{position:relative}   /* .mdl-kafel-play ma position:absolute wyżej (środek kafla) */
.yt-ph:hover .yt-play{background:var(--ms-violet-2)}
.yt-meta{padding:12px 14px}
.yt-meta b{display:block;font-size:14.5px;color:var(--ms-text);line-height:1.35;
  margin-bottom:3px;font-weight:600}
.yt-meta span{font-size:12.5px;color:var(--ms-muted)}

/* ---- głosy ze sceny: sylwetki, ramka kryzysowa, karta nadziei ---- */
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:20px 0 8px}
.person{display:flex;gap:14px;background:var(--ms-white);border:1px solid var(--ms-line);
  border-radius:12px;padding:16px}
.person-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--ms-ink-3)}
.person-role{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ms-violet-2);margin:0 0 2px}
.person-name{display:block;font-weight:700;font-size:16px;margin:0 0 4px;font-family:'DM Sans','DM Sans Fallback',sans-serif}
.person p{margin:0;font-size:13.8px;color:var(--ms-muted);line-height:1.55}

.crisis-box{background:var(--ms-ink);color:#FBFAF7;border-radius:14px;padding:24px 26px;margin:34px 0}
.crisis-box b{font-size:17px}
.crisis-box p{color:rgba(251,250,247,.82);font-size:14.5px;line-height:1.55}
.crisis-box ul{margin:12px 0;padding-left:0;list-style:none;display:grid;gap:6px}
.crisis-box li{font-size:14.5px;color:rgba(251,250,247,.82)}
.crisis-box li a{color:#FBFAF7;font-weight:700;text-decoration:underline}
.crisis-box .cb-foot{font-size:13px;color:rgba(251,250,247,.6);margin:10px 0 0;font-style:italic}

.hope-feat{background:linear-gradient(160deg,var(--ms-ink),var(--ms-ink-2));border-radius:16px;
  overflow:hidden;margin:30px 0}
.hope-band{position:relative;height:140px}
.hope-band img.bridge{width:100%;height:100%;object-fit:cover;opacity:.55;display:block}
.hope-cap{position:absolute;left:16px;bottom:10px;color:rgba(251,250,247,.72);
  font-size:11.5px;font-family:'JetBrains Mono',monospace}
.hope-portrait{position:absolute;right:22px;bottom:-30px;width:76px;height:76px;
  border-radius:50%;object-fit:cover;border:3px solid var(--ms-ink)}
.hope-body{padding:44px 24px 24px}
.hope-body p{color:rgba(251,250,247,.82);font-size:14.5px;line-height:1.6;margin:0 0 10px}
.hope-note{background:rgba(240,169,59,.15);border-radius:10px;padding:12px 14px;
  margin-top:14px;color:var(--ms-sand);font-size:13.5px}
@media(max-width:560px){.people-grid{grid-template-columns:1fr}}

/* --- Filmoteka: karty filmów fabularnych i dokumentów ---
   Wykłady mają sam tytuł, filmy potrzebują akapitu „dlaczego warto", więc karta jest
   szersza (dwie w rzędzie zamiast trzech) i ma miejsce na opis oraz na drugi zwiastun. */
.yt-grid.yt-filmy{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.yt-meta .yt-oryg{font-style:italic;color:var(--ms-muted);font-weight:400}
.yt-meta p{margin:9px 0 0;font-size:14px;line-height:1.6;color:var(--ms-text)}
.yt-card .yt-drugi{border-top:1px solid var(--ms-line)}
.yt-card .yt-drugi .yt-fr{aspect-ratio:16/7}
@media(max-width:560px){.yt-grid.yt-filmy{grid-template-columns:1fr}}

/* Etykieta podgrupy w spisach zwiastunów (np. „Robin Williams") */
.tr-lbl{margin:22px 0 10px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ms-violet-2);font-weight:700}

/* --- baner-hero na górze podstron: ilustracja (bez tekstu) + nakładka tekstowa HTML --- */
/* 08.09: baner miał ciemne tło, ale nie ustawiał koloru tekstu, więc treść dziedziczyła ciemny kolor z body
   (działał tylko przycisk, który miał biel wpisaną na stałe). Kolor tekstu należy do bloku, nie do przycisku. */
.banner-hero{position:relative;background:#0F1116;color:#FBFAF7;line-height:0;overflow:hidden}
.banner-hero picture{display:block;line-height:0}
.banner-hero img{width:100%;display:block;min-height:360px;max-height:640px;object-fit:cover;object-position:58% 38%}
.banner-hero img[src$="edycja-hero-koncert.jpg"]{object-position:64% 45%;max-height:700px}
.banner-hero img[src$="metoda-hero-foto.jpg"]{object-position:80% 36%}
/* 13.09.2026 (audyt, WAŻNE): plansza akordów ma tytuł wypalony w obrazie; na telefonie kadr od lewej góry, żeby go nie ucinać */
.banner-hero img[src$="akordy-plansza-hero.jpg"]{object-position:50% 50%}
/* plansza ma jasne tło: mocniejsza nakładka pod H1 „Słownik akordów” */
body[data-page="narzedzia-akordy"] .banner-hero::after{background:linear-gradient(90deg,rgba(15,17,22,.84) 0%,rgba(15,17,22,.78) 55%,rgba(15,17,22,.45) 100%)}
@media(max-width:720px){body[data-page="narzedzia-akordy"] .banner-hero::after{background:rgba(15,17,22,.8)}}
.banner-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,17,22,.94) 0%,rgba(15,17,22,.78) 30%,rgba(15,17,22,.30) 56%,rgba(15,17,22,0) 82%)}
.banner-over{position:absolute;inset:0;z-index:2;display:flex;align-items:center;line-height:1.15}
.banner-over .wrap{width:100%}
.banner-over .b-kicker{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:#B3ACFA;margin:0 0 16px;font-weight:500}
.banner-over h1{color:#FBFAF7;font-size:clamp(30px,5.4vw,58px);line-height:1.03;letter-spacing:-.02em;margin:0 0 14px;max-width:15ch;text-shadow:0 2px 20px rgba(0,0,0,.65),0 1px 4px rgba(0,0,0,.5)}
.banner-over h1 em{font-style:normal;color:#B3ACFA;text-shadow:0 2px 20px rgba(0,0,0,.75),0 1px 4px rgba(0,0,0,.6)}
.banner-over .b-sub{color:#E4E0F7;font-size:clamp(15px,1.75vw,19px);margin:0 0 26px;max-width:52ch;line-height:1.4;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.banner-over .b-btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:720px){
  /* wersja mobilna: pionowy kadr, tekst na dole nad mocnym cieniem, przyciski na całą szerokość */
  .banner-hero img{min-height:460px;max-height:86vh;object-position:center}
  .banner-hero::after{background:linear-gradient(180deg,rgba(15,17,22,0) 0%,rgba(15,17,22,.42) 30%,rgba(15,17,22,.74) 55%,rgba(15,17,22,.97) 100%)}
  .banner-over{align-items:flex-end;padding-bottom:max(32px,env(safe-area-inset-bottom))}
  .banner-over .b-kicker,.banner-over h1,.banner-over .b-sub{text-shadow:0 1px 14px rgba(0,0,0,.55)}
  .banner-over .b-kicker{margin:0 0 12px}
  .banner-over h1{font-size:clamp(30px,8.6vw,42px);margin:0 0 12px;max-width:18ch}
  .banner-over .b-sub{font-size:17px;margin:0 0 22px;max-width:34ch}
  .banner-over .b-btns{flex-direction:column;gap:10px}
  .banner-over .b-btns .btn{width:100%;justify-content:center;padding-top:14px;padding-bottom:14px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- tabela porownawcza „co dostajesz” (wzor z sekcji rodzice na michaldrezner.com) --- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:860px;margin:0 auto}
table.cmp{width:100%;border-collapse:separate;border-spacing:0;background:var(--ms-card,#fff);
  border:1px solid var(--ms-line,#E6E3EF);border-radius:16px;overflow:hidden;font-size:16px}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;
  border-bottom:1px solid var(--ms-line,#E6E3EF)}
table.cmp thead th{background:var(--ms-ink,#0F1116);color:#FBFAF7;font-weight:600;font-size:14px;
  letter-spacing:.02em}
table.cmp thead th.me{text-align:center;width:120px;color:var(--ms-violet-lt,#B3ACFA)}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp td.yes{text-align:center;color:#2f9e5e;font-weight:700;font-size:19px}
table.cmp tbody tr:nth-child(even){background:rgba(0,0,0,.018)}
.cmp-note{max-width:760px;margin:16px auto 0;text-align:center;color:var(--ms-ink2,#5b5668);font-size:15px}
/* 09.09: ta sama klasa jest uzywana wewnatrz kart wyrownanych do lewej; tam wysrodkowanie
   i margin:auto lamaly kolumne, bo czesc linijek uciekala na srodek. */
.card .cmp-note,.grid .card .cmp-note{max-width:none;margin:14px 0 0;text-align:left}
/* znaczki metod płatności: własne, typograficzne, w barwach marek */
.pay-badges{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;
  gap:10px;justify-content:center;max-width:760px}
.pay-badges .pb{display:flex;align-items:center;gap:7px;height:44px;padding:0 16px;
  border-radius:9px;font-weight:700;font-size:15px;letter-spacing:.02em;
  border:1px solid var(--ms-line);background:var(--ms-white);color:var(--ms-text)}
/* chipy są jasne, żeby czytały się na ciemnym tle, a kolor niesie nazwa marki */
.pay-badges .pb-blik{color:#0A0A0A}
.pay-badges .pb-apple{color:#0A0A0A}
.pay-badges .pb-gpay{color:#3C4043}
.pay-badges .pb-revolut{color:#0666EB}
.pay-badges .pb-visa{color:#1A1F71;font-style:italic;letter-spacing:.08em;font-size:17px}
.pay-badges .pb-mc{color:#231F20}
.pay-badges .pb-mc i{width:34px;height:21px;display:inline-block;position:relative;flex:0 0 auto}
.pay-badges .pb-mc i::before,.pay-badges .pb-mc i::after{content:"";position:absolute;top:0;width:21px;height:21px;border-radius:50%}
.pay-badges .pb-mc i::before{left:0;background:#EB001B}
.pay-badges .pb-mc i::after{right:0;background:#F79E1B;mix-blend-mode:multiply}

/* czarny przycisk płatności portfelem, zgodny z konwencją Apple Pay */
.btn.btn-apple{background:#000;color:#fff;border:1px solid #000}
.btn.btn-apple:hover{background:#1a1a1a;color:#fff}

/* trzy widoki z pracy: zdjęcie u góry karty, opis pod spodem */
.widoki .card{padding:0;overflow:hidden}
.widoki .card img{width:100%;height:210px;object-fit:cover;display:block;max-width:none;object-position:center}
/* 27/28.09.2026 (na-oddzialach-04): na desktopie karta jest szeroka (dwie kolumny), a kadr 210 px
   ucinał pionowe/wysokie zdjęcia (np. oddzial-dziecko-keyboard.8316a94e.jpg, portret 1100×1282) tak, że
   opisana w alt osoba znikała z kadru. Wyższy kadr od 721 px, mobile bez zmiany. Ustalenie dotyczyło
   wyłącznie /na-oddzialach — .widoki jest komponentem współdzielonym z kilkoma innymi stronami
   (dlaczego-dziala, karaoke, kregi, portal, szkolenia, warsztaty-nocne), których zdjęć nikt nie
   sprawdzał, więc poprawka jest zawężona przez data-page, żeby ich nie dotknąć. */
@media(min-width:721px){body[data-page="na-oddzialach"] .widoki .card img{height:300px}}
/* pierwsze ujęcie ma akcję nieco wyżej niż środek kadru */
.widoki .card img[src$="widok-proba.jpg"]{object-position:56% 32%}
.widoki .card img[src$="oddzial-zespol-q1.e69ef9af.jpg"]{object-position:center 40%}
.widoki figcaption{padding:18px 22px 22px}
.widoki figcaption h3{margin:0 0 6px;font-size:18px}
.widoki figcaption p{margin:0;color:var(--ms-muted,#5B616E);font-size:15.5px;line-height:1.6}

/* numerowana ścieżka czytania w dziale wiedzy */
.kk-lista{margin:10px 0 0 20px;color:var(--ms-muted,#5B616E);font-size:15.5px;line-height:1.6}
.kk-lista li{margin-bottom:7px}

/* licznik do zamknięcia zapisów: informacja, nie straszak */
.odlicz{max-width:520px;margin:0 auto 22px;padding:16px 20px;border-radius:var(--radius);
  background:rgba(240,169,59,.10);border:1px solid rgba(240,169,59,.35);text-align:center}
.odlicz-l{margin:0 0 4px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ms-muted,#5B616E)}
.odlicz-c{margin:0;font-family:'DM Sans','DM Sans Fallback',sans-serif;font-weight:700;font-size:24px;color:var(--ms-text)}

/* lista z ptaszkami: co wchodzi w skład subskrypcji */
.ticks{list-style:none;margin:14px 0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:29px;line-height:1.6}
.ticks li::before{content:"";position:absolute;left:4px;top:7px;width:6px;height:11px;
  border:solid #1e6f42;border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}

/* wizualizacja karty ucznia: układ jak prawo jazdy, proporcje 85.6 na 54 */
.karta-mock{overflow:hidden;width:min(400px,90vw);aspect-ratio:85.6/54;margin:6px auto 0;border-radius:14px;
  background:linear-gradient(135deg,#171A22 0%,#22262F 55%,#3B3470 100%);
  color:#FBFAF7;padding:4.5% 5.5%;box-shadow:0 16px 40px rgba(15,17,22,.35);
  display:flex;flex-direction:column;gap:4%}
.karta-mock .km-top{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:3.5%}
.karta-mock .km-typ{font-size:clamp(10px,2.9vw,13px);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#F0A93B}
.karta-mock .km-typ small{display:block;font-weight:400;text-transform:none;letter-spacing:.03em;
  font-size:.72em;color:rgba(251,250,247,.65);margin-top:1px}
.karta-mock .km-logo{display:flex;align-items:center;gap:6px;font-size:clamp(10px,2.9vw,13px)}
.karta-mock .km-logo svg{width:1.5em;height:1.5em}
.karta-mock .km-logo b{font-weight:700;letter-spacing:-.01em;color:#FBFAF7}
.karta-mock .km-logo em{font-style:normal;color:#B3ACFA}
.karta-mock .km-body{display:flex;gap:5.5%;flex:1;align-items:stretch}
.karta-mock .km-foto{flex:0 0 27%;border-radius:8px;background:rgba(251,250,247,.12);
  border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden}
.karta-mock .km-foto img{width:100%;height:100%;object-fit:cover;display:block}
.karta-mock .km-pola{flex:1;display:flex;flex-direction:column;justify-content:space-between;
  font-size:clamp(10px,2.9vw,13.5px);line-height:1.35}
.karta-mock .km-pola b{font-family:'JetBrains Mono',monospace;font-weight:400;
  font-size:.82em;color:rgba(251,250,247,.55);margin-right:.35em}
.karta-mock .km-pola > div:nth-child(1),.karta-mock .km-pola > div:nth-child(2){
  font-weight:700;font-size:clamp(12px,3.6vw,17px)}
.karta-mock .km-kat{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.karta-mock .km-kat span{display:inline-block;border:1px solid #8177F5;color:#B3ACFA;
  border-radius:5px;padding:0 5px;font-weight:600;letter-spacing:0;font-size:.62em;line-height:1.55}

/* przód i tył obok siebie; na wąskim ekranie jedna pod drugą */
.karta-para{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.karta-para .karta-mock{margin:0;width:min(400px,100%);min-height:0;aspect-ratio:85.6/54;overflow:hidden;display:flex;flex-direction:column;container-type:inline-size}
.karta-para .karta-mock .km-body{flex:0 0 auto;align-items:center}
.karta-para .karta-mock .km-foto{flex:0 0 24%;height:27cqw;min-height:0;align-self:center}
.karta-para .karta-mock .km-pola{font-size:clamp(9px,2.83cqw,11.5px);line-height:1.22;justify-content:flex-start;gap:1px}
.karta-para .karta-mock .km-kat{flex-basis:100%;margin-top:5px;gap:3px;align-content:flex-start}
.karta-para .karta-mock .km-kat span{font-size:clamp(6.5px,2.0cqw,8px);padding:0 4px;line-height:1.5;border-radius:4px}
.karta-para .karta-mock .km-kat b{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:clamp(7px,2.11cqw,8.5px);color:#B3ACFA;margin-right:2px}
/* kompakt: karta w proporcji 85.6:54 ma pomieścić 12 kategorii i tabelę uprawnień */
.karta-para .karta-mock{padding:3.2% 4.5%}
.karta-para .karta-mock .km-top{margin-bottom:2.5%;padding-bottom:2%}
.karta-para .karta-mock .km-typ{font-size:clamp(8px,2.56cqw,10.5px);line-height:1.15}
.karta-para .karta-mock .km-typ small{font-size:.72em}
.karta-para .karta-mock .km-logo{font-size:clamp(8px,2.44cqw,10px)}
.karta-para .karta-mock .km-foto{flex-basis:22%;height:21.5cqw}
.karta-para .karta-mock .km-body{gap:4%}
.karta-para .karta-mock .km-pola{font-size:clamp(8.5px,2.67cqw,10.5px);line-height:1.15}
.karta-para .karta-mock .km-pola > div:nth-child(1),.karta-para .karta-mock .km-pola > div:nth-child(2){font-size:1.35em}
.karta-para .karta-mock .km-kat{margin-top:4px;gap:2px 3px}
.karta-para .karta-mock .km-kat span{font-size:clamp(6px,1.83cqw,7.4px);padding:0 3px;line-height:1.45}

/* 20.09 (pakiet E r37): twarde ograniczenia treści karty. Test regresyjny z dłuższą nazwą i dłuższym
   polem 9 pokazał, że proporcja jest odporna (1,5852 zawsze), ale treść nie: długa nazwa dokładała
   14 do 15 px, a długie pole 9 kolejne 25 px przy 320 px, i to wychodziło poza kartę.
   Trzy zabezpieczenia, wszystkie zamknięte w komponencie karty:
   1. Nazwa w nagłówku: najwyżej dwie linie, nadmiar ucinany WIDOCZNIE, wielokropkiem.
      Dziś nazwa zajmuje jedną linię, więc zmiana nie rusza obecnej karty.
   2. Pole 9 przycina się do własnej ramki (nic nie wchodzi w margines karty ani poza nią).
   3. Przy większej liczbie pozycji niż dzisiejsze dwanaście plakietki maleeją o stopień, a przy
      siedemnastu o dwa, żeby treść SIĘ ZMIEŚCIŁA, zamiast zostać ucięta. */
.karta-mock .km-nazwa{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;text-overflow:ellipsis}
/* Na telefonie karta ma 300 px szerokości i pod nagłówkiem zostaje tylko 9,6 px zapasu, więc druga linia
   nazwy wypychałaby pole 9 o 4,6 px poza kartę. Tam nazwa mieści się w jednej linii (dziś i tak zajmuje jedną). */
@container (max-width:350px){.karta-mock .km-nazwa{-webkit-line-clamp:1}}
.karta-mock .km-kat{overflow:hidden;min-height:0}
.karta-para .karta-mock .km-kat span:nth-last-child(n+13),
.karta-para .karta-mock .km-kat span:nth-last-child(n+13) ~ span{font-size:clamp(5.4px,1.64cqw,6.6px);padding:0 2px}
.karta-para .karta-mock .km-kat span:nth-last-child(n+17),
.karta-para .karta-mock .km-kat span:nth-last-child(n+17) ~ span{font-size:clamp(4.9px,1.48cqw,6px);padding:0 2px;line-height:1.35}
.karta-para .km-rewers .km-tab{font-size:clamp(8px,2.56cqw,10.5px)}
.karta-para .km-rewers .km-tab td{padding:1.6% 3px}
.karta-para .km-rewers .km-tab th{padding-bottom:2px}
.karta-para .km-rewers .km-rewers-stopka{font-size:clamp(6.5px,2.0cqw,8px);margin-top:4px;line-height:1.3}
.km-tab td{color:#E6E3F5}
.karta-para .karta-mock .km-foto{min-height:0}
.km-rewers{justify-content:space-between}
.km-tab{width:100%;border-collapse:collapse;font-size:clamp(9px,2.89cqw,12.5px);line-height:1.3}
.km-tab th{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:.8em;
  color:rgba(251,250,247,.55);text-align:left;padding:0 4px 4px;letter-spacing:.08em}
.km-tab td{border-top:1px solid rgba(255,255,255,.16);padding:3.5% 4px;vertical-align:middle}
.km-tab td:first-child{font-family:'JetBrains Mono',monospace;color:#B3ACFA;letter-spacing:.06em;width:14%}
.km-tab .km-sym{width:12%;text-align:center}
.km-tab .km-sym svg{width:1.55em;height:1.55em;vertical-align:middle}
.km-tab td:nth-child(5){font-family:'JetBrains Mono',monospace;font-size:.85em;color:rgba(251,250,247,.6);width:10%}
.km-tab td:nth-child(4){width:14%}
.km-tab td.km-kody{font-family:'JetBrains Mono',monospace;font-size:.78em;color:#B3ACFA;letter-spacing:.04em;width:17%;white-space:nowrap}
.km-rewers-stopka{font-family:'JetBrains Mono',monospace;font-size:clamp(7.5px,2.33cqw,9.5px);
  letter-spacing:.1em;color:rgba(251,250,247,.55);border-top:1px solid rgba(255,255,255,.18);padding-top:3%}

/* ramka gwarancji zwrotu: zielona, bo to obietnica po stronie prowadzącego */
.gwar{max-width:760px;margin:20px auto 0;padding:20px 24px;border-radius:var(--radius);
  background:rgba(47,158,94,.07);border:1px solid rgba(47,158,94,.30)}
.gwar h4{margin:0 0 8px;font-size:18px;color:#1e6f42;letter-spacing:.01em}
.gwar p{margin:0;font-size:16px;line-height:1.62;color:var(--ms-text)}
@media(max-width:560px){.gwar{padding:16px 17px}}
@media(max-width:560px){table.cmp th,table.cmp td{padding:12px 13px;font-size:15px}
  table.cmp thead th.me{width:74px}}

/* --- karta wg wzoru prawa jazdy UE: 6 zdjęcie, 7 podpis, rewers 9/10/11/12 + kompetencje + legenda --- */
.karta-para .karta-mock .km-fotokol{display:flex;flex-direction:column;flex:0 0 24%;gap:0;align-self:center;justify-content:center;align-items:center}
.karta-para .karta-mock .km-fotokol .km-foto{flex:none;width:100%;position:relative;height:23.5cqw;margin:0 auto}
.karta-para .karta-mock .km-nr6{position:absolute;left:3px;top:2px;font-family:'JetBrains Mono',monospace;font-size:7px;color:#fff;opacity:.85;background:rgba(0,0,0,.35);padding:0 3px;border-radius:3px;z-index:1}
.karta-para .karta-mock .km-podpis{font-size:clamp(7px,2.11cqw,8.5px);color:#E4E0F7;border-top:1px solid rgba(255,255,255,.35);padding-top:2px;white-space:nowrap}
.karta-para .karta-mock .km-podpis b{font-family:'JetBrains Mono',monospace;font-weight:400;color:#B3ACFA;font-size:.9em}
.karta-para .karta-mock .km-podpis em{font-style:italic;font-weight:600;letter-spacing:.02em;color:#fff}
.karta-para .km-rewers .km-tab{font-size:clamp(7.2px,2.22cqw,9px)}
.karta-para .km-rewers .km-tab th{text-align:left;padding-bottom:1px}
.karta-para .km-rewers .km-tab td{padding:.55% 3px}
.karta-para .km-rewers .km-tab td.km-sym{width:9%}
.karta-para .km-rewers .km-tab td.km-kat9{width:44%;line-height:1.1}
.karta-para .km-rewers .km-tab td.km-kat9 b{font-family:'JetBrains Mono',monospace;color:#B3ACFA;font-weight:600;letter-spacing:.08em;display:block}
.karta-para .km-rewers .km-tab td.km-kat9 small{display:block;font-size:.82em;color:#E6E3F5;opacity:.9}
.karta-para .km-rewers .km-tab td:nth-child(3){width:12%}
.karta-para .km-rewers .km-tab td.km-do{width:9%;font-family:'JetBrains Mono',monospace;color:rgba(251,250,247,.6)}
.karta-para .km-rewers .km-tab td.km-kody{width:22%;text-align:right;font-size:.72em;letter-spacing:.02em}
.karta-para .km-rewers .km-komp{display:flex;flex-wrap:wrap;gap:0 5px;align-items:center;margin-top:2px;padding-top:2px;line-height:1.25;border-top:1px solid rgba(255,255,255,.22);font-size:clamp(6.5px,2.0cqw,8px);color:#E6E3F5}
.karta-para .km-rewers .km-komp-l{font-family:'JetBrains Mono',monospace;color:#B3ACFA;margin-right:2px}
.karta-para .km-rewers .km-ok{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.karta-para .km-rewers .km-ok svg{width:9px;height:9px;color:#F6B26B}
.karta-para .km-rewers .km-ok b{font-family:'JetBrains Mono',monospace;font-weight:400;color:#B3ACFA}
.karta-para .km-rewers .km-rewers-stopka{margin-top:2px;padding-top:2px;border-top:1px solid rgba(255,255,255,.22);font-size:clamp(5.4px,1.67cqw,6.4px);line-height:1.22}
.karta-para .km-rewers .km-rewers-stopka b{color:#B3ACFA;font-weight:400}
.karta-para .km-rewers .km-rewers-stopka span{opacity:.75}

/* --- karta: pole 8 (profil) i QR profilu na rewersie --- */
.karta-para .karta-mock .km-profil{font-family:'JetBrains Mono',monospace;font-size:clamp(6.5px,2.0cqw,8px);color:#B3ACFA;letter-spacing:.02em}
.karta-para .karta-mock .km-profil b{font-family:'JetBrains Mono',monospace;font-weight:400;color:#8177F5;margin-right:2px}
.karta-para .karta-mock{position:relative}
.karta-para .karta-mock .km-qrkol{position:absolute;right:4.5%;top:29%;display:flex;flex-direction:column;align-items:center;gap:1px}
.karta-para .karta-mock .km-qrkol img{width:44px;height:44px;background:#fff;padding:3px;border-radius:5px;display:block}
.karta-para .karta-mock .km-qrkol small{font-family:'JetBrains Mono',monospace;font-size:6.5px;color:#B3ACFA;letter-spacing:.05em}

/* ---- pływający launcher: jeden okrągły przycisk, „Czat z Michałem” + „Wstępny zapis” (07.09, D76) ----
   Zastępuje dwa osobne pływające elementy z lewego dolnego rogu (05.09 czat + zainteresowanie.js
   zapis): jeden przycisk 56 px w prawym dolnym rogu, 16 px od krawędzi; dotknięcie rozwija w górę
   dwie opcje jedna nad drugą (kolejność w DOM = kolejność w pionie przy column-reverse: zapis wyżej,
   czat niżej, bliżej przycisku). */
.mdl-launcher{position:fixed;right:16px;bottom:16px;z-index:95;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px}
.mdl-launcher-btn{width:56px;height:56px;flex:0 0 auto;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:var(--ms-violet-2);color:#fff;
  box-shadow:0 10px 26px rgba(96,85,214,.42);transition:background .15s,transform .15s}
.mdl-launcher-btn:hover{background:var(--ms-violet);transform:translateY(-1px)}
.mdl-launcher-btn:focus-visible{outline:3px solid var(--ms-violet-lt);outline-offset:3px}
.mdl-launcher-btn svg{width:24px;height:24px}
/* 13.09.2026 (audyt): na małych ekranach launcher mniejszy i niżej, żeby nie zasłaniał kontrolek narzędzi */
@media (max-width:480px){.mdl-launcher{right:10px;bottom:10px}.mdl-launcher-btn{width:46px;height:46px}.mdl-launcher-btn svg{width:20px;height:20px}}
/* 19.09 (pakiet B, B2): launcher ma jedną funkcję (czat), rozwijanej pary opcji już nie ma. Runda 2: na telefonie
   widoczny tylko w pustym pasku pod stopką (klasa z site.js), żeby nie zasłaniał treści ani kontrolek. */
.mdl-launcher{transition:transform .25s,opacity .25s}
.mdl-launcher.mdl-launcher-schowany{transform:translateY(96px);opacity:0;pointer-events:none}
/* strona robocza ma pasek uwag w tym samym rogu (site: robocza-warstwa/uwagi.js, .uw-pasek,
   right:16px;bottom:16px): launcher idzie wyżej, żeby oba dawały się kliknąć osobno */
body:has(.uw-pasek) .mdl-launcher{bottom:82px}
/* ≤360 px: tylko średnica przycisku spada do 48 px (D76) — margines od krawędzi (16 px)
   zostaje ten sam co wyżej, żeby nie zbliżać launchera do centrowanych .btn w sekcjach
   „zapis”/„cena” (te przy tak wąskim ekranie sięgają blisko prawej krawędzi) */
@media(max-width:360px){
  .mdl-launcher-btn{width:48px;height:48px}
  .mdl-launcher-btn svg{width:20px;height:20px}
  body:has(.uw-pasek) .mdl-launcher{bottom:74px}
  /* index.html: hero z dwoma przyciskami owija je do drugiego wiersza przy 320 px,
     a drugi przycisk („Materiał na start, za darmo”, ok. 249 px) sięgał prawym
     brzegiem w strefę launchera (od 256 px). Węższy max-width trzyma prawy brzeg
     każdego przycisku hero z dala od launchera niezależnie od wysokości ekranu
     (nakładanie zależy od scrolla/wysokości, nie tylko od pozycji na starcie). */
  .ms-hero .btns .btn{max-width:220px}
}
@media print{.mdl-launcher{display:none}}
/* 08.09 (D90): w konfiguratorze (pages/konfigurator.html) launcher nachodził na telefonie na prawy
   brzeg szerokich opcji odpowiedzi. Konfigurator dodaje tę klasę na <body> w trakcie pytań i zdejmuje
   ją na ekranie wyniku (funkcje ukryjLauncher/pokazLauncher w tamtym pliku). */
body.mdl-launcher-ukryty .mdl-launcher{display:none}
/* 05.09: nakladka czatu otwierana przez pływający przycisk (bez opuszczania strony) */
.mdl-czat-overlay{position:fixed;inset:0;z-index:210;background:rgba(15,17,22,.6);
  display:flex;align-items:center;justify-content:center;padding:18px}
/* bez tego „display:flex” bije UA-regułę [hidden]{display:none}: nakładka zostawała
   widoczna na zawsze, nawet po ov.hidden=true (krzyżyk, klik w tło) — poprawka 07.09 */
.mdl-czat-overlay[hidden]{display:none}
.mdl-czat-box{position:relative;width:100%;max-width:480px;height:min(640px,86vh);
  background:var(--ms-white);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.mdl-czat-box iframe{width:100%;height:100%;border:0;display:block}
.mdl-czat-close{position:absolute;top:8px;right:10px;z-index:2;background:rgba(15,17,22,.8);color:#fff;
  border:none;border-radius:50%;width:30px;height:30px;font-size:20px;line-height:1;cursor:pointer}
.mdl-czat-close:hover{background:var(--ms-violet-2)}
/* 07.09 (test roboczej): miejsce na okrągły przycisk czatu, żeby nie zasłaniał ostatnich przycisków strony na telefonie (launcher-odstep) */
@media (max-width:700px){ footer.ms-foot{padding-bottom:118px} }   /* 03.10.2026 (pętla 14:30): odstęp na przycisk czatu w fioletowej stopce, nie kremowy pas pod nią (było body{padding-bottom:88px}) */
/* 19.09 (pakiet B, runda 2): na stronie roboczej pasek uwag podnosi launcher (bottom 74-82 px), więc pusty pasek pod
   stopką musi być wyższy, inaczej przycisk nie miałby gdzie się pokazać; na produkcji paska uwag nie ma */
@media (max-width:700px){ body:has(.uw-pasek) footer.ms-foot{padding-bottom:180px} }

/* 08.09 (D87/P44 dopisek): znacznik NIEPOTWIERDZONE na szkicach roboczych (np. o-mnie.html) — obok
   faktu, którego Michał jeszcze nie potwierdził (zgoda, ID filmu, nazwa instytucji). Widoczny na
   roboczej, żeby dało się od razu znaleźć, co dopracować; przy publikacji usuwany razem ze znacznikami
   z tekstu źródłowego. */
.mdl-niepotw{display:inline-block;background:#FFE066;color:#241a0c;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;line-height:1.4;letter-spacing:.03em;padding:1px 6px;border-radius:4px;font-weight:700;
  vertical-align:middle;white-space:nowrap}

/* ---- kontrast tekstu bursztynowego (przegląd 08.09) ----
   Bursztyn #F0A93B jako TEKST na jasnym tle daje 1,8:1 przy wymaganych 4,5:1: napis „Zaznacz zgodę na
   regulamin” na /edycja i podpis pakietu na /cennik były na granicy czytelności. Reguły źródłowe leżą
   w stylach tych stron (edycja: .cena-hint, cennik: .card.premium .num), więc nadpisujemy je stąd
   selektorem z „body” (arkusz strony jest niżej w dokumencie i przy równej wadze wygrywa).
   W ciemnych blokach (.cena-box, .sec.dark) zostaje jasny bursztyn, tam kontrast jest prawidłowy. */
body .cena-hint{color:var(--ms-sand-tekst)}
body .card.premium .num{color:var(--ms-sand-tekst)}
body .cena-box .cena-hint,body .sec.dark .cena-hint,body .sec.dark .card.premium .num{color:#F6C978}

/* 08.09 (P51, zgłoszenie sesji MdL-Wiedza): artykuły miały H1, a zaraz po nim H3, z pominięciem H2.
   Reguła pozwala używać poprawnej kolejności nagłówków bez zmiany wyglądu strony. */
.prose h2{font-size:22px;line-height:1.25;margin:34px 0 12px}

/* 09.09: pasek akcji na liście utworów jest przyklejony do dołu ekranu, więc koniec listy chowa się
   pod nim. Dolny odstęp listy oddaje ostatnim pozycjom miejsce. Reguła z „body”, bo arkusz strony
   jest niżej w dokumencie i przy równej wadze wygrywa. */
body #ut .ut-lista{padding-bottom:120px}
/* Zmierzone przy 320 px: przyciski w pasku łamią się na dwa wiersze, pasek ma wtedy 200 px wysokości
   i zajmuje ćwierć ekranu (przy 375 px — 175 px, czyli 22%). Na tak wąskich ekranach pasek przestaje
   być przyklejony i po prostu kończy listę: nie zjada ekranu, a wezwanie do zapisu zostaje na miejscu.
   Uwaga na przyszłość: przyciski filtrów NIE były trwale zakryte — sprawdzone, dawało się je odsłonić
   przewijaniem. Powodem zmiany jest ćwiartka ekranu zjadana na telefonie, nie zasłanianie. */
@media(max-width:400px){
  body #ut .ut-pasek{position:static}
  body #ut .ut-lista{padding-bottom:16px}
}

/* ---- Wypożyczalnia instrumentów (09.09.2026) ----
   Karta ma wygląd kart z reszty serwisu. Świadomie bez pola zaznaczenia i sumy z wzorcowej strony
   zakupów: przy wypożyczeniu jednego instrumentu nie miałyby nic do roboty. */
.wyp-uwaga{background:#FFF4D6;border:1px solid #E8C978;border-radius:12px;padding:14px 16px;margin:0 0 26px;font-size:15px}
.wyp-warunki{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.wyp-warunki li{line-height:1.6}
.wyp-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.wyp-czekaj{color:var(--ms-muted);grid-column:1/-1}
.wyp-karta{background:var(--ms-white);border:1px solid var(--ms-line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column}
.wyp-karta img{width:100%;height:170px;object-fit:cover;display:block}
.wyp-tresc{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.wyp-tresc h3{margin:0;font-size:18px}
.wyp-tresc h3 a{text-decoration:underline;text-underline-offset:3px}
.wyp-dla{margin:0;font-size:14.5px;color:var(--ms-muted);line-height:1.55}
.wyp-ceny{margin:0;font-size:16px}
.wyp-zakup{margin:0;font-size:13.5px;color:var(--ms-muted)}
.wyp-stanik{margin:0;font-size:13.5px;font-weight:600}
.wyp-zajety .wyp-stanik{color:#B3261E}
.wyp-znacznik{background:#FFE066;color:#241a0c;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;padding:2px 6px;border-radius:5px;font-weight:700;margin-left:4px}
.wyp-tresc .btn{margin-top:4px}
.wyp-form{display:flex;flex-direction:column;gap:12px;max-width:520px}
.wyp-form label{display:block;font-size:14px;font-weight:600}
.wyp-form input,.wyp-form textarea{display:block;width:100%;margin-top:5px;padding:11px 13px;
  border:1px solid rgba(15,17,22,.16);border-radius:10px;font:inherit;font-weight:400;background:#fff}
.wyp-form input:focus,.wyp-form textarea:focus{outline:2px solid var(--ms-violet);outline-offset:1px}
.wyp-blad{background:rgba(178,38,30,.09);color:#B3261E;border-radius:9px;padding:9px 12px;font-size:13.5px;margin:0}
.wyp-stan{margin-left:10px;font-size:14px;color:var(--ms-muted)}
@media(max-width:560px){.wyp-siatka{grid-template-columns:1fr}.wyp-karta img{height:190px}}

/* 09.09, audyt techniczny: sekcja #profil na /portal ma tlo z obrazu z awaryjnym kolorem
   --ms-sand (#F0A93B). Fioletowy kicker dawal na nim kontrast 2,77:1 przy progu 4,5.
   Prawie-czarny daje na tym samym tle okolo 8:1. */
#profil .sec-kicker{color:#2A2438}

/* ============================================================
   TLO FOTOGRAFICZNE SEKCJI (sek-tlo) - przeniesione 09.09.2026 z build/pages/edycja-nowa.html
   i build/pages/cennik.html za zgoda sesji STRONA. Blok stoi na KONCU pliku celowo:
   .sec.sek-tlo ma te sama specyficznosc co .sec.alt i .sec.dark, wiec wygrywa kolejnoscia.
   ============================================================ */
/* Tlo fotograficzne sekcji (przygotowane 09.09.2026, plik edycja-hero-koncert.jpg).
   POMIAR jasnosci kadru w dziewieciu polach, skala 0-255: gora 6 / 22 / 42, srodek 14 / 27 / 30,
   dol 23 / 28 / 25. Caly kadr jest ciemny (maksimum 42), najjasniejszy jest prawy gorny rog
   ze swiatlem sceny, najciemniejszy lewy gorny. Wniosek: tekst jasny dziala wszedzie, ciemny nigdzie,
   a najbezpieczniejsza kolumna na tekst to LEWA. Dlatego przyciemnienie jest mocniejsze po lewej.
   Uzycie: <section class="sec sek-tlo" id="..." style="--tlo:url(img/A.jpg);--tlo-m:url(img/B.jpg)">.
   Dwa warianty przyciemnienia: tlo-rowne (rowne i mocne, bezpieczne pod kazdy tekst)
   oraz tlo-karty (mocne pod naglowkiem, slabsze nizej) - WYLACZNIE tam, gdzie dol sekcji
   zajmuja karty z wlasnym jasnym tlem, czyli a.card. Karta div.card jest w site.css przezroczysta.
   ZASTRZEZENIE SESJI GRAFIKI (09.09): pas gradientowy wypalony w pliku wystarcza pod naglowek i jedno zdanie,
   nie pod akapity. Dlatego za czytelnosc odpowiada warstwa ::before, ktora przyciemnia CALA sekcje. */
.sec.sek-tlo,.sek-tlo{position:relative;isolation:isolate;
  background:#0F1116 var(--tlo,url(img/edycja-hero-koncert.jpg)) center/cover no-repeat;color:#FBFAF7}
.sek-tlo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(15,17,22,.88) 0%,rgba(15,17,22,.70) 45%,rgba(15,17,22,.45) 100%)}
.sek-tlo.tlo-rowne::before{background:linear-gradient(180deg,rgba(15,17,22,.86),rgba(15,17,22,.82))}
/* tlo-karty: tekst siedzi tylko w naglowku, nizej stoja karty z wlasnym jasnym tlem,
   wiec dol sekcji moze byc jasniejszy i zdjecie ma gdzie oddychac.
   Nie uzywac tam, gdzie karty sa przezroczyste: tekst lezy wtedy wprost na zdjeciu. */
.sek-tlo.tlo-karty::before{background:linear-gradient(180deg,rgba(15,17,22,.90) 0%,rgba(15,17,22,.88) 40%,rgba(15,17,22,.56) 58%,rgba(15,17,22,.64) 100%)}
.sek-tlo .sec-title,.sek-tlo p,.sek-tlo li,.sek-tlo h3{color:#FBFAF7}
.sek-tlo .sec-kicker{color:#B3ACFA}
.sek-tlo .sec-head:not(.center){text-align:left}
.sek-tlo a:not(.btn){color:#B3ACFA}
/* Dwa rodzaje kart, dwa kolory tekstu. site.css daje bialy podklad tylko karcie, ktora jest
   odnosnikiem (a.card); div.card i figure.card sa tam ustawione na przezroczyste.
   Pomylenie tych dwoch to dokladnie blad z /portal: bialy naglowek na bialej karcie. */
.sek-tlo a.card h3{color:var(--ms-ink)}
.sek-tlo a.card p{color:var(--ms-muted)}
.sek-tlo a.card .more,.sek-tlo a.card .num{color:var(--ms-violet-2)}
.sek-tlo div.card,.sek-tlo figure.card{border-color:rgba(255,255,255,.18)}
.sek-tlo div.card h3,.sek-tlo figure.card h3{color:#FBFAF7}
.sek-tlo div.card p,.sek-tlo figure.card p{color:#E7E4DC}
.sek-tlo div.card .num,.sek-tlo figure.card .num{color:#B3ACFA}
/* .note ma wlasne jasne tlo (--ms-white), wiec jest trzecim wariantem tej samej pomylki:
   bez tych regul pudelko renderuje sie PUSTE, bialy tekst na bialym tle, kontrast 1,05. */
.sek-tlo .note,.sek-tlo .note p{color:var(--ms-muted)}
.sek-tlo .note b,.sek-tlo .note strong{color:var(--ms-ink)}
.sek-tlo .note a:not(.btn){color:var(--ms-violet-2)}
@media(max-width:720px){
  .sec.sek-tlo,.sek-tlo{background-image:var(--tlo-m,url(img/edycja-hero-koncert-mobile.jpg))}
  .sek-tlo::before,.sek-tlo.tlo-rowne::before,.sek-tlo.tlo-karty::before{
    background:linear-gradient(180deg,rgba(15,17,22,.82),rgba(15,17,22,.92))}
  .sek-tlo .sec-head{text-align:center}
}


/* ---- Lista do zaznaczania: sprzęt i wypożyczalnia (09.09.2026) ----
   Wzorzec: _backup-zakupy-podstawowe/zakupy-podstawowe.html. Tam karta miała własne tło i ramkę
   wpisane od nowa; tutaj korzysta z .card, żeby lista wyglądała jak reszta serwisu i żeby jedna
   poprawka wyglądu kart obejmowała także ją.
   Mechanizm jest w site.js (zakupyLista); ten sam komponent obsłuży wypożyczalnię, tam bez paska.
   Kolor niewybranej karty NIE jest przygaszany przezroczystością jak we wzorcu (opacity .45):
   przygaszony tekst na jasnym tle schodził poniżej progu kontrastu, a to jest lista, z której
   ktoś ma odczytać nazwy i ceny. Zamiast tego wybraną kartę wyróżnia ramka i znacznik. */
.zak-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:0}
.zak-karta{position:relative;display:flex;flex-direction:column;cursor:pointer;padding-top:14px}
.zak-karta img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;margin-bottom:12px}
.zak-karta-wybrana{border-color:var(--ms-violet-2);box-shadow:0 0 0 1px var(--ms-violet-2) inset}
/* Pole zaznaczenia ma 24 px i własny odstęp, żeby dotyk na telefonie miał co najmniej 44 px
   razem z otaczającym marginesem karty. */
.zak-pole{position:absolute;top:12px;right:12px;z-index:2;width:24px;height:24px;
  accent-color:var(--ms-violet-2);cursor:pointer;margin:0}
.zak-nazwa{display:inline-block;font-weight:700;color:var(--ms-violet-2);
  text-decoration:underline;text-underline-offset:2px}
.zak-cena{display:block;margin:8px 0 2px;font-weight:700}
.zak-dostepnosc{display:block;font-size:14px;color:var(--ms-muted)}
.zak-zrodlo{display:block;margin-top:10px;font-size:13.5px;color:var(--ms-muted)}
.zak-zrodlo a{color:var(--ms-violet-2)}

/* Pasek podsumowania. Nie jest przyklejony do dołu: przy 320 px przyklejony pasek z trzema
   elementami rósł do ćwierci ekranu (zmierzone przy pasku filtrów na /utwory tego samego dnia),
   a tutaj i tak stoi tuż nad listą, do której się odnosi. */
.zak-pasek{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 18px;
  padding:12px 16px;border:1px solid var(--ms-line);border-radius:12px;background:var(--ms-white)}
.zak-pasek-ile{font-weight:700}
.zak-pasek-suma{margin-left:auto}
.zak-pasek-btn{min-height:44px;padding:8px 16px;border:1px solid var(--ms-line);border-radius:999px;
  background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.zak-pasek-btn:hover{background:rgba(15,17,22,.05)}
.zak-pasek-btn:focus-visible{outline:3px solid #131628;outline-offset:2px;box-shadow:0 0 0 2px #fff}
@media(max-width:520px){
  .zak-pasek-suma{margin-left:0;width:100%}
}

/* 13.09.2026 (test reflow 320): portret z tekstem w kolumnie na bardzo wąskich ekranach */
@media (max-width:360px){.portrait-wrap{display:block !important}.portrait-wrap>*{max-width:100%;min-width:0}}

/* 13.09.2026: podpis przy generowanych obrazach hero (wizja), jak na stronie głównej i /edycja (tam wypalony w obrazie) */
.banner-hero .b-wizja{position:absolute;right:14px;bottom:8px;z-index:2;font-size:.78rem;letter-spacing:.01em;color:rgba(251,250,247,.8);pointer-events:none}

/* 13.09.2026: pasek zdjęciowy nagłówka sekcji (przeniesiony z cennik.html, działa na wszystkich stronach). Użycie: <div class="sec-head center sek-pas" style="--tlo:url(img/X.jpg)"> */
.sec-head.sek-pas{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);
  background:#0F1116 var(--tlo,none) center/cover no-repeat;color:#FBFAF7;
  padding:32px 26px;margin-bottom:26px;max-width:none}
.sec-head.sek-pas::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(15,17,22,.84),rgba(15,17,22,.78))}
.sec-head.sek-pas .sec-title,.sec-head.sek-pas p{color:#FBFAF7}
.sec-head.sek-pas .sec-sub{max-width:64ch}
.sec-head.sek-pas .sec-kicker{color:#B3ACFA}
@media(max-width:720px){.sec-head.sek-pas{background-image:var(--tlo-m,var(--tlo));padding:24px 18px}

  .sec-head.sek-pas{background-image:var(--tlo-m,var(--tlo));padding:24px 18px}
}

/* it6: cele dotyku i etykiety na telefonie (kontrola automatyczna: linki stopki 19 px, kickery 11.5 px) */
@media(max-width:600px){.ms-foot a{display:inline-block;padding:7px 0}.ms-foot li{margin:0}
  .sec-kicker,.b-kicker,.kicker{font-size:12px}.tag,.num,.skan-podpis{font-size:12.5px}}
/* it6b: karty w siatce g3 równej wysokości, przyciski .stack przy dolnej krawędzi */
.grid.g3>.card{display:flex;flex-direction:column}.grid.g3>.card>.stack{margin-top:auto}
/* it7b: zdjęcie na górze karty tekstowej (sekcje dowodów i kierunków na stronie głównej) */
.card>.karta-foto{display:block;width:calc(100% + 2*var(--card-pad,24px));margin:calc(-1*var(--card-pad,24px)) calc(-1*var(--card-pad,24px)) 14px;max-width:none;aspect-ratio:16/9;object-fit:cover;border-radius:14px 14px 0 0;height:auto}
/* it7d: zwinięte długie listy przedmiotów (/o-projekcie); siatka rekomendacji bez dziury przy 5 kartach */
.lista-przedmiotow summary{cursor:pointer;color:var(--ms-violet);font-weight:600;margin:6px 0}.lista-przedmiotow[open] summary{margin-bottom:8px}
@media(min-width:900px){.people-grid{grid-template-columns:repeat(6,1fr)}.people-grid>*{grid-column:span 2}
  .people-grid>*:nth-last-child(2):nth-child(3n+1),.people-grid>*:last-child:nth-child(3n+2){grid-column:span 3}
  .people-grid>*:last-child:nth-child(3n+1){grid-column:2/span 4}}
/* it7e: opisy i skróty wypowiedzi pod filmami na /media */
.yt-card .yt-opis{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--ms-ink)}.yt-card .yt-cytat{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--ms-violet);font-size:14.5px;line-height:1.5;color:var(--ms-ink);background:rgba(94,80,204,.06)}
.yt-card .yt-skrot{margin:8px 0 0;font-size:14px;color:var(--ms-muted)}.yt-card .yt-skrot summary{cursor:pointer;color:var(--ms-violet);font-weight:600}.yt-card .yt-skrot p{margin:6px 0 0;line-height:1.5}
/* it8c: ilustracja sekcji pod nagłówkiem (tabela 2 PRZYPISANIE.md GRAFIK) */
.sec .ilustracja{margin:0 0 24px;border-radius:var(--radius);overflow:hidden}.sec .ilustracja img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover}
/* it9a: podpis „zdjęcie poglądowe (wizja)” czytelny na każdym tle */
.banner-hero .b-wizja{background:rgba(15,17,22,.55);padding:3px 9px;border-radius:999px;color:rgba(251,250,247,.92)}
/* it9g: 7 kolumn stopki na szerokim ekranie (po dodaniu kolumny Spotkania Kontakt spadał do drugiego rzędu, +250 px na każdej stronie) */
@media(min-width:1101px){footer.ms-foot .fgrid{grid-template-columns:1.25fr repeat(6,1fr);gap:22px}}
/* it10a (ocena ChatGPT): podpisy pod zdjęciami dowodów; liczniki przy pigułkach menu ukryte (nagłówek lżejszy) */
.card .foto-podpis{margin:-6px 0 10px;color:var(--ms-muted);font-size:12.5px;line-height:1.4}
.ms-cnt{display:none}
/* it10b (ocena ChatGPT): sekcja dowodów — cytat profesora na całą szerokość ze zdjęciem z lewej, media i liczby niżej; tekst kart większy */
.grid.g3.dowody{grid-template-columns:1fr 1fr}.grid.g3.dowody>.card{font-size:15.5px}.grid.g3.dowody>.card p{font-size:15.5px;line-height:1.55}
@media(min-width:900px){.grid.g3.dowody>.card:first-child{grid-column:1/-1;display:grid;grid-template-columns:300px 1fr;column-gap:26px;align-items:start}
  .grid.g3.dowody>.card:first-child>.karta-foto{grid-row:1/span 6;width:100%;margin:0;aspect-ratio:4/3;border-radius:12px}
  .grid.g3.dowody>.card:first-child>.foto-podpis{grid-column:2}.grid.g3.dowody>.card:first-child>p:not(.foto-podpis){grid-column:2;font-size:18px;line-height:1.5}
  .grid.g3.dowody>.card:first-child>p.cmp-note,.grid.g3.dowody>.card:first-child>p:last-child{font-size:15px}}
@media(max-width:899px){.grid.g3.dowody{grid-template-columns:1fr}}
/* it10c (zgłoszenie WIEDZA): na telefonie nadtytuł i H1 leżą wyżej, a gradient ::after był u góry przezroczysty — dokładam przyciemnienie od góry, żeby kicker czytał się na jasnych zdjęciach */
@media(max-width:720px){.banner-hero::after{background:linear-gradient(180deg,rgba(15,17,22,.62) 0%,rgba(15,17,22,.35) 35%,rgba(15,17,22,.78) 100%)}}
/* it12d (ChatGPT P0, pomiar: na 390 px treść hero była wyższa niż zdjęcie i wchodziła pod nagłówek — H1 top −5 px):
   na telefonie hero rośnie z treścią: zdjęcie i nakładka w jednej komórce siatki, zdjęcie wypełnia komórkę */
@media(max-width:720px){.banner-hero{display:grid}.banner-hero picture,.banner-over{grid-area:1/1}.banner-hero picture{height:100%}
  .banner-hero img{height:100%;min-height:460px;max-height:none}.banner-over{position:relative;inset:auto;min-height:100%;padding:28px 0 max(32px,env(safe-area-inset-bottom))}}

/* it14: miniatury kart wideo w ramce 16:9 (P0), długie podtytuły sekcji na telefonie do lewej (P2) */
.yt-fr{overflow:hidden}.yt-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.yt-ph .yt-play{position:relative;z-index:1}
/* 20.09: welon nad miniaturą — dawniej był drugą warstwą tła w .yt-ph (site.js), teraz miniatura
   jest osobnym <img loading="lazy">, więc przyciemnienie musi być osobnym elementem nad nią. */
.yt-ph-cien{position:absolute;inset:0;background:linear-gradient(rgba(10,13,22,.28),rgba(10,13,22,.5));pointer-events:none}
@media(max-width:720px){.sec-head.center .sec-sub{text-align:left}}

/* Codex R2 P2: linki tekstowe w hero na zdjęciu — biały, podkreślony (kontrast) */
.banner-over .mini a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* 13.09 (recenzja własna): na telefonie hero strony głównej bez dopisków — kicker, H1, akapit, 2 przyciski, cena */
@media(max-width:720px){.banner-over .hero-dod{display:none}.banner-over .b-sub{font-size:16px;line-height:1.5}}

/* 13.09 (recenzja własna): ciemny hero bez zdjęcia (.ms-hero) na telefonie niższy — treść strony w pierwszym ekranie */
@media(max-width:720px){.ms-hero{padding:44px 20px 40px}.ms-hero .lead{font-size:16px}}

/* 13.09 (recenzja własna): pas dekoracyjny pod hero (kk-pasmo, aria-hidden) na telefonie zabiera ~110 px pierwszego ekranu — ukryty ≤720 px na wszystkich stronach */
@media(max-width:720px){.banner-hero.kk-pasmo{display:none}}


/* 13.09 it15: /metoda na telefonie; linki zewnętrzne w przyciskach oznaczone strzałką (WCAG G201) */
@media(max-width:720px){.banner-hero img[src$="metoda-hero-foto.jpg"]{object-position:63% 30%}}
.btn[target="_blank"]::after{content:" ↗";font-size:.9em;opacity:.8}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 13.09 (it15, dobra praktyka): na telefonie stały, skrócony przycisk „Zapisz się” obok hamburgera zamiast CTA schowanego w szufladzie */
/* 27/28.09.2026 (index-12, wiedza-12): min-height podniesiony z 40 do 44 px (cel dotyku WCAG/Apple,
   patrz komentarz przy .banner-hero powyżej „Minimum 44 px”); wygląd bez zmiany, bo wiersz nagłówka
   i tak jest wyższy niż 44 px. */
@media(max-width:980px){.ms-corner{display:flex;margin-left:auto}.ms-corner .ms-corner-link,.ms-corner .ms-konto{display:none}.ms-corner .ms-cta{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;font-size:14px;border-radius:10px;box-sizing:border-box}}

/* 13.09 (Michał: „kliknąłem 14 dni na odstąpienie i przeniosło mnie za nisko”): kotwice przewijają się pod przyklejony nagłówek */
[id]{scroll-margin-top:calc(var(--ms-head-h,124px) + 18px)}

.banner-hero img[src$="bony-na-prezent-hero-foto.jpg"]{object-position:66% 36%}
@media(max-width:720px){.banner-hero img[src$="bony-na-prezent-hero-foto.jpg"]{object-position:50% 30%}}

/* 13.09 (EDYCJA: nagłówek 390 px wystawał o 2 px po dodaniu „Zapisz się” obok hamburgera): ciaśniejszy wiersz nagłówka na wąskich telefonach */
@media(max-width:420px){.ms-headrow{gap:8px;padding:10px 12px}.ms-logo{gap:8px}.ms-logo .word b{font-size:21px}.ms-logo .word i{font-size:11px}.ms-corner .ms-cta{padding:6px 10px;font-size:13.5px}.ms-burger{padding:10px 8px;min-width:40px}}
/* 20.09 (pakiet E r33): pasmo 381-411 px, czyli iPhone 390 i Pixel 393, czyli najczęstsze dzisiaj telefony.
   Zmierzone na żywej roboczej: wiersz nagłówka potrzebował 411,8 px, więc KAŻDA podstrona dawała 10 px
   przesuwu w poziomie (hamburgerem wystającym za krawędź). Podtytuł zostaje w całości, w jednej linii,
   tylko o stopień mniejszy: to wystarcza, żeby wiersz zmieścił się bez chowania czegokolwiek. */
@media(max-width:411px){.ms-logo .word i{font-size:10px;letter-spacing:.01em}}
@media(max-width:380px){.ms-logo .word i{display:none}.ms-logo,.ms-logo .word{min-width:0}.ms-logo .word b{white-space:nowrap;font-size:20px}}
/* 20.09 (pakiet E r33): próg przesunięty z 340 na 359 px. Zmierzone na żywej roboczej: przy 341 px
   przycisk nagłówka wraca i wiersz potrzebuje 372 px, więc strona dostawała 19 px przesuwu w poziomie
   (przy 360 px mieści się i przesuwu nie ma). Próg zrównany z tą granicą. */
@media(max-width:359px){.ms-corner{display:none}}
/* 20.09 (pakiet E r34): pasmo 360-371 px. Wiersz nagłówka potrzebuje 372 px, więc od 360 do 371 px
   nie przewijał strony, ale zjadał własne prawe wcięcie i hamburger dotykał krawędzi ekranu.
   Brakujące 12 px zbierane z odstępów, a nie przez chowanie przycisku (360 px to najczęstsza
   szerokość Androida): wcięcie wiersza 12 na 10, odstępy 8 na 6, wcięcie przycisku 10 na 8,
   odstęp w logo 8 na 6. Razem 14 px, czyli 2 px zapasu. */
@media(min-width:360px) and (max-width:371px){
  .ms-headrow{gap:6px;padding-left:10px;padding-right:10px}
  .ms-logo{gap:6px}
  .ms-corner .ms-cta{padding-left:8px;padding-right:8px}
}

/* 13.09 (Michał: /sprzet jak dawna /zakupy-podstawowe, prawdziwe zdjęcia z Thomanna) */
.zak-karta img.zak-foto{aspect-ratio:1/1;object-fit:contain;background:#fff;padding:10px;border:1px solid var(--ms-line)}
.zak-sklep{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.03em;color:#0F1116;background:#36C6C6;vertical-align:middle}
.zak-wskazowka{max-width:820px;margin:0 0 20px;padding:14px 18px;border-radius:12px;background:rgba(94,80,204,.07);border:1px solid rgba(94,80,204,.18);font-size:15px;line-height:1.55}
.zak-wskazowka p{margin:0}.zak-wskazowka p+p{margin-top:8px}
.zak-pasek-btn+.zak-pasek-btn{margin-left:-6px}

/* 13.09 it16 */
.banner-hero img[src$="ksiazka-hero-foto.jpg"]{object-position:66% 23%}
@media(max-width:720px){.banner-hero img[src$="ksiazka-hero-foto.jpg"]{object-position:50% 17%}}
.zak-pasek{position:sticky;top:calc(var(--ms-head-h,124px) + 8px);z-index:5;background:var(--ms-white)}
.zak-lista{align-items:start}
.btn.is-disabled{opacity:.55;pointer-events:none}

/* 13.09 it16: pole „dolicz do sumy” większe (cel dotyku) */
.zak-karta .zak-pole{width:32px;height:32px;top:10px;right:10px}

/* 13.09 it16 (GRAFIKI 17c84b2): prawdziwe hero */
.banner-hero img[src$="badania-hero-foto.jpg"]{object-position:68% 36%}
.banner-hero img[src$="michal-drezner-hero-foto.jpg"]{object-position:66% 29%}
.banner-hero img[src$="rodzinne-muzykowanie-hero-foto.jpg"]{object-position:55% 60%}
@media(max-width:720px){.banner-hero img[src$="badania-hero-foto.jpg"]{object-position:50% 27%}.banner-hero img[src$="michal-drezner-hero-foto.jpg"]{object-position:50% 26%}.banner-hero img[src$="rodzinne-muzykowanie-hero-foto.jpg"]{object-position:58% 50%}}

/* 13.09 (Michał): pasek sekcji strony — przyklejony pod nagłówkiem, przewijany w bok na telefonie */
.spis-strony{position:sticky;top:var(--ms-head-h,124px);z-index:55;background:rgba(251,250,247,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--ms-line)}
.spis-strony-wrap{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.spis-strony-wrap::-webkit-scrollbar{display:none}
/* 28.09 (uwaga B w audycie: zakładki wewnętrzne zbyt podobne do górnego menu — te są pigułkami
   jak menu, więc na stronie wyglądały jak drugi rząd nawigacji). Zamiast pigułek: podkreślane
   zakładki, płaskie, bez tła i obwódki — inny wzorzec niż menu, rozpoznawalny jako spis treści
   strony, nie jako nawigacja serwisu. */
.spis-strony a{flex:none;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;
  padding:6px 4px;margin:0 9px;border:0;border-bottom:2.5px solid transparent;border-radius:0;
  color:var(--ms-muted);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;background:none}
.spis-strony a:hover{color:var(--ms-text)}
.spis-strony a.here{color:var(--ms-violet-2,#6055D6);border-bottom-color:var(--ms-violet-2,#6055D6)}
.spis-strony a:focus-visible{outline:3px solid var(--ms-violet-2);outline-offset:2px}
/* 19.09 (pakiet B, runda 2, uwaga CHAT: ucięty pasek zakładek na telefonie): do 720 px zakładki zawijają się
   w wiersze zamiast przewijać się w bok, więc żadna nie jest ucięta przy krawędzi ekranu (wcześniej lokalnie tylko /cennik) */
@media(max-width:720px){.spis-strony-wrap{padding:7px 0;flex-wrap:wrap;overflow-x:visible;justify-content:center;row-gap:6px}.spis-strony a{font-size:13px;padding:4px 10px;min-height:44px;box-sizing:border-box}}
/* 28.09 (koordynator): ≤480 px zawijanie do dwóch rzędów zabierało z sticky paskiem ok. 26% ekranu telefonu —
   jeden rząd, przewijany w poziomie (bez widocznego paska przewijania), cele dotyku zostają ≥44 px. */
@media(max-width:480px){.spis-strony-wrap{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;row-gap:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 24px;overscroll-behavior-x:contain}
  .spis-strony-wrap::-webkit-scrollbar{display:none}
  .spis-strony a{white-space:nowrap}
  /* 27/28.09.2026 (o-projekcie-13): przy jednym rzędzie na wąskim ekranie nic nie mówiło, że pasek się
     przewija (widać było 4 z 6 pozycji, bez śladu reszty) — delikatny cień przy prawej krawędzi.
     .spis-strony jest już „position:sticky”, więc to też jest poprawny kontekst dla ::after
     pozycjonowanego absolutnie, bez zmiany pozycjonowania paska. */
  .spis-strony::after{content:'';position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;
    background:linear-gradient(to left, rgba(251,250,247,.95), rgba(251,250,247,0))}}
[id]{scroll-margin-top:calc(var(--ms-head-h,124px) + 68px)}

/* 13.09 (GRAFIKI/EDYCJA 18:07): na telefonie hero jest siatką — atrybuty width/height na <img> nie mogą poszerzać kolumny tekstu przed wczytaniem zdjęcia */
@media(max-width:720px){.banner-hero{grid-template-columns:minmax(0,1fr)}.banner-hero picture,.banner-hero img{min-width:0;width:100%;max-width:100%}.banner-over{min-width:0;max-width:100%}}

/* 13.09 23:50 (Michał 19:09: „tekst na mobile jest jasny na jasnym tle zdjęcia… poprawić zdjęcia, żeby było widoczne, co jest na zdjęciu”):
   na telefonie hero = tekst na ciemnym pasie NAD zdjęciem, a zdjęcie pod nim bez przyciemnienia (wzór /program i /cennik). hero-telefon-tekst-nad-zdjeciem */
@media(max-width:720px){
  .banner-hero{display:flex;flex-direction:column;background:var(--ms-ink)}
  .banner-hero picture,.banner-over{grid-area:auto}
  .banner-over{order:0;position:relative;inset:auto;min-height:0;padding:26px 0 22px;background:var(--ms-ink)}
  .banner-hero picture{order:1;height:auto;display:block}
  .banner-hero img{height:auto;min-height:0;max-height:none;aspect-ratio:4/3;object-fit:cover;width:100%}
  .banner-hero::after,.banner-hero>div[aria-hidden]{display:none!important}
  .banner-over .b-sub{color:rgba(251,250,247,.9)}
  .banner-hero .b-wizja{top:auto;bottom:10px}
}

/* ===== 19.09.2026 (pakiet D): jedna Galeria /galeria: zdjęcia, filmy i posty (build/js/galeria.js) =====
   Zastępuje dawny blok „Posty i rolki” (posty.html, social.js) i pełnostronicowy tryb .mdl-galeria-pelna.
   Kafel pokazuje CAŁY kadr (object-fit: contain na ciemnym tle), bo Michał: „miniatury nie pokazują,
   co tam jest; poziome oglądane poziomo, pionowe pionowo”. Na telefonie ramka przyjmuje proporcje
   pliku (zmienna --r z kafle.json, w granicach 4:5 do 16:9). */
.gal{background:var(--ms-white);padding-top:30px}
/* 20.09 (pakiet D r4, paczka Michała): krótki nagłówek bez zdjęcia (to samo zdjęcie było w siatce)
   i bez białej karty z tekstem, żeby materiały były widoczne od razu po wejściu. */
.gal-naglowek{padding:34px 24px 30px}
.gal-naglowek h1{margin:0}
.gal-filtry{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 12px}
.gal-rodzaje{display:flex;flex-wrap:wrap;gap:8px}
.gal-filtr{border:1px solid rgba(15,17,22,.2);background:var(--ms-white);color:var(--ms-text);border-radius:999px;
  padding:8px 15px;min-height:42px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.gal-filtr:hover{border-color:var(--ms-violet-2)}
.gal-filtr[aria-pressed="true"]{background:var(--ms-violet-tekst);border-color:var(--ms-violet-tekst);color:#fff}
.gal-rok-etykieta{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ms-muted);font-weight:600;margin-left:auto}
.gal-rok{border:1px solid rgba(15,17,22,.2);border-radius:8px;padding:8px 10px;min-height:42px;font:inherit;font-size:14px;
  background:var(--ms-white);color:var(--ms-text)}
.gal-filtr:focus-visible,.gal-rok:focus-visible,.gal-strona:focus-visible,.gal-kafel:focus-visible{outline:3px solid var(--ms-violet-2);outline-offset:2px}
.gal-info{margin:0 0 18px;font-size:14px;color:var(--ms-muted)}
.gal-info:focus{outline:none}
.gal-siatka{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:20px 16px;align-items:start;min-height:100vh}   /* 20.09: karty postów mają różną wysokość, więc bez rozciągania */
.gal-gotowa .gal-siatka{min-height:0}
.gal-el{margin:0;min-width:0}
.gal-kafel{display:flex;flex-direction:column;width:100%;padding:0;border:1px solid var(--ms-line);border-radius:14px;
  overflow:hidden;background:var(--ms-white);text-align:left;cursor:zoom-in;font:inherit;color:inherit}
.gal-el-film .gal-kafel,.gal-el-post .gal-kafel{cursor:pointer}
/* 26.09 (P0 telefon): wysokość ramki z padding-top zamiast aspect-ratio — Safari na iPhonie zostawiał ramkę
   w przycisku z zerową wysokością (widać było same opisy); padding działa w każdej przeglądarce. */
.gal-ramka{position:relative;display:block;flex:none;width:100%;height:0;padding-top:100%;background:var(--ms-ink-2);overflow:hidden}
.gal-ramka img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:contain;transition:transform .25s}
.gal-kafel:hover .gal-ramka img{transform:scale(1.03)}
.gal-kafel:hover .mdl-kafel-play{background:var(--ms-violet-2)}
.gal-znak{position:absolute;right:10px;top:10px;background:rgba(15,17,22,.8);color:#FBFAF7;font-size:12.5px;font-weight:700;
  padding:4px 10px;border-radius:999px;pointer-events:none}
/* karta posta: układ jak we wpisie w serwisie (awatar, imię i data, oryginalny tekst, media) */
.gal-kafel-post{cursor:pointer}
.gal-post-glowa{display:flex;align-items:center;gap:10px;padding:13px 14px 8px;flex:none}
.gal-post-awatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.gal-post-nazwa{display:block;font-weight:700;font-size:14.5px;color:var(--ms-text);line-height:1.3}
.gal-post-data{display:block;font-size:12.5px;color:var(--ms-muted);line-height:1.3}
.gal-post-tekst{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:none;
  margin:0 14px 11px;font-size:14.5px;line-height:1.5;color:var(--ms-text);white-space:pre-line;overflow-wrap:anywhere}
  /* margines, nie dopełnienie: przy „overflow:hidden” w dopełnieniu widać było skrawek czwartej linii */
.gal-el-post .gal-ramka{border-radius:0}
.gal-podpis{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;font-size:14px;line-height:1.45}
.gal-podpis-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:var(--ms-text)}
.gal-podpis-m{font-size:13px;color:var(--ms-muted)}
.gal-brak{color:var(--ms-muted);padding:24px 0;text-align:center}
.gal-strony{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:32px 0 6px}
.gal-strony[hidden]{display:none}
.gal-strony-numery{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.gal-strona{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;
  border-radius:10px;border:1px solid rgba(15,17,22,.2);color:var(--ms-text);text-decoration:none;font-weight:700;font-size:15px;background:var(--ms-white)}
a.gal-strona:hover{border-color:var(--ms-violet-2);color:var(--ms-violet-tekst)}
.gal-strona[aria-current="page"]{background:var(--ms-violet-tekst);border-color:var(--ms-violet-tekst);color:#fff}
.gal-strona[aria-disabled="true"]{color:var(--ms-muted);opacity:.6}
.gal-strona-luka{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ms-muted)}
@media(max-width:640px){
  .gal{padding-top:32px}
  .gal-siatka{grid-template-columns:1fr;gap:16px}
  .gal-ramka{padding-top:calc(100% / var(--r,1))}
  .gal-rok-etykieta{margin-left:0}
  .gal-strony-numery{order:-1;width:100%;justify-content:center}
  .gal-strona-krok{flex:1 1 40%}
}

/* podgląd: jeden dla zdjęć, filmów i postów. Zdjęcie zajmuje prawie cały ekran (Michał: „podgląd
   zdjęcia jest za mały”); post na szerokim ekranie ma tekst obok zdjęcia, na telefonie pod nim. */
body.gal-lupa-otwarta{overflow:hidden}
.gal-lupa{position:fixed;inset:0;z-index:130;background:#0A0C11;display:grid;
  grid-template-columns:68px minmax(0,1fr) 68px;align-items:center;color:#FBFAF7}
.gal-lupa[hidden]{display:none}
.gal-lupa-scena{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100vh;height:100dvh;padding:14px 0 12px;min-width:0}
.gal-lupa-media{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;touch-action:none}
.gal-lupa-media img.gal-lupa-podglad{filter:blur(1.5px)}
.gal-lupa-media img{transition:filter .18s ease-out}
.gal-lupa-media img.gal-lupa-duch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;will-change:transform}
.gal-lupa-media img,.gal-lupa-media video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;display:block;background:#000}
.gal-lupa-media iframe{width:min(1100px,100%);aspect-ratio:16/9;max-height:100%;border:0;border-radius:8px;background:#000}
.gal-lupa-kolumna{flex:0 0 auto;width:100%;max-width:820px;display:flex;flex-direction:column;gap:10px;padding-top:8px}
.gal-lupa-opis{display:flex;flex-direction:column;gap:10px}
.gal-lupa-opis:focus-visible{outline:2px solid var(--ms-violet-lt);outline-offset:4px}
.gal-lupa-podpis{margin:0;text-align:center;font-size:15px;line-height:1.4;color:rgba(251,250,247,.88)}
.gal-lupa-glowa{margin:0;font-size:14px;color:rgba(251,250,247,.72)}
.gal-lupa-glowa b{color:#FBFAF7}
.gal-lupa-tekst{margin:0;font-size:15.5px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;color:#FBFAF7}
.gal-lupa-zrodlo{margin:0;font-size:12.5px;line-height:1.45;color:rgba(251,250,247,.62)}
.gal-lupa-miniatury{display:flex;flex-wrap:wrap;gap:6px}
.gal-lupa-miniatury[hidden]{display:none}
.gal-lupa-mini{position:relative;width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#000;cursor:pointer}
.gal-lupa-mini img{width:100%;height:100%;object-fit:cover;display:block;opacity:.72}
.gal-lupa-mini[aria-current="true"]{border-color:var(--ms-violet-lt)}
.gal-lupa-mini[aria-current="true"] img,.gal-lupa-mini:hover img{opacity:1}
.gal-lupa-mini-film{position:absolute;inset:0;pointer-events:none}
.gal-lupa-mini-film::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-style:solid;
  border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff}
.gal-lupa-licznik{position:absolute;left:18px;top:16px;margin:0;z-index:2;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:13px;color:rgba(251,250,247,.72)}
.gal-lupa-x{position:absolute;top:10px;right:12px;z-index:3;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(251,250,247,.16);color:#fff;font-size:28px;line-height:1}
.gal-lupa-nav{grid-row:1;justify-self:center;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(251,250,247,.16);color:#fff;font-size:30px;line-height:1}
/* F949 (15.10.2026): przeglądanie góra/dół, więc strzałki ▲ ▼ stoją jedna pod drugą po prawej stronie */
.gal-lupa-w,.gal-lupa-d{grid-column:3;align-self:center}
.gal-lupa-w{transform:translateY(-36px)}
.gal-lupa-d{transform:translateY(36px)}
.gal-lupa-nav{font-size:20px}
.gal-lupa-media img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.gal-lupa-media img:focus-visible{outline:3px solid var(--ms-violet-lt);outline-offset:-3px}
.gal-lupa-zoom img:not(.gal-lupa-duch){cursor:grab}
.gal-lupa-zoom img:not(.gal-lupa-duch):active{cursor:grabbing}
.gal-lupa-x:hover,.gal-lupa-nav:hover{background:rgba(251,250,247,.3)}
.gal-lupa-x:focus-visible,.gal-lupa-nav:focus-visible,.gal-lupa-mini:focus-visible{outline:3px solid var(--ms-violet-lt);outline-offset:2px}
.gal-lupa-post .gal-lupa-kolumna{max-height:36vh;overflow:auto;padding-right:4px}
@media(min-width:900px){
  .gal-lupa-post .gal-lupa-scena{flex-direction:row;align-items:stretch;gap:22px;padding:18px 0}
  .gal-lupa-post .gal-lupa-kolumna{width:min(380px,34vw);max-width:none;max-height:none;overflow:auto;padding:52px 8px 8px 0}
}
@media(max-width:640px){
  .gal-lupa{grid-template-columns:0 minmax(0,1fr) 0}
  .gal-lupa-scena{padding:62px 8px 12px}
  .gal-lupa-nav{position:absolute;top:50%;width:44px;height:44px;font-size:18px;background:rgba(15,17,22,.6);z-index:2}
  .gal-lupa-w{right:6px;transform:translateY(calc(-100% - 4px))}
  .gal-lupa-d{right:6px;transform:translateY(4px)}
  .gal-lupa-post .gal-lupa-kolumna{max-height:40vh}
}
@media (prefers-reduced-motion: reduce){
  .gal-ramka img{transition:none}
  .gal-kafel:hover .gal-ramka img{transform:none}
}


/* ===== Cztery wersje karty „Prawo jazdy…” (polecenie Michała 20.09) =====
   Wersje różnią się tylko nagłówkiem i polem 9, więc w DOM stoją cztery awersy
   i JEDEN wspólny rewers. Przełącznik na radiach — bez JS.
   .kw-slot ma display:contents, żeby aktywny awers był bezpośrednim dzieckiem
   .karta-para i brał jej reguły rozmiaru bez żadnej zmiany. */
.karta-warianty{position:relative;margin-top:6px}
.kw-cap{margin:0 0 8px;text-align:center;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ms-muted)}
.kw-r{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.kw-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 14px}
.kw-tabs label{display:inline-block;cursor:pointer;border:1px solid rgba(129,119,245,.5);
  border-radius:999px;padding:7px 14px;font-size:14px;line-height:1.25;
  color:var(--ms-text);background:transparent;transition:background .15s,border-color .15s,color .15s}
.kw-tabs label:hover{border-color:var(--ms-violet);background:rgba(129,119,245,.10)}
.kw-slot{display:none}
#kw1:checked ~ .karta-para .kw-slot[data-kw="1"],
#kw2:checked ~ .karta-para .kw-slot[data-kw="2"],
#kw3:checked ~ .karta-para .kw-slot[data-kw="3"],
#kw4:checked ~ .karta-para .kw-slot[data-kw="4"]{display:contents}
#kw1:checked ~ .kw-tabs label[for="kw1"],
#kw2:checked ~ .kw-tabs label[for="kw2"],
#kw3:checked ~ .kw-tabs label[for="kw3"],
#kw4:checked ~ .kw-tabs label[for="kw4"]{background:var(--ms-violet-tekst);
  border-color:var(--ms-violet-tekst);color:#fff;font-weight:600}
#kw1:focus-visible ~ .kw-tabs label[for="kw1"],
#kw2:focus-visible ~ .kw-tabs label[for="kw2"],
#kw3:focus-visible ~ .kw-tabs label[for="kw3"],
#kw4:focus-visible ~ .kw-tabs label[for="kw4"]{outline:3px solid var(--ms-violet);outline-offset:2px}
@media(max-width:420px){.kw-tabs{gap:6px}.kw-tabs label{padding:6px 11px;font-size:13px}}
@media (prefers-reduced-motion: reduce){.kw-tabs label{transition:none}}
/* Nazwy wersji 3 i 4 są dłuższe od pozostałych. Przy karcie węższej niż ok. 300 px
   dolna granica clamp() trzymała nagłówek na 8 px, więc łamał się na dwie linie
   i wypychał pole 9 poza kartę (zmierzone: 5,4 px przy 390 px). Obniżona granica
   dotyczy WYŁĄCZNIE awersów w przełączniku — wspólne reguły karty zostają. */
.karta-para .kw-slot .karta-mock .km-typ{font-size:clamp(7.4px,2.56cqw,10.5px)}
/* Przy 320 px karta miała 230 px szerokości (24 px wcięcia .wrap + 21 px wcięcia
   bloku rozwijanego z każdej strony) i treść nie mieściła się w proporcji 85,6:54.
   Zamiast zmniejszać tekst, karta odzyskuje te wcięcia: przy 320 px ma 300 px,
   czyli tyle samo co przy 390 px, gdzie mieści się z zapasem. Zostaje 10 px luzu
   z każdej strony, więc strona nie przewija się w bok. */
@media(max-width:384px){.karta-warianty{margin-left:-35px;margin-right:-35px}}

/* ===== Filmoteka: własna płytka zamiast miniatury z YouTube (20.09) =====
   Do 20.09 każda z 61 kart pokazywała przed kliknięciem miniaturę pobraną z YouTube i trzymaną
   u nas w img/ytx/ (61 plików, 3,5 MB). To było przechowywanie cudzego materiału na serwerze
   Michała, a wczytywanie miniatur wprost z serwerów YouTube złamałoby obietnicę z polityki
   prywatności, że połączenie z YouTube następuje dopiero po kliknięciu. Trzecia droga: przed
   kliknięciem karta pokazuje NASZĄ płytkę — kategoria, tytuł, wykonawca albo źródło i znak
   odtwarzania. Treść płytki pochodzi z tych samych danych, które karta już miała; nic nowego
   nie jest dopisywane. Odtwarzacz (youtube-nocookie) wchodzi tak jak dotąd: dopiero po kliknięciu.
   Cały blok jest zamknięty w .yt-plyty — klasie siatek samej filmoteki — żeby karty wideo na
   /media, /o-mnie i /o-projekcie (własne nagrania Michała z własnymi plakatami) zostały
   dokładnie takie, jakie są, i żeby nic nie wyciekło poza komponent. */
.yt-plyty.yt-akc-a{--yt-akc:#F0A93B;--yt-akc-mgla:rgba(240,169,59,.16)}
.yt-plyty.yt-akc-b{--yt-akc:#B3ACFA;--yt-akc-mgla:rgba(179,172,250,.18)}
.yt-plyty.yt-akc-c{--yt-akc:#8177F5;--yt-akc-mgla:rgba(129,119,245,.24)}
/* ramka przestaje być kadrem 16:9 — płytka ma wysokość swojej treści; kadr wraca w chwili
   kliknięcia (site.js ustawia aspect-ratio na ramce tuż przed wstawieniem odtwarzacza) */
.yt-plyty .yt-fr,.yt-plyty .yt-card .yt-drugi .yt-fr{aspect-ratio:auto;background:transparent}
.yt-plyty .yt-ph{position:relative;inset:auto;min-height:100px;
  display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:start;
  padding:13px 15px 15px;text-align:left;font-family:'DM Sans','DM Sans Fallback',system-ui,sans-serif;
  background:radial-gradient(135% 130% at 100% 0%,var(--yt-akc-mgla),transparent 62%),
             linear-gradient(158deg,#1C202B 0%,#0F1116 76%);
  border-bottom:1px solid rgba(251,250,247,.10);transition:box-shadow .15s}
.yt-plyty .yt-ph::before{content:var(--kat,'');grid-column:1;grid-row:1;align-self:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.13em;
  line-height:1.2;text-transform:uppercase;color:var(--yt-akc);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt-plyty .yt-play{grid-column:2;grid-row:1;justify-self:end;align-self:center;
  width:40px;height:40px;background:rgba(251,250,247,.10);border-color:rgba(251,250,247,.72);
  box-shadow:none}
.yt-plyty .yt-tyt{grid-column:1/-1;font-size:15px;font-weight:600;line-height:1.33;
  letter-spacing:-.005em;color:var(--ms-white)}
.yt-plyty .yt-tyt .yt-oryg{font-style:italic;font-weight:400;color:rgba(251,250,247,.58)}
.yt-plyty .yt-zr{grid-column:1/-1;align-self:end;font-size:12px;line-height:1.45;
  color:rgba(251,250,247,.64)}
.yt-plyty.yt-filmy .yt-tyt{font-size:16.5px}
.yt-plyty .yt-ph:hover{box-shadow:inset 0 0 0 1px var(--yt-akc)}
.yt-plyty .yt-ph:hover .yt-play{background:rgba(251,250,247,.24);border-color:#FBFAF7}
/* ===== /pomoc: „Gdzie szukać pomocy” (reguły z 20.09, pakiet E r44-r45, przeniesione w r54) =====
   Reguły przypięte do tej JEDNEJ strony przez `body[data-page="pomoc"]`; wspólnego mechanizmu
   nagłówka i stopki nie ruszamy. Powod: na stronie o telefonach zaufania nie ma żadnego wejścia
   do oferty. Zderzenie oferty z tematem kryzysu jest w złym guście niezależnie od zasad projektu.
   20.09 (r54): pierwotnie stały przy `body[data-page="wsparcie"]`, czyli przy nowej stronie
   z trzema numerami, zbudowanej bez sprawdzenia, że „Gdzie szukać pomocy” istnieje i jest bogatsza.
   `/wsparcie` zwinięte i przekierowane tutaj; reguły ochronne przeszły razem z zadaniem strony. */
body[data-page="pomoc"] .ms-corner .ms-cta{display:none}
/* 20.09 (r45, decyzja koordynatora po uwadze łącznika): ukrycie przycisku sprzedażowego zatrzymało się
   w pół drogi. Kilka ekranów pod numerem 112 stała w stopce instrukcja przelewu (BLIK i „w tytule wpisz,
   za co płacisz”) oraz mapa strony prowadząca do oferty. Na tej JEDNEJ stronie zostaje to, co musi:
   e-mail, telefon i SMS oraz dane rejestrowe. Znika płatność, obietnica oddzwonienia i mapa strony.
   Pływający czat też znika: strona mówi wprost „nie prowadzę pomocy w kryzysie”, więc przycisk obiecujący
   rozmowę natychmiast stoi z tym w sprzeczności, a człowiek w złym stanie rozstrzygnie ją na swoją niekorzyść.
   Jedynym wezwaniem do działania na tej stronie są trzy numery. */
body[data-page="pomoc"] .ms-foot .mdfoot-platnosc,
body[data-page="pomoc"] .ms-foot .mdfoot-oddzwonie,
body[data-page="pomoc"] .ms-foot .mdfoot-oddzwonie + br,
body[data-page="pomoc"] .ms-foot .fgrupa,
body[data-page="pomoc"] .ms-foot .fgrid > div:first-child,
body[data-page="pomoc"] .mdl-launcher{display:none}
/* Poniższe cztery reguły obsługują wyłącznie stronę `/wsparcie`, zwiniętą w r54. Plik źródłowy
   `build/pages/wsparcie.html` zostaje, więc reguły zostają razem z nim; gdyby strona nigdy nie wróciła,
   można je usunąć razem z plikiem. */
.wsp-lista{display:grid;gap:14px;margin-top:24px}
.wsp-poz{border:1px solid var(--ms-line,#E6E3EF);border-radius:14px;padding:18px 20px;background:var(--ms-card,#fff)}
.wsp-numer{display:inline-block;font-family:'DM Sans','DM Sans Fallback',system-ui,sans-serif;font-weight:700;
  font-size:clamp(30px,8.5vw,40px);line-height:1.1;letter-spacing:-.01em;
  color:var(--ms-ink,#15131C);text-decoration:none;
  /* pole dotyku co najmniej 48 px wysokości i 64 px szerokości, także dla krótkiego „112”;
     ujemne marginesy trzymają tekst w tej samej linii co reszta bloku */
  padding:7px 10px;margin:-7px -10px 0;min-width:64px;min-height:48px;box-sizing:border-box;border-radius:10px}
.wsp-numer:hover,.wsp-numer:focus-visible{color:var(--ms-violet,#5E50CC);text-decoration:underline}
.wsp-poz p{margin:0;font-size:16px;line-height:1.55;color:var(--ms-ink,#15131C)}

/* 20.09 (pakiet E r42, polecenie Michała „chcę wszędzie miniatury w filmotece”): na każdej karcie
   wraca obrazek. Treściowo pozwala na to D156 (cudze oficjalne materiały promocyjne). Technicznie
   pliki leżą U NAS (`build/img/ytx/*.webp`, 61 sztuk, 0,96 MB razem, pobrane raz skryptem
   `narzedzia/filmoteka/miniatury.py`), więc przeglądarka odwiedzającego nadal nie łączy się
   z YouTube przed kliknięciem. Obrazek wstawia site.js jako <img loading="lazy"> na podstawie
   atrybutu `data-th`, więc wchodzi tylko to, co blisko ekranu.
   Układ: ramka wraca do kadru 16:9, obrazek wypełnia kartę, a tekst płytki (kategoria, tytuł,
   źródło, znak odtwarzania) siedzi NAD obrazkiem przy dolnej krawędzi, na ciemnym welonie.
   Nic z treści płytki nie ubywa. */
/* 20.09 (r47, decyzja Michała po ocenie prawnej): miniatura NIETKNIĘTA. Oryginalny plik z YouTube,
   bez konwersji formatu, bez kadrowania, bez welonu, a tekst płytki POD obrazem, nie na nim.
   Dlatego ramka nie narzuca kadru 16:9: obraz wchodzi we własnych proporcjach, z czarnymi pasami
   tam, gdzie YouTube je ma (12 z 62 filmów nie ma wersji maxresdefault). Welon jest wyłączony
   tylko w Filmotece; na /media i /o-mnie karty z własnymi plakatami Michała zostają bez zmian. */
.yt-plyty .yt-fr,.yt-plyty .yt-card .yt-drugi .yt-fr{aspect-ratio:auto;background:transparent}
.yt-plyty .yt-ph{position:relative;inset:auto;min-height:0;align-content:start;padding:0 0 15px;
  background:radial-gradient(135% 130% at 100% 0%,var(--yt-akc-mgla),transparent 62%),
             linear-gradient(158deg,#1C202B 0%,#0F1116 76%)}
.yt-plyty .yt-ph img{position:relative;inset:auto;width:100%;height:auto;display:block;
  grid-column:1/-1;grid-row:1;margin:0 0 4px;object-fit:fill}
.yt-plyty .yt-ph-cien{display:none}
.yt-plyty .yt-ph::before{grid-row:2;margin-left:15px}
.yt-plyty .yt-play{grid-row:2;margin-right:15px}
.yt-plyty .yt-tyt,.yt-plyty .yt-zr{padding:0 15px}

/* Oznaczenie źródła pod opisem: ikona i słowo YouTube z odnośnikiem do konkretnego filmu,
   oryginalny tytuł i nazwa kanału bez zmian, oraz wyraźne zaznaczenie, że polski opis jest nasz.
   Ikona jest tłem w CSS, żeby nie powtarzać 61 razy tego samego SVG w treści strony. */
.yt-zrodlo{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ms-muted,#5B5668)}
.yt-zrodlo-link{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:underline}
.yt-zrodlo-link::before{content:"";width:18px;height:13px;flex:none;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath fill='%23FF0000' d='M27.4 3.1A3.5 3.5 0 0 0 24.9.6C22.7 0 14 0 14 0S5.3 0 3.1.6A3.5 3.5 0 0 0 .6 3.1C0 5.3 0 10 0 10s0 4.7.6 6.9a3.5 3.5 0 0 0 2.5 2.5C5.3 20 14 20 14 20s8.7 0 10.9-.6a3.5 3.5 0 0 0 2.5-2.5c.6-2.2.6-6.9.6-6.9s0-4.7-.6-6.9z'/%3E%3Cpath fill='%23fff' d='M11.2 14.3 18.4 10l-7.2-4.3z'/%3E%3C/svg%3E")}
.yt-zrodlo-link:hover{color:var(--ms-ink,#15131C)}
.yt-nasz{font-style:italic}

/* pod płytką zostaje sam akapit „dlaczego warto”; przy drugim zwiastunie .yt-meta bywa pusta */
.yt-plyty .yt-meta{padding:13px 15px 14px}
.yt-plyty .yt-meta:empty{display:none}
.yt-plyty .yt-meta p{margin:0}
/* Na szerokim ekranie w wąskich siatkach (cztery karty w rzędzie) tytuły mają od jednej do
   czterech linii i dolne krawędzie płytek w rzędzie wypadały na różnych wysokościach. Miejsce na
   trzy linie tytułu wyrównuje większość rzędów; wiersz źródła i tak siedzi przy dolnej krawędzi. */
@media(min-width:721px){.yt-plyty:not(.yt-filmy) .yt-tyt{min-height:3.99em}}

/* 21.09.2026: sekcja „Co daje nauka muzyki” na /dlaczego-dziala. */
.dwie-kolumny{display:grid;grid-template-columns:1fr;gap:28px;margin-top:8px}
@media(min-width:860px){.dwie-kolumny{grid-template-columns:1fr 1fr;gap:40px}}
.lista-korzysci{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.lista-korzysci li{padding-left:18px;border-left:3px solid var(--fiolet,#8177F5)}
.lista-korzysci p{margin:0}
.lista-korzysci .zrodlo{margin-top:6px;opacity:.72}
.granica-kompetencji{margin-top:28px;padding:16px 18px;border-radius:12px;
  background:rgba(129,119,245,.10);font-size:.95em}

/* 21.09.2026 (Michał): „pokazuj też rok zdjęcia”. */
.gal-rok-znak{position:absolute;left:8px;bottom:8px;z-index:2;background:rgba(15,17,22,.78);color:#FBFAF7;
  border-radius:7px;padding:3px 8px;font:600 12px/1 system-ui;font-variant-numeric:tabular-nums;letter-spacing:.3px}
/* 26.09.2026 (S3): własne ikony instrumentów zamiast zdjęć produktowych sklepu (img/ikony/*.svg) */
.card>img.karta-ikona{display:block;width:72px;height:72px;margin:0 0 12px}
.zak-karta img.zak-ikona{aspect-ratio:auto;width:96px;height:96px;margin:4px 0 12px;padding:14px;object-fit:contain;background:rgba(94,80,204,.07);border:0;border-radius:14px}
/* 26.09.2026 (S3, paczka OPUS-FIRST plik 09): galeria na komputerze jako rzędy wyrównane do wysokości.
   Szerokość kafla wynika z proporcji zdjęcia (--rd), więc nic nie jest obcinane ani wpisywane w kwadrat;
   kolejność w DOM i klawiatura bez zmian. Co dziewiąty kadr większy. Na telefonie (do 640 px) zostaje
   jedna kolumna z padding-top (nie wracać do aspect-ratio: puste kafle w Safari). */
@media(min-width:641px){
  .gal .wrap{max-width:1560px}
  .gal-siatka{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;--h:clamp(170px,15vw,270px)}
  .gal-siatka::after{content:"";flex:1000000 1 0}
  .gal-el{flex:calc(var(--rd,1.5) * 100) 1 calc(var(--rd,1.5) * var(--h))}
  .gal-el-akcent{flex:calc(var(--rd,1.5) * 125) 1 calc(var(--rd,1.5) * var(--h) * 1.25)}
  .gal-el-post{flex:1 1 320px}
  .gal-ramka{padding-top:calc(100% / var(--rd,1))}
  .gal-el-post .gal-ramka{padding-top:100%}
  .gal-kafel{position:relative;border-radius:10px}
  /* opis na kaflu dopiero po najechaniu albo ustawieniu ogniska klawiaturą */
  .gal-el:not(.gal-el-post) .gal-podpis{position:absolute;left:0;right:0;bottom:0;z-index:3;gap:2px;padding:26px 12px 10px;
    background:linear-gradient(180deg,rgba(15,17,22,0),rgba(15,17,22,.86) 55%);pointer-events:none;
    opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
  .gal-el:not(.gal-el-post) .gal-podpis-t{-webkit-line-clamp:2;color:#FBFAF7;font-size:13.5px;line-height:1.35}
  .gal-el:not(.gal-el-post) .gal-podpis-m{color:rgba(251,250,247,.78);font-size:12px}
}
@media(min-width:641px) and (hover:hover){
  .gal-kafel:hover .gal-podpis,.gal-kafel:focus-visible .gal-podpis{opacity:1!important;transform:none!important}
}
@media(min-width:641px) and (hover:none){
  .gal-kafel:focus-visible .gal-podpis{opacity:1!important;transform:none!important}
}
@media (prefers-reduced-motion: reduce){
  .gal-el:not(.gal-el-post) .gal-podpis{transform:none!important;transition:none}
}
/* 26.09.2026 (S3, polecenie Michała): telefon jak Zdjęcia w iOS. Kwadratowe miniatury przylegające do siebie
   (odstęp 2 px), 3, 5 albo 7 kolumn (szczypanie albo przełącznik), podpisy tylko w podglądzie.
   Kategorie: poziomo przewijany pasek chipów nad siatką. */
.gal-tagi{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.gal-tagi[hidden]{display:none}
.gal-gestosc{display:none}
@media(max-width:640px){
  .gal-tagi{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding:0 24px;margin:0 -24px 14px;padding:2px 24px 6px;scrollbar-width:none}
  .gal-tagi::-webkit-scrollbar{display:none}
  .gal-tagi .gal-filtr{flex:none;scroll-snap-align:start;white-space:nowrap}
  .gal-gestosc{display:flex;gap:0;margin-left:auto;border:1px solid rgba(15,17,22,.2);border-radius:999px;overflow:hidden}
  .gal-gest{min-width:44px;min-height:42px;padding:0 6px;border:0;background:var(--ms-white);color:var(--ms-text);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
  .gal-gest+.gal-gest{border-left:1px solid rgba(15,17,22,.15)}
  .gal-gest[aria-pressed="true"]{background:var(--ms-violet-tekst);color:#fff}
  .gal-gest:focus-visible{outline:3px solid var(--ms-violet-2);outline-offset:-3px}
  .gal-rok-etykieta{margin-left:0}
  .gal-siatka.gal-ios{grid-template-columns:repeat(var(--kol,3),minmax(0,1fr));gap:2px;margin:0 -24px;touch-action:pan-y;min-height:0}
  .gal-siatka.gal-ios[data-kol="3"]{--kol:3}
  .gal-siatka.gal-ios[data-kol="5"]{--kol:5}
  .gal-siatka.gal-ios[data-kol="7"]{--kol:7}
  .gal-ios .gal-kafel{border:0;border-radius:0;background:var(--ms-ink-2)}
  .gal-ios .gal-ramka{padding-top:100%}
  .gal-ios .gal-ramka img{object-fit:cover;transition:none}
  .gal-ios .gal-kafel:hover .gal-ramka img{transform:none}
  .gal-ios .gal-podpis,.gal-ios .gal-rok-znak{display:none}
  .gal-ios .gal-kafel:focus-visible{outline:3px solid var(--ms-violet-lt);outline-offset:-3px;position:relative;z-index:1}
  .gal-ios[data-kol="5"] .mdl-kafel-czas,.gal-ios[data-kol="7"] .mdl-kafel-czas{display:none}
  .gal-ios[data-kol="3"] .mdl-kafel-play{width:34px;height:34px}
  .gal-ios[data-kol="5"] .mdl-kafel-play{width:22px;height:22px;border-width:1px}
  .gal-ios[data-kol="7"] .mdl-kafel-play{width:14px;height:14px;border-width:1px}
  .gal-ios[data-kol="5"] .mdl-kafel-play::after,.gal-ios[data-kol="7"] .mdl-kafel-play::after{transform:translate(-30%,-50%) scale(.5)}
  .gal-ios .mdl-kafel-czas{right:4px;bottom:4px;font-size:11px;padding:1px 5px}
}
@media(max-width:640px){
  /* filtry w dwóch niskich rzędach, żeby siatka zaczynała się wyżej */
  .gal-rodzaje{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:0 24px;width:calc(100% + 48px)}
  .gal-rodzaje::-webkit-scrollbar{display:none}
  .gal-rodzaje .gal-filtr{flex:none;white-space:nowrap;padding:8px 13px;font-size:14.5px}
  .gal-filtry{gap:8px 12px;margin-bottom:8px}
  .gal-info{margin-bottom:12px}
}
/* 26.09.2026 (S3): tryb „Wybierz” w galerii (tylko robocza; przycisk tworzy galeria.js wyłącznie na mdl-robocza.pages.dev) */
.gal-wybierz[aria-pressed="true"]{background:var(--ms-violet-tekst);border-color:var(--ms-violet-tekst);color:#fff}
.gal-wybor{position:sticky;top:calc(var(--ms-head-h,124px) + 8px);z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin:0 0 12px;padding:10px 12px;border-radius:14px;background:var(--ms-white);border:1px solid var(--ms-violet-2);box-shadow:0 4px 18px rgba(15,17,22,.14)}
.gal-wybor[hidden]{display:none}
.gal-wybor-licznik{font-weight:700;margin-right:auto}
.gal-wybor-usun{background:#B3261E;border-color:#B3261E;color:#fff}
.gal-wybor-usun:disabled{opacity:.45;cursor:default}
.gal-wybor-komunikat:empty{display:none}
.gal-wybor-komunikat{font-weight:700;color:var(--ms-violet-tekst)}
body.gal-wybor-aktywny .gal-kafel{position:relative;cursor:pointer}
.gal-kafel.gal-zazn::before,.gal-kafel.gal-usun::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none}
.gal-kafel.gal-zazn::before{background:rgba(84,73,204,.38);box-shadow:inset 0 0 0 3px var(--ms-violet-lt)}
.gal-kafel.gal-usun::before{background:rgba(15,17,22,.62)}
.gal-znacznik{position:absolute;z-index:5;right:6px;top:6px;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font:700 14px/1 system-ui;pointer-events:none;background:var(--ms-violet-tekst);color:#fff}
.gal-kafel.gal-usun .gal-znacznik{background:#B3261E;font-size:11px;left:6px;right:auto;top:auto;bottom:6px}
.gal-ios[data-kol="7"] .gal-znacznik{min-width:16px;height:16px;right:2px;top:2px;font-size:10px;padding:0 3px}
.gal-ios[data-kol="7"] .gal-kafel.gal-usun .gal-znacznik,.gal-ios[data-kol="5"] .gal-kafel.gal-usun .gal-znacznik{font-size:0;padding:0;min-width:10px;height:10px;left:3px;bottom:3px}
.gal-wybor{padding:8px 10px;gap:6px 8px}
.gal-wybor .gal-filtr{padding:6px 12px;min-height:38px}
.gal-wybor-licznik{font-size:15px}
@media(max-width:640px){.gal-wybor{margin:0 -8px 10px}.gal-wybor .gal-filtr{font-size:13.5px;padding:6px 10px}}
/* 26.09.2026 (S3): etykiety kategorii w podglądzie galerii (klik = filtr) */
.gal-lupa-kat{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:2px}
.gal-lupa-kat-btn{min-height:32px;padding:4px 12px;border-radius:999px;border:1px solid rgba(251,250,247,.4);background:transparent;color:rgba(251,250,247,.9);font:600 13px/1.2 inherit;font-family:inherit;cursor:pointer}
.gal-lupa-kat-btn:hover{background:rgba(251,250,247,.16)}
.gal-lupa-kat-btn:focus-visible{outline:3px solid var(--ms-violet-lt);outline-offset:2px}
/* 26.09.2026 (S3): okno „Uwaga do zaznaczonych” w galerii (tylko robocza) */
.gal-okno-tlo{position:fixed;inset:0;z-index:200;background:rgba(15,17,22,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.gal-okno{width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;background:var(--ms-white);border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.gal-okno h2{margin:0 0 8px;font-size:20px}
.gal-okno-etykieta{display:block;font-size:14px;color:var(--ms-muted,#555);margin-bottom:8px}
.gal-okno textarea{width:100%;box-sizing:border-box;min-height:96px;padding:10px 12px;border:1px solid rgba(15,17,22,.3);border-radius:10px;font:inherit;font-size:16px;resize:vertical}
.gal-okno textarea:focus-visible{outline:3px solid var(--ms-violet-lt);outline-offset:1px}
.gal-okno-licznik{text-align:right;font-size:13px;color:var(--ms-muted,#555);margin:4px 0}
.gal-okno-blad{color:#B3261E;font-weight:700;margin:4px 0;min-height:0}
.gal-okno-blad:empty{display:none}
.gal-okno-przyciski{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.gal-okno-wyslij{background:var(--ms-violet-tekst);border-color:var(--ms-violet-tekst);color:#fff}
.gal-okno-wyslij:disabled{opacity:.45;cursor:default}
.gal-znacznik-uw{background:#2E6B3A;font-size:11px;left:6px;right:auto;top:auto;bottom:6px}
.gal-ios[data-kol="7"] .gal-znacznik-uw,.gal-ios[data-kol="5"] .gal-znacznik-uw{font-size:0;padding:0;min-width:10px;height:10px;left:3px;bottom:3px}
/* 27.09.2026 (S3): link „Zobacz film” pod podpisem klatki z filmu (galeria.json pole `film`) */
.gal-lupa-film-link{display:inline-block;margin:2px 0 6px;padding:6px 14px;border-radius:999px;border:1px solid rgba(251,250,247,.5);background:transparent;color:#fff;font:700 14px/1.2 inherit;font-family:inherit;cursor:pointer}
.gal-lupa-film-link:hover{background:rgba(251,250,247,.16)}
.gal-lupa-film-link:focus-visible{outline:3px solid var(--ms-violet-lt);outline-offset:2px}
/* 27.09.2026 (S3, D-27.09-2): strona /galeria-twarze — weryfikacja twarzy do zasłonięcia (tylko robocza) */
.tw-pasek{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 8px;padding:10px 12px;border-radius:14px;background:var(--ms-white);border:1px solid var(--ms-violet-2);box-shadow:0 4px 18px rgba(15,17,22,.14)}
.tw-filtr{display:flex;gap:8px;flex-wrap:wrap}
.tw-licznik{font-weight:700;margin-right:auto}
.tw-zapisz{background:var(--ms-violet-tekst);border-color:var(--ms-violet-tekst);color:#fff}
.tw-zapisz:disabled{opacity:.45;cursor:default}
.tw-komunikat:empty{display:none}
.tw-komunikat{font-weight:700;color:var(--ms-violet-tekst);margin:4px 0}
.tw-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:8px}
.tw-karta{border-radius:12px;overflow:hidden;border:2px solid transparent;background:var(--ms-white)}
.tw-karta-zazn{border-color:var(--ms-violet-tekst)}
.tw-obraz{position:relative;line-height:0;cursor:zoom-in}
.tw-obraz img{display:block;width:100%;height:auto}
.tw-twarz{position:absolute;border:2px solid #E8763A;border-radius:4px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.tw-numer{position:absolute;left:50%;top:-14px;transform:translate(-50%,-100%);pointer-events:auto;
  min-width:28px;height:28px;padding:0 6px;border-radius:999px;border:2px solid #fff;background:#E8763A;color:#fff;
  font:800 15px/1 system-ui;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.tw-numer-zazn{background:#B3261E}
.tw-numer-wyslana{background:#2E6B3A}
.tw-numer:focus-visible{outline:3px solid var(--ms-violet-lt);outline-offset:2px}
.tw-twarz-pelna .tw-numer{min-width:36px;height:36px;font-size:18px;top:-18px}
.tw-kod{margin:6px 8px 10px;font-size:13px;color:var(--ms-muted);text-align:center}
.tw-lupa{position:fixed;inset:0;z-index:150;background:rgba(10,10,12,.94);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:56px 16px 24px}
.tw-lupa-wrap{max-width:min(94vw,900px);width:100%}
.tw-lupa-wrap .tw-obraz{cursor:default}
.tw-lupa-podpis{color:#fff;text-align:center;margin-top:12px;max-width:900px;font-size:15px}
@media(max-width:640px){
  .tw-pasek{gap:8px}
  .tw-siatka{grid-template-columns:repeat(2,1fr);gap:10px}
  .tw-numer{min-width:26px;height:26px;font-size:14px}
}
/* 27.09.2026 (S3): drugi rząd chipów „Miejsce” pod „Kategorie” (AND z aktywnością) */
.gal-tagi-miejsce{margin-top:-6px}
.gal-miejsce[aria-pressed="true"]{background:var(--ms-violet-tekst);border-color:var(--ms-violet-tekst);color:#fff}  /* 03.10.2026 W-403: filtr miejsca w kolorze marki (było zielone #2E6B3A) */
/* 27.09.2026 (S3): przy ≤400 px rząd „Wszystko/Zdjęcia/Filmy” (tylko 3 chipy) wygląda na ucięty przy przewijaniu —
   zawijamy go zamiast przewijać poziomo. Kategorie/Miejsce (dużo chipów) zostają przewijane, żeby nie zrobić ściany. */
@media(max-width:400px){
  .gal-rodzaje{flex-wrap:wrap;overflow-x:visible;margin:0;padding:0;width:auto}
  .gal-rodzaje .gal-filtr{flex:none;white-space:normal}
}
/* 28.09.2026 (koordynator): wstawki „3 zdjęcia z galerii" przy argumentach (lekkie kafle 256px + link do /galeria z filtrem) */
.wg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 8px}
.wg-kafel{display:block;border-radius:12px;overflow:hidden;aspect-ratio:1;line-height:0}
.wg-kafel img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.wg-kafel:hover img{transform:scale(1.05)}
.wg-kafel:focus-visible{outline:3px solid var(--ms-violet-lt);outline-offset:2px}
.wg-wiecej{margin:0 0 4px;font-size:14.5px}
/* 27/28.09.2026 (program-14): max-width:220px ściskał trzy zdjęcia do ok. 69×69 px, nie do rozpoznania.
   Bez limitu szerokości siatka wypełnia kartę tak jak zwykły .wg-grid gdzie indziej — więksi, ci sami
   kafle, bez zmiany układu (nadal trzy w rzędzie, ten sam podpis i przycisk pod spodem). */
.card-wg .wg-grid{grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 6px}
.card-wg .wg-wiecej{font-size:13.5px}

/* 28.09.2026: wolne miejsca do uzupełnienia faktów (widoczne tylko na roboczej; produkcja pomija puste). */
.slot-brak{background:#ffe08a;color:#1a1a1a;padding:2px 8px;border-radius:6px;font-size:.92em;font-weight:600;outline:1px dashed #b8860b;outline-offset:1px}
p > .slot-brak:only-child{display:inline-block}


/* ====== 01.10.2026 F41/F43/F44: wygląd wzorowany na stylu acquisition.com (etap 2; home + /program) ======
   Zakres: strony data-page="" (home) i "program". Reszta serwisu przejdzie tym samym blokiem po akceptacji próby.
   Przywrócenie: usunąć ten blok, pasek ogłoszeń w site.js (znacznik F44) i nowe sekcje w index.html/program.html. */
header.ms-head{background:#131628}
.v2-ann{background:var(--ms-violet-tekst);color:#fff;text-align:center;padding:12px 44px 12px 16px;font-size:15.5px;position:relative}
.v2-ann b{background:#fff;color:var(--ms-violet-tekst);border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:800;letter-spacing:.05em;margin-right:10px}
.v2-ann a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.v2-ann button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;min-width:44px;min-height:44px}
.v2-hero{background:#ECEBE6;position:relative;overflow:hidden;text-align:center;padding:76px 24px 0;color:#131628}
.v2-hero .v2-kick{display:inline-block;background:var(--ms-violet-tekst);color:#fff;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;border-radius:99px;margin-bottom:22px}
.v2-hero h1{max-width:660px;font-weight:800;text-transform:uppercase;color:#131628;font-size:clamp(28px,3.7vw,52px);line-height:1.06;max-width:700px;margin:0 auto;letter-spacing:-.005em}
.v2-hero h1 .a{color:var(--ms-violet-tekst);display:block}
.v2-hero .v2-lead{font-size:clamp(17px,2vw,21px);line-height:1.4;max-width:640px;margin:22px auto 30px;color:#2a2d38}
.v2-hero .v2-cta2{margin-top:16px;font-size:15px;color:#4a4d58;padding-bottom:78px}
.v2-hero .v2-cta2 a{text-decoration:underline;text-underline-offset:3px;font-weight:600;color:#131628}
.v2-hero .v2-ph{position:absolute;bottom:0;height:86%;width:auto;max-width:26%;object-fit:contain;object-position:bottom;z-index:0}
.v2-hero .v2-ph.l{left:2%}.v2-hero .v2-ph.r{right:2%}
.v2-hero .v2-ph.mic{height:auto;width:30%;max-width:none;right:0}
.v2-hero>*:not(.v2-ph){position:relative;z-index:1}
.v2-btn{display:inline-block;background:var(--ms-violet-tekst);color:#fff;border-radius:100px;padding:15px 44px;font-weight:700;font-size:19px;min-width:300px;text-align:center;line-height:1.2;border:2px solid transparent}
.v2-btn:hover{background:#463CB8;color:#fff}
.v2-btn.ghost{background:transparent;color:#131628;border-color:#131628}
.v2-stats{background:#fff;padding:44px 0}
.v2-stats .v2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;max-width:1100px;margin:0 auto;padding:0 24px}
.v2-stat{border-left:3px solid var(--ms-violet-tekst);padding-left:16px}
.v2-stat .n{font-size:38px;font-weight:800;color:#131628;line-height:1.1}
.v2-stat .l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4a4d58;margin-top:4px}
.v2-sciezki .v2-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.v2-card{background:#fff;border-radius:22px;padding:32px 28px 28px;box-shadow:0 10px 36px rgba(19,22,40,.09);position:relative}
.v2-card .badge{position:absolute;top:-14px;right:22px;background:var(--ms-sand);color:#3a2300;font-size:12px;font-weight:800;border-radius:6px;padding:5px 10px;letter-spacing:.04em;text-transform:uppercase}
.v2-card .num{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--ms-violet-tekst);text-transform:uppercase}
.v2-card h3{font-weight:800;text-transform:uppercase;color:#131628;font-size:21px;line-height:1.15;margin:8px 0 12px}
.v2-card p{font-size:16px;line-height:1.5;color:#3b3f4b;margin:0 0 20px}
.v2-card .v2-btn{font-size:16px;padding:11px 24px;min-width:0}
/* WERSJA 2 (F45): styl globalny na wszystkich stronach — nagłówki wersalikami 800, pigułki, stopka w kolorze marki, ciemne sekcje w granacie */
h1,h2,.sec-title,.banner-over h1{font-weight:800;text-transform:uppercase;letter-spacing:-.005em}
h1{overflow-wrap:break-word}
.card h3,.how-card h3,.kafel h3{font-weight:800}
body[data-page=""] .wb-dla{margin-top:0;background:var(--ms-paper);padding-top:64px}
.btn{border-radius:999px}
.sec.dark{background:#131628}
footer.ms-foot{background:var(--ms-violet-tekst)}
.btn-violet{background:var(--ms-violet-tekst)}.btn-violet:hover{background:#463CB8}
/* F972 (16.10.2026, audyt dostępności klawiatury Analizy): dwukolorowy wskaźnik fokusu, czytelny na każdym tle (granatowy pierścień + biała obwódka wewnątrz; 16–19:1 wg pomiaru pikseli); tylko :focus-visible, więc przy myszy wygląd bez zmian */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,video:focus-visible{outline:3px solid #131628;outline-offset:2px;box-shadow:0 0 0 2px #fff}
@media(max-width:860px){.v2-hero .v2-ph{display:none}.v2-hero{padding:52px 20px 0}.v2-sciezki .v2-cards{grid-template-columns:1fr}.v2-btn{min-width:0;width:100%}}


/* ====== WERSJA 3 (F45, raport acquisition sekcja 11): zmiany ponad wersją 2 ====== */
header.ms-head,.sec.dark{background:#1A1740}
.v2-btn,.btn-violet{transition:background .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),border-color .3s}
.v2-btn,.btn-violet{border:2px solid var(--ms-violet-tekst)}
.v2-btn:hover,.btn-violet:hover{background:var(--ms-paper);color:var(--ms-violet-tekst);border-color:var(--ms-violet-tekst)}
.v2-btn.ghost:hover{background:var(--ms-violet-tekst);color:#fff}
.about-text{max-width:680px;margin-left:auto;margin-right:auto}
.v3-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.v3-steps li{border-left:3px solid var(--ms-violet-lt);padding-left:18px}
.v3-steps .k{display:block;font-size:48px;font-weight:800;color:var(--ms-violet-lt);line-height:1}
.v3-steps h3{margin:10px 0 8px;color:#fff;text-transform:uppercase;font-weight:800;font-size:19px}
.v3-steps p{margin:0;color:rgba(251,250,247,.82);line-height:1.5}
.v3-zig{display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:center;margin:0 0 56px}
.v3-zig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px 0 0 8px;display:block}
.v3-karta{background:#fff;border-radius:0 8px 8px 0;padding:36px 34px;box-shadow:0 10px 36px rgba(19,22,40,.09)}
.v3-zig-odw{grid-template-columns:1fr 1.1fr}
.v3-zig-odw img{order:2;border-radius:0 8px 8px 0}
.v3-zig-odw .v3-karta{order:1;border-radius:8px 0 0 8px}
.v3-karta h2{margin:6px 0 12px;font-size:clamp(24px,3vw,34px);line-height:1.1}
.v3-karta p{line-height:1.55;color:#3b3f4b}
.v3-kick{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ms-violet-tekst);margin:0}
.v3-faq details{border-bottom:1px dashed rgba(19,22,40,.35);padding:16px 0}
.v3-faq summary{cursor:pointer;font-weight:700;font-size:19px;line-height:1.3;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
.v3-faq summary::-webkit-details-marker{display:none}
.v3-faq summary::after{content:'+';font-size:26px;color:var(--ms-violet-tekst);font-weight:800}
.v3-faq details[open] summary::after{content:'–'}
.v3-faq details p{max-width:720px;line-height:1.6;margin:10px 0 4px}
.v3-faq-wiecej{text-align:center;margin-top:22px}
@media(max-width:860px){.v3-steps{grid-template-columns:1fr 1fr}.v3-zig,.v3-zig-odw{grid-template-columns:1fr}.v3-zig img,.v3-zig-odw img{order:0;border-radius:8px 8px 0 0}.v3-karta,.v3-zig-odw .v3-karta{order:1;border-radius:0 0 8px 8px;padding:26px 22px}}
@media(max-width:560px){.v3-steps{grid-template-columns:1fr}}
/* W1 (wejście sekcji przy przewijaniu) świadomie pominięte: zrzuty pełnej strony i druk zostawiałyby sekcje przezroczyste */


/* F49: telefon — sylwetki zostają: jeden obraz pod przyciskiem (≤899 px), po bokach nagłówka dopiero od 900 px */
.v2-duet{display:none}
@media(max-width:899px){
  .v2-hero .v2-ph{display:none}
  .v2-duet{display:block;width:min(504px,92%);height:auto;margin:0 auto}
  .v2-hero .v2-cta2{padding-bottom:26px}
}


/* P1-3: strona Oferta */
.v3-pieciu{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.v3-trzy{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.5}.v3-trzy li{padding:7px 0;border-top:1px dashed rgba(19,22,40,.25)}
.v3-pasy{display:grid;gap:14px;max-width:1000px;margin:0 auto}
.v3-pas{display:grid;grid-template-columns:150px 1fr 200px 190px;gap:18px;align-items:center;background:#fff;border-radius:14px;padding:20px 24px;box-shadow:0 8px 28px rgba(19,22,40,.08)}
.v3-pas-n{font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ms-violet-tekst)}.v3-pas-c{font-weight:800;line-height:1.3}
.v3-pas .v2-btn{font-size:15px;padding:10px 18px;min-width:0;width:100%}
@media(max-width:860px){.v3-pas{grid-template-columns:1fr}}

/* P1-2: wiersze-nagłówki grup w cenniku */
table.cmp tr.grupa th{background:rgba(84,73,204,.10);color:var(--ms-violet-tekst);text-transform:uppercase;letter-spacing:.06em;font-size:13px;text-align:left;padding:10px 14px}

/* P1-4: progi na stronie głównej */
.v3-cztery{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.v3-progi{background:var(--ms-paper)}
@media(max-width:980px){.v3-cztery{grid-template-columns:1fr 1fr}}@media(max-width:560px){.v3-cztery{grid-template-columns:1fr}}

/* P1-3b: „Kim jesteś?” — pięć kart równo (5 w rzędzie ≥1280, 3+2 wyśrodkowane 700–1279, jedna kolumna na telefonie) */
.v2-cards.v3-pieciu{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.v2-cards.v3-pieciu>.v2-card{flex:0 0 calc(33.333% - 15px);max-width:calc(33.333% - 15px)}
@media(min-width:1280px){.v2-cards.v3-pieciu>.v2-card{flex:1 1 0;max-width:none;min-width:0}}
@media(max-width:699px){.v2-cards.v3-pieciu>.v2-card{flex:0 0 100%;max-width:100%}}


/* 01.10.2026: nowe logo (obraz) w nagłówku; zdjęcie mobilne w hero (IMG_1881, wersja studyjna) */
.ms-logo .ms-logo-img{height:40px;width:auto;display:block}
@media(max-width:699px){.ms-logo .ms-logo-img{height:32px}.ms-logo .word i{display:none}}
.v2-duet{width:min(420px,80%)}

/* 01.10.2026: wąskie telefony — nowe logo + dłuższy przycisk w rogu mieszczą się razem z hamburgerem */
@media(max-width:520px){
  .ms-logo .ms-logo-img{height:26px}
  .ms-headrow{gap:6px;padding:10px 10px}
  .ms-corner .ms-cta{font-size:12px;padding:6px 9px;line-height:1.15;white-space:normal;max-width:132px;text-align:center}
}

/* 01.10.2026 (v3, zadanie 1): poniżej 600 px przycisk w rogu nagłówka znika (hero ma ten sam przycisk, a w menu
   jest on na dole), logo ma 32 px wysokości, hamburger zawsze w całości przy prawej krawędzi (320-599 px).
   Ta reguła stoi na samym końcu arkusza, żeby wygrywała z wcześniejszymi progami 420/411/380/359/371 px. */
@media(max-width:599px){
  .ms-corner{display:none!important}
  .ms-logo .ms-logo-img{height:32px}
  .ms-headrow{gap:8px;padding:10px 12px 10px 14px}
  .ms-burger{margin-left:auto;padding:10px 10px;min-width:44px}
  .ms-mob-corner .ms-cta{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;font-size:14px;border-radius:10px;box-sizing:border-box}
}


/* AUDYT-V3 P1 (01.10.2026) */
table.cmp td.yes{color:var(--ms-violet-tekst);min-width:170px;white-space:normal;line-height:1.35}
table.cmp td.yes b{font-weight:800}
.cmp-wrap table.cmp{table-layout:auto}
/* szkolenia: równe karty ze zdjęciami */
.karta-foto{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;margin:0 0 14px}
.grid.g3>.card{display:flex;flex-direction:column}
/* home: drabina — równe karty, przycisk na dole */
.v3-cztery .v2-card{display:flex;flex-direction:column}
.v3-cztery .v2-card p{flex:1 1 auto}
.v3-cztery .v2-card .v2-btn{margin-top:auto;align-self:flex-start}


/* AUDYT-V3 P1-5: pas kontaktu i danych firmy w stopce */
footer.ms-foot .fkontakt{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
footer.ms-foot .fkontakt p{margin:0 0 6px;font-size:14px;line-height:1.7}
footer.ms-foot .fkontakt .fdane{font-size:13px;opacity:.8}

/* przyciski-pigułki jako <button>: krój strony */
button.v2-btn{font-family:inherit;cursor:pointer}


/* hero /cennik: nakładka tylko pod tekstem z lewej, twarz zostaje widoczna (uwaga koordynatora 01.10) */
body[data-page="cennik"] .banner-hero::after{background:linear-gradient(90deg,rgba(26,23,64,.86) 0%,rgba(26,23,64,.74) 32%,rgba(26,23,64,.46) 50%,rgba(26,23,64,.12) 62%,rgba(26,23,64,0) 70%)}
body[data-page="cennik"] .banner-over p{text-shadow:0 1px 10px rgba(26,23,64,.85)}
body[data-page="cennik"] .banner-hero img{object-position:64% 18%}
@media(max-width:720px){body[data-page="cennik"] .banner-hero::after{background:linear-gradient(180deg,rgba(26,23,64,.55) 0%,rgba(26,23,64,.12) 38%,rgba(26,23,64,.72) 100%)}}

/* hero ofert: karaoke i taktowne — nakładka tylko pod tekstem z lewej */
body[data-page="karaoke"] .banner-hero img{object-position:50% 40%}
body[data-page="taktowne-spotkania"] .banner-hero img{object-position:62% 40%}

/* /spotkania: karty zamiast tabeli */
.v3-spotkania{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px}
.v3-spotkania .v2-card{display:flex;flex-direction:column}
.v3-spotkania .v2-card p{margin:0 0 10px;font-size:15.5px;line-height:1.5}
.v3-spotkania .v2-card .v3-cena{font-size:19px;font-weight:800;color:var(--ms-violet-tekst);margin:4px 0 16px}
.v3-spotkania .v2-card .v2-btn{margin-top:auto;align-self:flex-start;font-size:15px;padding:11px 22px;min-width:0}
@media(max-width:980px){.v3-spotkania{grid-template-columns:1fr 1fr}}@media(max-width:620px){.v3-spotkania{grid-template-columns:1fr}}
/* przegląd 01.10 (pkt 4): „Całe archiwum” — stała wysokość rzędu, kadr przycięty (object-fit:cover), bez białych dziur */
@media(min-width:641px){
  .gal-siatka{align-items:stretch}
  .gal-el{height:var(--h)}
  .gal-el-akcent,.gal-el-post{height:var(--h)}
  .gal-el .gal-kafel{height:100%}
  .gal-el .gal-ramka,.gal-el-post .gal-ramka{flex:1 1 auto;height:auto;padding-top:0;min-height:0}
  .gal-el:not(.gal-el-post) .gal-ramka img{object-fit:cover}
  .gal-el-post .gal-post-tekst{-webkit-line-clamp:2}
}
/* 02.10.2026 (zlecenie: ucięta głowa): kadr hero per strona, głowa w górnej 1/3 z marginesem nad włosami.
   Telefon: kadr 4:5; tablet i komputer: tylko tam, gdzie wcześniejszy kadr ucinał głowę. */
@media(max-width:720px){
body[data-page="badania"] .banner-hero img{aspect-ratio:4/5;object-position:50% 0%}
body[data-page="cennik"] .banner-hero img{aspect-ratio:4/5;object-position:50% 3%}
body[data-page="faq"] .banner-hero img{aspect-ratio:4/5;object-position:50% 0%}
body[data-page="kontakt"] .banner-hero img{aspect-ratio:4/5;object-position:50% 0%}
body[data-page="kregi"] .banner-hero img{aspect-ratio:4/5;object-position:50% 0%}
body[data-page="media"] .banner-hero img{aspect-ratio:4/5;object-position:0% 0%}
body[data-page="michal-drezner"] .banner-hero img{aspect-ratio:4/5;object-position:50% 0%}
body[data-page="narzedzia-gitara"] .banner-hero img{aspect-ratio:4/5;object-position:56% 0%}
body[data-page="o-projekcie"] .banner-hero img{aspect-ratio:4/5;object-position:50% 0%}
body[data-page="rodzinne-muzykowanie"] .banner-hero img{aspect-ratio:4/5;object-position:50% 0%}
body[data-page="start"] .banner-hero img{aspect-ratio:4/5;object-position:73% 0%}
body[data-page="szkolenia"] .banner-hero img{aspect-ratio:4/5;object-position:98% 0%}
body[data-page="warsztaty-grupowe"] .banner-hero img{aspect-ratio:4/5;object-position:70% 0%}
body[data-page="wiedza"] .banner-hero img{aspect-ratio:4/5;object-position:50% 28%}
body[data-page="wiedza-jak-zdjac-utwor"] .banner-hero img{aspect-ratio:4/5;object-position:50% 1%}
body[data-page="wiedza-nie-mam-sluchu"] .banner-hero img{aspect-ratio:4/5;object-position:57% 0%}
body[data-page="wiedza-pierwsza-piosenka"] .banner-hero img{aspect-ratio:4/5;object-position:56% 0%}
body[data-page="wiedza-trema"] .banner-hero img{aspect-ratio:4/5;object-position:0% 0%}
}
@media(min-width:721px) and (max-width:1023px){
body[data-page="kontakt"] .banner-hero img{object-position:50% 23%}
}
@media(min-width:1024px){
body[data-page="kontakt"] .banner-hero img{object-position:50% 15%}
body[data-page="wiedza"] .banner-hero img{object-position:50% 12%}
body[data-page="wiedza-trema"] .banner-hero img{object-position:50% 100%}
}

body[data-page="taktowne-spotkania"] .banner-hero img{object-position:62% 18%}
@media(max-width:720px){body[data-page="taktowne-spotkania"] .banner-hero img{aspect-ratio:4/5;object-position:92% 20%}body[data-page="karaoke"] .banner-hero img{aspect-ratio:4/5;object-position:78% 22%}}
@media(min-width:1024px){body[data-page="wiedza"] .banner-hero img{object-position:50% 0%}}
/* 02.10.2026: /program — karty z inline-gridem 2 kol. na telefonie w jednej kolumnie (bez przewijania w bok) */
.v2-card{min-width:0}
@media(max-width:700px){.v2-cards[style*="grid-template-columns"]{grid-template-columns:1fr!important}}
/* /wiedza: wyższy pas hero na komputerze i tablecie, żeby portret miał margines nad głową */
@media(min-width:721px){body[data-page="wiedza"] .banner-hero img{min-height:470px;max-height:470px;object-position:50% 6%}}

/* ===== SPEC acquisition, etap A (02.10.2026) — X1: pigułka CTA w nagłówku jak wszędzie (100 px) ===== */
.ms-cta{border-radius:100px}
.ms-cta{padding:10px 22px}

/* X2: nagłówek w jednym wierszu (≥1120 px): logo · menu tekstem · Kontakt · pigułka; poniżej — jak dotąd */
@media(min-width:1120px){
  header.ms-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:22px;
    padding:0 max(24px,calc((100% - 1180px)/2 + 24px));min-height:72px}
  header.ms-head .ms-headrow{display:contents}
  header.ms-head .ms-logo{grid-column:1;grid-row:1;padding:8px 0}
  header.ms-head .ms-logo .word i{display:none}
  header.ms-head .ms-chips{grid-column:2;grid-row:1;padding:0;max-width:none;margin:0;flex-wrap:nowrap;gap:2px;justify-content:center}
  header.ms-head .ms-corner{grid-column:3;grid-row:1}
  header.ms-head .ms-mobile{grid-column:1/-1}
  .ms-chip>button,.ms-chip>a.ms-chip-link,.ms-chip.ms-chip-split{background:none;border:0;border-radius:8px}
  .ms-chip>button,.ms-chip>a.ms-chip-link{font-size:15px;font-weight:600;padding:8px 11px}
  .ms-chip>button:hover,.ms-chip>a.ms-chip-link:hover{background:none;border:0;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
  .ms-chip>button .ms-cnt{display:none}
  .ms-chip>button.here,.ms-chip>a.ms-chip-link.here{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--ms-violet-lt)}
  .ms-chip.open>button{background:rgba(255,255,255,.1);border:0}
}

/* X3: stopka — u góry logo i jedno zdanie, pod spodem pięć kolumn */
@media(min-width:821px){
  footer.ms-foot .fgrid{grid-template-columns:repeat(5,1fr);gap:26px 22px}
  footer.ms-foot .fgrid>div:first-child{grid-column:1/-1;display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap}
  footer.ms-foot .fgrid>div:first-child img{margin-bottom:0!important;height:40px!important}
  footer.ms-foot .fgrid>div:first-child p{margin:0}
}
@media(min-width:561px) and (max-width:820px){footer.ms-foot .fgrid>div:first-child{grid-column:1/-1}}

/* G2: przyciski kart drabiny tej samej wysokości, jedna linia */
.v3-cztery .v2-btn{width:100%;white-space:nowrap;font-size:15px;padding:14px 10px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
/* G3: KARTA-MAGNES (wzór „Roadmap” z acquisition.com): biała karta pod paskiem liczb */
.karta-magnes{max-width:880px;margin:0 auto;background:#fff;border-radius:12px;padding:40px 44px;text-align:center;box-shadow:0 14px 40px rgba(19,22,40,.1)}
.karta-magnes .km-plakietka{display:inline-block;background:var(--ms-violet-tekst);color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:14px}
.karta-magnes .sec-title{margin:0 0 10px}
.karta-magnes .sec-sub{max-width:560px;margin:0 auto 22px}
@media(max-width:600px){.karta-magnes{padding:30px 22px}}

/* O2: przyciski drabiny jednej wysokości i w jednej linii; kolumna ceny min. 200 px */
.v3-pas{grid-template-columns:130px minmax(0,1fr) 210px 210px}
.v3-pas .v2-btn{white-space:nowrap;min-height:48px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
@media(max-width:860px){.v3-pas{grid-template-columns:1fr}}

/* P2: nadtytuł i pasek zaufania w hero (SPEC R4/R5) */
.v2-hero .v2-nadtytul{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ms-violet-tekst)}
.v2-hero .v2-zaufanie{margin:0;padding:0 0 64px;font-size:14px;font-weight:600;color:#3a3d4a;line-height:1.5}
@media(max-width:860px){.v2-hero .v2-zaufanie{padding-bottom:36px}}

/* HERO-B (SPEC §5, wzór /o-vegas): granatowy pas, nadtytuł, H1, lead, zdjęcie 16:9 w ramce, jedna piaskowa pigułka, pasek zaufania */
.hero-b{background:#131628;color:#FBFAF7;padding:64px 0 60px}
.hero-b .hb-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:center}
.hero-b .hb-kicker{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#F0A93B}
.hero-b h1{font-size:clamp(30px,3.6vw,48px);font-weight:800;text-transform:uppercase;line-height:1.1;margin:0 0 20px;color:#fff;letter-spacing:-.01em}
.hero-b h1 .a{color:#B3ACFA;display:block}
.hero-b .hb-lead{font-size:18px;font-weight:500;line-height:1.55;color:rgba(251,250,247,.86);max-width:620px;margin:0 0 26px}
.hero-b .hb-btn{display:inline-flex;align-items:center;justify-content:center;background:#F0A93B;color:#131628;font-weight:800;font-size:18px;padding:16px 36px;min-height:60px;border-radius:100px;text-decoration:none;box-sizing:border-box}
.hero-b .hb-btn:hover{background:#fff}
.hero-b .hb-link{margin:16px 0 0}
.hero-b .hb-link a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.hero-b .hb-zaufanie{margin:18px 0 0;font-size:14px;font-weight:600;color:rgba(251,250,247,.8);line-height:1.5}
.hero-b .hb-foto{border-radius:8px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.14);background:#fff}
.hero-b .hb-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 4%}
@media(max-width:860px){.hero-b{padding:36px 0 40px}.hero-b .hb-grid{grid-template-columns:1fr;gap:28px}.hero-b h1{font-size:30px}.hero-b .hb-btn{width:100%}.hero-b .hb-foto{max-width:420px}}

/* HERO-C (SPEC §5, wzór /careers): biel, tekst po lewej, zdjęcie 540×455 po prawej; telefon: tekst, potem zdjęcie */
.hero-c{background:#fff;padding:72px 0 64px}
.hero-c .hc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:56px;align-items:center}
.hero-c .hc-kicker{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ms-violet-tekst)}
.hero-c h1{font-size:clamp(32px,3.6vw,48px);font-weight:800;line-height:1.12;margin:0 0 20px;color:#131628;text-transform:uppercase;letter-spacing:-.01em}
.hero-c .hc-akcent{color:var(--ms-violet-tekst);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.hero-c .hc-lead{font-size:17px;line-height:1.6;color:#2a2d38;max-width:520px;margin:0 0 26px}
.hero-c .hc-link{margin:16px 0 0;font-size:16px}
.hero-c .hc-foto{border-radius:8px;overflow:hidden;background:#ECEBE6}
.hero-c .hc-foto img{width:100%;aspect-ratio:540/455;object-fit:cover;object-position:78% 30%}
@media(max-width:860px){.hero-c{padding:36px 0 40px}.hero-c .hc-grid{grid-template-columns:1fr;gap:26px}.hero-c h1{font-size:32px}.hero-c .v2-btn{width:100%}}

/* HERO-D jasny (SPEC §5 „pas tytułowy”) + KARTA-WYBÓR (kafle 260×120, cały kafel jest linkiem) */
.tytul-pas{padding:64px 0 56px;text-align:center;background:#ECEBE6}
.tytul-pas .tp-kicker{display:inline-block;margin:0 0 14px;background:var(--ms-violet-tekst);color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
.tytul-pas h1{font-size:clamp(30px,3.6vw,48px);font-weight:800;text-transform:uppercase;color:#131628;line-height:1.1;margin:0 0 30px;letter-spacing:-.01em}
.tytul-pas h1 .a{color:var(--ms-violet-tekst)}
.kafle-wybor{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1080px;margin:0 auto}
.kafel-wybor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:120px;padding:18px 14px;background:#fff;border:2px solid transparent;border-radius:12px;box-shadow:0 8px 26px rgba(19,22,40,.08);font-size:17px;font-weight:700;color:#131628;text-align:center;box-sizing:border-box}
.kafel-wybor:hover{border-color:var(--ms-violet-tekst)}
@media(max-width:860px){.kafle-wybor{grid-template-columns:1fr 1fr}.tytul-pas{padding:40px 0 36px}}
@media(max-width:420px){.kafel-wybor{font-size:15px;min-height:104px}}

/* ===== SPEC acquisition, etap B: komponenty (X4–X7 w drodze) ===== */
.sec-title.lewa{text-align:left;font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em;max-width:560px;margin:0 0 22px}
/* LISTA + KOLAŻ */
.lista-kolaz{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.lista-kolaz .lk-nota{font-size:15.5px;color:#4a4d58;margin:14px 0 0}
.lista-kolaz .ed-wiecej{margin-top:18px}
.lk-kolaz{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lk-kolaz img{width:100%;aspect-ratio:270/200;object-fit:cover;border-radius:10px}
@media(max-width:860px){.lista-kolaz{grid-template-columns:1fr;gap:26px}.lk-kolaz{order:2}}
/* H2 po lewej, treść po prawej */
.lewa-prawa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.lp-lewa{position:sticky;top:110px}
.lp-sub{color:rgba(251,250,247,.82);font-size:16.5px;line-height:1.6;max-width:520px;margin:0}
@media(max-width:860px){.lewa-prawa{grid-template-columns:1fr;gap:24px}.lp-lewa{position:static}}
/* KARTA-NUM */
.karta-num{background:#fff;border:1.5px solid #B3ACFA;border-radius:12px;padding:22px 24px}
.karta-num .kn-nr{display:block;font-size:28px;font-weight:800;color:#131628;line-height:1;margin-bottom:8px}
.karta-num h3{font-size:16px;font-weight:800;text-transform:uppercase;color:var(--ms-violet-tekst);margin:0 0 8px;letter-spacing:.01em}
.karta-num p{font-size:15px;line-height:1.55;margin:0;color:#2a2d38}
.lp-prawa .karta-num+.karta-num{margin-top:14px}
.trzy-kroki{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
@media(max-width:860px){.trzy-kroki{grid-template-columns:1fr}}
/* KARTY-CEN (granat) */
.karty-cen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:860px;margin:6px auto 0}
.karta-cen{background:#1A1740;border:1.5px solid transparent;border-radius:12px;padding:32px 28px;text-align:center;
  background-image:linear-gradient(#1A1740,#1A1740),linear-gradient(135deg,#8177F5,#F0A93B);background-origin:border-box;background-clip:padding-box,border-box}
.karta-cen .kc-etykieta{margin:0;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B3ACFA}
.karta-cen .kc-kwota{margin:8px 0 14px;font-size:52px;font-weight:800;color:#fff;line-height:1}
.karta-cen .kc-opis{margin:0 0 22px;font-size:15px;line-height:1.55;color:rgba(251,250,247,.82)}
.karta-cen .btn,.karta-cen .btn-violet{background:#F0A93B!important;color:#131628!important;font-weight:800;border-radius:100px;padding:14px 26px;min-height:52px;display:inline-flex;align-items:center;border:0}
.karta-cen .btn:hover{background:#fff!important}
.sec.dark .kc-linia{text-align:center;margin:20px 0 0;font-size:15.5px;color:rgba(251,250,247,.86)}
.sec.dark .kc-nota{text-align:center;margin:14px auto 0;font-size:13px;max-width:560px;color:rgba(251,250,247,.7)}
@media(max-width:760px){.karty-cen{grid-template-columns:1fr}.karta-cen .kc-kwota{font-size:44px}}
/* FOUNDERS-FIOLET */
.founders-fiolet{background:#5449CC;color:#fff}  /* 05.10.2026 F179 + F197: jednolite tło bez gradientu #8177F5→#5449CC (z gradientu zostaje tylko ciemniejszy kolor końcowy), biały 6,56:1 */
.founders-fiolet .ff-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:44px;align-items:end}
.founders-fiolet .ff-foto img{width:100%;max-width:460px;margin:0 auto;display:block}
.founders-fiolet h2{color:#fff;font-size:clamp(34px,4vw,56px);font-weight:800;text-transform:uppercase;line-height:1.04;margin:0 0 18px;text-align:left}
.founders-fiolet .ff-tekst>p{color:rgba(255,255,255,.94);font-size:16px;line-height:1.6;max-width:640px}
.founders-fiolet a.inl{color:#fff;font-weight:600}
.founders-fiolet .ff-list{background:#fff;color:#131628;border-radius:12px;padding:28px 32px;margin:24px 0 0;max-width:600px;box-shadow:0 14px 40px rgba(0,0,0,.2)}
.founders-fiolet .ff-list p{color:#131628;font-size:16px;line-height:1.6;margin:0 0 12px;max-width:none}
.founders-fiolet .ff-list .ff-list-t{font-weight:800}
.founders-fiolet .ff-podpis{font-style:italic;font-weight:600;margin-top:6px}
.founders-fiolet .ff-cytat{margin:20px 0 0;max-width:600px;font-size:16px;line-height:1.6;color:#fff;border-left:3px solid rgba(255,255,255,.6);padding-left:16px}
.founders-fiolet .ff-cytat cite{display:block;font-style:normal;font-size:13.5px;margin-top:8px;opacity:.9}
.founders-fiolet .ff-wiecej{margin-top:34px}
.founders-fiolet .ff-wiecej details{background:#fff;color:#131628;border-radius:12px}
.founders-fiolet .ff-wiecej .sec-sub,.founders-fiolet .ff-wiecej h3,.founders-fiolet .ff-wiecej p{color:#131628}
@media(max-width:860px){.founders-fiolet .ff-grid{grid-template-columns:1fr}.founders-fiolet .ff-foto img{max-width:260px}}
/* SEGMENTY (granat) */
.segmenty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.seg{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.seg b{font-size:16px;font-weight:700;color:#fff}
.seg span{font-size:14px;color:rgba(251,250,247,.8);line-height:1.45}
.dk-karty{margin-top:36px}
.sec.dark .dk-karty .card ul{color:rgba(251,250,247,.82)}
.dk-link{margin:26px 0 0;font-size:15.5px;line-height:1.6;color:rgba(251,250,247,.84);max-width:820px}
@media(max-width:560px){.segmenty{grid-template-columns:1fr}}
/* FAQ-LEWA */
.faq-lewa .faq{max-width:none}
.sec.dark .dk-karty{background:transparent;border-color:rgba(255,255,255,.16);color:#FBFAF7}
.sec.dark .dk-karty summary{color:#FBFAF7}
/* SPEC „Odstępy”: telefon — wcięcie pionowe pasa 52 px (było 66) */
@media(max-width:600px){.sec{padding:52px 0}}
/* TRZY-ZDJĘCIA (wzór /o-vegas) i kafle „dla kogo” (jasne SEGMENTY 4×2) */
.trzy-zdjecia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:8px}
.trzy-zdjecia .tz h3{font-size:20px;font-weight:700;margin:0 0 12px}
.trzy-zdjecia .tz img{width:100%;aspect-ratio:384/257;object-fit:cover;border-radius:10px;margin-bottom:12px}
.trzy-zdjecia .tz p{font-size:15px;line-height:1.55;margin:0;color:#2a2d38}
@media(max-width:860px){.trzy-zdjecia{grid-template-columns:1fr}}
.kafle-dk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:6px}
.kafel-dk{background:#fff;border-radius:12px;padding:20px 20px 14px;box-shadow:0 6px 22px rgba(19,22,40,.07)}
.kafel-dk .kd-grupa{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ms-violet-tekst);margin-bottom:8px}
.kafel-dk h3{font-size:17px;font-weight:800;line-height:1.25;margin:0 0 10px}
.kafel-dk details summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--ms-violet-tekst);padding:6px 0;min-height:32px}
.kafel-dk details p{font-size:14.5px;line-height:1.55;margin:6px 0 0}
@media(max-width:1000px){.kafle-dk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.kafle-dk{grid-template-columns:1fr}}
.founders-fiolet.kompakt .ff-grid{align-items:center}
.founders-fiolet.kompakt .ff-foto img{border-radius:12px;max-width:340px}
.founders-fiolet.kompakt .ff-tekst p{color:rgba(255,255,255,.94);font-size:16px;line-height:1.6;max-width:680px}
.founders-fiolet.kompakt .ff-tekst a{color:#fff;text-decoration:underline}
.hb-btn{display:inline-flex;align-items:center;justify-content:center;background:#F0A93B;color:#131628!important;font-weight:800;font-size:18px;padding:16px 36px;min-height:60px;border-radius:100px;text-decoration:none;box-sizing:border-box}
.hb-btn:hover{background:#fff}
@media(max-width:560px){.sec.dark .hb-btn{width:100%}}
/* O3: karty „Kim jesteś?” na granacie */
.sec.dark .v3-pieciu .v2-card{background:#1A1740;border:1px solid rgba(255,255,255,.14);box-shadow:none;color:#FBFAF7}
.sec.dark .v3-pieciu .v2-card h3,.sec.dark .v3-pieciu .v2-card b{color:#fff}
.sec.dark .v3-pieciu .v2-card p,.sec.dark .v3-pieciu .v2-card li{color:rgba(251,250,247,.84)}
.sec.dark .v3-pieciu .v2-card a.inl{color:#B3ACFA}
.v3-pieciu .kk-stopka{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-weight:700}
/* O4: zygzak tej samej wysokości */
#sciezki .v3-zig{align-items:stretch}
#sciezki .v3-zig img{height:100%;aspect-ratio:auto;min-height:260px}
#sciezki .v3-karta{display:flex;flex-direction:column;justify-content:center}
#sciezki .v3-karta h3{font-size:24px;font-weight:800;margin:6px 0 12px}
@media(max-width:860px){.v3-zig,.v3-zig-odw{grid-template-columns:1fr}.v3-zig img,.v3-zig-odw img{order:1;border-radius:8px 8px 0 0;aspect-ratio:3/2}.v3-karta,.v3-zig-odw .v3-karta{order:2;border-radius:0 0 8px 8px}}
/* O5: CTA-KONIEC — jasny i granatowy pas */
.cta-koniec.jasny{background:#ECEBE6;padding-bottom:40px}
.cta-koniec.dark{padding:44px 0}
.cta-koniec.dark .sec-title{color:#fff;font-size:clamp(24px,3vw,32px)}
/* G5: FOUNDERS-RAMKA (zdjęcie w ramce 10 px, bez przycisku) i G6: liczby 2×2 na telefonie */
.founders-ramka{background:#FBFAF7}
.founders-ramka .fr-grid{display:grid;grid-template-columns:306px minmax(0,680px);gap:40px;align-items:center;justify-content:center;margin-top:30px}
.founders-ramka img{width:306px;height:306px;object-fit:cover;object-position:50% 25%;border:10px solid #131628;border-radius:4px;box-sizing:content-box}
.founders-ramka .fr-tekst h3{font-size:26px;font-weight:800;margin:0 0 12px;text-transform:uppercase}
.founders-ramka .fr-tekst p{font-size:17px;line-height:1.6}
@media(max-width:760px){.founders-ramka .fr-grid{grid-template-columns:1fr;justify-items:center;text-align:center}.founders-ramka img{width:min(306px,72vw);height:min(306px,72vw)}}
.v2-stat .n{font-size:40px}
@media(max-width:600px){.v2-stats .v2-grid{grid-template-columns:1fr 1fr;gap:24px 16px}.v2-stat .n{font-size:30px}}
/* Współpraca: zygzak, pas szeroki, opinie */
#proby-zespolow .v3-zig{align-items:stretch}
#proby-zespolow .v3-zig img{height:100%;aspect-ratio:auto;min-height:240px}
#proby-zespolow .v3-karta{display:flex;flex-direction:column;justify-content:center}
#proby-zespolow .v3-karta h3{font-size:24px;font-weight:800;margin:6px 0 12px}
.ps-foto{width:100%;max-height:440px;object-fit:cover;border-radius:10px;margin:8px 0 28px}
.ps-kol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ps-kol h3{font-size:18px;color:#fff;margin:0 0 8px}.ps-kol p{margin:0;color:rgba(251,250,247,.84);line-height:1.55}
@media(max-width:760px){.ps-kol{grid-template-columns:1fr}}
.opinie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.opinia{background:#fff;color:#131628;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:6px}
.opinia p{font-size:16px;line-height:1.6;margin:0 0 10px;color:#131628}
.opinia b{font-size:14px}.opinia span{font-size:13px;color:#4a4d58}
@media(max-width:900px){.opinie{grid-template-columns:1fr}}
.km-plakietka{display:inline-block;background:var(--ms-violet-tekst);color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:12px}
/* /spotkania — układ katalogu jak /books: jasny hero z wycięciem, granatowy katalog, fiolet, magnes */
.spotkania-hero{background:#ECEBE6;padding:56px 0 0;overflow:hidden}
.spotkania-hero .sh-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end}
.spotkania-hero .sh-tekst{padding-bottom:64px}
.spotkania-hero h1{font-size:clamp(34px,4.4vw,60px);font-weight:800;text-transform:uppercase;line-height:1.05;margin:0 0 18px;color:#131628}
.spotkania-hero h1 .a{color:var(--ms-violet-tekst)}
.spotkania-hero .sh-lead{font-size:20px;line-height:1.5;max-width:540px;margin:0;color:#2a2d38}
.spotkania-hero .sh-foto img{width:100%;max-width:380px;margin:0 0 0 auto;display:block}
@media(max-width:760px){.spotkania-hero .sh-grid{grid-template-columns:1fr;gap:0}.spotkania-hero .sh-tekst{padding-bottom:20px}.spotkania-hero .sh-foto img{max-width:240px;margin:0 auto}}
.katalog{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.kat-karta{flex:0 0 calc(25% - 17px);min-width:0}
@media(max-width:1000px){.kat-karta{flex-basis:calc(50% - 11px)}}
@media(max-width:560px){.kat-karta{flex-basis:100%}}
.kat-karta{background:#1A1740;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:0 0 22px;display:flex;flex-direction:column;overflow:hidden}
.kat-karta img{width:100%;aspect-ratio:16/10;object-fit:cover;margin:0 0 14px}
.kat-karta h3{font-size:19px;font-weight:800;text-transform:uppercase;color:#fff;margin:0 18px 10px;line-height:1.2}
.kat-karta p{margin:0 18px 8px;font-size:14.5px;line-height:1.5;color:rgba(251,250,247,.84)}
.kat-karta .v3-cena{color:#F0A93B;font-size:17px}
.kat-karta .v3-cena b{color:#F0A93B}
.kat-btn{margin:auto 18px 0;align-self:stretch;display:flex;align-items:center;justify-content:center;background:#fff;color:#131628;border:2px solid #5449CC;border-radius:100px;font-weight:700;font-size:15px;min-height:46px;padding:0 14px;text-align:center}
.kat-btn:hover{background:#5449CC;color:#fff}
.kat-karta p:last-of-type{margin-bottom:16px}
/* KURS-3KOL (wzór /training): lista 25 · podgląd · karta zakupu */
.k3-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:26px;align-items:start}
.k3-lewa{background:#1A1740;color:#FBFAF7;border-radius:12px;padding:22px 20px}
.k3-t{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B3ACFA}
.k3-lista{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto}
.k3-lista li{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13.5px;line-height:1.4}
.kl-przyg{color:rgba(251,250,247,.5)}.kl-przyg i{font-style:normal;font-size:11px;color:#B3ACFA;margin-left:4px}
.kl-dost button{all:unset;cursor:pointer;color:#fff;font-weight:700;display:block;width:100%}
.kl-dost button.akt,.kl-dost button:hover{color:#F0A93B}
.k3-srodek img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:16px}
.k3-srodek h3{font-size:24px;font-weight:800;margin:6px 0 10px}
.k3-nota{font-size:14px;color:#4a4d58;line-height:1.55}
.k3-prawa{position:sticky;top:110px}
.k3-karta{background:#fff;border-radius:12px;padding:26px;box-shadow:0 12px 36px rgba(19,22,40,.12)}
.k3-karta h3{font-size:21px;font-weight:800;margin:6px 0 6px}
.k3-cena{font-size:34px;font-weight:800;margin:0 0 12px;color:#131628}
.k3-karta .v2-btn{width:100%;min-width:0}
@media(max-width:1000px){.k3-grid{grid-template-columns:1fr}.k3-prawa{position:static;order:-1}.k3-lewa{order:3}}
.v2-stat{min-width:0}.v2-stat .n,.v2-stat .l{overflow-wrap:anywhere}
@media(max-width:380px){.v2-stat .n{font-size:22px}.v2-stats .v2-grid{padding:0 16px;gap:20px 12px}}
/* O mnie: HERO-D „o firmie”, kafle ról, oś czasu, siatka nagrań 2×2 */
.tytul-pas.jasny.om-hero{background:#fff;text-align:center}
.tytul-pas.jasny.om-hero h1{margin-bottom:14px}
.tp-kreska{display:block;width:40px;height:3px;background:#5449CC;margin:0 auto 34px}
.om-grid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:44px;align-items:center;max-width:1000px;margin:0 auto;text-align:left}
.om-portret{margin:0;border:10px solid #131628;border-radius:4px;background:#131628}
.om-portret img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:60% 30%}
.om-portret figcaption{background:#5449CC;color:#fff;font-weight:700;font-size:15px;padding:10px 14px;text-align:center}
.om-lead{font-size:18px;line-height:1.65;margin:0;color:#2a2d38}
@media(max-width:820px){.om-grid{grid-template-columns:1fr;gap:24px}}
.role{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:960px;margin:28px auto 0}
.rola{background:#fff;border-radius:12px;padding:20px 22px;box-shadow:0 6px 22px rgba(19,22,40,.07)}
.rola b{display:block;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#131628}
.rola span{display:block;margin-top:4px;font-size:14.5px;color:#4a4d58}
@media(max-width:760px){.role{grid-template-columns:1fr 1fr}}@media(max-width:480px){.role{grid-template-columns:1fr}}
.os-czasu{margin:30px 0 20px;display:grid;gap:0}
.os-pkt{display:grid;grid-template-columns:130px minmax(0,1fr);gap:22px;position:relative;padding-bottom:26px}
.os-pkt::before{content:"";position:absolute;left:142px;top:12px;bottom:0;width:3px;background:#B3ACFA}
.os-pkt:last-child::before{display:none}
.os-pkt::after{content:"";position:absolute;left:137px;top:10px;width:13px;height:13px;border-radius:50%;background:#5449CC}
.os-rok{font-size:26px;font-weight:700;color:#5449CC;text-align:right;line-height:1.2;padding-right:4px}
.os-tresc{padding-left:30px}.os-tresc p{margin:0 0 10px;font-size:16.5px;line-height:1.6}
.os-tresc img{width:100%;max-width:500px;aspect-ratio:500/300;object-fit:cover;border-radius:10px}
@media(max-width:560px){.os-pkt{grid-template-columns:78px minmax(0,1fr);gap:14px}.os-pkt::before{left:90px}.os-pkt::after{left:85px}.os-rok{font-size:19px}.os-tresc{padding-left:20px}}
.siatka-nagran{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:1120px;margin:0 auto}
@media(max-width:680px){.siatka-nagran{grid-template-columns:1fr!important}}
#zaufali .skany{grid-template-columns:repeat(3,120px);justify-content:start}
#zaufali .org-lista{columns:3;column-gap:28px}
#zaufali .org-lista li{break-inside:avoid}
@media(max-width:760px){#zaufali .org-lista{columns:1}}
#zaufali .skany{grid-template-columns:repeat(3,minmax(0,120px))}
@media(max-width:700px){#koniec-cta .wrap{grid-template-columns:1fr!important;text-align:center}#koniec-cta .sec-title,#koniec-cta .sec-sub{text-align:center!important}}
/* HERO-D ciemny (media) */
.tytul-pas.ciemny{background:#131628;color:#fff;padding:72px 0 64px}
.tytul-pas.ciemny h1{color:#fff;font-size:clamp(36px,5.2vw,64px);margin:0 0 16px}
.tytul-pas.ciemny h1 .a{color:#B3ACFA}
.tytul-pas.ciemny .tp-sub{max-width:640px;margin:0 auto 14px;font-size:18px;line-height:1.55;color:rgba(251,250,247,.86)}
.tytul-pas.ciemny .tp-stacje{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.12em;color:#F0A93B;text-transform:uppercase}
.tytul-pas.ciemny a.inl{color:#fff;font-weight:600;text-decoration:underline}

/* DN2: konfigurator — jasny pas tytułowy zamiast zdjęcia */
.tytul-pas.kk-hero{padding:36px 0 30px}
.tytul-pas.kk-hero h1{font-size:clamp(26px,3.2vw,40px);text-transform:none;font-weight:800;margin:0 0 12px}
.tytul-pas.kk-hero .tp-lead{max-width:620px;margin:0 auto;font-size:17px;line-height:1.55;color:#2a2d38}
.kk-wstecz-link{background:none;border:0;padding:10px 6px;font:inherit;font-weight:600;text-decoration:underline;color:var(--ms-violet-tekst);cursor:pointer;min-height:44px}
body[data-page="cennik"] .tytul-pas.ciemny{padding:40px 0 34px}
body[data-page="cennik"] .tytul-pas.ciemny h1{font-size:clamp(34px,4.4vw,52px)}
.gal-wiecej{text-align:center;margin:24px 0 8px}.gal-wiecej[hidden]{display:none}

/* X7: ruch (RUCH w SPEC §5) */
@media(prefers-reduced-motion:no-preference){.wej{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1)}.wej.widac{opacity:1;transform:none}}
/* X5: druga droga — na jasnym tle link, nie druga pigułka (pigułki obrysowe tylko na ciemnym) */
.sec:not(.dark):not(.founders-fiolet):not(.cta-koniec) .btn-outline,.sec:not(.dark):not(.founders-fiolet) .v2-btn.ghost,.sec:not(.dark):not(.founders-fiolet) .btn-ghost{background:none!important;border:0!important;box-shadow:none;padding:6px 2px;min-height:44px;display:inline-flex;align-items:center;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--ms-violet-tekst)!important;border-radius:0}

.tytul-pas.jasny .tp-lead{max-width:620px;margin:0 auto;font-size:17px;line-height:1.55;color:#2a2d38}

/* ETAP C: P11 (pasek kotwic nie wychodzi poza okno), CN2 (cena w jednej linii), X8 (jeden zestaw promieni: karty 12 px) */
.spis-strony{max-width:100vw;overflow:hidden}
table.cmp td.yes{white-space:nowrap}
.v2-card,.v3-karta,.kat-karta{border-radius:12px}
.v3-zig img{border-radius:12px 0 0 12px}.v3-zig-odw img{border-radius:0 12px 12px 0}.v3-karta{border-radius:0 12px 12px 0}.v3-zig-odw .v3-karta{border-radius:12px 0 0 12px}

/* wycięcia bez tła, wyrastające z dolnej krawędzi pasa (uwaga koordynatora 02.10) */
.hero-b{padding-bottom:0}
.hero-b .hb-grid{align-items:end}
.hero-b .hb-tekst{padding-bottom:60px}
.hero-b .hb-wyciecie{align-self:end;text-align:center}
.hero-b .hb-wyciecie img{display:block;margin:0 auto;width:auto;max-width:100%;max-height:470px}
@media(max-width:860px){.hero-b .hb-tekst{padding-bottom:28px}.hero-b .hb-wyciecie img{max-height:340px}}
.founders-fiolet:not(.kompakt){padding-bottom:0}
.founders-fiolet:not(.kompakt) .ff-tekst{padding-bottom:56px}
.founders-fiolet:not(.kompakt) .ff-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.founders-fiolet:not(.kompakt) .ff-foto img{max-width:520px;margin:0 auto}
.founders-fiolet .ff-wiecej{margin-top:26px;max-width:600px}
.spotkania-hero .sh-foto img{max-width:430px}
.founders-fiolet:not(.kompakt) .ff-tekst{padding-bottom:0}
.founders-fiolet:not(.kompakt) .ff-wiecej{margin-bottom:56px}
.founders-fiolet:not(.kompakt) .ff-foto img{max-width:600px}
@media(max-width:860px){.founders-fiolet:not(.kompakt) .ff-grid{grid-template-columns:1fr!important;gap:12px}.founders-fiolet:not(.kompakt) .ff-tekst{padding-bottom:0}.founders-fiolet:not(.kompakt) .ff-foto{order:2}.founders-fiolet:not(.kompakt) .ff-foto img{max-width:300px}.founders-fiolet:not(.kompakt) .ff-wiecej{margin-bottom:24px}.founders-fiolet:not(.kompakt) h2{font-size:34px}}
.spotkania-hero .sh-foto img{width:auto;max-width:100%;max-height:430px;margin:0 0 0 auto}
@media(max-width:760px){.spotkania-hero .sh-foto img{max-height:300px;margin:0 auto}}

/* G7: zdjęcia w kołach nad kaflami drabiny */
.v3-cztery .kolo{display:block;width:160px;height:160px;border-radius:50%;overflow:hidden;margin:0 auto 14px;background:#ECEBE6}
.v3-cztery .kolo img{width:100%;height:100%;object-fit:cover}
.v3-cztery .v2-card{align-items:stretch}.v3-cztery .badge{align-self:flex-start}

/* FQ1: FAQ dwukolumnowe — po lewej przyklejony spis kategorii, po prawej akordeon */
.faq-uklad{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start;padding-top:44px;padding-bottom:20px}
.faq-spis{position:sticky;top:110px}
.faq-spis ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:2px}
.faq-spis li a{display:block;padding:9px 0;font-weight:600;font-size:16px;color:#2a2d38;border-bottom:1px solid rgba(19,22,40,.12)}
.faq-spis li a:hover{color:var(--ms-violet-tekst)}
.faq-tresc .sec,.faq-tresc .sec.alt{background:none;padding:0 0 38px}
.faq-tresc .wrap{padding:0;max-width:none}
.faq-tresc .sec-title{text-align:left;font-size:clamp(26px,3vw,36px)}
@media(max-width:900px){.faq-uklad{grid-template-columns:1fr;gap:10px;padding-top:24px}.faq-spis{position:static}.faq-spis ul{display:flex;flex-wrap:wrap;gap:8px 14px}.faq-spis li a{border:0;padding:6px 0;font-size:14px;text-decoration:underline}.faq-spis .v2-btn{display:none}}
/* DN3: odpowiedzi konfiguratora jako kafle z ikoną (wzór /apply) zamiast pigułek i kropek */
#kk .kk-opcja{border:2px solid #E2DED3;border-radius:12px;padding:16px 18px;min-height:76px;align-items:center;gap:14px}
#kk .kk-opcja:hover{border-color:#5449CC}
#kk .kk-znacznik{flex:0 0 38px;width:38px;height:38px;margin:0;border:0;border-radius:10px;background:#EFEDFB url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235449CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18V5l11-2v13'/><circle cx='6' cy='18' r='3'/><circle cx='17' cy='16' r='3'/></svg>") center/22px no-repeat}
#kk .kk-opcja.wybrana{border-color:#5449CC;background:#F6F5FF}
#kk .kk-opcja.wybrana .kk-znacznik{background:#5449CC url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>") center/22px no-repeat}
#kk .kk-opcja.wybrana .kk-znacznik::after{display:none}
#kk .kk-filtr{border-radius:12px;border:2px solid #E2DED3}

/* KRYTYKA 02.10: pasek „Mówili o tej pracy”, blok wyboru (G4) */
.v2-stats .mowili{max-width:1100px;margin:22px auto 0;padding:14px 24px 0;border-top:1px solid rgba(19,22,40,.12);text-align:center;font-size:15px;font-weight:700;letter-spacing:.06em;color:#2a2d38}
.v2-stats .mowili span{display:inline-block;margin-right:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ms-violet-tekst)}
.blok-wyboru .wyjscie-doboru{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:30px auto 0;max-width:900px;background:#fff;border-radius:12px;padding:22px 28px;box-shadow:0 8px 28px rgba(19,22,40,.08);font-size:17px;line-height:1.5}
.blok-wyboru .wyjscie-doboru .v2-btn{flex:none}
.blok-wyboru .sciezki-linia{text-align:center;margin:22px 0 0;font-size:16px}
@media(max-width:600px){.blok-wyboru .wyjscie-doboru{padding:20px}.blok-wyboru .wyjscie-doboru .v2-btn{width:100%}}

/* KRYTYKA 02.10 §4: czytelność — treść 17–18 px na komputerze, kolor ≥ #3A3F4B, drobny tekst w kartach ≥ 15 px; H3 w kartach zwykłą wielkością liter */
@media(min-width:900px){body{font-size:17.5px;line-height:1.6}}
.sec:not(.dark):not(.founders-fiolet) p,.sec:not(.dark):not(.founders-fiolet) li,.sec:not(.dark):not(.founders-fiolet) .sec-sub{color:#3A3F4B}
.v2-card p,.card p,.kafel-dk p,.karta-num p,.v3-karta p,.kat-karta p{font-size:15.5px;line-height:1.55}
.v2-card h3,.card h3,.v3-karta h3,.kat-karta h3,.karta-num h3,.kafel-dk h3,.tz h3,.ps-kol h3{text-transform:none;letter-spacing:0;font-weight:700}
.karta-num h3{font-size:18px}
.kat-karta h3{font-size:20px}
.v2-card h3{font-size:20px}
.kk-wiecej{margin-top:12px}.kk-wiecej summary{cursor:pointer;font-weight:700;color:#B3ACFA;min-height:36px;display:flex;align-items:center}
.kk-wiecej ul{margin:8px 0 0;padding-left:18px}
/* /o-projekcie: hero bez grubej ramki */
.om-portret{border:0;border-radius:12px;background:none;overflow:hidden}
.om-portret img{aspect-ratio:4/3.4}
.om-portret figcaption{background:none;color:#2a2d38;text-align:left;padding:10px 2px 0;font-weight:700}

/* /cennik: karty szczebli nad tabelą */
.karty-szczebli{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:8px 0 34px}
.szczebel{display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:12px;padding:20px 18px;box-shadow:0 6px 22px rgba(19,22,40,.08);border:2px solid transparent;color:#131628}
.szczebel:hover{border-color:var(--ms-violet-tekst)}
.szczebel span{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ms-violet-tekst)}
.szczebel b{font-size:30px;font-weight:800;line-height:1.1}
.szczebel i{font-style:normal;font-size:15px;line-height:1.45;color:#3A3F4B}
.pelny-cennik{font-size:22px;font-weight:800;margin:0 0 14px;text-transform:none}
@media(max-width:1100px){.karty-szczebli{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.karty-szczebli{grid-template-columns:1fr 1fr}}
.gdzie{display:block;margin:-4px 0 10px;font-size:13.5px;font-weight:600;color:#3A3F4B}

.sec.dark .kc-gwarancja{max-width:640px;margin:22px auto 0;text-align:center;font-size:15.5px;line-height:1.55;color:rgba(251,250,247,.9)}
.sec.dark .kc-gwarancja a.inl{color:#B3ACFA}
table.stos td{font-size:16px;line-height:1.5;vertical-align:top}table.stos td:first-child{color:#3A3F4B;width:42%}

/* filmy przykładowe (02.10): plakat z przyciskiem odtwarzania, bez autoodtwarzania; telefon dostaje wersję 9:16 */
.film-pas{background:#131628;padding:44px 0}
.film-przyklad{margin:0 auto;max-width:860px}
.film-przyklad .fp-ramka{border-radius:12px;overflow:hidden;background:#000;box-shadow:0 18px 50px rgba(19,22,40,.35);aspect-ratio:16/9}
.film-przyklad video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.film-przyklad figcaption{margin-top:12px;font-size:15px;color:#3A3F4B;text-align:center}
.film-pas .film-przyklad figcaption{color:rgba(251,250,247,.8)}
.film-przyklad.fp-kol{max-width:none;margin-bottom:16px}
@media(max-width:700px){.film-pas{padding:28px 0}.film-pas .film-przyklad{max-width:340px}.film-pas .fp-ramka{aspect-ratio:9/16}}

/* sesja MD: para w hero głównej w tej samej skali (gitara 0,94 wysokości keyboardu), koła bez transformacji */
.v2-hero .v2-ph.para-keyboard{height:86%;max-width:22%}
.v2-hero .v2-ph.para-gitara{height:calc(86% * .94);max-width:24%}
.v3-cztery .kolo img{transform:none!important}
.om-portret{border:0;background:none}
.om-portret img{aspect-ratio:auto;max-height:520px;width:auto;margin:0 auto;object-fit:contain}
body[data-page="szkolenia"] .ps-foto{object-position:75% 30%}
@media(min-width:861px){.v2-hero .v2-ph.para-gitara{max-width:20%;left:1%}.v2-hero .v2-ph.para-keyboard{max-width:17%;right:2%}}

.rodzinne-hero .hc-foto img{aspect-ratio:540/455;object-fit:cover;object-position:78% 40%}
@media(max-width:720px){.rodzinne-hero .hc-foto img{aspect-ratio:4/5;object-position:50% 30%}}
.v2-duet{object-fit:contain}

.rodzinne-hero .hc-akcent{text-decoration:none}
@media(max-width:860px){body[data-page="index"] .v2-hero{padding-bottom:0}body[data-page="index"] .v2-duet{display:block;width:calc(100% + 40px);max-width:none;margin:8px -20px 0;padding:0}}

.panel-info{font-size:14px;line-height:1.5;color:#3A3F4B;max-width:620px;margin:14px auto 0;text-align:center}
.sec.dark .panel-info{color:rgba(251,250,247,.82)}
.panel-info-j{margin-top:18px}

/* stat: bez łamania w słowie */
.v2-stat .n{overflow-wrap:normal;word-break:normal;font-size:clamp(24px,2.6vw,36px)}
@media(max-width:600px){.v2-stat .n{font-size:26px}}
@media(max-width:380px){.v2-stat .n{font-size:21px}}

/* F72: kalendarz terminów, ceny biletów, linia misji */
.term-lista{list-style:none;margin:0 auto;padding:0;display:grid;gap:12px;max-width:760px}
.term-wiersz{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid var(--ms-line,#e3e4ea);border-radius:14px;padding:16px 20px}
.term-opis{display:flex;flex-direction:column;gap:2px;min-width:0}
.term-opis b{font-size:18px;color:#131628}
.term-nazwa{font-weight:600;color:#3d3f4a}
.term-meta,.term-uw{font-size:14px;color:var(--ms-muted,#5B616E)}
.term-brak{text-align:center;font-size:17px;margin:0}
.bilety-lista{list-style:none;margin:0 auto;padding:0;max-width:560px;display:grid;gap:8px}
.bilety-lista li{display:flex;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--ms-line,#e3e4ea);border-radius:12px;padding:13px 18px;font-size:17px}
.bilety-lista b{white-space:nowrap;color:#131628}
.misja-linia{font-size:15px;line-height:1.5;opacity:.92;margin-top:14px}
.om-misja{max-width:760px;margin:18px auto 0;text-align:center}

.bilety-kup li{align-items:center;flex-wrap:wrap}.bilety-kup li span{flex:1 1 160px}.bilety-kup .btn{padding:8px 20px;font-size:15px}
.term-warianty{width:100%}.term-warianty summary{cursor:pointer;display:inline-block;list-style:none}.term-warianty summary::-webkit-details-marker{display:none}.term-warianty .bilety-lista{margin-top:12px;max-width:none}
.bilety-nota{text-align:center;font-size:14px;color:var(--ms-muted,#5B616E);margin-top:14px}

/* F73: opinie (zakreślone kadry) */
.opinie-siatka{column-count:3;column-gap:18px;max-width:1100px;margin:0 auto}
.opinia{margin:0 0 18px;break-inside:avoid;background:#fff;border:1px solid var(--ms-line,#e3e4ea);border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(19,22,40,.06)}
.opinia img{display:block;width:100%;height:auto}
@media(max-width:900px){.opinie-siatka{column-count:2}}
@media(max-width:600px){.opinie-siatka{column-count:1}}
.bil-akcja{display:flex;gap:14px;align-items:center;flex-wrap:wrap;flex:0 0 100%}
.bilety-kup li .bil-akcja{flex:0 0 100%}.bilety-kup li>span:first-child{flex:1 1 140px}

/* F74: reguła płatności z góry */
.zapis-regula{text-align:left;margin:14px 0 0;max-width:640px}
.zapis-krotko{font-size:13px;line-height:1.45;opacity:.88;margin:12px 0 0;max-width:520px}

/* F75: główna krótsza, okładki produktów, opinie jako duże karty */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(min-width:721px){.kick-tylko-tel{display:none}}
.v3-cztery .v2-card{padding:14px 14px 20px}
.v3-cztery .okl{display:block;width:100%;height:auto;border-radius:12px;margin:0 0 14px}
.v3-cztery .v2-card .gdzie{display:block;font-size:13px;color:var(--ms-muted,#5B616E);margin:0 0 6px}
.v3-cztery .v2-card p{font-size:15.5px;margin:0 0 14px}
.v3-pas{list-style:none;margin:26px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:14.5px;color:#3b3f4b}
.v3-pas li{display:flex;align-items:center;gap:8px}
.v3-pas b{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--ms-violet-tekst);color:#fff;font-size:13px;align-items:center;justify-content:center}
.op-duze{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1320px;margin:0 auto;align-items:start}
.op-karta{margin:0;background:#fff;border:1px solid var(--ms-line,#e3e4ea);border-radius:16px;padding:26px 26px 20px;box-shadow:0 8px 28px rgba(19,22,40,.07)}
.op-karta blockquote{margin:0 0 12px;font-size:21px;line-height:1.35;font-weight:700;color:#131628}
.op-karta figcaption{font-size:14px;font-weight:700;color:var(--ms-violet-tekst);margin:0 0 14px}
.op-karta img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--ms-line,#e3e4ea)}
@media(max-width:900px){.op-duze{grid-template-columns:1fr}.op-karta blockquote{font-size:19px}}
@media(max-width:600px){.op-trzecia{display:none}}
@media(max-width:560px){
 .v3-cztery .v2-card{display:grid;grid-template-columns:116px 1fr;gap:0 14px;align-items:start;padding:12px}
 .v3-cztery .okl{grid-row:1 / span 3;margin:0}
 .v3-cztery .v2-card .gdzie,.v3-cztery .v2-card p,.v3-cztery .v2-card .v2-btn{grid-column:2}
 .v3-cztery .v2-card p{font-size:14.5px;margin:0 0 10px}
 .v3-cztery .v2-btn{padding:11px 8px;min-height:46px;font-size:14.5px}
 .v3-cztery{gap:14px}
 .v3-pas{gap:8px 18px;font-size:13.5px}
}
/* F75: zagęszczenie głównej */
.v2-stats{padding:30px 0}
#kto-prowadzi{padding-block:44px}
#kto-prowadzi .ff-foto img{max-height:470px;width:auto;max-width:100%;margin:0 auto;display:block}
#pytania{padding-block:44px}
.v3-progi.sec{padding-block:48px}
.v3-progi .sec-head{margin-bottom:22px}
@media(max-width:720px){
 #kto-prowadzi .ff-foto img{max-height:300px}
 #kto-prowadzi{padding-block:32px}
 .v2-stats{padding:22px 0}
 #pytania,.v3-progi.sec{padding-block:34px}
}
#opinie{padding-block:40px}
.op-karta{padding:22px 22px 16px}.op-karta blockquote{font-size:20px}
@media(max-width:720px){#opinie{padding-block:30px}.op-karta{padding:18px 18px 14px}.op-karta blockquote{font-size:18px;margin-bottom:8px}.op-karta figcaption{margin-bottom:10px}}
@media(min-width:721px){.v2-hero .v2-kick.kick-tylko-tel{display:none}}
.v2-stat .l2{font-size:12px;color:#5b616e;margin-top:3px;letter-spacing:.02em}
.dotarlem{font-size:15px;line-height:1.5;margin:12px 0 0}.dotarlem.om-misja{margin-top:18px}
@media(max-width:720px){#kto-prowadzi .ff-foto img{max-height:230px}}

/* F78: terminy na stronach ofert: akcja, miejsca, link do kalendarza */
.term-akcja{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.term-akcja .inl.term-zgl{font-size:14px}
.term-miejsca{font-size:13px;font-weight:700;color:#1F7A47}.term-miejsca.brak{color:#9a3b3b}
.term-wszystkie{text-align:center;margin:16px 0 0;font-size:15px}

/* 02.10.2026 F78: piąta karta (książka) na głównej — długie etykiety przycisków mieszczą się w 5 kolumnach */
@media(min-width:561px){.v2-cards.v3-pieciu .v2-card .v2-btn{white-space:normal;text-align:center;line-height:1.25;font-size:15px;padding:11px 16px;max-width:100%}}
/* telefon: pięć kart poziomych ciaśniej, żeby główna nie przekraczała ok. 7 ekranów */
@media(max-width:560px){.v3-cztery{gap:10px}.v3-cztery .v2-card{padding:10px;grid-template-columns:100px 1fr}.v3-cztery .v2-card .gdzie{font-size:12.5px;margin-bottom:3px}.v3-cztery .v2-card p{font-size:14px;line-height:1.38;margin:0 0 8px}.v3-cztery .v2-btn{min-height:42px;padding:9px 8px;font-size:14px}.v3-pas{margin-top:16px}}

/* 02.10.2026 przegląd F77 (globalnie): ciemne pasy nagłówka .sek-pas w jasnych sekcjach — reguła KRYTYKA §4 (#3A3F4B dla p/li/.sec-sub)
   przyciemniała tu jasny tekst (utwory, granie-rekreacyjne, warsztaty-nocne, na-oddzialach, projekty, edition, portal). Drugi przycisk w pasie
   (btn-ghost/btn-outline) miał kontrast ok. 2,9:1. Kwoty w kafelkach cen nie łamią się w środku. */
.sec:not(.dark) .sec-head.sek-pas p,.sec:not(.dark) .sec-head.sek-pas li,.sec:not(.dark) .sec-head.sek-pas .sec-sub{color:#FBFAF7}
.sec:not(.dark) .sec-head.sek-pas a.btn.btn-ghost,.sec:not(.dark) .sec-head.sek-pas a.btn.btn-outline{color:#B3ACFA!important}
.szczebel b{white-space:nowrap}

/* 02.10.2026 (porównanie W3/PO1): jasny tekst w ciemnej ramce numerów kryzysowych — globalnie (było tylko na /pomoc) */
.sec .wrap .crisis-box p,.sec .wrap .crisis-box li{color:rgba(251,250,247,.82)}
.sec .wrap .crisis-box .cb-foot{color:rgba(251,250,247,.6)}

/* 02.10.2026 (porównanie W8/X1/X5): czytelny akapit — tylko akapity bez własnej klasy (notki .panel-info, .mini, .cmp-note itp. zostają drobne).
   Komputer 17 px / 1,6, telefon 16 px / 1,6. Karty produktów na głównej bez zmian (limit długości strony głównej, F75). */
@media(min-width:900px){.sec p:not([class]),.card p:not([class]),.v2-card p:not([class]),.kat-karta p:not([class]),.karta-num p:not([class]){font-size:17px;line-height:1.6}}
@media(max-width:899px){.sec p:not([class]){font-size:16px;line-height:1.6}}
.v3-cztery .v2-card p:not([class]){font-size:15.5px;line-height:1.55}
@media(max-width:560px){.v3-cztery .v2-card p:not([class]){font-size:14px;line-height:1.38}}

/* 02.10.2026 (porównanie, scalone z wyników 4 grup): wspólne komponenty, które strony dotąd kopiowały u siebie */
/* W1: pasek zaufania poza .hero-b (w .hero-b zostaje jego własny styl, wyższa specyficzność) */
.hb-zaufanie{margin:16px auto 0;font-size:13.5px;font-weight:600;line-height:1.5;color:#3A3F4B;text-align:center;max-width:760px}
.hero-c .hb-zaufanie,.om-hero .hb-zaufanie{margin:14px 0 0;text-align:left;max-width:none}
.tytul-pas.ciemny .hb-zaufanie,.sec.dark .hb-zaufanie,.ms-hero .hb-zaufanie{color:rgba(251,250,247,.8)}
/* HERO-D ciemny z przyciskiem (/cennik, /dlaczego-dziala, /filmoteka, /start) */
.tytul-pas.ciemny .tp-cta{margin:24px 0 0}
.tytul-pas.ciemny .tp-sub{max-width:700px}
/* białe karty w ciemnych sekcjach (W6): tytuły i podpisy czytelne */
.sec.dark .widoki figcaption{color:rgba(251,250,247,.82)}
.sec.dark .karta-num h3,.sec.dark .karta-num a.inl{color:var(--ms-violet-tekst)}
.sec.dark .karta-num p{color:#2a2d38}
.founders-fiolet a.ff-link{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}
/* W7: rozwinięcie „więcej” jako wspólny komponent (wcześniej kopie na /program, /cennik, /karaoke, /kregi, /kontakt) */
details.ed-wiecej{max-width:860px;margin:16px auto 0;border:1px solid rgba(15,17,22,.14);border-radius:14px;background:rgba(255,255,255,.6)}
.ed-wiecej>summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;font-weight:600;font-size:17px;line-height:1.35;position:relative}
.ed-wiecej>summary::-webkit-details-marker{display:none}
.ed-wiecej>summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:#6055D6}
.ed-wiecej[open]>summary::after{content:"\2212"}
.ed-wiecej>.ed-wiecej-tresc{padding:0 20px 22px}
/* 03.10.2026: rozwinięcie na granacie — jasne tło 60% dawało biały napis na jasnoszarym (słaby kontrast) */
.sec.dark details.ed-wiecej{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)}
.sec.dark .ed-wiecej>summary::after{color:#B3ACFA}
.v2-hero .v2-zaufanie.hb-zaufanie{max-width:none}  /* 02.10.2026: wspólny .hb-zaufanie (760 px) nie zawęża paska w .v2-hero, gdzie margines jest 0 */

/* ===================== 03.10.2026 — silnik: pozycje z triage (W-…) i decyzji F81 ===================== */

/* 03.10.2026 W-206 (D167/D178: podtytuł pod logo na WSZYSTKICH stronach i szerokościach, także na telefonie).
   Zastępuje ukrywanie z reguł 01.10 (≤699 px) i X2 (≥1120 px) oraz z progu ≤380 px — nadpisanie na końcu arkusza. */
.ms-logo .word i{display:block;white-space:nowrap}
@media(max-width:699px){.ms-logo .word i{display:block;font-size:9.5px;letter-spacing:.01em;margin-top:2px;white-space:nowrap}}
@media(min-width:1120px){header.ms-head .ms-logo .word i{display:block;font-size:11px;letter-spacing:.04em;margin-top:3px;white-space:nowrap}}
/* wysokość logo odporna na resety obrazów w stronach (edycja-nowa/-b: img[width][height]:not(…){height:auto} przebijał
   .ms-logo .ms-logo-img i logo 1100 px rozpychało stronę po pokazaniu podtytułu). Wartości jak dotąd: 40 px, poniżej 700 px 32 px. */
header.ms-head .ms-logo .ms-logo-img{height:40px!important;width:auto!important}
@media(max-width:699px){header.ms-head .ms-logo .ms-logo-img{height:32px!important}}

/* 03.10.2026 W-314 / W-138: etykieta segmentu pod kadrem opinii (figcaption z build.py, pole „segment” w opinie.json) */
.opinia .opinia-seg{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ms-muted);margin:0;padding:8px 14px 12px;line-height:1.35}

/* 03.10.2026 W-388: odnośnik „Przejdź do treści” (site.js) — poza ekranem, widoczny po Tab; cel <main id="tresc"> bez obwódki */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:8px;z-index:1000;background:#fff;color:#131628;padding:10px 16px;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
#tresc:focus{outline:none}

/* 03.10.2026 W-448: nagłówki kart bez wersalików na /umiejetnosci i /media; podpisy skanów na /o-projekcie min. 15 px
   (na /o-projekcie nie ma <figcaption> — podpisy to .skan-podpis, ustawione w stronie na 11,5–13 px, stąd !important) */
body[data-page="umiejetnosci"] h3,body[data-page="media"] h3{text-transform:none;letter-spacing:0}
body[data-page="o-projekcie"] .skan-podpis{font-size:15px!important;line-height:1.4}

/* 03.10.2026 W-451: drabina na głównej — pięć przycisków równej szerokości (cała szerokość karty) i wysokości.
   min-height 52 px tylko od 561 px: na telefonie zostaje 42 px, żeby główna nie przekroczyła 7 ekranów. */
.v3-progi .v3-pieciu .v2-card .v2-btn{align-self:stretch;width:100%;display:flex;align-items:center;justify-content:center}
@media(min-width:561px){.v3-progi .v3-pieciu .v2-card .v2-btn{min-height:52px;padding-top:6px;padding-bottom:6px;line-height:1.2}}  /* 2 linie po 18 px + 12 px = 48 → oba warianty mają 52 px */

/* 03.10.2026 W-394: nagłówki sekcji do lewej na /program i /warsztaty-grupowe (skala jak .sec-title.lewa); bez głównej */
/* blok nagłówka przy lewej krawędzi treści (margin-left:0), a nie wyśrodkowany 760 px z tekstem do lewej — inaczej tytuł
   zaczyna się w innym miejscu niż siatka pod nim; pasy zdjęciowe (.sek-pas) bez zmian */
body[data-page="program"] .sec-head:not(.sek-pas),body[data-page="warsztaty-grupowe"] .sec-head:not(.sek-pas){text-align:left;margin-left:0;margin-right:0}
body[data-page="program"] .sec-head:not(.sek-pas) .sec-title,body[data-page="warsztaty-grupowe"] .sec-head:not(.sek-pas) .sec-title{font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em;max-width:560px}

/* 03.10.2026 W-403: pas „Co dalej” — jeden przycisk, pozostałe jako odnośniki (pole dotyku 44 px) */
.ms-co-dalej-linki{align-items:center;gap:12px 22px}
.ms-co-dalej-linki a.inl{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* 03.10.2026 W-330: odnośnik do zdjęć i filmów z galerii na stronach form spotkań (site.js, galeriaZajec) */
.ms-gal-link{margin:14px 0 0;font-size:17px;line-height:1.5;text-align:center}
.ms-gal-zajec{padding-block:28px}

/* 03.10.2026 W-455 (+ W-466): H1 na telefonie min. 30 px, pytania FAQ 18 px */
@media(max-width:600px){
  .v2-hero h1,.tytul-pas.kk-hero h1{font-size:30px}
  h1.sec-title{font-size:30px}
  .faq summary{font-size:18px}
}

/* 03.10.2026 F83: pusty wiersz pod przyciskiem, gdy typ nie ma dat (CTA_ZGL nic nie wstawia) */
.hb-link:empty,.hc-link:empty,.wg-link:empty,.kc-linia:empty,.rm-zgl:empty{display:none}

/* P1-07: stopka na fiolecie #5449CC — kontrast ≥ 4,5:1 (było 2,77–4,08) */
footer.ms-foot p{color:rgba(251,250,247,.92)}
footer.ms-foot h5{color:#E4E0FF}
footer.ms-foot .fkontakt .fdane{opacity:1}
footer.ms-foot .bottom{color:rgba(251,250,247,.85)}
/* P1-08: cytat opinii tekstem nad kadrem z Facebooka (kadr w skali 0,3 był nieczytelny) */
.opinia .opinia-cytat{margin:0;padding:16px 16px 8px;font-size:17px;line-height:1.45;font-weight:600;color:#131628}
.opinia .opinia-seg b{text-transform:none;letter-spacing:0;font-weight:700;color:#131628}
/* 03.10.2026 (pętla 14:30, poza limitem): nadtytuł nad H1 na telefonie nie wygląda jak drugi przycisk */
.v2-hero .v2-kick.kick-tylko-tel{background:none;color:var(--ms-violet-tekst);padding:0;border-radius:0;font-size:12px;letter-spacing:.14em;margin-bottom:12px}
/* 03.10.2026 audyt narzędzi: strony narzędzi mają własny pas „co dalej” (#dalej.narz-dalej) z jednym przyciskiem; wspólny pas z site.js powtarzał go tuż pod nim (dwa „Zobacz program”, na akordach dwa różne przyciski) */
main:has(.narz-dalej)~.ms-co-dalej{display:none}
/* 03.10.2026 audyt narzędzi: przyciski narzędzi krojem serwisu (bez tego przeglądarka dawała Arial) */
:is(#ak,#nut,#git,#tool,#ton) button{font-family:inherit}
/* 03.10.2026 audyt wiedza (poza rotacją): artykuł wiedzy kończy się jednym przyciskiem w .art-dalej (XW4);
   pas „Co dalej” z site.js dokładał drugi wypełniony przycisk w inną stronę i powtarzał te same odnośniki.
   .art-dalej mają wyłącznie artykuły wiedzy-*, strony z rotacji nie są dotknięte. */
body:has(.art-dalej) .ms-co-dalej{display:none}
/* 03.10.2026 audyt wiedza: podpisy zdjęć w artykułach wiedzy do 15 px (rozmiar 14 px stoi w atrybucie style, stąd !important).
   .art-dalej mają wyłącznie artykuły wiedza-*. Pasek zaufania .hb-zaufanie bez zmian (wspólny komponent, W1/XW2). */
body:has(.art-dalej) .prose figcaption{font-size:15px!important}
/* 03.10.2026 (audyt dostępności): nagłówki grup w stopce jako H2 (były H5: przeskok h2→h5 na każdej stronie); wygląd jak dawne H5 */
footer.ms-foot h2.fgrupa-h{font-family:'JetBrains Mono',monospace;font-size:11px;line-height:inherit;letter-spacing:.2em;text-transform:uppercase;color:#E4E0FF;margin:0 0 14px;font-weight:500}
footer.ms-foot .fgrupa summary h2.fgrupa-h{display:inline-block}

/* 03.10.2026 SP-09: link „Wszystkie opinie (14) →” pod blokami opinii */
.opinie-wszystkie{text-align:center;margin:22px 0 0;font-size:16px;font-weight:600}
.opinie-wszystkie a.inl{display:inline-flex;align-items:center;min-height:44px}
/* 04.10.2026 limit długości głównej F75: 2 cytaty bez zrzutów; na telefonie obok siebie z przewijaniem w bok */
.op-duze.op-dwie{grid-template-columns:repeat(2,1fr);max-width:1100px}
@media(min-width:721px){#opinie{padding-block:26px}.opinie-wszystkie{margin-top:10px}.opinie-wszystkie a.inl{min-height:32px}}
@media(max-width:600px){
 .op-duze.op-dwie{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;margin:0 -2px;align-items:stretch}
 .op-duze.op-dwie .op-karta{flex:0 0 86%;scroll-snap-align:start;box-shadow:0 4px 14px rgba(19,22,40,.07)}
 .op-duze.op-dwie .op-karta figcaption{margin-bottom:0}
 .opinie-wszystkie{margin-top:14px}
}
.op-duze.op-dwie:focus-visible{outline:2px solid var(--ms-violet);outline-offset:4px;border-radius:16px}

/* 05.10.2026 F129 (A4): na głównej 4 karty-okładki zamiast 5; bez zawężenia karty rosły (okładki 4:5) i główna przekraczała limit 4,5 ekranu (F75) — szerokość kart jak przy pięciu */
@media(min-width:981px){.v2-cards.v3-cztery.v3-okladki{max-width:860px;margin-left:auto;margin-right:auto}}
@media(min-width:981px){.v2-cards.v3-okladki .v2-card .v2-btn{font-size:14px;padding:11px 6px;max-width:100%}}

/* 05.10.2026 D-05.10-F190: odstęp tekstu od ramek, teł i cieni (pomiar skryptem _research/f190-2026-10-05/odstepy.py; pola z treścią >= 12 px, małe etykiety i kontrolki >= 6 px) */
/* karty nagrań (media, o-projekcie): tytuł i „Więcej o tym nagraniu” miały 0 px od ramki; opis przy dolnej krawędzi karty */
.yt-card>.yt-t{margin:0;padding:14px 16px 12px}
.yt-card>p:not(.yt-cytat){padding-left:16px;padding-right:16px}
.yt-card>p:last-child{padding-bottom:14px}
.yt-card>.yt-cytat{margin-left:16px;margin-right:16px}
/* karty z płytą/filmem bez miniatury: tytuł nie przy samej górze karty */
.yt-plyty .yt-ph:not(:has(img)){padding-top:14px}
.yt-card>.yt-skrot{margin:auto 0 0;padding:0 16px 14px}
.yt-card>.yt-skrot summary{padding:2px 0}
/* karty „div.card” z białym tłem (sekcja ciemna, bilet): płaski styl bez odstępu u góry i z prawej wyglądał jak tekst przy krawędzi */
.sec.dark div.card,div.card[style*="background"]{padding:22px 24px 22px 22px}
/* okładki ofert na głównej: etykieta przycisku w jednej linii, ale nie przy samej krawędzi przycisku */
@media(min-width:981px){.v2-cards.v3-cztery.v3-okladki .v2-card .v2-btn{font-size:13px;padding:11px 8px}}
/* kroki „Co chcesz zagrać → Samodzielność”: ol.v3-pas dziedziczył białe tło i cień po wierszu .v3-pas (div), więc wyglądał jak ramka bez odstępu */
ol.v3-pas{background:none;box-shadow:none;border-radius:0}
/* zwarte kontrolki: najmniej 6 px po bokach i 3–4 px u góry i dołu */
.fk-kat-det .fk-licz{padding:4px 11px}
#ton .seg button{padding-left:.45rem;padding-right:.45rem}
#ak td button{padding-left:.45rem;padding-right:.45rem}
.wb-kto-male{padding:12px}
.karty-foto .grid.g3>.card>.kf-typo{padding:0 12px}
@media(max-width:560px){table.cmp th,table.cmp td{padding:12px 14px}}
@media(max-width:720px){.spis-strony-wrap{padding-left:8px;padding-right:8px}}  /* spis na telefonie: pierwszy odnośnik nie przy samej krawędzi ekranu */
/* kafle „dla kogo” (4 w rzędzie): ciągi ze spacjami niełamliwymi wychodziły poza akapit, prawie do krawędzi karty */
.kafel-dk details p,.kafel-dk h3{overflow-wrap:break-word}
/* 05.10.2026 D-05.10-F207: logo SVG w nagłówku nie rozciąga się do szerokości podtytułu (kolumna flex rozciągała obraz i wyśrodkowywała znak) */
.ms-logo .word .ms-logo-img{align-self:flex-start}
/* 06.10.2026 D-06.10-F225: blok „Zanim zapłacisz: to umowa terminowa” — jasna karta z fioletowym akcentem, czytelna na ciemnym i jasnym tle */
.umowa-term,.sec.dark .umowa-term{max-width:760px;margin:26px auto;padding:20px 24px 18px;background:#FBFAF7;color:#131628;border:1px solid #D9D5F3;border-left:5px solid #5449CC;border-radius:0 12px 12px 0;text-align:left}
.umowa-term .umt-t,.sec.dark .umowa-term .umt-t{margin:0 0 8px;font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.01em;color:#131628}
.umowa-term p,.sec.dark .umowa-term p{margin:0 0 9px;font-size:16px;line-height:1.6;color:#131628;text-align:left}
.umowa-term p:last-child{margin-bottom:0}
.umowa-term .umt-m,.sec.dark .umowa-term .umt-m{font-size:14.5px;color:#3A3F4B}
.umowa-term a.inl,.sec.dark .umowa-term a.inl{color:#5449CC}
.umowa-term.umt-krotki{padding:14px 18px 12px}
.umowa-term.umt-krotki p{font-size:15px;margin-bottom:6px}
.umowa-term .umt-zgoda{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;margin:8px 0 0}

/* 06.10.2026 F242 (Michał: „po otwarciu chciałbym mieć możliwość regulacji wielkości okna wideo”): pasek pod otwartym nagraniem.
   Rozmiary okna: mniejsze (64% ramki), normalne (cała szerokość karty), większe (karta na całą siatkę, tylko przy dwóch kolumnach
   i do wysokości ekranu). Przyciski mają 44 px wysokości, widoczny fokus i kontrast co najmniej 6,5:1. */
.yt-reg,.yt-reg-czesci{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;background:var(--ms-white);border-top:1px solid var(--ms-line)}
.yt-reg-czesci{padding-bottom:0;border-top:0}
.yt-reg-b{font:inherit;font-size:14px;font-weight:600;line-height:1.2;min-height:44px;padding:0 14px;border:1.5px solid var(--ms-violet-tekst);border-radius:10px;background:transparent;color:var(--ms-violet-tekst);cursor:pointer}
.yt-reg-b:hover:not(:disabled){background:var(--ms-violet-tekst);color:#fff}
.yt-reg-b:disabled{opacity:.45;cursor:default}
.yt-reg-b:focus-visible{outline:3px solid var(--ms-violet);outline-offset:2px}
.yt-reg-b.yt-reg-wl{background:var(--ms-violet-tekst);color:#fff}
.yt-reg-pe{margin-left:auto}
.yt-reg-stan{flex-basis:100%;font-size:12.5px;line-height:1.3;color:var(--ms-muted)}
.yt-card.yt-r-m .yt-fr{width:64%;margin-left:auto;margin-right:auto}
@media(min-width:700px){.yt-grid>.yt-card.yt-r-d{grid-column:1/-1}}
.yt-card.yt-r-d .yt-fr{width:min(100%,calc((100vh - 170px)*16/9));margin-left:auto;margin-right:auto}
/* 06.10.2026 F261: pętla wideo na stronie głównej (bez dźwięku, bez kontrolek) między paskiem faktów a „Od czego zacząć” */
.pet-film{background:#fff;padding:0 0 40px}
.pet-film-ram{margin:0 auto;max-width:880px;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#15171d;box-shadow:0 10px 30px rgba(19,22,40,.14)}
.pet-film-ram video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
@media(max-width:600px){.pet-film{padding:0 0 28px}.pet-film-ram{border-radius:12px}}
/* 06.10.2026 F262: portret w ciemnej marynarce (wycięcie RGBA) na białym panelu: „O mnie” i „Kto będzie Cię prowadził?” */
.portrait-wrap img.portret-bialy{background:#fff;object-fit:contain;object-position:center bottom}
.om-portret.bialy{background:#fff}
.om-portret.bialy img{aspect-ratio:840/1094;object-fit:contain;object-position:center bottom;width:auto;max-width:100%;max-height:430px;margin:0 auto;display:block}
@media(max-width:820px){.om-portret.bialy img{max-height:360px}}
/* 09.10.2026 F303/S10: zdjęcie Michała pod H1 (site.js fotoMichala) — duże 16:9 albo małe okrągłe z podpisem */
.mdl-fm{margin:18px 0 8px;max-width:440px;width:100%}
.mdl-fm.mdl-fm-srodek{margin-left:auto;margin-right:auto}
.mdl-fm img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 6px 22px rgba(0,0,0,.14)}
.mdl-fm.mdl-fm-maly{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:12px 0 6px}
.mdl-fm.mdl-fm-maly.mdl-fm-srodek{margin-left:auto;margin-right:auto}
.mdl-fm.mdl-fm-maly img{width:52px;height:52px;aspect-ratio:1;border-radius:50%;box-shadow:none;flex:none}
.mdl-fm.mdl-fm-maly figcaption{font-size:.92rem;opacity:.85;line-height:1.2}
@media(max-width:560px){.mdl-fm{margin-left:auto;margin-right:auto}}
/* 09.10.2026 F318/S16: zwijacze „pokaż więcej” jako widoczne przyciski (site.js zwijacze()) */
details.mdl-zw{border:0;background:none;box-shadow:none;border-radius:12px}
details.mdl-zw>summary{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;max-width:100%;min-height:52px;padding:12px 20px;border:2px solid #5B4BD5;border-radius:12px;background:#EEEBFF;color:#3E2FB8;font-weight:700;font-size:16.5px;line-height:1.3;text-align:center;cursor:pointer;list-style:none;position:relative;transition:background .15s,color .15s}
details.mdl-zw>summary::-webkit-details-marker{display:none}
details.mdl-zw>summary::before{content:"";flex:none;width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;transition:transform .15s}
details.mdl-zw[open]>summary::before{transform:rotate(90deg)}
details.mdl-zw>summary::after,.sec.dark details.mdl-zw>summary::after,.ed-wiecej.mdl-zw>summary::after,.ed-wiecej.mdl-zw[open]>summary::after{content:none}
details.mdl-zw>summary:hover{background:#5B4BD5;color:#fff}
details.mdl-zw>summary:focus-visible{outline:3px solid #1B1363;outline-offset:3px}
details.mdl-zw>summary .zw-zwin{display:none}
details.mdl-zw[open]>summary .zw-et{display:none}
details.mdl-zw[open]>summary .zw-zwin{display:inline}
details.mdl-zw .zw-n{font-weight:600;opacity:.85}
details.ed-wiecej.mdl-zw{max-width:860px;margin:16px auto 0}
details.mdl-zw>.ed-wiecej-tresc,details.mdl-zw[open]>*:not(summary){margin-top:12px}
.yt-card .yt-skrot.mdl-zw{padding:0 16px 14px}
.yt-card .yt-skrot.mdl-zw>summary{min-height:44px;font-size:15px;padding:8px 14px}
.sec.dark details.mdl-zw>summary{background:#B3ACFA;border-color:#B3ACFA;color:#1B1363}
.sec.dark details.mdl-zw>summary:hover{background:#fff;color:#1B1363;border-color:#fff}
@media(max-width:560px){details.mdl-zw>summary{width:100%;font-size:16px}}

.yt-card .yt-skrot.mdl-zw>summary{color:#3E2FB8;font-weight:700;background:#EEEBFF}
.yt-card .yt-skrot.mdl-zw>summary:hover{color:#fff;background:#5B4BD5}
/* 09.10.2026 F331/S18: pytanie pod H1 strony głównej (wyróżnione), zdanie pod nim jako lead */
.v2-hero .v2-pyt{font-size:clamp(19px,2.3vw,26px);line-height:1.25;font-weight:800;color:var(--ms-violet-tekst);max-width:640px;margin:20px auto 8px}
.v2-hero .v2-pyt+.v2-lead{margin-top:0;margin-bottom:20px}
/* 09.10.2026 F332/F337/S19: nowe logo (cienkie „dla”), czarne tło nagłówka i stopki */
header.ms-head{background:#000;border-bottom:1px solid rgba(255,255,255,.14)}
footer.ms-foot{background:#000}
.ms-logo-img{height:50px;width:auto;display:block}
@media(max-width:560px){.ms-logo-img{height:50px}}
header.ms-head .ms-logo .ms-logo-img{height:52px!important;width:auto!important}
@media(max-width:699px){header.ms-head .ms-logo .ms-logo-img{height:46px!important}}
/* 09.10.2026 F356/S25: nagłówki grup wg oferty w siatce galerii (nagłówek = odnośnik do strony oferty) */
.gal-siatka .gal-grupa{grid-column:1/-1;flex:0 0 100%;list-style:none;margin:18px 0 4px}
.gal-grupa-tytul{font-size:clamp(20px,2.4vw,26px);font-weight:800;margin:0;letter-spacing:-.01em}
.gal-grupa-tytul a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid var(--ms-violet-tekst)}
.gal-grupa-tytul a:hover{color:var(--ms-violet-tekst)}
.gal-siatka.gal-ios .gal-grupa{margin:14px 24px 2px}

/* 09.10.2026 F356/S25: „niech tylko będzie ilość 3 5 7 i lata” — bez rzędu Wszystko/Zdjęcia/Filmy */
.gal-filtry .gal-rodzaje{display:none!important}

/* 10.10.2026 F449 (Michał: „zmień te kategorie na lata”): rok jako przyciski; lista rozwijana ukryta; na telefonie pasek przewijany poziomo; nagłówki grup to lata */
.gal-rok-etykieta{display:none!important}
.gal-lata{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gal-lata .gal-filtr{min-height:40px;padding:8px 14px;font-size:14.5px}
@media(max-width:640px){
  .gal-lata{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:2px 16px;width:calc(100% + 32px);order:2}
  .gal-lata::-webkit-scrollbar{display:none}
  .gal-lata .gal-filtr{flex:none;white-space:nowrap}
}

/* 10.10.2026 F449: pętla TVP2 na głównej prowadzi do pełnego reportażu (/media#tvp2); karta z kotwicą i przycisk „Włącz dźwięk” */
.pet-film-ram{position:relative}
.pet-film-ov{position:absolute;inset:0;z-index:2;display:block;cursor:pointer;color:#fff;text-decoration:none}
.pet-film-cap{position:absolute;left:14px;bottom:14px;background:rgba(19,22,40,.82);color:#fff;border-radius:999px;padding:9px 16px;font-weight:700;font-size:15px;line-height:1.2;transition:background .15s}
.pet-film-ov:hover .pet-film-cap,.pet-film-ov:focus-visible .pet-film-cap{background:var(--ms-violet-tekst,#4f46c8)}
.pet-film-ov:focus-visible{outline:3px solid var(--ms-violet-2,#7c6df0);outline-offset:-3px}
#tvp2{scroll-margin-top:88px}
.yt-dzwiek{position:absolute;left:12px;top:12px;z-index:3;min-height:44px;padding:10px 16px;border:0;border-radius:999px;background:#fff;color:#15171d;font:inherit;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.yt-dzwiek:hover{background:#ece9ff}

/* 10.10.2026 D-10.10-F450 (Michał: „popraw wygląd tego, bo wygląda nieprofesjonalnie jak przypadkowy tekst w wordzie”): stopka — kontakt jako przyciski z ikonami, dane firmy w bloku, linki listą bez kropek, © na dole */
footer.ms-foot .fkontakt{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22)}
footer.ms-foot .fkontakt-h{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#E4E0FF;margin:0 0 14px;font-weight:500}
footer.ms-foot .fk-lista{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
footer.ms-foot .fk-lista li{margin:0;padding:0}
footer.ms-foot a.fk-btn{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px;border:1px solid rgba(255,255,255,.28);border-radius:12px;color:#fff;text-decoration:none;font-size:16px;line-height:1.3;background:rgba(255,255,255,.04);transition:background .15s,border-color .15s}
footer.ms-foot a.fk-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);text-decoration:none}
footer.ms-foot a.fk-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
footer.ms-foot .fk-ik{flex:none;color:#C9C2FF}
footer.ms-foot .fk-btn .fk-et{display:block;font-size:12px;letter-spacing:.04em;color:rgba(251,250,247,.72);margin-bottom:1px}
footer.ms-foot .fk-btn span{min-width:0;overflow-wrap:anywhere}
footer.ms-foot .fkontakt p.fk-blik{margin:0 0 14px;font-size:13.5px;color:rgba(251,250,247,.8)}
footer.ms-foot .fkontakt p.fdane{margin:0;font-size:12.5px;line-height:1.65;color:rgba(251,250,247,.72);opacity:1}
footer.ms-foot .fstopka-linki{margin-top:26px;padding-top:6px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:1fr;gap:0}
footer.ms-foot .fstopka-linki a{display:flex;align-items:center;min-height:44px;padding:6px 0;color:rgba(251,250,247,.9);text-decoration:none;font-size:15px;border-bottom:1px solid rgba(255,255,255,.08)}
footer.ms-foot .fstopka-linki a:hover{color:#fff;text-decoration:underline}
footer.ms-foot .bottom{margin-top:22px;padding-top:18px;text-align:left;font-size:13px}
@media(min-width:600px){
  footer.ms-foot .fk-lista{grid-template-columns:1fr 1fr}
  footer.ms-foot .fstopka-linki{grid-template-columns:1fr 1fr;column-gap:28px}
}
@media(min-width:1000px){
  footer.ms-foot .fk-lista{grid-template-columns:1.45fr 1fr 1fr 1.25fr}
  footer.ms-foot .fstopka-linki{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;border-top:0;padding-top:0}
  footer.ms-foot .fstopka-linki a{border-bottom:0;min-height:40px}
}
/* strona /pomoc: bez płatności i oddzwonienia (reguły wyżej); po ukryciu zostają trzy przyciski */
@media(min-width:361px){footer.ms-foot .fk-btn .fk-mail{white-space:nowrap}}
@media(min-width:600px) and (max-width:999px){footer.ms-foot .fk-btn .fk-mail{white-space:normal;overflow-wrap:anywhere}}

/* 10.10.2026 D-10.10-F453 (Michał: „pod logo … napis … jest nierówno i nieprofesjonalnie”): podtytuł pod logo = szerokość logo, mały, lekko rozstrzelony, przygaszony (70% bieli), stały odstęp;
   rozmiar i odstęp liter wylicza site.js (dopasujPodtytul); poniższe wartości to tylko zapas przed uruchomieniem skryptu. */
header.ms-head .ms-logo .word{align-items:flex-start}
header.ms-head .ms-logo .word i,.ms-logo .word i{display:block!important;font-style:normal;font-weight:500;font-size:9px;letter-spacing:.08em;line-height:1;margin-top:5px!important;color:rgba(251,250,247,.7);white-space:nowrap;text-align:left;text-transform:none}

/* 10.10.2026 D-10.10-F458: lista „Jak to działa” przy Umiejętności (zamiast długich akapitów), wyrównana do lewej */
.jak-dziala{margin-top:14px;text-align:left}
.jak-dziala .jd-lista{margin:8px 0 0;padding-left:22px;display:grid;gap:9px;font-size:15px;line-height:1.55}
.jak-dziala .jd-lista li::marker{font-weight:700;color:var(--ms-violet-tekst)}
.jak-dziala .jd-uwaga{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--ms-muted)}

/* 10.10.2026 D-10.10-F458: lista „Jak to działa” przy Umiejętności (zamiast długich akapitów), wyrównana do lewej */
.jak-dziala{margin-top:14px;text-align:left}
.jak-dziala .jd-lista{margin:8px 0 0;padding-left:22px;display:grid;gap:9px;font-size:15px;line-height:1.55}
.jak-dziala .jd-lista li::marker{font-weight:700;color:var(--ms-violet-tekst)}
.jak-dziala .jd-uwaga{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--ms-muted)}

/* 10.10.2026 D-10.10-F462 (Michał: „usuń podpisy zdjęć w galerii”): żadnych widocznych podpisów pod kafelkami ani w powiększeniu (alt zostaje) */
.gal-podpis,.gal-lupa-podpis{display:none!important}

/* 10.10.2026 D-10.10-F461 (pkt 1, Michał: „robić wszystkie”): pojedyncza karta w siatce nagrań (np. „Rekomendacje” na /media) zajmuje cały rząd — film z lewej, opis z prawej — zamiast stać sama z pustym miejscem obok */
@media(min-width:700px){
  .yt-grid>.yt-card:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:start}
  .yt-grid>.yt-card:only-child>.yt-fr{grid-column:1;grid-row:1/span 6}
  .yt-grid>.yt-card:only-child>:not(.yt-fr){grid-column:2}
}

/* 10.10.2026 F465 (uwaga MdL-STRONA: pusta przestrzeń ok. 130 px między „Własne nagrania” a „Gdzie jeszcze o tym mówiłem” na /media): dwie sąsiednie sekcje dodawały po 66 px dopełnienia (52 px na telefonie); teraz razem ok. 32 px, w rytmie strony */
.mdl-filmy-sek{padding-bottom:32px!important}
.mdl-po-filmach{padding-top:0!important}
@media(max-width:700px){.mdl-filmy-sek{padding-bottom:26px!important}}

/* 10.10.2026 D-10.10-F467: przyciski rozwijające pisane zwykłym zdaniem, nie WERSALIKAMI */
details.mdl-zw>summary,details.mdl-zw>summary .zw-et,details.mdl-zw>summary .zw-zwin{text-transform:none!important;letter-spacing:normal!important}

/* 11.10.2026 F500 (pkt 5): lista rozdziałów pod filmem w odtwarzaczu (aktywna, gdy karta ma data-rozdzialy) */
.yt-rozd{margin:8px 12px 14px;display:grid;gap:6px}
.yt-rozd-t{margin:0 0 2px;font-size:13px;font-weight:700;color:var(--ms-muted);letter-spacing:.02em}
.yt-rozd-b{display:flex;gap:10px;align-items:baseline;min-height:44px;padding:8px 12px;border:1px solid rgba(15,17,22,.16);border-radius:10px;background:#fff;color:var(--ms-text);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.yt-rozd-b:hover{border-color:var(--ms-violet-2)}
.yt-rozd-b[aria-current="true"]{border-color:var(--ms-violet-tekst);background:#EFEDFF;font-weight:600}
.yt-rozd-c{font-variant-numeric:tabular-nums;color:var(--ms-violet-tekst);font-weight:700;flex:none;min-width:3.2em}

/* 11.10.2026 F518 (CLS, decyzja MdL-STRONA): miejsce zarezerwowane przed wstawieniem elementów budowanych skryptem.
   Nagłówek, pasek ogłoszeń i zdjęcie pod H1 pojawiały się po pierwszym malowaniu i spychały treść (CLS 0,13–0,38). */
@media(min-width:1200px){body:not(.ms-head-ready){padding-top:122px}}
@media(min-width:981px) and (max-width:1199px){body:not(.ms-head-ready){padding-top:188px}}
@media(max-width:980px){body:not(.ms-head-ready){padding-top:128px}}
@media(max-width:560px){body:not(.ms-head-ready){padding-top:120px}}
@media(max-width:480px){body:not(.ms-head-ready){padding-top:145px}}
div.spis-strony[data-spis][hidden]:not(.spis-brak){display:block!important;height:60px;visibility:hidden}
body[data-page="cennik"]:not(.mdl-fm-gotowe) main h1,
body[data-page="edition"]:not(.mdl-fm-gotowe) main h1,
body[data-page="filmoteka"]:not(.mdl-fm-gotowe) main h1,
body[data-page="koncert-dla-dziecka-z-hospicjum"]:not(.mdl-fm-gotowe) main h1,
body[data-page="narzedzia"]:not(.mdl-fm-gotowe) main h1,
body[data-page="opinie"]:not(.mdl-fm-gotowe) main h1,
body[data-page="po-programie"]:not(.mdl-fm-gotowe) main h1,
body[data-page="po-szkole-muzycznej"]:not(.mdl-fm-gotowe) main h1,
body[data-page="pomoc"]:not(.mdl-fm-gotowe) main h1,
body[data-page="prawo-jazdy"]:not(.mdl-fm-gotowe) main h1,
body[data-page="scena-w-domu"]:not(.mdl-fm-gotowe) main h1,
body[data-page="sprzet"]:not(.mdl-fm-gotowe) main h1,
body[data-page="terminy"]:not(.mdl-fm-gotowe) main h1,
body[data-page="umiejetnosci"]:not(.mdl-fm-gotowe) main h1,
body[data-page="utwory"]:not(.mdl-fm-gotowe) main h1,
body[data-page="wiedza-15-minut"]:not(.mdl-fm-gotowe) main h1,
body[data-page="piosenki-na-zamowienie"]:not(.mdl-fm-gotowe) main h1,
body[data-page="samodzielnie"]:not(.mdl-fm-gotowe) main h1,
body[data-page="wiedza-zdania-wiezienia"]:not(.mdl-fm-gotowe) main h1{padding-bottom:calc(min(440px,100%)*.5625 + 10px)}
body[data-page="dziekuje"]:not(.mdl-fm-gotowe) main h1,
body[data-page="konfigurator"]:not(.mdl-fm-gotowe) main h1,
body[data-page="narzedzia-akordy"]:not(.mdl-fm-gotowe) main h1,
body[data-page="narzedzia-czytanie-nut"]:not(.mdl-fm-gotowe) main h1,
body[data-page="narzedzia-pianino"]:not(.mdl-fm-gotowe) main h1,
body[data-page="narzedzia-test-sluchu"]:not(.mdl-fm-gotowe) main h1,
body[data-page="narzedzia-trening-sluchu"]:not(.mdl-fm-gotowe) main h1,
body[data-page="polityka-prywatnosci"]:not(.mdl-fm-gotowe) main h1,
body[data-page="regulamin"]:not(.mdl-fm-gotowe) main h1{padding-bottom:58px}
/* strony bez paska ogłoszeń (lejek, podziękowanie, czat): sam nagłówek */
@media(min-width:1200px){body:not(.ms-head-ready)[data-page="konfigurator"],body:not(.ms-head-ready)[data-page="dziekuje"],body:not(.ms-head-ready)[data-page="czat"]{padding-top:73px}}
@media(min-width:981px) and (max-width:1199px){body:not(.ms-head-ready)[data-page="konfigurator"],body:not(.ms-head-ready)[data-page="dziekuje"],body:not(.ms-head-ready)[data-page="czat"]{padding-top:81px}body:not(.ms-head-ready)[data-page="czat"]{padding-top:139px}}
@media(max-width:980px){body:not(.ms-head-ready)[data-page="konfigurator"],body:not(.ms-head-ready)[data-page="dziekuje"],body:not(.ms-head-ready)[data-page="czat"]{padding-top:81px}}
@media(max-width:560px){body:not(.ms-head-ready)[data-page="konfigurator"],body:not(.ms-head-ready)[data-page="dziekuje"],body:not(.ms-head-ready)[data-page="czat"]{padding-top:71px}}

/* 11.10.2026 F554 (Michał: „brakuje widocznego paska przewijania stałego”): stałe, widoczne paski przewijania (10 px, bez autoukrywania) we wszystkich przewijanych kontenerach strony:
   lista „Pełna lista 25 umiejętności”, pasek lat w galerii, paski kart, spis „Na tej stronie”, narzędzia, lista utworów w konfiguratorze, okno czatu, menu na telefonie.
   ::-webkit-scrollbar (Chrome, Safari, Edge) wymusza pasek klasyczny także na macOS; Firefox dostaje scrollbar-color. */
:is(.spis-strony-wrap,
.gal-lupa-post .gal-lupa-kolumna,
#tool .pianowrap,
#kk .kk-utwory,
#kkLista,
#czat main,
main#okno,
.wg-pasek,
.sz-pasek,
.op-duze.op-dwie,
.ms-mobile.open,
.kr-pasek,
.kr-piec,
.kal-filtr,
.ka-pasek,
.widoki,
.k3-lista,
.gal-tagi,
.gal-rodzaje,
.gal-okno,
.gal-lata,
.cmp-wrap,
#ton .kbfreq,
.kbfreq,
#nut .kbwrap,
.kbwrap,
#git .fbwrap,
.fbwrap,
.pkwrap,
#ak .diagram,
#ak .card,
.allgrid){scrollbar-width:auto!important}
:is(.spis-strony-wrap,
.gal-lupa-post .gal-lupa-kolumna,
#tool .pianowrap,
#kk .kk-utwory,
#kkLista,
#czat main,
main#okno,
.wg-pasek,
.sz-pasek,
.op-duze.op-dwie,
.ms-mobile.open,
.kr-pasek,
.kr-piec,
.kal-filtr,
.ka-pasek,
.widoki,
.k3-lista,
.gal-tagi,
.gal-rodzaje,
.gal-okno,
.gal-lata,
.cmp-wrap,
#ton .kbfreq,
.kbfreq,
#nut .kbwrap,
.kbwrap,
#git .fbwrap,
.fbwrap,
.pkwrap,
#ak .diagram,
#ak .card,
.allgrid)::-webkit-scrollbar{width:10px;height:10px;display:block!important}
:is(.spis-strony-wrap,
.gal-lupa-post .gal-lupa-kolumna,
#tool .pianowrap,
#kk .kk-utwory,
#kkLista,
#czat main,
main#okno,
.wg-pasek,
.sz-pasek,
.op-duze.op-dwie,
.ms-mobile.open,
.kr-pasek,
.kr-piec,
.kal-filtr,
.ka-pasek,
.widoki,
.k3-lista,
.gal-tagi,
.gal-rodzaje,
.gal-okno,
.gal-lata,
.cmp-wrap,
#ton .kbfreq,
.kbfreq,
#nut .kbwrap,
.kbwrap,
#git .fbwrap,
.fbwrap,
.pkwrap,
#ak .diagram,
#ak .card,
.allgrid)::-webkit-scrollbar-track{background:#D9D5EC;border-radius:6px}
:is(.spis-strony-wrap,
.gal-lupa-post .gal-lupa-kolumna,
#tool .pianowrap,
#kk .kk-utwory,
#kkLista,
#czat main,
main#okno,
.wg-pasek,
.sz-pasek,
.op-duze.op-dwie,
.ms-mobile.open,
.kr-pasek,
.kr-piec,
.kal-filtr,
.ka-pasek,
.widoki,
.k3-lista,
.gal-tagi,
.gal-rodzaje,
.gal-okno,
.gal-lata,
.cmp-wrap,
#ton .kbfreq,
.kbfreq,
#nut .kbwrap,
.kbwrap,
#git .fbwrap,
.fbwrap,
.pkwrap,
#ak .diagram,
#ak .card,
.allgrid)::-webkit-scrollbar-thumb{background:#5449CC;border:2px solid #D9D5EC;border-radius:6px;min-width:36px;min-height:36px}
:is(.spis-strony-wrap,
.gal-lupa-post .gal-lupa-kolumna,
#tool .pianowrap,
#kk .kk-utwory,
#kkLista,
#czat main,
main#okno,
.wg-pasek,
.sz-pasek,
.op-duze.op-dwie,
.ms-mobile.open,
.kr-pasek,
.kr-piec,
.kal-filtr,
.ka-pasek,
.widoki,
.k3-lista,
.gal-tagi,
.gal-rodzaje,
.gal-okno,
.gal-lata,
.cmp-wrap,
#ton .kbfreq,
.kbfreq,
#nut .kbwrap,
.kbwrap,
#git .fbwrap,
.fbwrap,
.pkwrap,
#ak .diagram,
#ak .card,
.allgrid)::-webkit-scrollbar-thumb:hover{background:#3F34B0}
:is(.spis-strony-wrap,
.gal-lupa-post .gal-lupa-kolumna,
#tool .pianowrap,
#kk .kk-utwory,
#kkLista,
#czat main,
main#okno,
.wg-pasek,
.sz-pasek,
.op-duze.op-dwie,
.ms-mobile.open,
.kr-pasek,
.kr-piec,
.kal-filtr,
.ka-pasek,
.widoki,
.k3-lista,
.gal-tagi,
.gal-rodzaje,
.gal-okno,
.gal-lata,
.cmp-wrap,
#ton .kbfreq,
.kbfreq,
#nut .kbwrap,
.kbwrap,
#git .fbwrap,
.fbwrap,
.pkwrap,
#ak .diagram,
#ak .card,
.allgrid)::-webkit-scrollbar-corner{background:#D9D5EC}
@supports not selector(::-webkit-scrollbar){:is(.spis-strony-wrap,
.gal-lupa-post .gal-lupa-kolumna,
#tool .pianowrap,
#kk .kk-utwory,
#kkLista,
#czat main,
main#okno,
.wg-pasek,
.sz-pasek,
.op-duze.op-dwie,
.ms-mobile.open,
.kr-pasek,
.kr-piec,
.kal-filtr,
.ka-pasek,
.widoki,
.k3-lista,
.gal-tagi,
.gal-rodzaje,
.gal-okno,
.gal-lata,
.cmp-wrap,
#ton .kbfreq,
.kbfreq,
#nut .kbwrap,
.kbwrap,
#git .fbwrap,
.fbwrap,
.pkwrap,
#ak .diagram,
#ak .card,
.allgrid){scrollbar-width:auto!important;scrollbar-color:#5449CC #D9D5EC}}
:is(ol.k3-lista,#kkLista,#kk .kk-utwory,main#okno,#czat main,.gal-lupa-post .gal-lupa-kolumna,.ms-mobile.open){scrollbar-gutter:stable}

/* 11.10.2026 F555 (Michał: „zrób mniejszy nagłówek, żeby zmieściło się w 2 rzędach”): H1 hero STRONY GŁÓWNEJ (jedyne hero z sylwetkami para-gitara) w 2 wierszach na komputerze od 1280 px i możliwie w 3 na telefonie */
@media(min-width:1280px){.v2-hero:has(> .para-gitara) h1{font-size:min(2.9vw,40px);max-width:760px}}
@media(max-width:560px){.v2-hero:has(> .para-gitara) h1{font-size:clamp(22px,5.9vw,28px)}}

/* 11.10.2026 F579 (Michał: „tekst jest krzywo… jest niewyśrodkowany”; audyt pomiarowy 64 stron × 8 szerokości, _research/f571/srodek): */
/* 1) bloki z max-width i marginesem 0 w wyśrodkowanej kolumnie stały przy lewej krawędzi, a tekst wewnątrz był centrowany — teraz blok jest wyśrodkowany razem z tekstem */
@media(min-width:1000px){#cztery-rzeczy .lp-lewa .sec-title.lewa{max-width:none;margin-left:auto;margin-right:auto}
  #cztery-rzeczy .lp-lewa .lp-sub{max-width:620px;margin-left:auto;margin-right:auto}}
/* 2) pojedyncza karta w siatce dwukolumnowej: na środku, a nie w lewej połowie */
.grid.g2>.card:only-child{grid-column:1/-1;max-width:760px;margin-left:auto;margin-right:auto;width:100%}
/* 3) równe łamanie nagłówków i wstępów: bez wdów typu „Tobą.” w osobnym wierszu */
h1,h2,h3,.sec-title,.lp-sub{text-wrap:balance}
.sec-sub,.lead-p{text-wrap:pretty}
/* 12.10.2026 F644: nagłówki kategorii /filmoteka w przyciskach-rozwijaczach dziedziczą kolor przycisku (było: jasny tekst na jasnofioletowym i na białym po dotknięciu — kontrast ok. 2:1) */
details.fk-kat-det.mdl-zw>summary .yt-cat{color:inherit}
/* 12.10.2026 F690: numer telefonu w linku nie łamie się; adres e-mail łamie się bezpiecznie na wąskim ekranie */
a[href^="tel:"]{white-space:nowrap}
a[href^="mailto:"]{overflow-wrap:anywhere}
/* 12.10.2026 F699: równiejsze łamanie akapitów, bez pojedynczych krótkich wyrazów na końcu wiersza */
p,li,dd,figcaption{text-wrap:pretty}

/* 14.10.2026 F833 (kontrola dostępności): odnośnik w akapicie stopki jest rozpoznawalny nie tylko kolorem (WCAG 1.4.1) */
footer.ms-foot .fgrid > div > p a{text-decoration:underline;text-underline-offset:2px}

/* WCAG 2.5.8 (15.10.2026, audyt dostępności, MdL-STRONA): pola kliknięcia ≥ 24 px, a przy wezwaniu do bezpłatnego konta i pasku ogłoszeń ≥ 44 px; padding na elementach liniowych powiększa pole bez zmiany układu */
a.inl{padding-block:3px}
.pz-konto a.inl,.v2-ann a{padding-block:12px}
.ms-mega-col a,.ms-mob-list a{padding-block:3px}
footer.ms-foot .fgrupa nav a{min-height:24px}
footer.ms-foot h2.fgrupa-h a{padding-block:5px}

/* F953 (15.10.2026): przycisk „Moje konto” w menu: wyróżniony, ikona + napis, cel ≥ 44 px (komputer w rogu nagłówka, telefon w menu rozwijanym) */
.ms-konto.ms-konto-tekst{padding:8px 16px;min-width:0;gap:8px;border:1.5px solid rgba(251,250,247,.62);border-radius:999px;background:rgba(124,109,240,.26);color:#fff;font-weight:700}
.ms-konto.ms-konto-tekst:hover,.ms-konto.ms-konto-tekst:focus-visible{background:rgba(124,109,240,.5)}
.ms-konto.ms-konto-tekst:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ms-mob-konto.ms-mob-konto-tekst{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:48px;padding:10px 18px;border:1.5px solid rgba(251,250,247,.62);border-radius:999px;background:rgba(124,109,240,.26);color:#fff;font-weight:700;font-size:16px}

/* F952 audyt podstron (15.10.2026): cele dotykowe i odstępy: linki „Najpierw zapytam”, polityka prywatności przy formularzach, wybór na /szkolenia, link na /czat, suwaki i pola wyboru w narzędziach, odstęp karty planszy na /start; padding na elementach liniowych nie zmienia układu */
:where(main p a,main li a,main td a,main small a,main label a,main span a,main summary a){padding-block:3px}
.v2-cta2 a{display:inline-block;padding:12px 4px}
a[href="polityka-prywatnosci"]{padding-block:12px}
.v2-card h3 a{padding-block:12px}
#czatPowrot{display:inline-block;padding:12px 0}
.ctl input[type=range]{height:44px;margin:0}
label.chk{display:flex;align-items:center;gap:10px;min-height:44px}
label.chk input[type=checkbox]{width:22px;height:22px;flex:0 0 auto}
section#plansza{padding-top:32px!important}

/* range-44 (15.10.2026, audyt Analizy wideo): suwaki i ich etykiety z polem dotyku >= 44 px */
input[type=range]{height:44px;margin:0}
label.zoom{display:flex;align-items:center;gap:10px;min-height:44px}

/* F949 a11y (15.10.2026, audyt Analizy wideo): tekst tylko dla czytników ekranu w podglądzie; brak przejść i rozmycia przy prefers-reduced-motion */
.gal-lupa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.gal-lupa-media img{transition:none!important}.gal-lupa-media img.gal-lupa-podglad{filter:none}}

/* F967 (15.10.2026, Michał: „Usuń strzałki ze zdjęcia bo zasłania je”): na wszystkich szerokościach strzałki ▲ ▼ w podglądzie są niewidoczne (doprecyzowanie Michała 22:33: „Ze zdjęć w galerii”), ale zostają w drzewie dostępności (etykiety „Poprzednia/Następna pozycja”); przeglądanie gestem góra/dół, klawiszami i Esc. Fokus klawiaturą pokazuje je w rogu ekranu, poza zdjęciem. */
@media all{
  .gal-lupa-nav{position:absolute;top:auto;bottom:auto;right:auto;left:auto;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;pointer-events:none;transform:none}
  .gal-lupa-nav:focus-visible{position:fixed;width:44px;height:44px;margin:0;clip:auto;opacity:1;pointer-events:auto;bottom:14px;background:rgba(15,17,22,.85);z-index:5}
  .gal-lupa-w:focus-visible{left:14px}
  .gal-lupa-d:focus-visible{right:14px}
}

/* F969 (16.10.2026): podpowiedź przeglądania w podglądzie zdjęcia, w pasku nad zdjęciem (poza kadrem); bez animacji przy prefers-reduced-motion */
.gal-lupa-podp{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 210px);padding:7px 14px;border-radius:999px;background:rgba(251,250,247,.14);color:#FBFAF7;font-size:13px;line-height:1.3;text-align:left;opacity:0;transition:opacity .35s ease;pointer-events:none}
.gal-lupa-podp[hidden]{display:none}
.gal-lupa-podp.pokaz{opacity:1}
.gal-lupa-podp svg{flex:0 0 auto;animation:galPodpRuch 1.6s ease-in-out 2}
@keyframes galPodpRuch{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:640px){.gal-lupa-podp{font-size:12px;top:8px;max-width:calc(100vw - 190px);padding:6px 12px}}
@media(min-width:641px){.gal-lupa-scena{padding-top:52px}}
@media(min-width:900px){.gal-lupa-post .gal-lupa-scena{padding-top:56px}}
@media(prefers-reduced-motion:reduce){.gal-lupa-podp{transition:none}.gal-lupa-podp svg{animation:none}}

/* F971 (16.10.2026, audyt kontrastu WCAG 2.1 AA, Analiza): ciemniejsze odcienie tych samych barw, marka bez zmian.
   B: ramki pól formularzy 1px #85819a (3,2–3,8:1 na tłach stron; WCAG 1.4.11), stan :focus bez zmian; A1: „Pomóż mi wybrać →” na /utwory #5449cc (6,6:1). */
main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=color]):not([type=file]):not([type=image]):not([type=reset]):not(:focus),
main select:not(:focus),main textarea:not(:focus),.czat-ramka textarea:not(:focus),input.nick:not(:focus){border-color:#85819a!important}
#ut .ut-pasek a.btn.btn-outline{color:#5449cc;border-color:#5449cc}

/* F972: wyjątki, w których pierścień był przycinany albo zerowany: okładki wideo (overflow:hidden rodzica) – pierścień wewnątrz; lista Umiejętności (all:unset); komórki gryfu (SVG); schowany launcher czatu bez fokusu */
.yt-ph:focus-visible{outline:none;box-shadow:none}
.yt-ph:focus-visible::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px #131628,inset 0 0 0 8px #fff}   /* pierścień jako warstwa nad miniaturą (obraz przykrywał outline i cień przycisku) */
.kl-dost button:focus-visible{outline:3px solid #131628;outline-offset:3px;box-shadow:0 0 0 2px #fff;border-radius:4px}
#git #fb .cell:focus-visible{stroke:#131628!important;stroke-width:3!important}
.mdl-launcher.mdl-launcher-schowany{visibility:hidden;transition:transform .25s,opacity .25s,visibility 0s .25s}
#tresc:focus,#tresc:focus-visible,.gal-info:focus,.gal-info:focus-visible{outline:none;box-shadow:none}   /* kontenery fokusowane programowo: bez pierścienia */

/* F973 (16.10.2026, audyt reflow Analizy): nagłówki sekcji łamią długie słowa zamiast poszerzać stronę przy 320 px i powiększeniu tekstu; na telefonie nieco mniejszy rozmiar (komputer bez zmian) */
.sec-title{overflow-wrap:anywhere}
@media(max-width:480px){.sec-title{font-size:clamp(22px,6.6vw,25px)}}

/* F973 (16.10.2026, audyt sierot Analizy): ładniejsze łamanie wierszy bez zmiany treści: akapity i listy unikają samotnego słowa w ostatnim wierszu, nagłówki wyrównują długość wierszy */
p,li,blockquote,figcaption,td,summary,dd{text-wrap:pretty}
h1,h2,h3,h4,.sec-sub,.sec-title{text-wrap:balance}

/* F977 (17.10.2026): zabezpieczenie przed poziomym przewijaniem przy długich ciągach (adres e-mail, wyrazy związane twardą spacją): łamanie tylko gdy tekst nie mieści się w wierszu */
p,li,blockquote,figcaption,dd{overflow-wrap:break-word}
summary{overflow-wrap:anywhere}

/* F978 (17.10.2026): nagłówek ≥1120 px — przy odstępach tekstu WCAG 1.4.12 menu zawija się do drugiego wiersza zamiast przycinać przycisk; bez zmian przy zwykłych odstępach */
@media(min-width:1120px){header.ms-head{grid-template-columns:auto minmax(0,1fr) auto}header.ms-head .ms-chips{flex-wrap:wrap}header.ms-head .ms-corner{flex-wrap:wrap}}

/* F969 (17.10.2026, polecenie Michała „w galerii zrób scrollowanie po 1 zdjęciu na szerokość ekranu mobile”):
   tryb „1” w przełączniku 1/3/5/7 (domyślny na telefonie). Zdjęcie na całą szerokość ekranu, przewijanie pionowe
   ze skokiem co jedno zdjęcie (scroll-snap strony, nie osobny kontener, więc bez pułapki przewijania). */
@media(max-width:640px){
  .gal-siatka.gal-ios[data-kol="1"]{--kol:1;gap:10px}
  .gal-ios[data-kol="1"] .gal-ramka{padding-top:calc(100% / var(--r1,1))}
  .gal-ios[data-kol="1"] .gal-ramka img{object-fit:contain}
  .gal-ios[data-kol="1"] .gal-el{scroll-snap-align:start}
  .gal-ios[data-kol="1"] .mdl-kafel-play{width:56px;height:56px}
  .gal-ios[data-kol="1"] .mdl-kafel-czas{right:10px;bottom:10px;font-size:13px;padding:2px 8px}
}
@media(max-width:640px) and (prefers-reduced-motion:no-preference){
  html.gal-snap{scroll-snap-type:y proximity;scroll-padding-top:calc(var(--ms-head-h,72px) + 8px)}
}