/* Inskryptor - strona produktu „Cicha precyzja” (wspólne dla index.html i ai.html) */
:root{
  --plotno:#FBFBF9; --kamien:#F0EFEB; --grafit:#15171A; --popiel:#5F646C;
  --linia:#E2E1DC; --linia-ciemna:#D3D2CC; --zielen:#1F4D3D; --zielen-jasna:#E5EEE9;
  --bursztyn:#9A5B0B; --bursztyn-tlo:#F7EEDD; --panel:#FFFFFF;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pad:clamp(16px, 4.4vw, 80px);
  --sek:clamp(88px, 11.1vw, 160px);
  --cien:0 24px 60px rgba(21,23,26,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--plotno);color:var(--grafit);font-family:var(--sans);font-size:17px;line-height:1.55;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
p{text-wrap:pretty}
.wrap{width:100%;max-width:calc(1280px + 2 * var(--pad));margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.siatka{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:24px}
.num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.mono{font-family:var(--mono);letter-spacing:0}

h1,h2{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;text-wrap:balance}
h1{font-size:clamp(48px, 8vw, 116px);line-height:1;letter-spacing:-.025em}
h2{font-size:clamp(36px, 4.45vw, 64px);line-height:1.04;letter-spacing:-.02em}
.kropka{color:var(--zielen)}
.lead{font-size:clamp(18px, 1.55vw, 22px);line-height:1.5;color:var(--popiel)}
.tekst{color:var(--popiel)}
.tekst + .tekst{margin-top:16px}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:999px;
     font:500 17px/1 var(--sans);text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.btn-glowny{background:var(--grafit);color:#fff}
.btn-glowny:hover{background:#2B2E34}
.btn:focus-visible{outline:2px solid var(--zielen);outline-offset:3px}

/* ---------- znak ---------- */
.znak{display:inline-flex;align-items:center;flex:none;text-decoration:none;padding:4px 0}
.znak img{height:28px;width:auto}

/* ---------- 1. pierwszy ekran ---------- */
#start{padding-bottom:var(--sek)}
.hero-tekst{text-align:center;padding-top:clamp(56px, 7vw, 128px)}
#start h1{font-size:clamp(48px, 5.85vw, 84px)}
.hero-tekst .lead{max-width:1080px;margin:24px auto 0;font-size:clamp(17px, 1.32vw, 19px)}
.hero-akcja{margin-top:36px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.hero-akcja .btn{height:48px}
.btn-drugi{background:#fff;color:var(--grafit);box-shadow:inset 0 0 0 1px var(--linia-ciemna)}
.btn-drugi:hover{box-shadow:inset 0 0 0 1px var(--grafit)}

/* ---------- tekst nad widokiem ---------- */
.nad{max-width:760px}
.nad .lead{margin-top:28px;max-width:620px}
.nad.srodek{margin:0 auto;text-align:center}
.nad.srodek .lead{margin-left:auto;margin-right:auto}
.nad.prawo{margin-left:auto;max-width:660px}
.zakl-linia{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:24px;font-family:var(--serif);font-size:24px;line-height:1.2}
.zakl-linia span + span::before{content:"·";color:var(--popiel);margin:0 14px}

/* ---------- scena: malowana faktura, na niej cały widok programu ---------- */
/* plansza z lekko zaokrąglonym rogiem i marginesem papieru; faktura wychodzi spod widoku z każdej strony */
/* proporcje: widok programu to ok. 85 % szerokości planszy, nie mniej niż ok. 1000 px, dopóki plansza je mieści */
.scena{--bok:clamp(12px, 2vw, 40px);--obw:clamp(28px, 4.6%, 88px);--widok:min(1440px, max(85%, min(94%, 1000px)));
  position:relative;margin:clamp(40px, 4.4vw, 64px) var(--bok) 0;padding:var(--obw) 0;
  border-radius:clamp(8px, .7vw, 12px);overflow:hidden;background:var(--zielen)}
.scena-hero{margin-top:clamp(64px, 7vw, 120px)}
.scena-foto{position:absolute;inset:0;z-index:0}
.scena-foto img{width:100%;height:100%;object-fit:cover}
.plansza{border-radius:clamp(8px, .7vw, 12px);overflow:hidden;background:var(--zielen)}
.plansza picture{display:block;height:100%}
.plansza img{width:100%;height:100%;object-fit:cover}

/* ---------- pełny widok programu: skaluje się jak obraz (1em = 1 % szerokości) ---------- */
.widok-rama{container-type:inline-size;width:var(--widok);margin-inline:auto;position:relative;z-index:1}
.okno{font-size:1cqw;aspect-ratio:16 / 9;overflow:hidden;display:grid;grid-template-columns:3.5em minmax(0,1fr);
  background:#F6F5F2;border:1px solid rgba(21,23,26,.16);border-radius:.9em;
  box-shadow:0 2.2em 5em -1em rgba(21,23,26,.30), 0 .3em .9em rgba(21,23,26,.10);
  color:var(--grafit);font-family:var(--sans);font-weight:400;line-height:1.35;text-align:left;overflow-wrap:normal;
  font-variant-numeric:tabular-nums lining-nums;-webkit-text-size-adjust:none;text-size-adjust:none}
.okno{grid-template-rows:minmax(0,1fr)}
.okno *{min-width:0}
.okno svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.okno b{font-weight:600}
.okno .mono{font-family:var(--mono);letter-spacing:0}
/* powłoka: szyna ikon + nagłówek (wspólna dla pięciu widoków) */
.o-szyna{display:flex;flex-direction:column;align-items:center;gap:.3em;padding:.9em 0;background:var(--kamien);border-right:1px solid var(--linia)}
.o-logo{width:2.3em;height:2.3em;border-radius:50%;background:#fff;border:1px solid var(--linia-ciemna);display:grid;place-items:center;
  font-family:var(--serif);font-size:1.05em;color:var(--zielen);margin-bottom:.5em}
.o-ik{width:2.3em;height:2.3em;border-radius:.6em;display:grid;place-items:center;color:var(--popiel)}
.o-ik.wl{background:var(--zielen);color:#fff}
.o-sep{width:1.5em;border-top:1px solid var(--linia-ciemna);margin:.35em 0}
.o-dol{margin-top:auto}
.o-prawa{display:grid;grid-template-rows:3.6em minmax(0,1fr);min-height:0}
.o-glowa{display:flex;align-items:center;gap:.7em;padding:0 1.1em;background:#fff;border-bottom:1px solid var(--linia);white-space:nowrap;overflow:hidden}
.o-okr{font-size:.8em;color:var(--popiel)}
.o-tytul{font-family:var(--serif);font-size:1.25em;letter-spacing:-.005em;line-height:1.2}
.o-pr{margin-left:auto;display:flex;align-items:center;gap:.55em}
.o-pill{display:inline-flex;align-items:center;gap:.45em;font-size:.75em;font-weight:500;line-height:1.3;border-radius:99em;padding:.3em .85em;white-space:nowrap}
.o-pill.b{color:var(--bursztyn);background:var(--bursztyn-tlo)}
.o-pill.b::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;flex:none}
.o-pill.z{color:var(--zielen);background:var(--zielen-jasna)}
.o-pill.s{background:var(--kamien);color:var(--grafit)}
.o-pill svg{width:1.1em;height:1.1em}
.o-btn{display:inline-flex;align-items:center;gap:.5em;font-size:.8em;font-weight:500;line-height:1.3;border:1px solid var(--linia-ciemna);border-radius:.65em;padding:.5em .9em;background:#fff;white-space:nowrap}
.o-btn.g{background:var(--grafit);border-color:var(--grafit);color:#fff}
.o-btn.ik{padding:.5em .55em}
.o-btn.duzy{font-size:.85em;padding:.7em 1.15em;border-radius:.7em}
.o-tresc{display:grid;grid-template-rows:minmax(0,1fr);gap:.9em;padding:.9em;min-height:0;overflow:hidden}
.o-3k{grid-template-columns:15em minmax(0,1fr) 20em}
.o-p{background:#fff;border:1px solid var(--linia);border-radius:.85em;overflow:hidden;min-height:0}
.o-sub{display:block;font-size:.85em;color:var(--popiel);margin-top:.1em;font-weight:400}
.o-mal{font-size:.68em;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--popiel)}
.o-sekcja{display:flex;align-items:baseline;gap:.6em;font-family:var(--serif);font-size:1.05em;letter-spacing:.12em;text-transform:uppercase;padding:.2em .2em 0}
.o-sekcja span{font-family:var(--sans);font-size:.72em;letter-spacing:0;text-transform:none;color:var(--popiel)}
.o-sekcja::after{content:"";flex:1;border-top:1px solid var(--linia-ciemna);transform:translateY(-.3em)}
.o-av{width:2.9em;height:2.9em;border-radius:50%;background:var(--kamien);border:1px solid var(--linia);display:grid;place-items:center;
  font-size:.75em;font-weight:600;color:var(--popiel);flex:none;letter-spacing:.02em}
.o-kol{display:flex;flex-direction:column;gap:.9em;min-height:0}
.o-kol > *, .o-sr > *{flex-shrink:0}
.o-kol > .o-rosnie{flex:1 1 0;min-height:0}
.o-sr > .o-p:nth-last-child(2){flex-shrink:1}
.o-t{font-family:var(--serif);font-size:1.3em;line-height:1.2;white-space:nowrap}
.o-t span{color:var(--bursztyn);margin-left:.25em}
.o-tile{width:1.9em;height:1.9em;border-radius:.5em;background:var(--kamien);display:grid;place-items:center;color:var(--popiel);flex:none}
.o-tile svg{width:1em;height:1em}
.o-szuk{display:flex;align-items:center;gap:.5em;background:var(--kamien);border-radius:.6em;padding:.55em .8em;font-size:.8em;color:var(--popiel);white-space:nowrap;overflow:hidden}
.o-przel2{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--kamien);border-radius:.65em;padding:.2em;gap:.15em;font-size:.8em}
.o-przel2 > span{text-align:center;padding:.45em .5em;border-radius:.5em;color:var(--popiel);white-space:nowrap}
.o-przel2 > .wl{background:#fff;color:var(--grafit);font-weight:600;box-shadow:0 0 0 1px var(--linia)}
.o-zakl{display:inline-flex;background:var(--kamien);border-radius:.65em;padding:.2em;gap:.15em;font-size:.85em}
.o-zakl > span{padding:.4em 1.05em;border-radius:.5em;color:var(--popiel);white-space:nowrap}
.o-zakl > .wl{background:#fff;color:var(--grafit);font-weight:600;box-shadow:0 0 0 1px var(--linia)}
/* kolumna kroków */
.o-kr-p{display:flex;flex-direction:column;padding:.8em .7em .7em}
.o-kr-gora{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7em}
.o-wroc{display:inline-flex;align-items:center;gap:.35em;font-family:var(--serif);font-size:1.05em;background:var(--kamien);border-radius:.55em;padding:.3em .7em .3em .45em}
.o-wroc svg{width:.9em;height:.9em}
.o-lista{list-style:none;position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:.8em 0 .6em}
.o-lista::before{content:"";position:absolute;left:.98em;top:1.8em;bottom:1.8em;border-left:1px solid var(--linia-ciemna)}
.o-krok{position:relative;display:grid;grid-template-columns:1.6em minmax(0,1fr) auto;align-items:center;gap:.6em;padding:.42em .45em .42em .35em;border-radius:.6em;font-size:.85em}
.o-krok.wl{background:var(--kamien);font-weight:600}
.o-krok em{font-style:normal;font-size:.88em;font-weight:500;color:var(--bursztyn);white-space:nowrap}
.o-krok.gr{font-size:.72em;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--popiel);grid-template-columns:1.89em minmax(0,1fr) auto;padding-left:.42em}
.o-krok.gr em{color:var(--popiel);letter-spacing:0;font-size:1em}
.o-st{width:1.6em;height:1.6em;border-radius:50%;background:#fff;border:1px solid var(--linia-ciemna);display:grid;place-items:center;color:#fff}
.o-st.ok{background:var(--zielen);border-color:var(--zielen)}
.o-st.ok svg{width:.95em;height:.95em;stroke-width:2.4}
.o-st.wl{border:.14em solid var(--grafit)}
.o-st.wl::after{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--grafit)}
.o-krok.gr .o-st{width:1.89em;height:1.89em;border:0;background:none}
.o-krok.gr .o-st::after{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--linia-ciemna);box-shadow:0 0 0 .3em #fff}
.o-zapis{display:flex;align-items:center;gap:.5em;font-size:.72em;color:var(--popiel);border-top:1px solid var(--linia);padding:.8em .3em 0}
.o-zapis svg{color:var(--zielen)}
.o-mini{padding:.45em .8em}
.o-mini > div{display:flex;align-items:center;gap:.6em;padding:.38em 0;font-size:.8em}
.o-mini svg{color:var(--popiel)}
.o-mini .o-pr{color:var(--popiel);font-size:.9em}
.o-kbd{font-size:.8em;border:1px solid var(--linia-ciemna);border-radius:.35em;padding:.05em .4em;color:var(--popiel)}
/* środek: rachunek, kto płaci */
.o-sr{display:flex;flex-direction:column;gap:.7em;min-height:0}
.o-rach{padding:0 1.2em}
.o-rw{display:grid;grid-template-columns:minmax(0,1fr) 7em 6em 7em;column-gap:1em;align-items:baseline;padding:.78em 0;border-top:1px solid var(--linia);font-size:.85em}
.o-rw > span:nth-child(n+2){text-align:right;white-space:nowrap}
.o-rw.nagl{border-top:0;padding:.85em 0 .5em}
.o-rw.nagl > span{font-size:.85em;color:var(--popiel)}
.o-rw.grp{font-weight:600;padding-top:.8em}
.o-rw.poz{padding-left:1.3em}
.o-suma{display:flex;justify-content:space-between;align-items:center;padding:.75em 0 .7em;border-top:1px solid var(--grafit);border-bottom:.14em solid var(--zielen);margin-bottom:1em}
.o-suma b{font-size:1.05em}
.o-suma .kw{display:flex;align-items:center;gap:.45em;font-size:1.3em;font-weight:600;letter-spacing:-.01em}
.o-ok{width:1.05em;height:1.05em;border-radius:50%;background:var(--zielen);color:#fff;display:grid;place-items:center}
.o-ok svg{width:.7em;height:.7em;stroke-width:2.6}
.o-kp{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:.9em;align-items:center;padding:.95em 1.2em;border-top:1px solid var(--linia);font-size:.85em}
.o-kp:first-child{border-top:0}
.o-sel{display:inline-flex;align-items:center;gap:.5em;background:var(--kamien);border-radius:.55em;padding:.4em .75em}
.o-sel svg{width:.9em;height:.9em}
.o-sel.pusty{color:var(--popiel)}
.o-chk{width:1.35em;height:1.35em;border-radius:.35em;border:1px solid var(--linia-ciemna);display:grid;place-items:center;color:#fff}
.o-chk.on{background:var(--zielen);border-color:var(--zielen)}
.o-chk svg{width:.85em;height:.85em;stroke-width:2.4}
.o-pasek{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:.6em .7em .6em 1em;flex:none}
.o-wstecz{display:flex;align-items:center;gap:.6em;font-size:.85em;font-weight:600}
.o-wstecz small{display:block;font-size:.85em;font-weight:400;color:var(--popiel)}
/* prawa kolumna: do uzupełnienia, w tej czynności */
.o-du-gora{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.9em 1em .6em}
.o-nast{display:inline-flex;align-items:center;gap:.35em;font-size:.75em;background:var(--kamien);border-radius:99em;padding:.35em .8em;white-space:nowrap}
.o-nast svg{width:1em;height:1em}
.o-du-grp{display:flex;align-items:center;gap:.6em;padding:.3em 1em .2em;font-size:.85em;font-weight:600}
.o-du-grp em{margin-left:auto;font-style:normal;font-weight:400;color:var(--popiel)}
.o-du{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6em;align-items:center;margin:.6em 1em .6em 1.9em;padding:.15em 0 .15em .8em;border-left:.14em solid var(--bursztyn);font-size:.85em}
.o-du svg{color:var(--popiel);width:1em;height:1em}
.o-du-dol{text-align:center;font-size:.72em;color:var(--popiel);padding:.5em 0 .9em}
.o-wtc{display:flex;flex-direction:column;padding-bottom:.8em}
.o-wtc > .o-t{padding:.9em 1em .6em}
.o-wtc > .o-przel2{margin:0 1em}
.o-wtc > .o-szuk{margin:.7em 1em}
.o-os{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7em;align-items:center;margin:0 1em .5em;padding:.55em .7em;border-radius:.7em;background:#FAFAF8;border:1px solid var(--linia);font-size:.85em}
.o-os svg{color:var(--popiel);width:1em;height:1em}
.o-os-rel{display:flex;align-items:center;gap:.7em;margin:0 1em .5em;padding:.4em .7em;font-size:.85em}
.o-os-rel svg{color:var(--popiel)}
.o-os-rel > :last-child{margin-left:auto}
.o-dodaj{display:flex;align-items:center;justify-content:center;gap:.5em;margin:.2em 1em 0;padding:.6em;border:1px dashed var(--linia-ciemna);border-radius:.7em;font-size:.8em;color:var(--popiel)}
.o-dodaj svg{width:1em;height:1em}
/* księgi wieczyste */
.o-ks{grid-template-columns:24em minmax(0,1fr)}
.o-ksl{display:flex;flex-direction:column}
.o-ksl-gora{display:flex;justify-content:space-between;align-items:center;padding:.9em 1em .6em}
.o-ksl > .o-szuk{margin:0 1em .6em}
.o-ksw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75em;align-items:center;padding:.5em .7em;margin:0 .5em .12em;border-radius:.7em;font-size:.85em}
.o-ksw.wl{background:var(--zielen-jasna)}
.o-ks-ik{width:2.5em;height:2.5em;border-radius:.6em;background:var(--zielen);color:#fff;display:grid;place-items:center}
.o-ks-ik svg{width:1.3em;height:1.3em}
.o-ksw .nr{font-family:var(--mono);font-size:1.02em;font-weight:500}
.o-ksl-dol{margin-top:auto;border-top:1px solid var(--linia);padding:.7em 1em;font-size:.75em;color:var(--popiel)}
.o-ksd{display:flex;flex-direction:column}
.o-ksd-gora{display:flex;align-items:center;gap:.8em;padding:.9em 1.1em .7em}
.o-ksd-gora .nr{font-family:var(--mono);font-size:1.35em;font-weight:500;display:block;line-height:1.2}
.o-ksd-gora .o-ks-ik{width:3em;height:3em}
.o-ksd-zakl{display:flex;justify-content:space-between;align-items:center;padding:0 1.1em .9em}
.o-ksd-tresc{flex:1;background:#F6F5F2;border-top:1px solid var(--linia);padding:.9em 1.1em;display:flex;flex-direction:column;gap:.6em;overflow:hidden}
.o-dzial{display:flex;align-items:center;gap:.7em;margin-top:.15em}
.o-dzial .o-tile{width:2.3em;height:2.3em;background:#fff;border:1px solid var(--linia)}
.o-dzial .t{display:block;font-family:var(--serif);font-size:1.2em;line-height:1.2}
.o-karta{background:#fff;border:1px solid var(--linia);border-radius:.85em;overflow:hidden;flex:none}
.o-kv{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.6em 1em;border-top:1px solid var(--linia);font-size:.85em}
.o-kv:first-child{border-top:0}
.o-kv > :last-child{text-align:right}
.o-dz{display:grid;grid-template-columns:3em 6.5em 14em minmax(0,1fr) minmax(0,1.1fr);gap:.8em;align-items:center;padding:.5em 1em;border-top:1px solid var(--linia);font-size:.85em}
.o-dz.nagl > span{font-size:.85em;color:var(--popiel);font-weight:500}
.o-dz .lp{display:flex;align-items:center;gap:.45em}
.o-pin{width:1.35em;height:1.35em;border-radius:.35em;background:var(--zielen);color:#fff;display:grid;place-items:center}
.o-pin svg{width:.9em;height:.9em}
.o-lok{display:grid;grid-template-columns:repeat(4, minmax(0,1fr))}
.o-lok > div{padding:.5em 1em;border-top:1px solid var(--linia);border-left:1px solid var(--linia);font-size:.85em}
.o-lok > div:nth-child(-n+4){border-top:0}
.o-lok > div:nth-child(4n+1){border-left:0}
.o-lok .o-sub{margin:0 0 .1em}
/* sprawa: dokumenty */
.o-dok{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9em;align-items:center;padding:.65em 1.1em;border-top:1px solid var(--linia);font-size:.85em}
.o-dok:first-child{border-top:0}
.o-dok-ik{width:2.6em;height:2.6em;border-radius:.6em;background:var(--zielen-jasna);color:var(--zielen);display:grid;place-items:center}
.o-dok-ik svg{width:1.3em;height:1.3em}
.o-akc{display:flex;gap:.9em;color:var(--popiel)}
.o-akc svg{width:1.05em;height:1.05em}
.o-dok-dodaj{display:flex;align-items:center;justify-content:center;gap:.7em;margin:.2em .6em .6em;padding:.55em;border:1px dashed var(--linia-ciemna);border-radius:.7em;font-size:.85em;font-weight:600}
.o-dok-dodaj i{width:1.9em;height:1.9em;border-radius:50%;background:var(--kamien);display:grid;place-items:center;font-style:normal;color:var(--popiel)}
.o-dok-dodaj i svg{width:1em;height:1em}
.o-dok-dodaj em{font-style:normal;font-weight:500;font-size:.85em;color:var(--zielen);margin-left:.4em}
.o-fk{display:grid;grid-template-columns:12em minmax(0,1fr) 15em;gap:1em;align-items:baseline;padding:.62em 1.1em;border-top:1px solid var(--linia);font-size:.85em}
.o-fk:first-child{border-top:0}
.o-fk.nagl > span{font-size:.85em;font-weight:500}
.o-fk > span:first-child, .o-fk > span:last-child{color:var(--popiel)}
.o-fk > span:last-child{font-size:.9em}
.o-puste{display:inline-flex;align-items:center;color:var(--bursztyn);background:var(--bursztyn-tlo);border-radius:.35em;padding:.05em .5em;font-weight:500}
/* biuro: dziś */
.o-biuro{grid-template-columns:23em minmax(0,1fr) 21em}
.o-czeka{display:flex;flex-direction:column;padding:.9em .6em}
.o-czeka-gora{display:flex;align-items:baseline;gap:.5em;padding:0 .5em}
.o-czeka-gora b{font-family:var(--serif);font-weight:400;font-size:2.6em;line-height:1}
.o-czeka-gora span{color:var(--popiel);font-size:.9em}
.o-grupa{font-size:.85em;font-weight:600;padding:1em .6em .45em}
.o-grupa em{font-style:normal;color:var(--popiel);font-weight:400;margin-left:.3em}
.o-zg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7em;align-items:start;padding:.65em .6em;border-radius:.7em;font-size:.85em;margin-bottom:.2em}
.o-zg.wl{background:var(--kamien);box-shadow:inset .2em 0 0 var(--zielen)}
.o-zg.zal{color:var(--popiel)}
.o-zg-ik{width:2.3em;height:2.3em;border-radius:.6em;background:var(--grafit);color:#fff;display:grid;place-items:center}
.o-zg-ik.jasna{background:#fff;border:1px solid var(--linia);color:var(--popiel)}
.o-zg-ik svg{width:1.1em;height:1.1em}
.o-zg .czas{color:var(--popiel);font-size:.9em}
.o-zg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4em .6em;margin-top:.4em;font-size:.88em;color:var(--popiel)}
.o-zg-meta .o-pill{font-size:.85em}
.o-szcz{display:flex;flex-direction:column;padding:1.3em 1.8em 0}
.o-szcz-gora{display:flex;align-items:center;gap:.6em;font-size:.85em}
.o-szcz-gora .czas{color:var(--popiel)}
.o-szcz-tyt{font-family:var(--serif);font-weight:400;font-size:1.75em;line-height:1.15;margin:.45em 0 .35em;letter-spacing:-.01em}
.o-cytat{border-left:1px solid var(--linia-ciemna);padding:.1em 0 .1em .9em;margin:.8em 0 1em;font-size:.95em}
.o-tab{border:1px solid var(--linia);border-radius:.8em;overflow:hidden}
.o-tab > div{display:grid;grid-template-columns:11em minmax(0,1fr);gap:1em;padding:.66em 1.1em;border-top:1px solid var(--linia);font-size:.85em}
.o-tab > div:first-child{border-top:0}
.o-tab > div > span:first-child{color:var(--popiel)}
.o-pliki{display:flex;gap:.6em;margin-top:.9em;flex-wrap:wrap}
.o-plik{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--linia);border-radius:.6em;padding:.45em .75em;font-size:.78em}
.o-plik svg{color:var(--zielen);width:1.1em;height:1.1em}
.o-akcje{margin:auto -1.8em 0;display:flex;align-items:center;gap:1.2em;border-top:1px solid var(--linia);padding:.8em 1.8em .9em}
.o-lnk{display:inline-flex;align-items:center;gap:.4em;font-size:.82em;color:var(--popiel)}
.o-lnk svg{width:1em;height:1em}
.o-kal-p{padding:.9em 1em .7em}
.o-kal-gora{display:flex;align-items:center;gap:.5em;font-size:.85em;font-weight:600;margin-bottom:.45em}
.o-kal-gora svg{color:var(--popiel)}
.o-kal-gora .o-pr{font-weight:500}
.o-kal{display:grid;grid-template-columns:3.3em minmax(0,1fr);gap:.7em;padding:.45em 0;font-size:.85em}
.o-kal .g{text-align:right;font-weight:500;color:var(--popiel)}
.o-kal > div{border-left:.14em solid var(--grafit);padding-left:.75em}
.o-kal.nasza > div{border-left-color:var(--zielen)}
.o-kal.nasza .g, .o-kal.nasza b{color:var(--zielen)}
.o-kal .o-pill{margin-top:.35em;font-size:.8em}
.o-teraz{display:grid;grid-template-columns:3.9em minmax(0,1fr);gap:.8em;align-items:center;font-size:.72em;font-weight:600;color:var(--zielen);padding:.25em 0}
.o-teraz span{text-align:right}
.o-teraz::after{content:"";border-top:.18em solid var(--zielen)}
/* inskryptor ai */
.o-ai{grid-template-columns:17em minmax(0,1fr) 21em}
.o-rozm{display:flex;flex-direction:column;padding:.9em .7em .7em;gap:.45em}
.o-rozm > .o-btn{justify-content:center}
.o-rozm-et{display:flex;justify-content:space-between;align-items:center;font-size:.66em;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--popiel);padding:.7em .5em 0}
.o-rozm-dz{font-size:.7em;font-weight:600;color:var(--popiel);padding:.35em .55em 0}
.o-cz{display:flex;align-items:center;gap:.55em;padding:.42em .55em;border-radius:.55em;font-size:.8em;white-space:nowrap}
.o-cz span{overflow:hidden;text-overflow:ellipsis}
.o-cz.wl{background:var(--kamien);font-weight:500;box-shadow:inset .15em 0 0 var(--zielen)}
.o-cz i{width:.45em;height:.45em;border-radius:50%;background:var(--linia-ciemna);flex:none}
.o-cz.wl i{background:var(--zielen)}
.o-rozm-dol{margin-top:auto;display:flex;align-items:center;gap:.6em;border-top:1px solid var(--linia);padding:.7em .3em 0;font-size:.8em}
.o-odp-k{display:flex;flex-direction:column;min-height:0}
.o-odp-tresc{flex:1;min-height:0;overflow:hidden;padding:1.2em 2em 0}
.o-pyt{margin-left:auto;width:fit-content;max-width:70%;background:var(--kamien);border-radius:.9em .9em .25em .9em;padding:.6em 1em;font-size:.88em}
.o-odp{font-family:var(--serif);font-size:.98em;line-height:1.62;margin-top:.8em}
.o-art{font-family:var(--sans);font-size:.72em;color:var(--zielen);background:var(--zielen-jasna);border-radius:.35em;padding:.12em .45em;white-space:nowrap;vertical-align:.08em}
.o-h{font-family:var(--serif);font-size:1.08em;margin-top:.9em;padding-top:.75em;border-top:1px solid var(--linia)}
.o-h span{font-family:var(--sans);font-size:.65em;color:var(--popiel);margin-left:.3em}
.o-lista-p{list-style:none;margin-top:.3em}
.o-lista-p li{position:relative;padding-left:1.1em;font-family:var(--serif);font-size:.9em;line-height:1.55;margin-top:.3em}
.o-lista-p li::before{content:"";position:absolute;left:.2em;top:.68em;width:.35em;height:.35em;border-radius:50%;background:var(--popiel)}
.o-txt{font-family:var(--serif);font-size:.9em;line-height:1.55;margin-top:.3em}
.o-chipy{display:flex;gap:.5em;margin-top:.5em}
.o-chipy span{border:1px solid var(--linia-ciemna);border-radius:.5em;padding:.35em .7em;font-size:.75em;color:var(--zielen);white-space:nowrap}
.o-dop{display:grid;grid-template-columns:1fr 1fr;gap:.7em;margin-top:.55em}
.o-dop span{border:1px solid var(--linia);border-radius:.7em;padding:.6em .8em;font-size:.78em}
.o-pole-k{padding:.6em 1.4em 1em;flex:none}
.o-narz{display:flex;align-items:center;gap:.5em;font-size:.75em;margin-bottom:.6em}
.o-narz > b{font-size:.85em;letter-spacing:.09em;color:var(--popiel);margin-right:.2em}
.o-narz > span{display:inline-flex;align-items:center;gap:.4em;border:1px solid var(--linia-ciemna);border-radius:99em;padding:.35em .8em;background:#fff;white-space:nowrap}
.o-narz svg{width:1.05em;height:1.05em;color:var(--popiel)}
.o-pole{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--linia-ciemna);border-radius:1em;padding:.75em .8em .75em 1em;font-size:.85em;color:var(--popiel);box-shadow:0 .3em 1em rgba(21,23,26,.05)}
.o-wyslij{width:2em;height:2em;border-radius:50%;background:var(--grafit);color:#fff;display:grid;place-items:center}
.o-wyslij svg{transform:rotate(-90deg)}
.o-sc{display:flex;flex-direction:column;padding:.6em}
.o-sc-in{padding:.6em .6em 0}
.o-sc-et{font-size:.72em;font-weight:600;color:var(--popiel);margin-top:1.1em}
.o-sc-et:first-child{margin-top:0}
.o-wynik{font-family:var(--serif);font-size:.95em;line-height:1.45;margin-top:.25em}
.o-pr-w{display:grid;grid-template-columns:minmax(0,1fr) 4.6em 6.6em;gap:.6em;align-items:baseline;padding:.5em 0;border-top:1px solid var(--linia);font-size:.75em}
.o-pr-w.nagl{border-top:0;color:var(--popiel);padding:.35em 0}
.o-pr-w > span:nth-child(2){font-family:var(--serif);font-size:1.12em;white-space:nowrap}
.o-pr-w > span:nth-child(3){text-align:right;color:var(--zielen)}
.o-ust{list-style:none}
.o-ust li{display:grid;grid-template-columns:.9em minmax(0,1fr);gap:.4em;font-size:.75em;line-height:1.4;margin-top:.5em}
.o-ust li::before{content:"?";color:var(--bursztyn);font-weight:700}

/* ---------- powiększony szczegół pod pełnym widokiem ---------- */
.szczegol-rzad{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:24px;row-gap:24px;margin-top:clamp(32px, 4vw, 56px);align-items:start}
.szczegol-rzad > *{grid-row:1}
.szczegol-podpis{grid-column:1 / span 4;padding-top:4px}
.szczegol-podpis p{color:var(--popiel)}
.szczegol-podpis p + p{margin-top:12px}
.szczegol-podpis b{color:var(--grafit);font-weight:600}
.szczegol-rzad > .sz{grid-column:6 / span 7}
.szczegol-rzad.lewo > .sz{grid-column:1 / span 7}
.szczegol-rzad.lewo > .szczegol-podpis{grid-column:9 / span 4}
.szczegol-rzad.srodek > .sz{grid-column:2 / span 7}
.szczegol-rzad.srodek > .szczegol-podpis{grid-column:9 / span 4;align-self:center}
.tylko-maly{display:none}
.sz{background:#fff;border:1px solid var(--linia);border-radius:14px;font-size:16px;line-height:1.45;color:var(--grafit);
    box-shadow:0 12px 32px rgba(21,23,26,.06);min-width:0;overflow:hidden}
.sz .mono{font-family:var(--mono)}
.sz-gora{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:18px 22px 14px;border-bottom:1px solid var(--linia)}
.sz-t{font-family:var(--serif);font-size:24px;line-height:1.2}
.sz-t span{color:var(--bursztyn);margin-left:6px}
.sz-sub{display:block;color:var(--popiel);font-size:15px}
.ok-kolo{width:24px;height:24px;border-radius:50%;background:var(--zielen);display:inline-grid;place-items:center;flex:none}
.ok-kolo svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* rachunek (telefon) */
.sz-rw{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));column-gap:10px;padding:12px 18px;border-top:1px solid var(--linia)}
.sz-rw .lab{grid-column:1 / -1;margin-bottom:2px}
.sz-rw .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sz-rw.nagl{color:var(--popiel);font-size:15px;border-top:0;padding-top:12px;padding-bottom:4px}
.sz-suma{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 18px 18px;padding:14px 0;border-top:1px solid var(--grafit);border-bottom:2px solid var(--zielen);font-weight:600;font-size:19px}
.sz-suma .kw{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
/* działki */
.sz-dzw{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;padding:14px 22px;border-top:1px solid var(--linia)}
.sz-gora + .sz-dzw{border-top:0}
.sz-dzw .lp{color:var(--popiel)}
.sz-dzw .id{display:block;color:var(--popiel);font-size:15px}
.sz-dzw .uz{color:var(--popiel);font-size:15px;text-align:right}
.sz-kv{display:flex;justify-content:space-between;gap:16px;padding:14px 22px;border-top:1px solid var(--linia)}
.sz-zgoda{display:flex;align-items:center;gap:12px;padding:14px 22px;border-top:2px solid var(--zielen);color:var(--zielen);font-weight:500;background:#FAFCFB}
/* braki */
.sz-licznik{display:flex;align-items:baseline;gap:16px;padding:24px 24px 8px}
.sz-licznik b{font-family:var(--serif);font-weight:400;font-size:clamp(72px, 7vw, 104px);line-height:.85;color:var(--bursztyn);letter-spacing:-.02em}
.sz-licznik span{font-family:var(--serif);font-size:26px;line-height:1.2}
.sz-brak{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 24px;padding:6px 0 6px 14px;border-left:2px solid var(--bursztyn)}
.sz-brak .strz{color:var(--popiel);flex:none}
.sz-dol{color:var(--popiel);font-size:15px;padding:6px 24px 22px}
/* kalendarz */
.sz-kal{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:14px 22px;border-top:1px solid var(--linia)}
.sz-gora + .sz-kal{border-top:0}
.sz-kal .godz{font-weight:500;color:var(--popiel);text-align:right;font-variant-numeric:tabular-nums}
.sz-kal > div{border-left:2px solid var(--grafit);padding-left:14px}
.sz-kal.nasza > div{border-left-color:var(--zielen)}
.sz-kal.nasza .godz, .sz-kal.nasza b{color:var(--zielen)}
.sz-kal b{font-weight:600}
/* przepis przy zdaniu, dymek otwarty */
.sz-przepis{padding:26px 28px 28px}
.sz-zdanie{font-family:var(--serif);font-size:22px;line-height:1.55}
.sz-art{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:15px;color:var(--zielen);background:var(--zielen-jasna);
  border-radius:6px;padding:3px 10px;white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--zielen)}
.sz-dymek{margin-top:14px;position:relative;background:var(--grafit);color:#fff;border-radius:12px;padding:18px 20px;font-size:16px;line-height:1.55}
.sz-dymek::before{content:"";position:absolute;top:-6px;left:40px;width:12px;height:12px;background:var(--grafit);transform:rotate(45deg)}
.sz-dymek b{display:block;font-weight:600;margin-bottom:6px}
.sz-dymek p{font-family:var(--serif);font-size:17px;color:#F0EFEB}
.sz-dymek span{display:block;margin-top:10px;font-size:15px;color:#C9DCD3}

/* ---------- 2. księga ---------- */
.fakty{list-style:none;margin-top:36px;font-size:17px;color:var(--grafit)}
.fakty li{padding:14px 0;border-top:1px solid var(--linia-ciemna)}
.fakty li:last-child{border-bottom:1px solid var(--linia-ciemna)}

/* ---------- 3. słowa kancelarii ---------- */
#slowa{padding-top:var(--sek)}
.slowa-tekst{max-width:860px;margin:0 auto;text-align:center}
.slowa-tekst h2{font-size:clamp(40px, 5.6vw, 80px);line-height:1.02}
.slowa-tekst .lead{max-width:640px;margin:28px auto 0}

/* ---------- 5. dane osobowe ---------- */
#dane{background:var(--kamien);padding:var(--sek) 0}
.dane-tekst{grid-column:1 / span 6;align-self:start}
.rejestr{margin-top:48px;border-top:1px solid var(--grafit)}
.rejestr div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--linia-ciemna)}
.rejestr dt{font-family:var(--serif);font-size:22px;line-height:1.3}
.rejestr dd{color:var(--popiel);padding-top:3px}
.plansza-dane{grid-column:8 / span 5;aspect-ratio:4 / 5;position:relative;display:grid;place-items:center}
.plansza-dane picture{position:absolute;inset:0}

/* ---------- 6. biuro ---------- */
#biuro{padding-bottom:var(--sek)}
.nowosc{color:var(--zielen);font-weight:600}
.nadch{color:var(--bursztyn);font-weight:600}

/* ---------- 7. Inskryptor AI ---------- */
/* rozdział: cztery sekcje na wspólnym kamiennym tle, rozdzielone cienką linią */
.ai-r{background:var(--kamien);padding:clamp(64px, 7vw, 112px) 0}
#ai, #przepis{margin-top:var(--sek);padding-top:clamp(56px, 6vw, 96px)}
#przepis{margin-top:0}
#ai-sciagawka{padding-bottom:var(--sek)}
.ai-r + .ai-r > .wrap::before{content:"";display:block;grid-column:1 / -1;border-top:1px solid var(--linia-ciemna);margin-bottom:clamp(64px, 7vw, 112px)}
.ai-etk{font-size:15px;font-weight:600;color:var(--popiel)}
.przepis{color:var(--zielen);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.chipy{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chipy span{border:1px solid var(--linia);border-radius:8px;padding:5px 10px;font-size:15px;color:var(--zielen);white-space:nowrap}

/* 7a. odpowiedź */
.ai-znak{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.ai-znak .nowosc{font-size:15px;letter-spacing:.02em}
.ai-znak img{height:32px;width:auto}
.ai-znak h2{max-width:900px;margin-top:8px}
.ai-znak .lead{max-width:620px}
#ai .scena{margin-top:clamp(40px, 4.4vw, 64px)}

/* 7b. czego nie wiem */
.cnw-tekst{grid-column:1 / span 5;align-self:start}
.cnw-tekst h2{font-size:clamp(40px, 4.45vw, 64px);line-height:1.04}
.cnw-tekst .lead{margin-top:28px}
.cnw-cytat{grid-column:6 / span 7;align-self:start;border-left:1px solid var(--linia-ciemna);padding-left:clamp(24px, 3vw, 44px);margin-top:10px}
.cnw-cytat ul{list-style:none;margin-top:8px}
.cnw-cytat li{font-family:var(--serif);font-size:20px;line-height:1.55;padding:14px 0;border-top:1px solid var(--linia-ciemna)}
.cnw-cytat li:first-child{border-top:0;padding-top:4px}
.cnw-cytat b{font-weight:500}
.cnw-pewnosc{margin-top:22px;padding-top:20px;border-top:1px solid var(--grafit)}
.cnw-pewnosc p:last-child{font-family:var(--serif);font-size:20px;line-height:1.55;margin-top:8px}

/* 7c. baza prawa */
.plansza-baza{grid-column:1 / span 5;aspect-ratio:4 / 5}
.baza-tekst{grid-column:7 / span 6;align-self:center}
.liczby{list-style:none;margin-top:40px;border-top:1px solid var(--grafit)}
.liczby li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;gap:8px 24px;padding:20px 0;border-bottom:1px solid var(--linia-ciemna)}
.liczby b{font-family:var(--serif);font-weight:400;font-size:clamp(44px, 4.4vw, 64px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;min-width:5.2ch}
.liczby span{color:var(--popiel)}
.baza-tekst h2{font-size:clamp(36px, 3.9vw, 56px)}
.nw{white-space:nowrap}
.baza-tekst .fakty{margin-top:0}
.baza-tekst .fakty li:first-child{border-top:0}

/* 7d. ściągawka i narzędzia (typograficznie) */
.sc-tekst{grid-column:1 / span 5;align-self:start}
.sc-tekst .lead{margin-top:28px}
.narzedzia{list-style:none;margin-top:36px}
.narzedzia li{padding:14px 0;border-top:1px solid var(--linia-ciemna)}
.narzedzia li:last-child{border-bottom:1px solid var(--linia-ciemna)}
.narzedzia b{font-weight:600}
.sc-akcja{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.sc-akcja p{font-size:15px;color:var(--popiel)}
.sc-progi{grid-column:7 / span 6;align-self:start;padding-top:10px}
.progi-t{margin-top:12px;border-top:1px solid var(--grafit)}
.progi-t div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:20px 0;border-bottom:1px solid var(--linia-ciemna);align-items:baseline}
.progi-t dt{grid-column:1;grid-row:1}
.progi-t .w{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--serif);font-size:clamp(32px, 3.2vw, 44px);line-height:1;letter-spacing:-.015em;white-space:nowrap;text-align:right}
.progi-t .p{grid-column:1;grid-row:2;color:var(--zielen);font-size:15px}
.ustalic{margin-top:36px}
.ustalic ul{margin-top:6px}
.ustalic li{list-style:none;display:flex;gap:10px;padding:8px 0;line-height:1.45}
.ustalic li::before{content:"?";color:var(--bursztyn);font-weight:600;flex:none}

/* ---------- 8. rodzina ---------- */
#rodzina{padding:var(--sek) 0}
.rodzina-gora{max-width:760px}
.rodzina-gora .lead{margin-top:24px}
#rodzina{padding-bottom:clamp(56px, 6vw, 88px)}
/* the list ends with a rule, so the gap to the closing call is one section step, not two */
#rodzina + .wezwanie{padding-top:clamp(56px, 6vw, 88px)}
.spis{list-style:none;margin-top:clamp(40px, 5vw, 72px);border-top:1px solid var(--grafit)}
.spis li, .nadchodzi{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:8px clamp(24px, 3vw, 48px);align-items:start}
.spis li{padding:clamp(22px, 2.2vw, 30px) 0;border-bottom:1px solid var(--linia-ciemna)}
.spis h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px, 2vw, 30px);line-height:1.15;letter-spacing:-.01em}
.spis .stan{display:block;margin-top:6px;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--zielen)}
.spis p{font-size:17px;line-height:1.55;color:var(--popiel);max-width:60ch;padding-top:4px}
.spis p b{font-weight:500;color:var(--grafit)}
.spis a{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding-top:6px;font-size:15px;font-weight:500;color:var(--grafit);text-decoration:none;white-space:nowrap}
.spis a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.spis a:hover{color:var(--zielen)}
.spis a:hover svg{transform:translateX(4px)}
.nadchodzi{padding-top:clamp(22px, 2.2vw, 30px);font-size:17px;line-height:1.55;color:var(--popiel)}
.nadchodzi b{color:var(--grafit);font:400 clamp(24px, 2vw, 30px)/1.15 var(--serif);letter-spacing:-.01em}
.nadchodzi span{max-width:60ch;padding-top:4px}
@media (max-width:900px){
  .spis li, .nadchodzi{grid-template-columns:minmax(0,1fr)}
  .spis a{justify-self:start}
}

/* ---------- 9. pokaz ---------- */
#pokaz, #dostep{padding-bottom:var(--sek)}
.pokaz-siatka{padding-top:clamp(64px, 7vw, 104px);align-items:start}
.pokaz-tekst{grid-column:1 / span 6}
.pokaz-tekst h1, .pokaz-tekst h2{font-size:clamp(40px, 5.2vw, 76px)}
.pokaz-tekst .lead{margin-top:28px;max-width:520px}
.pokaz-tekst .tekst{margin-top:24px;max-width:520px}
.formularz{grid-column:8 / span 5;display:grid;gap:18px;padding-top:0}
.formularz label{display:grid;gap:8px;font-size:15px;font-weight:500}
.formularz input, .formularz select{font:400 17px/1.4 var(--sans);color:var(--grafit);height:54px;padding:0 16px;border:1px solid var(--linia-ciemna);border-radius:12px;background:#fff;width:100%;min-width:0}
.formularz select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/18px}
.formularz input:focus, .formularz select:focus{outline:2px solid var(--zielen);outline-offset:1px;border-color:transparent}
.formularz .btn{width:100%;margin-top:8px}
.formularz p{font-size:15px;color:var(--popiel)}


/* ---------- karty wejść (wzór: harvey.ai): tekst na spokojnej zieleni u góry, program wychyla się z dołu ---------- */
#programy{padding-top:0}
.karty{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(12px, 1.2vw, 20px);
  margin:clamp(64px, 7vw, 120px) clamp(12px, 2vw, 40px) 0}
.karty.dwie{grid-template-columns:repeat(2, minmax(0,1fr))}
.karta{position:relative;isolation:isolate;container-type:inline-size;display:flex;flex-direction:column;
  min-height:clamp(520px, 40vw, 680px);border-radius:clamp(8px, .7vw, 12px);overflow:hidden;
  background:var(--zielen);color:#fff;text-decoration:none}
.karta > picture{position:absolute;inset:0;z-index:-1}
.karta > picture img{width:100%;height:100%;object-fit:cover}
/* gęsta zieleń pod tekstem przechodzi w fakturę: tekst zawsze czytelny, bez względu na układ plam */
.karta-tekst{padding:clamp(24px, 2.6vw, 44px) clamp(24px, 2.6vw, 44px) clamp(36px, 3.4vw, 56px);
  background:linear-gradient(180deg, rgba(24,60,48,.94) 0%, rgba(24,60,48,.88) 62%, rgba(24,60,48,0) 100%)}
.karta-dla{display:block;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.karta-tekst h3{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:clamp(30px, 2.5vw, 42px);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.karta-tekst p{margin-top:14px;max-width:36ch;font-size:16px;line-height:1.55;color:rgba(255,255,255,.86)}
.karta-btn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;height:42px;padding:0 18px;border:1px solid rgba(255,255,255,.62);
  border-radius:999px;font:500 15px/1 var(--sans);color:#fff;transition:background .2s, border-color .2s}
.karta-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.karta:hover .karta-btn{background:rgba(255,255,255,.12);border-color:#fff}
.karta:hover .karta-btn svg{transform:translateX(3px)}
.karta:focus-visible{outline:3px solid var(--zielen);outline-offset:3px}
.karta-scena{position:relative;flex:1 1 auto;min-height:clamp(250px, 21vw, 360px)}
/* widok programu w skali, w której da się go przeczytać; karta przycina go z prawej i od dołu */
.karta-widok{position:absolute;left:clamp(18px, 8%, 52px);top:0;width:56em;height:calc(100% + 2em);
  font-size:clamp(10px, 2.35cqw, 13.5px);transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s}
.karta:hover .karta-widok{transform:translateY(-6px);transition-duration:.25s}

/* mały widok programu w karcie */
.mk{display:grid;grid-template-columns:3.3em minmax(0,1fr);height:100%;background:#F6F5F2;color:var(--grafit);
  border:1px solid rgba(21,23,26,.22);border-right:0;border-bottom:0;border-radius:.9em 0 0 0;overflow:hidden;
  box-shadow:0 -.6em 3em rgba(10,24,19,.35);line-height:1.35;font-variant-numeric:tabular-nums lining-nums}
.mk *{min-width:0}
.mk svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.mk-szyna{display:flex;flex-direction:column;align-items:center;gap:.3em;padding:.9em 0;background:var(--kamien);border-right:1px solid var(--linia)}
.mk-prawa{display:flex;flex-direction:column;min-height:0}
.mk-glowa{display:flex;align-items:center;gap:.7em;height:3.6em;flex:none;padding:0 1.1em;background:#fff;border-bottom:1px solid var(--linia);white-space:nowrap;overflow:hidden}
.mk-tresc{display:flex;gap:.9em;padding:.9em;min-height:0;flex:1}
.mk-p{background:#fff;border:1px solid var(--linia);border-radius:.85em;padding:.9em 1em;min-height:0;overflow:hidden}
.mk-et{font-size:.68em;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--popiel)}
/* karta „Projekt aktu”: kroki odhaczają się po kolei, obok składa się projekt */
.mk-kroki{width:17em;flex:none;display:flex;flex-direction:column;gap:.15em}
.mk-kroki .mk-et{margin:.2em 0 .4em .3em}
.mk-krok{display:flex;align-items:center;gap:.65em;padding:.45em .4em;border-radius:.6em;font-size:.9em}
.mk-krok .o-st svg{width:.95em;height:.95em;stroke-width:2.4}
.mk-krok + .mk-et{margin-top:.7em}
.mk-kroki .o-btn{margin-top:.9em;justify-content:center}
.mk-akt{flex:1;padding:1.4em 1.6em}
.mk-akt h4{font-family:var(--serif);font-weight:400;font-size:1.15em;letter-spacing:.14em;text-align:center}
.mk-akt .mk-par{font-family:var(--serif);font-size:.95em;margin:1.1em 0 .5em}
.mk-akt i{display:block;height:.55em;border-radius:.3em;background:var(--linia);margin:.55em 0;transform-origin:left}
/* karta „Biuro”: dzień w wierszach */
.mk-dzien{flex:1;padding:.4em 1.1em}
.mk-wiersz{display:grid;grid-template-columns:3.6em minmax(0,1fr) auto;align-items:center;gap:.9em;padding:.85em 0;border-top:1px solid var(--linia);font-size:.92em}
.mk-wiersz:first-child{border-top:0}
.mk-wiersz .mono{font-family:var(--mono);color:var(--popiel)}
.mk-wiersz b{font-weight:600}
/* karta „Inskryptor AI”: pole pytania, w którym pisze się pytanie */
.mk-ai{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:2em 2.2em}
.mk-ai .mk-pyt{font-family:var(--serif);font-size:1.5em;letter-spacing:-.01em}
.mk-pole{width:30em;margin-top:1em;display:flex;align-items:center;gap:.8em;min-height:3.6em;padding:.7em .7em .7em 1.1em;
  background:#fff;border:1px solid var(--linia-ciemna);border-radius:1em;box-shadow:0 .4em 1.4em rgba(21,23,26,.07);font-size:.95em}
.mk-pole [data-pisz]{flex:1;white-space:nowrap;overflow:hidden}
.mk-pole .o-wyslij{background:var(--linia-ciemna);transition:background .3s}
.karta.widac .mk-pole [data-pisz].napisane ~ .o-wyslij, .karta:not(.czeka) .mk-pole .o-wyslij{background:var(--grafit)}
.mk-narz{display:flex;gap:.5em;margin-top:.9em;font-size:.8em}
.mk-narz span{border:1px solid var(--linia-ciemna);border-radius:99em;padding:.35em .85em;background:#fff;white-space:nowrap}
/* karta „Dla praktyków”: przegląd dokumentu */
.mk-przeglad{flex:1;padding:.4em 1.1em}
.mk-ryz{font-size:.78em;font-weight:500;border-radius:99em;padding:.25em .8em;white-space:nowrap}
.mk-ryz.z{color:var(--zielen);background:var(--zielen-jasna)}
.mk-ryz.b{color:var(--bursztyn);background:var(--bursztyn-tlo)}
.mk-ryz.c{color:#8A2E22;background:#F6E4E0}
/* karta „Dla studentów”: przesłanki, pułapka i fiszka */
.mk-nauka{width:21em;flex:none}
.mk-nauka ol{list-style:none;counter-reset:p;margin-top:.6em}
.mk-nauka li{counter-increment:p;display:grid;grid-template-columns:1.7em minmax(0,1fr);gap:.5em;padding:.45em 0;font-size:.9em}
.mk-nauka li::before{content:counter(p);width:1.7em;height:1.7em;border-radius:50%;background:var(--zielen-jasna);color:var(--zielen);font-weight:600;font-size:.85em;display:grid;place-items:center}
.mk-art{font-family:var(--mono);font-size:.82em;color:var(--zielen)}
.mk-pulapka{margin-top:.8em;padding:.7em .8em;border-radius:.6em;background:var(--bursztyn-tlo);font-size:.85em}
.mk-pulapka b{color:var(--bursztyn)}
.mk-fiszka{flex:1;perspective:60em}
.mk-fiszka-in{position:relative;height:13em;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.mk-strona{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.6em;padding:1.2em 1.4em;
  background:#fff;border:1px solid var(--linia);border-radius:.85em;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mk-strona.tyl{transform:rotateY(180deg)}
.mk-strona p{font-family:var(--serif);font-size:1.25em;line-height:1.25}
.mk-fiszka-in{transform:rotateY(180deg)}

/* wejście w kadr: tylko gdy działa skrypt (klasa .czeka); bez skryptu i przy ograniczonym ruchu stan końcowy */
.karta.czeka .karta-widok{opacity:0;transform:translateY(18px)}
.karta.czeka.widac .karta-widok{opacity:1;transform:none}
.karta.czeka.widac:hover .karta-widok{transform:translateY(-6px)}
.karta.czeka [data-r]{transition:opacity .45s, transform .45s, background-color .35s, border-color .35s;transition-delay:calc(.12s + var(--r) * 90ms)}
.karta.czeka:not(.widac) .mk-krok[data-r] .o-st{background:#fff;border-color:var(--linia-ciemna)}
.karta.czeka .mk-krok[data-r] .o-st svg{transition:opacity .3s;transition-delay:calc(.12s + var(--r) * 90ms)}
.karta.czeka:not(.widac) .mk-krok[data-r] .o-st svg{opacity:0}
.karta.czeka:not(.widac) .mk-akt i[data-r]{transform:scaleX(0)}
.karta.czeka:not(.widac) .mk-wiersz[data-r], .karta.czeka:not(.widac) .mk-nauka [data-r], .karta.czeka:not(.widac) .mk-przeglad [data-r]{opacity:0;transform:translateY(.6em)}
.karta.czeka:not(.widac) .mk-fiszka-in{transform:none}
.karta.czeka .mk-fiszka-in{transition-delay:2.4s}

/* ---------- pokaz rozmowy z Inskryptorem AI (strona Inskryptora AI) ---------- */
.scena-rozmowa{margin-inline:max(var(--bok), calc((100% - 1280px) / 2));padding:clamp(28px, 4.4%, 72px) clamp(12px, 3.4%, 56px)}
/* okno rozmowy ok. 58 %, obok panel „Podstawa” ok. 42 %: przy każdym odnośniku wysuwa się karta z brzmieniem przepisu */
.rz-uklad{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(16px, 2vw, 28px);
  align-items:start;max-width:1120px;margin:0 auto;text-align:left}
.rozmowa{background:#fff;border:1px solid rgba(21,23,26,.2);border-radius:16px;
  box-shadow:0 30px 70px -20px rgba(10,24,19,.45);color:var(--grafit)}
.rz-glowa{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--linia);font-size:14px}
.rz-glowa img{height:18px;width:auto}
.rz-glowa .o-pill{font-size:13px}
.rz-glowa .o-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.rz-glowa{flex-wrap:wrap}
.rz-data{margin-left:auto;font-style:italic;color:var(--popiel);white-space:nowrap}
.rz-watek{padding:24px clamp(18px, 3vw, 32px) 8px}
.rz-pyt{margin-left:auto;width:fit-content;max-width:85%;padding:12px 16px;border-radius:14px 14px 4px 14px;background:var(--kamien);font-size:16px;
  transition:opacity .3s, transform .3s}
.rz-odp{position:relative;margin-top:20px;font-size:16px;line-height:1.6}
.rz-odp > *{transition:opacity .45s, transform .45s}
.rz-odp h3{font:600 14px/1.3 var(--sans);letter-spacing:.02em;margin:18px 0 6px}
.rz-odp h3:first-of-type{margin-top:0}
.rz-odp ul{padding-left:20px}
.rz-odp li + li{margin-top:6px}
.rz-art{display:inline-block;margin:0 2px;padding:1px 7px;border-radius:6px;background:var(--zielen-jasna);color:var(--zielen);
  font:500 13px/1.6 var(--mono);white-space:nowrap;text-decoration:none;border:0;cursor:pointer;transition:background-color .3s, color .3s, box-shadow .3s}
.rz-art sup{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:var(--zielen);color:#fff;
  font:600 12px/1 var(--sans);vertical-align:1px}
.rz-art:hover, .rz-art.akt{background:var(--zielen);color:#fff}
.rz-art:hover sup, .rz-art.akt sup{background:#fff;color:var(--zielen)}
.rz-art:focus-visible{outline:2px solid var(--zielen);outline-offset:2px}
.rz-mysli{position:absolute;left:0;top:2px;display:flex;align-items:center;gap:6px;font-size:14px;color:var(--popiel);opacity:0;transition:opacity .25s}
.rz-mysli i{width:6px;height:6px;border-radius:50%;background:var(--zielen);animation:rz-kropka 1s ease-in-out infinite}
.rz-mysli i:nth-child(2){animation-delay:.15s}
.rz-mysli i:nth-child(3){animation-delay:.3s;margin-right:6px}
@keyframes rz-kropka{0%, 100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.rz-pole{display:flex;align-items:center;gap:10px;margin:16px clamp(12px, 2vw, 20px) clamp(12px, 2vw, 20px);min-height:56px;padding:8px 8px 8px 18px;
  border:1px solid var(--linia-ciemna);border-radius:14px;font-size:16px}
.rz-pisze{white-space:nowrap;overflow:hidden}
.rz-zach{display:none;color:var(--popiel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-pisze:empty + .rz-kursor + .rz-zach{display:inline}
.rz-kursor{display:none;width:1.5px;height:20px;background:var(--grafit);margin-left:-8px;animation:rz-kursor 1s steps(1) infinite}
@keyframes rz-kursor{50%{opacity:0}}
.rz-pole .o-wyslij{margin-left:auto;width:38px;height:38px;flex:none;transition:transform .15s, background .2s}
.rz-pole .o-wyslij svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rz-ster{position:absolute;z-index:2;right:clamp(12px, 2vw, 24px);bottom:clamp(12px, 2vw, 24px);height:36px;padding:0 16px;border:0;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--grafit);font:500 14px/1 var(--sans);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.rz-ster:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* odgrywanie: skrypt dodaje .gra i stan; bez skryptu widać całą rozmowę */
[data-rozmowa].gra .rz-pyt{opacity:0;transform:translateY(8px)}
[data-rozmowa].gra[data-stan="mysli"] .rz-pyt, [data-rozmowa].gra[data-stan="odpowiada"] .rz-pyt, [data-rozmowa].gra[data-stan="koniec"] .rz-pyt{opacity:1;transform:none}
[data-rozmowa].gra .rz-odp [data-krok]:not(.jest){opacity:0;transform:translateY(8px)}
[data-rozmowa].gra[data-stan="mysli"] .rz-mysli{opacity:1}
[data-rozmowa].gra[data-stan="pisze"] .rz-kursor{display:inline-block}
[data-rozmowa].gra[data-stan="wyslane"] .o-wyslij{transform:scale(.88);background:var(--zielen)}

/* panel „Podstawa”: dosłowne brzmienie przepisu; najnowsza karta rozwinięta, starsze zwinięte do numeru (klik rozwija) */
.podstawa{display:flex;flex-direction:column;gap:10px}
.pd-et{display:flex;align-items:baseline;gap:10px;margin:2px 0 4px;color:#fff;font:500 14px/1.4 var(--sans);letter-spacing:.02em;
  text-shadow:0 1px 8px rgba(0,0,0,.35)}
.pd-et span{font-weight:400;color:rgba(255,255,255,.82)}
.pd-karta{display:grid;grid-template-rows:auto 1fr;background:rgba(255,255,255,.97);border:1px solid rgba(21,23,26,.14);border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(10,24,19,.55);cursor:pointer;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1), opacity .4s, transform .5s cubic-bezier(.2,1,.2,1), box-shadow .3s}
.pd-nr{display:flex;align-items:center;gap:10px;padding:12px 16px;font:500 14px/1.3 var(--mono);color:var(--grafit)}
.pd-nr span{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--zielen-jasna);color:var(--zielen);
  font:600 12px/1 var(--sans);transition:background-color .3s, color .3s}
.pd-tekst{min-height:0;overflow:hidden;padding:0 16px;font:400 15px/1.6 var(--serif);color:var(--grafit)}
.pd-tekst::after{content:"";display:block;height:14px}
.pd-tekst mark{color:inherit;background:linear-gradient(var(--zielen-jasna), var(--zielen-jasna)) no-repeat 0 0 / 100% 100%;
  box-shadow:0 2px 0 var(--zielen);transition:background-size .6s ease-in-out .25s}
.pd-karta.akt .pd-nr span{background:var(--zielen);color:#fff}
.js .pd-karta:not(.akt){grid-template-rows:auto 0fr}
.js .pd-karta:not(.akt) mark{background-size:0 100%}
.pd-karta:focus-visible{outline:2px solid #fff;outline-offset:3px}
[data-rozmowa].gra .pd-karta:not(.jest){opacity:0;transform:translateX(24px)}
#start.ai-start{padding-bottom:var(--sek)}
.ai-start .ai-znak{padding-top:clamp(24px, 2.2vw, 36px);gap:16px}
.ai-start h1{font-size:clamp(46px, 5.6vw, 80px);max-width:none}
.ai-start .ai-znak .lead{max-width:780px;text-wrap:balance}
.ai-start .hero-akcja{margin-top:6px}
#dla-kogo{padding-bottom:var(--sek)}
#dla-kogo .nad{max-width:900px}
#dla-kogo .nad .lead{margin-left:auto;margin-right:auto;max-width:700px}
.ai-dalej{margin-top:28px}

@media (max-width:1100px){
  .karty{grid-template-columns:minmax(0,1fr)}
  .karty.dwie{grid-template-columns:minmax(0,1fr)}
  .karta{min-height:0}
  .karta-scena{min-height:clamp(260px, 52vw, 400px)}
}
/* karta kancelarii: nad widokiem aktu wysepka „Biuro / Dziś” - notariusz i sekretariat w jednym programie */
.karta-wyspa{position:absolute;right:clamp(14px, 5%, 44px);top:46%;width:27em;font-size:clamp(10px, 2.35cqw, 13.5px);
  background:#fff;color:var(--grafit);border:1px solid rgba(21,23,26,.16);border-radius:.9em;padding:.2em 1.1em .5em;
  box-shadow:0 1.6em 3.4em -1em rgba(10,24,19,.55);line-height:1.35;transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s}
.mk-wyspa-glowa{display:flex;align-items:center;gap:.6em;height:3.2em;border-bottom:1px solid var(--linia);white-space:nowrap}
.mk-wyspa-glowa b{font-family:var(--serif);font-weight:400;font-size:1.15em}
.mk-wyspa-glowa .o-pill{margin-left:auto}
.karta-wyspa .mk-wiersz:first-of-type{border-top:0}
.karta:hover .karta-wyspa{transform:translateY(-10px);transition-duration:.25s}
.karta.czeka:not(.widac) .karta-wyspa{opacity:0;transform:translateY(24px)}
.karta.czeka .karta-wyspa{transition-delay:.5s}
.karta.czeka.widac:hover .karta-wyspa{transition-delay:0s}
@container (max-width:560px){.karta-wyspa{display:none}}
/* narrow card: the crop must not cut a word in half - the window title ends with an ellipsis, the sheet shows paragraphs only */
@container (max-width:560px){
  .karta-widok .mk-glowa:has(+ .mk-tresc .mk-kroki) :is(.o-okr, .o-pill){display:none}
  .karta-widok .mk-glowa .o-tytul{max-width:calc(92cqw - 5.4em - 12px);overflow:hidden;text-overflow:ellipsis}
  .karta-widok .mk-akt h4, .karta-widok .mk-akt h4 + i{display:none}
  .karta-widok .mk-akt .mk-par:first-of-type{margin-top:0}
}
@media (max-width:1100px){
  .rz-uklad{grid-template-columns:minmax(0,1fr);max-width:760px}
  [data-rozmowa].gra .pd-karta:not(.jest){transform:translateY(16px)}
}
@media (prefers-reduced-motion: reduce){
  .rz-mysli i, .rz-kursor{animation:none}
  .pd-karta, .pd-tekst mark{transition:none}
}
/* telefon: pole pytania nad wątkiem, żeby pisanie było w kadrze; rozmowa jest wyższa niż ekran */
@media (max-width:640px){
  .rozmowa{display:flex;flex-direction:column}
  .rz-pole{order:-1;margin:12px 12px 0}
  .rz-data{flex-basis:100%;margin-left:0;font-size:13px}
  .rz-watek{padding-top:18px}
}

/* ---------- nagłówek: jedna nawigacja, dwa programy z menu podstron ---------- */
/* Wzór: legora.com/product (program = pozycja w belce, podstrony w jednej kolumnie z opisem), menu na kliknięcie,
   bo najechanie zawodzi na tablecie. Węziej szuflada z programami jak akordeon, bieżący program otwarty. */
:root{--gora:64px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gora{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:var(--gora);padding:0 max(var(--pad), calc((100% - 1280px) / 2));
  background:var(--plotno);border-bottom:1px solid var(--linia)}
.gora .znak img{height:22px}
.gora .znak:focus-visible{outline:2px solid var(--zielen);outline-offset:4px;border-radius:4px}
.menu{display:flex;align-items:center;gap:2px;margin-left:clamp(20px, 3vw, 48px)}
.menu-p{position:relative}
.menu-b{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;border-radius:999px;background:none;
  color:var(--popiel);font:400 15px/1 var(--sans);cursor:pointer;transition:color .2s, background-color .2s}
.menu-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.menu-b:hover, .menu-p.otwarte .menu-b{color:var(--grafit);background:var(--kamien)}
.menu-p.otwarte .menu-b svg{transform:rotate(180deg)}
.menu-p[data-biezacy] .menu-b{color:var(--grafit);font-weight:500}
.menu-b:focus-visible{outline:2px solid var(--zielen);outline-offset:2px}
.menu-l{display:none;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:999px;color:var(--popiel);font:400 15px/1 var(--sans);
  text-decoration:none;white-space:nowrap;transition:color .2s, background-color .2s}
.menu-l svg, .menu-ik svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.menu-l svg{width:18px;height:18px;flex:none;color:var(--zielen)}
.menu-l:hover, .menu-l[aria-current="page"]{color:var(--grafit);background:var(--kamien)}
.menu-l[aria-current="page"]{font-weight:500}
.menu-l:focus-visible{outline:2px solid var(--zielen);outline-offset:2px}
.menu-sep{display:none;width:1px;height:20px;margin:0 8px;background:var(--linia-ciemna)}
.menu-panel{position:absolute;left:0;top:calc(100% + 12px);width:min(640px, 92vw);padding:8px;background:#fff;border:1px solid var(--linia);
  border-radius:14px;box-shadow:0 24px 60px -18px rgba(21,23,26,.28);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);
  transform-origin:top left;transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility 0s .22s}
.menu-p.otwarte .menu-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu-dla{padding:10px 14px 6px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--popiel)}
.menu-panel ul{list-style:none;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:2px}
#menu-ai{width:min(580px, 92vw)}
.menu-panel a{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;row-gap:3px;align-content:start;height:100%;padding:10px 12px;border-radius:10px;text-decoration:none;transition:background-color .15s}
.menu-ik{grid-row:1 / span 2;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--kamien);color:var(--zielen);transition:background-color .15s, color .15s}
.menu-ik svg{width:20px;height:20px}
.menu-panel a:hover .menu-ik{background:var(--panel)}
.menu-panel a[aria-current="page"] .menu-ik{background:var(--zielen);color:#fff}
.menu-panel a b{font-weight:500;font-size:15px;color:var(--grafit)}
.menu-panel a span{font-size:13.5px;line-height:1.4;color:var(--popiel)}
.menu-panel a:hover{background:var(--kamien)}
.menu-panel a[aria-current="page"]{background:var(--zielen-jasna)}
.menu-panel a[aria-current="page"] b{color:var(--zielen)}
.menu-panel a:focus-visible{outline:2px solid var(--zielen);outline-offset:-2px}
.menu-akcja{display:none}
.gora-akcja{flex:none;height:42px;padding:0 20px;font-size:15px;margin-left:auto}
.menu-tel{display:none;align-items:center;gap:10px;height:40px;padding:0 14px 0 16px;margin-left:10px;border:1px solid var(--linia-ciemna);
  border-radius:999px;background:#fff;color:var(--grafit);font:500 15px/1 var(--sans);cursor:pointer}
.menu-tel i{position:relative;width:16px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .25s}
.gora.otwarty .menu-tel i{transform:scaleY(.4)}
.menu-tel:focus-visible{outline:2px solid var(--zielen);outline-offset:3px}
/* from 1200 px three pages of the first program stand in the bar itself; the last program's panel then opens leftwards */
@media (min-width:1200px){
  .menu-l{display:inline-flex}
  .menu-sep{display:block}
  .menu-p:last-of-type .menu-panel{left:auto;right:0;transform-origin:top right}
}
@media (max-width:1023.98px){
  .js .menu-tel{display:inline-flex}
  .js .gora-akcja{margin-left:auto}
  .js .menu{position:fixed;left:0;right:0;top:var(--gora);bottom:0;margin:0;display:block;padding:20px clamp(16px, 4.4vw, 40px) 32px;
    background:var(--plotno);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease, transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s .28s}
  .js .gora.otwarty .menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .js .menu-p{border-bottom:1px solid var(--linia)}
  .js .menu-b{width:100%;justify-content:space-between;height:68px;padding:0;border-radius:0;font:400 28px/1 var(--serif);color:var(--grafit)}
  .js .menu-b:hover, .js .menu-p.otwarte .menu-b{background:none}
  .js .menu-b svg{width:20px;height:20px}
  .js .menu-panel{position:static;width:auto;padding:0 0 14px;border:0;box-shadow:none;background:none;transform:none;opacity:1;visibility:visible;display:none}
  .js .menu-p.otwarte .menu-panel{display:block}
  .js .menu-panel ul, .js #menu-ai ul{grid-template-columns:minmax(0,1fr)}
  .js #menu-ai{width:auto}
  .js .menu-panel a{padding:10px 0}
  .js .menu-panel a:hover, .js .menu-panel a[aria-current="page"]{background:none}
  .js .menu-panel a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--zielen);padding-left:14px;border-radius:0}
  .js .menu-dla{padding:0 0 6px}
  .js .menu-akcja{display:flex;width:100%;height:52px;margin-top:28px}
  html:not(.js) .menu-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none}
}
@media (max-width:640px){
  .js .gora-akcja{display:none}
  .js .menu-tel{margin-left:auto}
}
main section{scroll-margin-top:var(--gora)}
main section:focus{outline:none}

/* okruszek i nagłówek podstrony: gdzie jestem, jedną linią nad tytułem (nie druga nawigacja) */
.okruszek{display:flex;justify-content:center;align-items:center;gap:10px;font-size:14px;color:var(--popiel)}
.okruszek a{text-decoration:none;color:var(--zielen);font-weight:500}
.okruszek a:hover{text-decoration:underline;text-underline-offset:4px}
.okruszek span[aria-hidden]{color:var(--linia-ciemna)}
.okruszek-wrap{padding-top:clamp(28px, 3vw, 48px)}
.glowa-strony{padding:clamp(40px, 5vw, 88px) 0 clamp(56px, 6vw, 96px);text-align:center}
.glowa-strony h1{margin:18px auto 0;max-width:20ch;font-size:clamp(44px, 5.6vw, 84px)}
.glowa-strony .lead{max-width:760px;margin:22px auto 0}
.glowa-akcja{display:none;margin-top:28px}
@media (max-width:640px){.glowa-akcja{display:flex}}
.okruszek-wrap + section{padding-top:clamp(40px, 5vw, 80px)}
.glowa-strony + section{padding-top:0}

/* wezwanie na końcu podstrony */
.wezwanie{padding:var(--sek) 0;text-align:center;border-top:1px solid var(--linia)}
.wezwanie-in h2{max-width:16ch;margin:0 auto}
.wezwanie-in .lead{max-width:640px;margin:20px auto 0}
.wezwanie-in .btn{margin-top:32px}

/* przejścia między podstronami (View Transitions między dokumentami): nagłówek stoi, treść przechodzi miękko */
@view-transition{navigation:auto}
.gora{view-transition-name:gora}
@keyframes vt-wyjscie{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-wejscie{from{opacity:0;transform:translateY(10px)}}
::view-transition-old(root){animation:vt-wyjscie .2s ease both}
::view-transition-new(root){animation:vt-wejscie .42s cubic-bezier(.2,.7,.2,1) .06s both}
/* przejście z paska „Dalej / Wcześniej”: następna podstrona wchodzi z prawej, poprzednia z lewej */
@keyframes vt-w-lewo{to{opacity:0;transform:translateX(-40px)}}
@keyframes vt-z-prawej{from{opacity:0;transform:translateX(40px)}}
@keyframes vt-w-prawo{to{opacity:0;transform:translateX(40px)}}
@keyframes vt-z-lewej{from{opacity:0;transform:translateX(-40px)}}
html.kier-dalej::view-transition-old(root){animation:vt-w-lewo .22s ease both}
html.kier-dalej::view-transition-new(root){animation:vt-z-prawej .42s cubic-bezier(.2,.7,.2,1) .06s both}
html.kier-wstecz::view-transition-old(root){animation:vt-w-prawo .22s ease both}
html.kier-wstecz::view-transition-new(root){animation:vt-z-lewej .42s cubic-bezier(.2,.7,.2,1) .06s both}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root),
  html[class*="kier-"]::view-transition-old(root), html[class*="kier-"]::view-transition-new(root){animation:none}
}

/* ---------- ruch ---------- */
@keyframes wejscie{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wiersz{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .js *, .js *::before, .js *::after{animation:none !important;transition:none !important}
}

/* ---------- węższe ekrany ---------- */
@media (max-width:1388px){
  .spec{grid-template-columns:repeat(3, minmax(0,1fr));row-gap:56px}
}
@media (max-width:1020px){
  .dane-tekst, .pokaz-tekst, .formularz{grid-column:1 / -1}
  .cnw-tekst, .cnw-cytat, .plansza-baza, .baza-tekst, .sc-tekst, .sc-progi{grid-column:1 / -1}
  .cnw-cytat{margin-top:40px;border-left:0;padding-left:0}
  .plansza-baza{aspect-ratio:3 / 2;margin-bottom:48px}
  .sc-progi{margin-top:48px}
  .szczegol-rzad > *, .szczegol-rzad > .sz, .szczegol-rzad.lewo > .sz, .szczegol-rzad.lewo > .szczegol-podpis, .szczegol-rzad.srodek > .sz, .szczegol-rzad.srodek > .szczegol-podpis{grid-column:1 / -1;grid-row:auto}
  .szczegol-rzad > .sz{width:100%;max-width:640px}
  .plansza-dane{grid-column:1 / -1;margin-top:48px;aspect-ratio:3 / 2}
  .formularz{margin-top:48px;max-width:560px}
}
@media (max-width:820px){
  .tylko-maly{display:grid}
  .spec{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:640px){
  .gora .znak img{height:18px}
  .hero-tekst{padding-top:40px}
  .hero-akcja .btn{flex:1 1 100%;max-width:360px}
  .scena{--bok:0px;--obw:28px;--widok:calc(100vw - 28px);border-radius:0;margin-top:32px}
  .scena-hero{margin-top:48px}
  .zakl-linia{font-size:20px}
  .zakl-linia span + span::before{margin:0 10px}
  .sz-t{font-size:22px}
  .sz-gora{padding:16px 18px 12px}
  .sz-dzw, .sz-kv, .sz-zgoda, .sz-kal{padding-left:18px;padding-right:18px}
  .sz-dzw{grid-template-columns:22px minmax(0,1fr)}
  .sz-dzw .uz{grid-column:2;text-align:left}
  .sz-licznik{padding:20px 18px 6px}
  .sz-brak{margin:12px 18px}
  .sz-dol{padding:6px 18px 20px}
  .sz-przepis{padding:22px 18px}
  .sz-zdanie{font-size:19px}
  .rejestr div{grid-template-columns:minmax(0,1fr);gap:4px}
  .plansza-dane{aspect-ratio:4 / 3}
  .ai-znak img{height:28px}
  .cnw-cytat li, .cnw-pewnosc p:last-child{font-size:18px}
  .plansza-baza{aspect-ratio:4 / 3}
  .liczby li{grid-template-columns:minmax(0,1fr);gap:6px}
  .nw{white-space:normal}
  .progi-t div{grid-template-columns:minmax(0,1fr)}
  .progi-t dt, .progi-t .w, .progi-t .p{grid-column:1;grid-row:auto}
  .progi-t .w{text-align:left;margin-top:6px}
  .spec{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .spec .stan:empty{display:none}
  .spec .duza{margin-top:20px}
  .nadchodzi{grid-template-columns:minmax(0,1fr);gap:6px}
  .nadchodzi span{grid-column:auto}
}

/* ---------- podstrona: kroki z przyklejonym oknem programu (wzór: attio.com, linear.app) ---------- */
/* Bez skryptu i węziej niż 1100 px widok stoi pod tekstem kroku na fakturze. Ze skryptem na szerokim ekranie widoki
   przenosi się do przyklejonej sceny po prawej; aktywny krok wybiera środek okna przeglądarki. */
.op{padding-bottom:var(--sek)}
.op-uklad{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px, 4vw, 72px);align-items:start}
.op-krok{padding:clamp(32px, 3.4vw, 48px) 0;border-top:1px solid var(--linia)}
.op-krok:first-child{border-top:0;padding-top:0}
.op-nr{font-size:13px;color:var(--zielen);letter-spacing:.02em}
.op-h{font-size:clamp(28px, 2.5vw, 38px);line-height:1.12;letter-spacing:-.015em;margin:12px 0 14px;max-width:24ch}
.op-krok .tekst{font-size:17px;line-height:1.6;max-width:56ch}
.op-przyklad{margin-top:16px;padding-left:16px;border-left:2px solid var(--zielen);font:400 17px/1.55 var(--serif);color:var(--grafit);max-width:56ch}
.op-widok{margin-top:28px;padding:clamp(16px, 4vw, 40px);border-radius:12px;background:var(--zielen) url(grafika/faktura-karta-praktycy-800.webp) center / cover}
.op-scena{display:none}
.op.przyklejone .op-uklad{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.op.przyklejone .op-krok{min-height:min(76vh, 700px);display:flex;flex-direction:column;justify-content:center;opacity:.68;transition:opacity .45s}
.op.przyklejone .op-krok.akt{opacity:1}
.op.przyklejone .op-krok:first-child{padding-top:clamp(32px, 3.4vw, 48px)}
.op.przyklejone .op-scena{display:block;position:sticky;top:calc(var(--gora) + 24px);height:min(calc(100vh - var(--gora) - 48px), 760px);
  border-radius:12px;overflow:hidden;background:var(--zielen)}
.op-ramka{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:clamp(24px, 3vw, 48px)}
.op-ramka .op-widok{grid-area:1 / 1;width:100%;max-width:580px;margin:0;padding:0;background:none;opacity:0;transform:translateY(18px) scale(.98);
  transition:opacity .2s, transform .4s cubic-bezier(.23,1,.32,1)}
.op-ramka .op-widok.akt{opacity:1;transform:none;transition:opacity .45s .2s, transform .7s .2s cubic-bezier(.23,1,.32,1)}
.op-postep{position:absolute;z-index:1;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:6px;list-style:none;margin:0;padding:8px 12px;
  border-radius:99px;background:rgba(21,23,26,.42)}
.op-postep li{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);transition:background-color .3s, width .3s}
.op-postep li.akt{width:36px;background:#fff}

/* małe okno programu w krokach podstron */
.pv{background:#fff;border:1px solid rgba(21,23,26,.16);border-radius:14px;box-shadow:0 30px 60px -24px rgba(10,24,19,.6);color:var(--grafit);
  font-size:14px;line-height:1.5;text-align:left;overflow:hidden}
.pv-glowa{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linia);white-space:nowrap}
.pv-glowa img{height:14px;width:auto;flex:none}
.pv-glowa .o-pill{font-size:12px}
.pv-t{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--popiel);font-size:13px}
.pv-tresc{padding:16px 18px 18px}
.pv-et{font:600 12px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--popiel);margin:16px 0 6px}
.pv-tresc > .pv-et:first-child{margin-top:0}
.pv-zd{font-size:15px}
.pv-art{display:inline-block;padding:0 6px;border-radius:5px;background:var(--zielen-jasna);color:var(--zielen);font:500 12px/1.75 var(--mono);white-space:nowrap}
.pv-art.akt{background:var(--zielen);color:#fff}
.pv mark{color:inherit;background:var(--zielen-jasna);box-shadow:0 2px 0 var(--zielen)}
.pv-dymek{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--kamien);font:400 15px/1.55 var(--serif)}
.pv-dymek-nr{font-size:12px;color:var(--zielen);margin-bottom:4px}
.pv b{font-weight:600}
.pv-akt{list-style:none;margin:0;padding:0}
.pv-akt li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 0;border-top:1px solid var(--linia);color:var(--popiel)}
.pv-akt li:first-child{border-top:0;padding-top:4px}
.pv-akt b, .pv-w b{display:block;color:var(--grafit)}
.pv-ok{width:20px;height:20px;fill:none;stroke:var(--zielen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0}
.pv-kropka{width:10px;height:10px;margin:5px;border-radius:50%;background:var(--bursztyn)}
.pv-brak b{color:var(--bursztyn)}
.pv-w{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 0;border-top:1px solid var(--linia);color:var(--popiel)}
.pv-tabela .pv-w:first-child{border-top:0;padding-top:0}
.pv-w .mono{color:var(--grafit);font-size:13px}
.pv-wyr{margin:0 -18px;padding:12px 18px;background:#FBF7EF}
.pv-prop{grid-column:2 / -1;color:var(--grafit);font-size:13px}
.pv-akt .pv-art, .pv-w .pv-art, .kz-pod .pv-art{justify-self:start}
.pv-ryz{font-size:12px;font-weight:500;border-radius:99px;padding:2px 9px;white-space:nowrap}
.pv-ryz.z{color:var(--zielen);background:var(--zielen-jasna)}
.pv-ryz.b{color:var(--bursztyn);background:var(--bursztyn-tlo)}
.pv-ryz.c{color:#8A2E22;background:#F6E4E0}
.pv-ryz.s{color:var(--grafit);background:var(--kamien)}
.pv-kartka{font:400 15px/1.6 var(--serif)}
.pv-kartka p + p{margin-top:8px}
.pv-prawo{text-align:right}
.pv-tyt{text-align:center;font-weight:500;font-size:18px}
.pv-luka{padding:1px 6px;border-radius:5px;background:var(--bursztyn-tlo);color:var(--bursztyn);font:500 12px/1.6 var(--mono)}
.pv-kartka sup{font-size:12px;color:var(--zielen)}
.pv-przyp{margin-top:14px !important;padding-top:8px;border-top:1px solid var(--linia);font:400 12px/1.5 var(--sans);color:var(--popiel)}
.pv-dol{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px !important;font-family:var(--sans)}
.pv .o-btn{font-size:12px}
.pv-os{list-style:none;margin:2px 0 0 6px;padding:0;border-left:2px solid var(--linia-ciemna)}
.pv-os li{position:relative;padding:0 0 14px 18px}
.pv-os li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--linia-ciemna)}
.pv-os .pv-os-teraz::before{background:var(--zielen);border-color:var(--zielen)}
.pv-os span{display:block;font-size:12px;color:var(--popiel)}
.pv-filtry{display:flex;gap:8px;margin-bottom:6px}
.pv-orz{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--linia)}
.pv-stare{margin:0 -18px;padding:11px 18px;box-shadow:inset 3px 0 0 var(--bursztyn);background:#FBF7EF}
.pv-pliki{display:flex;flex-wrap:wrap;gap:8px}
.pv-rozm{list-style:none;margin:0;padding:0}
.pv-rozm li{padding:8px 0;border-top:1px solid var(--linia)}
.pv-rozm li:first-child{border-top:0;padding-top:0}
/* odsłanianie wierszy widoku po wejściu kroku (tylko w przyklejonej scenie) */
.op-ramka .pv-r{transition:opacity .4s, transform .6s cubic-bezier(.23,1,.32,1);transition-delay:calc(.2s + var(--r) * 120ms)}
.op-ramka .op-widok:not(.akt) .pv-r{opacity:0;transform:translateY(10px);transition-delay:0s}
.op-ramka .pv-ok{transition:stroke-dashoffset .5s ease-out;transition-delay:calc(.35s + var(--r) * 120ms)}
.op-ramka .op-widok:not(.akt) .pv-ok{stroke-dashoffset:24;transition-delay:0s}
.op-ramka .pv-art.akt{transition:background-color .4s .5s, color .4s .5s}
.op-ramka .op-widok:not(.akt) .pv-art.akt{background:var(--zielen-jasna);color:var(--zielen);transition-delay:0s}
@media (max-width:640px){
  .pv-glowa .pv-t{display:none}
  .pv-akt li{grid-template-columns:20px minmax(0,1fr)}
  .pv-akt .pv-art{grid-column:2}
}
@media (prefers-reduced-motion: reduce){
  .op-ramka .op-widok, .op-ramka .pv-r, .op-ramka .pv-ok, .op.przyklejone .op-krok{transition:none}
}

/* ---------- podstrona „W nauce”: zadanie na start, potem sposoby nauki z działającymi widokami (wzór: brilliant.org) ---------- */
.nk{padding-bottom:var(--sek)}
.nk-w{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px, 4.4vw, 80px);align-items:center;padding:clamp(48px, 6vw, 96px) 0;border-top:1px solid var(--linia)}
.nk-w:first-child{border-top:0;padding-top:0}
.nk-w:nth-child(odd):not(:first-child){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.nk-w:nth-child(odd):not(:first-child) .nk-tekst{order:2}
.nk-tekst .tekst{font-size:17px;line-height:1.6;max-width:52ch}
.nk-wskazowka{margin-top:14px;font-size:14px;color:var(--popiel)}
.nk-tlo{padding:clamp(20px, 3.6vw, 52px);border-radius:12px;background:var(--zielen) url(grafika/faktura-karta-studenci-800.webp) center / cover}
.nk-widok > *{max-width:580px;margin-inline:auto}
.nk-kazus{margin-bottom:6px;padding:8px 12px;border-radius:8px;background:var(--kamien)}
.nk-pulapka{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--bursztyn-tlo);font-size:14px}
.nk-pulapka b{color:var(--bursztyn)}

/* quiz: odpowiedź od razu z cytatem; wyjaśnienie wsuwa się przez grid-template-rows */
.qz{background:#fff;border-radius:14px;padding:20px 22px 22px;box-shadow:0 30px 60px -24px rgba(10,24,19,.6);color:var(--grafit);text-align:left}
.qz-glowa{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--popiel)}
.qz-pasek{height:4px;margin:10px 0 18px;border-radius:2px;background:var(--kamien);overflow:hidden}
.qz-pasek i{display:block;height:100%;width:100%;background:var(--zielen);transform:scaleX(.2);transform-origin:left;transition:transform .6s cubic-bezier(.2,1,.2,1)}
.qz.odp .qz-pasek i{transform:scaleX(.3)}
.qz-pyt{font:400 21px/1.35 var(--serif)}
.qz-odp{display:grid;gap:8px;margin-top:16px}
.qz-odp button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--linia-ciemna);border-radius:10px;background:#fff;
  color:var(--grafit);font:400 15px/1.4 var(--sans);text-align:left;cursor:pointer;transition:border-color .15s, background-color .25s, box-shadow .15s}
.qz-odp button .mono{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:7px;background:var(--kamien);font-size:13px;transition:background-color .25s, color .25s}
.qz-odp button:hover{border-color:var(--grafit)}
.qz-odp button:focus-visible{outline:2px solid var(--zielen);outline-offset:2px}
.qz.odp .qz-odp button{cursor:default}
.qz.odp .qz-odp button[data-dobra]{border-color:var(--zielen);background:var(--zielen-jasna)}
.qz.odp .qz-odp button[data-dobra] .mono{background:var(--zielen);color:#fff}
.qz.odp .qz-odp button.zle{border-color:#C9A39C;background:#F6E4E0}
.qz.odp .qz-odp button.zle .mono{background:#8A2E22;color:#fff}
.qz-wyj{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,1,.2,1)}
.qz-wyj > div{min-height:0;overflow:hidden}
.js .qz:not(.odp) .qz-wyj{grid-template-rows:0fr}
.qz-werdykt{margin-top:16px;font-weight:600}
.qz-cytat{margin-top:6px;font:400 15px/1.55 var(--serif)}
.qz-cytat mark, .fs mark{color:inherit;background:var(--zielen-jasna);box-shadow:0 2px 0 var(--zielen)}

/* fiszka: obraca się w 3D, oceny ustawiają następną powtórkę */
.fs{text-align:left}
.fs-karta{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;perspective:1400px;font:inherit;color:var(--grafit);text-align:left}
.fs-karta:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:14px}
.fs-in{display:grid;transition:transform .6s cubic-bezier(.3,.7,.4,1);transform-style:preserve-3d}
.fs-karta[aria-pressed="true"] .fs-in{transform:rotateY(180deg)}
.fs-strona{grid-area:1 / 1;display:flex;flex-direction:column;gap:12px;min-height:230px;padding:22px 24px;border-radius:14px;background:#fff;
  box-shadow:0 30px 60px -24px rgba(10,24,19,.6);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fs-tyl{transform:rotateY(180deg)}
.fs-tekst{font:400 22px/1.35 var(--serif)}
.fs-pod{margin-top:auto;font-size:13px;color:var(--popiel)}
.fs-tyl .pv-art{margin-top:auto;align-self:flex-start}
.fs-oceny{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:8px;margin-top:14px}
.fs-oceny button{padding:10px 6px;border:1px solid transparent;border-radius:10px;background:rgba(255,255,255,.94);color:var(--grafit);font:500 14px/1.2 var(--sans);
  cursor:pointer;transition:background-color .2s, color .2s}
.fs-oceny button:hover{background:#fff;border-color:var(--grafit)}
.fs-oceny button[aria-pressed="true"]{background:var(--zielen);color:#fff}
.fs-oceny button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fs-stan{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:6px 6px 6px 14px;border-radius:12px;
  background:rgba(255,255,255,.94);color:var(--grafit);font-size:14px}
.fs-stan .o-btn{font-size:13px;color:var(--grafit)}

/* kazus: kartki rozkładają się w wachlarz, podpowiedzi odkrywa się po kolei */
.kz{position:relative;text-align:left}
.kz-stos i{position:absolute;inset:0;border-radius:14px;background:#fff;opacity:.55;transition:transform .6s cubic-bezier(.2,1,.2,1)}
.kz-stos i:nth-child(2){opacity:.3}
.nk-widok.widac .kz-stos i:first-child{transform:rotate(-3deg) translate(-10px, 6px)}
.nk-widok.widac .kz-stos i:nth-child(2){transform:rotate(3.5deg) translate(12px, 10px);transition-delay:.06s}
.kz-karta{position:relative;padding:22px 24px;border-radius:14px;background:#fff;box-shadow:0 30px 60px -24px rgba(10,24,19,.6);color:var(--grafit)}
.kz-tekst{font:400 18px/1.5 var(--serif)}
.kz-pod{list-style:none;margin:14px 0 0;padding:0}
.kz-pod li > div{min-height:0;overflow:hidden}
.kz-pod li{display:grid;grid-template-rows:1fr;padding:10px 0 0;border-top:1px solid var(--linia);margin-top:10px;font-size:15px;
  transition:grid-template-rows .4s cubic-bezier(.2,1,.2,1), opacity .4s, margin .4s, padding .4s, border-color .4s}
.kz-pod li .pv-et{margin:0 0 2px}
.js .kz-pod li:not(.jest){grid-template-rows:0fr;opacity:0;margin:0;padding:0;border-color:transparent;overflow:hidden}
.kz-dalej{margin-top:16px;cursor:pointer;font-family:var(--sans);color:var(--grafit)}
.kz-dalej:focus-visible{outline:2px solid var(--zielen);outline-offset:2px}
.kz-dalej[hidden]{display:none}

/* tryb nauki */
.nk-tryb{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;font-weight:500;color:var(--zielen)}
.nk-tryb i{position:relative;width:30px;height:18px;border-radius:9px;background:var(--zielen)}
.nk-tryb i::after{content:"";position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.nk-czat{display:flex;flex-direction:column;gap:12px}
.nk-ja{align-self:flex-end;max-width:85%;padding:10px 14px;border-radius:14px 14px 4px 14px;background:var(--kamien);font-size:15px}
.nk-on{max-width:92%;font:400 16px/1.55 var(--serif)}
/* porównanie */
.nk-tab{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);font-size:14px}
.nk-tab > *{padding:10px 10px 10px 0;border-top:1px solid var(--linia)}
.nk-tab > b{border-top:0;padding-top:0;font-weight:600}
.nk-tab > span:nth-child(3n+1){color:var(--popiel);font-size:13px}
.nk-tab .pv-art{margin-top:4px}
/* odsłanianie wierszy po wejściu w kadr (skrypt dodaje .czeka, potem .widac) */
.nk-widok.czeka .nk-r{opacity:0;transform:translateY(10px)}
.nk-widok .nk-r{transition:opacity .35s, transform .45s cubic-bezier(.2,1,.2,1);transition-delay:calc(.08s + var(--r) * 90ms)}
.nk-widok.czeka.widac .nk-r{opacity:1;transform:none}

/* przed egzaminem: sześć kafli z małym ruchem */
.nk-egz{padding:var(--sek) 0;background:var(--kamien)}
.nk-siatka{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:20px;margin-top:clamp(40px, 4vw, 64px)}
.nk-kafel{padding:20px;border-radius:14px;background:#fff;border:1px solid var(--linia)}
.nk-kafel h3{margin-top:18px;font:500 20px/1.25 var(--serif)}
.nk-kafel > p{margin-top:8px;color:var(--popiel);font-size:15px;line-height:1.55}
.nk-kafel-w{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;height:132px;padding:18px;border-radius:10px;background:var(--plotno);border:1px solid var(--linia);overflow:hidden}
.nk-zegar{font-size:30px;color:var(--grafit)}
.nk-pasek{width:100%;height:4px;border-radius:2px;background:var(--linia)}
.nk-pasek i{display:block;width:1.4%;height:100%;border-radius:2px;background:var(--zielen)}
.nk-maly{font-size:12px;color:var(--popiel)}
.nk-zakryj p{font:400 16px/1.6 var(--serif)}
.nk-z{padding:0 4px;border:0;border-radius:4px;background:var(--grafit);color:transparent;font:inherit;cursor:pointer;transition:background-color .35s, color .35s}
.nk-z.odkryte, .nk-z:hover{background:var(--zielen-jasna);color:var(--zielen)}
.nk-z:focus-visible{outline:2px solid var(--zielen);outline-offset:2px}
.nk-tyg{display:flex;align-items:flex-end;gap:8px;height:64px}
.nk-tyg i{width:22px;height:calc(var(--h) * 100%);border-radius:4px 4px 0 0;background:var(--zielen-jasna);transform-origin:bottom;transition:transform .6s cubic-bezier(.2,1,.2,1)}
.nk-tyg i.t{background:var(--zielen)}
.nk-mapa{display:grid;grid-template-columns:repeat(6, 22px);gap:6px}
.nk-mapa i{height:22px;border-radius:5px;background:var(--zielen)}
.nk-mapa i.s{background:#8FB3A4}
.nk-mapa i.z{background:var(--bursztyn)}
.nk-kartka{display:flex;flex-direction:column;gap:7px;width:70%;padding:12px 14px;border-radius:6px;background:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.25)}
.nk-kartka i{height:5px;border-radius:3px;background:var(--linia-ciemna)}
.nk-kartka i:nth-child(2){width:80%}
.nk-kartka i.k{width:60%;background:var(--bursztyn)}
.nk-kafel.czeka .nk-tyg i{transform:scaleY(0)}
.nk-kafel.czeka.widac .nk-tyg i{transform:none}
.nk-kafel.czeka.widac .nk-tyg i:nth-child(n){transition-delay:calc(var(--h) * 300ms)}

@media (max-width:1100px){
  .nk-w, .nk-w:nth-child(odd):not(:first-child){grid-template-columns:minmax(0,1fr)}
  .nk-w:nth-child(odd):not(:first-child) .nk-tekst{order:0}
  .nk-siatka{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:640px){
  .nk-siatka{grid-template-columns:minmax(0,1fr)}
  .fs-oceny{grid-template-columns:repeat(2, minmax(0,1fr))}
  .nk-tab{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nk-tab > span:nth-child(3n+1){grid-column:1 / -1;padding-bottom:0}
  .nk-tab > span:first-child{display:none}
  .qz-pyt{font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  .fs-in, .qz-wyj, .kz-pod li, .kz-stos i, .nk-widok .nk-r, .nk-tyg i, .qz-pasek i{transition:none}
}

/* ---------- ruch całej witryny (wzory: stripe.com wejście nagłówka słowami, harvey.ai wjazd widoku od dołu, reflektor na polu) ---------- */
@keyframes wejscie{from{opacity:0;transform:translateY(16px)}}
@keyframes wjazd-nad{from{opacity:0;transform:translateY(28px)}}
@media (prefers-reduced-motion: no-preference){
  .glowa-strony .okruszek, .ai-znak > img{animation:wejscie .7s cubic-bezier(.23,1,.32,1) both}
  .hero-akcja{animation:wejscie .8s cubic-bezier(.23,1,.32,1) .8s both}
  /* pierwszy ekran: po słowach nagłówka faktura podnosi się od dołu, a na niej okno programu, wyraźnie później */
  .js .scena-hero{animation:wjazd-tlo 1s cubic-bezier(.23,1,.32,1) .5s both}
  .js .scena-hero .widok-rama{animation:wjazd-dol 1.2s cubic-bezier(.23,1,.32,1) .8s both}
}
@keyframes wjazd-tlo{from{opacity:0;transform:translateY(56px)}}
@keyframes wjazd-dol{from{opacity:0;transform:translateY(96px)}}

/* nagłówki (skrypt dzieli je na słowa, tylko przy ruchu): słowa wznoszą się co 70 ms, potem pod frazą .wyr rysuje się
   linia, akapit pod nagłówkiem dochodzi po ostatnim słowie. Czasy: odkrywca 11.11 (słowo ok. 0,5 s, całość do ok. 1,2 s). */
/* słowo zostaje w wierszu (nie inline-block), więc twarda spacja i przecinek po frazie nie łamią się osobno */
/* ruch tylko przy pokazywaniu: przejście w stan wyjściowy jest natychmiastowe, inaczej Chrome przerywa pokazanie,
   które przychodzi w trakcie chowania (akapit i linia stawały od razu w stanie końcowym) */
.wchodzi .sl{position:relative;top:.42em;opacity:0}
.wchodzi.widac .sl{opacity:1;top:0;transition:opacity .5s ease, top .65s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--w) * 70ms)}
/* zanim skrypt podzieli nagłówek na słowa, nagłówek i akapit pod nim nie migną w stanie końcowym */
@media (prefers-reduced-motion: no-preference){
  .js main :is(h1, h2):not(.vh):not(.op-h):not(.wchodzi), .js main :is(h1, h2):not(.vh):not(.op-h):not(.wchodzi) + .lead{visibility:hidden}
}
.wyr{font-style:italic;color:var(--zielen);
  background:linear-gradient(rgba(31,77,61,.4), rgba(31,77,61,.4)) left 99% / 100% .05em no-repeat}
.wchodzi .wyr{background-size:0% .05em}
.wchodzi.widac .wyr{background-size:100% .05em;transition:background-size .7s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--slow) * 70ms + .15s)}
.po-naglowku{opacity:0;transform:translateY(14px)}
.po-naglowku.widac{opacity:1;transform:none;transition:opacity .6s ease, transform .8s cubic-bezier(.23,1,.32,1);
  transition-delay:calc(var(--slow) * 70ms + .1s)}
/* blok pod nagłówkiem (karty, okno programu) wjeżdża od dołu; karty jedna po drugiej */
.wjazd:not(.karty), .wjazd.karty > *{opacity:0;transform:translateY(72px)}
.wjazd.widac:not(.karty), .wjazd.karty.widac > *{opacity:1;transform:none;transition:opacity .7s ease, transform 1.1s cubic-bezier(.23,1,.32,1);transition-delay:.2s}
.wjazd.karty.widac > :nth-child(2){transition-delay:.36s}
.wjazd.karty.widac > :nth-child(3){transition-delay:.52s}
/* reflektor: po wejściu widoku w kadr reszta okna przygasa, a pole, o którym mówi tekst, zostaje jasne z zieloną obwódką */
.okno{position:relative}
.reflektor{position:absolute;z-index:5;pointer-events:none;border-radius:.6em;opacity:0;
  box-shadow:0 0 0 .22em var(--zielen), 0 0 0 300em rgba(21,23,26,.34);transition:opacity .5s ease}
.reflektor.swieci{opacity:1}

/* formularze: etykieta zielenieje przy pisaniu, wypełnione poprawnie pole dostaje znaczek, który się rysuje (wzór: Contra, Awwwards) */
.formularz label{transition:color .2s}
.formularz label:focus-within{color:var(--zielen)}
.formularz input{transition:box-shadow .2s, border-color .2s, background-position .3s;background-repeat:no-repeat;background-position:right 16px center;background-size:0 0}
.formularz input:focus{box-shadow:0 6px 18px -8px rgba(31,77,61,.45)}
.formularz input:not(:placeholder-shown):valid{padding-right:44px;background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion: reduce){.formularz input{transition:none}}
/* formularz wysyła przez pocztę gościa (mailto na biuro@): zdanie o tym pod przyciskiem, po kliknięciu linia stanu */
.formularz .fm-mail{color:var(--grafit)}
.formularz .fm-mail a, .formularz .fm-stan a, .rejestr dd a{color:var(--zielen);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.formularz .fm-stan{padding:14px 16px;border-radius:12px;background:var(--zielen-jasna);color:var(--zielen)}

/* telefon: jedna oś czytania - wszystko od lewej, także nagłówki podstron i wezwania (krytyk 11.11: wyśrodkowane
   akapity po 5-6 wierszy z poszarpanym brzegiem); faktura obok „Dane w kancelarii” ma wysokość swojej karty */
@media (max-width:640px){
  .glowa-strony, .hero-tekst, .wezwanie, .ai-znak{text-align:left}
  .ai-znak{align-items:flex-start}
  .okruszek{justify-content:flex-start}
  .glowa-strony h1, .glowa-strony .lead, .hero-tekst .lead, .wezwanie-in h2, .wezwanie-in .lead{margin-left:0;margin-right:0}
  .hero-akcja{justify-content:flex-start}
  .plansza-dane{aspect-ratio:auto;padding:28px 0;margin-top:40px}
  .nadchodzi span{grid-column:auto}
}

/* ---------- Strona kancelarii: cztery strony w oknach przeglądarki (wzór: galerie agencji, przewijanie zrzutu po najechaniu) ---------- */
.realizacje{padding:0 0 var(--sek)}
/* nagłówek sekcji po lewej, opis po prawej: prawa połowa nie stoi pusta, a okna wchodzą wyżej */
.nad.dwie{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(32px, 5vw, 80px);align-items:end}
.nad.dwie h2{max-width:16ch}
.nad.dwie .lead{margin-top:0;max-width:600px;font-size:clamp(17px, 1.32vw, 19px)}
.sk-siatka{list-style:none;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:clamp(40px, 4.4vw, 64px) clamp(24px, 3vw, 48px);margin-top:clamp(36px, 3.6vw, 52px)}
/* prawa kolumna niżej o stałą wartość, liczoną w układzie (margines), więc pod galerią zostaje pełny odstęp */
.sk:nth-child(2){margin-top:96px}
.sk:nth-child(3){margin-top:-96px}
.sk-okno{border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(21,23,26,.14);
  box-shadow:0 30px 70px -28px rgba(21,23,26,.38), 0 4px 12px rgba(21,23,26,.06);transition:transform .5s cubic-bezier(.2,1,.2,1), box-shadow .5s;outline:none}
.sk-okno:hover, .sk-okno:focus-visible{transform:translateY(-6px);box-shadow:0 44px 90px -30px rgba(21,23,26,.45), 0 4px 12px rgba(21,23,26,.06)}
.sk-okno:focus-visible{outline:2px solid var(--zielen);outline-offset:4px}
.sk-pasek{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:var(--kamien);border-bottom:1px solid var(--linia)}
.sk-pasek i{width:9px;height:9px;border-radius:50%;background:var(--linia-ciemna)}
.sk-pasek span{margin:0 auto;padding:3px 14px;border-radius:999px;background:#fff;font:500 12px/1.3 var(--sans);color:var(--popiel)}
/* okno 16:9 = pierwszy ekran każdej strony; przewija się do samego dołu zrzutu (100cqh = wysokość okna) */
.sk-ekran{aspect-ratio:16 / 9;overflow:hidden;position:relative;background:var(--kamien);container-type:size}
.sk-ekran img{width:100%;height:auto;transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.sk-okno:hover .sk-ekran img, .sk-okno:focus-visible .sk-ekran img{transform:translateY(calc(100cqh - 100%));transition:transform 11s cubic-bezier(.45,.05,.35,1)}
.sk-opis{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:20px}
.sk-opis b{font:400 26px/1.2 var(--serif)}
.sk-opis span{flex-basis:100%;color:var(--popiel);font-size:16px}
.sk-opis a{font-size:15px;color:var(--zielen);text-underline-offset:3px}
.sk-opis em{font-style:normal;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--popiel)}
.sk-rada-palec{display:none}
@media (hover:none){
  .sk-rada-mysz{display:none}.sk-rada-palec{display:inline}
  .sk-ekran{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .sk-okno:hover{transform:none}
  .sk-okno:hover .sk-ekran img{transform:none}
}
@media (max-width:900px){
  .sk-siatka{grid-template-columns:minmax(0,1fr)}
  .sk:nth-child(n){margin-top:0}
  .nad.dwie{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .sk-okno, .sk-ekran img{transition:none}
  .sk-okno:hover .sk-ekran img{transform:none}
  .sk-ekran{overflow-y:auto}
}

/* ---------- Przewodnik: strona kancelarii po lewej, Biuro po prawej, prośba przelatuje z guzika do listy
   (wzór: storyboardy Stripe Connect i Paystack - jeden przepływ odgrywany sam po wejściu w kadr) ---------- */
.przewodnik{padding-bottom:var(--sek)}
.scena-przewodnik{margin-top:clamp(40px, 4.4vw, 64px)}
.pw-uklad{--kz:#0F3328;--zl:#C49A52;--krem:#F7F3EA;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);
  gap:clamp(16px, 2.4vw, 36px);align-items:center;max-width:1160px;margin:0 auto;text-align:left}
.pw-strona{position:relative;border-radius:14px;overflow:hidden;background:var(--krem);border:1px solid rgba(21,23,26,.2);
  box-shadow:0 30px 70px -20px rgba(10,24,19,.5)}
.pw-pasek{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:var(--kz);color:rgba(255,255,255,.7)}
.pw-pasek i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.pw-pasek span{margin:0 auto;padding:3px 14px;border-radius:999px;background:rgba(255,255,255,.1);font:500 12px/1.3 var(--sans)}
.pw-ekrany{position:relative;height:clamp(440px, 36vw, 520px)}
/* krok wychodzi szybko i znika całkiem, zanim wejdzie następny: w każdej chwili widać jeden stan */
.pw-ekran{position:absolute;inset:0;padding:clamp(20px, 2.6vw, 36px);color:#1D2A24;opacity:0;visibility:hidden;transform:translateX(24px);
  transition:opacity .18s, transform .25s cubic-bezier(.4,0,1,1), visibility 0s .25s}
.pw-ekran.akt{opacity:1;visibility:visible;transform:none;transition:opacity .4s .25s, transform .55s .25s cubic-bezier(.2,1,.2,1), visibility 0s .25s}
.pw-ekran:not(.pw-wynik){display:flex;flex-direction:column;justify-content:center}
.pw-ekran.byl{transform:translateX(-24px)}
.pw-et{font:500 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8A6A2E}
.pw-h{margin-top:10px;font:400 clamp(24px, 2.3vw, 32px)/1.12 var(--serif);letter-spacing:-.01em}
.pw-h2{font:400 22px/1.2 var(--serif)}
.pw-sub{margin-top:10px;font-size:15px;line-height:1.5;color:#55615B;max-width:44ch}
.pw-wybor{list-style:none;margin-top:20px;border-top:2px solid var(--zl);background:#fff;border-radius:10px;box-shadow:0 8px 24px -14px rgba(15,51,40,.35)}
.pw-wybor li{position:relative;display:grid;grid-template-columns:1fr auto;padding:12px 16px;border-bottom:1px solid #ECE6D8;transition:background .25s}
.pw-wybor li:last-child{border-bottom:0}
.pw-wybor b{font-weight:500;font-size:16px}
.pw-wybor span{grid-column:1;font-size:13px;color:#6B756F}
.pw-wybor i{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal;color:#8A6A2E}
.pw-guziki{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pw-guziki span{padding:12px 20px;border-radius:999px;border:1px solid #D9CFBB;background:#fff;font-size:15px;font-weight:500;transition:background .25s, color .25s, border-color .25s}
.pw-kwoty span{font-size:14px;padding:10px 16px}
.pw-wybor li.pod{background:#F3EEE2}
.pw-guziki span.pod{border-color:#B9AE97;background:#FBF8F1}
.pw-btn.pod{box-shadow:0 0 0 4px rgba(196,154,82,.32)}
[data-klik].wcisniety{background:var(--kz)!important;color:#fff!important;border-color:var(--kz)!important}
.pw-wybor li.wcisniety b, .pw-wybor li.wcisniety span, .pw-wybor li.wcisniety i{color:#fff}
.pw-wynik{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);padding:0}
.pw-bok{display:flex;flex-direction:column;gap:12px;padding:clamp(18px, 2.2vw, 28px);background:var(--kz);color:#fff}
.pw-bok .pw-h{margin-top:0;font-size:clamp(20px, 1.8vw, 24px)}
.pw-licz{display:flex;flex-direction:column;padding:8px 0;border-top:1px solid rgba(255,255,255,.14)}
.pw-licz span{font-size:12px;color:rgba(255,255,255,.65)}
.pw-licz b{font:400 19px/1.25 var(--serif)}
.pw-licz small{font-size:12px;color:rgba(255,255,255,.6)}
.pw-btn{display:flex;align-items:center;justify-content:center;height:38px;border-radius:999px;background:var(--zl);color:#1D2A24;font-size:14px;font-weight:600;transition:transform .15s, box-shadow .2s}
.pw-bok .pw-btn{margin-top:auto}
.pw-bok .pw-btn + .pw-btn{margin-top:0}
.pw-btn-tel{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.pw-btn.wcisniety{transform:scale(.96);background:var(--zl)!important;color:#1D2A24!important;border-color:var(--zl)!important}
.pw-lista{padding:clamp(18px, 2.2vw, 28px)}
.pw-odp{margin-top:6px;font-size:12px;color:#6B756F}
.pw-lista ul{list-style:none;margin-top:12px}
.pw-lista li{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:9px 0;border-top:1px solid #E6DFCF;font-size:14px;line-height:1.35}
.pw-lista li i{width:16px;height:16px;border:1.5px solid #B9AE97;border-radius:4px;margin-top:1px}
.pw-forma label{display:block;margin-top:12px;font-size:13px;color:#55615B}
.pw-forma label b{display:block;margin-top:4px;min-height:40px;padding:9px 12px;border:1px solid #D9CFBB;border-radius:8px;background:#fff;color:#1D2A24;font-weight:500;font-size:15px}
.pw-forma label b.pisze::after{content:"";display:inline-block;width:1.5px;height:16px;margin-left:1px;vertical-align:-2px;background:#1D2A24;animation:rz-kursor 1s steps(1) infinite}
.pw-forma .pw-wyslij{margin-top:18px;width:max-content;padding:0 26px;background:var(--kz);color:#fff;border:0}
.pw-kursor{position:absolute;left:0;top:0;z-index:4;width:26px;height:26px;pointer-events:none;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l15 8.2-6.4 1.6L9.4 19z' fill='%2315171A' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  transition:transform .75s cubic-bezier(.5,0,.2,1), opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.pw-kursor.widac{opacity:1}
.pw-kursor.klik{animation:pw-klik .3s}
@keyframes pw-klik{50%{transform:var(--t) scale(.8)}}
/* krąg kliku wychodzi z czubka strzałki */
.pw-kursor::after{content:"";position:absolute;left:5px;top:4px;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2px solid #C49A52;opacity:0}
.pw-kursor.klik::after{animation:pw-krag .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pw-krag{from{transform:scale(.6);opacity:.9}to{transform:scale(1.8);opacity:0}}
.pw-list{position:absolute;left:0;top:0;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--zielen);color:#fff;
  font:600 14px/1 var(--sans);white-space:nowrap;box-shadow:0 14px 34px -8px rgba(10,24,19,.6);opacity:0;pointer-events:none}
.pw-list svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pw-biuro{font-size:15px;background:#F6F5F2;border:1px solid rgba(21,23,26,.2);border-radius:14px;padding:16px;box-shadow:0 30px 70px -20px rgba(10,24,19,.5);color:var(--grafit)}
.pw-biuro-gora{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--linia);font-size:14px}
.pw-biuro-gora img{height:14px;width:auto}
.pw-biuro-gora span:not(.pw-data){font:400 20px/1 var(--serif);margin-left:6px}
.pw-data{margin-left:auto;color:var(--popiel);font-size:13px}
.pw-biuro-et{margin:14px 4px 8px;font-size:13px;font-weight:600}
.pw-ile{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--grafit);color:#fff;font-size:12px;transition:transform .3s}
.pw-ile.puls{animation:pw-puls .6s}
@keyframes pw-puls{40%{transform:scale(1.35)}}
.pw-biuro .o-zg{font-size:15px;background:#fff;border:1px solid var(--linia);margin-bottom:6px}
.pw-biuro .o-zg.wl{background:#fff;box-shadow:inset 3px 0 0 var(--zielen), 0 10px 24px -14px rgba(31,77,61,.55);border-color:#CFE0D7}
.pw-biuro .o-zg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pw-biuro .o-pill.b{background:var(--bursztyn-tlo);color:var(--bursztyn)}
.pw-biuro .o-zg-meta .o-pill{font-size:12px}
.pw-nowy{display:grid;transition:opacity .5s, transform .5s cubic-bezier(.2,1,.2,1)}
.pw-nowy.blysk{animation:pw-blysk 1.4s ease-out}
@keyframes pw-blysk{from{background:#DCEBE3}}
/* przed prośbą Biuro pokazuje dzień; po niej w tym samym miejscu otwierają się szczegóły prośby */
.pw-dol{display:grid}
.pw-dol > *{grid-area:1 / 1}
.pw-kal{transition:opacity .35s, visibility 0s .35s;opacity:0;visibility:hidden}
.pw-kal .o-zg{opacity:.62}
.pw-uklad.gra.przed .pw-kal{opacity:1;visibility:visible;transition:opacity .35s}
.pw-szcz{display:grid;gap:0;margin-top:10px;padding:4px 14px;border-radius:10px;background:#fff;border:1px solid var(--linia);font-size:13.5px;
  transition:opacity .5s .15s, transform .5s .15s}
.pw-szcz div{display:grid;grid-template-columns:76px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--linia)}
.pw-szcz div:first-child{border-top:0}
.pw-szcz dt{color:var(--popiel)}
.pw-kroki{position:relative;z-index:1;display:flex;width:max-content;max-width:100%;gap:clamp(14px, 2.4vw, 32px);list-style:none;margin:clamp(20px, 2.4vw, 32px) auto 0;
  padding:8px 18px 8px 10px;border-radius:999px;background:rgba(10,24,19,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  counter-reset:k;font-size:13px;color:rgba(255,255,255,.62)}
.pw-kroki li{counter-increment:k;display:flex;align-items:center;gap:8px;transition:color .3s}
.pw-kroki li::before{content:counter(k);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.35);font-size:12px;transition:background .3s, color .3s}
.pw-kroki li.akt{color:#fff}
.pw-kroki li.akt::before{background:#fff;color:var(--zielen);border-color:#fff}
/* odgrywanie: skrypt dodaje .gra; przed przelotem nowego wiersza nie ma, licznik pokazuje 2. Bez skryptu i przy
   ograniczonym ruchu widać stan końcowy: wynik przewodnika po lewej i prośbę w Biurze po prawej. */
.pw-uklad:not(.gra) .pw-ekran[data-e="4"]{opacity:1;visibility:visible;transform:none}
.pw-uklad.gra.przed .pw-nowy{opacity:0;transform:translateY(-10px);height:0;padding-block:0;margin:0;border-width:0;overflow:hidden}
.pw-uklad.gra.przed .pw-szcz{opacity:0;transform:translateY(8px)}
@media (max-width:1100px){
  .pw-uklad{grid-template-columns:minmax(0,1fr);max-width:640px}
  .pw-kroki{flex-wrap:wrap}
}
/* telefon: Biuro to niski pasek tuż pod przewodnikiem, więc klik klienta i prośba w Biurze mieszczą się w jednym ekranie */
@media (max-width:640px){
  .pw-uklad{gap:10px}
  .pw-ekrany{height:470px}
  .pw-wynik{grid-template-columns:minmax(0,1fr);overflow:hidden}
  .pw-lista{display:none}
  .pw-kroki{display:none}
  .pw-biuro{display:grid;grid-template-columns:1fr auto;align-items:center;padding:12px 14px}
  .pw-biuro-gora{padding:0;border:0}
  .pw-biuro-et{margin:0}
  .pw-data, .pw-dol, .pw-biuro .o-zg:not(.pw-nowy){display:none}
  .pw-wiersze{grid-column:1 / -1}
  .pw-nowy{margin:10px 0 0}
  .pw-ster{position:relative;right:auto;bottom:auto;display:block;margin:12px auto 0;z-index:1}
  .pw-ster[hidden]{display:none}
}

/* ---------- stopka-kurtyna: treść odjeżdża i odsłania stopkę pod spodem; przy odsłonięciu litery znaku wznoszą się
   po kolei między kreskami, a złoty § dochodzi ostatni (wzory: sticky revealing footer, Linear i Vercel - znak przez
   całą szerokość treści). Na niskich ekranach zwykła stopka. ---------- */
main{position:relative;z-index:1;background:var(--plotno)}
.stopka-k{position:relative;overflow:hidden;color:rgba(251,251,249,.8);background:#0E2A21}
.stopka-k .scena-foto img{opacity:.55}
.stopka-k::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg, rgba(14,42,33,.9) 0%, rgba(14,42,33,.6) 45%, rgba(14,42,33,.78) 100%)}
.stopka-k > :not(.scena-foto){position:relative;z-index:1}
.stopka-k a{color:inherit;text-decoration:none}
.stopka-k a:hover{color:#fff}
.sf-gora{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px clamp(32px, 5vw, 80px);padding-top:clamp(64px, 8vw, 120px)}
.sf-opis{font:400 clamp(28px, 2.8vw, 42px)/1.12 var(--serif);letter-spacing:-.015em;color:#FBFBF9}
.sf-opis .kropka{color:#9FC3B3}
.sf-kol{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:28px}
.sf-kol p{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,251,249,.7);margin-bottom:14px}
.sf-kol li{list-style:none;font-size:16px}
.sf-kol li + li{margin-top:8px}
.sf-znak{margin-top:clamp(56px, 7vw, 112px)}
.sf-znak svg{display:block;width:100%;height:auto}
.sf-dol{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:clamp(24px, 2.6vw, 36px);padding:20px 0 28px;border-top:1px solid rgba(251,251,249,.18);font-size:14px;color:rgba(251,251,249,.74)}
.sf-dol span{white-space:nowrap}
.sf-dol .sf-czas{font-variant-numeric:tabular-nums}
.sf-dol .sf-gora-link{margin-left:auto}
/* wjazd znaku: skrypt dodaje .ruch, gdy strona może się ruszać, i .odsloniety, gdy znak wyjdzie spod treści */
.sf-znak.ruch path, .sf-znak.ruch rect{transform-box:fill-box}
.sf-znak.ruch #NAZWA path{transform:translateY(46%);opacity:0;transition:transform .9s cubic-bezier(.2,.9,.2,1), opacity .5s;transition-delay:calc(var(--i) * 45ms)}
.sf-znak.ruch #KRESKI rect{transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.6,0,.2,1)}
.sf-znak.ruch #PARAGRAF path{transform:translateY(-18%) rotate(-8deg);transform-origin:50% 50%;opacity:0;transition:transform .8s .5s cubic-bezier(.2,1.3,.4,1), opacity .5s .5s}
.sf-znak.ruch.odsloniety #NAZWA path, .sf-znak.ruch.odsloniety #PARAGRAF path{transform:none;opacity:1}
.sf-znak.ruch.odsloniety #KRESKI rect{transform:none}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .sf-opis, .sf-kol{animation:wjazd-nad linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
  }
}
@media (min-width:1024px) and (min-height:760px){
  body > footer{position:sticky;bottom:0;z-index:0}
}
@media (max-width:760px){
  .sf-gora{grid-template-columns:minmax(0,1fr)}
}

/* ---------- akt powstaje: jedna sprawa, cztery kroki kreatora w jednym oknie programu (wzór: attio.com) ---------- */
/* stos (bez skryptu, wąskie albo niskie okno): krok = opis, pełna scena, szczegół; klasę .kino nadaje skrypt,
   gdy okno programu mieści się w kadrze w co najmniej 65 % szerokości okna przeglądarki */
.ap{padding-bottom:var(--sek)}
.ap-kroki{display:none}
.ap-krok{scroll-margin-top:calc(var(--gora) + 24px)}
.ap-krok + .ap-krok{margin-top:clamp(88px, 10vw, 144px)}
.ap-opis{max-width:calc(1280px + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.ap-nr{display:flex;align-items:baseline;gap:12px;font-size:14px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--popiel)}
.ap-nr b{font-family:var(--mono);font-weight:500;letter-spacing:0;color:var(--zielen)}
.ap-opis h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px, 3.6vw, 52px);line-height:1.06;letter-spacing:-.02em;margin-top:14px;max-width:20ch;text-wrap:balance}
.ap-zd{margin-top:18px;max-width:620px;font-size:clamp(17px, 1.4vw, 20px);line-height:1.5;color:var(--popiel)}
.sz-got{color:var(--zielen);font-weight:500;white-space:nowrap}
.sz-luk{color:var(--bursztyn);background:var(--bursztyn-tlo);border-radius:6px;padding:1px 10px;font-weight:500;white-space:nowrap}

/* kino: kadr ma wysokość okna pod belką, a opisy i sceny kroków leżą w tych samych polach siatki. Tor jest dłuższy od kadru
   o cztery odcinki przewijania: kadr stoi przyklejony pod belką, a krok wyznacza miejsce na torze (strona.js) */
.ap.kino .ap-tor{height:calc(100vh - var(--gora) + 4 * 90vh);height:calc(100svh - var(--gora) + 4 * 90svh)}
.ap.kino .ap-kadr{--bok:clamp(12px, 2vw, 40px);position:sticky;top:var(--gora);height:calc(100vh - var(--gora));height:calc(100svh - var(--gora));
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:52px minmax(0,1fr);grid-template-areas:"opis kroki" "scena scena";
  column-gap:28px;padding:0 var(--bok)}
.ap.kino .ap-krok{display:contents}
.ap.kino .ap-opis{grid-area:opis;display:flex;align-items:center;gap:28px;max-width:none;min-width:0;margin:0;padding:0 4px;
  opacity:0;visibility:hidden;transition:opacity .2s, visibility 0s .2s}
.ap.kino .ap-krok.akt > .ap-opis{opacity:1;visibility:visible;transition:opacity .4s .15s}
.ap.kino .ap-nr{display:none}
.ap.kino .ap-opis h3{font-size:clamp(22px, 1.75vw, 30px);line-height:1.15;letter-spacing:-.015em;margin:0;max-width:none;white-space:nowrap}
.ap.kino .ap-zd{flex:1 1 0;min-width:0;max-width:600px;margin:0;font-size:14.5px;line-height:1.35}
/* nowa scena odsłania się kurtyną od prawej nad starą (przenikanie dwóch gęstych okien dawało duchy), stara znika dopiero pod nią */
.ap.kino .scena{grid-area:scena;margin:8px 0 18px;padding:0;display:grid;place-items:center;
  --widok:min(1440px, 88%, calc((100vh - var(--gora) - 78px - 2 * clamp(8px, calc((100vh - 700px) * .12 + 8px), 32px)) * 16 / 9));
  opacity:0;visibility:hidden;clip-path:inset(0 0 0 100%);transition:opacity 0s .7s, visibility 0s .7s, clip-path 0s .7s}
.ap.kino .ap-krok.akt > .scena{opacity:1;visibility:visible;clip-path:inset(0);z-index:1;transition:clip-path .7s cubic-bezier(.65,0,.2,1)}
/* kurtyna przycina scenę, więc obserwator wjazdu widzi okno dopiero w trakcie: w kinie okno stoi od razu, wejściem jest film */
.ap.kino .scena > .widok-rama{animation:none;opacity:1;transform:none;transition:none}
.ap.kino .ap-kroki{grid-area:kroki;display:flex;align-items:center;gap:4px}
.ap-kroki a{position:relative;display:flex;align-items:center;gap:8px;min-width:48px;padding:11px 8px 13px;text-decoration:none;font-size:13px;line-height:1.3;color:var(--popiel);white-space:nowrap}
.ap-kroki b{font-family:var(--mono);font-weight:500;font-size:12px}
.ap-kroki span{display:none;font-weight:500}
.ap-kroki i{position:absolute;left:8px;right:8px;bottom:5px;height:2px;border-radius:2px;background:var(--linia-ciemna);overflow:hidden}
.ap-kroki i::after{content:"";position:absolute;inset:0;background:var(--zielen);transform-origin:left;transform:scaleX(var(--p, 0));transition:transform .12s linear}
.ap-kroki a:hover, .ap-kroki a[aria-current]{color:var(--grafit)}
.ap-kroki a[aria-current] b{color:var(--zielen)}
.ap.kino .ap-zbliska{padding-top:clamp(24px, 3vw, 48px)}
/* all four step names once the row has room for them next to the scene caption */
@media (min-width:1280px){
  .ap-kroki span{display:inline}
  .ap-kroki a{padding-left:10px;padding-right:10px}
}

/* suma liczy się na oczach: znaczek zgody wraca, gdy liczenie stanie */
.o-suma .o-ok, .sz-suma .ok-kolo{transition:opacity .25s, transform .45s cubic-bezier(.2,1.5,.4,1)}
.liczy > .o-ok, .liczy > .ok-kolo{opacity:0;transform:scale(.4)}

/* zakładka „Projekt aktu”: kartka projektu jako kreski, dane ze sprawy i luki jako znaczki (bez treści aktu) */
.o-kartka-p{flex:1 1 0;display:flex;justify-content:center;padding:1.1em 1.2em 0;background:var(--kamien)}
.o-kartka{width:min(100%, 36em);display:flex;flex-direction:column;gap:.6em;padding:2em 2.8em 0;background:#fff;border:1px solid var(--linia);border-bottom:0;
  border-radius:.3em .3em 0 0;box-shadow:0 .6em 1.6em -.6em rgba(21,23,26,.18)}
.k-tyt{font-family:var(--serif);font-size:.95em;letter-spacing:.18em;text-align:center;margin-bottom:.5em}
.k-par{font-family:var(--serif);font-size:.88em;text-align:center;margin-top:.4em}
.k-w{display:flex;align-items:center;gap:.5em;height:1.3em;flex:none}
.k-w i{flex:0 0 var(--w);height:.34em;border-radius:99em;background:var(--linia)}
.k-w i.d{flex:1 1 0}
.k-f{font-size:.78em;font-weight:500;line-height:1.3;color:var(--zielen);background:var(--zielen-jasna);border-radius:.35em;padding:.08em .5em;white-space:nowrap}
.k-w .o-puste{font-size:.78em;line-height:1.3;white-space:nowrap}

/* ---------- szlif 11.11: telefon i zbliżenia ---------- */
@media (max-width:480px){.rz-zach-d{display:none}}
/* pokaz i dostęp w jednej kolumnie: formularz zaraz po obietnicy, przebieg (cztery wiersze) pod nim */
@media (max-width:1020px){
  .pokaz-siatka{display:flex;flex-direction:column}
  .pokaz-tekst{display:contents}
  .pokaz-siatka > .formularz{order:1;width:100%}
  .pokaz-tekst > .rejestr{order:2;width:100%}
}
/* zbliżenia pod kinem dostają własny tytuł; w stosie każdy szczegół stoi pod swoim krokiem */
.ap-zb-h{display:none}
.ap.kino .ap-zb-h{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(30px, 3vw, 44px);line-height:1.08;letter-spacing:-.02em}
.ap.kino .ap-zbliska{padding-top:clamp(56px, 6vw, 96px)}

/* okruszek nad układem dwukolumnowym (pokaz, dostęp) stoi na osi tytułu, nie na środku */
.okruszek-wrap .okruszek{justify-content:flex-start}

/* ---------- wizytówka: człowiek za programem (Piotr 11.11), przy wezwaniu do pokazu i w stopce ---------- */
.wizytowka{display:inline-flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:40px;padding:14px 16px 14px 14px;
  border:1px solid var(--linia);border-radius:14px;background:#fff;text-align:left}
.wezwanie-in .wizytowka{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
.wz-av{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--zielen);color:#fff;
  font:400 19px/1 var(--serif);letter-spacing:.02em}
.wz-tekst{display:flex;flex-direction:column;gap:2px}
.wz-tekst b{font:500 16px/1.3 var(--sans, inherit);color:var(--grafit)}
.wz-tekst span{font-size:15px;line-height:1.4;color:var(--popiel)}
.wz-tel{margin-left:6px;padding:10px 16px;border-radius:99px;background:var(--zielen-jasna);color:var(--zielen);font-weight:600;
  font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap;transition:background-color .2s, color .2s}
.wz-tel:hover{background:var(--zielen);color:#fff}
.wz-mail{margin-left:0;font-weight:500}
.sf-kontakt{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:22px;font-size:16px;color:rgba(251,251,249,.8)}
.sf-kontakt a{color:#FBFBF9;font-weight:500;font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(251,251,249,.35)}
@media (max-width:640px){
  .wizytowka, .wezwanie-in .wizytowka{display:grid;grid-template-columns:48px minmax(0,1fr);width:100%;margin-left:0}
  .wz-tel{grid-column:1 / -1;margin-left:0;text-align:center}
}

/* ---------- rachunek jak w programie: wniosek do księgi i wypisy stoją pod sumą, poza rozliczeniem aktu ---------- */
.o-suma:has(+ .o-poza){margin-bottom:.35em}
.o-poza{padding-bottom:.5em}
.o-poza .o-rw.grp{border-top:0}
.sz-poza{padding-bottom:8px}
.sz-poza .sz-kv{border-top:0;padding:0 18px 10px;font-weight:600}
.sz-gora + .sz-kv{border-top:0}
.sz-kv b{text-align:right}
/* baza prawa: widok programu stoi na fakturze */
.plansza-baza{position:relative;display:grid;place-items:center;padding:clamp(20px, 3vw, 44px)}
.plansza-baza picture{position:absolute;inset:0}
.plansza-baza .pv{position:relative;width:100%;max-width:470px}
@media (max-width:1020px){
  .plansza-baza{aspect-ratio:auto}
}
/* strony kancelarii: wskazówka stoi przy oknach, nie w leadzie */
.sk-rada{margin-top:clamp(28px, 3vw, 40px);font-size:14px;color:var(--popiel)}
.sk-rada + .sk-siatka{margin-top:16px}
/* wąski ekran: sygnatura w jednej linii, ostrzeżenie pod nią */
@media (max-width:520px){
  .plansza-baza .pv-orz{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- film: ruch w widoku programu (stan końcowy stoi w HTML; klasy nadaje strona.js, opis atrybutów tamże) ---------- */
:where([data-film]){position:relative}
.film-gra [data-t]{transition:opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.film-gra [data-t]:not([data-akcja]):not(.f-jest), .film-gra [data-akcja="wejdz"]:not(.f-jest){opacity:0;transform:translateY(.5em)}
.film-skok [data-t], .film-skok .film-kursor{transition:none !important}
.f-zwiniety{display:none !important}
.f-klik{animation:film-wcisk .32s ease-out}
@keyframes film-wcisk{40%{transform:scale(.97);filter:brightness(.93)}}
.f-pisze::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-.12em;background:currentColor;animation:rz-kursor 1s steps(1) infinite}
/* brak, na który film zwraca uwagę: bursztyn zostaje przy brakach */
.f-puls{animation:film-puls .9s ease-out 2}
@keyframes film-puls{from{box-shadow:0 0 0 0 color-mix(in srgb, var(--bursztyn) 50%, transparent)}to{box-shadow:0 0 0 .7em color-mix(in srgb, var(--bursztyn) 0%, transparent)}}
/* kursor filmu: czubek strzałki stoi w punkcie, do którego skrypt go przesuwa */
.film-kursor{--k:max(18px, 1.7em);position:absolute;left:0;top:0;z-index:5;width:var(--k);height:var(--k);margin:calc(var(--k) * -.125) 0 0 calc(var(--k) * -.17);
  pointer-events:none;opacity:0;transition:transform .72s cubic-bezier(.5,0,.2,1), opacity .3s}
.film-kursor.widac{opacity:1}
.film-kursor::before{content:"";position:absolute;inset:0;transform-origin:17% 12.5%;transition:transform .15s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l15 8.2-6.4 1.6L9.4 19z' fill='%2315171A' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.film-kursor.wcisniety::before{transform:scale(.82)}
.film-kursor::after{content:"";position:absolute;left:17%;top:12.5%;width:var(--k);height:var(--k);margin:calc(var(--k) * -.5) 0 0 calc(var(--k) * -.5);
  border-radius:50%;border:2px solid var(--zielen);opacity:0}
.film-kursor.krag::after{animation:film-krag .5s cubic-bezier(.2,.8,.2,1)}
@keyframes film-krag{from{transform:scale(.5);opacity:.9}to{transform:scale(1.7);opacity:0}}
/* przycisk filmu dłuższego niż 5 s: na scenie leży na fakturze pod oknem programu, poza sceną stoi pod kadrem */
.film-ster{display:inline-flex;align-items:center;height:36px;margin-top:12px;padding:0 16px;border:1px solid var(--linia-ciemna);border-radius:999px;
  background:var(--plotno);color:var(--grafit);font:500 14px/1 var(--sans);cursor:pointer}
.film-ster[hidden]{display:none}
.film-ster:focus-visible{outline:2px solid var(--zielen);outline-offset:3px}
.film-ster.na-scenie{position:absolute;z-index:2;right:clamp(12px, 2vw, 24px);bottom:clamp(10px, 1.4vw, 20px);margin:0;border:0;
  background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.film-ster.na-scenie:focus-visible{outline-color:#fff}
@media (max-width:1200px){
  .scena:has(> .film-ster:not([hidden])){padding-bottom:calc(var(--obw) + 40px)}
}
/* kino kroków aktu: jeden przycisk przy zakładkach prowadzi cały film */
.ap-ster{min-width:136px;height:32px;margin-left:12px;padding:0 14px;border:1px solid var(--linia-ciemna);border-radius:999px;background:none;
  color:var(--grafit);font:500 13px/1 var(--sans);cursor:pointer;white-space:nowrap;transition:background .2s}
.ap-ster:hover{background:var(--kamien)}
.ap-ster:focus-visible{outline:2px solid var(--zielen);outline-offset:2px}

/* ---------- kafle „z bliska”: teza, zdanie i szczegół programu na kamieniu. W stosie kafel stoi pod swoim krokiem,
   w kinie skrypt zbiera je w siatkę 5/7, 7/5 i szeroki kafel importu (wzór układu: linear.app, karty funkcji) ---------- */
.kafel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px, 3vw, 56px);align-items:center;
  padding:clamp(24px, 3vw, 48px);background:var(--kamien);border-radius:clamp(8px, .7vw, 12px)}
.ap-krok > .kafel{width:min(1280px, calc(100% - 2 * var(--pad)));margin:clamp(24px, 3vw, 40px) auto 0}
.kafel-teza{font-family:var(--serif);font-weight:400;font-size:clamp(26px, 2.3vw, 36px);line-height:1.1;letter-spacing:-.015em}
.kafel-tekst p{margin-top:14px;max-width:46ch;color:var(--popiel)}
.kafel-tekst p + p{margin-top:10px}
.kafel > .sz{width:100%}
.ap-kafle{margin-top:clamp(24px, 3vw, 40px)}
.ap.kino .ap-kafle{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));gap:24px;margin-top:clamp(28px, 3vw, 44px)}
.ap.kino .ap-kafle > .kafel{grid-column:span 7;grid-template-columns:minmax(0,1fr);align-content:space-between;align-items:start;padding:clamp(24px, 2.4vw, 36px)}
.ap.kino .ap-kafle > .kafel.k-waski{grid-column:span 5}
.ap.kino .ap-kafle > .kafel.k-szer{grid-column:1 / -1;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;padding:clamp(24px, 3vw, 48px)}
@media (max-width:900px){
  .kafel{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 16px 16px}
  .kafel-tekst{padding:0 4px}
}

/* ---------- droga: gdzie czytelnik jest w programie i co dalej (sekcję składa zbuduj.py na końcu każdej podstrony) ---------- */
.droga{padding:clamp(56px, 6vw, 96px) 0;border-top:1px solid var(--linia)}
.droga-kroki{list-style:none;display:flex;margin-bottom:clamp(28px, 3vw, 44px)}
.droga-kroki li{flex:1;position:relative;padding:24px 16px 0 0;font-size:14px;line-height:1.3;color:var(--popiel)}
.droga-kroki li:last-child{flex:none;padding-right:0}
.droga-kroki li::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--linia-ciemna)}
.droga-kroki li:last-child::before{display:none}
.droga-kroki li::after{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--plotno);box-shadow:inset 0 0 0 1px var(--linia-ciemna)}
.droga-kroki li.byl::before{background:var(--zielen)}
.droga-kroki li.byl::after, .droga-kroki li[aria-current]::after{background:var(--zielen);box-shadow:none}
.droga-kroki li[aria-current]{color:var(--grafit);font-weight:500}
.droga-kroki a{color:inherit;text-decoration:none;transition:color .2s}
.droga-kroki a:hover{color:var(--grafit);text-decoration:underline;text-underline-offset:4px}
.droga-kroki a:focus-visible, .droga-k:focus-visible{outline:2px solid var(--zielen);outline-offset:3px}
.droga-rzad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(12px, 1.4vw, 20px)}
.droga-rzad.sam{grid-template-columns:1fr}
.droga-k{position:relative;display:grid;align-content:end;gap:8px;min-height:clamp(150px, 14vw, 210px);padding:clamp(20px, 2.2vw, 32px);
  border-radius:12px;text-decoration:none;color:var(--grafit);background:var(--kamien);transition:background-color .25s, box-shadow .25s}
.droga-wstecz{background:none;box-shadow:inset 0 0 0 1px var(--linia-ciemna)}
.droga-et{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--popiel)}
.droga-k b{font:400 clamp(28px, 3vw, 44px)/1.05 var(--serif);letter-spacing:-.02em}
.droga-wstecz b{font-size:clamp(22px, 2vw, 28px)}
.droga-op{font-size:16px;line-height:1.45;color:var(--popiel);max-width:44ch}
.droga-st{position:absolute;right:clamp(20px, 2.2vw, 32px);top:clamp(20px, 2.2vw, 32px);display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--grafit);color:#fff;transition:transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s}
.droga-st svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.droga-dalej:hover{background:var(--zielen-jasna)}
.droga-dalej:hover .droga-st{transform:translateX(6px);background:var(--zielen)}
.droga-wstecz:hover{box-shadow:inset 0 0 0 1px var(--grafit)}
/* wejście: oś zapełnia się do bieżącego kroku, karty dochodzą po niej */
.droga.czeka li.byl::before{transform:scaleX(0);transform-origin:left}
.droga.czeka li.byl::after, .droga.czeka li[aria-current]::after{background:var(--plotno);box-shadow:inset 0 0 0 1px var(--linia-ciemna)}
.droga.czeka .droga-k{opacity:0;transform:translateY(24px)}
.droga.widac li.byl::before{transform:none;transition:transform .32s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i) * .32s)}
.droga.widac li.byl::after, .droga.widac li[aria-current]::after{background:var(--zielen);box-shadow:none;transition:background-color .2s;transition-delay:calc(var(--i) * .32s)}
.droga.widac .droga-k{opacity:1;transform:none;transition:opacity .6s ease .15s, transform .8s cubic-bezier(.23,1,.32,1) .15s, background-color .25s, box-shadow .25s}
.droga.widac .droga-dalej{transition-delay:.27s, .27s, 0s, 0s}
@media (max-width:699.98px){
  .droga-kroki{display:none}
  .droga-rzad{grid-template-columns:1fr}
  .droga-dalej{order:-1}
  .droga-wstecz{min-height:0}
}

/* krok 02: przegląd księgi */
.pk-grupa{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;border-top:1px solid var(--linia);font-weight:500}
.pk-grupa .o-pill{font-size:14px;min-width:2.2em;justify-content:center}
.pk-grupa .o-pill b{font-weight:500}
.pk-uwaga{margin:4px 22px 12px;padding:4px 0 4px 14px;border-left:2px solid var(--bursztyn);line-height:1.35}
.pk-uwaga .sz-sub{margin-top:3px}
@media (max-width:600px){
  .pk-grupa{padding-left:18px;padding-right:18px}
  .pk-uwaga{margin-left:18px;margin-right:18px}
}

/* wejście list poza widokami programu: dzieci [data-wch] wchodzą po kolei, gdy lista wejdzie w okno (strona.js) */
[data-wch].czeka > *{opacity:0;transform:translateY(18px)}
[data-wch].czeka.widac > *{opacity:1;transform:none;transition:opacity .5s ease, transform .7s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i, 0) * 90ms)}

/* ---------- pierwszy ekran: film sporządzenia aktu (Piotr 11.11: klik, akt się sporządza, ekran z gotowym projektem) ----------
   Środek okna i lista kroków to sceny w jednej komórce siatki: .h-przed = jeszcze nie było, .h-po = już było.
   HTML niesie finał (projekt aktu), film odgrywa drogę do niego. */
.h-sceny, .h-listy{display:grid;min-width:0;min-height:0}
.h-listy{flex:1}
.h-sc{grid-area:1 / 1;min-height:0}
.h-sc:is(.h-przed, .h-po){opacity:0;visibility:hidden}
.h-sceny > .h-przed{transform:translateX(1.6em)}
.h-sceny > .h-po{transform:translateX(-1.6em)}
.film-gra .h-sc{transition:opacity .3s ease .08s, transform .5s cubic-bezier(.2,.7,.2,1) .08s, visibility 0s}
.film-gra .h-sc:is(.h-przed, .h-po){transition:opacity .18s ease, transform .3s ease, visibility 0s .18s}

/* krok Termin i sporządzenie */
.h-w{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:1.15em 1.1em;font-size:.85em;border-top:1px solid var(--linia)}
.h-w:first-child{border-top:0}
.h-w > span:first-child{font-weight:500}
.h-pole{display:inline-flex;align-items:center;gap:.6em;min-width:12.5em;min-height:2.5em;padding:.45em .8em;border:1px solid var(--linia-ciemna);border-radius:.6em;background:#fff;transition:border-color .2s, box-shadow .2s}
.h-pole svg{color:var(--popiel)}
.h-pole.h-krotkie{min-width:7em}
.h-pole:has(.f-pisze){border-color:var(--zielen);box-shadow:0 0 0 .22em var(--zielen-jasna)}
.h-tog{position:relative;flex:none;width:2.5em;height:1.4em;border-radius:99em;background:var(--linia-ciemna)}
.h-tog::after{content:"";position:absolute;top:.15em;left:.15em;width:1.1em;height:1.1em;border-radius:50%;background:#fff;box-shadow:0 .05em .2em rgba(21,23,26,.25)}
.h-tog.on{background:var(--zielen)}
.h-tog.on::after{left:1.25em}
.h-seg{font-size:.94em;min-width:19em}
.h-uwaga{display:flex;align-items:center;gap:.7em;padding:.75em 1em;border-radius:.7em;background:var(--bursztyn-tlo);font-size:.8em}
.h-uwaga svg{color:var(--bursztyn)}

/* postęp sporządzania: dwie zmienne prowadzą cały komponent. --p: 0 = nie ruszyło, 1 = dziewięć części gotowych;
   --g: 0 = trwa, 1 = pokazany wynik. Ten sam komponent stoi w oknie programu i, większy, w szczególe na telefonie. */
.h-bieg{--p:1;--g:1;display:flex;flex-direction:column;min-height:0}
.h-bieg.h-start{--p:0}
.h-bieg.h-trwa{--g:0}
.okno .h-bieg{flex:1 1 0;background:#fff;border:1px solid var(--linia);border-radius:.85em;overflow:hidden}
.h-bieg svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.h-b-glowa{display:flex;align-items:center;gap:1.1em;padding:1.1em 1.3em;border-bottom:1px solid var(--linia)}
.h-pierscien{position:relative;flex:none;width:4em;height:4em;display:grid;place-items:center}
.h-bieg .h-pierscien > svg:first-child{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);stroke-width:3}
.h-tor{stroke:var(--linia)}
.h-luk{stroke:var(--zielen);stroke-dasharray:100;stroke-dashoffset:calc((1 - var(--p)) * 100)}
.h-ile{grid-area:1 / 1;display:inline-flex;align-items:baseline;font-family:var(--serif);font-size:1.35em;line-height:1.2;opacity:calc(1 - var(--g))}
.h-ile small{font-family:var(--sans);font-size:.56em;color:var(--popiel);margin-left:.12em}
.h-bieg .h-ptak{grid-area:1 / 1;width:1.7em;height:1.7em;stroke-width:2.2;color:var(--zielen);opacity:var(--g);transform:scale(calc(.6 + var(--g) * .4))}
.h-okienko{display:inline-block;height:1.2em;overflow:hidden;vertical-align:top}
.h-pasek{display:flex;flex-direction:column;transform:translateY(calc(var(--p) * -90%))}
.h-pasek i{height:1.2em;line-height:1.2;font-style:normal;white-space:nowrap}
.h-b-tyt{flex:1;display:grid;gap:.3em}
.h-b-t, .h-b-sub, .h-b-stopka{display:grid}
.h-b-t > *, .h-b-sub > *, .h-b-stopka > *{grid-area:1 / 1}
.h-b-t{font-family:var(--serif);font-size:1.5em;line-height:1.2}
.h-b-sub{font-size:.8em;line-height:1.2;color:var(--popiel)}
.h-b-czas{align-self:flex-start;font-size:.75em;color:var(--popiel);white-space:nowrap}
.h-trw{opacity:calc(1 - var(--g))}
.h-got{opacity:var(--g)}
.h-czesci{list-style:none;position:relative;flex:1;display:grid;grid-auto-rows:1fr}
.h-czesci::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% / 9);background:var(--kamien);transform:translateY(calc(var(--p) * 900%));opacity:calc(1 - var(--p))}
.h-czesci li{position:relative;display:grid;grid-template-columns:1.6em minmax(0,1fr) auto 3.4em;align-items:center;gap:.8em;padding:.6em 1.3em;border-top:1px solid var(--linia);font-size:.85em}
.h-czesci li:first-child{border-top:0}
.h-czesci .o-st{background:color-mix(in srgb, var(--zielen) calc(var(--p) * 100%), #fff);border-color:color-mix(in srgb, var(--zielen) calc(var(--p) * 100%), var(--linia-ciemna))}
.h-bieg .h-czesci .o-st svg{width:.95em;height:.95em;stroke-width:2.4;opacity:var(--p)}
.h-luka{font-style:normal;font-size:.88em;font-weight:500;color:var(--bursztyn);white-space:nowrap;opacity:var(--p)}
.h-stan{display:grid;justify-items:end;font-size:.88em;color:var(--popiel)}
.h-stan > *{grid-area:1 / 1}
.h-stan > :first-child{opacity:calc(1 - var(--p))}
.h-stan > :last-child{opacity:var(--p)}
.h-b-stopka{padding:.7em 1.3em;border-top:1px solid var(--linia)}
.h-b-stopka > span{display:flex;justify-content:flex-end;align-items:center;gap:.6em}
.h-b-stopka > .h-trw{justify-content:space-between}
/* ruch tylko w trakcie (h-trwa bez h-start): części kończą się co 300 ms; powrót na start i skok do końca są natychmiastowe */
.h-trwa:not(.h-start) .h-luk{transition:stroke-dashoffset 2.7s linear}
.h-trwa:not(.h-start) .h-pasek{transition:transform 2.7s steps(9, end)}
.h-trwa:not(.h-start) .h-czesci::before{transition:transform 2.7s steps(9, end), opacity 0s 2.7s}
.h-trwa:not(.h-start) .h-czesci :is(.o-st, .o-st svg, .h-luka, .h-stan > *){transition:opacity .2s, background-color .2s, border-color .2s;transition-delay:calc((var(--i) + 1) * 300ms)}
.film-gra .h-bieg:not(.h-start) :is(.h-trw, .h-got, .h-ile, .h-ptak){transition:opacity .3s ease, transform .45s cubic-bezier(.3,1.4,.5,1)}
/* szczegół na telefonie: ten sam postęp w czytelnym piśmie */
.h-sz{font-size:17px}
.h-sz .h-czesci li{padding:.8em 1.3em}
.h-sz .h-b-czas{display:none}

/* ---------- start bez mignięcia (Piotr 11.11: strona ładowała się wypełniona, potem zerowała i wypełniała od nowa) ----------
   Przyczyna: skrypty stoją na końcu <body>, więc przeglądarka zdążyła namalować stan końcowy z HTML, zanim skrypt
   postawił stan wyjściowy filmów, rozmowy i wejść. Treść strony czeka więc na skrypty: klasę .ruch daje skrypt w <head>
   (ten sam warunek co ruch w strona.js), .gotowa - ostatni skrypt strony albo bezpiecznik po 3 s. W Chromium pierwsze
   malowanie i tak czeka na koniec skryptów (<link rel="expect" blocking="render"> w zbuduj.py); to jest droga dla reszty.
   Bez skryptu i przy ograniczonym ruchu strona stoi od razu w stanie końcowym. */
html.ruch:not(.gotowa) main{opacity:0}

/* Stopka: odnośnik do polityki prywatności w dolnym pasku. */
.sf-dol a:not(.sf-gora-link){color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Formularz: osobne, niezaznaczone pole zgody na wiadomości (art. 398 PKE). */
.formularz label.fm-zgoda{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:15px;line-height:1.45;color:var(--popiel);cursor:pointer}
.formularz label.fm-zgoda input{width:20px;height:20px;flex:none;margin:1px 0 0;padding:0;accent-color:var(--zielen);box-shadow:none;background-image:none}
.formularz p a{color:var(--zielen);text-decoration:underline;text-underline-offset:3px}