/* =============================================================================
   Przegląd dostępności — jedyny arkusz aplikacji `ranking`.

   Zastąpił ranking-components.css i ranking-landing.css oraz bloki page_style
   rozsypane po szablonach. Kolejność sekcji jest znacząca: powierzchnie (04)
   muszą stać po szkielecie (03), a warianty na ciemnym po prymitywach (06).

   01 Reset
   02 Tokeny lokalne
   03 Szkielet: powłoka, nawigacja, stopka
   04 Powierzchnie sekcji i pełne tło
   05 Typografia sekcji
   06 Prymitywy
   07 Warianty na ciemnym tle
   08 Fokus
   09 Dane i wykresy
   10 Komponenty stron
   11 Breakpointy
   12 Ruch, wysoki kontrast, druk
   ========================================================================== */


/* == 01 Reset ============================================================== */

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


/* == 02 Tokeny lokalne ===================================================== */

:root {
  /* Tekst komponentów jedzie tymi tokenami, nie kolorami wprost. Powierzchnia
     ciemna przełącza je u siebie, więc komponent nie musi mieć bliźniaczej
     reguły pod `.rk-section--dark`, która i tak przegrywała specyficznością
     z własną regułą komponentu (`.rk-plot__data > summary`). */
  --rk-text: var(--ink-900);
  --rk-text-soft: var(--ink-700);
  --rk-text-muted: var(--ink-500);
  --rk-line: var(--ink-200);
  /* Kreska rozdzielająca wiersze danych. Mocniejsza od `--rk-line`, bo tam nie
     obrysowuje płyty, tylko dzieli treść i musi być widoczna sama z siebie. */
  --rk-rule: var(--ink-300);
  /* Tło komponentu, który maluje własną powierzchnię (płyta wykresu, kafel,
     karta ustalenia). Ciemne pasmo przełącza go u siebie, więc komponent nie
     może wylądować z białym tłem pod jasnym tekstem. */
  --rk-panel: var(--card);

  --rk-gutter: 40px;
  --rk-gutter-sm: 22px;
  --rk-section-y: var(--space-9);
  --rk-section-y-sm: var(--space-8);
  --rk-measure: 68ch;
  --rk-measure-lead: 62ch;

  --rk-focus-ring: var(--ink-900);
  --rk-focus-halo: var(--paper);

  /* Rampa porządkowa na jasnym tle. Zwalidowana względem bieli (--card):
     jasny kraniec daje 3,45:1 na #ffffff, ale tylko 2,82:1 na --paper-2,
     dlatego płyta wykresu na jasnej sekcji jest zawsze biała. */
  --rk-data-1: var(--ink-400);
  --rk-data-2: var(--ink-500);
  --rk-data-3: var(--ink-600);
  --rk-data-4: var(--ink-700);
  --rk-data-5: var(--ink-900);
  --rk-data-track: var(--paper-2);
  --rk-data-gap: var(--card);
}


/* == 03 Szkielet =========================================================== */

body { margin: 0; background: var(--card); overflow-x: clip; }

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

.ranking-shell {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--paper);
  font-family: var(--font-sans);
  color: var(--ink-900);
}

.eac-skip {
  position: absolute;
  left: var(--space-2);
  top: -60px;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--ink-900);
  color: var(--paper);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.eac-skip:focus { top: 0; }

.ranking-shell-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--rk-gutter);
  background: var(--card);
  isolation: isolate;
}
.ranking-shell-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--card);
  border-bottom: 1px solid var(--ink-300);
}
.ranking-shell-nav__brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ranking-shell-nav__brand-name {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-subtitle);
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
}
.ranking-shell-nav__brand-context {
  padding-left: 18px;
  border-left: 1px solid var(--ink-300);
  font-size: var(--fs-caption);
  color: var(--ink-500);
  white-space: nowrap;
}
.ranking-shell-nav__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.ranking-nav-link {
  font-size: 13px;
  color: var(--ink-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.ranking-nav-link:hover { color: var(--ink-900); border-color: var(--ink-300); }
.ranking-nav-link[aria-current="page"] {
  color: var(--ink-900);
  font-weight: var(--fw-semibold);
  border-color: var(--ink-900);
}
.ranking-nav-link--eac { color: var(--ink-700); font-weight: var(--fw-bold); white-space: nowrap; }
.ranking-nav-separator { color: var(--ink-500); font-size: 13px; user-select: none; }

.ranking-shell-footer {
  --rk-footer-muted: var(--text-on-dark-muted);
  --rk-footer-line: rgb(255 255 255 / .24);
  padding: var(--space-8) var(--rk-gutter) var(--space-7);
}
.ranking-shell-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(150px, .6fr) minmax(260px, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.ranking-shell-footer__brand {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: 19px;
}
.ranking-shell-footer__copy {
  margin: var(--space-3) 0 0;
  max-width: 500px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--rk-footer-muted);
}
.ranking-shell-footer__heading {
  margin: 0 0 13px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rk-footer-muted);
}
.ranking-shell-footer__links { display: grid; gap: 9px; }
.ranking-shell-footer__links a,
.ranking-shell-footer__meta a {
  width: fit-content;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rk-footer-line);
}
.ranking-shell-footer__meta { display: grid; gap: var(--space-3); justify-items: start; }
.ranking-shell-footer__meta p {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--rk-footer-muted);
}
/* Serwis usługowy wymusza globalnie `footer a:hover { color: var(--paper) }`.
   Na jasnej stopce przeglądu i w stopce karty dawało to biały tekst na jasnym
   tle (1,00:1). Odnośnik trzyma kolor kontekstu, a najechanie zmienia wyłącznie
   podkreślenie. */
.ranking-shell-footer a:hover,
.ranking-shell-footer a:focus-visible,
.card-foot a:hover,
.card-foot a:focus-visible { color: inherit !important; border-bottom-color: currentColor; }


/* == 04 Powierzchnie sekcji i pełne tło ==================================== */

/* Pełne tło sekcji przy zachowaniu czytelnej szerokości treści. Powłoka nadal
   ogranicza layout do 1280 px, a tło wychodzi do krawędzi viewportu.

   `.rk-bleed` NIE zna kolorów: maluje w obie strony jednym tokenem, który
   ustawia klasa powierzchni. Domyślka jest równa tłu powłoki, więc pominięta
   powierzchnia daje widoczny szew, a nie tekst w kolorze tła. */
.rk-bleed {
  position: relative;
  background: var(--rk-bleed-bg, var(--paper));
  box-shadow: 0 0 0 100vmax var(--rk-bleed-bg, var(--paper));
  clip-path: inset(0 -100vmax);
}

/* PRZEJŚCIOWE: stary mechanizm, dopóki wszystkie szablony nie przejdą na
   `.rk-bleed`. Do usunięcia w etapie sprzątania. */
.ranking-full-bleed {
  --full-bleed-bg: var(--ink-900);
  position: relative;
  box-shadow: 0 0 0 100vmax var(--full-bleed-bg);
  clip-path: inset(0 -100vmax);
}

/* Każda powierzchnia deklaruje tło I kolor tekstu w tym samym bloku.
   To jedyny sposób nadania sekcji ciemnego tła. */
.rk-section--light  { --rk-bleed-bg: var(--paper);   background: var(--paper);   color: var(--ink-900); }
.rk-section--card   { --rk-bleed-bg: var(--card);    background: var(--card);    color: var(--ink-900); }
/* Tor wykresu jest domyślnie `--paper-2`, czyli dokładnie tłem tej sekcji:
   pasek bez płyty tracił wtedy skalę i nie było widać, do ilu odmierza. */
.rk-section--sunken { --rk-bleed-bg: var(--paper-2); --rk-data-track: var(--paper); background: var(--paper-2); color: var(--ink-900); }
.rk-section--dark   { --rk-bleed-bg: var(--ink-900); background: var(--ink-900); color: var(--paper); }

/* Ciemna powierzchnia przełącza tokeny tekstu u siebie: wszystko, co jest
   pod nią, dostaje właściwe kolory bez wojny o specyficzność. */
.rk-section--dark, .rk-card--dark {
  --rk-text: var(--paper);
  --rk-text-soft: rgb(244 242 237 / .82);
  --rk-text-muted: var(--text-on-dark-muted);
  --rk-line: var(--border-on-dark);
  --rk-rule: var(--border-on-dark);
  --rk-panel: var(--ink-800);
  /* Rampa porządkowa na ciemnym. Zaczyna się od `--ink-400` (5,74:1 na
     `--ink-900`), nie od `--ink-600` (2,17:1): dwa najniższe stopnie były
     ciemniejsze od progu 3:1 dla obiektów graficznych i przy histogramie na
     ciemnym pasie najniższe kubełki po prostu znikały. */
  --rk-data-1: var(--ink-400);
  --rk-data-2: var(--text-on-dark-muted);
  --rk-data-3: var(--ink-300);
  --rk-data-4: var(--ink-200);
  --rk-data-5: var(--paper);
  --rk-data-track: rgb(255 255 255 / .14);
  --rk-data-gap: var(--ink-900);
}

.rk-section { padding: var(--rk-section-y) var(--rk-gutter); }
.rk-section--tight { padding-block: var(--space-7); }

/* Stopka jasna, gdy ostatnia sekcja strony jest ciemna. Rytm należy do strony,
   nie do bazy: szablon deklaruje klasę przez {% block body_class %}. */
body.rk-footer-light .ranking-shell-footer {
  --rk-bleed-bg: var(--paper);
  --rk-footer-muted: var(--ink-700);
  --rk-footer-line: var(--ink-300);
  --rk-focus-ring: var(--ink-900);
  --rk-focus-halo: var(--paper);
  background: var(--paper);
  color: var(--ink-900);
  border-top: 1px solid var(--ink-200);
}


/* == 05 Typografia sekcji ================================================== */

.rk-kicker {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.rk-h1 {
  margin: 0;
  overflow-wrap: break-word;
  max-width: 20ch;
  font-size: clamp(38px, 5vw, var(--fs-display-lg));
  line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display-lg);
  font-weight: var(--fw-medium);
}
.rk-h2 {
  margin: 0;
  overflow-wrap: break-word;
  max-width: 24ch;
  font-size: clamp(28px, 3.4vw, var(--fs-display-md));
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
  font-weight: var(--fw-medium);
}
.rk-h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-semibold);
}
.rk-lead {
  margin: var(--space-4) 0 0;
  max-width: var(--rk-measure-lead);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-700);
}
.rk-prose { max-width: var(--rk-measure); }
.rk-prose p, .rk-prose li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-700);
}
.rk-prose p { margin: 0 0 var(--space-4); }
.rk-prose p:last-child { margin-bottom: 0; }
.rk-note {
  margin: var(--space-6) 0 0;
  max-width: var(--rk-measure);
  padding-left: var(--space-4);
  border-left: 3px solid var(--ink-300);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-500);
}
.rk-head { margin: 0 0 var(--space-6); }
.rk-note--wide { max-width: none; }

/* Wartości uzupełniające pod rzędem kafli: mniejsze, w jednym rzędzie. */
.rk-medians {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-7) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--rk-line);
  list-style: none;
}
.rk-medians strong {
  display: block;
  font-size: var(--fs-title);
  line-height: 1.1;
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-medians span { display: block; margin-top: var(--space-2); font-size: 13px; line-height: 1.5; color: var(--rk-text-muted); }
.rk-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--space-7);
  align-items: end;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media print {
  .ranking-shell-nav,
  .ranking-shell-footer,
  .card-print,
  .eac-skip { display: none !important; }
  .ranking-shell,
  .rk-section,
  .rk-section--dark,
  .rk-section--light,
  .rk-section--card,
  .rk-section--sunken { color: #000 !important; background: #fff !important; }
  details:not([open]) > *:not(summary) { display: block !important; }
  details summary { list-style: none; }
  a { color: #000 !important; text-decoration: underline; }
  .card-section,
  .card-finding,
  .card-secondary article,
  .card-favorable,
  .card-scope-grid > div,
  figure,
  table { break-inside: avoid; }
  .card-meta,
  .card-meta > div,
  .card-secondary article,
  .card-favorable,
  .card-scope-grid > div,
  .card-tech { color: #000 !important; background: #fff !important; box-shadow: none !important; }
}


/* == 06 Prymitywy ========================================================== */

.rk-link {
  color: var(--ink-900);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-300);
}
.rk-link:hover { border-color: var(--ink-900); }

.rk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--ink-900);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.rk-btn--primary { background: var(--ink-900); color: var(--paper); }
.rk-btn--ghost { background: transparent; color: var(--ink-900); }
.rk-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

.rk-card {
  padding: var(--space-6);
  background: var(--rk-panel);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
}
.rk-card--dark {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
.rk-grid { display: grid; gap: var(--space-5); }
.rk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rk-list--divided { margin: 0; padding: 0; list-style: none; }
.rk-list--divided > li {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--ink-200);
}
.rk-list--divided > li:first-child { border-top: 0; }

.rk-accent {
  display: block;
  width: 82px;
  height: 2px;
  margin: var(--space-5) 0 var(--space-4);
  background: var(--rank-gold);
}


/* == 07 Warianty na ciemnym tle ============================================
   Zasada przeniesiona z .home-card--dark w serwisie usługowym: dla KAŻDEGO
   elementu tekstowego istnieje jawny wariant, a kolor siedzi na tym samym
   elemencie co tło. Brak tej pary dał kontrast 1,08:1 na krokach „Jak badamy”.
   ========================================================================== */

.rk-section--dark .rk-kicker,        .rk-card--dark .rk-kicker,
.rk-section--dark .rk-note,          .rk-card--dark .rk-note,
.rk-section--dark .rk-stat__label,   .rk-card--dark .rk-stat__label,
.rk-section--dark .rk-plot__sub,     .rk-card--dark .rk-plot__sub,
.rk-section--dark .rk-bars__name,    .rk-card--dark .rk-bars__name,
.rk-section--dark .rk-meter__label,  .rk-card--dark .rk-meter__label,
.rk-section--dark .rk-buckets__axis, .rk-card--dark .rk-buckets__axis {
  color: var(--text-on-dark-muted);
}

.rk-section--dark h1, .rk-section--dark h2, .rk-section--dark h3,
.rk-section--dark .rk-h1, .rk-section--dark .rk-h2, .rk-section--dark .rk-h3,
.rk-section--dark strong, .rk-section--dark summary,
.rk-section--dark .rk-stat__value, .rk-section--dark .rk-plot__title,
.rk-section--dark .rk-meter__value, .rk-section--dark .rk-bars__value,
.rk-card--dark h1, .rk-card--dark h2, .rk-card--dark h3,
.rk-card--dark .rk-h1, .rk-card--dark .rk-h2, .rk-card--dark .rk-h3,
.rk-card--dark strong, .rk-card--dark summary,
.rk-card--dark .rk-stat__value, .rk-card--dark .rk-plot__title,
.rk-card--dark .rk-meter__value, .rk-card--dark .rk-bars__value {
  color: var(--paper);
}

.rk-section--dark .rk-lead, .rk-section--dark .rk-prose p, .rk-section--dark .rk-prose li,
.rk-card--dark .rk-lead, .rk-card--dark .rk-prose p, .rk-card--dark .rk-prose li {
  color: rgb(244 242 237 / .82);
}

.rk-section--dark .rk-link, .rk-card--dark .rk-link {
  color: var(--paper);
  border-bottom-color: var(--border-on-dark);
}
.rk-section--dark .rk-link:hover, .rk-card--dark .rk-link:hover { border-bottom-color: var(--paper); }

.rk-section--dark .rk-btn--primary, .rk-card--dark .rk-btn--primary {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--paper);
}
.rk-section--dark .rk-btn--ghost, .rk-card--dark .rk-btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--border-on-dark);
}

.rk-section--dark .rk-card {
  background: var(--ink-800);
  color: var(--paper);
  border-color: var(--border-on-dark);
}
.rk-section--dark .rk-note { border-left-color: var(--border-on-dark); }
.rk-section--dark .rk-list--divided > li { border-top-color: var(--border-on-dark); }


/* == 08 Fokus ==============================================================
   Reguła uniwersalna zamiast listy elementów: obejmuje też <textarea>
   i <summary>, których stara lista nie miała. Pierścień i poświata jadą
   z tokenów, więc ciemny kontekst odwraca je jednym nadpisaniem. */

:focus-visible {
  outline: 2px solid var(--rk-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rk-focus-halo);
}
.rk-section--dark, .rk-card--dark, .ranking-shell-footer {
  --rk-focus-ring: var(--paper);
  --rk-focus-halo: var(--ink-900);
}


/* == 09 Dane i wykresy =====================================================
   Formy dobrane przed kolorem: pojedyncza liczba to kafel (nie wykres z jednym
   słupkiem), pojedynczy udział to pasek z torem (nie pierścień ani wykres
   kołowy), kubełki są porządkowe (jedna barwa, monotoniczne kroki jasności),
   kategorie są nominalne (wszystkie słupki jedną barwą, wartości podpisane).
   Każdy wykres ma bliźniaka tabelarycznego, więc żaden nie opiera się na
   samym kolorze.
   ========================================================================== */

/* Płyta wykresu na jasnej sekcji jest zawsze biała. Rampa jest zwalidowana
   względem bieli; na --paper-2 jej jasny kraniec spada do 2,82:1. */
.rk-plot {
  margin: 0;
  padding: var(--space-6);
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
}
/* Wykres bez płyty: siedzi wprost na powierzchni sekcji. Wolno tylko tam, gdzie
   wartość niesie długość paska albo podpis pod nim, a nie odcień z rampy:
   rampa jest zwalidowana względem bieli i poza płytą traci kontrast. */
.rk-plot--flat { padding: 0; background: none; border: 0; border-radius: 0; }
.rk-plot__title {
  margin: 0;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-semibold);
}
.rk-plot__sub {
  margin: var(--space-2) 0 0;
  max-width: 60ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--rk-text-muted);
}
.rk-section--dark .rk-plot { background: var(--ink-900); }

/* -- Kafel liczbowy -------------------------------------------------------- */

.rk-statrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.rk-statrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rk-stat { min-width: 0; }
.rk-stat__value {
  display: block;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  /* Liczba wiodąca proporcjonalnymi cyframi: tabular-nums rozstrzeliłoby ją
     na tym rozmiarze. Wyrównanie kolumnowe jest potrzebne tylko w tabelach. */
  font-variant-numeric: proportional-nums;
}
.rk-stat__label {
  display: block;
  margin: var(--space-3) 0 0;
  max-width: 26ch;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--rk-text-muted);
}
.rk-stat__sub {
  margin: var(--space-3) 0 0;
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--rk-text-soft);
}

/* Lejek: kafle spięte włosową linią, bez strzałek i bez proporcji. */
.rk-statrow--flow .rk-stat { position: relative; padding-right: var(--space-5); }
.rk-statrow--flow .rk-stat + .rk-stat::before {
  content: "";
  position: absolute;
  left: calc(var(--space-5) * -1);
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--rk-line);
}

/* -- Meter ----------------------------------------------------------------- */

.rk-meter + .rk-meter { margin-top: var(--space-6); }
.rk-meter__value {
  display: block;
  margin: 0;
  font-size: var(--fs-display-sm);
  line-height: 1;
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-meter__label {
  display: block;
  margin: var(--space-2) 0 var(--space-3);
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--rk-text-muted);
}
.rk-meter__track {
  /* <span> bez display:block zostaje elementem liniowym i ignoruje wysokość:
     pasek nachodził wtedy na etykietę następnego wskaźnika. */
  display: block;
  block-size: 12px;
  background: var(--rk-data-track);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rk-meter__fill {
  display: block;
  block-size: 100%;
  background: var(--rk-data-4);
  border-radius: 0 4px 4px 0;
}

/* -- Histogram kubełkowy --------------------------------------------------- */

.rk-buckets__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-3);
  align-items: end;
  block-size: 170px;
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--rk-line);
}

.rk-buckets__col { display: grid; justify-items: center; align-items: end; block-size: 100%; }
.rk-buckets__bar {
  inline-size: 100%;
  max-inline-size: 24px;
  block-size: var(--h, 0%);
  /* Kubełek o wartości 1% musi zostać widoczny. */
  min-block-size: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--rk-data-3);
}
.rk-buckets__bar[data-step="1"] { background: var(--rk-data-1); }
.rk-buckets__bar[data-step="2"] { background: var(--rk-data-2); }
.rk-buckets__bar[data-step="3"] { background: var(--rk-data-3); }
.rk-buckets__bar[data-step="4"] { background: var(--rk-data-4); }
.rk-buckets__bar[data-step="5"] { background: var(--rk-data-5); }
.rk-buckets__axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--rk-text-muted);
}
.rk-buckets__mark {
  display: block;
  margin-top: var(--space-1);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--rk-text);
}
.rk-buckets--tall .rk-buckets__track { block-size: 260px; }
.rk-buckets--tall .rk-buckets__bar { max-inline-size: none; border-radius: 0; }

/* -- Słupki poziome -------------------------------------------------------- */

.rk-bars__list { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.rk-bars__row {
  display: grid;
  grid-template-columns: minmax(150px, 17rem) minmax(0, 1fr) 5.5rem;
  gap: var(--space-4);
  align-items: center;
}
.rk-bars__name { font-size: var(--fs-small); line-height: 1.4; color: var(--rk-text-muted); }
.rk-bars__track {
  display: block;
  block-size: 16px;
  background: var(--rk-data-track);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rk-bars__fill {
  display: block;
  block-size: 100%;
  /* Jedna seria, jedna barwa: długość słupka niesie wartość, kolor nie
     powtarza tej samej informacji. */
  background: var(--rk-data-4);
  border-radius: 0 4px 4px 0;
  /* Wartość 1% musi zostać widoczna, ale zero ma być puste: przy 0% ten sam
     minimalny pasek rysował ślad tam, gdzie nie znaleźliśmy ani jednego
     serwisu („pełna ścieżka skargi"). */
  min-inline-size: 2px;
}
.rk-bars__fill[data-grow-to="0"] { min-inline-size: 0; }
.rk-bars__value {
  text-align: end;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--rk-text);
}
.rk-bars__note { display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--rk-text-muted); }
/* Wiersze rozdzielone kreską zamiast odstępem: bez płyty wykresu lista
   potrzebuje własnej siatki, inaczej rozsypuje się na tle sekcji. */
.rk-bars__list--ruled { gap: 0; }
.rk-bars__list--ruled > .rk-bars__row {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rk-rule);
}
.rk-bars__list--ruled > .rk-bars__row:last-child { border-bottom: 1px solid var(--rk-rule); }
.rk-bars__list--ruled .rk-bars__name { font-size: var(--fs-body); color: var(--rk-text); }
.rk-bars__list--ruled .rk-bars__track { block-size: 14px; border-radius: 0; }
.rk-bars__list--ruled .rk-bars__fill { border-radius: 0; background: var(--rk-text); }
.rk-bars__list--ruled .rk-bars__value { font-size: var(--fs-body-lg); font-weight: var(--fw-medium); }
/* Szesnaście województw w dwóch kolumnach, czytanych w dół i dopiero w prawo:
   lista jest uporządkowana malejąco, więc układ wierszami dałby 1, 3, 5 po
   lewej i 2, 4, 6 po prawej. Liczba wierszy jest stała, bo województw jest 16. */
.rk-bars__list--2col {
  grid-auto-flow: column;
  grid-template-rows: repeat(8, auto);
  column-gap: var(--space-8);
}
.rk-bars__list--2col .rk-bars__row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 4rem; }
.rk-bars__list--2col .rk-bars__value { font-size: var(--fs-body); }
.rk-bars__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rk-line);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--rk-text-muted);
}

/* -- Bliźniak tabelaryczny ------------------------------------------------- */

.rk-plot__data { margin-top: var(--space-5); }
.rk-plot__data > summary {
  cursor: pointer;
  padding: var(--space-3) 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--rk-text-soft);
}
.rk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.rk-table th, .rk-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--rk-line);
}
.rk-table td, .rk-table th[scope="col"] { font-variant-numeric: tabular-nums; }
.rk-table th[scope="col"] { color: var(--rk-text-muted); font-weight: var(--fw-semibold); }


/* == 10 Komponenty stron =================================================== */

.rk-hero__action { display: grid; gap: var(--space-5); justify-items: start; }

.rk-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.rk-split--rail { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.rk-rail { display: grid; gap: var(--space-6); align-content: start; }
.rk-rail__stat { padding-top: var(--space-5); border-top: 1px solid var(--ink-200); }
.rk-statrow--rail { grid-template-columns: 1fr; gap: var(--space-6); }
/* Jedna liczba jako figura sekcji: rośnie, bo nie dzieli miejsca z innymi. */
.rk-statrow--solo { grid-template-columns: 1fr; }
.rk-statrow--solo .rk-stat__value { font-size: clamp(52px, 7vw, 92px); letter-spacing: -.04em; }
.rk-statrow--solo .rk-stat__label { max-width: 22ch; font-size: var(--fs-body); }
.rk-split--figure { align-items: center; }

.rk-belief { text-align: center; }
.rk-belief__title { max-width: 860px; margin-inline: auto; }
.rk-belief .rk-accent { margin-inline: auto; }
.rk-belief__text {
  max-width: 720px;
  margin-inline: auto;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--rk-text-soft);
}
/* Przerywnik strony głównej niesie jedno zdanie, więc wolno mu urosnąć: to
   jedyne miejsce, w którym mówimy, co bariera znaczy dla firmy. */
.rk-belief--strong { padding-block: var(--space-10); }
.rk-belief--strong .rk-belief__title { font-size: clamp(38px, 5vw, var(--fs-display-lg)); }
.rk-belief__text--quote {
  max-width: 46ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-title);
  line-height: 1.35;
  color: var(--rk-text-muted);
}

/* -- Hero stron danych ---------------------------------------------------- */

.rk-phero { padding-block: var(--space-9) var(--space-10); }
/* Dolny zapas jest pod pasek faktów. Strony bez niego kończą symetrycznie. */
.rk-phero--plain { padding-bottom: var(--space-9); }
.rk-phero__title {
  margin: var(--space-5) 0 0;
  font-size: clamp(40px, 6vw, var(--fs-display-xl));
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  font-weight: var(--fw-medium);
}
/* Drugie słowo nazwy szeryfową kursywą: nazwa zostaje jednym zdaniem, a nie
   dwiema liniami tej samej wagi. */
.rk-phero__alt {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--rk-text-muted);
}
.rk-phero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: var(--space-8);
  align-items: end;
  margin-top: var(--space-8);
}
/* `--rk-text`, nie `--paper`: to ta sama barwa na ciemnym pasie, ale token jedzie
   z powierzchnią, więc lead nie zbieleje, jeśli hero kiedyś zjaśnieje. */
.rk-phero .rk-lead { margin: 0; color: var(--rk-text); }

.rk-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: var(--space-9) 0 0;
}
.rk-phero__split--ruled { padding-top: var(--space-6); border-top: 1px solid var(--rk-line); }
/* Stan badania przy nagłówku, nie drobnym drukiem na dole strony. Kwadrat jest
   ozdobą: informację niesie napis obok, więc nie zostaje sam z komunikatem. */
.rk-phero__state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--rk-text);
}
.rk-phero__state::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 9px;
  block-size: 9px;
  background: currentColor;
}
.rk-phero__state-note {
  margin: var(--space-3) 0 var(--space-4);
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--rk-text-muted);
}

.rk-fact { padding-top: var(--space-4); border-top: 1px solid var(--rk-line); }
.rk-fact dt { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--rk-text); }
.rk-fact dd {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--rk-text-muted);
}

/* -- Strona główna: drabina zakresu --------------------------------------- */

/* Wcięcie rośnie co szczebel, więc wzrok schodzi od populacji do liczby barier.
   Robi to arkusz, nie szablon: pozycja wiersza jest cechą układu, nie danych. */
.rk-scope { margin: 0; padding: 0; list-style: none; }
.rk-scope__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rk-rule);
}
.rk-scope__row:nth-child(2) { padding-left: 32px; }
.rk-scope__row:nth-child(3) { padding-left: 64px; }
.rk-scope__row:nth-child(4) { padding-left: 96px; }
.rk-scope__row:nth-child(5) { padding-left: 128px; }
.rk-scope__row--accent {
  padding-right: var(--space-4);
  background: var(--paper-2);
  border-top-color: var(--ink-900);
  border-bottom: 1px solid var(--ink-900);
  font-weight: var(--fw-medium);
}
.rk-scope__label { font-size: var(--fs-body); line-height: var(--lh-body); }
.rk-scope__value {
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-scope__note { margin-top: var(--space-5); text-align: end; }
.rk-split--scope { align-items: start; }

/* -- Raporty: lista sektorów ---------------------------------------------- */

/* Sektor dostaje własny wiersz z paskiem udziału i liczbą podmiotów. Pasek nie
   jest jedyną drogą do wartości: liczba stoi obok jako tekst, więc ta lista
   nie potrzebuje bliźniaka tabelarycznego. */
.rk-sectors { margin: 0; padding: 0; list-style: none; }
.rk-sector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rk-rule);
}
.rk-sector:last-child { border-bottom: 1px solid var(--rk-rule); }
.rk-sector h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-medium);
}
.rk-sector__track {
  display: block;
  block-size: 10px;
  background: var(--rk-data-track);
  overflow: hidden;
}
.rk-sector__fill { display: block; block-size: 100%; background: var(--rk-text); }
.rk-sector__side { text-align: end; }
.rk-sector__value {
  margin: 0;
  font-size: var(--fs-display-md);
  line-height: 1;
  letter-spacing: var(--ls-display-md);
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-sector__state { margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--rk-text-muted); }

/* -- Raporty: dwa duże udziały -------------------------------------------- */

.rk-meters--big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.rk-meters--big .rk-meter + .rk-meter { margin-top: 0; }
.rk-meters--big .rk-meter__value { font-size: clamp(56px, 7vw, 96px); letter-spacing: -.03em; }
.rk-meters--big .rk-meter__label { max-width: 40ch; font-size: var(--fs-body); }
.rk-meters--big .rk-meter__track { block-size: 10px; border-radius: 0; }
.rk-meters--big .rk-meter__fill { border-radius: 0; background: var(--rk-text); }

/* -- Lista hasło/wyjaśnienie ---------------------------------------------- */

/* Hasło po lewej, wyjaśnienie po prawej, wiersze rozdzielone kreską. Zastąpiło
   płytę `.imp-card`: te same pary czytało się tam jak formularz, a to jest
   spis rzeczy, z którymi można napisać. */
.rk-deflist { margin: 0; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 0 var(--space-8); }
.rk-deflist dt {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rk-rule);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-medium);
}
.rk-deflist dd {
  margin: 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rk-rule);
  max-width: 62ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--rk-text-soft);
}
.rk-deflist dt:last-of-type, .rk-deflist dd:last-of-type { border-bottom: 1px solid var(--rk-rule); }

/* -- Impressum ------------------------------------------------------------- */

.rk-imprint { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
.rk-imprint__row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rk-line);
}
.rk-imprint__row--wide { grid-column: 1 / -1; }
.rk-imprint__row:last-child { border-bottom: 1px solid var(--rk-line); }
.rk-imprint dt {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--rk-text-muted);
}
.rk-imprint dd { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.rk-imprint a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rk-line); overflow-wrap: anywhere; }
.rk-imprint a:hover { border-bottom-color: currentColor; }

/* Adres redakcyjny jako główna droga kontaktu: duży, ale nadal odnośnik. */
.rk-mailto {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-medium);
  color: var(--rk-text);
  text-decoration: none;
  border-bottom: 1px solid var(--rk-line);
  padding-bottom: 4px;
  overflow-wrap: anywhere;
}
.rk-mailto:hover { border-bottom-color: currentColor; }

/* -- Nota metodologiczna --------------------------------------------------- */

/* Podwójna klasa: `.rk-prose p` jest bardziej szczegółowe niż sama klasa
   akapitu i podbijało oba te warianty do rozmiaru zwykłego tekstu. */
.rk-prose .rk-prose__fine { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--rk-text-muted); }
.rk-prose .rk-prose__lead {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rk-rule);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--rk-text);
}

/* -- Strona główna: trzy udziały jako liczby ------------------------------ */

.rk-figures { margin: 0; align-self: end; }
.rk-figures__item { padding: var(--space-5) 0; border-top: 1px solid var(--rk-line); }
.rk-figures__item:last-child { border-bottom: 1px solid var(--rk-line); }
.rk-figures__value {
  font-size: var(--fs-display-md);
  line-height: 1;
  letter-spacing: var(--ls-display-md);
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-figures__label {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--rk-text-muted);
}
.rk-split--persite { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; }

/* -- Strona główna: kroki metody ------------------------------------------ */

.rk-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rk-step { padding-top: var(--space-4); border-top: 1px solid var(--rk-line); }
/* Podwójna klasa: `.rk-steps p` niżej jest bardziej szczegółowe i podbijało
   numer do rozmiaru tekstu kroku. */
.rk-steps .rk-step__num {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--rk-text-muted);
}
.rk-steps p { margin: 0; font-size: var(--fs-small); line-height: 1.6; }
.rk-steps .rk-h3 { margin: 0 0 var(--space-2); }

.rk-rule {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rk-text);
}
.rk-rule p { margin: 0; max-width: 64ch; font-size: var(--fs-body); line-height: 1.7; color: var(--rk-text); }
/* Etykieta z ukośnikiem: szeryfowa kursywa przy nagłówku sekcji. Osobna klasa,
   bo używa jej i pasek zasad, i nagłówek impressum, a `.rk-rule p` wygrywało
   specyficznością z samą klasą etykiety. */
.rk-slug {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  color: var(--rk-text-muted);
}
.rk-rule .rk-slug { font-size: var(--fs-subtitle); }

.rk-check li { font-size: var(--fs-small); line-height: 1.7; color: var(--rk-text-soft); }
.rk-check strong { color: var(--rk-text); }
.rk-h2--lead { font-size: clamp(34px, 4.4vw, var(--fs-display-lg)); }

/* Strona dokumentowa: nagłówek na szynie po lewej, treść po prawej. Szyna
   trzyma się przy przewijaniu, żeby długa proza nie gubiła kontekstu. */
.rk-doc-hero { padding-block: var(--space-9) var(--space-7); }
.rk-doc-hero .rk-h1 { max-width: 14ch; }
.rk-serif { font-family: var(--font-serif); font-weight: var(--fw-medium); }
.rk-split--doc { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--space-8); }
.rk-rail-head { position: sticky; top: 96px; }
.rk-rail-head .rk-h2 { max-width: 14ch; }

.rk-tiles { margin: 0; padding: 0; list-style: none; }
.rk-tiles p { margin: 0; font-size: var(--fs-small); line-height: 1.7; color: var(--rk-text-soft); }
.rk-tiles strong { color: var(--rk-text); }
.rk-tile__num {
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--fs-subtitle);
  color: var(--rk-text-muted);
}

.rk-rules li { font-size: var(--fs-body); line-height: 1.7; color: var(--rk-text-soft); }
.rk-cta--center { justify-content: center; }

/* Pojedyncza liczba wiodąca w zdaniu: mocny akcent bez robienia z niej kafla. */
.rk-figure {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rk-line);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--rk-text-muted);
}
.rk-figure strong {
  display: block;
  font-size: var(--fs-display-sm);
  line-height: 1.1;
  font-weight: var(--fw-medium);
  color: var(--rk-text);
  font-variant-numeric: proportional-nums;
}

.rk-chip {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: 5px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.rk-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-6);
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}
.rk-teaser:hover { border-color: var(--ink-500); }
.rk-teaser p { margin: 0 0 var(--space-4); font-size: var(--fs-small); line-height: 1.6; color: var(--rk-text-muted); }
.rk-teaser__more { font-size: var(--fs-small); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--ink-300); }
.rk-teaser__mini { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rk-teaser__mini-name { display: block; margin-bottom: 4px; font-size: 11px; color: var(--rk-text-muted); }
.rk-teaser__mini-track { display: block; block-size: 8px; background: var(--rk-data-track); border-radius: var(--radius-sm); overflow: hidden; }
.rk-teaser__mini-fill { display: block; block-size: 100%; background: var(--rk-data-4); border-radius: 0 4px 4px 0; }

.rk-meta { display: grid; gap: var(--space-4); margin: 0; align-content: start; }
.rk-meta > div { padding-top: var(--space-4); border-top: 1px solid var(--rk-line); }
.rk-meta dt { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--rk-text-muted); }
.rk-meta dd { margin: var(--space-1) 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--rk-text-soft); }

.rk-coverage { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--rk-line); }
.rk-coverage .rk-bars__list { margin-top: var(--space-5); }


/* -- Karta wyniku ---------------------------------------------------------
   Dokument, nie strona marketingowa: jedna kolumna o stałej mierze, ale
   w pasmach, żeby dziewięć sekcji nie zlało się w ścianę tekstu. */

.card-gate-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(193, 154, 91, .16), transparent 34rem),
    var(--paper-2);
}
.card-gate-page .ranking-shell { min-height: 100vh; }
.card-gate-page main { display: grid; min-height: 100vh; }
.card-gate {
  display: grid;
  place-items: center;
  padding: clamp(28px, 7vw, 88px) var(--space-4);
}
.card-gate__panel {
  width: min(100%, 620px);
  padding: clamp(28px, 6vw, 56px);
  border: 1px solid var(--rk-line);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 28px 70px rgba(24, 31, 29, .12);
}
.card-gate__brand {
  margin: 0 0 var(--space-8);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}
.card-gate__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--rk-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.card-gate h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: clamp(30px, 6vw, 46px);
  font-weight: var(--fw-medium);
  line-height: 1.08;
}
.card-gate__lead {
  margin: 0 0 var(--space-3);
  color: var(--rk-text);
  font-size: 18px;
  font-weight: var(--fw-bold);
}
.card-gate__copy {
  margin: 0;
  color: var(--rk-text-soft);
  font-size: 15px;
  line-height: 1.7;
}
.card-gate__form { margin: var(--space-6) 0 var(--space-5); }
.card-gate__form button {
  width: 100%;
  min-height: 52px;
  padding: 12px 22px;
  border: 1px solid var(--rk-text);
  border-radius: var(--radius-pill);
  background: var(--rk-text);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.card-gate__form button:hover { transform: translateY(-1px); }
.card-gate__form button:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--rk-text);
}
.card-gate__note,
.card-gate__privacy {
  margin: 0;
  color: var(--rk-text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.card-gate__privacy { margin-top: var(--space-3); }
.card-gate__panel a {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.card-col { max-width: 780px; margin: 0 auto; }
.card-head__kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rk-text-muted);
}
.card-head h1 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.2;
}
.card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
  background: var(--rk-line);
}
.card-meta > div { min-width: 0; padding: 14px 16px; background: var(--rk-panel); }
.card-meta dt {
  margin: 0 0 4px;
  color: var(--rk-text-muted);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.card-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--rk-text);
  font-size: 13.5px;
  line-height: 1.5;
}
.card-private {
  margin: 0;
  padding: var(--space-4) 18px;
  border-left: 3px solid var(--rk-text);
  background: var(--rk-data-track);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.card-archive {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding: var(--space-4) 18px;
  border: 1px solid #b86b18;
  border-radius: var(--radius-md);
  background: #fff6e8;
  color: #552d06;
}
.card-archive strong {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-small);
}
.card-head .card-archive p {
  margin: 0;
  color: #71410f;
  font-size: 12.5px;
  line-height: 1.55;
}
.card-archive .card-btn {
  flex: 0 0 auto;
  border-color: #552d06;
  color: #552d06;
}
.card-col h2 { margin: 0 0 var(--space-3); font-size: var(--fs-subtitle); font-weight: var(--fw-semibold); }
.card-col h3 { margin: 0 0 var(--space-2); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.card-col > p, .card-col section p { font-size: 15px; line-height: 1.75; color: var(--rk-text-soft); margin: 0 0 14px; }
.card-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  margin: 0 0 var(--space-5);
}
.card-col section .card-result__number {
  display: grid;
  place-items: center;
  min-width: 92px;
  min-height: 92px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--rk-text);
  font-family: var(--font-serif);
  font-size: 46px;
  font-weight: var(--fw-medium);
  line-height: 1;
}
.card-col section .card-result__copy {
  margin: 0;
  color: var(--rk-text);
  font-size: 17px;
  font-weight: var(--fw-medium);
  line-height: 1.65;
}
.card-howto {
  margin: 0;
  padding: var(--space-4) 18px;
  background: var(--rk-data-track);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.7;
}
.card-finding {
  margin: 0 0 18px;
  padding: var(--space-5) 26px;
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
}
.card-finding__proof {
  margin: var(--space-4) 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rk-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--rk-text-muted);
}
.card-shot { margin: var(--space-4) 0 0; }
.card-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--ink-300); border-radius: var(--radius-md); }
.card-shot figcaption { margin: var(--space-2) 0 0; font-size: 12.5px; color: var(--rk-text-muted); }
.card-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.card-secondary article {
  padding: var(--space-4);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-md);
  background: var(--rk-panel);
}
.card-secondary article p { margin: 0 0 var(--space-3); }
.card-secondary article span {
  color: var(--rk-text-muted);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card-evidence-intro {
  max-width: 700px;
  margin-bottom: var(--space-5) !important;
}
.card-evidence-stack {
  display: grid;
  gap: var(--space-5);
}
.card-evidence-finding {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
  background: var(--rk-panel);
}
.card-evidence-finding--main { border-color: var(--ink-400); }
.card-evidence-finding__body { padding: var(--space-5) 26px var(--space-4); }
.card-evidence-finding__label {
  display: inline-block;
  margin-bottom: var(--space-2);
  color: var(--rk-text-muted);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card-evidence-finding__body h3 {
  margin-bottom: var(--space-2);
  font-size: 18px;
  line-height: 1.4;
}
.card-evidence-finding__body p { margin-bottom: 0 !important; }
.card-evidence-finding figure { margin: 0; }
.card-evidence-finding figure img {
  display: block;
  width: 100%;
  height: auto;
  border-top: 1px solid var(--rk-line);
  border-bottom: 1px solid var(--rk-line);
}
.card-evidence-finding figcaption {
  padding: var(--space-3) var(--space-4);
  background: var(--paper-2);
  color: var(--rk-text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.card-col section .card-evidence-finding__proof {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  color: var(--rk-text-muted);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  line-height: 1.6;
}
.card-evidence-summary {
  display: grid;
  grid-template-columns: minmax(130px, .32fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-md);
  background: var(--paper-2);
}
.card-evidence-summary > span {
  color: var(--rk-text);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}
.card-col section .card-evidence-summary p {
  margin: 0;
  color: var(--rk-text-muted);
  font-size: 12.5px;
  line-height: 1.65;
}
.card-legal { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.card-legal li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: var(--space-3) var(--space-4);
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
}
.card-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-size: 12px;
}
.card-status--detected { background: var(--rk-data-track); }
.card-status--partial,
.card-status--needs-review { border-style: dashed; }
.card-status--not-detected { background: var(--paper-2); }
.card-note { font-size: 13.5px; line-height: 1.7; color: var(--rk-text-muted); }
.card-strong { font-weight: var(--fw-bold); color: var(--rk-text); }
.card-favorable {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
  background: var(--rk-panel);
}
.card-col section .card-favorable__number {
  margin: 0;
  color: var(--rk-text);
  font-family: var(--font-serif);
  font-size: 52px;
  line-height: .9;
}
.card-favorable > div p:last-child { margin-bottom: 0; }
.card-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.card-scope-grid > div {
  padding: var(--space-4);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-md);
  background: var(--rk-panel);
}
.card-scope-grid > div p:last-child { margin-bottom: 0; }
.card-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.card-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px var(--space-5);
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
}
.card-option__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--rk-text-muted);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.card-option p {
  flex-grow: 1;
  margin: 0 0 var(--space-5);
  font-size: var(--fs-small);
}
.card-option .card-btn { margin-top: auto; }
.card-tech {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
  background: var(--rk-panel);
}
.card-tech > summary { cursor: pointer; padding: 8px 0; font-size: 15px; font-weight: var(--fw-bold); }
.card-tech table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0 0; font-size: 13.5px; }
.card-tech th, .card-tech td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--rk-line); }
.card-tech tfoot th {
  padding-top: 14px;
  color: var(--rk-text);
  font-weight: var(--fw-bold);
  white-space: normal;
}
.card-foot { font-size: 12.5px; line-height: 1.75; color: var(--rk-text-muted); }
.card-foot p { margin: 0 0 var(--space-3); }
/* Przycisk karty: tło z najciemniejszego kroku tekstu, a napis w kolorze
   powierzchni pasma, więc działa na jasnym i na ciemnym. */
.card-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--rk-text);
  color: var(--rk-bleed-bg, var(--paper));
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

/* Odnośnik w prozie nie może zostać bez koloru: przeglądarka daje mu wtedy
   domyślny niebieski, który na ciemnym paśmie schodzi do 1,9:1. */
.card-col a:not(.card-btn), .rk-prose a, .rk-note a, .rk-rule a, .rk-tiles a, .rk-check a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rk-line);
  font-weight: var(--fw-semibold);
}
.card-col a:not(.card-btn):hover, .rk-prose a:hover, .rk-note a:hover { border-bottom-color: currentColor; }

/* Odnośnik, nie przycisk: prowadzi na osobny adres z układem A4, więc jest
   nawigacją. Wygląd pigułki zostaje. */
.card-print { margin: var(--space-6) 0 0; }
.card-print a {
  display: inline-block;
  font: inherit;
  font-size: var(--fs-small);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink-900);
  text-decoration: none;
}
.card-print a:hover { border-color: var(--ink-900); }

/* Pasek rozkładu na karcie: pokazuje przedział, w którym mieści się firma.
   Przedział bieżący ma tło w najciemniejszym kroku rampy, a tekst w kolorze
   powierzchni, więc czyta się tak samo na jasnym i na ciemnym paśmie. */
.dist { margin: 0 0 18px; }
.dist__caption { margin: 0 0 var(--space-3); font-size: 13.5px; color: var(--rk-text-soft); }
.dist__track { display: flex; gap: 4px; align-items: flex-end; }
.dist__band {
  position: relative;
  min-width: 0;
  padding: var(--space-3) var(--space-2) var(--space-3);
  background: var(--rk-data-track);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-sm);
  text-align: center;
}
.dist__band--current {
  background: var(--rk-data-5);
  border-color: var(--rk-data-5);
  color: var(--rk-bleed-bg, var(--paper));
}
.dist__label { display: block; font-size: 12.5px; font-weight: var(--fw-bold); }
.dist__share { display: block; font-size: var(--fs-caption); opacity: .75; }
.dist__marker { display: block; margin-top: 6px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; }
.dist__table { width: 100%; border-collapse: collapse; margin: 14px 0 0; font-size: 13px; }
.dist__table th, .dist__table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--rk-line); font-weight: var(--fw-regular); }
.dist__row--current th, .dist__row--current td { font-weight: var(--fw-bold); }


/* -- Strony krótkie: impressum, wyróżnieni, formularze, strona wycofana ----- */

.rk-narrow { max-width: 640px; margin: 0 auto; }
.rk-wide { max-width: 840px; margin: 0 auto; }
.rk-center { text-align: center; }

.inq-form, .inq-success, .feat-empty, .feat-badge {
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.feat-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.feat-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: var(--space-5) var(--space-5);
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-md);
}
.feat-item strong { font-size: var(--fs-body); }
.feat-item span { font-size: 13px; color: var(--rk-text-muted); }
.feat-empty, .feat-badge p { font-size: 15px; line-height: 1.7; color: var(--rk-text-soft); }
.feat-badge h2 { margin: 0 0 var(--space-3); font-size: 18px; }
.rk-code {
  margin: 0;
  padding: var(--space-4);
  background: var(--ink-800);
  color: var(--paper);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
}
.rk-section--dark .rk-code { background: var(--ink-800); border: 1px solid var(--border-on-dark); }

.inq-form { display: grid; gap: var(--space-5); }
.inq-field { display: grid; gap: 6px; }
.inq-field label { font-size: 13px; font-weight: var(--fw-bold); }
.inq-field abbr { text-decoration: none; color: var(--rk-text-muted); }
.inq-field input, .inq-field textarea {
  font: inherit;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.inq-field textarea { resize: vertical; line-height: 1.6; }
.inq-error { margin: 0; font-size: 12.5px; color: #8a1f1f; }
.inq-consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  font-weight: var(--fw-regular);
  color: var(--rk-text-soft);
}
.inq-consent input { width: auto; margin-top: 3px; }
.inq-submit {
  justify-self: start;
  font: inherit;
  font-weight: var(--fw-bold);
  padding: var(--space-3) 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: var(--paper);
  cursor: pointer;
}
.inq-submit:hover { opacity: .88; }
.inq-success { font-size: 15px; line-height: 1.7; }


/* -- Strony dokumentowe: metodologia, EAA, polityka prywatności ------------
   Układ dwukolumnowy ze spisem treści. Ciemne wtrącenia są tu kartami wewnątrz
   kolumny treści, nigdy pełnym tłem: `rk-bleed` w tym gridzie przemalowałby
   także spis treści. */
.method-hero { padding:64px 40px 56px; border-bottom:1px solid var(--ink-300); background:var(--paper); }
.method-hero__eyebrow { margin:0 0 14px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); }
.method-hero__title { margin:0 0 22px; max-width:880px; overflow-wrap:break-word; font-size:clamp(30px, 5.2vw, var(--fs-display-lg)); line-height:var(--lh-display-lg); letter-spacing:var(--ls-display-lg); font-weight:500; }
.method-hero__lead { margin:0; max-width:760px; font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); color:var(--ink-700); }
.method-alert { margin:36px 0 0; max-width:920px; border:1px solid var(--ink-900); border-radius:24px; background:var(--ink-900); color:var(--paper); padding:28px 32px; }
.method-alert h2 { margin:0 0 10px; font-size:22px; line-height:1.2; font-weight:600; color:var(--paper); }
.method-alert p { margin:0; font-size:15px; line-height:1.65; color:var(--text-on-dark-muted); }
.method-section { padding:56px 40px; border-bottom:1px solid var(--ink-200); }
.method-grid { display:grid; grid-template-columns:minmax(240px,0.42fr) minmax(0,1fr); gap:44px; align-items:start; }
.method-kicker { margin:0 0 10px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); }
.method-heading { margin:0; font-size:var(--fs-display-sm,24px); line-height:1.16; font-weight:500; letter-spacing:-0.02em; }
.method-copy { margin:0 0 18px; font-size:15px; line-height:1.75; color:var(--ink-700); }
.method-list { margin:0; padding:0; display:grid; gap:12px; }
.method-list li { list-style:none; border:1px solid var(--ink-200); border-radius:16px; background:var(--paper-2); padding:16px 18px; font-size:14px; line-height:1.55; color:var(--ink-700); }
.method-list strong { color:var(--ink-900); }
.method-data-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.method-data-card { border:1px solid var(--ink-200); border-radius:16px; background:var(--paper); padding:16px; }
.method-data-card strong { display:block; margin-bottom:6px; font-size:14px; color:var(--ink-900); }
.method-data-card span { display:block; font-size:13px; line-height:1.55; color:var(--ink-700); }
.method-steps { counter-reset:step; display:grid; gap:14px; margin:0; padding:0; }
.method-steps li { counter-increment:step; list-style:none; display:grid; grid-template-columns:42px minmax(0,1fr); gap:16px; align-items:start; border:1px solid var(--ink-200); border-radius:18px; background:var(--paper); padding:18px; }
.method-steps li::before { content:counter(step); width:42px; height:42px; border-radius:50%; background:var(--ink-900); color:var(--paper); display:flex; align-items:center; justify-content:center; font-weight:700; }
.method-steps h3 { margin:0 0 6px; font-size:15px; line-height:1.35; }
.method-steps p { margin:0; font-size:14px; line-height:1.6; color:var(--ink-700); }
.method-note { margin:22px 0 0; padding:18px 20px; border-left:4px solid var(--rank-gold); background:var(--paper-2); font-size:14px; line-height:1.65; color:var(--ink-700); }
.method-sample-card { margin-top:22px; border:1px solid var(--ink-900); border-radius:24px; background:var(--ink-900); color:var(--paper); padding:24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; }
.method-sample-card h3 { margin:0 0 8px; color:var(--paper); font-size:20px; line-height:1.2; }
.method-sample-card p { margin:0; color:var(--text-on-dark-muted); font-size:14px; line-height:1.65; }
.method-sample-card a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:999px; padding:0 18px; background:var(--paper); color:var(--ink-900); text-decoration:none; font-size:14px; font-weight:800; white-space:nowrap; }
.method-cta { padding:48px 40px 0; display:flex; gap:12px; flex-wrap:wrap; }
.method-cta a { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:12px 18px; font-size:14px; font-weight:600; text-decoration:none; }
.method-cta__primary { background:var(--ink-900); color:var(--paper); border:1px solid var(--ink-900); }
.method-cta__secondary { background:var(--paper); color:var(--ink-900); border:1px solid var(--ink-300); }
.ranking-doc-layout { display:grid; grid-template-columns:minmax(230px,260px) minmax(0,1fr); gap:38px; align-items:stretch; max-width:1180px; margin:0 auto; padding:0 40px; }
.ranking-doc-sidebar { position:relative; align-self:stretch; min-height:100%; padding-top:28px; }
.ranking-doc-toc { position:sticky; top:84px; max-height:calc(100vh - 104px); overflow:auto; overscroll-behavior:contain; border:1px solid var(--ink-200); border-radius:18px; background:var(--paper); padding:16px; box-shadow:0 12px 36px rgb(10 10 10 / 0.045); }
.ranking-doc-toc__title { margin:0 0 12px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); font-weight:700; }
.ranking-doc-toc__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.ranking-doc-toc__link { display:block; position:relative; padding:9px 10px 9px 16px; border-radius:10px; color:var(--ink-500); text-decoration:none; font-size:12px; line-height:1.35; border:1px solid transparent; }
.ranking-doc-toc__link::before { content:""; position:absolute; left:6px; top:11px; bottom:11px; width:3px; border-radius:999px; background:transparent; }
.ranking-doc-toc__link:hover { color:var(--ink-900); background:var(--paper-2); }
.ranking-doc-toc__link[aria-current="true"] { color:var(--ink-900); background:var(--paper-2); border-color:var(--ink-200); font-weight:700; }
.ranking-doc-toc__link[aria-current="true"]::before { background:var(--rank-gold); }
.ranking-doc-content { min-width:0; }
.ranking-doc-content .method-section { padding-left:0; padding-right:0; }
.ranking-doc-content [id] { scroll-margin-top:96px; }

.eaa-hero { padding:64px 40px 56px; border-bottom:1px solid var(--ink-300); background:var(--paper); }
.eaa-hero__eyebrow { margin:0 0 14px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); }
.eaa-hero__title { margin:0 0 22px; max-width:840px; overflow-wrap:break-word; font-size:clamp(30px, 5.2vw, var(--fs-display-lg)); line-height:var(--lh-display-lg); letter-spacing:var(--ls-display-lg); font-weight:500; }
.eaa-hero__lead { margin:0; max-width:720px; font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); color:var(--ink-700); }
.eaa-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:36px 0 0; max-width:900px; }
.eaa-fact { border:1px solid var(--ink-300); border-radius:20px; background:var(--paper); padding:20px; }
.eaa-fact strong { display:block; margin:0 0 7px; font-size:24px; line-height:1.1; color:var(--ink-900); }
.eaa-fact span { display:block; font-size:13px; line-height:1.5; color:var(--ink-500); }
.eaa-section { padding:56px 40px; border-bottom:1px solid var(--ink-200); }
.eaa-section__grid { display:grid; grid-template-columns:minmax(240px,0.42fr) minmax(0,1fr); gap:44px; align-items:start; }
.eaa-kicker { margin:0 0 10px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); }
.eaa-heading { margin:0; font-size:var(--fs-display-sm,24px); line-height:1.16; font-weight:500; letter-spacing:-0.02em; }
.eaa-copy { margin:0 0 18px; font-size:15px; line-height:1.7; color:var(--ink-700); }
.eaa-list { margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.eaa-list li { list-style:none; border:1px solid var(--ink-200); border-radius:16px; background:var(--paper-2); padding:16px 18px; font-size:14px; line-height:1.5; color:var(--ink-700); }
.eaa-penalty { background:var(--ink-900); color:var(--paper); border-radius:28px; padding:32px; }
.eaa-penalty .eaa-copy { color:var(--text-on-dark-muted); }
.eaa-penalty strong { color:var(--paper); }
.eaa-note { margin:20px 0 0; padding:16px 18px; border:1px solid var(--ink-300); border-radius:16px; font-size:13px; line-height:1.6; color:var(--ink-500); background:var(--paper); }
.eaa-cta { margin:0; padding:48px 40px 0; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.eaa-cta a { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:12px 18px; font-size:14px; font-weight:600; text-decoration:none; }
.eaa-cta__primary { background:var(--ink-900); color:var(--paper); border:1px solid var(--ink-900); }
.eaa-cta__secondary { background:var(--paper); color:var(--ink-900); border:1px solid var(--ink-300); }

.priv-wrap { max-width:720px; margin:0 auto; padding:72px 40px 40px; }
    .priv-wrap h1 { font-family:var(--font-serif); font-weight:500; font-size:clamp(30px, 4.5vw, 40px); margin:0 0 14px; }
    .priv-wrap h2 { font-size:19px; margin:36px 0 10px; }
    .priv-wrap p, .priv-wrap li { font-size:14.5px; line-height:1.75; color:var(--ink-700); }
    .priv-wrap ul { padding-left:22px; margin:10px 0; }
    .priv-updated { font-size:13px; color:var(--ink-500); margin:0 0 28px; }

@media (max-width: 900px) {
  .ranking-doc-layout { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: var(--space-6); padding: 0 28px; }
  .eaa-list, .method-data-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .method-hero, .method-section, .method-cta,
  .eaa-hero, .eaa-section, .eaa-cta,
  .priv-wrap { padding-left: var(--rk-gutter-sm); padding-right: var(--rk-gutter-sm); }
  .ranking-doc-layout { display: block; padding: 0; }
  .ranking-doc-sidebar { display: none; }
  .ranking-doc-content .method-section,
  .ranking-doc-content .eaa-section { padding-left: var(--rk-gutter-sm); padding-right: var(--rk-gutter-sm); }
  .method-sample-card { grid-template-columns: 1fr; }
  .method-sample-card a { width: 100%; }
  /* Siatki wielokolumnowe zwijamy do jednej kolumny: przy 375 px ich minimalne
     szerokości wypychały treść poza ekran. */
  .method-grid, .method-data-grid, .eaa-facts, .eaa-section__grid, .eaa-list,
  .card-options, .card-meta, .card-secondary, .card-scope-grid { grid-template-columns: 1fr; }
  .card-result, .card-favorable { grid-template-columns: 1fr; }
  .card-evidence-finding__body { padding: var(--space-4); }
  .card-col section .card-evidence-finding__proof { padding: var(--space-3) var(--space-4); }
  .card-evidence-summary { grid-template-columns: 1fr; padding: var(--space-4); }
  .card-archive { align-items: flex-start; flex-direction: column; }
  .card-col section .card-result__number { min-width: 76px; min-height: 76px; justify-self: start; font-size: 38px; }
  .card-gate__panel { padding: 28px 22px; border-radius: 20px; }
  .card-gate__brand { margin-bottom: var(--space-6); }
  .card-legal li { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .method-steps li { grid-template-columns: 1fr; gap: var(--space-2); }
  /* Tabela techniczna przewija się w swoim kontenerze, a nie całą stroną. */
  .card-tech table, .rk-table { display: block; overflow-x: auto; white-space: nowrap; }
}


/* == 11 Breakpointy ======================================================== */

@media (max-width: 900px) {
  .rk-head--split { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
  .rk-grid--2, .rk-grid--3 { grid-template-columns: 1fr; }
  .ranking-shell-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-medians { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-bars__row { grid-template-columns: minmax(120px, 12rem) minmax(0, 1fr) 3.5rem; }
  .rk-split, .rk-split--rail, .rk-split--doc { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-rail-head { position: static; }
  .rk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-steps li { min-height: 0; }
  .rk-teaser { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-phero { padding-block: var(--space-8); }
  .rk-phero__split, .rk-split--scope, .rk-split--persite { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-facts { grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-7); }
  .rk-scope__row:nth-child(2) { padding-left: 16px; }
  .rk-scope__row:nth-child(3) { padding-left: 32px; }
  .rk-scope__row:nth-child(4) { padding-left: 48px; }
  .rk-scope__row:nth-child(5) { padding-left: 64px; }
  .rk-scope__note { text-align: start; }
  .rk-rule { grid-template-columns: 1fr; gap: var(--space-3); }
  .rk-sector { grid-template-columns: 1fr; gap: var(--space-4); }
  .rk-sector__side { text-align: start; }
  .rk-meters--big { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-bars__list--2col { grid-auto-flow: row; grid-template-rows: none; }
  .rk-deflist, .rk-imprint { grid-template-columns: 1fr; }
  .rk-deflist dt { padding-bottom: var(--space-2); }
  .rk-deflist dd { padding-top: 0; border-top: 0; }
  .rk-deflist dt:last-of-type { border-bottom: 0; }
  .rk-imprint__row { grid-template-columns: 1fr; gap: var(--space-2); }
  .rk-belief--strong { padding-block: var(--space-9); }
  .rk-buckets--tall .rk-buckets__track { block-size: 200px; }
}

@media (max-width: 600px) {
  :root { --rk-section-y: var(--rk-section-y-sm); --rk-gutter: var(--rk-gutter-sm); }
  .ranking-shell-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--rk-gutter-sm);
  }
  .ranking-shell-nav__brand { width: 100%; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .ranking-shell-nav__brand-context { padding-left: var(--space-3); }
  .ranking-shell-nav__links { width: 100%; justify-content: flex-start; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .ranking-nav-separator { display: none; }
  .ranking-shell-footer { padding: var(--space-7) var(--rk-gutter-sm) 38px; }
  .rk-statrow, .rk-statrow--2, .rk-medians { grid-template-columns: 1fr; gap: var(--space-5); }
  .rk-statrow--flow .rk-stat { padding-right: 0; }
  .rk-statrow--flow .rk-stat + .rk-stat::before { display: none; }
  .rk-bars__row { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .rk-bars__track { grid-column: 1 / -1; grid-row: 2; }
  .rk-plot { padding: var(--space-5); }
  .rk-plot--flat { padding: 0; }
  .rk-buckets__track { block-size: 130px; }
  .rk-buckets--tall .rk-buckets__track { block-size: 160px; }
  .rk-steps { grid-template-columns: 1fr; }
  .rk-scope__row { grid-template-columns: 1fr; gap: var(--space-1); }
  .rk-scope__row:nth-child(n) { padding-left: 0; }
  .rk-bars__list--ruled .rk-bars__track { grid-column: 1 / -1; grid-row: 2; }
}


/* == 12 Ruch i wysoki kontrast ============================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}