/* Podstrona „Ranking” (PL i EN): wygląd z ranking.html. Dane i stany wypełnia test-ai.js (rankingPage). */
/* Inter z własnego serwera: te same pliki co Google Fonts v20 (latin, latin-ext), wagi 400 i 500 jak w projekcie */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 500;font-display:swap;src:url("/fonts/inter-32cb096a.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 500;font-display:swap;src:url("/fonts/inter-13387c02.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Zastępcza czcionka o wymiarach Inter: zanim Inter się wczyta, tekst zajmuje tyle samo miejsca, więc nic się nie przesuwa po załadowaniu */
@font-face{font-family:"Inter Fallback";font-weight:400;src:local("Arial");size-adjust:107%;ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:500;src:local("Arial");size-adjust:108.1%;ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%}
/* Podstrona „Ranking”: te same tokeny i komponenty co strona testu i „Odznaki” (badges.css), sekcje od góry do dołu. */
:root{
  --cream:#f7f3ea; --ink:#0e0e0e;
  --t5:#5b49c4;
  --wrap:1120px; --gut:clamp(20px,5vw,48px);
  --r:8px;
  --ease:cubic-bezier(.16,1,.3,1);
  --soft:cubic-bezier(.4,0,.2,1);
  /* Stała hierarchia tekstu dla całej strony. Każdy rozmiar ma jedną funkcję:
     h1 36-52   nagłówek strony
     h2 28-40   nagłówki sekcji
     figure 48  kluczowe liczby
     base 16    tekst do czytania i elementy akcji: opis, nawigacja, przycisk, nazwy poziomów
     aux 13     informacje pomocnicze: etykiety, podpisy, przełącznik języka, numery kroków, przedziały punktów, stopka */
  --fs-xs:13px;
  --fs-eyebrow:var(--fs-xs);
  --fs-base:16px;
  /* Odległości w hero wynikają z bliskości, nie z równych przerw:
     s 16 = element opisuje sąsiada (etykieta nad nagłówkiem, podpis pod przyciskiem)
     m 24 = elementy powiązane (nagłówek i opis)
     l 48 = osobne grupy (treść i akcja) */
  --sp-s:16px; --sp-m:24px; --sp-l:48px;
  /* Skala odstępów (siatka 8 px). Każdy odstęp na stronie to jeden z tych tokenów:
     1 = 8 (drobny odstęp wewnątrz elementu) | 2 = 16 | 3 = 24 | 4 = 48 | 5 = 64 (między blokami w sekcji) | 6 = 96 (padding sekcji) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:48px; --sp-5:64px; --sp-6:96px;
  /* Kolory: czerń, biel i dwie szarości o tej samej randze w hierarchii (kontrast około 6:1 na własnym tle).
     tło hero #0e0e0e | biel: wszystko, co się czyta lub uruchamia (nagłówek, opis, nawigacja, przycisk, aktywny język)
     --gray-on-dark  #8f8f8f: informacje pomocnicze i nieaktywne na ciemnym tle (hero)
     --gray-on-light #636363: ta sama rola na jasnym tle (do użycia w sekcjach na jasnym tle) */
  --h-fg:#fff; --gray-on-dark:#8f8f8f; --gray-on-light:#636363;
  /* Linie: jedna grubość i jeden kolor wszędzie. Linia ma długość kontenera, który dzieli. */
  --line:var(--gray-on-light); --line-w:1px;
  /* Fiolet w parze jak szarości: ciemniejszy na jasnym tle, jaśniejszy na ciemnym, oba z kontrastem około 6,6:1,
     więc mają tę samą wagę dla oka i nie konkurują. */
  --violet-on-light:#5b49c4; --violet-on-dark:#998bea;
  --fs-figure:48px;
  --fs-h2:clamp(28px,3.4vw,40px);
  --fs-h1:clamp(36px,4vw,52px);
}
*{box-sizing:border-box;margin:0}
/* tło pod stroną (widoczne przy przewinięciu poza górę i dół) w kolorze hero i stopki, nie kremowe */
html{-webkit-text-size-adjust:100%;background:var(--ink)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:Inter,"Inter Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6;font-size:var(--fs-base)}
a{color:inherit}
ul,ol{list-style:none;padding:0}
.wrap{max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--t5);outline-offset:3px}
.hero :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:8px;background:var(--cream);color:var(--ink);padding:var(--sp-1) var(--sp-2);line-height:24px;z-index:10}
.skip:focus{left:8px}

h2{font-weight:500;font-size:var(--fs-h2);line-height:1.1;line-height:round(up,calc(var(--fs-h2) * 1.1),4px);letter-spacing:-.035em;text-wrap:balance}
.label{font-size:var(--fs-eyebrow);line-height:20px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-on-light)}
.sec{border-top:var(--line-w) solid var(--line);padding:var(--sp-6) 0}


/* ---------- HERO ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--h-fg);min-height:clamp(620px,54vw,800px);display:grid;place-items:center;padding:96px var(--gut) 112px}
.nav{position:absolute;top:0;left:0;right:0;z-index:2}
.nav .wrap{max-width:none;padding:0 clamp(24px,4vw,64px);height:80px;display:flex;align-items:center;justify-content:space-between}
.logo{display:block;line-height:0}
.logo svg{display:block;height:30px;width:auto}
.nav ul{display:flex;align-items:center;gap:36px;font-size:var(--fs-base);font-weight:500}
.nav a:not(.logo){position:relative;text-decoration:none;padding:6px 0;line-height:24px;color:var(--h-fg)}
/* fioletowa linia wyrasta od środka na boki przy najechaniu, szerokość równa szerokości linku */
.nav ul > li > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:999px;background:var(--violet-on-dark);transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease)}
.nav ul > li > a:hover::after,.nav ul > li > a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.nav ul > li > a::after{transition:none}}
/* przełącznik języka jak na stronie dla firm: ramka, PL / EN, aktywny język wyróżniony */
.nav .lang{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border:1.5px solid var(--h-fg);font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em;line-height:16px}
.nav .lang a,.nav .lang a[aria-current]{padding:0;border:0;line-height:16px;color:var(--gray-on-dark)}
.nav .lang a:hover{color:var(--h-fg)}
.nav .lang a[aria-current]{color:var(--h-fg)}
.nav .lang span{color:var(--gray-on-dark);font-weight:400}

/* Rytm w hero (tokeny --sp-*): etykieta 16 nagłówek 24 opis 48 przycisk 16 podpis.
   Padding hero jest większy na dole niż na górze, żeby blok leżał optycznie nieco powyżej środka. */
.hero-copy{max-width:820px;text-align:center}
.hero-copy .eyebrow{font-size:var(--fs-eyebrow);font-weight:500;line-height:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-on-dark)}
.hero-copy h1{margin:var(--sp-s) 0 var(--sp-m);font-size:var(--fs-h1);line-height:1.08;line-height:round(up,calc(var(--fs-h1) * 1.08),4px);letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.hero-copy p{max-width:38em;margin-inline:auto;font-size:var(--fs-base);line-height:24px;color:var(--h-fg);text-wrap:balance}
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:var(--sp-s);margin-top:var(--sp-l)}
.btn{display:inline-block;padding:10px 28px;background:#fff;color:var(--ink);font-size:var(--fs-base);font-weight:500;line-height:24px;text-decoration:none;border-radius:4px}
/* hover: przycisk stoi w miejscu, przesuwa się tylko strzałka (kierunek akcji) */
/* Inter z Google Fonts nie ma znaku „→”; strzałka bierze czcionkę systemową, tak jak wyglądała od początku */
.btn .arr{display:inline-block;font-family:system-ui,-apple-system,"Helvetica Neue",sans-serif;transition:transform .25s var(--ease)}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.btn .arr{transition:none}}


/* ---------- HERO PODSTRONY ---------- */
/* Ten sam język co hero strony testu, ale niższy: treść wyznacza wysokość, bez tła z chipami. */
.hero.sub{min-height:0;padding:calc(80px + var(--sp-6)) var(--gut) var(--sp-6)}
.nav ul > li > a[aria-current="page"]::after{transform:scaleX(1)}
/* opis jest tu dłuższy niż na stronie testu: szerszy limit (tuż poniżej szerokości nagłówka), żeby ułożył się w dwie linie */
.hero.sub .hero-copy p:not(.eyebrow){max-width:47em}

/* ---------- SEKCJE ---------- */
.sec h2{margin-top:var(--sp-2)}
.sec .copy{margin-top:var(--sp-3);max-width:calc((100% - var(--sp-5)) * 6 / 11);font-size:var(--fs-base);line-height:24px;text-wrap:balance}
.light{background:#fff;border-top:0}
.dark{background:var(--ink);color:var(--h-fg);border-top:0}
.dark .label{color:var(--gray-on-dark)}

/* ---------- KOMPONENTY STRONY TESTU (landing.css) ---------- */
.l1{--c0:#10175a;--c1:#2e3a96;--c2:#6f8cff}
.l2{--c0:#2c6410;--c1:#6f9a12;--c2:#a9cc22}
.l3{--c0:#b5320e;--c1:#e0661c;--c2:#f7a548}
.l4{--c0:#a10d58;--c1:#e5197b;--c2:#ff78bb}
.l5{--c0:#221a6e;--c1:#5b49c4;--c2:#b4a8ff}
.si{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:6px;background:radial-gradient(90% 70% at 14% 0%,var(--c2) 0,transparent 70%),linear-gradient(160deg,var(--c1),var(--c0))}
.si .sg{display:block;width:22px;height:22px;overflow:visible}
.si [fill="var(--c0)"]{fill:color-mix(in srgb,var(--c0) 50%,#000);fill-opacity:1}
.l3 .si [fill="var(--c0)"]{fill:#fff}
.figures{display:flex;flex-direction:column;gap:var(--sp-3)}
.figures li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--sp-2);align-items:start}
.figures .rule{display:block;height:var(--line-w);background:var(--line)}
.figures .fig{font-size:var(--fs-figure);line-height:48px;font-weight:500;letter-spacing:-.035em;color:var(--violet-on-light)}
.figures b{display:block;font-size:var(--fs-base);line-height:24px;font-weight:500}
.figures p{margin-top:var(--sp-1);text-wrap:balance;font-size:var(--fs-base);line-height:24px;color:var(--ink)}
.axis{position:relative;margin-top:var(--sp-3);height:calc(var(--sp-3) + 20px);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.axis::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--line-w);background:var(--line)}
.axis span{position:absolute;top:var(--sp-3);left:calc(var(--p) * 1%);transform:translateX(-50%)}
.axis span::before{content:"";position:absolute;top:calc(var(--sp-3) * -1 + (var(--line-w) - var(--sp-1)) / 2);left:50%;width:var(--sp-1);height:var(--sp-1);border-radius:50%;background:var(--line);transform:translateX(-50%)}
.axis span:first-child{transform:none}
.axis span:first-child::before{left:0;transform:none}
.axis span:last-child{transform:translateX(-100%)}
.axis span:last-child::before{left:auto;right:0;transform:none}
.m1{--c0:#3f2312;--c1:#8c5634;--c2:#d9a17a}
.m2{--c0:#2e333c;--c1:#7d838f;--c2:#e6e9ef}
.m3{--c0:#45320a;--c1:#8f6c17;--c2:#e6c463}

/* ---------- RANKING ---------- */
/* Przyciski i pola jak w okienku strony testu: czarny na białym, obrys na ciemnym. */
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:none;color:inherit;box-shadow:inset 0 0 0 var(--line-w) currentColor}
button.btn{border:0;cursor:pointer;font-family:inherit}

/* ---------- HERO ---------- */
/* Z wynikiem: pozycja jest nagłówkiem strony, pod nią poziom (kafelek jak na schodkach strony testu).
   Bez wyniku: to samo co hero strony testu, nagłówek i przycisk. */
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:var(--sp-s);margin-top:var(--sp-l)}
.hero-copy h1{font-variant-numeric:tabular-nums}
.hero-copy .lvl{display:inline-flex;align-items:center;gap:var(--sp-1)}

/* ---------- ROZKŁAD WYNIKÓW ---------- */
/* Lewa kolumna: tytuł i opis, prawa: dwie kluczowe liczby (jak „O teście”). Pod spodem 20 słupków
   (0–5, 6–10, …, 96–100): cztery na poziom, w kolorach poziomów, tak jak schodki na stronie testu. */
.dist-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:start}
.dist-head .copy{margin-top:var(--sp-3);max-width:none;font-size:var(--fs-base);line-height:24px;text-wrap:balance}
/* liczby szersze niż „15+” na stronie testu (52%), więc kolumna na liczbę jest szersza */
.dist-head .figures li{grid-template-columns:128px minmax(0,1fr)}
.dist{margin-top:var(--sp-5)}
.bars{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));column-gap:var(--sp-1);align-items:end;height:240px;padding-top:56px}
.bars li{position:relative;height:100%;display:flex;align-items:flex-end}
.bars i{display:block;width:100%;border-radius:6px 6px 0 0;background:radial-gradient(90% 70% at 14% 0%,var(--c2) 0,transparent 70%),linear-gradient(160deg,var(--c1),var(--c0))}
/* Twój słupek: pozostałe przygasają, Twój zostaje w pełnym kolorze z tabliczką nad sobą */
.dist.mine .bars li:not(.you) i{opacity:.4}
.you-tag{position:absolute;left:50%;bottom:calc(var(--h) + var(--sp-1));transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;line-height:24px;white-space:nowrap;font-variant-numeric:tabular-nums}
.names{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--sp-1);margin-top:var(--sp-3)}
.names li{display:flex;align-items:center;justify-content:center;gap:var(--sp-1);font-weight:500;line-height:24px}

/* ---------- LISTY RANKINGU ---------- */
/* Tytuł po lewej, wyszukiwarka lub przycisk po prawej, pod spodem lista na całą szerokość treści.
   Wiersze bez linii: grupuje je rytm (każdy wiersz 48 px), kolumny wyrównane, liczby o stałej szerokości.
   Osoby: znak poziomu (kolory poziomów). Firmy: znak odznaki firmowej (brąz, srebro, złoto), jak na stronie Odznaki. */
.list-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-5);align-items:end}
.list-head .copy{margin-top:var(--sp-3);max-width:none;font-size:var(--fs-base);line-height:24px}
.search{display:block;width:360px;padding:9px var(--sp-2);border:var(--line-w) solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font:inherit;line-height:24px}
.dark .search{background:none;border-color:var(--gray-on-dark);color:var(--h-fg)}
.search::placeholder{color:var(--gray-on-light)}
.dark .search::placeholder{color:var(--gray-on-dark)}
.rows{margin-top:var(--sp-5);font-variant-numeric:tabular-nums}
.rows li{display:grid;grid-template-columns:96px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 120px;column-gap:var(--sp-3);align-items:center;min-height:48px}
.rows.co li{grid-template-columns:96px minmax(0,1.2fr) minmax(0,1fr) 96px 136px 136px}
.rows .hd{min-height:0;padding-bottom:var(--sp-2);white-space:nowrap;font-size:var(--fs-xs);line-height:20px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-on-light)}
.dark .rows .hd{color:var(--gray-on-dark)}
.rows .c{text-align:center}
.rows .n{color:var(--gray-on-light)}
.dark .rows .n{color:var(--gray-on-dark)}
.rows .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* imię i nazwisko, miasto: tylko gdy ktoś je podał, żeby były widoczne w rankingu */
.rows .nm small{display:block;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-xs);font-weight:400;line-height:18px;color:var(--gray-on-dark)}
.rows .sub{color:var(--gray-on-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dark .rows .sub{color:var(--gray-on-dark)}
.rows .tag{display:flex;align-items:center;gap:var(--sp-1);min-width:0;white-space:nowrap}
.rows .ix{font-weight:500}
.rows li.me{margin:0 calc(-1 * var(--sp-2));padding:0 var(--sp-2);border-radius:var(--r);background:rgba(255,255,255,.1)}
.rows .empty{grid-column:1 / -1;color:var(--gray-on-dark)}
/* between the page of the list and the rows around yours */
.rows li.gap{min-height:32px}
.rows li.gap span{grid-column:1 / -1;color:var(--gray-on-dark);letter-spacing:.2em}
.more{margin-top:var(--sp-4)}

/* ---------- STOPKA ---------- */
.foot{background:var(--ink);padding:var(--sp-5) 0}
.foot .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-dark)}
.foot b{display:block;margin-bottom:var(--sp-2);color:var(--h-fg);font-weight:500}
.foot span{display:block;text-wrap:pretty}
.foot span + span{margin-top:var(--sp-1)}
.foot .wrap > div:nth-child(2):last-child{grid-column:2 / 4}
.foot a{color:var(--h-fg)}

/* Jedna reakcja na naciśnięcie dla wszystkiego, co się klika: delikatne zmniejszenie (1,5%),
   szybkie wejście (0,12 s) i miękki powrót (0,45 s), żeby nic nie "skakało". */
.foot a,.nav ul > li > a{display:inline-block}
:is(.btn,.logo,.foot a,.nav ul > li > a,.nav .lang a){transition:transform .45s var(--ease),color .2s,border-color .2s,background-color .2s}
:is(.btn,.logo,.foot a,.nav ul > li > a,.nav .lang a):active{transform:scale(.985);transition-duration:.12s}
@media (prefers-reduced-motion:reduce){:is(.btn,.logo,.foot a,.nav ul > li > a,.nav .lang a){transition:none}}


@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
}
@media (max-width:900px){
  .nav ul{gap:20px}
  .logo svg{height:26px}
  .sec{padding:var(--sp-5) 0}
  .hero.sub{padding:calc(80px + var(--sp-5)) var(--gut) var(--sp-5)}
  .sec .copy,.closing{max-width:none}
  .foot .wrap{grid-template-columns:1fr}
  .foot .wrap > div:nth-child(2):last-child{grid-column:auto}
}
@media (max-width:520px){
  .nav ul{gap:14px;align-items:center}
  .nav .lang{padding:7px 11px}
}

@media (max-width:900px){
  .dist-head,.list-head{grid-template-columns:1fr}
}
/* ---------- TELEFON ---------- */
/* Do 640 px. Telefon to zwykle wejście z LinkedIn: kilka sekund na decyzję, czy test jest wiarygodny.
   Dlatego: jedna oś (wszystko do lewej, także hero), skala pisma na mały ekran (etykiety wyraźnie mniejsze
   niż tekst, większa interlinia do czytania), mniej tekstu naraz (karuzele, krótkie liczby), bez linii
   i bez animacji wejścia, a każde dotknięcie ma odpowiedź. Pasek przyklejony u góry z menu. Obsługa: /test-ai/phone.js */
.burger,.dots{display:none}
@media (max-width:640px){
  :root{--fs-h1:34px;--fs-h2:26px;--fs-eyebrow:11px}
  body{-webkit-tap-highlight-color:transparent}
  .label,.hero-copy .eyebrow{line-height:16px;letter-spacing:.14em}
  .copy,.hero-copy p:not(.eyebrow),.closing{line-height:26px}
  .sec{padding:var(--sp-5) 0}
  .sec h2{margin-top:var(--sp-1)}
  .sec .copy{margin-top:var(--sp-2)}

  /* pasek i menu */
  .hero{isolation:auto}
  .nav{position:fixed;z-index:30;transition:background-color .3s var(--soft),transform .35s var(--ease)}
  .nav .wrap{height:64px;padding:0 var(--gut)}
  .nav.solid,.nav.open{background:var(--ink)}
  .nav.away{transform:translateY(-100%)}
  .burger{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--h-fg);cursor:pointer}
  .burger svg{display:block;width:24px;height:24px;overflow:visible}
  .burger path{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease)}
  .nav.open .burger .b1{transform:translateY(3px) rotate(45deg)}
  .nav.open .burger .b2{transform:translateY(-3px) rotate(-45deg)}
  #menu{display:none}
  .nav.open #menu{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);position:fixed;inset:64px 0 0;overflow:auto;padding:var(--sp-4) var(--gut) var(--sp-5);background:var(--ink)}
  #menu > li > a{padding:var(--sp-1) 0;font-size:var(--fs-h2);line-height:40px;letter-spacing:-.03em}
  #menu > li > a::after{bottom:var(--sp-1)}
  #menu > li > a:active{color:var(--gray-on-dark)}
  #menu > li:last-child{margin-top:var(--sp-4)}
  html.menu-open{overflow:hidden}

  /* hero na tej samej osi co reszta strony: do lewej, przycisk na całą szerokość */
  .hero{place-items:start stretch}
  .hero-copy{width:100%;text-align:left}
  .hero-copy p:not(.eyebrow){margin-inline:0;text-wrap:pretty}
  .hero-copy h1{margin:var(--sp-2) 0}
  .hero-actions{align-items:stretch;margin-top:var(--sp-4);gap:var(--sp-1)}
  .hero-actions .btn,.me .btn{display:block;padding:12px 24px;text-align:center}
  .btn:active{background-color:#e6e6e6}
  .btn.dark:active{background-color:#2a2a2a}
  .hero-actions .back{align-self:flex-start;padding:12px 0;margin-left:0}

  /* karuzela: slajd ma szerokość kolumny tekstu, przesuwa się po jednym; kreski to przyciski (stuknij, by przejść) */
  [data-carousel]{display:flex!important;gap:calc(var(--gut) + 2px);margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  [data-carousel]::-webkit-scrollbar{display:none}
  [data-carousel] > li{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
  .dots{display:flex;justify-content:center;margin-top:var(--sp-1)}
  .dots button{display:grid;place-items:center;width:36px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
  .dots button::before{content:"";width:24px;height:4px;border-radius:2px;background:currentColor;opacity:.2;transition:opacity .25s var(--soft)}
  .dots button.on::before{opacity:1}
  .dots button:active::before{opacity:.6}

  /* bez animacji wejścia na telefonie: treść jest od razu na miejscu */
  .js .rv{opacity:1;transform:none;transition:none}
  @media (prefers-reduced-motion:no-preference){
    .nav.open #menu{animation:menu-in .35s var(--ease)}
    @keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
  }
  @media (prefers-reduced-motion:reduce){.nav,.burger path,.dots button::before{transition:none}}

  /* hero */
  .hero.sub{padding:calc(64px + var(--sp-4)) var(--gut) var(--sp-5)}
  .cta{margin-top:var(--sp-3)}

  .foot .wrap{gap:32px}
}

/* ---------- TELEFON: zasady dla Rankingu i strony Firma ---------- */
/* Dopisane do systemu z landing.css i badges.css (jedna oś, skala pisma, karuzele, przyciski na całą szerokość).
   Każdy element na telefonie podlega jednej z tych zasad, na każdej stronie tak samo:
   1. Oś i szerokość: wszystko do lewej, także karta stanu; nic nie jest szersze niż ekran,
      w bok przewija się tylko karuzela.
   2. Pismo: h1 34, h2 26, kluczowe liczby 40 (--fs-figure), wynik testu 2 × liczba kluczowa, etykiety 11;
      tekst do czytania 16/26, tekst drugiego planu (opis pod tytułem, uzasadnienie) 15/24 i szary.
   3. Tekst nie jest ucinany ani chowany za „więcej”: teksty są krótkie, więc drugi plan dostaje cichszy styl.
      Zwijają się tylko listy szczegółów (pytania kontrolne), pod nagłówkiem mówiącym, co jest w środku.
   4. Siatki: kolumny z desktopu układają się jedna pod drugą. Wyjątki: krótkie liczby z podpisem stoją obok siebie
      (3 w rzędzie dla 3 pozycji, 2 dla 2 i 4), legendy (znak i nazwa) po dwie w rzędzie.
   5. Zestaw równorzędnych kart (3 i więcej, każda zrozumiała sama) to karuzela z kreskami, jak „Jak to działa”;
      otwiera się na karcie, która dotyczy użytkownika (aria-current), inaczej na pierwszej. Karta: numer lub znak
      i tytuł w jednym wierszu, opis pod nimi jako drugi plan.
   6. Tabele: bez przewijania w bok i bez ukrytych danych. W pierwszej linii wiersza pozycja, nazwa i główna wartość
      (po prawej, pod nagłówkiem tej kolumny), pod nią pozostałe kolumny jako drugi plan, każda w swojej linii
      (krótkie liczby razem w jednej); liczba, która nie stoi w kolumnie, ma przy sobie nazwę kolumny. Nagłówek zostaje tylko nad tym, co dalej jest kolumną.
   7. Wykres: podpisy, które nie mieszczą się pod słupkami, przechodzą do legendy pod wykresem (zasada 4);
      tabliczka nad słupkiem nie wychodzi poza ekran.
   8. Akcje: przycisk na całą szerokość (48 px), podkreślony link zostaje linkiem z polem dotyku 44 px.
      Pole i przycisk obok siebie (link dla zespołu, wyszukiwarka) stają jedno pod drugim, na całą szerokość.
   9. Skala z nazwami, które się nie mieszczą (dojrzałość firmy): nazwa tylko przy obecnym stopniu,
      pełna skala w aria-label. */
@media (max-width:640px){
  /* 2. pismo */
  :root{--fs-figure:40px}
  .copy{line-height:26px}

  /* 4. nagłówki sekcji z polem lub przyciskiem: jedno pod drugim; 8. pole i przyciski na całą szerokość */
  .dist-head,.list-head{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .list-head .copy{margin-top:var(--sp-2)}
  .search{width:100%}
  .list-head .btn,.more .btn{display:block;width:100%;padding:12px 24px;text-align:center}
  .btn.ghost:active{background-color:rgba(255,255,255,.08)}

  /* 4. kluczowe liczby obok siebie (2 pozycje), jak „O teście” na stronie testu; 3. opis zostaje, jako drugi plan */
  .figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .figures .rule{display:none}
  .figures li,.dist-head .figures li{display:block}
  .figures li.rule{display:none}
  .figures .fig{display:block;line-height:40px}
  .figures b{margin-top:var(--sp-1);font-size:15px;line-height:22px;text-wrap:balance}
  .figures p{font-size:15px;line-height:24px;color:var(--gray-on-light);text-wrap:pretty}

  /* 7. wykres: węższe przerwy między słupkami, nazwy poziomów jako legenda pod osią, tabliczka „Ty” w ekranie */
  .dist{display:flex;flex-direction:column;margin-top:var(--sp-4)}
  .bars{column-gap:4px;height:200px;padding-top:48px}
  .bars i{border-radius:4px 4px 0 0}
  .bars li:nth-child(-n+2) .you-tag{left:0;transform:none}
  .bars li:nth-last-child(-n+2) .you-tag{left:auto;right:0;transform:none}
  .names{order:3;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-1);column-gap:var(--sp-2);margin-top:var(--sp-3)}
  .names li{justify-content:flex-start;font-weight:400}

  /* 6. tabele: pozycja | nazwa, pod nią reszta jako drugi plan | główna wartość */
  .rows{margin-top:var(--sp-4)}
  .rows li{grid-template-columns:32px auto minmax(0,1fr) auto;column-gap:var(--sp-2);row-gap:2px;align-items:center;min-height:0;padding:var(--sp-1) 0}
  .rows.co li{grid-template-columns:32px auto minmax(0,1fr) auto}
  .rows li > *{grid-row:2}
  .rows li > .n{grid-column:1;grid-row:1}
  .rows li > .nm{grid-column:2 / 4;grid-row:1}
  .rows li > .ix{grid-column:4;grid-row:1;text-align:right}
  .rows .sub,.rows .tag{font-size:15px;line-height:24px}
  /* 3. nic nie jest ucinane: długi pseudonim lub nazwa firmy łamie się do kolejnej linii */
  .rows .nm,.rows .sub{white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .rows .tag .si{width:20px;height:20px;border-radius:5px}
  .rows .tag .si .sg{width:18px;height:18px}
  .rows .tag{grid-column:2 / 4}
  .rows .sub{grid-row:3;grid-column:2 / 4}
  .rows .sub:empty{display:none}
  .rows.co .sub{grid-row:3;grid-column:2}
  .rows.co .sub + .sub{grid-column:3}
  .rows .sub[data-l]::before{content:attr(data-l) " "}
  .rows .c{text-align:left}
  .rows li.me{margin:0 calc(-1 * var(--sp-1));padding:var(--sp-1)}
  .rows .empty,.rows li.gap span{grid-row:1}
  /* nagłówek tylko nad kolumnami: nazwa i główna wartość */
  .rows .hd{padding:0 0 var(--sp-1);font-size:var(--fs-eyebrow);letter-spacing:.14em;line-height:16px}
  .rows .hd > *{display:none}
  .rows .hd > :nth-child(2){display:block;grid-column:2 / 4;grid-row:1}
  .rows .hd > :last-child{display:block;grid-column:4;grid-row:1;text-align:right}
}