/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTS — style komponentów. Wartości = tokeny (tokens.css).
   Mobile-first; @media tylko gdy layout realnie się zmienia.
   Kolejność: nav, landing, assure, buttons, stepper, step, tiles, fields,
   inputs, slider, wklad, bool, prepare, chips, docs, summary, tooltip,
   resume, footer.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── NAWIGACJA ── */
.nav { border-bottom: 1px solid var(--hairline); background: var(--paper); position: sticky; top: 0; z-index: 40; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); min-height: var(--nav-h); position: relative; }

/* Wariant strony głównej: pasek przezroczysty nad hero (fixed), tło dostaje
   dopiero po opuszczeniu szczytu strony (.nav--solid nadaje main.js przez
   IntersectionObserver na .nav-sentinel; w kreatorze sentinel jest ukryty,
   więc pasek jest zawsze pełny). Podstrony zostają przy zwykłym sticky .nav. */
.nav--overlay { position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  transition: background-color var(--dur-step) var(--ease), border-color var(--dur-step) var(--ease); }
.nav--overlay.nav--solid { background: var(--paper); border-bottom-color: var(--hairline); }
/* Sentinel: 24px od szczytu strony - tyle scrolla toleruje przezroczysty pasek */
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; }
/* Logo w pasku: maska SVG + kolor z tokenów - akcent podąża za pokrętłem
   --accent-h (obrazek <img> nie umie czytać zmiennych CSS, maska tak) */
.nav__logo-mark { display: block; height: 32px; aspect-ratio: 216 / 62;
  background-color: var(--bordeaux);
  -webkit-mask: url("../img/logo-long-ink.svg") no-repeat left center / contain;
          mask: url("../img/logo-long-ink.svg") no-repeat left center / contain; }
/* Awaryjnie (brak wsparcia maski): logo jako zwykłe tło w atramencie */
@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
  .nav__logo-mark { background: url("../img/logo-long-ink.svg") no-repeat left center / contain; }
}
.nav__links { display: flex; align-items: center; gap: var(--sp-md); }

/* Hamburger — checkbox-hack, bez JS. Widoczny tylko na mobile. */
.nav__toggle { display: none; }   /* na desktopie poza tab-orderem */
.nav__burger { display: none; }

@media (max-width: 640px) {
  /* checkbox: wizualnie ukryty, ale focusowalny (steruje panelem) */
  .nav__toggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
  /* przycisk hamburgera (44px cel dotykowy) */
  .nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px; margin-right: -8px; cursor: pointer;
  }
  .nav__burger span {
    display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  /* burger → X po otwarciu */
  .nav__toggle:checked + .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle:checked + .nav__burger span:nth-child(2) { opacity: 0; }
  .nav__toggle:checked + .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* focus na burgerze (checkbox jest wizualnie ukryty, ale focusowalny) */
  .nav__toggle:focus-visible + .nav__burger { box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

  /* panel rozwijany pod paskiem */
  .nav__links {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border: 1px solid var(--hairline); border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    padding: var(--sp-xs); box-shadow: var(--shadow-step);
    display: none;
  }
  .nav__toggle:checked ~ .nav__links { display: flex; }
  .nav__links .lnk { width: 100%; padding: 13px var(--sp-sm); border-radius: var(--r-sm); text-align: left; }
  .nav__links .lnk:hover { background: var(--surface-sunken); }
  .nav__links .btn { width: 100%; margin-top: var(--sp-xs); }
}

/* ── LINK tekstowy drugorzędny (.lnk) — bez podkreślenia, akcent kolorem ── */
.lnk {
  font-weight: 600; color: var(--ink);
  text-decoration: none;
  background: none; border: none; cursor: pointer; font-size: inherit;
  transition: color var(--dur-fast) var(--ease);
}
.lnk:hover { color: var(--bordeaux); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body);
  letter-spacing: 0.01em; border-radius: var(--sp-2xs);
  padding: 15px 32px; min-height: 52px; border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn--sm { min-height: 42px; padding: 10px 20px; font-size: var(--fs-small); }
.btn--primary { background: var(--bordeaux); color: var(--paper); }
.btn--primary:hover:not(:disabled) { background: var(--bordeaux-deep); transform: translateY(-1px); }
.btn--primary.is-done { background: var(--success); }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--hairline-strong); }
.btn--ghost:hover:not(:disabled) { border-color: var(--ink); }
.btn:disabled { background: var(--surface-sunken); color: var(--ink-faint); cursor: not-allowed; border-color: transparent; transform: none; }

/* ── LANDING (strona główna) — rytm: --sp-section między blokami, każdy blok ma własną anatomię ── */
.landing { position: relative; }   /* kotwica dla .nav-sentinel */
.landing.section { padding-block: 0 var(--sp-2xl); }

/* ── PHOTO-FRAME — wspólna ramka zdjęć sekcji (hero, "Jak to działa", "Zasady").
   Ramka jest OKNEM: zdjęcie stoi nieruchomo względem ekranu przez cały scroll,
   poprzednia sekcja je odsłania, następna zasłania.

   Dlaczego tło z background-attachment: fixed, a nie <img>/sticky:
   - `position: fixed` na obrazku ucieka spod overflow rodzica, a ancestor
     z clip-path/transform zabija mu fixed;
   - `position: sticky` przypina tylko przez (wysokość ramki - wysokość ekranu),
     więc przy sekcji ledwie wyższej od ekranu zdjęcie jedzie razem z nią.
   Tło z `fixed` jest przypięte do viewportu, a przycina je box ramki. Tego chcemy.

   KADR. Przy `fixed` obszarem odniesienia jest VIEWPORT, nie ramka - `cover`
   pokryłby cały ekran i okno pokazałoby przypadkowy wycinek. Liczymy więc kadr sami,
   ale wzorem, nie na oko. Żeby zdjęcie pokryło okno (--photo-w x 100vh), jego
   szerokość musi być >= --photo-w ORAZ >= 100vh * proporcja_pliku (bo wtedy
   wysokość = szerokość / proporcja >= 100vh). Stąd `max(...)`: dokładnie minimalne
   pokrycie, bez luk, na każdym ekranie. Jedyne wejście to --photo-ar = szerokość
   pliku / wysokość pliku.

   POZYCJA. `50%` w background-position to `(100vw - szerokość_zdjęcia) / 2`, więc
   `calc(cx + 50% - 50vw)` daje `cx - szerokość_zdjęcia / 2`, czyli środek zdjęcia
   dokładnie na --photo-cx. Bez JS i bez znajomości proporcji pliku w tym miejscu.
   --photo-cx = środek okna, wyliczany z --photo-w przez wariant --left / --right.

   MOBILE: zdjęcia wyłączone (display:none). Kadr przycięty do wąskiej kolumny nie
   broni się wizualnie, a display:none oznacza, że tło w ogóle się nie pobiera.
   Preload hero w <head> ma z tego powodu media="(min-width: 860px)". */
.photo-frame { display: none; position: relative; }

@media (min-width: 860px) {
  .photo-frame {
    display: block;
    background-image: var(--photo-src);
    background-repeat: no-repeat;
    /* Fallback (reduced-motion, iOS - brak wsparcia dla fixed): obszarem
       odniesienia jest ramka, więc zwykły `cover` kadruje poprawnie. */
    background-size: cover;
    background-position: 50% 50%;
  }
}

@media (min-width: 860px) and (prefers-reduced-motion: no-preference) {
  .photo-frame {
    background-attachment: fixed;
    /* +24px zapasu: `fixed` liczy się do viewportu bez paska przewijania,
       a vw z nim - bez zapasu na krawędzi okna zostawałaby cienka szpara. */
    background-size: max(calc(var(--photo-w) + 24px), calc(100vh * var(--photo-ar))) auto;
    background-position: calc(var(--photo-cx) + 50% - 50vw) 50%;
  }
  /* Środek okna. Okno dotyka lewej albo prawej krawędzi ekranu, więc wystarczy
     --photo-w - żadnych ręcznie liczonych vw. */
  .photo-frame--left  { --photo-cx: calc(var(--photo-w) / 2); }
  .photo-frame--right { --photo-cx: calc(100vw - var(--photo-w) / 2); }
}

/* Hero full-bleed: tekst na papierze (lewo) + zdjęcie do górnej/prawej/dolnej
   krawędzi ekranu (prawo). Mobile: kolumna, zdjęcie jako baner pod treścią. */
/* Mobile: bez zdjęcia hero zostaje sam tekst - 90svh trzyma sekcję jako pełny
   ekran otwarcia (i sygnalizuje, że pod spodem coś jest), treść siedzi na dole. */
.landing__grid { display: grid; min-height: 90svh; }
/* Mobile: treść wyśrodkowana w pionie, do lewej w poziomie. Padding pionowy
   symetryczny - inaczej centrowanie liczyłoby się z paddingiem i tekst zjechałby
   w dół; górny mija fixed nav, gdy treść przerośnie sekcję. */
.landing__intro { align-self: center;
  padding: calc(var(--nav-h) + var(--sp-lg)) var(--shell-pad); }
/* --photo-ar = szerokość pliku / wysokość pliku. MUSI zgadzać się ze źródłem,
   bo z niej liczy się kadr (patrz PHOTO-FRAME). Po ujednoliceniu zdjęć do 7:8
   wartość przeniesie się do tokens.css. */
.landing__media { --photo-src: url("../img/hero-dokumenty.webp"); --photo-ar: 0.667; }   /* 1024x1536 */
/* Scrim pod pasek nav: delikatne rozjaśnienie górnej partii zdjęcia,
   żeby linki przezroczystego paska były czytelne na każdym kadrze */
.landing__media::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(242, 234, 219, 0.65), transparent); }

/* Eyebrow = maszyna do pisania (rotor nad h1); styl etykiety z base (.label) */
.landing__eyebrow { display: inline-flex; align-items: center; gap: 12px;
  color: var(--bordeaux); margin-bottom: var(--sp-md); min-height: 1.4em; }
.landing__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--bordeaux); flex: none; }
.landing__typed-rotor { font-weight: 600; white-space: nowrap; }
/* Kursor tylko gdy JS faktycznie pisze (.is-typing nadaje typed.js) */
.landing__typed.is-typing .landing__typed-rotor::after { content: ""; display: inline-block;
  width: 2px; height: 1.2em; margin-left: 3px; vertical-align: -0.2em;
  background: var(--bordeaux); animation: typed-caret 1.1s steps(1) infinite; }
@keyframes typed-caret { 50% { opacity: 0; } }

.landing__title { margin-bottom: var(--sp-md); text-wrap: balance; max-width: 32ch; }
.landing__accent { font-style: normal; color: var(--bordeaux); }   /* akcent na słowie, nie ozdobnik */
.landing__lead { font-size: var(--fs-lead-hero); color: var(--ink-muted); margin-bottom: var(--sp-lg); max-width: 46ch; }
/* CTA + reassure w jednym rzędzie (jak w projekcie): przycisk | dwie linijki obok */
.landing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-md); }
.landing__cta { min-width: 220px; }
.landing__reassure { font-size: var(--fs-small); max-width: 36ch; line-height: 1.5; }

@media (min-width: 860px) {
  /* Sekcja = dokładnie viewport; treść lewej kolumny siedzi na DOLE (duże powietrze
     nad nią - jak w projekcie), zdjęcie rozciąga się do wysokości sekcji. */
  .landing__grid { grid-template-columns: 1fr var(--photo-w); min-height: 100svh; }
  .landing__intro { align-self: end;   /* na desktopie treść siada na dole sekcji */
    padding-left: var(--shell-edge); padding-right: clamp(var(--sp-lg), 5vw, 96px);
    padding-bottom: clamp(48px, 9vh, 104px); }
}

/* Kaskada hero przy załadowaniu (entry-only, czysty CSS).
   LCP-safe: h1 animuje TYLKO transform (opacity zostaje 1), a zdjęcie hero
   (kandydat LCP) nie ma ŻADNEGO reveala - maluje się od pierwszej klatki. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes hero-rise-solid { from { transform: translateY(14px); } to { transform: none; } }
  .landing__eyebrow  { animation: hero-rise 0.5s var(--ease) both; }
  .landing__title    { animation: hero-rise-solid 0.6s var(--ease) both; }
  .landing__lead     { animation: hero-rise 0.5s var(--ease) 0.12s both; }
  .landing__actions  { animation: hero-rise 0.5s var(--ease) 0.2s both; }
}

/* ── JAK TO DZIAŁA (steps) — desktop: zdjęcie przy lewej krawędzi ekranu, na całą
   wysokość sekcji (sticky) + nagłówek i lista kroków w kolumnie po prawej;
   mobile: sama kolumna tekstowa (zdjęcia wyłączone, patrz PHOTO-FRAME). ── */
.steps { margin-top: var(--sp-section); }
.steps__head { display: grid; gap: var(--sp-md); margin-bottom: var(--sp-xl); }
.steps__lead { font-size: var(--fs-lead); max-width: 52ch; }
.steps__eyebrow { display: inline-flex; align-items: center; gap: 12px;
  color: var(--bordeaux); margin-bottom: var(--sp-md); }
.steps__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--bordeaux); }
.steps__title { max-width: 32ch; }
.steps__grid { display: grid; gap: var(--sp-lg); }
.steps__col { padding-inline: var(--shell-pad); }
.steps__media { --photo-src: url("../img/dokumenty-analiza.webp"); --photo-ar: 1.5; }   /* 1536x1024 */
.steps__stack { display: grid; }
/* Wiersz, nie karta: numer w wąskiej kolumnie + treść, rozdzielone włoskowatą linią.
   Ta sama anatomia co „Co dalej" (.qa__row) - obie listy landingu mówią jednym językiem.
   Numer jest oznaczeniem porządku, nie grafiką: serif w akcencie, rozmiar tekstu.
   baseline zrównuje cyfrę z pierwszym wierszem tytułu (bez ręcznych marginesów). */
.steps__row { display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--sp-md);
  align-items: baseline; padding-block: var(--sp-md);
  border-top: 1px solid var(--hairline); }
.steps__num { font-family: var(--font-serif); font-size: var(--fs-card-title);
  color: var(--bordeaux); font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease); }
.steps__row:hover .steps__num { color: var(--ink); }
.steps__body { display: grid; gap: var(--sp-xs); }
.steps__body h3 { font-size: var(--fs-card-title); }
.steps__body p { font-size: var(--fs-lead-card); max-width: 52ch; }

@media (min-width: 860px) {
  /* Zdjęcie (lewa krawędź ekranu) + kolumna nagłówek/karty; stretch daje ramce
     zdjęcia pełną wysokość sekcji. Zdjęcie jest w DOM po tekście - przerzucamy je
     do 1. kolumny, żeby kolejność czytania została nagłówek → karty. */
  .steps__grid { grid-template-columns: var(--photo-w) 1fr; gap: clamp(var(--sp-lg), 4vw, 96px);
    align-items: stretch; }
  .steps__media { grid-column: 1; grid-row: 1; }
  .steps__col { grid-column: 2; grid-row: 1; padding-inline: 0 var(--shell-edge); }
  .steps__row { grid-template-columns: 4rem 1fr; padding-block: var(--sp-lg); }
}

/* ── ZASADY (assure) — pełnoekranowy pas bordo: emocjonalne serce strony,
   jedyny „głośny" moment koloru; wszystko inne zostaje na papierze ── */
.assure { margin-top: var(--sp-section); padding-block: clamp(64px, 9vw, 112px);
  background-color: var(--bordeaux); }
.assure__head { display: grid; gap: var(--sp-md); margin-bottom: var(--sp-xl); }
/* Eyebrow na pasie koloru: papier (maks. kontrast) - akcent byłby tu za słaby */
.assure__eyebrow { display: inline-flex; align-items: center; gap: 12px;
  color: var(--paper); margin-bottom: var(--sp-md); }
.assure__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--paper); }
.assure__title { color: var(--paper); max-width: 32ch; }
.assure__lead { font-size: var(--fs-lead); color: var(--on-bordeaux-muted); max-width: 52ch; }

/* Treść na pasie: wiersze rozdzielone włoskowatą linią, bez wypełnienia i cienia.
   Wypełniona karta NA pasie koloru to pudełko w pudełku - kolor przestaje nieść
   treść i staje się tłem. Tu głośny jest pas, cicha jest anatomia (jak w krokach). */
.assure__grid { display: grid; gap: var(--sp-lg); }
.assure__col { padding-inline: var(--shell-pad); }
.assure__media { --photo-src: url("../img/handshake.webp"); --photo-ar: 0.75; }   /* 960x1280 */
.assure-list { display: grid; }
/* Ikona w wąskiej kolumnie - dokładnie tam, gdzie numer kroku w „Jak to działa" */
.assure-item { display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--sp-md);
  align-items: start; padding-block: var(--sp-md);
  border-top: 1px solid var(--hairline-on-bordeaux); }
/* margin-top: optyczne zrównanie ikony z wersalikiem tytułu (baseline nie zadziała
   na <svg> - nie ma linii pisma) */
.assure-item__icon { width: 24px; height: 24px; margin-top: 3px;
  color: var(--paper); opacity: 0.85; }
.assure-item__body { display: grid; gap: var(--sp-xs); }
.assure-item h3 { font-size: var(--fs-card-title); color: var(--paper); }
.assure-item p { font-size: var(--fs-lead-card); max-width: 52ch; color: var(--on-bordeaux-muted); }

/* Link na bordo: papier z podkreśleniem w niskiej alfie, hover pełny papier */
.assure__link {
  /* justify-self: pozycja w gridzie korpusu - inaczej link rozciągnąłby się
     na całą kolumnę i łapał kliknięcia obok tekstu */
  justify-self: start; margin-top: var(--sp-2xs);
  font-weight: 600; color: var(--paper);
  text-decoration: underline; text-decoration-color: var(--on-bordeaux-faint);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.assure__link:hover { text-decoration-color: var(--paper); }
.assure__link:focus-visible { box-shadow: var(--focus-ring-on-bordeaux); }

@media (min-width: 860px) {
  /* Nagłówek + karty w kolumnie (lewo) + zdjęcie do prawej krawędzi ekranu.
     Oddech sekcji przenosi się z pasa na kolumnę tekstową - dzięki temu zdjęcie
     sięga górnej i dolnej krawędzi pasa koloru, a nie zaczyna się za paddingiem. */
  .assure { padding-block: 0; }
  .assure__grid { grid-template-columns: 1fr var(--photo-w); gap: clamp(var(--sp-lg), 4vw, 96px);
    align-items: stretch; }
  .assure__col { padding-block: clamp(64px, 9vw, 112px);
    padding-inline: var(--shell-edge) 0; }
  .assure-item { grid-template-columns: 4rem 1fr; padding-block: var(--sp-lg); }
}

/* ── INSTRUKCJE (poradniki na landingu - nagłówek 0.9/1.1, karty-linki w rzędzie;
   rym anatomii z pasem bordo, ale na papierze i z jawnym CTA zamiast samej strzałki) ── */
.guides { margin-top: var(--sp-section); }
.guides__head { display: grid; gap: var(--sp-md); margin-bottom: var(--sp-xl); }
.guides__eyebrow { display: inline-flex; align-items: center; gap: 12px;
  color: var(--bordeaux); margin-bottom: var(--sp-md); }
.guides__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--bordeaux); }
.guides__title { max-width: 32ch; }
.guides__lead { font-size: var(--fs-lead); max-width: 52ch; }
.guides-cards { display: grid; gap: var(--sp-md); }
.guides-cards li { display: grid; }   /* karta-link wypełnia li: równe wysokości w rzędzie */
/* Karta: korpus na papierze + pasek CTA w bordo u dołu (overflow ucina pasek do radiusa).
   Cała karta jest linkiem; wewnętrzne spany, bo <a> w <a> nie istnieje. */
.guides-card { display: flex; flex-direction: column;
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--sp-2xs); overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-step) var(--ease), transform var(--dur-step) var(--ease); }
.guides-card:hover { box-shadow: var(--shadow-step); transform: translateY(-3px); }
.guides-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-sm);
  padding: var(--sp-lg) var(--sp-md); }   /* standard karty: 40/24, tytuł↔opis 8 */
.guides-card h3 { font-size: var(--fs-card-title); }
.guides-card p { font-size: var(--fs-lead-card); max-width: 52ch; }
/* Pasek CTA: bordo na całą szerokość karty, tekst w papierze - wyraźna, klikalna baza */
.guides-card__cta { display: flex; align-items: center; justify-content: center; gap: var(--sp-xs);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--bordeaux); color: var(--paper); font-weight: 600;
  transition: background var(--dur-fast) var(--ease); }
.guides-card:hover .guides-card__cta { background: var(--bordeaux-deep); }
.guides-card__cta span { display: inline-block;
  transition: transform var(--dur-fast) var(--ease); }
.guides-card:hover .guides-card__cta span { transform: translateX(4px); }
/* Cztery poradniki: 2×2 na średnich ekranach, jeden rząd dopiero gdy karta ma dość
   szerokości na tytuł w dwóch wierszach (inaczej „e-Urzędu Skarbowego" łamie się brzydko). */
@media (min-width: 720px) {
  .guides-cards { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
}
@media (min-width: 1180px) {
  .guides-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ── CO DALEJ (Q&A) — domyka pętlę oczekiwań po „Jak to działa".
   Jedyna sekcja bez zdjęcia i jedyna, w której nagłówek się przypina: pytania jadą
   obok stojącego tytułu. To jej własna anatomia - sąsiadki („Jak to działa",
   „Zasady") mają nagłówek NAD listą, więc trzy listy z rzędu nie zlewają się w jedną.
   Pytanie i odpowiedź stoją w jednej kolumnie, jedno pod drugim: rozdzielone na
   5fr/7fr traciły ze sobą kontakt wzrokowy, bo tekst kończył się długo przed
   końcem swojej kolumny. ── */
.qa { margin-top: var(--sp-section); }
.qa__head { display: grid; gap: var(--sp-md); margin-bottom: var(--sp-xl); }
.qa__eyebrow { display: inline-flex; align-items: center; gap: 12px;
  color: var(--bordeaux); margin-bottom: var(--sp-md); }
.qa__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--bordeaux); }
.qa__title { max-width: 32ch; }
.qa__lead { font-size: var(--fs-lead); max-width: 52ch; }
.qa__list { display: grid; }
.qa__row { display: grid; gap: var(--sp-xs); padding-block: var(--sp-md);
  border-top: 1px solid var(--hairline); }
.qa__q { font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.25; color: var(--ink); }
.qa__a { font-size: var(--fs-lead-card); line-height: var(--lh-body); max-width: var(--measure); }

@media (min-width: 860px) {
  /* Nagłówek (lewo) + lista (prawo). Sufit --measure siedzi na LIŚCIE, nie na
     ścieżce siatki: ścieżka minmax(0, <długość>) nie kurczy się poniżej swojego
     maksimum (tylko fr to potrafi) i tuż nad 860px wypchnęłaby sekcję w poziomie.
     Powietrze ląduje więc przy zewnętrznej krawędzi, a nie w dziurze między
     pytaniem a odpowiedzią. align-items: start - bez tego kolumna nagłówka
     rozciąga się na wysokość listy i sticky nie ma po czym jechać. */
  .qa { display: grid; align-items: start;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
    column-gap: clamp(var(--sp-lg), 6vw, 120px); }
  .qa__list { max-width: var(--measure); }
  /* Sticky działa tylko dopóki lista jest wyższa od nagłówka. Przy mniejszej liczbie
     pytań efekt cicho znika i zostają dwie zwykłe kolumny - degradacja bez usterki.
     Offset = pasek nav (fixed na stronie głównej) + oddech. */
  .qa__head { position: sticky; top: calc(var(--nav-h) + var(--sp-lg));
    margin-bottom: 0; }
  .qa__row { padding-block: var(--sp-lg); }
  /* Pierwszy wiersz bez górnej linii: tytuł sekcji i pierwsze pytanie stoją w tej
     samej linii pisma, kreska nad pytaniem odcinałaby je od nagłówka. */
  .qa__row:first-child { padding-top: 0; border-top: none; }
}

/* ── ENTRY-REVEALE [data-reveal] — sekcje landingu pojawiają się przy pierwszym wejściu
   w viewport, element po elemencie (jak kaskada hero). Bezpieczne domyślne: bez JS
   i przy reduced-motion wszystko widoczne od razu (klasę .js-reveal nadaje main.js
   dopiero gdy ruch jest dozwolony i IO dostępny).

   ANATOMIA: [data-reveal] to CEL obserwatora (sekcja), nie element ruchu. Ruszają się
   jej bezpośrednie dzieci, a listy oznaczone [data-stagger] oddają ruch swoim pozycjom
   (sama lista stoi - inaczej karty animowałyby się dwa razy).

   DLACZEGO animation, a NIE transition (i dlaczego `backwards`, a nie `both`):
   1. transition + transition-delay na karcie zjada jej hover - najechanie czeka tyle,
      ile wynosi opóźnienie kaskady. Klasyczna pułapka. Animacja ma własny zegar,
      więc transition od hovera zostaje natychmiastowy.
   2. `both` zostawia po sobie zamrożoną klatkę końcową (transform: none), która
      wygrywa z hoverem - karta przestałaby się unosić. `backwards` daje stan
      początkowy przed startem i ODDAJE element po zakończeniu. ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes reveal-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  .js-reveal [data-reveal]:not(.is-revealed) > *:not([data-stagger]),
  .js-reveal [data-reveal]:not(.is-revealed) [data-stagger] > * { opacity: 0; }

  .js-reveal [data-reveal].is-revealed > *:not([data-stagger]),
  .js-reveal [data-reveal].is-revealed [data-stagger] > * {
    animation: reveal-up 0.55s var(--ease) backwards;
    animation-delay: calc(var(--r-i, 0) * 90ms);   /* --r-i = pozycja w kaskadzie */
  }

  /* Nagłówek sekcji rusza pierwszy (0), pozycje listy idą po nim (1, 2, 3…). */
  .js-reveal [data-reveal] > :nth-child(1) { --r-i: 0; }
  .js-reveal [data-reveal] > :nth-child(2) { --r-i: 1; }
  .js-reveal [data-reveal] [data-stagger] > :nth-child(1) { --r-i: 1; }
  .js-reveal [data-reveal] [data-stagger] > :nth-child(2) { --r-i: 2; }
  .js-reveal [data-reveal] [data-stagger] > :nth-child(3) { --r-i: 3; }
  .js-reveal [data-reveal] [data-stagger] > :nth-child(4) { --r-i: 4; }
  .js-reveal [data-reveal] [data-stagger] > :nth-child(5) { --r-i: 5; }
  .js-reveal [data-reveal] [data-stagger] > :nth-child(6) { --r-i: 6; }
}

/* ── STEPPER ── */
.stepper { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-md); }
.stepper__num { font-size: 1.5rem; color: var(--bordeaux); line-height: 1; }
.stepper__sep, .stepper__total { font-size: 1.5rem; color: var(--ink-faint); line-height: 1; }
.stepper__track { flex: 1; height: 2px; max-width: 180px; background: var(--hairline); border-radius: var(--r-full); overflow: hidden; }
.stepper__track i { display: block; height: 100%; background: var(--bordeaux); border-radius: var(--r-full);
  transition: width var(--dur-step) var(--ease); }
.stepper__label { margin-left: auto; }

/* ── STEP CARD ── */
.step {
  max-width: var(--panel-max); margin-inline: auto;
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-step);
  padding: clamp(var(--sp-md), 4vw, var(--sp-lg));
  animation: step-in var(--dur-step) var(--ease);
}
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.step__title { margin-bottom: var(--sp-lg); }
.step__body { display: grid; gap: var(--sp-md); }
.step__hint, .step__nav { margin-top: var(--sp-xs); }
/* Adnotacja o limicie plików: dosunięta do hintu wyżej, lekko wyróżniona. */
.step__hint--limit { margin-top: calc(-1 * var(--sp-sm)); font-size: var(--fs-small); font-weight: 600; color: var(--ink-muted); }
.step__nav { display: flex; gap: var(--sp-sm); justify-content: space-between; margin-top: var(--sp-lg);
  padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
.step__nav .btn { flex: 1; }
.step__next { margin-left: auto; }
@media (min-width: 560px) { .step__nav .btn { flex: 0 0 auto; min-width: 140px; } }

/* Sekcja kreatora: krok wypełnia widok; stała pozycja od góry (nie „skacze").
   padding-top mija fixed nav strony głównej (w kreatorze pasek jest solid). */
.wizard.section { min-height: 100vh; padding-block: calc(var(--nav-h) + var(--sp-lg)) var(--sp-lg); }
@media (max-width: 640px) { .wizard.section { min-height: auto; padding-block: calc(var(--nav-h) + var(--sp-md)) var(--sp-md); } }
/* Stała notka pod oknem kreatora (zapis lokalny, pliki nie idą na serwer) */
.wizard__note { max-width: var(--panel-max); margin: var(--sp-sm) auto 0;
  font-size: var(--fs-small); text-align: center; }

/* #15: dotyk - nie utrzymuj stanu hover (uniesienia); daj czysty tap-feedback */
@media (hover: none) {
  .tile:hover, .btn:hover, .btn--primary:hover, .btn--ghost:hover,
  .bool__btn:hover, .upload__btn:hover { transform: none; }
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.tile:active { transform: scale(0.99); }

/* ── TILES (kafelki wyboru) - równe karty, 1/2/3 kolumny ── */
.tiles { display: grid; gap: var(--sp-md); }
/* minmax(0,…): karta nie może rozpychać siatki poza viewport (długie tytuły/desc) */
.tiles__grid { display: grid; gap: var(--sp-sm); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 540px) { .tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Układ 2×2 (#12): kolumna A = szerokość kropki, kolumna B = treść.
   Wiersz 1 (align-items:center) trzyma kropkę + pierwszą linię wyśrodkowane
   względem siebie; wiersz 2 = pozostałe linie. */
.tile {
  position: relative;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 3px;
  align-items: center; align-content: start; text-align: left;   /* start: treść u góry mimo równej wysokości kart */
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 18px 20px; min-height: var(--touch-min);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tile:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.tile:has(.tip--corner) { padding-right: 44px; }
.tile__check { grid-column: 1; grid-row: 1; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--hairline-strong); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
/* Pierwsza linia obok kropki (bezpośrednie dziecko - kategoria lub tytuł). */
.tile > .tile__cat, .tile > .tile__title { grid-column: 2; grid-row: 1; }
.tile__rest { grid-column: 2; grid-row: 2; display: grid; gap: 3px; }
.tile__cat { color: var(--ink-muted); }
.tile__title { font-weight: 600; font-size: var(--fs-title); color: var(--ink); }
.tile__desc { font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.45; }
.tile[aria-pressed="true"] { background: var(--bordeaux-tint); border-color: var(--bordeaux); border-width: 1.5px; padding: 17px 19px; }
.tile[aria-pressed="true"]:has(.tip--corner) { padding-right: 43px; }
.tile[aria-pressed="true"] .tile__check { border-color: var(--bordeaux); background:
  radial-gradient(circle, var(--paper) 0 4px, var(--bordeaux) 5px); }

/* ── FIELDS ── */
.fieldgroup { display: grid; gap: var(--sp-lg); }
.field { position: relative; display: grid; gap: var(--sp-xs); }
/* 40px: strefa bezpieczna „?" - długa etykieta zawija się PRZED ikoną (nie pod nią) */
.field:has(.tip--corner) .field__head { padding-right: 40px; }
.field__head { display: flex; align-items: center; gap: 8px; }
/* #14: pojedyncze pola (suwak, kwota, wkład, tak/nie) w boxie - „?" w rogu jak wszędzie */
.field--boxed { background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: clamp(var(--sp-md), 3vw, var(--sp-lg)); gap: var(--sp-sm); }
.field__head { flex-wrap: wrap; }
.field__label { font-weight: 600; font-size: var(--fs-title); }
/* #4: dyskretne oznaczenie pola nieobowiązkowego (np. wkład własny - można pominąć). */
/* --ink-muted (nie --ink-faint): to czytany tekst, faint ma kontrast ~2,5:1 (poniżej AA) */
.field__optional { font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600; }
.field__error { color: var(--danger); font-size: var(--fs-small); font-weight: 500; }
.field__error::before { content: "⚠ "; }
.field.is-error .input, .field.is-error .input-wrap .input { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }
.field__other { margin-top: var(--sp-xs); }
.field__other-input { width: 100%; }

/* ── INPUTS ── */
.input {
  /* min-width:0 - w grid/flex input nie może wymuszać szerokości swojej
     wewnętrznej miary (Safari liczy ją szerzej niż Chrome = overflow) */
  width: 100%; min-width: 0; font-family: var(--font-sans); font-size: var(--fs-body);
  font-feature-settings: "tnum"; color: var(--ink);
  background: var(--surface-raised); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm); padding: 14px 16px; min-height: var(--touch-min);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input--sm { padding: 10px 12px; min-height: 40px; font-size: var(--fs-small); }
.input::placeholder { color: var(--ink-faint); }
.input:focus { outline: none; background: var(--paper); border-color: var(--bordeaux); box-shadow: var(--focus-ring); }
.input:disabled { background: var(--surface-sunken); color: var(--ink-faint); cursor: not-allowed; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 44px; }
.input__suffix { position: absolute; right: 16px; color: var(--ink-muted); font-feature-settings: "tnum"; pointer-events: none; }
.input--amount { font-variant-numeric: tabular-nums; }

/* ── SLIDER ── */
.slider-field { display: grid; gap: var(--sp-sm); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--bordeaux) var(--fill, 0%), var(--surface-sunken) var(--fill, 0%)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--bordeaux); box-shadow: 0 1px 3px rgba(35,34,32,.18); cursor: grab; }
.slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--bordeaux); box-shadow: 0 1px 3px rgba(35,34,32,.18); cursor: grab; }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.slider:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

/* ── WKŁAD WŁASNY (dwukierunkowy) ── */
.wklad { display: grid; gap: var(--sp-xs); }
/* minmax(0,…): tor może zejść poniżej miary inputa - bez tego rząd kwota+% rozpychał kartę na mobile */
.wklad__inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.7fr); gap: var(--sp-sm); align-items: center; }
.wklad__eq { color: var(--ink-faint); font-size: 1.25rem; text-align: center; }
.input-wrap--pct .input { padding-right: 34px; }
.input-wrap--pct .input__suffix { right: 12px; }
.wklad__readout { font-size: var(--fs-small); min-height: 1.2em; color: var(--bordeaux); font-weight: 500; }
.wklad__readout.is-over { color: var(--danger); }   /* wkład przekracza bazę */

/* ── BOOL (Tak/Nie) ── */
.bool { display: inline-grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xs); }
.bool__btn { min-width: 96px; min-height: var(--touch-min); padding: 12px 24px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong); background: var(--surface-raised); font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.bool__btn:hover { border-color: var(--ink); }
.bool__btn[aria-pressed="true"] { background: var(--bordeaux-tint); border-color: var(--bordeaux); border-width: 1.5px; color: var(--ink); }
.reveal { margin-top: var(--sp-sm); padding-left: var(--sp-sm); border-left: 1px solid var(--hairline); display: grid; gap: var(--sp-sm); }
.reveal[hidden] { display: none; }   /* fix #9: atrybut hidden musi wygrać z display:grid */

/* ── PREPARE („Co przygotować") ── */
.prepare { background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: var(--sp-md); display: grid; gap: var(--sp-sm); position: relative; }
.prepare__eyebrow { color: var(--amber); display: inline-flex; align-items: center; gap: 8px; }
.prepare__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.prepare__intro { margin: 0; font-size: var(--fs-small); }
/* #6: legenda „zasady gry" - na dole, oddzielona hairline; te same chipy co w liście. */
.prepare__legend { border-top: 1px solid var(--hairline); margin-top: var(--sp-xs);
  padding-top: var(--sp-sm); display: grid; gap: var(--sp-xs); }
.prepare__legend-title { color: var(--ink-muted); }
.prepare__legend-list { display: grid; gap: 6px; }
.prepare__legend-list li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.prepare__legend-list .chip { flex: none; }
.prepare__list { display: grid; gap: 2px; margin-top: var(--sp-xs); }
.prepare__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 12px;
  border-top: 1px solid var(--hairline); }
.prepare__item:first-child { border-top: none; }
.prepare__doc { font-weight: 600; color: var(--ink); }
.prepare__link { margin-left: auto; font-size: var(--fs-small); }
/* Mobile: odnośnik we własnej linii pod nazwą dokumentu - nie ściska się z chipem */
@media (max-width: 559px) {
  .prepare__link { flex-basis: 100%; margin-left: 0; }
}

/* ── CHIP (tag źródła) ── */
.chip { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface-sunken); border-radius: var(--r-sm); padding: 3px 8px; white-space: nowrap; }
.chip--req { color: var(--bordeaux); background: var(--bordeaux-tint); }

/* ── BANER BRAKÓW (info po „Dalej" na kroku dokumentów, #4) ── */
.docbanner { background: var(--amber-tint); border: 1px solid rgba(136, 82, 10, 0.28);   /* --amber w niskiej alfie */
  border-radius: var(--r-md); padding: var(--sp-md); display: grid; gap: var(--sp-xs); }
.docbanner[hidden] { display: none; }   /* atrybut hidden musi wygrać z display:grid (jak .reveal) */
.docbanner__title { font-weight: 600; }
.docbanner__list { list-style: disc; padding-left: 1.3em; display: grid; gap: 2px; }
.docbanner__outro { font-size: var(--fs-small); }

/* ── DOKUMENTY ── */
.doc { position: relative; display: grid; gap: var(--sp-xs);
  padding: clamp(var(--sp-md), 3vw, var(--sp-lg)); background: var(--surface-raised);
  border: 1px solid var(--hairline); border-radius: var(--r-md); }
.doc:has(.tip--corner) .doc__title-row { padding-right: 40px; }   /* strefa bezpieczna „?" - tytuł zawija się przed ikoną */
.doc__head { display: grid; gap: 6px; }
.doc__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.doc__title { font-weight: 600; font-size: var(--fs-title); }
/* Odnośnik pod tekstem pomocniczym (osobna linia); justify-self: klikalny tylko tekst */
.doc__extlink { font-size: var(--fs-small); justify-self: start; }
.doc__help { font-size: var(--fs-small); }
/* Upload / pole - oddzielone delikatną linią, trochę niżej */
.doc__action { margin-top: var(--sp-sm); padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }

.upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); }
.upload__btn { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 10px 20px;
  border: 1px dashed var(--hairline-strong); border-radius: var(--r-sm); background: var(--surface-sunken);
  font-weight: 600; font-size: var(--fs-small); cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.upload__btn:hover { border-color: var(--bordeaux); }
/* fokus klawiatury: input plikowy jest sr-only - pierścień nosi widoczny label */
.sr-only:focus-visible + .upload__btn { box-shadow: var(--focus-ring); border-color: var(--bordeaux); }
.upload__status { font-size: var(--fs-small); color: var(--ink-muted); }
.upload__status.is-ok { color: var(--success); font-weight: 600; }
/* „Usuń" - wycofuje dołączony plik. Dyskretny, w kolorze niebezpieczeństwa. */
.upload__remove { font-size: var(--fs-small); color: var(--danger); }
.upload__remove:hover { color: var(--danger); text-decoration: underline; }
/* Wariant w recapie podsumowania: odsunięty od nazwy pliku w wierszu listy. */
.upload__remove--inline { margin-left: var(--sp-sm); }

.repeat__head { display: none; }
.repeat__rows { display: grid; gap: var(--sp-sm); }
.repeat__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); padding: var(--sp-sm);
  background: var(--surface-sunken); border-radius: var(--r-sm); }
.repeat__cell { position: relative; display: flex; align-items: center; }
.repeat__suffix { position: absolute; right: 12px; color: var(--ink-muted); font-size: var(--fs-small); }
/* Pasek nagłówka wiersza (mobile): nazwa („Kredyt 1") po lewej, wyraźny X po prawej -
   X ma własne miejsce nad polami, nie zlewa się z nimi */
.repeat__rowhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  padding-bottom: var(--sp-xs); margin-bottom: var(--sp-2xs); border-bottom: 1px solid var(--hairline); }
.repeat__del { flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--hairline-strong); background: var(--surface-raised);
  color: var(--ink-muted); font-size: 1.25rem; line-height: 1; }
.repeat__del:hover { color: var(--danger); border-color: var(--danger); }
@media (min-width: 560px) {
  .repeat__head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 32px; gap: var(--sp-sm); padding-inline: var(--sp-sm); }
  .repeat__row { grid-template-columns: repeat(3, minmax(0, 1fr)) 32px; align-items: center; background: transparent; padding: 0; }
  /* Pasek nagłówka rozpuszcza się w siatce: nazwa znika, X (order:1 = za komórkami)
     wraca do ostatniej kolumny - jak przed przebudową */
  .repeat__rowhead { display: contents; }
  .repeat__rowname { display: none; }
  .repeat__del { order: 1; width: 28px; height: 28px; border: none; background: none; }
}

/* ── SUMMARY ── */
.summary { display: grid; gap: var(--sp-lg); }
.summary__block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  margin-bottom: var(--sp-sm); }
.summary__rows { display: grid; gap: 2px; }
.defrow { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-sm); align-items: baseline;
  padding-block: 10px; border-top: 1px solid var(--hairline); }
/* overflow-wrap: bardzo długa wartość (kwota, e-mail) łamie się zamiast rozpychać kartę */
.defrow__value { font-weight: 600; text-align: right; font-feature-settings: "tnum"; overflow-wrap: anywhere; }
.summary__docs { display: grid; gap: 4px; }
.summary__docs .is-ok { color: var(--success); font-weight: 600; }
.summary__gap { margin-top: var(--sp-sm); }
/* Dołączanie brakujących plików wprost w podsumowaniu (bez cofania) */
.summary__todo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-sm); }
.summary__todo .upload__btn { min-height: 0; padding: 4px 12px; }
.summary__todo .field__error { flex-basis: 100%; }

.exit { display: grid; gap: var(--sp-md); padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
.exit__note { font-size: var(--fs-small); max-width: 60ch; }   /* „co dalej" po wysyłce samodzielnej */
.exit__paths { display: grid; gap: var(--sp-md); }
.exit__path { display: grid; gap: var(--sp-xs); align-content: start; padding: var(--sp-md);
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-raised); }
.exit__path--soon { opacity: 0.7; }
.exit__path-title { font-weight: 600; }
.exit__path .btn { margin-top: var(--sp-xs); justify-self: start; }
@media (min-width: 640px) { .exit__paths { grid-template-columns: 1fr 1fr; } }

/* Wyjście A (skopiuj) - standalone (tryb prywatny) lub w rozwijanym fallbacku (tryb formularza). */
.exit__copy { display: grid; gap: var(--sp-xs); }
.exit__copy .btn { justify-self: start; margin-top: var(--sp-xs); }
.exit__fallback { border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--surface-raised); padding: 0 var(--sp-md); }
.exit__fallback-summary { cursor: pointer; padding: var(--sp-sm) 0; font-weight: 600;
  font-size: var(--fs-small); color: var(--ink-muted); list-style-position: inside; }
.exit__fallback-summary:hover { color: var(--bordeaux); }
.exit__fallback[open] .exit__copy { padding-bottom: var(--sp-md); }

.summary__msg { display: grid; gap: var(--sp-xs); }
.message { width: 100%; font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.5;
  font-feature-settings: "tnum"; color: var(--ink); background: var(--surface-sunken);
  border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: var(--sp-sm); resize: vertical; white-space: pre; overflow-x: auto; }
.summary__restart { justify-self: center; margin-top: var(--sp-sm); }

/* ── TOOLTIP (róg karty, ciemny dymek, klamrowany do viewportu) ── */
.tip { position: relative; display: inline-flex; }
.tip--corner { position: absolute; top: 14px; right: 14px; z-index: 3; }
/* Karty z dużym paddingiem (pole w boxie, dokument): „?" w linii pierwszego
   wiersza tekstu - pozycja podąża za paddingiem karty (ten sam clamp) */
.field--boxed > .tip--corner, .doc > .tip--corner {
  top: clamp(var(--sp-md), 3vw, var(--sp-lg));
  right: clamp(var(--sp-md), 3vw, var(--sp-lg));
}
/* Pole bez boxa (kafelki/select): brak paddingu - „?" w linii etykiety,
   przy prawej krawędzi pola (etykieta i tak zawija się przed nim: 40px strefy) */
.field:not(.field--boxed) > .tip--corner { top: 1px; right: 0; }
.tip__btn { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hairline-strong);   /* min. 24px celu (WCAG 2.5.8) */
  color: var(--ink-muted); background: var(--paper); font-size: 12px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.tip__btn:hover, .tip__btn[aria-expanded="true"] { border-color: var(--bordeaux); color: var(--paper); background: var(--bordeaux); }
.tip__bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(280px, calc(100vw - 24px)); z-index: 60;
  font-size: var(--fs-small); font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none;
  color: var(--paper); background: var(--ink); border: none;
  border-radius: var(--r-sm); padding: 10px 13px; box-shadow: var(--shadow-step);
  /* #5: płynne pojawianie/znikanie zamiast on/off */
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); }
.tip__bubble.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-fast) var(--ease), visibility 0s; }
/* najechanie pokazuje dymek (desktop); klik przypina na stałe (JS: .is-open). */
@media (hover: hover) {
  .tip:hover .tip__bubble { opacity: 1; visibility: visible; transition: opacity var(--dur-fast) var(--ease), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .tip__bubble, .tip__bubble.is-open, .tip:hover .tip__bubble { transition: visibility 0s; }
}
/* #7: karta z otwartym/hoverowanym hintem nad sąsiadami (dymek nie chowa się za innymi kartami). */
.tile:hover, .doc:hover, .field:hover,
.tile:has(.tip__bubble.is-open), .doc:has(.tip__bubble.is-open), .field:has(.tip__bubble.is-open) {
  position: relative; z-index: 10;
}

/* ── RESUME (draft) — monit w kolumnie tekstowej hero, nad eyebrow ── */
.resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-lg);
  max-width: 46ch; }   /* jak lead - baner nie rozjeżdża się na całą kolumnę */
.resume__actions { display: flex; align-items: center; gap: var(--sp-md); }

/* ── KONTAKT (tylko strona główna) - wartości dużym szeryfem: osobiście, nie tabelka ── */
.contact { margin-top: var(--sp-section); }
.contact__head { margin-bottom: var(--sp-xl); }
.contact__eyebrow { display: inline-flex; align-items: center; gap: 12px;
  color: var(--bordeaux); margin-bottom: var(--sp-md); }
.contact__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--bordeaux); }
.contact__title { margin-bottom: var(--sp-sm); }
.contact__note { font-size: var(--fs-lead); max-width: 52ch; }
.contact__list { display: grid; }
/* Odstępy w danych kontaktowych delikatnie mniejsze (--sp-sm zamiast --sp-md). */
.contact__list li { display: grid; gap: 6px; padding-block: var(--sp-sm); border-top: 1px solid var(--hairline); }
.contact__value { font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.3rem, 3.2vw, 1.9rem); line-height: 1.2; color: var(--ink);
  text-decoration: none; overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease); }
a.contact__value:hover { color: var(--bordeaux); }
@media (min-width: 860px) {
  /* marginalia 110px - ten sam rytm co tagi w pasie bordo i instrukcjach */
  .contact__list li { grid-template-columns: 110px 1fr; align-items: baseline; gap: var(--sp-md); }
  /* Dwie kolumny: LEWA = nagłówek + dane kontaktowe (jedna pod drugą),
     PRAWA = mini-formularz na pełną wysokość lewej kolumny.
     Wiersze: nagłówek (auto) + dane (1fr); formularz spina oba wiersze. */
  .contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: clamp(var(--sp-xl), 6vw, 120px); align-items: stretch; }
  .contact__head { grid-column: 1; grid-row: 1; margin-bottom: var(--sp-lg); }
  .contact__list { grid-column: 1; grid-row: 2;
    display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
  .contact__list li { display: grid; }
  .cform { grid-column: 2; grid-row: 1 / 3; align-self: stretch; height: 100%; }
}

/* ── MINI-FORMULARZ KONTAKTOWY (.cform) - 3 mikro-kroki, jedna rzecz na raz.
   Karta jak krok kreatora, w mniejszej skali; wzorce współdzielone:
   .stepper (postęp), .input, .sendform__status/__done (statusy). ── */
.cform { background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--r-md); box-shadow: var(--shadow-step);
  padding: clamp(var(--sp-md), 3vw, var(--sp-lg));
  margin-top: var(--sp-lg); align-self: start; }
@media (min-width: 860px) { .cform { margin-top: 0; } }
.cform__title { font-size: var(--fs-card-title); margin-bottom: var(--sp-2xs); }
.cform__intro { font-size: var(--fs-small); margin-bottom: var(--sp-md); max-width: 52ch; }
.cform__body { display: grid; gap: var(--sp-sm); }
.cform__body .stepper { margin-bottom: 0; }
.cform__label { display: grid; gap: var(--sp-xs); font-weight: 600; font-size: var(--fs-title); }
.cform__textarea { resize: vertical; min-height: 108px; }
.cform__note { font-size: var(--fs-small); }
.cform__nav { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-sm); margin-top: var(--sp-xs); }
.cform__back { font-size: var(--fs-small); color: var(--ink-muted); }
.cform__back:hover { color: var(--bordeaux); }
.cform__nav .btn { min-width: 140px; }
/* Linia akceptacji polityki - mała, ale czytana: --ink-muted (kontrast AA) */
.cform__policy { font-size: var(--fs-label); }

/* ── WSPÓŁPRACA / PARTNERZY (podstrona - szkielet) ── */
.partners__eyebrow { color: var(--bordeaux); margin-bottom: var(--sp-sm); }
.partners__title { margin-bottom: var(--sp-md); }
.partners__lead { font-size: var(--fs-lead); max-width: 52ch; margin-bottom: var(--sp-xl); }
.partners__grid { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
@media (min-width: 640px) { .partners__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.partner { display: grid; gap: var(--sp-xs); align-content: start; min-height: 210px;
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: var(--sp-lg); text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
a.partner:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }
.partner__logo { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--ink-muted);
  font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: var(--sp-xs); }
/* Logo obrazkowe (webp/png) - wysokość stała, szerokość wg proporcji, bez tła/badge. */
.partner__logo--img { justify-self: start; width: auto; height: 36px; max-width: 100%;
  background: none; border-radius: 0; margin-bottom: var(--sp-sm); object-fit: contain; }
/* Loga bardzo szerokie (poziome, np. jmiszewicz) - niższe, żeby nie dominowały karty. */
.partner__logo--slim { height: 20px; }
.partner__name { margin-bottom: 2px; }
.partner__desc { font-size: var(--fs-small); }
.partner__link { margin-top: auto; }
.partner--soon { opacity: 0.65; }

/* ── FOOTER (subtelna) ──
   Mobile: kolumna wycentrowana, każdy element we własnym wierszu (spójnie
   z wycentrowanym podpisem realizacji); desktop: rząd brand | linki. */
/* Tło w kolorze akcentu (pas bordo/zieleń). Teksty i linki na tokenach „on-bordeaux". */
.footer { margin-top: var(--sp-xl); background: var(--bordeaux); color: var(--on-bordeaux-muted);
  border-top: 1px solid var(--hairline-on-bordeaux); padding-block: var(--sp-md); }
.footer .muted { color: var(--on-bordeaux-muted); }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); text-align: center; }
.footer__brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs); font-size: var(--fs-small); }
.footer__logo { width: 24px; opacity: 0.9; }
.footer__links { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-sm) var(--sp-md); }
@media (min-width: 640px) {
  .footer__inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; }
  .footer__brand { flex-direction: row; gap: 10px; }
}
/* Linki na pasie akcentu: jasne (paper), pełny kontrast na hover; fokus w jasnym ringu. */
.footer__links .lnk { font-size: var(--fs-small); color: var(--on-bordeaux-muted); }   /* jedna, mniejsza wielkość dla wszystkich linków */
.footer__links .lnk:hover { color: var(--paper); }
.footer .lnk:focus-visible { box-shadow: var(--focus-ring-on-bordeaux); }
/* Cichy wiersz z podpisem realizacji - wyśrodkowany, subtelny (nie druga sekcja). */
.footer__credit-row { text-align: center; margin-top: var(--sp-sm); }
.footer__credit { font-size: var(--fs-label); color: var(--on-bordeaux-faint); text-decoration: none;
  transition: color var(--dur-fast) var(--ease); }
.footer__credit:hover { color: var(--paper); }
.footer__credit:focus-visible { box-shadow: var(--focus-ring-on-bordeaux); }

/* ── ŚCIEŻKA B: FORMULARZ WYSYŁKI (submit.js) ── */
/* Ścieżka B jest wyższa niż A - na desktopie zajmuje pełną szerokość pod spodem. */
@media (min-width: 640px) { .exit__path--send { grid-column: 1 / -1; } }
.sendform { display: grid; gap: var(--sp-lg); margin-top: var(--sp-xs); }   /* więcej powietrza między sekcjami */
.sendform__intro { font-size: var(--fs-small); max-width: 60ch; }
.sendform__section { display: grid; gap: var(--sp-sm); }
.sendform__legal { gap: var(--sp-md); }
.sendform__grid { display: grid; gap: var(--sp-sm); }
@media (min-width: 520px) { .sendform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sendform__field { display: grid; gap: 4px; }
.sendform__field .field__label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.sendform__attach { font-size: var(--fs-small); }
/* Stopka wysyłki: Turnstile z boku (desktop), nad przyciskiem (mobile). */
.sendform__foot { display: grid; gap: var(--sp-md); }
.sendform__foot-main { display: grid; gap: var(--sp-sm); justify-items: start; }
.sendform__foot-main .btn { justify-self: start; }
@media (min-width: 640px) {
  .sendform__foot { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--sp-lg); }
  .sendform__foot .sendform__foot-main { grid-column: 1; grid-row: 1; }
  .sendform__foot .cf-turnstile-box { grid-column: 2; grid-row: 1; }
}
/* Honeypot - niewidoczny dla ludzi, dostępny dla botów. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Status wysyłki */
.sendform__status { font-size: var(--fs-small); font-weight: 600; padding: 10px 14px; border-radius: var(--r-sm); }
.sendform__status.is-err { color: var(--danger); background: var(--danger-tint); }
.sendform__done { display: grid; gap: var(--sp-xs); padding: var(--sp-md); border: 1px solid var(--success);
  border-radius: var(--r-md); background: var(--success-tint); }
.sendform__done-title { color: var(--success); }

/* Klauzula RODO (rozwijana) */
.rodo { border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface-raised); padding: 0 var(--sp-sm); }
.rodo__summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: var(--fs-small); list-style-position: inside; }
.rodo__summary:hover { color: var(--bordeaux); }
.rodo__intro { font-size: var(--fs-small); margin: var(--sp-xs) 0 4px; }
.rodo__admin { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px var(--sp-md);
  font-size: var(--fs-small); margin-bottom: var(--sp-sm); }
.rodo__admin dt { color: var(--ink-muted); font-weight: 600; }
.rodo__admin dd { color: var(--ink-muted); font-feature-settings: "tnum"; overflow-wrap: anywhere; }   /* długi e-mail łamie się zamiast rozpychać */
.rodo__p { font-size: var(--fs-small); line-height: 1.5; margin-bottom: var(--sp-xs); }
.rodo[open] .rodo__p:last-child { margin-bottom: var(--sp-sm); }

/* Checkbox zgody */
.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-xs); align-items: start;
  font-size: var(--fs-small); line-height: 1.45; cursor: pointer; }
.consent__box { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--bordeaux); cursor: pointer; flex: none; }

/* Kontener widgetu Turnstile. Widget ma sztywne min. 300px - na najwęższych
   ekranach iframe zwęża się do kontenera (utnie brzeg brandingu, checkbox
   zostaje klikalny) zamiast rozpychać stronę w poziomie. */
.cf-turnstile-box { min-height: 0; max-width: 100%; }
.cf-turnstile-box:not(:empty) { min-height: 66px; }
.cf-turnstile-box iframe { max-width: 100%; }

/* ── PODSTRONA: POLITYKA PRYWATNOŚCI ── */
.legal-page { max-width: 72ch; }
.legal-page__eyebrow { color: var(--bordeaux); margin-bottom: var(--sp-sm); }
.legal-page__title { margin-bottom: var(--sp-sm); }
.legal-page__lead { font-size: var(--fs-lead-hero); max-width: 60ch; margin-bottom: var(--sp-lg); }
.legal-block { padding-top: var(--sp-md); margin-top: var(--sp-md); border-top: 1px solid var(--hairline); }
.legal-block h2 { font-size: var(--fs-title); margin-bottom: var(--sp-xs); }
.legal-block p { color: var(--ink-muted); line-height: 1.6; }
.legal-page__back { margin-top: var(--sp-lg); }

/* ── PODSTRONA: DZIĘKUJEMY (potwierdzenie po wysyłce) ──
   Wyśrodkowana kolumna: znak ✓ + tytuł + „co dalej" (2 kroki) + CTA. */
.thanks { max-width: 60ch; margin-inline: auto; text-align: center; }
.thanks__mark { display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: var(--sp-md); border-radius: 50%;
  color: var(--paper); background: var(--bordeaux); }
.thanks__mark svg { width: 30px; height: 30px; }
.thanks__eyebrow { color: var(--bordeaux); margin-bottom: var(--sp-sm); }
.thanks__title { margin-bottom: var(--sp-sm); }
.thanks__lead { font-size: var(--fs-lead-hero); max-width: 48ch; margin-inline: auto; }
/* Kroki: numer szeryfem + treść; na mobile wyśrodkowane, na desktopie do lewej. */
.thanks__steps { list-style: none; display: grid; gap: var(--sp-md);
  margin: var(--sp-xl) auto 0; max-width: 46ch; text-align: left; }
.thanks__steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-md); align-items: start; }
.thanks__step-num { font-family: var(--font-serif); color: var(--bordeaux); font-size: var(--fs-title); line-height: 1; }
.thanks__step-title { font-size: var(--fs-title); margin-bottom: var(--sp-2xs); }
.thanks__steps p { color: var(--ink-muted); line-height: 1.6; }
.thanks__note { margin-top: var(--sp-xl); font-size: var(--fs-small); }
.thanks__actions { margin-top: var(--sp-lg); }

/* ── PODSTRONY-INSTRUKCJE (jak pozyskać raport BIK, numer KRS, PIT) ──
   Współdzielą szkielet .legal-page; numerowana lista kroków z licznikiem. */
.howto-steps { list-style: none; display: grid; gap: var(--sp-sm); counter-reset: step; margin-top: var(--sp-sm); }
.howto-steps li { position: relative; padding-left: 44px; color: var(--ink-muted); line-height: 1.6; }
.howto-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 2px; font-family: var(--font-serif); color: var(--bordeaux); }
.howto-steps strong { color: var(--ink); }
.howto-note { margin-top: var(--sp-sm); padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  background: var(--surface-sunken); color: var(--ink-muted); line-height: 1.6; font-size: var(--fs-small); }

/* ── HELPER BEZCZYNNOŚCI (#11) - cichy pasek na dole, nie modal ──
   #4: wejście I wyjście płynne. Stan spoczynkowy = zsunięty pod ekran,
   przezroczysty, poza a11y (visibility). Klasa .is-visible pokazuje. */
/* Pasek pokazuje się wyłącznie w kreatorze, więc jego wnętrze trzyma geometrię
   `.wizard .shell` (max-width + ten sam padding boczny) - krawędzie w jednej linii. */
.idle-help { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: var(--sp-sm) var(--sp-md);
  visibility: hidden; transform: translateY(100%); opacity: 0; pointer-events: none;
  transition: transform var(--dur-step) var(--ease), opacity var(--dur-step) var(--ease), visibility 0s linear var(--dur-step); }
.idle-help.is-visible { visibility: visible; transform: none; opacity: 1; pointer-events: auto;
  transition: transform var(--dur-step) var(--ease), opacity var(--dur-step) var(--ease), visibility 0s; }
/* Mobile: tekst nad akcjami (jedno pod drugim), X w rogu paska;
   desktop (640px+): jeden rząd - tekst | akcje po prawej, X w rzędzie. */
.idle-help__inner { position: relative; display: grid; gap: var(--sp-xs);
  max-width: var(--wizard-max); margin-inline: auto;
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: var(--shadow-step); padding: var(--sp-sm) var(--sp-md);
  padding-right: 56px; }   /* miejsce na X w rogu - tekst nie wchodzi pod przycisk */
.idle-help__text { margin: 0; font-weight: 600; }
.idle-help__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-md); }
.idle-help__close { position: absolute; top: 9px; right: 9px;
  width: 34px; height: 34px; border-radius: 50%; color: var(--ink-muted); font-size: 1.3rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
.idle-help__close:hover { color: var(--ink); background: var(--surface-sunken); }
@media (min-width: 640px) {
  .idle-help__inner { display: flex; align-items: center; gap: var(--sp-sm) var(--sp-md); padding-right: var(--sp-md); }
  .idle-help__actions { margin-left: auto; }
  .idle-help__close { position: static; }
}
@media (prefers-reduced-motion: reduce) { .idle-help, .idle-help.is-visible { transition: visibility 0s; } }