/* Kamerton: strona pokazowa stylu OFERTA (biblioteka HVMBAK, Nº 004).
   Każda sekcja to arkusz z dużym promieniem na ciepłym szarym tle; następny wjeżdża na poprzedni. */

:root {
  --rama: #dcd6ca;
  --kosc: #f4eddd;
  --filc: #a3141b;
  --ochra: #efb22f;
  --sukno: #163f2a;
  --heban: #18130f;
  --promien: clamp(24px, 2.8vw, 44px);
  --ramka: 12px;

  --nav: 64px;
  --wnetrze: clamp(22px, 4vw, 64px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --szeryf: 'Young Serif', Georgia, 'Times New Roman', serif;
  --grotesk: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
}
@media (max-width: 899px) { :root { --nav: 56px; } }
@media (max-width: 699px) { :root { --ramka: 8px; } }

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--rama);
}

body {
  margin: 0;
  background: var(--rama);
  color: var(--heban);
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* ---------- nawigacja na ramie ---------- */
.nawigacja {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 calc(var(--ramka) + var(--wnetrze) * .5);
  padding-left: max(calc(var(--ramka) + var(--wnetrze) * .5), env(safe-area-inset-left));
  padding-right: max(calc(var(--ramka) + var(--wnetrze) * .5), env(safe-area-inset-right));
  background: var(--rama);
  color: var(--heban);
  --p-tlo: var(--filc);
  --p-na: var(--kosc);
}
.znak {
  justify-self: start;
  font-family: var(--szeryf);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
}
.nav-linki { display: flex; gap: 32px; }
.nav-linki a {
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .3s var(--ease);
}
.nav-linki a:hover { background-size: 100% 1.5px; }
.nav-przycisk { justify-self: end; }
.nav-menu {
  display: none;
  justify-self: end;
  border: 0;
  background: none;
  padding: 10px 0;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.nav-menu-zamknij { display: none; }
.menu-otwarte .nav-menu-otworz { display: none; }
.menu-otwarte .nav-menu-zamknij { display: inline; }

/* ---------- menu na telefonie: arkusz zjeżdża z góry ---------- */
.menu {
  position: fixed;
  z-index: 35;
  top: var(--nav);
  left: var(--ramka);
  right: var(--ramka);
  padding: 18px var(--wnetrze) var(--wnetrze);
  background: var(--kosc);
  color: var(--heban);
  border-radius: 0 0 var(--promien) var(--promien);
  transform: translateY(calc(-100% - var(--nav) - 20px));
  visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s linear .5s;
  --p-tlo: var(--filc);
  --p-na: var(--kosc);
}
.menu-otwarte .menu { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
.menu-linki { display: flex; flex-direction: column; margin-bottom: 28px; }
.menu-linki a {
  font-family: var(--szeryf);
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--heban) 28%, var(--kosc));
}
.menu-przycisk { width: 100%; }
.zaslona {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--rama);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.menu-otwarte .zaslona { opacity: .7; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
@media (min-width: 900px) { .menu, .zaslona { display: none; } }

/* ---------- arkusze ---------- */
.arkusze { display: contents; }          /* arkusze i stopka mają wspólnego rodzica (body), więc stopka też wjeżdża na formularz */
.kotwica { display: block; height: 0; scroll-margin-top: var(--nav); }

.arkusz-kosc  { --tlo-a: var(--kosc);  --na: var(--heban); --p-tlo: var(--filc);  --p-na: var(--kosc); }
.arkusz-filc  { --tlo-a: var(--filc);  --na: var(--kosc);  --p-tlo: var(--kosc);  --p-na: var(--filc); }
.arkusz-ochra { --tlo-a: var(--ochra); --na: var(--heban); --p-tlo: var(--heban); --p-na: var(--ochra); }
.arkusz-sukno { --tlo-a: var(--sukno); --na: var(--kosc);  --p-tlo: var(--ochra); --p-na: var(--heban); }
.arkusz-heban { --tlo-a: var(--heban); --na: var(--kosc);  --p-tlo: var(--ochra); --p-na: var(--heban); }

.arkusz {
  --na-2: color-mix(in srgb, var(--na) 78%, var(--tlo-a));
  --linia: color-mix(in srgb, var(--na) 28%, var(--tlo-a));
  position: relative;
  margin: 0 var(--ramka) var(--ramka);
  border-radius: var(--promien);
  overflow: hidden;
  isolation: isolate;
  background: var(--tlo-a);
  color: var(--na);
  transform-origin: 50% var(--os, 50%);
}
/* przyciemnienie arkusza, na który wjeżdża następny: jedyny gradient na stronie */
.arkusz::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / .32));
  opacity: var(--cien, 0);
}
.stos .arkusz { position: sticky; top: var(--przyklej, var(--nav)); }
/* arkusz tuż przed stopką i stopka przewijają się zwyczajnie, żeby stopka nie została na formularzu */
.stos .arkusz.bez-przyklejania, .stos .arkusz.luzny { position: relative; top: auto; }
.arkusz.schowany { visibility: hidden; }
@media (min-width: 900px) {
  .arkusz { min-height: calc(100vh - var(--nav) - var(--ramka)); min-height: calc(100svh - var(--nav) - var(--ramka)); }
}

.arkusz-wnetrze {
  position: relative;
  padding: calc(var(--wnetrze) * 1.2) var(--wnetrze);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  min-width: 0;
}
.arkusz:not(.arkusz-pol) { display: flex; flex-direction: column; }
.arkusz:not(.arkusz-pol) > .arkusz-wnetrze { flex: 1 1 auto; width: 100%; max-width: calc(1320px + var(--wnetrze) * 2); margin: 0 auto; }

/* układ pół na pół: zdjęcie dochodzi do trzech krawędzi arkusza */
.arkusz-pol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.arkusz-pol > .arkusz-wnetrze { max-width: none; }
.zdjecie { position: relative; overflow: hidden; background: color-mix(in srgb, var(--na) 12%, var(--tlo-a)); }
.zdjecie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  will-change: transform;
}
.zdjecie-pol { min-height: 100%; }
.zdjecie-pol img { position: absolute; inset: 0; }
.zdjecie-pas { width: 100%; aspect-ratio: 21 / 9; max-height: 45svh; }

/* ---------- typografia ---------- */
.h1, .h2, .h3 { font-family: var(--szeryf); font-weight: 400; text-wrap: balance; }
.h1 {
  font-size: clamp(46px, 5.9vw, 100px);
  line-height: .98;
  letter-spacing: -.02em;
  max-width: 11em;
}
.h2 {
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 14em;
}
.h3 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.12;
  letter-spacing: -.005em;
}
.wstep {
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.45;
  max-width: 32em;
  text-wrap: pretty;
}
.tekst, .arkusz p { text-wrap: pretty; }
.tekst { max-width: 34em; }
.etykieta {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
}
.etykieta .nr { font-variant-numeric: tabular-nums; margin-right: 12px; }
.glowa { display: flex; flex-direction: column; gap: 24px; }
.glowa .wstep, .glowa .tekst { margin-top: 4px; }

/* ---------- przyciski ---------- */
.przycisk {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: calc(var(--promien) / 2);
  background: var(--p-tlo);
  color: var(--p-na);
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s var(--ease);
}
.przycisk::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.przycisk:hover::after { opacity: .12; }
.przycisk:active { transform: translateY(1px); }
.przycisk-maly { height: 44px; padding: 0 20px; font-size: 15px; }

/* ---------- hero ---------- */
.hero {
  --wystaje: 44px;   /* u dołu pierwszego ekranu widać krawędź następnego arkusza */
  height: calc(100vh - var(--nav) - var(--ramka) * 2 - var(--wystaje));
  height: calc(100svh - var(--nav) - var(--ramka) * 2 - var(--wystaje));
  min-height: 540px;
}
.hero-tekst { justify-content: space-between; }
.hero-dol { display: flex; flex-direction: column; align-items: flex-start; }
.hero-wstep { margin: 28px 0 32px; }
.stan { margin-top: 16px; font-weight: 500; font-size: 15px; color: var(--na-2); }

/* ---------- 01 lista sytuacji ---------- */
.powody { border-bottom: 1px solid var(--linia); }
.powody li { padding: 22px 0; border-top: 1px solid var(--linia); }
.powody p { margin-top: 6px; color: var(--na-2); max-width: 34em; }

/* ---------- 02 pary nazwa i opis ---------- */
.pary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.pary li { padding: 20px 0 22px; border-top: 1px solid var(--linia); }
.pary p { margin-top: 8px; color: var(--na-2); }

/* ---------- 03 kroki ---------- */
.kroki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
.kroki li { padding: 0 24px; border-left: 1px solid var(--linia); display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.kroki li:first-child { padding-left: 0; border-left: 0; }
.kroki li:last-child { padding-right: 0; }
.krok-nr {
  display: block;
  font-family: var(--szeryf);
  font-size: clamp(64px, 7vw, 112px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: 20px;
}
.kroki p { margin-top: 10px; color: var(--na-2); }

/* ---------- 04 cennik ---------- */
.cennik-dol { display: flex; flex-direction: column; gap: 48px; }
.ceny { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
.ceny li { padding: 0 24px; border-left: 1px solid var(--linia); display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.ceny li:first-child { padding-left: 0; border-left: 0; }
.ceny li:last-child { padding-right: 0; }
.cena {
  margin-top: 28px;
  font-family: var(--szeryf);
  font-size: clamp(44px, 4.4vw, 68px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ochra);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.ceny .opis { margin-top: 16px; color: var(--na-2); max-width: 22em; }
.cennik-stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding-top: 28px;
  border-top: 1px solid var(--linia);
}
.dopisek { color: var(--na-2); max-width: 40em; }

/* ---------- 05 o mnie ---------- */
.o-mnie-dol { display: flex; flex-direction: column; gap: 40px; }
.fakty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fakty li { padding: 0 20px; border-left: 1px solid var(--linia); display: flex; flex-direction: column; gap: 10px; }
.fakty li:first-child { padding-left: 0; border-left: 0; }
.fakt-liczba {
  font-family: var(--szeryf);
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.fakt-male { font-size: .36em; letter-spacing: 0; vertical-align: .15em; }
.fakt-podpis { font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--na-2); }

/* ---------- 06 opinie ---------- */
.opinie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opinie li { padding: 0 28px; border-left: 1px solid var(--linia); display: flex; flex-direction: column; }
.opinie li:first-child { padding-left: 0; border-left: 0; }
.opinie li:last-child { padding-right: 0; }
.opinie blockquote p {
  font-family: var(--szeryf);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: pretty;
  hanging-punctuation: first;
}
.opinia-kto { margin-top: auto; padding-top: 28px; font-weight: 500; font-size: 15px; }
.opinia-co { font-size: 15px; color: var(--na-2); }

/* ---------- 07 pytania ---------- */
.pytania { border-bottom: 1px solid var(--linia); }
.pytanie { border-top: 1px solid var(--linia); }
.pytanie-przycisk {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.plus { position: relative; flex: 0 0 22px; width: 22px; height: 22px; display: none; }
.js .plus { display: block; }
.plus::before, .plus::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1.5px;
  margin-top: -.75px;
  background: currentColor;
}
.plus::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.otwarte .plus::after { transform: rotate(90deg) scaleX(0); }
.odpowiedz p { max-width: 40em; padding: 0 46px 24px 0; color: var(--na-2); }
.js .odpowiedz { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.js .otwarte .odpowiedz { grid-template-rows: 1fr; }
.js .odpowiedz > div { overflow: hidden; min-height: 0; }

/* ---------- 08 formularz ---------- */
.formularz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  --pole: calc(var(--promien) / 2);
}
.pole { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pole-cale { grid-column: 1 / -1; }
.pole-etykieta { font-weight: 500; font-size: 15px; line-height: 1.3; padding: 0; }
.pole input, .pole select, .pole textarea {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--pole);
  background: var(--kosc);
  color: var(--heban);
  font-size: 17px;
  appearance: none;
  -webkit-appearance: none;
}
.pole textarea { height: auto; min-height: 104px; padding: 15px 18px; line-height: 1.45; resize: vertical; }
.pole textarea::placeholder { color: color-mix(in srgb, var(--heban) 62%, var(--kosc)); }
.pole select {
  padding-right: 48px;
  background-image: linear-gradient(45deg, transparent 50%, var(--heban) 50%), linear-gradient(-45deg, transparent 50%, var(--heban) 50%);
  background-size: 7px 7px, 7px 7px;
  background-position: calc(100% - 26px) 50%, calc(100% - 19px) 50%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.pole input:focus-visible, .pole select:focus-visible, .pole textarea:focus-visible,
.wybor input:focus-visible + span { outline: 2px solid var(--heban); outline-offset: 2px; border-radius: var(--pole); }
.pole [aria-invalid="true"] { outline: 2px solid var(--kosc); outline-offset: 2px; }
.pole-blad { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--kosc); }
.wybor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wybor label { position: relative; }
.wybor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wybor span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: var(--pole);
  background: var(--kosc);
  color: var(--heban);
  font-size: 17px;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.wybor input:checked + span { background: var(--heban); color: var(--kosc); }
.formularz-wyslij { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.odpowiedz-formularza { font-weight: 500; font-size: 15px; max-width: 26em; }
.tel { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* ---------- stopka: ostatni arkusz ---------- */
.stopka { min-height: 0 !important; margin-bottom: var(--ramka); }
.stopka .arkusz-wnetrze { gap: 48px; }
.stopka-znak {
  font-family: var(--szeryf);
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.stopka-kolumny { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 24px; }
.stopka-kolumny > div { padding-top: 16px; border-top: 1px solid var(--linia); }
.stopka-naglowek { font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--na-2); margin-bottom: 8px; }
.stopka a { text-decoration: none; }
.stopka a:hover { text-decoration: underline; text-underline-offset: 4px; }
.stopka-druk { font-size: 13px; color: var(--na-2); }

/* ---------- ruch ---------- */
/* wiersze H1 wysuwają się spod maski; zapas w masce, żeby nie ciąć ogonków ą, ę, ł */
/* kontener wierszy jest flexem, bo ujemne marginesy sąsiednich bloków by się zlały i nagłówek podskoczyłby po animacji */
.wiersze { display: flex; flex-direction: column; }
.w { display: block; overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.w-in { display: block; }
.ruch .h1 .w-in { transform: translateY(110%); }
.ruch.zaladowana .h1 .w-in { transform: none; transition: transform .9s var(--ease) calc(var(--i, 0) * 80ms); }
.ruch .hero .zdjecie img { transform: scale(1.08); }
.ruch.zaladowana .hero .zdjecie img { transform: none; transition: transform 1.4s var(--ease); }
.ruch .hero-etykieta, .ruch .hero-wstep, .ruch .hero-przycisk, .ruch .hero-stan { opacity: 0; transform: translateY(16px); }
.ruch.zaladowana .hero-etykieta, .ruch.zaladowana .hero-wstep, .ruch.zaladowana .hero-przycisk, .ruch.zaladowana .hero-stan {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) var(--d, .3s), transform .7s var(--ease) var(--d, .3s);
}
.hero-wstep { --d: .35s; }
.hero-przycisk { --d: .45s; }
.hero-stan { --d: .55s; }
.hero-etykieta { --d: .1s; }

.ruch .wejscie, .ruch .dziel .w-in { opacity: 0; transform: translateY(24px); }
.ruch .widoczny .wejscie, .ruch .widoczny .dziel .w-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) calc(var(--i, 0) * 70ms), transform .7s var(--ease) calc(var(--i, 0) * 70ms);
}
.ruch .dziel .w { overflow: visible; }
.ruch .dziel:not(.podzielony) { opacity: 0; }

/* ---------- tablet i telefon ---------- */
@media (max-width: 1199px) {
  .nav-linki { gap: 24px; }
  .kroki, .ceny { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; row-gap: 0; }
  .kroki li:nth-child(n+3), .ceny li:nth-child(n+3) { margin-top: 40px; }
  .kroki li:nth-child(odd), .ceny li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .kroki li:nth-child(2n), .ceny li:nth-child(2n) { padding-right: 0; }
  .pary { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .nawigacja { grid-template-columns: 1fr auto; }
  .nav-linki, .nav-przycisk { display: none; }
  .nav-menu { display: block; }
  .znak { font-size: 22px; }

  .arkusz-pol { display: flex; flex-direction: column; }
  .arkusz-pol > .zdjecie-pol { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .zdjecie-pas { aspect-ratio: 4 / 3; max-height: none; }
  .arkusz-wnetrze { gap: 40px; justify-content: flex-start; }

  .hero { --wystaje: 36px; height: auto; min-height: calc(100vh - var(--nav) - var(--ramka) * 2 - var(--wystaje)); min-height: calc(100svh - var(--nav) - var(--ramka) * 2 - var(--wystaje)); }
  .hero-tekst { flex: 1; padding-top: 22px; gap: 28px; }
  .hero > .zdjecie-pol { aspect-ratio: 4 / 3; flex: 0 0 auto; }
  .hero-wstep { margin: 20px 0 24px; }
  .hero-przycisk { width: 100%; }

  .opinie { grid-template-columns: 1fr; }
  .opinie li { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--linia); }
  .opinie li:first-child { padding-top: 28px; }
  .opinie li + li { margin-top: 28px; }
  .opinia-kto { padding-top: 20px; }
  .stopka-kolumny { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) {
  body { font-size: 16px; }
  .kroki, .ceny { grid-template-columns: 1fr; row-gap: 0; }
  .kroki li:nth-child(n+3), .ceny li:nth-child(n+3) { margin-top: 0; }
  .kroki li, .kroki li:nth-child(n) { grid-row: auto; grid-template-rows: auto 1fr; grid-template-columns: 72px 1fr; padding: 22px 0; border-left: 0; border-top: 1px solid var(--linia); }
  .kroki .krok-nr { grid-row: 1 / span 2; }
  .kroki .h3, .kroki p { grid-column: 2; }
  .kroki li:last-child { border-bottom: 1px solid var(--linia); }
  .krok-nr { font-size: 64px; margin-bottom: 0; }
  .ceny li, .ceny li:nth-child(n) { grid-row: auto; grid-template-rows: none; padding: 22px 0; border-left: 0; border-top: 1px solid var(--linia); }
  .ceny .h3 { min-height: 0; }
  .cena { margin-top: 14px; }
  .cennik-dol { gap: 28px; }
  .cennik-stopka { flex-direction: column; align-items: stretch; padding-top: 0; border-top: 0; }
  .cennik-stopka .przycisk { width: 100%; }
  .fakty { grid-template-columns: 1fr; }
  .fakty li, .fakty li:nth-child(n) { padding: 18px 0; border-left: 0; border-top: 1px solid var(--linia); flex-direction: row; align-items: baseline; gap: 16px; }
  .fakty li:last-child { border-bottom: 1px solid var(--linia); }
  .fakt-liczba { flex: 0 0 auto; min-width: 3.9em; font-size: 40px; }
  .formularz { grid-template-columns: 1fr; }
  .formularz-wyslij .przycisk { width: 100%; }
  .stopka-kolumny { grid-template-columns: 1fr; gap: 0; }
  .stopka-kolumny > div { padding: 14px 0 16px; }
  .odpowiedz p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}