/* ==========================================================================
   Podstrony /inne-procesy, /oferta, /oferta-bezplatny-audyt (OPIS-DESIGNU-v2 §7.2–§7.4)
   Linkowany po daplo.css. Mobile first: baza = telefon, potem 768 px i 1 024 px.
   Wyłącznie tokeny z daplo.css. Makiety: minimum 13 px tekstu, @container zamiast skalowania.
   ========================================================================== */

/* ---------- 0. Części przeniesione z glowna.css (strona ich nie linkuje) ---------- */
.plyw__t { font-size: 13px; font-weight: 600; color: var(--stal); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.wiersze { display: grid; gap: 16px; margin: 0; }
.wiersze li { display: flex; align-items: center; gap: 16px; }
.mini { width: 44px; aspect-ratio: 1 / 1.414; background: var(--papier); border: 1px solid var(--linia); border-radius: 2px; box-shadow: 0 2px 6px rgba(11, 13, 16, .08); position: relative; display: block;
  background-image: linear-gradient(var(--szkielet), var(--szkielet)), linear-gradient(var(--szkielet), var(--szkielet)), linear-gradient(var(--szkielet), var(--szkielet)), linear-gradient(var(--szkielet), var(--szkielet));
  background-size: 60% 3px, 76% 2px, 70% 2px, 52% 2px; background-position: 7px 8px, 7px 17px, 7px 23px, 7px 29px; background-repeat: no-repeat; }
.mini--err { border-color: var(--err); box-shadow: 0 0 0 2px var(--err-tlo); }
.mini--err::after { content: ""; position: absolute; right: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--err); }

.final .g12 { row-gap: 32px; align-items: start; }
.final__lewa { display: grid; gap: 20px; }
.final__lewa .kroz { margin-top: 12px; }
@media (min-width: 1024px) {
  .final .g12 { column-gap: 24px; }
  .final__lewa { padding-right: 48px; }
  .final__lewa .kroz { max-width: 360px; }
}

/* ---------- 1. Nagłówek podstrony H-A (§7.0) ---------- */
.pn { margin-top: 8px; overflow-x: clip; }
.pn__g { align-items: center; row-gap: 32px; }
.pn__tekst .etykieta { margin-bottom: 16px; }
.pn__lead { margin-top: 16px; max-width: 48ch; }
.pn__cta { margin-top: 32px; display: grid; justify-items: start; gap: 8px; }
.pn__akcja { margin-top: 28px; display: grid; gap: 24px; }
.pn__cena { display: flex; align-items: center; gap: 16px; }
.kwota { font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn__podpis { display: none; }
@media (min-width: 768px) {
  .pn__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
  .pn__akcja { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 32px; }
  .pn__akcja .btn { order: -1; }
}
@media (min-width: 1024px) {
  .pn { margin-top: 16px; padding-top: 72px; padding-bottom: 96px; }
  .pn__g { column-gap: 24px; }
  .pn__tekst { padding-right: 24px; }
  .pn__lead { font-size: 1.25rem; }
  .pn__podpis { display: block; margin-top: 56px; text-align: right; }
  .pn--okr { padding-top: 32px; }
  .pn--okr .pn__g { margin-top: 40px; }
}

/* okruszki (§5.5) */
.okr { font-size: .9375rem; font-weight: 500; color: var(--stal); margin: -8px 0 16px; }
.okr__pelne { display: none; }
.okr__wstecz { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: -2px; color: var(--czern); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; }
.okr__wstecz .ik { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .okr { margin: 0 0 8px; }
  .okr__wstecz { display: none; }
  .okr__pelne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
  .okr__pelne li { display: inline-flex; align-items: center; gap: 8px; }
  .okr__pelne a { display: inline-flex; align-items: center; min-height: 44px; color: var(--stal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
  .okr__pelne .ik { width: 16px; height: 16px; color: var(--stal); }
  .okr__pelne [aria-current] { color: var(--czern); font-weight: 600; }
}
@media (hover: hover) and (pointer: fine) { .okr__pelne a:hover { color: var(--czern); text-decoration-thickness: 2px; } }

/* ---------- 2. Nagłówek podstrony H-B (§7.0) ---------- */
.hb { padding-top: 32px; }
.hb__tekst .etykieta { margin-bottom: 16px; }
.hb__lead { margin-top: 16px; max-width: 60ch; }
@media (min-width: 1024px) { .hb { padding-top: 72px; } .hb__lead { font-size: 1.25rem; } }

/* ---------- 3. UI-09 mapa procesu (nagłówek /inne-procesy) ---------- */
.ui09k { max-width: 588px; margin-left: auto; overflow: visible; }
.ui09k > .mk { position: absolute; inset: 0; }
.ui09__ekran { padding: 16px 18px; gap: 16px; }
.ui09__leg { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--stal); white-space: nowrap; }
.ui09__leg i { display: block; width: 18px; border-top: 2px solid var(--przeplyw); }
.ui09__leg i.k { border-top: 2px dashed var(--stal); margin-left: 10px; }
.ui09__pl { position: relative; flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 40px auto; column-gap: 18px; padding: 0 10px 12px; }
.ui09__str { grid-row: 1 / 3; margin: 0 -10px -12px; border-radius: 8px; padding: 10px 10px; }
.ui09__str--r { grid-column: 1 / 3; border: 1.5px dashed var(--szkielet); }
.ui09__str--s { grid-column: 3 / 6; background: var(--panel); }
.ui09__str-t { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--stal); }
.ui09__str--s .ui09__str-t { color: var(--czern); }
.ui09__str-t .ik { width: 14px; height: 14px; }
.ui09__w { grid-row: 2; position: relative; z-index: 2; background: #fff; border: 1px solid var(--linia); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 3px; min-height: 150px; }
.ui09__w--r { border: 1.5px dashed var(--stal); }
.ui09__ik { width: 32px; height: 32px; border-radius: 6px; background: var(--tlo-2); display: grid; place-items: center; margin-bottom: 6px; flex: none; }
.ui09__ik .ik { width: 18px; height: 18px; }
.ui09__w b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.ui09__o { font-size: 13px; color: var(--stal); line-height: 1.3; }
.ui09__recz { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--err); line-height: 1.3; }
.ui09__recz .ik { width: 14px; height: 14px; }
.ui09__czas { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--szkielet); font-size: 13px; font-weight: 600; }
.ui09__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ui09__sum > div { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linia); border-radius: 8px; padding: 8px 12px; }
.ui09__sum b { display: block; font-size: 18px; font-weight: 600; line-height: 1.2; }
.ui09__sum span span { display: block; font-size: 13px; color: var(--stal); line-height: 1.3; }
.ui09__sum-err { color: var(--err); }
.ui09__sum-ok { color: var(--ok); }
.ui09k__prop { top: -30px; right: -44px; width: 252px; padding: 12px 14px; }
.ui09k__lista { display: grid; gap: 6px; margin: 0; }
.ui09k__lista li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.ui09k__lista .ik { color: var(--ok); margin-top: 2px; }
.ui09k__chip { left: -40px; bottom: -22px; }

/* UI-09m: kadr 350 × 280, trzy węzły w pionie */
.ui09m { position: relative; height: 296px; margin-top: 28px; overflow-x: clip; }
.ui09m__mk { position: absolute; left: 0; right: 0; top: 0; height: 280px; }
.ui09m__ekran { padding: 12px 14px; gap: 12px; }
.ui09m__lista { position: relative; display: grid; gap: 14px; }
.ui09m__w { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 7px 10px; background: #fff; border: 1px solid var(--linia); border-radius: 8px; }
.ui09m__w--r { border: 1.5px dashed var(--stal); }
.ui09m__w .ui09__ik { margin: 0; width: 30px; height: 30px; position: relative; z-index: 3; }
.ui09m__w b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.ui09m__w .ui09__o, .ui09m__w .ui09__recz { display: flex; }
.ui09m__chip { right: 8px; bottom: 0; }

/* ---------- 4. Klocki (§7.2 sekcja 2): karty z MK średnią na --panel ---------- */
.klocki { display: grid; gap: var(--karty-odstep); margin: 0; }
@media (min-width: 768px) { .klocki { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .klocki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.klocek { display: flex; flex-direction: column; overflow: hidden; }
.klocek__komp { position: relative; aspect-ratio: 5 / 4; padding: 56px 16px 0; background: var(--panel); border-radius: 15px 15px 0 0; overflow: hidden; container-type: inline-size; }
.klocek__pig { position: absolute; left: 16px; top: 12px; z-index: 4; }
.klocek__mk { height: calc(100% + 16px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.klocek__mk .mk__ekran { padding: 12px 14px; gap: 10px; }
.klocek__t { padding: 24px; display: grid; gap: 8px; align-content: start; flex: 1; }
@media (min-width: 1200px) {
  .klocek__komp { aspect-ratio: 7 / 5; padding: 56px 20px 0; }
  .klocek__t { padding: 24px 24px 28px; }
}
.klocki + .mk-podpis { margin-top: 16px; }

.kl-os { grid-template-columns: 30px minmax(0, 1fr) auto; }
.kl-st { font-size: 13px; color: var(--stal); white-space: nowrap; }
.kl-kto { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.kl-dok { padding: 0 10px; border-top: 1px solid var(--linia); }
.kl-dok:first-child { border-top: 0; }
.kl-skany { gap: 6px; }
@container (max-width: 330px) {
  .kl-st { display: none; }
  .kl-os { grid-template-columns: 30px minmax(0, 1fr); }
}

/* UI-05, UI-06, UI-07: wspólne makiety systemu dla zarządcy są w daplo.css */

/* ---------- 5. Sygnały i SC-01g (§7.2 sekcja 3) ---------- */
.syg__g { row-gap: 32px; align-items: start; }
.syg__lewa .etykieta { margin-bottom: 12px; }
.syg__lista { display: grid; gap: 20px; margin: 28px 0 0; }
.syg__lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
.syg__lista .ik { width: 24px; height: 24px; margin-top: 1px; }
.syg__lista .fakt, .syg__lista .podpis { display: block; }
.syg__lista .podpis { margin-top: 4px; }
@media (min-width: 1024px) { .syg__g { column-gap: 24px; } .syg__lewa { padding-right: 24px; } }

.sc1g { display: grid; gap: 18px; background: #fff; border-radius: var(--r-m); padding: 20px; }
.sc1g__naglowek { font-size: 1.0625rem; font-weight: 600; }
.sc1g__kol { display: grid; gap: 10px; align-content: start; position: relative; }
.sc1g__pora { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--stal); }
.sc1g__pora::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--stal); background: #fff; flex: none; }
.sc1g .wezel { padding: 10px 14px; }
.sc1g__stos { display: grid; grid-template-columns: repeat(3, 44px); gap: 10px; padding: 4px 0; }
.sc1g__klaw { display: none; }
.sc1g__blad { border-color: var(--err); }
.sc1g__ik-err { color: var(--err); }
.sc1g figcaption { margin-top: 0; }
@media (max-width: 1023px) {
  .sc1g { padding-left: 48px; position: relative; }
  .sc1g::before { content: ""; position: absolute; left: 23px; top: 76px; bottom: 150px; border-left: 2px dashed var(--stal); }
  .sc1g__pora::before { position: absolute; left: -30px; }
  .sc1g__naglowek { margin-left: -28px; }
  .sc1g figcaption { margin-left: -28px; }
}
@media (min-width: 1024px) {
  .sc1g { grid-template-columns: 188px minmax(0, 1fr) 172px; column-gap: 40px; row-gap: 20px; padding: 28px 32px 32px; align-items: start; }
  .sc1g__naglowek, .sc1g figcaption { grid-column: 1 / -1; }
  .sc1g__kol { gap: 12px; }
  .sc1g__kol--srodek { justify-items: center; padding-top: 20px; }
  .sc1g__stos { grid-template-columns: repeat(3, 46px); gap: 12px 14px; transform: rotate(-2deg); }
  .sc1g__stos .mini { width: 46px; }
  .sc1g__stos .mini:nth-child(odd) { transform: rotate(3deg) translateY(3px); }
  .sc1g__klaw { display: grid; grid-template-columns: repeat(5, 20px); gap: 4px; padding: 7px; border: 2px solid var(--czern); border-radius: 6px; background: #fff; margin: 6px 0 2px; }
  .sc1g__klaw i { height: 12px; border: 1.5px solid var(--szkielet); border-radius: 3px; }
  .sc1g__blad { max-width: 220px; }
  .sc1g__kol--prawa { padding-top: 48px; }
}

/* ---------- 6. Oś procesu: SC-05k, SC-05 (§8.13) ---------- */
.sc5k { --kroki: 3; }
.sc5k__glowka, .sc05__glowka { display: flex; align-items: center; gap: 12px; min-height: 24px; }
.sc5k__czas { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 600; color: var(--stal); }
.sc5k__czas .ik { width: 18px; height: 18px; }
.sc5k__g { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sc5k__g .pig { margin-bottom: 12px; }
.sc5k__stopka { margin-top: 40px; display: grid; justify-items: start; gap: 8px; }
@media (min-width: 768px) { .sc5k__stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; } }

.sc05 { --kroki: 5; }
.sc05__dzien { font-size: .9375rem; font-weight: 600; color: var(--stal); }
.sc05__karta { gap: 8px; }
.sc05__karta .il { width: 96px; height: 96px; }
.sc05__t { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.sc05__karta p { font-size: 1rem; line-height: 1.5; color: var(--stal); }
.sc05__ty { justify-self: start; align-self: end; min-height: 28px; padding: 2px 12px; font-size: .875rem; }
.sc05__ty .ik { width: 16px; height: 16px; }
.sc05__strona { margin-top: 32px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--tlo-2); border-radius: var(--r-m); }
.sc05__strona .poj { background: #fff; }
.sc05__strona .fakt, .sc05__strona .podpis { display: block; }
.sc05__strona .podpis { margin-top: 2px; }

@media (max-width: 1023px) {
  .sc5k::before, .sc05::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 40px; border-left: 2px solid var(--przeplyw); }
  .sc5k .os__krok, .sc05 .os__krok { grid-template-columns: 1fr; gap: 12px; padding-left: 40px; }
  .sc5k__glowka, .sc05__glowka { margin-left: -40px; gap: 16px; }
  .sc05__karta { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 12px; align-items: start; }
  .sc05__karta .il { grid-column: 2; grid-row: 1 / 3; }
  .sc05__karta > :not(.il) { grid-column: 1; }
  .sc05__karta p { grid-column: 1 / -1; }
  .sc05__ty { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sc5k .os__karta, .sc05 .os__karta { height: 100%; }
  .sc05 { gap: 16px; }
  .sc05 .os__krok { gap: 16px; }
  .sc05 .os__karta { padding: 20px; grid-template-rows: auto auto 1fr auto; }
  .sc05__strona { max-width: 760px; margin-inline: auto; }
}

/* ---------- 7. Lista warunków z nagłówkiem w kole (§8.12) ---------- */
.war__h { display: flex; align-items: center; gap: 14px; }
.war__ik { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.war__ik .ik { width: 22px; height: 22px; }
.war__ik--tak { background: var(--ok-tlo); color: var(--ok); }
.war__ik--nie { background: var(--tlo-2); color: var(--stal); }
.kafel--panel .war__ik--nie { background: var(--panel); }
.war .warunki__k { display: grid; align-content: start; }

/* ---------- 8. Case nieruchomości na czerni, UI-12 (§7.2 sekcja 6) ---------- */
.cn__g { row-gap: 24px; align-items: center; }
.cn__tekst { display: grid; gap: 20px; justify-items: start; align-content: start; }
.cn__tekst .etykieta { margin-bottom: -8px; }
.cn__tekst .lead { color: var(--mgla); }
.cn__pig { background: transparent; border-color: var(--mgla); color: #fff; }
.cn__pig .ik { color: #fff; }
.cn__pas { display: grid; gap: 0; margin: 4px 0 0; width: 100%; }
.cn__pas li { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px dashed var(--mgla); }
.cn__pas li:first-child { border-top: 0; padding-top: 0; }
.cn__pas b { font-size: var(--t-liczba); line-height: 1; font-weight: 600; letter-spacing: -.02em; min-width: 1.6em; }
.cn__pas span { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.cn__demo { display: grid; gap: 10px; justify-items: start; width: 100%; }
.cn__demo-w { font-size: .9375rem; color: var(--mgla); }
.cn__podpis { margin-top: 12px; color: var(--mgla); }
@media (max-width: 1023px) {
  .cn__tekst { display: contents; }
  .cn__tekst .etykieta { order: 1; margin-bottom: -12px; }
  .cn__tekst .h2 { order: 2; }
  .cn__obraz { order: 3; }
  .cn__tekst .lead { order: 4; }
  .cn__tekst .cn__pig { order: 5; justify-self: start; }
  .cn__pas { order: 6; }
  .cn__demo { order: 7; }
  .cn__tekst > .link { order: 8; }
}
@media (min-width: 768px) {
  .cn__pas { grid-template-columns: repeat(3, auto); justify-content: start; }
  .cn__pas li { display: grid; gap: 8px; padding: 0 28px; border-top: 0; border-left: 1px dashed var(--mgla); }
  .cn__pas li:first-child { padding-left: 0; border-left: 0; }
  .cn__pas span { font-size: .9375rem; max-width: 15ch; color: var(--mgla); font-weight: 500; }
}
@media (min-width: 1024px) {
  .cn__g { column-gap: 24px; }
  .cn__tekst { padding-right: 32px; }
  .cn__podpis { text-align: right; }
}

.ui12k { max-width: 588px; margin-left: auto; overflow: visible; aspect-ratio: 5 / 4; container-type: inline-size; }
@media (min-width: 768px) { .ui12k { aspect-ratio: 7 / 5; } }
.ui12__mk { position: absolute; left: 0; top: 0; width: 83%; height: 83%; border-color: var(--obrys-ciemne); }
.ui12__ekran { gap: 12px; padding-right: 30%; }
.ui12__kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ui12__kafle > div { border: 1px solid var(--linia); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; align-content: start; }
.ui12__kafle span { font-size: 13px; color: var(--stal); }
.ui12__kafle b { font-size: 16px; font-weight: 600; white-space: nowrap; }
.ui12__k3 { display: none !important; }
.ui12__pasek { display: block; height: 6px; border-radius: 3px; background: var(--tlo-2); overflow: hidden; }
.ui12__pasek i { display: block; width: 92%; height: 100%; border-radius: 3px; background: var(--czern); }
.ui12__w { grid-template-columns: minmax(0, 1.3fr) .5fr minmax(0, .9fr); }
.ui12__ok { display: inline-flex; align-items: center; gap: 4px; }
.ui12__ok .ik { width: 14px; height: 14px; color: var(--ok); }
.ui12__tel { right: 0; bottom: 0; width: 37.4%; min-width: 0; border-color: var(--obrys-ciemne); box-shadow: none; }
.ui12__tel-ekran { padding: 12px; gap: 8px; height: 100%; }
.ui12__lokal { font-size: 15px; font-weight: 600; line-height: 1.25; margin-bottom: 4px; }
.ui12__przycisk { display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 6px; border: 1px solid var(--linia); font-size: 13px; font-weight: 600; }
.ui12__przycisk--g { background: var(--czern); border-color: var(--czern); color: #fff; }
.ui12__fakt { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--linia); font-size: 13px; }
.ui12__fakt b { font-size: 13px; font-weight: 600; }
.ui12k__plyw { left: -32px; bottom: 36px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.ui12k__plyw b { display: block; font-size: 14px; font-weight: 600; }
.ui12k__plyw span span { display: block; font-size: 13px; color: var(--stal); }
@container (max-width: 480px) {
  .ui12__mk { width: 100%; height: 100%; }
  .ui12__tel { display: none; }
  .ui12__mk .mk__bok { display: none; }
  .ui12__mk .mk__app { grid-template-columns: 1fr; }
  .ui12__ekran { padding: 12px 14px; gap: 10px; }
  .ui12k__plyw { left: auto; right: 8px; bottom: 8px; }
}

/* ---------- 9. FAQ podstron: karty w kolumnach 1–8 ---------- */
.faqp__g { row-gap: 16px; }
.faqp__bok { display: flex; }
.faqp__bok .il { display: none; }
@media (min-width: 1024px) {
  .faqp__g { column-gap: 24px; }
  .faqp__bok { display: grid; justify-items: center; align-content: center; gap: 24px; }
  .faqp__bok .il { display: block; }
}

/* ---------- 10. /oferta: SC-04 (oś współpracy) ---------- */
.sc04 { margin-top: 40px; background: var(--panel); border-radius: var(--r-m); padding: 28px 20px 24px; }
.sc04__etapy { position: relative; display: grid; margin: 0; }
.sc04__etapy::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 60px; border-left: 2px solid var(--przeplyw); }
.sc04__e { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 12px; padding: 0 0 28px 40px; }
.sc04__e:last-child { padding-bottom: 8px; }
.sc04__linia { display: contents; }
.sc04__e .etap { position: absolute; left: 0; top: 3px; }
.sc04__il { grid-column: 2; grid-row: 1 / 3; }
.sc04__txt { grid-column: 1; grid-row: 1; }
.sc04__os { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
.sc04__bramka { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin: 24px 0 0 -40px; }
.sc04__kon { display: none; }
.sc04__bramka { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px 4px 10px; background: #fff; border: 1.5px solid var(--czern); border-radius: 999px; font-size: .9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.sc04__bramka .ik { width: 18px; height: 18px; }
.sc04__t { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.sc04__t a { color: inherit; text-decoration: none; }
.sc04__m { margin-top: 4px; font-size: .9375rem; font-weight: 600; color: var(--stal); }
.sc04__m b { color: var(--czern); }
.sc04__o { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; }
.sc04__os { display: flex; align-items: center; font-size: .9375rem; font-weight: 500; color: var(--stal); }
.sc04__av img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: var(--tlo-2); object-fit: cover; }
.sc04__av--2 { margin-left: -12px; }
.sc04__os > span:last-child { margin-left: 12px; }
.sc04 figcaption { margin-top: 20px; }
@media (hover: hover) and (pointer: fine) { .sc04__t a:hover { text-decoration: underline; text-underline-offset: .2em; } }
@media (min-width: 1024px) {
  .sc04 { margin-top: 56px; padding: 40px 48px 36px; }
  .sc04__etapy { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .sc04__etapy::before { display: none; }
  .sc04__e { grid-template-columns: 1fr; grid-template-rows: 96px 32px auto auto; row-gap: 20px; padding: 0; }
  .sc04__il { grid-row: 1; grid-column: 1; }
  .sc04__linia { display: grid; grid-template-columns: 24px 1fr auto 44px; align-items: center; grid-row: 2; }
  .sc04__e .etap { position: static; grid-column: 1; }
  .sc04__bramka { grid-column: 3; grid-row: 1; margin: 0; font-size: .875rem; }
  .sc04__kon { display: block; grid-column: 4; justify-self: end; width: 2px; height: 2px; }
  .sc04__txt { grid-row: 3; }
  .sc04__os { grid-row: 4; margin-top: 0; }
  .sc04 figcaption { margin-top: 28px; }
}

/* SC-16: z kim rozmawiasz */
.sc16 { margin-top: 48px; }
.sc16__tytul { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; margin-bottom: 20px; }
.sc16__g { position: relative; display: grid; }
.sc16__g::before { content: ""; position: absolute; left: 23px; top: 60px; bottom: 60px; border-left: 2px solid var(--przeplyw); }
.sc16__fl { margin: 0 0 12px 64px; font-size: .9375rem; font-weight: 600; color: var(--stal); }
.sc16__os { position: relative; z-index: 2; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 20px; }
.sc16__av { display: block; width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; background: #fff; }
.sc16__av img { width: 48px; height: 48px; border-radius: 50%; background: var(--tlo-2); object-fit: cover; }
.sc16__opis { display: grid; gap: 2px; justify-items: start; }
.sc16__opis b { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.sc16__opis > span:not(.pig) { font-size: .9375rem; color: var(--stal); line-height: 1.4; }
.sc16__co { font-weight: 600; }
.sc16__kontakt { margin-top: 8px; min-height: 28px; padding: 2px 12px; font-size: .875rem; }
.sc16__punkt { position: relative; z-index: 2; padding: 0 0 24px; }
.sc16__pig { background: #fff; border-color: var(--czern); }
.sc16__pig .ik { width: 18px; height: 18px; }
.sc16__ludzie { display: grid; }
@media (min-width: 1024px) {
  .sc16 { margin-top: 64px; padding-top: 48px; border-top: 1px dashed var(--szkielet); }
  .sc16__tytul { margin-bottom: 32px; }
  .sc16__g { grid-template-columns: minmax(0, 3fr) auto minmax(0, 8fr); column-gap: 48px; align-items: start; }
  .sc16__g::before { display: none; }
  .sc16__fl { margin: 0 0 16px; }
  .sc16__os { grid-template-columns: 1fr; gap: 14px; padding: 0; }
  .sc16__punkt { padding: 45px 0 0; }
  .sc16__ludzie { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
}

/* ---------- 11. /oferta: etapy w kolumnach 5/7 (blok .etp, bo .etap to koło etapu z daplo.css) ---------- */
.etp__g { display: grid; gap: 24px; }
.etp__glowa { display: grid; gap: 12px; justify-items: start; }
.etp__glowa .h2 { margin-top: 4px; }
.fakty { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 48px; width: 100%; margin: 8px 0 0; padding-top: 20px; border-top: 1px dashed var(--szkielet); }
.fakty dt { font-size: .9375rem; font-weight: 500; color: var(--stal); }
.fakty dd { margin: 6px 0 0; }
.fakty__w { font-size: 1.5rem; font-weight: 600; line-height: 1; padding-bottom: 4px; }
.kroki { margin: 0; display: grid; counter-reset: kr; }
.kroki li { counter-increment: kr; position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; padding-bottom: 20px; }
.kroki li::before { content: counter(kr); grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; background: var(--czern); color: #fff; display: grid; place-items: center; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.kroki li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; border-left: 1px dashed var(--szkielet); }
.kroki li:last-child { padding-bottom: 0; }
.kroki b { font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
.kroki li > span { font-size: 1rem; line-height: 1.5; color: var(--stal); }
.etp__obraz { min-width: 0; }
.etp__dost { display: grid; gap: 12px; justify-items: start; }
.etp__dost .dostajesz { width: 100%; }
.etp--panel { padding-top: 0; }
@media (min-width: 1024px) {
  .etp__g { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
  .etp__glowa { grid-column: 1 / span 5; grid-row: 1; }
  .etp__kroki { grid-column: 1 / span 5; grid-row: 2; }
  .etp__dost { grid-column: 1 / span 5; grid-row: 3; }
  .etp__obraz { grid-column: 6 / span 7; grid-row: 1 / span 3; align-self: center; padding-left: 40px; }
  .etp--odwr .etp__glowa, .etp--odwr .etp__kroki, .etp--odwr .etp__dost { grid-column: 8 / span 5; }
  .etp--odwr .etp__obraz { grid-column: 1 / span 7; padding: 0 40px 0 0; }
}

/* UI-10: strony raportu z audytu */
.rap { position: relative; aspect-ratio: 1 / 1.414; background: var(--papier); border: 1px solid var(--linia); border-radius: 2px; box-shadow: var(--cien); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--czern); overflow: hidden; }
.rap__g { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--linia); font-size: 13px; font-weight: 600; color: var(--stal); }
.rap__t { font-size: 16px; font-weight: 700; line-height: 1.25; margin-top: 4px; }
.rap__p { color: var(--stal); margin-top: -4px; }
.rap__mapa { position: relative; display: grid; gap: 6px; margin: 4px 0 0; }
.rap__mapa::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; border-left: 2px dashed var(--stal); }
.rap__mapa li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 28px; padding-right: 2px; }
.rap__mapa i { width: 12px; height: 12px; border-radius: 50%; background: var(--papier); border: 2px solid var(--stal); position: relative; z-index: 1; }
.rap__mapa b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rap__mapa span { font-weight: 600; color: var(--stal); }
.rap__zle { background: var(--err-tlo); border-radius: 4px; margin-left: -4px; padding-left: 4px; }
.rap__zle i { border-color: var(--err); }
.rap__zle span { color: var(--err); }
.rap__uwaga { display: flex; align-items: flex-start; gap: 8px; color: var(--stal); }
.rap__uwaga i { width: 10px; height: 10px; margin-top: 4px; border-radius: 2px; background: var(--err-tlo); box-shadow: inset 0 0 0 1px var(--err); flex: none; }
.rap__suma { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 8px; border-top: 2px solid var(--czern); }
.rap__suma span { font-weight: 600; color: var(--stal); }
.rap__suma b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.rap__tab { display: grid; margin-top: 2px; }
.rap__w { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px 52px; gap: 6px; align-items: center; padding: 6px 0 9px; border-bottom: 1px solid var(--linia); }
.rap__w > span:nth-child(n+2) { text-align: right; font-weight: 600; }
.rap__w i { position: absolute; left: 0; bottom: 3px; height: 3px; width: calc(var(--s) * .56); border-radius: 2px; background: var(--czern); opacity: .75; }
.rap__w--g { padding: 0 0 6px; color: var(--stal); font-weight: 600; }
.rap__w--g > span:nth-child(n+2) { font-weight: 600; }
.rap__w--s { border-bottom: 0; font-weight: 700; padding-top: 8px; }
.rap__w--s > span { font-weight: 700; }
.rap__kol { display: grid; gap: 12px; margin: 6px 0 0; }
.rap__kol li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.rap__nr { width: 24px; height: 24px; border-radius: 50%; background: var(--czern); color: #fff; display: grid; place-items: center; font-weight: 600; }
.rap__kol li > span:last-child { display: grid; gap: 3px; }
.rap__kol b { font-weight: 600; line-height: 1.3; }
.rap__kol span span { color: var(--stal); font-weight: 600; }
.rap__kol i { display: block; height: 6px; width: var(--s); border-radius: 3px; background: var(--czern); margin-top: 3px; }
.rap__prop { display: grid; gap: 8px; margin: 6px 0 0; }
.rap__prop li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--linia); border-radius: 4px; background: #fff; }
.rap__prop .ik { width: 16px; height: 16px; color: var(--ok); }
.rap__szk { display: grid; gap: 6px; margin-top: 6px; }
.rap__szk i { height: 4px; border-radius: 2px; background: var(--szkielet); opacity: .75; }
.rap__szk i:nth-child(2) { width: 84%; } .rap__szk i:nth-child(3) { width: 62%; }
.rap__dec { margin-top: auto; display: grid; gap: 2px; padding: 8px 10px; border-radius: 4px; background: var(--tlo-2); }
.rap__dec b { font-weight: 700; }
.rap__dec span { color: var(--stal); }

/* UI-10 rozkładówka w nagłówku audytu */
.ui10k { max-width: 588px; margin-left: auto; overflow: visible; }
.ui10k .rap { position: absolute; width: 47%; }
.ui10k__l { left: 2%; top: 3.5%; transform: rotate(-2.5deg); }
.ui10k__p { left: 48%; top: 0; transform: rotate(1.5deg); z-index: 2; }
.ui10k__plyw { left: -40px; bottom: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; z-index: 4; }
.ui10k__plyw .ik { color: var(--czern); }
.ui10k__plyw b { display: block; font-size: 15px; font-weight: 600; }
.ui10k__plyw span span { display: block; font-size: 13px; color: var(--stal); }
.ui10k__chip { right: -28px; top: -18px; }

/* UI-10m: jedna strona w kadrze 350 × 280 */
.ui10m { position: relative; height: 280px; margin-top: 28px; border-radius: var(--r-m); background: #fff; overflow: hidden; }
.ui10m__s { position: absolute; left: 22px; right: 22px; top: 22px; transform: rotate(-1deg); }
.ui10m__chip { right: 10px; bottom: 10px; }

/* UI-10 w /oferta#audyt: trzy strony w wachlarzu */
.rapk { position: relative; }
.rapk__tlo { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-m); background: var(--panel); overflow: hidden; container-type: inline-size; }
.rapk .rap { position: absolute; width: 45%; }
.rapk__1 { left: 4%; top: 6%; transform: rotate(-2.5deg); }
.rapk__2 { left: 50%; top: 3.5%; transform: rotate(2deg); z-index: 2; }
.rapk__chip { left: 16px; bottom: -18px; }
.rapk + .sr + .mk-podpis, .rapk ~ .mk-podpis { margin-top: 28px; }
@media (min-width: 768px) { .rapk__tlo { aspect-ratio: 7 / 5; } }
@container (max-width: 480px) {
  .rapk__1 { display: none; }
  .rapk__2 { left: 8%; width: 84%; top: 22px; transform: rotate(-1deg); }
}

/* „Co zostaje u Ciebie”: zbliżenia stron */
.zost { display: grid; gap: var(--karty-odstep); margin: 0; }
@media (min-width: 768px) { .zost { grid-template-columns: 1fr 1fr; } }
.zost__k { display: flex; flex-direction: column; overflow: hidden; }
.zost__komp { position: relative; aspect-ratio: 5 / 4; background: var(--panel); border-radius: 15px 15px 0 0; overflow: hidden; }
.zost__rap { position: absolute; left: 11%; width: 78%; top: 28px; transform: rotate(-1.5deg); }
.zost__rap--p { transform: rotate(1.5deg); }
.zost__t { padding: 24px; display: grid; gap: 8px; align-content: start; }
.zost__kom { margin-top: 24px; }
@media (min-width: 768px) { .zost__t { padding: 28px 32px 32px; } }
@media (min-width: 1024px) {
  .zost__komp { aspect-ratio: 7 / 5; }
  .zost__rap { left: 18%; width: 64%; top: 36px; }
}

/* SC-09: oś wdrożenia na przykładzie RJS */
.sc09__przyklad { margin-bottom: 20px; font-size: .9375rem; font-weight: 600; color: var(--stal); }
.sc09__g { position: relative; }
.sc09__mies { display: none; }
.sc09__os { position: relative; display: grid; gap: 18px; margin: 0; padding-left: 40px; }
.sc09__os::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; border-left: 2px solid var(--przeplyw); }
.sc09__e, .sc09__ms { position: relative; }
.sc09__e .etap { position: absolute; left: -40px; top: 0; }
.sc09__pkt { position: absolute; left: -32px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--przeplyw); z-index: 2; box-sizing: content-box; margin-left: -2px; }
.sc09__t { display: grid; gap: 2px; }
.sc09__t b { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.sc09__kon { display: none; }
.sc09 figcaption { margin-top: 20px; }
.sc09__karta { margin-top: 24px; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); padding: 20px; display: grid; gap: 16px; justify-items: start; }
.sc09__fakty { display: grid; gap: 0; margin: 0; width: 100%; }
.sc09__fakty li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--szkielet); }
.sc09__fakty li:first-child { border-top: 0; padding-top: 0; }
.sc09__fakty b { font-size: 2rem; line-height: 1; font-weight: 600; letter-spacing: -.02em; min-width: 2.2em; }
.sc09__fakty span { font-size: .9375rem; font-weight: 500; color: var(--stal); line-height: 1.4; }
@media (min-width: 768px) {
  .sc09__fakty { grid-template-columns: repeat(3, 1fr); }
  .sc09__fakty li { display: grid; gap: 8px; padding: 0 20px; border-top: 0; border-left: 1px dashed var(--szkielet); align-content: start; }
  .sc09__fakty li:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 1200px) {
  .sc09__g { padding-top: 40px; }
  .sc09__mies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: absolute; inset: 0 0 -12px; margin: 0; pointer-events: none; }
  .sc09__mies li { border-left: 1px dashed var(--szkielet); padding-left: 8px; font-size: .875rem; color: var(--stal); font-variant-numeric: tabular-nums; }
  .sc09__os { display: block; height: 176px; padding: 0; }
  .sc09__os::before { display: none; }
  .sc09__e, .sc09__ms { position: absolute; top: 0; }
  .sc09__e .etap { position: relative; left: -12px; top: 0; }
  .sc09__e--1 { left: 0; }
  .sc09__e--2 { left: 20%; }
  .sc09__e--3 { left: 80%; }
  .sc09__e .sc09__t { margin-top: 14px; padding-left: 0; max-width: 136px; }
  .sc09__kon { display: block; position: absolute; right: 0; top: 51px; width: 2px; height: 2px; }
}

/* SC-20: miesiąc utrzymania */
.sc20__ramka { display: grid; gap: 18px; padding: 20px 16px; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); }
.sc20__gora { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sc20__gora b { font-size: 1.0625rem; font-weight: 600; }
.sc20__gora span { font-size: .9375rem; color: var(--stal); }
.sc20__dni { position: relative; height: 18px; font-size: 13px; color: var(--stal); font-variant-numeric: tabular-nums; }
.sc20__dni span { position: absolute; left: calc((var(--d) - .5) / 30 * 100%); transform: translateX(-50%); line-height: 18px; }
.sc20__tor { display: grid; gap: 10px; }
.sc20__l { display: flex; align-items: flex-start; gap: 10px; }
.sc20__l .ik { margin-top: 2px; }
.sc20__l b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.sc20__l span span { display: block; font-size: .875rem; color: var(--stal); line-height: 1.4; }
.sc20__pas { position: relative; height: 16px; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: center; justify-items: center; }
.sc20__pas::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 2px solid var(--przeplyw); }
.sc20__pas--kopia i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--przeplyw); }
.sc20__pas--latki i { position: relative; width: 2px; height: 14px; border-radius: 1px; background: var(--przeplyw); }
.sc20__pas--siec { display: block; height: 14px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--przeplyw) 0 1px, transparent 1px 3px); }
.sc20__pas--siec::before { display: none; }
.sc20__os { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px dashed var(--szkielet); }
.sc20__av img { display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--tlo-2); object-fit: cover; }
.sc20__os b { display: block; font-size: 1rem; font-weight: 600; }
.sc20__os span span { display: block; font-size: .9375rem; color: var(--stal); }
@media (min-width: 1024px) {
  .sc20__ramka { grid-template-columns: 216px minmax(0, 1fr); column-gap: 28px; row-gap: 24px; padding: 28px 32px; align-items: center; }
  .sc20__gora, .sc20__os { grid-column: 1 / -1; }
  .sc20__dni { grid-column: 2; margin-bottom: -8px; }
  .sc20__tor { display: contents; }
}

/* „Co jest po Twojej stronie” */
.strona { display: grid; gap: 24px; padding: 28px 20px; background: var(--panel); border-radius: var(--r-m); }
.strona__glowa { display: grid; gap: 12px; justify-items: start; }
.strona__il { width: 96px; height: 96px; }
.strona__lista { display: grid; gap: 12px; margin: 0; }
.strona__lista li { display: flex; align-items: flex-start; gap: 16px; padding: 16px; background: #fff; border-radius: var(--r-s); }
.strona__lista .fakt, .strona__lista .podpis { display: block; }
.strona__lista .podpis { margin-top: 4px; }
.strona__belka { margin-top: 24px; }
@media (min-width: 1024px) {
  .strona { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 48px; padding: 48px; align-items: center; }
  .strona__il { width: 144px; height: 144px; margin-bottom: 12px; }
  .strona__lista { grid-template-columns: 1fr 1fr; gap: 16px; }
  .strona__lista li { padding: 20px; min-height: 100%; }
}

/* ---------- 12. Rezerwacja osadzona na stronie audytu (§7.4 sekcja 6, §8.8) ---------- */
.rezs__g { row-gap: 32px; align-items: start; }
.rezs__lewa { display: grid; gap: 16px; align-content: start; }
.rezs__lewa .etykieta { margin-bottom: -4px; }
.rezs__w { margin-top: 12px; }
.rezs__w .poj { background: #fff; }
.rezs__mail { margin-top: 4px; }
@media (max-width: 767px) {
  .rezs__k { padding-bottom: 12px; }
  .rezs__prawa .rez--osadz { margin-inline: calc(-1 * var(--p)); padding: 20px 12px 24px; min-height: 0; }
  .rezs__w { display: none; }
}
@media (min-width: 1024px) {
  .rezs__g { column-gap: 24px; }
  .rezs__lewa { padding-right: 40px; padding-top: 8px; }
}
.kafel--panel .dostajesz { background: #fff; }

/* ---------- Poprawki po rundzie 1 ---------- */
.plyw { color: var(--czern); }
.ui09__w { padding: 9px; }
@media (min-width: 1024px) {
  .sc5k .os__krok, .sc05 .os__krok { grid-template-rows: auto 1fr; align-content: start; }
  .sc5k__glowka, .sc05__glowka { display: grid; grid-template-rows: 22px 24px; row-gap: 14px; justify-items: start; align-items: center; }
  .sc5k__glowka .etap, .sc05__glowka .etap { grid-row: 2; }
  .sc5k__czas, .sc05__dzien { grid-row: 1; }
}
.sc5k .os__krok .etap, .sc05 .os__krok .etap { margin-top: 0; }
.ui09m__w { padding: 6px 10px; }
.ui09m__w .ui09__ik { width: 28px; height: 28px; }
.ui09m__lista { gap: 12px; }
.ui09m__chip { top: 22px; right: -6px; bottom: auto; }
.ui05 { grid-template-columns: 116px minmax(0, 1fr); }
.ui05__foto { aspect-ratio: 4 / 3; }
.ui05__licz { width: 60px; height: 60px; margin-top: 10px; }
.ui05__cyfry { margin-top: -10px; }
.ui05__licz i { bottom: 9px; width: 10px; height: 10px; margin-left: -5px; }
.ui05__zd { position: absolute; left: 6px; top: 6px; margin: 0; padding: 1px 6px 1px 4px; border-radius: 4px; background: rgba(11, 13, 16, .72); color: #fff; }

.sc16__punkt { display: flex; }

/* ---------- Poprawki po rundzie 1 (/oferta) ---------- */
.sc16__punkt { padding-top: 0; }
.sc16__os { align-content: start; }
@media (min-width: 1024px) { .sc16__punkt { padding-top: 48px; } }
.sc20__pas--kopia i { width: 4px; height: 4px; box-shadow: 0 0 0 2px var(--przeplyw); }
.sc09__msk { display: grid; gap: 6px; }
.sc09__msk > span { display: flex; gap: 10px; align-items: baseline; font-size: .9375rem; font-weight: 500; line-height: 1.35; }
.sc09__msk b { font-size: .875rem; font-weight: 600; color: var(--stal); min-width: 3em; }
@media (min-width: 1200px) {
  .sc09__mies { bottom: 0; }
  .sc09__os { height: 196px; }
  .sc09__ms { left: 78.4%; top: 76px; width: 268px; margin-left: -268px; padding: 12px 14px; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-s); z-index: 2; }
  .sc09__ms::before { content: ""; position: absolute; right: -1px; top: -64px; height: 64px; border-left: 1px dashed var(--stal); }
  .sc09__pkt { left: auto; right: -5px; top: -69px; margin: 0; }
  .sc09__msk > span { justify-content: flex-start; }
}
@media (min-width: 1200px) {
  .sc09__g { padding-left: 12px; }
  .sc09__mies { left: 12px; }
  .sc09__os { margin-left: 0; }
  .sc09__ms { left: 80%; margin-left: -284px; top: 80px; }
  .sc09__ms::before, .sc09__pkt { display: none; }
}
@container (max-width: 480px) { .rapk .rapk__2 { left: 8%; width: 84%; top: 22px; transform: rotate(-1deg); } }
.fakty { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 48px; align-items: stretch; }
.fakty > div { display: grid; grid-template-rows: auto 52px; align-items: end; }
.fakty dt { align-self: start; }
.fakty dd { margin: 0; }
@media (max-width: 1023px) {
  .sc04__txt { display: contents; }
  .sc04__t { grid-column: 1; grid-row: 1; align-self: end; }
  .sc04__m { grid-column: 1; grid-row: 2; align-self: start; }
  .sc04__il { grid-row: 1 / 3; align-self: center; }
  .sc04__o { grid-column: 1 / -1; grid-row: 3; }
  .sc04__os { grid-row: 4; }
  .sc04__bramka { grid-row: 5; }
}
.faqp--biala .faq__k { border-color: var(--linia); }
@media (hover: hover) and (pointer: fine) { .faqp--biala .faq__k:hover { border-color: var(--obrys-ui); } }
.faqp--biala .faqp__bok .il { --il-fill-2: var(--panel); }
.kafel--panel .warunki__k { border-color: transparent; }
@media (max-width: 1023px) {
  .sc05__karta { grid-template-columns: minmax(0, 1fr) 96px; }
  .sc05__karta > .il { grid-column: 2; grid-row: 1; }
  .sc05__karta > .sc05__t { grid-column: 1; grid-row: 1; align-self: center; }
  .sc05__karta > p:not(.il) { grid-column: 1 / -1; grid-row: 2; }
  .sc05__karta > .sc05__ty { grid-column: 1 / -1; grid-row: 3; }
  .faqp__bok { align-items: center; gap: 16px; margin-top: 8px; }
  .faqp__bok .il { display: block; width: 96px; height: 96px; }
}
@media (max-width: 1023px) {
  .sc5k::before, .sc05::before { display: none; }
  .sc5k .os__krok:not(:last-of-type)::before, .sc05 .os__krok:not(:last-of-type)::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: -16px; border-left: 2px solid var(--przeplyw); }
}
.kl-os .mk__av--m { font-size: 13px; }
.rap__w { padding: 6px 0 12px; }
.rap__w i { bottom: 4px; height: 5px; width: calc(var(--s) * .62); background: var(--szkielet); opacity: 1; }
.rap__kol i { height: 5px; background: var(--szkielet); }
.ui07__przyp { flex: none; }
.pn__podpis { display: block; margin-top: 12px; }
@media (min-width: 1024px) { .pn__podpis { margin-top: 56px; } }
.rap__w { grid-template-columns: minmax(0, 1fr) 24px 64px; }
.rap__w > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Runda 2: przedziały 1024–1199, czyste kadry, pływające karty ---------- */
@media (max-width: 1199px) { .od-1200 { display: none !important; } }
@media (min-width: 1200px) { .do-1200 { display: none !important; } }

/* wiersz makiety przecięty dolną krawędzią kadru znika (assets/js/oferta.js) */
.kadr-poza { visibility: hidden; }

/* UI-09: adres do lewej, żeby karta „Propozycja z audytu” nie zasłaniała tekstu */
.ui09k .mk__adres { margin-inline: 0 auto; justify-content: flex-start; padding: 0 10px; max-width: 260px; }
/* UI-09m: chip na dolnej krawędzi kadru, poza paskiem adresu i węzłami */
.ui09m { height: 304px; }
.ui09m__chip { top: auto; bottom: 0; right: 12px; }
@media (min-width: 768px) and (max-width: 1199px) { .ui09m { max-width: 560px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .ui09m { margin-left: auto; } }

/* SC-01g: 1024–1199 lista nad schematem, schemat na pełną szerokość */
@media (min-width: 1024px) and (max-width: 1199px) {
  .syg__g > .s-5, .syg__g > .s-7 { grid-column: 1 / -1; }
  .syg__lewa { padding-right: 0; }
  .syg__lista { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* UI-12: telefon lokatora z ostatnim odczytem */
.ui12__ost { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; margin-top: 4px; padding: 8px; border-radius: var(--r-s); background: var(--tlo-2); font-size: 13px; line-height: 1.3; }
.ui12__ost > span:first-child { color: var(--stal); }
.ui12__ost b { font-size: 14px; font-weight: 600; }
.ui12__ost-st { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.ui12__ost-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* SC-04: kolumny nie rozpychają się szerokością pigułki */
@media (min-width: 1024px) {
  .sc04__e { grid-template-columns: minmax(0, 1fr); }
  .sc04__txt, .sc04__os { min-width: 0; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .sc04 { padding-inline: 32px; }
  .sc04__bramka { padding: 4px 10px 4px 8px; font-size: .875rem; }
  .sc04__linia { grid-template-columns: 24px 1fr auto 24px; }
}

/* UI-10 w nagłówku audytu: karta pływająca pod lewą kartką, chip nad prawą */
.ui10k__plyw { left: -32px; bottom: -36px; }
.ui10k__chip { right: -24px; top: -40px; }
.pn--okr .pn__podpis { margin-top: 64px; }

/* UI-10m: kadr z przycięciem, chip na jego dolnej krawędzi */
.ui10m { height: auto; overflow: visible; background: none; border-radius: 0; padding-bottom: 20px; }
.ui10m__kadr { position: relative; height: 280px; border-radius: var(--r-m); background: #fff; overflow: hidden; }
.ui10m__s { left: 50%; right: auto; width: min(100% - 44px, 420px); transform: translateX(-50%) rotate(-1deg); }
.ui10m__chip { right: 12px; bottom: 0; }
@media (min-width: 768px) and (max-width: 1199px) { .ui10m { max-width: 560px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .ui10m { margin-left: auto; } }

/* „Co zostaje u Ciebie”: dwie kolumny od 1024, pod spodem jedna z kartką najwyżej 420 px */
@media (min-width: 768px) and (max-width: 1023px) {
  .zost { grid-template-columns: 1fr; }
  .zost__komp { aspect-ratio: 7 / 5; }
  .zost__rap { left: 50%; width: min(64%, 420px); transform: translateX(-50%) rotate(-1.5deg); }
  .zost__rap--p { transform: translateX(-50%) rotate(1.5deg); }
}
/* tabela w klocku nie rośnie do szerokości najdłuższej nazwy dokumentu */
.klocek .mk__tab { grid-template-columns: minmax(0, 1fr); }
@container (max-width: 340px) { .ui06__zakl span:nth-child(3) { display: none; } }
/* UI-09: węzły równej wysokości z siatki, bez sztywnego minimum (kadr 1200–1300 px) */
.ui09__w { min-height: 0; }
.ui09k { container-type: inline-size; }
@container (max-width: 540px) {
  .ui09__ekran { padding: 12px 14px; gap: 12px; }
  .ui09__pl { column-gap: 12px; padding: 0 6px 10px; }
  .ui09__str { margin: 0 -6px -10px; padding: 8px 6px; }
  .ui09__w { padding: 8px 7px; }
  .ui09__ik { width: 28px; height: 28px; margin-bottom: 4px; }
}
@container (max-width: 520px) { .ui09__o { display: none; } .ui09__w { gap: 2px; } }
/* wiersz tabeli lub listy przecięty kadrem zostaje jako pasek szkieletu (§4.1: resztę zastępują paski --szkielet) */
.mk__tr.kadr-poza, .mk__dok.kadr-poza, .rap__w.kadr-poza, .rap__mapa > li.kadr-poza, .rap__prop > li.kadr-poza, .rap__kol > li.kadr-poza { visibility: visible; position: relative; }
:is(.mk__tr, .mk__dok, .rap__w, .rap__mapa > li, .rap__prop > li, .rap__kol > li).kadr-poza > * { visibility: hidden; }
:is(.mk__tr, .mk__dok, .rap__w, .rap__mapa > li, .rap__prop > li, .rap__kol > li).kadr-poza::after {
  content: ""; position: absolute; left: 12px; top: 50%; width: 52%; height: 8px; margin-top: -4px;
  border-radius: 4px; background: var(--szkielet); opacity: .55;
}
:is(.rap__w, .rap__mapa > li, .rap__kol > li).kadr-poza::after { left: 0; height: 6px; margin-top: -3px; border-radius: 2px; }
/* klocki: gęstsze wiersze, żeby trzy osoby mieściły się w kadrze 384 × 274 */
.klocek__mk .mk__ekran { gap: 8px; }
.klocek .mk__tr { min-height: 36px; }
.klocek .mk__szukaj { height: 30px; }
.klocek .mk__tr.ui06__w { min-height: 48px; padding-block: 6px; }
/* „Co jest po Twojej stronie”: 1024–1199 nagłówek nad listą, lista w dwóch kolumnach na pełną szerokość */
@media (min-width: 1024px) and (max-width: 1199px) {
  .strona { grid-template-columns: 1fr; row-gap: 32px; }
  .strona__glowa { grid-template-columns: 144px minmax(0, 1fr); column-gap: 32px; align-items: center; }
  .strona__glowa .strona__il { grid-row: 1 / 3; margin: 0; }
}
/* SC-04: awatary bez odstępu linii bazowej, wiersze kolumn wyrównane przez subgrid */
.sc04__av, .sc04__av picture { display: block; line-height: 0; }
@media (min-width: 1024px) {
  .sc04__etapy { grid-template-rows: 96px 32px auto auto; row-gap: 20px; }
  .sc04__e { grid-row: span 4; grid-template-rows: subgrid; }
}
.sc04__os { align-self: start; }
@container (max-width: 300px) {
  .ui05 { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .ui05__licz { width: 52px; height: 52px; margin-top: 12px; }
  .ui05__licz i { bottom: 6px; }
}
.etp[id] { scroll-margin-top: calc(24px - var(--sekcja)); }
.etp__powrot { width: auto; align-self: flex-start; margin-bottom: 20px; gap: 8px; }

/* Przykładowy harmonogram budowy (26.09), zamiast osi SC-09 z case study */
.hm { margin: 0; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); padding: 28px 28px 24px; }
.hm__tyt { margin: 0 0 20px; font-weight: 600; font-size: 1.0625rem; }
.hm__g { --lab: 210px; position: relative;
  background-image: linear-gradient(to right, var(--linia) 1px, transparent 1px);
  background-size: calc((100% - var(--lab)) / 4) 100%; background-position: var(--lab) 0; background-repeat: repeat-x; }
.hm__lista { margin: 0; padding: 0; list-style: none; }
.hm__w { display: grid; grid-template-columns: var(--lab) repeat(8, minmax(0, 1fr)); align-items: center; min-height: 44px; margin: 0; }
.hm__w--glowa { min-height: 32px; font-size: .8125rem; font-weight: 600; color: var(--stal); }
.hm__w--glowa > span:not(.hm__n) { padding-left: 10px; }
.hm__n { grid-column: 1; grid-row: 1; padding-right: 16px; font-size: .9375rem; }
.hm__pas { grid-row: 1; height: 14px; margin: 0 4px; border-radius: 7px; background: var(--czern); }
.hm__pas--akc { background: var(--sygnal); }
html[data-wariant="b"] .hm__pas--akc { background: #17ABAF; }
.hm__w--start .hm__n { font-weight: 600; }
.hm__meta { grid-row: 1; justify-self: end; margin-right: -4px; }
.hm__meta .pig { white-space: nowrap; }
.hm figcaption { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linia); font-size: .875rem; color: var(--stal); }
@media (max-width: 767px) {
  .hm { padding: 20px 16px; }
  .hm__g { --lab: 118px; }
  .hm__n { font-size: .8125rem; padding-right: 8px; }
  .hm__w--glowa > span:not(.hm__n) { padding-left: 4px; font-size: .6875rem; }
  .hm__pas { height: 10px; margin: 0 2px; }
  .hm__meta .pig { font-size: .75rem; padding: 2px 8px; }
}
.hm__g { --lab: 250px; background: none; }
.hm__g::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--lab); right: 0; pointer-events: none;
  background: linear-gradient(to right, var(--linia) 1px, transparent 1px) 0 0 / 25% 100%; border-right: 1px solid var(--linia); }
.hm__w { position: relative; }
.hm figcaption { max-width: none; }
@media (max-width: 767px) {
  .hm__g { --lab: 0px; }
  .hm__w { grid-template-columns: 0 repeat(8, minmax(0, 1fr)); row-gap: 6px; padding: 6px 0; min-height: 0; }
  .hm__w--glowa { padding: 0 0 4px; }
  .hm__w--glowa > span:not(.hm__n) { white-space: nowrap; }
  .hm__n { grid-column: 1 / -1; grid-row: 1; padding: 0 0 0 4px; font-size: .875rem; }
  .hm__pas, .hm__meta { grid-row: 2; }
  .hm__w--start .hm__meta { grid-row: 1; }
}
/* Zamiast czarnej belki: linia z linkiem jak na stronie głównej (26.09) */
.strona__dalej { margin: 48px 0 0; text-align: center; font-size: 1.0625rem; line-height: 1.6; color: var(--stal); text-wrap: balance; }
.strona__dalej .link { color: var(--czern); margin-left: 6px; min-height: 0; vertical-align: baseline; }
@media (max-width: 767px) { .strona__dalej { margin-top: 32px; text-align: left; } .strona__dalej .link { display: inline-flex; margin: 8px 0 0; } }
@media (max-width: 767px) { .strona__dalej .link { min-height: 44px; } }
/* Audyt mobilny 27.09: harmonogram na telefonie, podpisy na tle, linie tygodni nie przechodzą przez tekst */
@media (max-width: 767px) {
  .hm__n { position: relative; z-index: 1; justify-self: start; background: #fff; padding-right: 8px; }
  .hm__w { position: relative; }
  .hm__pas { position: relative; z-index: 1; }
}
/* oś „Jak podchodzimy do procesu” na telefonie: mniejsze wcięcie, szerszy tekst */
@media (max-width: 767px) {
  .sc5k .os__krok, .sc05 .os__krok { padding-left: 32px; }
  .sc5k__glowka, .sc05__glowka { margin-left: -32px; gap: 8px; }
  .sc5k .os__karta, .sc05 .os__karta { padding: 20px 16px; }
}