/* Podstrona „Odznaki” (PL i EN): wygląd z odznaki.html, a pod nim przycisk „Moja odznaka” i jego okienko. */
/* 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 „Odznaki”: te same tokeny i komponenty co strona testu, 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}
/* strony poziomów (level/N/, z tools/build_test_ai_badges.py): odznaka poziomu nad nagłówkiem, link do rankingu pod przyciskiem */
.lv-badge{display:block;width:min(480px,100%);height:auto;margin:0 auto var(--sp-4)}
/* weryfikacja odznaki (badge/?code=, z tego samego skryptu): numer, stan, a pod nim kto i kiedy w wierszach */
.hero-copy .eyebrow + .lv-badge{margin-top:var(--sp-m)}
.hero-copy .badgeno{font-weight:500;font-variant-numeric:tabular-nums}
.hero-copy .v-ok{margin-top:var(--sp-1);color:var(--violet-on-dark);font-weight:500}
.hero-copy .v-old{margin-top:var(--sp-1);color:#ff9a6b;font-weight:500}
.hero-copy .v-old a{color:inherit}
.vdl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--sp-1) var(--sp-3);width:max-content;max-width:100%;margin:var(--sp-m) auto 0;text-align:left;line-height:24px}
.vdl dt{color:var(--gray-on-dark)}
.vdl dd{margin:0;overflow-wrap:anywhere}
.back{font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-dark);text-decoration:underline;text-underline-offset:4px;transition:color .2s}
.back:hover{color:var(--h-fg)}
.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)}

/* ---------- WIERSZ: ODZNAKA I OPIS ---------- */
/* Bez linii: grupuje sama odległość. Odznaka i jej opis stoją bliżej siebie (48)
   niż kolejne pozycje (64), więc oko łączy pary i oddziela wiersze. Proporcje 6/11 i 5/11 jak w „O teście”. */
.blist{display:grid;row-gap:var(--sp-5);margin-top:var(--sp-5)}
.brow{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:var(--sp-4);align-items:center}
.brow img{display:block;width:100%;height:auto}
.brow h3{margin-top:var(--sp-2);font-size:var(--fs-base);line-height:24px;font-weight:500}
.brow p.desc{margin-top:var(--sp-1);font-size:var(--fs-base);line-height:24px;text-wrap:pretty}
.dark .brow p.desc{color:var(--h-fg)}
/* miejsce na grafikę, która zostanie podmieniona: te same proporcje i zaokrąglenie co odznaka */
.ph{display:grid;place-items:center;aspect-ratio:10/3;border-radius:calc(28 / 720 * 100%) / calc(28 / 216 * 100%);border:var(--line-w) dashed var(--line);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light);text-align:center;padding:var(--sp-2)}
.dark .ph{border-color:#4a4a4a;color:var(--gray-on-dark)}
/* zamknięcie sekcji: zdanie z linkami w tekście, podkreślone jak „Wróć do swojego wyniku”, bez strzałki (strzałka jest tylko przy przyciskach) */
.closing{margin-top:var(--sp-5);max-width:calc((100% - var(--sp-5)) * 6 / 11);font-size:var(--fs-base);line-height:24px;text-wrap:pretty}
:is(.closing,.desc) a{font-weight:500;text-decoration:underline;text-underline-offset:4px;transition:color .2s}
:is(.closing,.desc) a:hover{color:var(--gray-on-light)}
/* przycisk pod opisem sekcji: ten sam co w hero i ten sam rytm (opis, 48, przycisk) */
.cta{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}
  .brow{grid-template-columns:1fr;row-gap:var(--sp-3)}
  .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}
}

/* ---------- MOJA ODZNAKA (przycisk w hero i okienko) ---------- */
/* Przycisk i okienko jak na stronie testu („Rozpocznij”, „Wróć do swojego wyniku”). Widać je tylko po teście (test-ai.js). */
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:var(--sp-s);margin-top:var(--sp-l)}
/* okienko: tak samo jak „Wróć do swojego wyniku” na stronie testu (klasa zamykania to tu m-closing, bo .closing to akapit na końcu sekcji) */
html:has(dialog.m[open]){overflow:hidden}
dialog.m{position:fixed;inset:0;margin:auto;padding:0;border:0;border-radius:var(--r);background:#fff;color:var(--ink);width:min(640px,calc(100% - 2 * var(--gut)));height:fit-content;max-height:calc(100dvh - 2 * var(--sp-3));overflow:auto}
dialog.m::backdrop{background:rgba(14,14,14,.64)}
.m-in{display:grid;gap:var(--sp-4);padding:var(--sp-4)}
.m-x{position:absolute;top:var(--sp-2);right:var(--sp-2);display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:var(--gray-on-light);cursor:pointer;transition:color .2s}
.m-x:hover{color:var(--ink)}
.m-x svg{display:block;width:16px;height:16px}
.m-f{display:grid;gap:var(--sp-1)}
.m-f label,.m-f h3{font-size:var(--fs-base);line-height:24px;font-weight:500}
.m-f p{font-size:var(--fs-base);line-height:24px;color:var(--ink);text-wrap:balance}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 var(--line-w) var(--ink)}
.btn.ghost:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--violet-on-light)}
@media (prefers-reduced-motion:no-preference){
  dialog.m[open]{animation:m-in .35s var(--ease)}
  dialog.m[open]::backdrop{animation:m-bd .35s var(--soft)}
  @keyframes m-in{from{opacity:0;transform:translateY(16px)}}
  @keyframes m-bd{from{opacity:0}}
  /* zamknięcie: lustrzane odbicie wejścia, odrobinę krótsze */
  dialog.m.m-closing{animation:m-out .28s var(--soft) forwards}
  dialog.m.m-closing::backdrop{animation:m-bd-out .28s var(--soft) forwards}
  @keyframes m-out{to{opacity:0;transform:translateY(16px)}}
  @keyframes m-bd-out{to{opacity:0}}
}

.hero-actions[hidden]{display:none}
button.btn{border:0;cursor:pointer;font-family:inherit}
:is(.m-x,.m-copy,.m-li a,.m-li summary){transition:transform .45s var(--ease),color .2s,border-color .2s,background-color .2s}
:is(.m-x,.m-copy):active{transform:scale(.985);transition-duration:.12s}
.m-f h3{font-size:var(--fs-base);line-height:24px;font-weight:500}
/* odznaka w pełnej szerokości okienka, pod nią numer i link do strony weryfikacji (tylko odznaki wydane przez serwer) */
.m-badge{display:block;width:100%;height:auto}
.m-no{display:grid;margin-top:var(--sp-1);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
/* małe linki w okienku: podkreślony szary tekst jak „Wróć do swojego wyniku”, bez znaczników */
:is(.m-no a,.m-li summary){justify-self:start;color:var(--gray-on-light);text-decoration:underline;text-underline-offset:4px;transition:color .2s}
:is(.m-no a,.m-li summary):hover{color:var(--ink)}
/* kod do wklejenia: ramka i tło jak pola formularza, pismo o stałej szerokości */
.m-code{margin:var(--sp-1) 0 0;padding:var(--sp-1) var(--sp-2);border:var(--line-w) solid var(--line);border-radius:4px;background:#fff;font:var(--fs-xs)/20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:pre-wrap;word-break:break-all}
.m-copy{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.m-copy .btn{flex:none;white-space:nowrap}
.m-copy [role=status]{font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.m-li{display:grid;justify-items:start;gap:var(--sp-2)}
.m-li summary{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:var(--fs-xs);line-height:20px;list-style:none}
.m-li summary .chev{flex:none;width:16px;height:16px;transition:transform .2s}
.m-li details[open] summary .chev{transform:rotate(180deg)}
.m-li summary::-webkit-details-marker{display:none}
.m-li dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-xs);line-height:20px}
.m-li dt{color:var(--gray-on-light)}
.m-li dd{margin:0;overflow-wrap:anywhere}
.m-li .linkish{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.m-li dd a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.m-li .toast{color:var(--accent)}
.m-li .toast:empty{display:none}
/* na telefonie mniejszy margines okienka, jak na stronie testu */
@media (max-width:520px){.m-in{padding:var(--sp-3)}}

/* ---------- 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,.cta .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}
  .lv-badge{margin-left:0}
  .vdl{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)}

  /* każda grupa odznak jako karuzela: odznaka, pod nią kreski, potem kryterium i opis (ciszej);
     nazwa z nagłówka jest już na odznace, więc na telefonie zostaje dla czytników ekranu */
  .blist{margin-top:var(--sp-4)}
  .brow{display:block}
  .carousel{position:relative}
  .dots.under-media{position:absolute;left:0;right:0;margin:0}
  .brow img{margin-bottom:52px}
  .brow .label{margin:0}
  .brow h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .brow p.desc{margin-top:var(--sp-1);font-size:15px;line-height:24px;color:var(--gray-on-light)}
  .dark .brow p.desc{color:var(--gray-on-dark)}
  .dark .dots{color:var(--h-fg)}
  .closing{margin-top:var(--sp-3)}
  .foot .wrap{gap:32px}
}