/* ===========================================================================
   „Jak pracujemy” (`/jak-pracujemy`) — strona zaufania „Po drugiej stronie jest człowiek”,
   makieta v97 („Strona zaufania - widok”, ramki 1a desktop 1440 i 1b mobile 390).
   Wartości 1:1 z makiety; jej `cqi` to szerokość strony, więc tu `vw`.
   Kafle i pasek to komponenty (`x-trust-tile`, `x-trust-bar`, arkusz k-nawigacja-i-konto.css),
   tu wyłącznie układ ekranu.
   =========================================================================== */

/* Strona na pełną szerokość: tło sekcji www, treść w kontenerze 1180 px. */
.powloka__tresc:has(> .zaufanie) { padding: 0; }
.zaufanie {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 96px); /* makieta */
  padding: clamp(28px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(32px, 6vw, 80px); /* makieta */
  background: var(--v-n-50);
  color: var(--v-primary);
}
.zaufanie > * { width: 100%; max-width: 1180px; margin-inline: auto; } /* makieta */

/* ---- hero i kafle -------------------------------------------------------- */
.zaufanie__hero { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); } /* makieta */
.zaufanie__wstep { display: flex; flex-direction: column; gap: 14px; max-width: 820px; } /* makieta */
.zaufanie__h1 {
  margin: 0;
  font: 600 clamp(34px, 5.4vw, 72px)/1.02 var(--v-font-display); /* makieta */
  letter-spacing: -.035em;
  text-wrap: balance;
}
.zaufanie__lead {
  max-width: 640px;
  margin: 0;
  font-size: clamp(16px, 1.6vw, 20px); /* makieta */
  line-height: 1.55;
  color: var(--v-n-600);
  text-wrap: pretty;
}
.zaufanie__kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.zaufanie__stan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--v-n-600); }

/* ---- nagłówki sekcji ----------------------------------------------------- */
.zaufanie__sekcja { display: flex; flex-direction: column; gap: 20px; }
.zaufanie__glowa { display: flex; flex-direction: column; gap: 8px; max-width: 680px; } /* makieta */
.zaufanie__h2 {
  margin: 0;
  font: 600 clamp(26px, 3vw, 40px)/1.1 var(--v-font-display); /* makieta */
  letter-spacing: -.03em;
}
.zaufanie__opis { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--v-n-600); }

/* ---- Jak pracujemy: trzy karty i pasek zespołu ---------------------------- */
.zaufanie__kroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.zaufanie__krok {
  display: flex;
  flex-direction: column;
  gap: 14px; /* makieta */
  padding: 20px;
  border: 1px solid var(--v-n-100);
  border-radius: 20px;
  background: var(--v-n-0);
}
.zaufanie__krok-glowa { display: flex; align-items: center; gap: 12px; }
.zaufanie__krok-nr {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--v-primary);
  color: var(--v-n-0);
  font: 600 16px var(--v-font-display);
}
.zaufanie__krok-tytul { margin: 0; font: 600 22px/normal var(--v-font-display); letter-spacing: -.02em; }
.zaufanie__wiersze { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.zaufanie__wiersz { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.zaufanie__wiersz .zaufanie__wiersz-ikona { margin-top: 2px; color: var(--v-n-600); }
.zaufanie__wiersz-tresc { display: flex; flex-direction: column; gap: 2px; }
.zaufanie__wiersz-klucz { font-size: 12px; font-weight: 800; color: var(--v-n-600); }
.zaufanie__wiersz-wartosc { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; text-wrap: pretty; }

.zaufanie__zespol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px; /* makieta */
  padding: 16px 18px; /* makieta */
  border-radius: 16px;
  background: var(--v-n-100);
}
.zaufanie__zespol-liczba { font: 600 34px/1 var(--v-font-display); letter-spacing: -.03em; } /* makieta */
.zaufanie__zespol-tekst { flex: 1 1 240px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }

/* ---- Twoje pieniądze ----------------------------------------------------- */
.zaufanie__pieniadze { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.zaufanie__etap {
  display: flex;
  flex-direction: column;
  gap: 10px; /* makieta */
  padding: 20px;
  border: 1px solid var(--v-n-100);
  border-radius: 20px;
  background: var(--v-n-0);
}
.zaufanie__etap-ikona {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px; /* makieta */
  background: var(--v-warning-soft);
  color: var(--v-warning-text);
}
.zaufanie__etap-tytul { margin: 0; font-size: 16px; font-weight: 800; }
.zaufanie__etap-tekst { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--v-n-600); text-wrap: pretty; }

/* ---- Na czym zarabiamy --------------------------------------------------- */
.zaufanie__oplaty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); /* makieta */
  overflow: hidden;
  border: 1px solid var(--v-n-100);
  border-radius: 20px;
  background: var(--v-n-0);
}
.zaufanie__oplata {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px; /* makieta */
  margin-top: -1px; /* makieta: górna kreska pierwszego rzędu chowa się pod ramką */
  padding: 20px;
  border-top: 1px solid var(--v-n-100);
}
.zaufanie__oplata-klucz { font-size: 13px; font-weight: 800; color: var(--v-n-600); }
.zaufanie__oplata-wartosc { font: 600 24px/1.15 var(--v-font-display); letter-spacing: -.02em; }
.zaufanie__oplata-opis { font-size: 14px; line-height: 1.5; color: var(--v-n-600); text-wrap: pretty; }
.zaufanie__nota { max-width: 680px; margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.55; text-wrap: pretty; } /* makieta */

/* ---- karta na końcu (granat zostaje granatem w obu motywach) ------------- */
.zaufanie__koniec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  padding: clamp(24px, 4vw, 48px); /* makieta */
  border-radius: 24px;
  background: var(--v-granat-staly);
  color: #FFFFFF; /* TODO token — makieta ctaInk */
}
.zaufanie__koniec-tekst { display: flex; flex: 1 1 320px; flex-direction: column; gap: 8px; }
.zaufanie__koniec-opis { margin: 0; font-size: 15.5px; line-height: 1.55; color: #C9D3E0; } /* TODO token — makieta ctaInk2 */
.zaufanie__koniec-akcje { display: flex; flex: 0 1 300px; flex-direction: column; gap: 12px; min-width: min(100%, 260px); }
.v-btn.zaufanie__cta { height: auto; min-height: 52px; padding: 0 22px; border-radius: 14px; font-size: 15.5px; font-weight: 800; } /* makieta */
.v-btn--accent.zaufanie__cta { background: var(--v-secondary-dark); color: var(--v-granat-staly); }
.v-btn--accent.zaufanie__cta:hover { background: var(--v-secondary); }
.v-btn.zaufanie__cta--drugi {
  min-height: 48px;
  border: 1.5px solid #C9D3E0; /* TODO token — makieta ctaInk2 */
  background: transparent;
  color: #FFFFFF; /* TODO token — makieta ctaInk */
  font-size: 15px;
  font-weight: 700;
}
.v-btn.zaufanie__cta--drugi:hover { background: var(--v-primary-lift); color: #FFFFFF; } /* TODO token — makieta ctaInk */
.zaufanie__raport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF; /* TODO token — makieta ctaInk */
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zaufanie__raport:hover { color: #FFFFFF; opacity: .8; } /* TODO token — makieta ctaInk */

/* Ciemny motyw aplikacji: ochrowy kwadrat ikony z tokenów miękkiej ochry (makieta warm #33291A / #F0C98A). */
:root.jak-aplikacja[data-motyw="ciemny"] .zaufanie__etap-ikona { background: var(--v-secondary-soft); color: var(--v-secondary-text); }