/* index.html: własne style strony głównej (po styl.css). Wzory w komentarzach części. */

/* ---------- dane: karta „co stoi w kancelarii” na fakturze (film: komputer, kopia, dysk kancelarii, klucz) ---------- */
.rejestr dt{display:flex;align-items:center;gap:12px}
.rejestr dt svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--zielen);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wk{position:relative;width:min(88%, 460px);background:var(--panel);border:1px solid var(--grafit);border-radius:14px;
  box-shadow:0 12px 32px rgba(21,23,26,.18);padding:22px 22px 18px;font-size:15px;line-height:1.4}
.wk svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wk-t{font-family:var(--serif);font-size:22px;line-height:1.25}
.wk-gr{margin-top:16px;border:1px solid var(--linia-ciemna);border-radius:12px;overflow:hidden}
.wk-gl{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--kamien)}
.wk-gl b{font-weight:500;font-size:16px}
.wk-ik{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--zielen);color:#fff}
.wk-ik svg{width:20px;height:20px}
.wk-gr ul{list-style:none}
.wk-gr li{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px 8px 23px;border-top:1px solid var(--linia)}
.wk-gr li > svg{width:18px;height:18px;color:var(--popiel)}
.wk-gr li .o-pill{margin-left:auto;font-size:12px}
.wk-kto{margin-left:auto;font-size:13px;color:var(--popiel);white-space:nowrap}
.wk-lacze{display:flex;align-items:center;gap:10px;margin:8px 0 -8px;padding-left:23px;font-size:13px;color:var(--popiel)}
.wk-lacze svg{width:18px;height:18px;color:var(--zielen)}
.wk-st{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--grafit);font-size:14px;color:var(--grafit)}
.wk-st svg{width:18px;height:18px;color:var(--zielen)}
@media (max-width:640px){
  .wk{width:92%;padding:18px 16px 16px}
  .wk-gr li{padding-left:16px;padding-right:10px;gap:8px;white-space:nowrap}
  .wk-lacze{padding-left:16px}
}
@media (max-width:379px){ .wk-gr li{white-space:normal} }

/* ---------- rodzina: kafle programów (wzór: linear.app, siatka kafli funkcji) ---------- */
.rk-siatka{list-style:none;margin-top:clamp(40px, 5vw, 72px);display:grid;grid-template-columns:repeat(12, minmax(0,1fr));gap:24px}
.rk{grid-column:span 4;display:flex;flex-direction:column;gap:clamp(20px, 2vw, 28px);padding:clamp(24px, 2.4vw, 36px);
  border-radius:14px;background:var(--kamien);border:1px solid var(--linia)}
.rk-7{grid-column:span 7}
.rk-5{grid-column:span 5}
.rk-gl{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.rk h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px, 2vw, 30px);line-height:1.15;letter-spacing:-.01em}
.rk .stan{font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--zielen)}
.rk .stan.nowe{padding:2px 10px;border-radius:99px;background:var(--zielen-jasna)}
.rk .stan.nadch{padding:2px 10px;border-radius:99px;color:var(--bursztyn);background:var(--bursztyn-tlo)}
.rk-tekst p{margin-top:12px;font-size:17px;line-height:1.55;color:var(--popiel);max-width:60ch}
.rk-tekst p b{font-weight:500;color:var(--grafit)}
.rk-nowe{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
/* wejście do podstrony jest guzikiem, nie odnośnikiem w tekście: pigułka z obwódką (jak .btn-drugi), przy najechaniu pełna */
.rk-tekst a{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 20px;margin-top:20px;border-radius:999px;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--linia-ciemna);font-size:15px;font-weight:500;line-height:1;color:var(--grafit);
  text-decoration:none;white-space:nowrap;transition:background-color .2s, color .2s, box-shadow .2s}
.rk-tekst a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.rk-tekst a:hover{background:var(--grafit);color:var(--panel);box-shadow:inset 0 0 0 1px var(--grafit)}
.rk-tekst a:hover svg{transform:translateX(4px)}
.rk-tekst a:active{transform:scale(.98)}
.rk-tekst a:focus-visible{outline:2px solid var(--zielen);outline-offset:3px}

/* szczegół programu w kaflu: ten sam zestaw części co karty wejść (.mk), w skali em */
.rk-widok{margin-top:auto;font-size:clamp(11px, .95vw, 14px);line-height:1.35;color:var(--grafit);background:var(--panel);
  border:1px solid var(--linia);border-radius:12px;overflow:hidden;box-shadow:var(--cien);font-variant-numeric:tabular-nums lining-nums}
.rk-widok 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}
.rk-widok .mk-glowa{height:3.2em}
.rk-widok .o-tytul{font-size:1.1em;overflow:hidden;text-overflow:ellipsis}
.rk-kroki{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));column-gap:1.2em;padding:1em 1.1em 1.2em}
.rk-kroki .mk-et{grid-column:1 / -1;margin:.6em 0 .3em .3em}
.rk-kroki .mk-et:first-child{margin-top:0}
.rk-kroki .o-btn{grid-column:1 / -1;justify-self:start;margin-top:1em}
.rk-kroki .o-st{transition:background-color .3s, border-color .3s}
.rk-kroki .o-st:not(.ok) svg{opacity:0}
.rk-widok > .mk-wyspa-glowa{padding:0 1.1em}
.rk-widok > .mk-wiersz{margin:0 1.1em}
.rk-lista{padding:.6em .6em .4em}
.rk-et{font-size:.8em;font-weight:600;color:var(--popiel);padding:.3em .6em .5em}
/* Rejestry: okno wpisu do repertorium wypełnia się z pliku aktu */
.rk-rej{padding:.6em .6em 1em}
.rk-plik{display:flex;align-items:center;gap:.6em;margin:0 .6em;padding:.6em .8em;border:1px solid var(--linia);border-radius:.6em;background:var(--kamien);font-size:.9em}
.rk-plik span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-pola{margin:.5em .6em 0}
.rk-lista .rk-pola{margin:.2em .6em .4em;border-top:1px solid var(--linia)}
.rk-lista .rk-pola > div:last-child, .rk-rej .rk-pola > div:last-child{border-bottom:0}
.rk-odp{margin-top:1.1em;padding-top:1em;border-top:1px solid var(--linia);display:grid;gap:.8em}
.rk-odp .o-pill{font-size:.8em;vertical-align:.1em;margin-left:.2em}
.rk-pola > div{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.6em 0;border-bottom:1px solid var(--linia)}
.rk-pola dt{color:var(--popiel);font-size:.9em}
.rk-pola dd{font-weight:500;text-align:right}
.rk-cytat{margin:.8em .6em 0;padding-left:.8em;border-left:1px solid var(--zielen);color:var(--popiel);font-size:.9em}

@media (max-width:1019px){
  .rk, .rk-7, .rk-5{grid-column:1 / -1}
}
@media (max-width:639px){
  .rk-kroki{grid-template-columns:minmax(0,1fr)}
  .rk-widok{font-size:12px}
}

/* rodzina: „Co nadchodzi” oddzielone od kafli */
.rk-siatka + .nadchodzi{margin-top:clamp(40px, 4vw, 64px);padding-top:clamp(22px, 2.2vw, 30px);border-top:1px solid var(--grafit)}

/* pierwszy ekran na telefonie: przy 48 px „sprawy.” zostawało samo w trzecim wierszu; przy 10,4vw fraza w <em> mieści się w jednym */
@media (max-width:440px){ #start h1{font-size:max(36px, 10.4vw)} }

/* ---------- pierwszy ekran: linia dowodu pod przyciskami ---------- */
.hero-dowod{margin:22px auto 0;display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:15px;line-height:1.5;color:var(--popiel)}
.hero-dowod span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--zielen);margin-right:10px;vertical-align:middle;position:relative;top:-1px}
@media (max-width:639px){ .hero-dowod{justify-content:flex-start} }
.hero-dowod a{color:var(--grafit);font-weight:500;text-decoration:underline;text-decoration-color:var(--linia-ciemna);text-underline-offset:4px;transition:text-decoration-color .2s}
.hero-dowod a:hover{text-decoration-color:var(--zielen)}
.hero-dowod a:focus-visible{outline:2px solid var(--zielen);outline-offset:3px;border-radius:2px}

/* ---------- liczby: jedna dominująca (szacunek), obok cztery zmierzone na liniach włosowych (wzór: stripe.com) ---------- */
#liczby{padding-bottom:var(--sek)}
.lb{margin-top:clamp(40px, 5vw, 72px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px, 5vw, 96px);align-items:start}
.lb-znak{display:inline-flex;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--bursztyn);background:var(--bursztyn-tlo)}
.lb-liczba{margin-top:clamp(12px, 1.4vw, 20px);display:flex;align-items:baseline;gap:.08em;font-family:var(--serif);font-size:clamp(112px, 14vw, 216px);line-height:.86;letter-spacing:-.035em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.lb-liczba b{font-weight:400}
.lb-ok{font-size:.2em;font-style:italic;letter-spacing:0;color:var(--popiel)}
.lb-co{margin-top:clamp(14px, 1.4vw, 22px);font-family:var(--serif);font-size:clamp(24px, 2.2vw, 32px);line-height:1.15;letter-spacing:-.01em}
/* Hours a month: second figure of the estimate, under the same "szacunek" badge; half the scale of 80 % so one number still leads. */
.lb-godz{margin-top:clamp(22px, 2.2vw, 32px);padding-top:clamp(18px, 1.8vw, 26px);border-top:1px solid var(--linia-ciemna);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(16px, 1.6vw, 24px)}
.lb-godz-l{display:inline-flex;align-items:baseline;gap:.12em;font-family:var(--serif);font-size:clamp(48px, 4.6vw, 72px);line-height:1;letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.lb-godz-l b{font-weight:400;margin-right:.1em}
.lb-godz-l .lb-ok{font-size:.36em}
.lb-godz-o{flex:1 1 18ch;max-width:30ch;color:var(--popiel)}
.lb-godz-o b{display:block;font-weight:500;color:var(--grafit)}
.lb-lista{border-top:1px solid var(--grafit)}
.lb-lista > div{display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);gap:24px;align-items:baseline;padding:clamp(18px, 1.7vw, 24px) 0;border-bottom:1px solid var(--linia-ciemna)}
.lb-lista dt{font-family:var(--serif);font-size:clamp(36px, 3.1vw, 48px);line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.lb-lista dd{color:var(--popiel);max-width:52ch}
.lb-lista dd b{display:block;font-weight:500;color:var(--grafit)}
.lb-stopka{margin-top:clamp(28px, 3vw, 44px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px, 5vw, 96px);align-items:start}
.rejestr dd.rejestr-mocno{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--grafit);padding-top:0}
.lb-stopka .lb-akcja{grid-column:2}
.lb-akcja{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;font-family:var(--serif);font-size:clamp(20px, 1.7vw, 24px);line-height:1.25}
.lb-akcja span{max-width:26ch}
@media (max-width:899px){
  .lb, .lb-stopka{grid-template-columns:minmax(0,1fr)}
  .lb-stopka .lb-akcja{grid-column:auto}
}
@media (max-width:520px){
  .lb-lista > div{grid-template-columns:minmax(0,1fr);gap:8px}
}