/* Widok 14 — Outsourcing. Odwaga 3: spokój. Krótka podstrona: nagłówek-rzeźba z leadem i akcją,
   zakres (tekst po lewej, tafla ze sposobami pracy po prawej, pod spodem zmierzony PageSpeed),
   tafla „Jak się dogadamy" z drugą akcją. Tylko układ; wygląd tafli i przycisków — system.css. */

.outsourcing {
  width: 100%; max-width: 72rem; margin-inline: auto;
  padding: calc(var(--logo-wys) + var(--o-8)) var(--margines) var(--o-8);
  display: grid; gap: var(--o-9);
}
@media (max-width: 959px) { .outsourcing { gap: var(--o-8); padding-top: calc(var(--logo-wys) + var(--o-6)); } }

.df-hero { display: grid; gap: var(--o-5); max-width: 48rem; }
.df-hero h1 { font-size: var(--r-6); font-weight: var(--w-rzezba); letter-spacing: -.035em; line-height: 1.02; }
.df-lead { margin: 0; max-width: 52ch; color: var(--tekst-2); font-size: var(--r-2); font-weight: var(--w-lead); line-height: 1.5; }
.df-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-4) var(--o-6); margin-top: var(--o-2); }

.df-zakres { display: grid; gap: var(--o-6); align-items: start; }
@media (min-width: 960px) {
  .df-zakres { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: var(--o-8); row-gap: var(--o-7); }
  .df-jakosc { grid-column: 1 / -1; }
}
.df-zakres-tekst { display: grid; gap: var(--o-4); justify-items: start; }
.df-zakres h2, .df-umowa h2 { font-size: var(--r-4); font-weight: var(--w-naglowek); }
.df-zakres-tekst p { margin: 0; max-width: 46ch; color: var(--tekst-2); font-size: var(--r-1); line-height: 1.6; }

.df-sposoby { margin: 0; display: grid; padding-block: var(--o-2); }
.df-sposoby > div { display: grid; gap: var(--o-1); padding-block: var(--o-4); }
.df-sposoby > div + div { border-top: 1px solid var(--tafla-linia); }
.df-sposoby dd { margin: 0; color: var(--tafla-tekst); font-size: var(--r-1); line-height: 1.5; }

.df-jakosc { display: grid; gap: var(--o-5); padding-top: var(--o-6); border-top: 1px solid var(--linia); }
.df-jakosc-zdanie { margin: 0; max-width: 40ch; font: var(--w-lekki) var(--r-3)/1.3 var(--kroj-naglowek); letter-spacing: -.01em; }
.df-pomiar { margin: 0; display: flex; flex-wrap: wrap; gap: var(--o-5) var(--o-8); }
.df-pomiar > div { display: grid; gap: var(--o-1); }
.df-pomiar dd { order: -1; margin: 0; display: flex; align-items: baseline; gap: var(--o-3); }
.df-wynik { font: var(--w-rzezba) var(--r-5)/1 var(--kroj-naglowek); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.df-pomiar dt a { color: var(--tekst-2); text-decoration: underline; text-decoration-color: var(--linia); text-underline-offset: 4px; }
.df-pomiar dt a:hover, .df-pomiar dt a:focus-visible { color: var(--tekst); text-decoration-color: var(--akcent); }
.df-przypis { margin: 0; max-width: 64ch; color: var(--tekst-3); font-size: var(--r-0); line-height: 1.6; }

.df-umowa { --tafla-szer: none; width: min(100%, 46rem); display: grid; gap: var(--o-4); justify-items: start; }
.df-umowa p { margin: 0; max-width: 52ch; line-height: 1.6; }
.df-umowa .przycisk { margin-top: var(--o-3); }