/* ScolaFlow: tokeny, pisma, przyciski, pasek, ramki urządzeń i stopka. Wspólne dla strony głównej i podstron. Jedyne źródło kolorów: :root niżej. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:400 800;src:url("/a/fonty-plus-jakarta-sans-latin-ext-wght-normal.38e3b8fd80.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:400 800;src:url("/a/fonty-plus-jakarta-sans-latin-wght-normal.153fc85b70.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 04.11 (makieta Adama): fiolet jako kolor główny, granatowa noc pod pasek, pierwszy ekran, pas danych i stopkę,
   jasne chłodne tła z odrobiną fioletu. Znak: fioletowe koło z białym zegarem (uklad.mjs).
   Czerwień tylko w etykietach problemów na głównej i w alarmach. Papier tylko pod karty. */
:root{
  --noc:#0E0B26;--noc-2:#16123A;
  --tab:#15122E;--tab2:#2B2650;--tab3:#6A3DF0;
  --fio:#6A3DF0;--fio-h:#5A2BE0;--fio-j:#F0EBFF;--fio-t:#5229D6;
  --law:#F4F1FF;
  --kreda:#F8F8FC;--kreda-2:#F2F1F9;--pap:#fff;
  --lin:#E8E6F2;--lin2:#D3CFE6;
  --t2:#4A4766;--t3:#5E5B7A;
  --zak:#B9A6FF;--zak-h:#D2C6FF;--zak2:#EFEAFF;
  --cz:#C21F35;--cz-j:#FDECEE;
  --na-noc:#FFFFFF;--na-noc-2:#CFCBE6;--na-noc-3:#A9A4C8;
  --lin-c:rgba(255,255,255,.12);
  --suw:#8E89AA;
  --blad:#B3261E;--ok:#1F6B45;
  --cien-m:0 1px 2px rgba(21,18,46,.05),0 10px 28px -14px rgba(21,18,46,.16);
  --cien:0 1px 2px rgba(21,18,46,.08),0 28px 64px -28px rgba(21,18,46,.36);
  --r-s:8px;--r-m:10px;--r-l:18px;--r-xl:26px;
  --wyd:cubic-bezier(.2,.8,.2,1);
  --g:clamp(48px,6.4vw,104px);
  --bok:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kreda);color:var(--tab);font:400 17px/1.55 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;font-weight:800;letter-spacing:-.03em;line-height:1.08}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nw{white-space:nowrap}
.ik{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--fio);outline-offset:2px;border-radius:6px}
.nag :focus-visible,.h :focus-visible,.bz :focus-visible,.pod:not(.dok) :focus-visible,.sto :focus-visible,.ciemna :focus-visible,.cen-b :focus-visible,.film :focus-visible{outline-color:var(--zak)}
.skok{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fio);color:#fff;padding:10px 16px;border-radius:var(--r-s)}
.skok:focus{top:12px}

/* przyciski: fiolet z białą strzałką; .dr obrys; .jas wariant na ciemnym tle */
.prz{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--r-m);border:2px solid var(--fio);background:var(--fio);color:#fff;font-weight:700;font-size:16px;letter-spacing:-.005em;line-height:1.15;text-decoration:none;text-align:center;box-shadow:0 10px 24px -12px rgba(106,61,240,.7);transition:background .2s,color .2s,border-color .2s,transform .2s var(--wyd),box-shadow .2s}
.prz:hover{background:var(--fio-h);border-color:var(--fio-h)}
.prz:active{transform:scale(.98)}
.prz i{position:relative;flex:none;width:16px;height:16px;transition:transform .25s var(--wyd)}
.prz i::before{content:'';position:absolute;left:1px;right:2px;top:7px;height:2px;border-radius:2px;background:currentColor}
.prz i::after{content:'';position:absolute;right:2px;top:3.5px;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);border-radius:1px}
.prz:hover i{transform:translateX(3px)}
.prz .ik{width:18px;height:18px}
.ik.gr{fill:currentColor;stroke:none}
.prz .gr{width:16px;height:16px}
.prz.dr{background:transparent;color:var(--fio-t);border-color:var(--fio);box-shadow:none}
.prz.dr:hover{background:var(--fio-j);color:var(--fio-h);border-color:var(--fio-h)}
.prz.ciem{background:transparent;color:var(--tab);border-color:var(--tab);box-shadow:none}
.prz.ciem:hover{background:var(--tab);color:#fff}
.prz.jas{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);box-shadow:none}
.prz.jas:hover{background:#fff;color:var(--tab);border-color:#fff}
.prz-m{min-height:44px;padding:0 16px;font-size:15px;border-radius:var(--r-s);white-space:nowrap;box-shadow:none}
.akcje{display:flex;flex-wrap:wrap;gap:12px}

/* pasek: granatowy na wszystkich stronach jak w makiecie, kreska pod nim po przewinięciu */
.nag{position:sticky;top:0;z-index:60;background:var(--noc);color:#fff;border-bottom:1px solid transparent;transition:border-color .25s}
.nag.pod-s{border-bottom-color:var(--lin-c)}
.nag-w{max-width:1440px;margin:0 auto;padding:0 var(--bok);height:72px;display:flex;align-items:center;gap:14px}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.03em;color:inherit;min-height:44px}
.logo svg{width:32px;height:32px}

.nag nav{margin-left:auto;display:flex;gap:2px}
.nag nav a{padding:10px 12px;text-decoration:none;font-weight:600;font-size:15px;color:var(--na-noc-2);border-radius:8px;white-space:nowrap;transition:color .2s,background .2s}
.nag nav a:hover,.nag nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.08)}
.nag-log{margin-left:18px;padding:10px 8px;font-weight:600;font-size:15px;text-decoration:none;color:#fff;white-space:nowrap}
.nag-log:hover{text-decoration:underline;text-underline-offset:4px}
.nag-cena{display:none;margin-left:auto;padding:10px 8px;font-weight:700;font-size:15px;text-decoration:none;color:#fff}
.burger{display:none;position:relative;flex:none;width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.1)}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:#fff;border-radius:2px}
.burger span:first-child{top:17px}
.burger span:last-child{top:25px}
#menu-tel{inset:auto 12px auto auto;top:calc(env(safe-area-inset-top,0px) + 66px);margin:0;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow:auto;border:1px solid var(--lin);border-radius:16px;background:#fff;color:var(--tab);padding:8px;box-shadow:var(--cien);min-width:236px}
#menu-tel::backdrop{background:rgba(14,11,38,.5)}
@supports not selector(:popover-open){#menu-tel{display:none}#menu-tel.otw{display:block;position:fixed;z-index:70}}
#menu-tel nav{display:grid}
#menu-tel a{padding:12px 14px;border-radius:10px;text-decoration:none;font-weight:600}
#menu-tel a:hover{background:var(--fio-j)}
#menu-tel a.prz{margin-top:6px;color:#fff}
#menu-tel a.prz:hover{background:var(--fio-h)}

/* telefon: prawdziwy ekran w ramce iPhone'a (czesci.mjs, iphone()). Wymiary w cqw, czyli w procentach szerokości telefonu,
   z proporcji iPhone'a 15: ekran 393 × 852 pt, róg ekranu 55 pt, pasek na dole 134 × 5 pt; wyspa i pasek stanu są w SVG.
   Rodzic ramki musi mieć container-type:inline-size. Kolory obudowy to nie kolory marki. */
.ip{position:relative;padding:1cqw;border-radius:16.8cqw;background:linear-gradient(145deg,#80868a,#2c3033 15%,#1a1c1e 48%,#303437 82%,#6f7579);box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.14)}
/* przyciski: z lewej przycisk czynności i głośność, z prawej boczny */
.ip::before,.ip::after{content:'';position:absolute;width:1cqw;border-radius:.6cqw;z-index:-1}
.ip::before{left:-.7cqw;top:36cqw;height:57cqw;background:linear-gradient(#4a4f53 0 15.8%,transparent 0 35%,#4a4f53 0 63%,transparent 0 72%,#4a4f53 0)}
.ip::after{right:-.7cqw;top:62cqw;height:27cqw;background:#4a4f53}
.ip-r{padding:2.8cqw;border-radius:15.8cqw;background:#050607}
.ip-e{position:relative;aspect-ratio:393/852;border-radius:13cqw;overflow:hidden;background:#ECE9F6;isolation:isolate}
.ip-e img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ip-p{position:absolute;left:0;top:0;width:100%;height:auto}
.ip-p text{font:600 17px/1 -apple-system,'SF Pro Text','Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.2px;fill:#000}
.ip-e::after{content:'';position:absolute;left:50%;bottom:1.9cqw;width:31.5cqw;height:1.2cqw;margin-left:-15.75cqw;border-radius:99px;background:#111}
.ip-c .ip-e::after{background:rgba(255,255,255,.92)}

/* laptop: prawdziwy ekran panelu (1280 × 800, 16:10) w ramce; wymiary w cqw szerokości laptopa, rodzic ma container-type:inline-size.
   Kolory ramki i podstawy to nie kolory marki. */
.lap-e{position:relative;padding:1.6cqw 1.6cqw 2.2cqw;border-radius:2.6cqw 2.6cqw 0 0;background:#141418;box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.14)}
.lap-e::before{content:'';position:absolute;left:50%;top:.55cqw;width:.6cqw;height:.6cqw;margin-left:-.3cqw;border-radius:50%;background:#2c2c34}
.lap-e img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:0 0;border-radius:.5cqw}
.lap-b{position:relative;height:2.6cqw;margin:0 -7%;border-radius:0 0 3cqw 3cqw;background:linear-gradient(180deg,#e8e7ee 0%,#c9c8d3 45%,#9d9cab 100%)}
.lap-b::before{content:'';position:absolute;left:50%;top:0;width:15%;height:1cqw;margin-left:-7.5%;border-radius:0 0 1.2cqw 1.2cqw;background:#b4b3c0}

/* stopka */
.sto{background:var(--noc);color:var(--na-noc-2);border-top:1px solid var(--lin-c);padding:clamp(40px,5vw,64px) 0 40px;font-size:16px}
.sto-g{max-width:1440px;margin:0 auto;padding:0 var(--bok);display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:32px}
.sto .logo{color:#fff}
.sto-m p{margin-top:10px;max-width:24em}
.sto-m a{color:var(--zak)}
.sto h2{font-size:16px;font-weight:700;letter-spacing:0;line-height:1.3;color:#fff;margin-bottom:6px}
.sto nav a{display:flex;align-items:center;min-height:36px;text-decoration:none}
.sto nav a:hover{color:var(--zak)}
.sto-d{max-width:1440px;margin:28px auto 0;padding:0 var(--bok);font-size:15px;color:var(--na-noc-3)}
.sto-d p{border-top:1px solid var(--lin-c);padding-top:24px}
.sto-d a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sto-d a:hover{color:var(--zak)}

@media (max-width:1240px){
  :root{--bok:28px}
  .nag nav,.nag-log{display:none}
  .nag-cena{display:block}
  .burger{display:block}
  .prz-m{margin-left:0}
}
@media (max-width:860px){
  .sto-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sto-m{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--bok:16px;--g:52px}
  body{font-size:16px}
  html{scroll-padding-top:72px}
  .nag-w{height:60px;gap:6px}
  .logo{font-size:19px}
  .logo svg{width:30px;height:30px}
  .prz-m{display:none}
  .prz{min-height:52px}
  .sto{font-size:15px}
}
@media (max-width:350px){
  .logo{font-size:17px;gap:6px}
  .logo svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* Podstrony. Baza: css/baza.css (jedyne źródło kolorów). Niżej tylko stare nazwy wskazujące tokeny bazy. */
:root{
  --tablica:var(--tab);--tablica-2:var(--tab2);--tablica-3:var(--tab3);
  --papier:var(--pap);--mgla:var(--kreda-2);--mgla-2:var(--lin);
  --zakreslacz:var(--zak);--zakreslacz-2:var(--zak-h);
  --tekst:var(--tab);--tekst-2:var(--t2);--linia:var(--lin);
  --f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px;--s9:144px;
  --r1:10px;--r2:16px;--r3:24px;--r4:36px;
  --szer:1240px;--margines:clamp(16px,4vw,48px);
  --ramka:calc(env(safe-area-inset-top,0px) + 76px);
}
h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.04em;line-height:1}
h2{font-size:clamp(2rem,4.2vw,3.25rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.18;letter-spacing:-.02em}
.w{width:min(100%,calc(var(--szer) + 2*var(--margines)));margin-inline:auto;padding-inline:var(--margines)}
.sek{padding-block:clamp(64px,9vw,128px)}
.lead{font-size:clamp(1.125rem,1.6vw,1.3rem);line-height:1.5;color:var(--tekst-2);max-width:34em}
.tekst{max-width:33em}
.tekst>*+*{margin-top:var(--s3)}
.mala{font-size:.9375rem;color:var(--tekst-2)}

/* pierwszy ekran */
.hero{padding-block:clamp(24px,4vw,56px) 0;position:relative;overflow:hidden;overflow:clip}
.hero-w{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.h-tytul{display:block}
.h-co{display:block;font-size:.5em;line-height:1.14;letter-spacing:-.028em;font-weight:600;margin-top:.38em;max-width:24em;color:var(--tablica-2)}
.hero .lead{margin-top:var(--s4)}
.hero .akcje{margin-top:var(--s4)}
.h-uwaga{margin-top:var(--s3);font-size:.9375rem;color:var(--tekst-2)}

/* 04.11: belki L zniknęły razem ze starym znakiem, okno stoi samo */
.scena{position:relative;margin-top:var(--s2)}
.h-gora{position:relative;z-index:1}

/* okno produktu: odtworzony ekran „Dziś”, działa bez konta */
.okno{position:relative;background:var(--papier);border-radius:var(--r3);box-shadow:var(--cien);border:1px solid var(--linia);overflow:hidden}
.ok-pas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border-bottom:1px solid var(--linia);background:var(--kreda)}
.ok-et{font-weight:650;font-size:.9375rem}
.typy{display:flex;flex-wrap:wrap;gap:6px}
.typy button{min-height:40px;padding:6px 13px;border-radius:999px;border:1px solid var(--linia);background:var(--papier);font-weight:600;font-size:.9375rem;transition:background-color .15s,color .15s}
.typy button:hover{border-color:var(--tablica-3)}
.typy button[aria-pressed=true]{background:var(--tablica);border-color:var(--tablica);color:#fff}
.ok-tr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.ok-g{padding:clamp(16px,2.4vw,28px);min-width:0}
.ok-g+.ok-g{border-left:1px solid var(--linia);background:var(--pap)}
.ok-t{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em;font-weight:700;line-height:1.1}
.ok-s{color:var(--tekst-2);font-size:.9375rem;margin:6px 0 var(--s3)}
.spr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:13px 0;border-top:1px solid var(--linia)}
.spr b{display:block;font-weight:650;line-height:1.25}
.spr span{display:block;font-size:.9375rem;line-height:1.35;color:var(--tekst-2);margin-top:2px}
.spr button{min-height:44px;padding:8px 14px;border:0;border-radius:12px;background:var(--tablica);color:#fff;font-weight:650;font-size:.9375rem;white-space:nowrap}
.spr button:hover{background:var(--tablica-2)}
.spr.gotowe{grid-template-columns:minmax(0,1fr)}
.spr.gotowe button{display:none}
.spr.gotowe b{color:var(--ok)}
.komplet{margin-top:var(--s2);padding:14px;border-radius:var(--r2);background:var(--zak2);font-weight:650;color:var(--tablica)}
.ok-pod{font-weight:650;margin-bottom:6px}
.pl{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:0 12px;padding:11px 0;border-top:1px solid var(--linia)}
.pl time{font-weight:700;font-variant-numeric:tabular-nums}
.pl b{display:block;font-weight:600;line-height:1.25}
.pl span{display:block;font-size:.9375rem;line-height:1.35;color:var(--tekst-2)}
.ok-pdp{padding:10px 16px;border-top:1px solid var(--linia);font-size:.875rem;color:var(--tekst-2);background:var(--kreda)}

/* wiersze: sytuacja i co ją rozwiązuje */
.syt{margin-top:var(--s6);border-top:2px solid var(--tablica)}
.syt li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s2) var(--s6);padding:18px 0;border-bottom:1px solid var(--linia)}
.syt b{font-weight:650;font-size:1.125rem;line-height:1.3}
.syt span{color:var(--tekst-2)}

/* sekcje funkcji: tekst obok dużego widoku */
.fn{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4vw,56px);align-items:center}
.fn.odwr{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fn.szer{grid-template-columns:minmax(0,1fr)}
.fn.szer .fn-t{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,56px);align-items:start}
.fn.szer .fn-t p:first-child{margin-top:0}
.fn.odwr .fn-t{order:2}
.fn+.fn{margin-top:clamp(64px,8vw,112px)}
.fn-t h3{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em;line-height:1.08}
.fn-t p{margin-top:var(--s3);max-width:30em;color:var(--tekst-2)}
.fn-l{margin-top:var(--s3);display:grid;gap:10px}
.fn-l li{position:relative;padding-left:26px}
.fn-l li:before{content:"";position:absolute;left:3px;top:.42em;width:9px;height:13px;border-left:3px solid var(--tablica-3);border-bottom:3px solid var(--tablica-3);border-radius:0 0 0 2px}
.zrz{width:100%;border-radius:var(--r3);background:var(--papier);border:1px solid var(--linia);box-shadow:var(--cien)}
/* ekran telefonu przy grupie funkcji: ramka .ip z baza.css, figura jest kontenerem dla cqw */
.fn.fn-ip.odwr{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.fn-tel{container-type:inline-size;justify-self:center;width:min(100%,300px)}
.fn-tel .ip{box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.14),var(--cien)}
.fn-tel figcaption{margin-top:14px;text-align:center}
figure{margin:0}
figcaption{margin-top:10px;font-size:.875rem;color:var(--tekst-2)}
.tel{border-radius:36px;border:8px solid var(--tablica);box-shadow:var(--cien);overflow:hidden;background:var(--papier)}
.tele{display:flex;gap:var(--s4);justify-content:flex-start;align-items:flex-start}
.tele img{flex:1 1 0;min-width:0;max-width:300px}
.tele img:nth-child(2){margin-top:var(--s6)}

/* trzy kroki */
.kroki{margin-top:var(--s6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);counter-reset:k}
.kroki li{counter-increment:k;border-top:2px solid var(--tablica);padding-top:var(--s3)}
.kroki li:before{content:counter(k);display:block;font-size:2.5rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--tablica-3);margin-bottom:var(--s3);font-variant-numeric:tabular-nums}
.kroki h3{margin-bottom:var(--s2)}
.kroki p{color:var(--tekst-2)}

/* typy szkół */
.dla{margin-top:var(--s6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s5);border-top:2px solid var(--tablica)}
.dla a{display:block;position:relative;padding:20px 28px 20px 0;border-bottom:1px solid var(--linia);text-decoration:none}
.dla a:after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-5px;border-right:2.5px solid var(--tablica);border-top:2.5px solid var(--tablica);transform:rotate(45deg);transition:right .15s}
.dla a:hover b{text-decoration:underline}
.dla a:hover:after{right:2px}
.dla.cztery{grid-template-columns:repeat(2,minmax(0,1fr))}
/* /dla-kogo/: typy szkół jako białe karty jak na głównej (bez zdjęć: dla szkół językowych zdjęcia nie ma) */
.dla.cztery{border-top:0;gap:16px}
.dla.cztery a{background:var(--pap);border:1px solid var(--lin);border-radius:var(--r-l);box-shadow:var(--cien-m);padding:26px 64px 26px 28px}
.dla.cztery a:after{right:30px}
.dla.cztery a:hover:after{right:26px}
.dla.cztery b{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:800;letter-spacing:-.025em}
.dwa.dla-k{gap:16px;margin-top:16px}
.dla-k>section{background:var(--pap);border:1px solid var(--lin);border-radius:var(--r-l);box-shadow:var(--cien-m);padding:26px 28px}
.dla b{display:block;font-size:1.2rem;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.dla span{display:block;margin-top:4px;font-size:.9375rem;color:var(--tekst-2);line-height:1.4}

/* ciemny blok */
.ciemna{background:var(--noc);color:#fff}
.ciemna .lead,.ciemna .mala,.ciemna .fak p{color:var(--na-noc-2)}
.fak{margin-top:var(--s6);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6)}
.fak h3{margin-bottom:var(--s2)}
.fak p{max-width:30em}
.ciemna h3{color:#fff}
.ciemna a:not(.prz){color:var(--zakreslacz)}

.h3-duze{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em;line-height:1.08}
.pod-link{margin-top:var(--s5)}

/* osoba */
.os{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:start}
.os-f{aspect-ratio:4/5;border-radius:var(--r3);background:var(--tablica);position:relative;overflow:hidden}
.os-f img{width:100%;height:100%;object-fit:cover}
.os-l{position:absolute;left:calc(50% - 27px);top:calc(50% + 37px);width:0;height:0}
.os-l:before,.os-l:after{content:"";position:absolute;background:var(--zakreslacz);border-radius:999px}
.os-l:before{left:-11px;bottom:-11px;width:22px;height:96px}
.os-l:after{left:-11px;bottom:-11px;height:22px;width:76px}
.podpis{margin-top:var(--s4);font-weight:650}

/* tabela stanu */
.st{width:100%;border-collapse:collapse;margin-top:var(--s5)}
.st th{text-align:left;font-weight:650;padding:0 var(--s3) var(--s2) 0;border-bottom:2px solid var(--tablica);font-size:.9375rem}
.st td{padding:14px var(--s3) 14px 0;border-bottom:1px solid var(--linia);vertical-align:top;line-height:1.4}
.st td:first-child{font-weight:600;width:32%}
.st-w{overflow-x:auto}

/* cennik */
.cen{margin-top:var(--s6);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--papier);border:1px solid var(--linia);border-radius:var(--r3);box-shadow:var(--cien);overflow:hidden}
.cen-a{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.cen-b{padding:clamp(24px,4vw,48px);background:var(--tablica);color:#fff;display:flex;flex-direction:column;justify-content:center;gap:var(--s3)}
.cen-b .mala{color:var(--na-noc-2)}
.sw-et{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;font-weight:650;margin-bottom:var(--s3)}
.sw-et output{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
h2+.lead{margin-top:var(--s3)}
.waska{max-width:720px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0}
/* tor suwaka: --suw ma 3,5:1 do bieli, więc suwak stoi zawsze na białej karcie */
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--fio) var(--p,30%),var(--suw) var(--p,30%))}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:var(--suw)}
input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:var(--fio)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;border:6px solid var(--fio);box-shadow:var(--cien-m)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:6px solid var(--fio);box-shadow:var(--cien-m)}
.c-kwota{display:flex;align-items:baseline;gap:8px;font-weight:700;letter-spacing:-.04em;line-height:1}
.c-kwota b{font-size:clamp(3rem,6vw,4.5rem);font-weight:700;font-variant-numeric:tabular-nums}
.c-kwota span{font-size:1.125rem;letter-spacing:-.01em;font-weight:600}

/* pytania */
.fq{margin-top:var(--s5);border-top:2px solid var(--tablica)}
.fq details{border-bottom:1px solid var(--linia)}
.fq summary{list-style:none;display:flex;justify-content:space-between;gap:var(--s3);align-items:center;padding:18px 0;font-weight:650;font-size:1.125rem;line-height:1.3;cursor:pointer}
.fq summary::-webkit-details-marker{display:none}
.fq summary:after{content:"";flex:none;width:12px;height:12px;border-right:2.5px solid var(--tablica);border-bottom:2.5px solid var(--tablica);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.fq details[open] summary:after{transform:rotate(225deg) translate(-2px,-2px)}
.fq p{padding:0 0 20px;max-width:36em;color:var(--tekst-2)}
.fq a{color:var(--tablica)}

/* koniec strony */
.koniec{text-align:left}
.koniec h2{font-size:clamp(2rem,4.2vw,3.25rem)}
.koniec .lead{margin-top:var(--s3)}
.koniec .akcje{margin-top:var(--s5)}

/* podstrony */
/* nagłówek podstron: granat z fioletową poświatą jak góra głównej (makieta 04.11) */
.pod{position:relative;overflow:hidden;background:radial-gradient(760px 460px at 82% 0%,rgba(106,61,240,.36) 0%,rgba(106,61,240,0) 70%),var(--noc);color:#fff;padding-block:clamp(44px,6.4vw,96px) clamp(48px,6.4vw,100px)}
.pod h1{max-width:13em}
.pod .lead{margin-top:var(--s3);color:var(--na-noc-2)}
.pod .lead a{color:var(--zak)}
.pod:not(.dok) .prz.dr{color:#fff;border-color:rgba(255,255,255,.6)}
.pod:not(.dok) .prz.dr:hover{background:#fff;color:var(--tab);border-color:#fff}
.pod .akcje{margin-top:var(--s4)}
.pod .w{position:relative;z-index:1}
.pod.dok{background:var(--kreda);color:var(--tab);padding-block:clamp(32px,5vw,64px) clamp(16px,2vw,24px)}
.pod.dok .lead{color:var(--t2)}
.sc{max-width:44em}
.sc-sz{display:block}
section.bez-g.sek{padding-top:clamp(40px,5vw,72px)}
.hero.bez-p{padding-block:clamp(32px,4vw,56px) 0}
/* co druga jasna sekcja: kreda 2, bo papier jest tylko pod karty (MARKA.md) */
.jasna{background:var(--kreda-2)}
.dwa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.dwa .h3{margin-bottom:var(--s2)}
.dwa p{color:var(--tekst-2)}
.dwa-s{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--s6);align-items:start}
.trzy{margin-top:var(--s4);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.trzy section{border-top:2px solid var(--tablica);padding-top:var(--s3)}
.grupy{margin-top:clamp(56px,8vw,96px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) clamp(32px,6vw,88px)}
.grupy h2{font-size:clamp(1.3rem,2vw,1.6rem);padding-top:var(--s3);border-top:2px solid var(--tablica)}
.odst{margin-top:clamp(48px,7vw,88px)}
.du{margin-top:var(--s4)}
.h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.18;letter-spacing:-.02em}
.jasne{margin-top:0}
.jasne h2{margin-bottom:var(--s2)}
.jasne p{color:var(--tekst-2)}
.ramka-l{align-self:start;border-left:var(--s2) solid var(--tablica);border-bottom:var(--s2) solid var(--tablica);border-radius:0 0 0 var(--r3);padding:0 0 var(--s4) var(--s4)}
.ramka-l>p{margin-top:var(--s3);color:var(--tekst-2)}
/* ramka obok tabeli: nagłówek mniejszy niż h2 sekcji, góra ramki na wysokości tabeli (ta ma margin-top s5) */
.ramka-l h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.dwa>.ramka-l{margin-top:var(--s5)}
.cyt{margin:var(--s3) 0 0;padding:var(--s4);border-radius:var(--r2);background:var(--papier);border:1px solid var(--linia);max-width:40em}
.spis{position:sticky;top:calc(var(--ramka) + 16px)}
.spis a{display:block;padding:6px 0;text-decoration:none;color:var(--tekst-2);font-size:.9375rem;line-height:1.35}
.spis a:hover{color:var(--tekst);text-decoration:underline}
.st caption{text-align:left;padding-bottom:var(--s2)}
.sc h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:var(--s6) 0 var(--s2);scroll-margin-top:calc(var(--ramka) + 16px)}
.sc h2:first-child,.dok-uwaga+h2{margin-top:0}
.sc h3{font-size:1.2rem;margin:var(--s4) 0 var(--s1)}
.sc p,.sc ul,.sc ol{margin-top:var(--s2)}
.sc ul{list-style:disc;padding-left:1.25em}
.sc ul.fn-l{list-style:none;padding-left:0}
.sc ol{list-style:decimal;padding-left:1.4em}
.sc li{margin-top:6px}
.dok-uwaga{padding:var(--s3);border-radius:var(--r2);background:var(--zak2);color:var(--tablica);font-weight:550;margin-bottom:var(--s4)}
.zmiany li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--s3);padding:14px 0;border-bottom:1px solid var(--linia)}
.zmiany time{font-weight:650;font-variant-numeric:tabular-nums}

/* bezpieczeństwo: pas „W skrócie” i spis tematów zwinięty na telefonie */
.skr-s{padding-top:clamp(40px,5vw,72px)}
.skr{margin-top:var(--s3);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.skr div{background:var(--pap);border:1px solid var(--lin);border-radius:var(--r-l);box-shadow:var(--cien-m);padding:clamp(18px,2vw,26px)}
.skr dt{font-size:15px;font-weight:600;color:var(--t2)}
.skr dd{margin:6px 0 0;font-size:clamp(22px,1.9vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--tab)}
.spis-k{align-self:stretch}
.spis-t{display:none}
.spis-t summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:52px;font-weight:700;cursor:pointer}
.spis-t summary::-webkit-details-marker{display:none}
.spis-t summary::after{content:"";flex:none;width:11px;height:11px;border-right:2.5px solid var(--tab);border-bottom:2.5px solid var(--tab);transform:rotate(45deg) translate(-2px,-2px)}
.spis-t[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.spis-t ul{padding-bottom:var(--s2)}
.spis-t a{display:block;padding:9px 0;border-top:1px solid var(--lin);text-decoration:none;color:var(--t2);font-size:.9375rem;line-height:1.35}

/* o ScolaFlow: zasady w siatce z małym L */
.sc ul.zas{list-style:none;padding-left:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.sc ul.zas li{margin-top:0}

@media (min-width:1000px){
  .hero-w{grid-template-columns:minmax(0,1fr)}
  .h-gora{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:end}
  .h-gora .h-pr{padding-bottom:6px}
  .hero .lead{margin-top:0}
}
@media (max-width:900px){
  .ok-tr{grid-template-columns:minmax(0,1fr)}
  .ok-g+.ok-g{border-left:0;border-top:1px solid var(--linia)}
  .fn,.fn.odwr,.fn.fn-ip.odwr{grid-template-columns:minmax(0,1fr)}
  .fn.odwr .fn-t{order:0}
  .kroki,.dla,.dla.cztery,.dwa,.dwa-s,.trzy,.grupy{grid-template-columns:minmax(0,1fr)}
  .fn.szer .fn-t{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .spis{position:static}
  .syt li{grid-template-columns:minmax(0,1fr)}
  .fak{grid-template-columns:minmax(0,1fr)}
  .os{grid-template-columns:minmax(0,1fr)}
  .os-f{aspect-ratio:auto;max-width:240px;min-height:200px}
  .cen{grid-template-columns:minmax(0,1fr)}
  .pod::before,.pod::after{display:none}
  .skr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spis-k .spis{display:none}
  .spis-t{display:block;background:var(--pap);border:1px solid var(--lin);border-radius:var(--r-l);padding:0 18px}
}
@media (max-width:640px){
  .skr{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .skr div{padding:14px 14px 16px}
  .skr dt{font-size:14px;line-height:1.3}
  .skr dd{font-size:18px}
  .fn-tel{width:min(100%,260px)}
  .sc ul.zas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  body{font-size:1rem}
  .ok-pas{display:block}
  .ok-et{display:block;margin-bottom:8px}
  .akcje .prz{width:100%}
  .spr button{background:var(--mgla);color:var(--tablica);font-size:.875rem;padding:8px 10px;white-space:normal;max-width:112px}
  .spr button:hover{background:var(--mgla-2)}
  .tele{gap:var(--s3)}
  .tele img:nth-child(2){margin-top:var(--s5)}
  .tel{border-width:5px;border-radius:26px}
  .zmiany li{grid-template-columns:minmax(0,1fr);gap:2px}
}

.ciemna .prz{box-shadow:none}
.ciemna .prz.dr{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.ciemna .prz.dr:hover{background:#fff;color:var(--tab);border-color:#fff}
.sek.bez-g+.ciemna{margin-top:0}