/* Kierunek B "Ścieżka" - przyjazna nowoczesność dla rodziców i młodzieży.
   Jeden arkusz dla całej strony (przeniesiony z prototypu). Mobile-first, tylko krój Lexend (/assets/fonty/fonty.css).
   Kolory poziomów niosą informację i zawsze stoją obok etykiety tekstowej. */

/* ------------------------------------------------------------------ tokeny */
:root {
  --nocny: #1E1B2E;
  --nocny-2: #36324C;
  --bialy: #FFFFFF;
  --tekst-2: #524E66;        /* tekst drugorzędny: 7,95:1 na bieli */
  --ramka: #6B6780;          /* obramowania pól: 5,42:1 na bieli */
  --linia-jasna: #E3E0EA;    /* podziały dekoracyjne */
  --tlo-2: #F6F5F9;

  --yl: #F4B400;  --yl-10: #FEF8E6;
  --a2: #13805C;  --a2-08: #ECF5F2;
  --b1: #1F6FD1;  --b1-08: #EDF3FB;
  --b2: #6E45D6;  --b2-08: #F3F0FC;
  --c1: #C42A62;  --c1-08: #FAEEF2;
  --c2: #5B2A6E;  --c2-08: #F2EEF3;

  --font: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-pigulka: 999px;
  --r-panel: 20px;
  --r-pole: 8px;
  --gruba: 9px;              /* grubość linii mapy */
  --kontener: 76rem;
  --margines: 1rem;
}
@media (min-width: 40em) { :root { --margines: 1.5rem; } }
@media (min-width: 64em) { :root { --margines: 2rem; } }

/* kolor poziomu: --kolor (linia, pasek, plakietka), --na-kolorze (tekst na kolorze), --odcien (jasne tło strony egzaminu) */
.k-yl { --kolor: var(--yl); --na-kolorze: var(--nocny); --odcien: var(--yl-10); }
.k-a2 { --kolor: var(--a2); --na-kolorze: #fff; --odcien: var(--a2-08); }
.k-b1 { --kolor: var(--b1); --na-kolorze: #fff; --odcien: var(--b1-08); }
.k-b2 { --kolor: var(--b2); --na-kolorze: #fff; --odcien: var(--b2-08); }
.k-c1 { --kolor: var(--c1); --na-kolorze: #fff; --odcien: var(--c1-08); }
.k-c2 { --kolor: var(--c2); --na-kolorze: #fff; --odcien: var(--c2-08); }
.k-inne, .k-wszystkie { --kolor: var(--nocny); --na-kolorze: #fff; --odcien: var(--tlo-2); }

/* ------------------------------------------------------------------ podstawy */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bialy);
  color: var(--nocny);
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 350;
  line-height: 1.55;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
main { display: block; }
main:focus { outline: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 650; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.375rem, 1.45rem + 3.7vw, 4rem); letter-spacing: -0.035em; line-height: 1.04; font-weight: 680; }
h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.875rem); letter-spacing: -0.028em; line-height: 1.08; }
h3 { font-size: 1.375rem; letter-spacing: -0.012em; line-height: 1.25; font-weight: 600; }
h4 { font-size: 1.125rem; letter-spacing: -0.005em; line-height: 1.3; font-weight: 600; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; }
strong { font-weight: 600; }
address { font-style: normal; }
a { color: var(--nocny); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--nocny); outline-offset: 3px; }
blockquote { margin: 0; }
dt { font-weight: 500; }
dd { margin: 0; }
abbr { text-decoration: none; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pomin {
  position: absolute; left: var(--margines); top: -10rem; z-index: 100;
  padding: .75rem 1.25rem; border-radius: var(--r-pigulka);
  background: var(--nocny); color: #fff; font-weight: 500; text-decoration: none;
}
.pomin:focus { top: .75rem; }

.kontener { width: 100%; max-width: var(--kontener); margin-inline: auto; padding-inline: var(--margines); }

/* ------------------------------------------------------------------ przyciski, plakietki, linki */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .625rem 1.375rem;
  border: 2px solid var(--nocny); border-radius: var(--r-pigulka);
  font: 500 1rem/1.2 var(--font); letter-spacing: -0.005em;
  text-align: center; text-decoration: none; cursor: pointer;
}
.przycisk--glowny { background: var(--nocny); color: #fff; }
.przycisk--glowny:hover { background: var(--nocny-2); border-color: var(--nocny-2); }
.przycisk--drugi { background: #fff; color: var(--nocny); }
.przycisk--drugi:hover { background: var(--tlo-2); }
.przycisk--duzy { min-height: 56px; padding: .875rem 1.75rem; font-size: 1.0625rem; }
.przycisk:disabled { opacity: .6; cursor: progress; }

.poziom {
  display: inline-flex; align-items: center; min-height: 1.6em; padding: .1em .6em;
  border-radius: var(--r-pigulka); background: var(--kolor); color: var(--na-kolorze);
  font-size: .8125em; font-weight: 600; line-height: 1.2; letter-spacing: 0; white-space: nowrap;
  vertical-align: .08em;
}
.egz-nazwa { font-weight: 550; }
.egz-nazwa .poziom { margin-right: .15em; }

.link-mocny {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 550; text-decoration-thickness: 2px;
}
.przypis { font-size: .9375rem; color: var(--tekst-2); }
.tytul-maly { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-top: 1.5rem; }
.cytat {
  margin: 0 0 .75rem; padding: .25rem 0 .25rem 1.125rem;
  border-left: 4px solid var(--nocny); font-weight: 300; font-size: 1.0625rem;
}
.wazne {
  padding: 1rem 1.25rem; border-radius: var(--r-pole);
  background: var(--c1-08); border-left: 6px solid var(--c1);
}
.do-weryfikacji { font-size: .875rem; color: var(--tekst-2); white-space: nowrap; }
.lista-akcji { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.lista-akcji li { border-bottom: 1px solid var(--linia-jasna); }
.lista-akcji a { display: flex; align-items: center; min-height: 48px; font-weight: 500; }

/* ------------------------------------------------------------------ nagłówek */
.naglowek { position: relative; z-index: 20; background: #fff; border-bottom: 1px solid var(--linia-jasna); }
.naglowek__wnetrze {
  max-width: var(--kontener); margin-inline: auto; padding: .75rem var(--margines);
  display: grid; align-items: center; gap: .75rem 1rem;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo jezyk" "cta menu";
}
.logo { grid-area: logo; display: block; width: 139px; background: #fff; }
.logo img { width: 100%; height: auto; }
.menu { grid-area: menu; display: none; }
.jezyk { grid-area: jezyk; justify-self: end; display: flex; gap: .25rem; margin: 0; }
.jezyk a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .5rem; border-radius: var(--r-pigulka);
  font-size: .9375rem; font-weight: 500; text-decoration: none;
}
.jezyk a[aria-current] { background: var(--nocny); color: #fff; }
.jezyk a:not([aria-current]):hover { background: var(--tlo-2); }
.naglowek__cta { grid-area: cta; justify-self: start; }
.menu-mobilne { grid-area: menu; justify-self: end; }
.menu-mobilne summary {
  display: inline-flex; align-items: center; gap: .625rem; min-height: 48px; padding: .5rem 1.125rem;
  border: 2px solid var(--nocny); border-radius: var(--r-pigulka);
  font-weight: 500; font-size: 1rem; list-style: none; cursor: pointer;
}
.menu-mobilne summary::-webkit-details-marker { display: none; }
.menu-mobilne__ikona { position: relative; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.menu-mobilne[open] summary { background: var(--nocny); color: #fff; }
.menu-mobilne[open] .menu-mobilne__ikona { box-shadow: none; transform: rotate(45deg); }
.menu-mobilne[open] .menu-mobilne__ikona::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: rotate(90deg); }
.menu-mobilne__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: .25rem var(--margines) 1.5rem; background: #fff;
  border-bottom: 1px solid var(--linia-jasna); box-shadow: 0 18px 24px -18px rgba(30, 27, 46, .35);
}
.menu-mobilne__panel ul { list-style: none; margin: 0 auto; padding: 0; max-width: calc(var(--kontener) - 2 * var(--margines)); }
.menu-mobilne__panel a {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--linia-jasna); font-size: 1.125rem; font-weight: 500; text-decoration: none;
}
.menu-mobilne__panel a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; }

@media (min-width: 40em) {
  .naglowek__wnetrze { grid-template-columns: auto 1fr auto auto auto; grid-template-areas: "logo . jezyk cta menu"; }
  .logo { width: 162px; }
}
@media (min-width: 75em) {
  .naglowek__wnetrze {
    padding-block: 1rem .5rem; row-gap: .25rem;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "logo . jezyk cta" "logo menu menu menu";
  }
  .logo { width: 208px; align-self: center; }
  .menu-mobilne { display: none; }
  .menu { display: block; justify-self: end; }
  .menu__lista { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
  .menu__lista a {
    display: inline-flex; align-items: center; min-height: 44px;
    border-bottom: 3px solid transparent; font-weight: 500; font-size: 1rem; text-decoration: none;
  }
  .menu__lista a:hover { border-bottom-color: var(--ramka); }
  .menu__lista a[aria-current] { border-bottom-color: var(--nocny); }
}

/* okruszki: bez znaków rozdzielających w tekście, separator to obrócony kwadrat z ramką */
.okruszki { max-width: var(--kontener); margin-inline: auto; padding: 1rem var(--margines) 0; font-size: .9375rem; }
.okruszki ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .75rem; margin: 0; padding: 0; }
.okruszki li { display: inline-flex; align-items: center; gap: .75rem; }
.okruszki li + li::before {
  content: ""; width: .4rem; height: .4rem; flex: none;
  border-top: 2px solid var(--tekst-2); border-right: 2px solid var(--tekst-2); transform: rotate(45deg);
}
.okruszki a, .okruszki span { display: inline-flex; align-items: center; min-height: 24px; }
.okruszki span { color: var(--tekst-2); }

/* ------------------------------------------------------------------ stopka */
.stopka { background: var(--nocny); color: #fff; }
.stopka a { color: #fff; }
.stopka :focus-visible { outline-color: #fff; }
.stopka__wnetrze {
  max-width: var(--kontener); margin-inline: auto; padding: 3rem var(--margines) 2rem;
  display: grid; gap: 2rem;
}
.stopka__nazwa { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: .5rem; }
.stopka__osrodek p:not(.stopka__nazwa) { color: #DAD7E4; max-width: 30rem; }
.stopka__tytul { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: .5rem; }
.stopka address { color: #DAD7E4; margin-bottom: .25rem; }
.stopka__lista { list-style: none; margin: 0; padding: 0; }
.stopka__lista a { display: inline-flex; align-items: center; min-height: 40px; }
.stopka__godziny { margin-top: .5rem; color: #DAD7E4; font-size: .9375rem; }
.stopka__prawa {
  max-width: var(--kontener); margin: 0 auto; padding: 1.25rem var(--margines) 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .18); color: #DAD7E4; font-size: .9375rem;
}
@media (min-width: 48em) {
  .stopka__wnetrze { grid-template-columns: 2fr 1.2fr 1fr; }
}

/* ------------------------------------------------------------------ sekcje wspólne */
.sekcja { padding-block: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem); }
.sekcja__wstep { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.sekcja__wstep > p { font-size: 1.1875rem; font-weight: 300; }
.sekcja__wstep--wiersz { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; max-width: none; }
.sekcja__wstep--wiersz h2 { margin: 0; }


/* ------------------------------------------------------------------ hero */
.hero { padding-block: clamp(2.5rem, 1.4rem + 4.5vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.hero__siatka { display: grid; gap: 2.5rem; }
.hero h1 { max-width: 16ch; margin-bottom: .5em; }
.hero__wstep { max-width: 36em; font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.4375rem); font-weight: 300; line-height: 1.5; }
.hero__dla { max-width: 40em; color: var(--tekst-2); }
.hero__przyciski { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__fakty {
  margin: 0; padding: 1.5rem 1.5rem .5rem; border-radius: var(--r-panel); background: var(--yl-10);
  display: grid; align-self: end;
}
.hero__fakty > div { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(30, 27, 46, .14); }
.hero__fakty > div:last-child { border-bottom: 0; margin-bottom: 0; }
.hero__fakty dt { font-size: .9375rem; color: var(--tekst-2); }
.hero__fakty dd { font-weight: 450; line-height: 1.4; }
@media (min-width: 64em) {
  .hero__siatka { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4.5rem; align-items: end; }
}

/* ------------------------------------------------------------------ mapa ścieżki
   Telefon i tablet: linia pionowa (lista przystanków z szyną po lewej).
   Od 68em: linia pozioma na 8 kolumnach, nazwy nad linią, gałąź for Schools pod kolumnami 4-6
   (linia podwójna) połączona łukami z linią główną. Przystanki są zwykłymi linkami w kolejności listy. */
.sekcja--sciezka { padding-top: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.mapa { --znacznik: 28px; --szyna: 2.75rem; --luk: 1.5rem; position: relative; }
.linia, .galaz { list-style: none; margin: 0; padding: 0; }
.przystanek { position: relative; }
.przystanek__link {
  position: relative; display: grid; grid-template-columns: var(--szyna) minmax(0, 1fr); align-items: start;
  min-height: 72px; padding: .25rem 0 1.25rem; color: var(--nocny); text-decoration: none;
}
.przystanek__link::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--szyna) / 2 - var(--gruba) / 2);
  border-left: var(--gruba) solid var(--kolor);
}
.galaz .przystanek__link::before { border-left-style: double; }
.przystanek:first-child .przystanek__link::before { top: calc(.25rem + var(--znacznik) / 2); }
.przystanek:last-child .przystanek__link::before { bottom: auto; height: calc(.25rem + var(--znacznik) / 2); }
.przystanek__znacznik {
  position: relative; z-index: 1; justify-self: center;
  width: var(--znacznik); height: var(--znacznik); border-radius: 50%;
  background: #fff; border: 5px solid var(--nocny);
}
.przystanek__opis {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline;
  padding-top: .05rem;
}
.przystanek__nazwa { font-size: 1.125rem; line-height: 1.35; }
.przystanek__cena { font-weight: 600; white-space: nowrap; }
.przystanek__stan { grid-column: 1 / -1; font-size: .9375rem; color: var(--tekst-2); }
.przystanek__link:hover .przystanek__znacznik { background: var(--kolor); }
.przystanek__link:hover .egz-nazwa { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.przystanek__link:focus-visible { outline-offset: 0; border-radius: 12px; }

/* strefy wiekowe: na telefonie wiersz na szynie, od 68em klamra nad linią */
.strefa {
  position: relative; display: block; padding: .5rem 0 1rem var(--szyna);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.3;
}
.strefa::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--szyna) / 2 - var(--gruba) / 2);
  border-left: var(--gruba) solid var(--kolor);
}
.galaz .strefa::before { border-left-style: double; }
.przystanek:first-child > .strefa::before { display: none; }
.strefa__dopisek { display: block; font-size: .9375rem; font-weight: 400; color: var(--tekst-2); }
.galaz { margin-top: 2rem; }

.mapa__legenda { display: grid; gap: .5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linia-jasna); }
.legenda { display: flex; gap: .875rem; align-items: baseline; margin: 0; font-size: .9375rem; color: var(--tekst-2); max-width: 52rem; }
.legenda__wzor { flex: none; width: 2.75rem; height: 0; border-top: var(--gruba) solid var(--nocny); transform: translateY(-.2em); }
.legenda--podwojna .legenda__wzor { border-top-style: double; }

@media (min-width: 68em) {
  .mapa { --znacznik: 30px; --odstep-galezi: 3rem; --strefa: 3.75rem; padding-bottom: .5rem; }
  .linia, .galaz { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .linia { padding-top: var(--strefa); }
  .przystanek { display: flex; flex-direction: column; }
  .linia .przystanek { justify-content: flex-end; }
  .przystanek__link {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    min-height: 0; padding: 0 .375rem;
  }
  .linia .przystanek__link { flex-direction: column-reverse; }
  .przystanek__opis { display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: 0 0 1rem; }
  .galaz .przystanek__opis { padding: .875rem 0 0; }
  .przystanek__nazwa { font-size: 1rem; line-height: 1.3; margin-bottom: .25rem; }
  .przystanek__nazwa .egz-nazwa { display: flex; flex-direction: column; align-items: center; gap: .375rem; }
  .przystanek__nazwa .poziom { margin: 0; font-size: .8125rem; }
  .przystanek__stan { font-size: .875rem; }
  .przystanek__link:focus-visible { outline-offset: 4px; }

  /* odcinki poziome: każdy przystanek rysuje swój kawałek linii w kolorze poziomu */
  .przystanek__link::before, .przystanek:first-child .przystanek__link::before, .przystanek:last-child .przystanek__link::before {
    left: 0; right: 0; top: auto; height: 0; border-left: 0;
    bottom: calc(var(--znacznik) / 2 - var(--gruba) / 2);
    border-top: var(--gruba) solid var(--kolor);
  }
  .przystanek:first-child .przystanek__link::before { left: 50%; }
  .przystanek:last-child .przystanek__link::before { right: 50%; }
  .galaz .przystanek__link::before, .galaz .przystanek:first-child .przystanek__link::before, .galaz .przystanek:last-child .przystanek__link::before {
    bottom: auto; top: calc(var(--znacznik) / 2 - var(--gruba) / 2); border-top-style: double;
  }
  .galaz .przystanek:first-child .przystanek__link::before { left: var(--luk); }
  .galaz .przystanek:last-child .przystanek__link::before { right: var(--luk); }

  /* gałąź for Schools pod kolumnami 4-6 */
  .galaz { position: relative; margin-top: var(--odstep-galezi); }
  .galaz .przystanek:nth-child(1) { grid-column: 4; }
  .galaz .przystanek:nth-child(2) { grid-column: 5; }
  .galaz .przystanek:nth-child(3) { grid-column: 6; }
  .galaz::before, .galaz::after {
    content: ""; position: absolute; width: var(--luk);
    top: calc(-1 * var(--odstep-galezi) - var(--znacznik) / 2 - var(--gruba) / 2);
    height: calc(var(--odstep-galezi) + var(--znacznik) + var(--gruba));
    border-bottom: var(--gruba) double;
  }
  .galaz::before { left: calc(100% * 3 / 8); border-left: var(--gruba) double; border-color: var(--a2); border-bottom-left-radius: var(--luk); }
  .galaz::after { right: calc(100% * 2 / 8); border-right: var(--gruba) double; border-color: var(--b2); border-bottom-right-radius: var(--luk); }

  /* klamry stref nad nazwami przystanków */
  .linia .strefa {
    position: absolute; top: calc(-1 * var(--strefa)); left: 0; padding: 0 .5rem 1.25rem;
    font-size: 1rem; text-align: left; white-space: nowrap;
    display: flex; align-items: baseline; gap: .5rem;
  }
  .linia .strefa--dzieci { width: 300%; }
  .linia .strefa--dorosli { width: 500%; }
  .linia .strefa::before, .linia .przystanek:first-child > .strefa::before {
    display: block; top: auto; bottom: .375rem; left: .5rem; right: .5rem; height: .625rem;
    border: 2px solid var(--nocny); border-bottom: 0; border-radius: 6px 6px 0 0;
  }
  .strefa__dopisek { display: inline; }

  /* etykieta gałęzi: po lewej stronie jej początku, pod przystankami dla dzieci */
  .galaz .strefa {
    position: absolute; right: calc(100% + 1.25rem); top: calc(var(--znacznik) / 2 - .8em);
    width: 240%; padding: 0; text-align: right;
  }
  .galaz .strefa::before { display: none; }
  .galaz .strefa__dopisek { display: block; }

  .mapa__legenda { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* jedyny ruch na stronie: linia rysuje się podczas przewijania (tylko gdy przeglądarka to wspiera i ruch nie jest ograniczony) */
@supports (animation-timeline: view()) {
  @media (min-width: 68em) and (prefers-reduced-motion: no-preference) {
    .mapa { view-timeline: --mapa block; }
    .linia .przystanek__link::before, .galaz .przystanek__link::before {
      transform-origin: left center; animation: rysuj-linie linear both; animation-timeline: --mapa;
    }
    .galaz::before, .galaz::after { animation: pokaz-luk linear both; animation-timeline: --mapa; }
    .linia .przystanek:nth-child(1) .przystanek__link::before { animation-range: entry 40% entry 47.5%; }
    .linia .przystanek:nth-child(2) .przystanek__link::before { animation-range: entry 47.5% entry 55%; }
    .linia .przystanek:nth-child(3) .przystanek__link::before { animation-range: entry 55% entry 62.5%; }
    .linia .przystanek:nth-child(4) .przystanek__link::before { animation-range: entry 62.5% entry 70%; }
    .linia .przystanek:nth-child(5) .przystanek__link::before { animation-range: entry 70% entry 77.5%; }
    .linia .przystanek:nth-child(6) .przystanek__link::before { animation-range: entry 77.5% entry 85%; }
    .linia .przystanek:nth-child(7) .przystanek__link::before { animation-range: entry 85% entry 92.5%; }
    .linia .przystanek:nth-child(8) .przystanek__link::before { animation-range: entry 92.5% entry 100%; }
    .galaz::before { animation-range: entry 62.5% entry 70%; }
    .galaz .przystanek:nth-child(1) .przystanek__link::before { animation-range: entry 70% entry 77.5%; }
    .galaz .przystanek:nth-child(2) .przystanek__link::before { animation-range: entry 77.5% entry 85%; }
    .galaz .przystanek:nth-child(3) .przystanek__link::before { animation-range: entry 85% entry 92.5%; }
    .galaz::after { animation-range: entry 92.5% entry 100%; }
  }
}
@keyframes rysuj-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pokaz-luk { from { opacity: 0; } to { opacity: 1; } }


/* ------------------------------------------------------------------ kto zdaje egzamin */
.sekcja--kto { background: var(--yl-10); }
.kto { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--nocny); }
.kto__wiersz {
  display: grid; gap: .875rem 2.5rem; padding: 1.75rem 0 2rem;
  border-bottom: 1px solid rgba(30, 27, 46, .16);
}
.kto__tytul { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; }
.kto__wiek { display: block; font-weight: 300; }
.kto__tresc p { max-width: 38em; }
/* egzaminy w grupach odbiorców i w zestawieniu poziomów: pigułki-linki do stron rodzin egzaminów */
.kto__egzaminy, .poziomy__egzaminy { list-style: none; margin: .875rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.kto__egzaminy li, .poziomy__egzaminy li { display: flex; }
.kto__egzaminy a, .poziomy__egzaminy a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .875rem .25rem .5rem;
  border-radius: var(--r-pigulka); background: #fff; color: var(--nocny); font-size: .9375rem; text-decoration: none;
}
.kto__egzaminy a:hover .egz-nazwa, .poziomy__egzaminy a:hover .egz-nazwa { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.kto__egzaminy .egz-nazwa, .poziomy__egzaminy .egz-nazwa { font-weight: 500; }
.kto__akcja { justify-self: start; }
@media (min-width: 60em) {
  .kto__wiersz { grid-template-columns: minmax(12rem, 3fr) minmax(0, 6fr) minmax(14rem, 3fr); align-items: start; padding-block: 2rem 2.25rem; }
  .kto__akcja { justify-self: end; }
}

/* ------------------------------------------------------------------ najbliższe terminy (tablica odjazdów) */
.odjazdy { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--nocny); }
.odjazd {
  position: relative; display: grid; gap: .5rem 1.25rem; padding: 1.25rem 0 1.5rem 1.25rem;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas: "data opis" "data cena" "akcja akcja";
  border-bottom: 1px solid var(--linia-jasna);
}
.odjazd::before { content: ""; position: absolute; left: 0; top: 1.25rem; bottom: 1.5rem; width: 6px; border-radius: 3px; background: var(--kolor); }
.odjazd__data { grid-area: data; display: grid; align-content: start; margin: 0; line-height: 1.15; }
.odjazd__dzien { font-size: 2.5rem; font-weight: 650; letter-spacing: -0.045em; line-height: 1; }
.odjazd__mies { font-size: .9375rem; font-weight: 500; }
.odjazd__tyg { font-size: .875rem; color: var(--tekst-2); }
.odjazd__opis { grid-area: opis; }
.odjazd__egz { margin: 0 0 .25rem; font-size: 1.1875rem; }
.odjazd__forma { display: block; margin-top: .125rem; font-size: .875rem; font-weight: 350; color: var(--tekst-2); }
.odjazd__szcz { margin: 0; font-size: .9375rem; color: var(--tekst-2); }
.odjazd__uwagi { margin: .375rem 0 0; font-size: .9375rem; font-weight: 500; }
.odjazd__cena { grid-area: cena; margin: 0; font-size: 1.25rem; font-weight: 600; white-space: nowrap; }
.odjazd__akcja, .odjazd__stan { grid-area: akcja; justify-self: start; }
/* sesja zamknięta albo po końcu rejestracji: zamiast przycisku etykieta, pasek koloru tylko obrysowany */
.odjazd__stan {
  margin: 0; padding: .5rem 1rem; border-radius: var(--r-pigulka);
  border: 2px dashed var(--ramka); font-size: .9375rem; font-weight: 500;
}
.odjazd--nieaktywna::before { background: none; border: 2px dashed var(--kolor); }
.odjazd--nieaktywna .odjazd__egz, .odjazd--nieaktywna .odjazd__cena { color: var(--tekst-2); }
@media (min-width: 56em) {
  .odjazd {
    grid-template-columns: 7.5rem minmax(0, 1fr) 6rem auto; grid-template-areas: "data opis cena akcja";
    align-items: center; padding: 1.25rem 0 1.25rem 1.5rem;
  }
  .odjazd::before { bottom: 1.25rem; }
  .odjazd__cena { text-align: right; }
}

/* ------------------------------------------------------------------ jak się zapisać */
.sekcja--zapis { background: var(--b1-08); }
.kroki { list-style: none; margin: 0 0 2.5rem; padding: 0; counter-reset: krok; display: grid; }
.krok { counter-increment: krok; position: relative; padding: 0 0 1.75rem 3.75rem; }
.krok::before {
  content: counter(krok); content: counter(krok) / "";
  position: absolute; left: 0; top: -.2rem; z-index: 1;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--nocny); color: #fff; font-size: 1.0625rem; font-weight: 600;
}
.krok::after { content: ""; position: absolute; left: calc(1.25rem - 2px); top: 2.3rem; bottom: 0; border-left: 4px solid var(--nocny); }
.krok:last-child::after { display: none; }
.krok__tytul { margin: 0 0 .25rem; font-size: 1.1875rem; }
.krok p { max-width: 34em; }
@media (min-width: 56em) {
  .kroki { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 4rem; }
  .krok:nth-child(4)::after { display: none; }
}
.sekcja--zapis .wazne { max-width: 50rem; background: #fff; }
.procedura { margin-top: 3rem; padding-top: 2.5rem; border-top: 2px solid var(--nocny); }
.procedura__tytul { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.02em; }
.procedura__siatka { display: grid; gap: 2.5rem; }
.procedura h4 { margin-top: 2rem; }
.procedura__siatka > div > h4:first-child { margin-top: .5rem; }
.przelew { display: grid; gap: .75rem; margin: 0 0 1rem; padding: 1.25rem 1.375rem; border-radius: var(--r-panel); background: #fff; }
.przelew > div { display: grid; gap: .125rem; }
.przelew dt { font-size: .875rem; color: var(--tekst-2); }
.przelew__numer { font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
@media (min-width: 56em) {
  .procedura__siatka { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .przelew > div { grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: baseline; }
}

/* ------------------------------------------------------------------ dla szkół */
.szkoly { display: grid; gap: 2rem; }
.szkoly__grupowa { padding: 1.75rem 1.5rem; border-radius: var(--r-panel); background: var(--a2-08); }
.szkoly__grupowa .przycisk { margin-top: .25rem; }
.pliki { list-style: none; margin: 0; padding: 0; }
.pliki li { border-bottom: 1px solid rgba(30, 27, 46, .14); }
.pliki a { display: flex; align-items: center; gap: .75rem; min-height: 48px; font-weight: 500; text-decoration: none; }
.pliki a:hover { text-decoration: underline; }
.pliki__kropka { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--kolor); box-shadow: 0 0 0 2px #fff; }
.pc-kroki { margin: 0; padding-left: 1.5rem; }
.pc-kroki li { margin-bottom: .625rem; padding-left: .25rem; }
.pc-kroki li::marker { font-weight: 600; }
.szkoly__pc, .szkoly__firmy { padding-top: .25rem; }
.szkoly__firmy { padding-top: 1.75rem; border-top: 1px solid var(--linia-jasna); }
.szkoly__firmy .kto__egzaminy { margin: 0 0 1.25rem; }
.szkoly__firmy .kto__egzaminy a { background: var(--tlo-2); }
@media (min-width: 64em) {
  .szkoly { grid-template-columns: 1.1fr 1fr; grid-template-areas: "grupowa pc" "grupowa firmy"; column-gap: 4rem; row-gap: 2rem; }
  .szkoly__grupowa { grid-area: grupowa; padding: 2.25rem 2.25rem; }
  .szkoly__pc { grid-area: pc; }
  .szkoly__firmy { grid-area: firmy; }
}

/* ------------------------------------------------------------------ wyniki i certyfikaty */
.sekcja--wyniki { border-top: 1px solid var(--linia-jasna); }
.wyniki { display: grid; gap: 2.5rem; }
.wyniki__yl { padding: 1.75rem 1.5rem; border-radius: var(--r-panel); background: var(--yl-10); }
.tarcze { margin: 1.75rem 0 0; }
.tarcze__lista { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .875rem; }
.tarcze__lista li { display: grid; gap: .375rem; }
.tarcze__czesc { font-weight: 500; font-size: 1rem; }
.tarcze__rzad { display: flex; gap: .375rem; }
.tarcza { width: 26px; height: 30px; fill: var(--yl); stroke: var(--nocny); stroke-width: 1.6; stroke-linejoin: round; }
.tarcze figcaption { font-size: .9375rem; color: var(--tekst-2); }
.os-czasu { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.os-czasu li { position: relative; padding: 0 0 1.25rem 2.25rem; }
.os-czasu li::before { content: ""; position: absolute; left: 0; top: .3rem; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--nocny); box-sizing: border-box; z-index: 1; }
.os-czasu li::after { content: ""; position: absolute; left: 7px; top: .9rem; bottom: -.3rem; border-left: 4px solid var(--nocny); }
.os-czasu li:last-child::after { display: none; }
.os-czasu__kiedy { display: block; font-weight: 600; }
.lista-faktow { margin: 0; padding-left: 1.25rem; }
.lista-faktow li { margin-bottom: .625rem; padding-left: .25rem; }
@media (min-width: 40em) {
  .tarcze__lista li { grid-template-columns: 11rem 1fr; align-items: center; }
}
@media (min-width: 64em) {
  .wyniki { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .wyniki__yl { padding: 2.25rem; }
}

/* ------------------------------------------------------------------ kontakt */
.sekcja--kontakt { background: var(--b2-08); }
.kontakt { display: grid; gap: 2.5rem; }
.kontakt__dane { display: grid; gap: 1.25rem; margin: 1.75rem 0 0; }
.kontakt__dane dt { font-size: .9375rem; color: var(--tekst-2); }
.kontakt__dane dd a { display: inline-flex; align-items: center; min-height: 40px; font-size: 1.25rem; font-weight: 550; }
.tabliczka {
  position: relative; margin-bottom: 1.25rem; padding: 1.5rem 1.5rem 1.5rem 4.25rem;
  border-radius: var(--r-panel); background: var(--nocny); color: #fff;
}
.tabliczka__znak {
  position: absolute; left: 1.25rem; top: 1.6rem; width: 2.125rem; height: 2.125rem; border-radius: 50%;
  background: #fff; border: 7px solid var(--yl);
}
.tabliczka__ulica { display: block; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; }
.tabliczka__miasto { display: block; margin-top: .375rem; font-size: 1.125rem; color: #E8E6F0; }
.tabliczka__nazwa { display: block; margin-top: 1.25rem; font-size: .9375rem; color: #DAD7E4; }
@media (min-width: 56em) {
  .tabliczka { padding: 1.75rem 1.75rem 1.75rem 5rem; }
  .tabliczka__znak { left: 1.5rem; top: 1.9rem; width: 2.25rem; height: 2.25rem; }
  .kontakt { grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; }
}


/* ------------------------------------------------------------------ podstrony: wstęp */
.podstrona { padding-block: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem) 1.5rem; }
.podstrona h1 { max-width: 16ch; }
.podstrona__wstep { max-width: 38em; font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.4375rem); font-weight: 300; line-height: 1.5; }
.podstrona p:not(.podstrona__wstep) { max-width: 44em; }
.na-stronie ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 0; padding: 0; }
.na-stronie a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.125rem;
  border-radius: var(--r-pigulka); background: var(--tlo-2); font-size: .9375rem; font-weight: 500; text-decoration: none;
}
.na-stronie a:hover { background: var(--linia-jasna); }

/* ------------------------------------------------------------------ terminy: filtr
   Pigułki to linki z parametrem ?egzamin= (działają bez JS); bieżąca ma aria-current="true", kolor poziomu
   idzie w parze z nazwą egzaminu, a stan "wybrany" pokazuje też znacznik wyboru zamiast kropki. */
.sekcja--sesje { padding-top: 2rem; }
.filtr-panel { margin: 1.5rem 0 2.5rem; padding: 1rem; border-radius: var(--r-panel); background: var(--tlo-2); }
.filtr { min-width: 0; }
.filtr__legenda { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; }
.filtr__grupy { display: grid; gap: 1.125rem; }
.filtr__grupa { display: grid; gap: .5rem; }
.filtr__etykieta { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--tekst-2); }
.filtr__pigulki { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pigulka { display: flex; }
.pigulka a {
  display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; padding: .5rem 1.125rem .5rem .75rem;
  border: 2px solid var(--ramka); border-radius: var(--r-pigulka); background: #fff; color: var(--nocny);
  font-size: .9375rem; font-weight: 500; line-height: 1.2; text-decoration: none;
}
.pigulka__znak { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--kolor); box-shadow: 0 0 0 1px rgba(30, 27, 46, .25); }
.pigulka a:hover { border-color: var(--nocny); }
.pigulka a[aria-current="true"] { background: var(--kolor); border-color: var(--kolor); color: var(--na-kolorze); font-weight: 600; }
.pigulka a[aria-current="true"] .pigulka__znak {
  width: 8px; height: 15px; margin: -3px 4px 0; border-radius: 0; background: none; box-shadow: none;
  border: solid var(--na-kolorze); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.k-yl .pigulka__znak, .pigulka.k-yl .pigulka__znak { box-shadow: 0 0 0 1px rgba(30, 27, 46, .45); }
.filtr__licznik { margin: 1.125rem 0 0; font-size: .9375rem; color: var(--tekst-2); }
.filtr__licznik strong { color: var(--nocny); }
@media (min-width: 56em) {
  .filtr-panel { padding: 1.75rem 2rem; }
  .filtr__grupa { grid-template-columns: 11.5rem minmax(0, 1fr); align-items: start; gap: 1rem; }
  .filtr__grupa--wszystkie { display: block; padding-left: 12.5rem; }
  .filtr__etykieta { padding-top: .7rem; }
}

/* ------------------------------------------------------------------ terminy: sesje według miesięcy
   Karty sesji to wspólny element .odjazd (jak na stronie głównej i stronach egzaminów); nagłówek miesiąca ma własną
   linię, więc lista pod nim nie powtarza górnej kreski. */
.miesiac { margin-bottom: 3rem; }
.miesiac__tytul { margin: 0; padding-bottom: .625rem; border-bottom: 2px solid var(--nocny); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
.miesiac .odjazdy { border-top: 0; }

/* ------------------------------------------------------------------ terminy: na zamówienie */
.sekcja--nz { background: var(--yl-10); }
.nz-grupa { margin-bottom: 3rem; }
.nz-grupa:last-child { margin-bottom: 0; }
.nz-grupa__tytul { margin: 0; padding-bottom: .625rem; border-bottom: 2px solid var(--nocny); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.nz-lista { list-style: none; margin: 0; padding: 0; }
.nz {
  position: relative; display: grid; gap: .75rem 2rem; padding: 1.25rem 0 1.5rem 1.25rem;
  border-bottom: 1px solid rgba(30, 27, 46, .16);
}
.nz::before { content: ""; position: absolute; left: 0; top: 1.25rem; bottom: 1.5rem; width: 6px; border-radius: 3px; background: var(--kolor); box-shadow: 0 0 0 1px rgba(30, 27, 46, .2); }
.nz__nazwa { margin: 0 0 .125rem; font-size: 1.1875rem; }
.nz__dla { margin: 0; font-size: .9375rem; color: var(--tekst-2); }
.nz__opis { max-width: 40em; margin-bottom: .5rem; }
.nz__czesci { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .9375rem; color: var(--tekst-2); }
.nz__akcje { display: grid; gap: .5rem; justify-items: start; align-content: start; }
.nz__cena { margin: 0; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.01em; }
.nz__termin { margin: 0; font-size: .9375rem; font-weight: 500; }
.nz__akcja { margin-top: .25rem; }
@media (min-width: 64em) {
  .nz { grid-template-columns: minmax(13rem, 1fr) minmax(0, 2.2fr) 14rem; padding-left: 1.5rem; }
  .nz__akcje { justify-items: end; text-align: right; }
}

/* ------------------------------------------------------------------ terminy: opłaty */
.sekcja--platnosci { border-top: 1px solid var(--linia-jasna); }
.platnosci { display: grid; gap: 2.5rem; }
.platnosci h3 { margin-top: 2rem; }
.platnosci h3:first-child { margin-top: 0; }
.platnosci .przelew { background: var(--tlo-2); }
@media (min-width: 56em) { .platnosci { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ------------------------------------------------------------------ rejestracja */
.rejestracja {
  --kolor-postep: var(--nocny); --na-kolorze-postep: #fff; --odcien-postep: var(--tlo-2);
  display: grid; gap: 3rem; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}
/* kolumny siatki mogą się zwężać poniżej szerokości zawartości (min-width: auto): długi adres e-mail w panelu bocznym nie poszerza strony ponad 320 px (WCAG 1.4.10) */
.rejestracja > * { min-width: 0; }
/* linia postępu przyjmuje kolor poziomu wybranego egzaminu (bez JS, przez :has) */
.rejestracja:has(#egzamin option:is([value="starters"], [value="movers"], [value="flyers"]):checked) { --kolor-postep: var(--yl); --na-kolorze-postep: var(--nocny); --odcien-postep: var(--yl-10); }
.rejestracja:has(#egzamin option:is([value="key"], [value="key-for-schools"]):checked) { --kolor-postep: var(--a2); --odcien-postep: var(--a2-08); }
.rejestracja:has(#egzamin option:is([value="preliminary"], [value="preliminary-for-schools"], [value="business-preliminary"]):checked) { --kolor-postep: var(--b1); --odcien-postep: var(--b1-08); }
.rejestracja:has(#egzamin option:is([value="first"], [value="first-for-schools"], [value="business-vantage"]):checked) { --kolor-postep: var(--b2); --odcien-postep: var(--b2-08); }
.rejestracja:has(#egzamin option:is([value="advanced"], [value="business-higher"]):checked) { --kolor-postep: var(--c1); --odcien-postep: var(--c1-08); }
.rejestracja:has(#egzamin option[value="proficiency"]:checked) { --kolor-postep: var(--c2); --odcien-postep: var(--c2-08); }

.postep { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.postep__krok { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.postep__krok + .postep__krok::before {
  content: ""; position: absolute; top: calc(19px - 3px); right: 50%; left: -50%;
  border-top: 6px solid var(--linia-jasna);
}
.postep__krok.jest-za + .postep__krok::before { border-top-color: var(--kolor-postep); }
.postep__znacznik {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 4px solid var(--ramka);
  font-size: .9375rem; font-weight: 600;
}
.postep__krok.jest-za .postep__znacznik { background: var(--kolor-postep); border-color: var(--kolor-postep); color: var(--na-kolorze-postep); }
.postep__krok[aria-current="step"] .postep__znacznik { border-color: var(--nocny); border-width: 5px; box-shadow: 0 0 0 4px var(--odcien-postep); }
.postep__nazwa { font-size: .8125rem; font-weight: 450; line-height: 1.25; color: var(--tekst-2); }
.postep__krok[aria-current="step"] .postep__nazwa { color: var(--nocny); font-weight: 600; }
@media (max-width: 39.99em) {
  /* na wąskim ekranie nazwy kroków czyta czytnik; widoczna nazwa jest w nagłówku kroku */
  .postep:has([aria-current]) .postep__nazwa {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

.etap { min-width: 0; margin: 0 0 2rem; padding: 1.5rem 1.25rem; border: 1px solid var(--linia-jasna); border-radius: var(--r-panel); }
.etap__tytul { float: left; width: 100%; margin: 0 0 1.5rem; padding: 0; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }
.etap__tytul + * { clear: both; }
.etap__tytul:focus { outline: none; }
.etap__tytul:focus-visible { outline: 3px solid var(--nocny); outline-offset: 4px; }
.etap__nr { display: block; margin-bottom: .25rem; font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--tekst-2); }
.etap__wstep { max-width: 40em; color: var(--tekst-2); }
.etap__nawigacja { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linia-jasna); }
.etap__nawigacja [data-dalej], .etap__nawigacja [type="submit"] { margin-left: auto; }
@media (min-width: 40em) { .etap { padding: 2rem 2rem 1.75rem; } }

.pole { display: grid; gap: .375rem; margin-bottom: 1.375rem; }
.pole label { font-size: 1rem; font-weight: 500; }
.gw { color: var(--c1); font-weight: 600; }
.pole input, .pole select, .pole textarea {
  width: 100%; min-height: 52px; padding: .75rem .875rem;
  border: 2px solid var(--ramka); border-radius: var(--r-pole); background: #fff; color: var(--nocny);
  font: 400 1.0625rem/1.4 var(--font);
}
.pole textarea { min-height: 8rem; resize: vertical; }
.pole select {
  appearance: none; padding-right: 2.75rem; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%231E1B2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
}
.pole select:disabled { background-color: var(--tlo-2); color: var(--tekst-2); cursor: not-allowed; }
.pole input:hover, .pole select:hover, .pole textarea:hover { border-color: var(--nocny); }
.pole input:focus-visible, .pole select:focus-visible, .pole textarea:focus-visible { outline: 3px solid var(--nocny); outline-offset: 2px; border-color: var(--nocny); }
.pole input::placeholder { color: #6E6A82; opacity: 1; }
.pole :user-invalid { border-color: var(--c1); border-width: 3px; }
.pole__podp { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--tekst-2); }
.pole--waskie { max-width: 22rem; }
.pola { display: grid; column-gap: 1rem; }
.grupa-pol { min-width: 0; margin: .5rem 0 .75rem; padding: 0; border: 0; }
.grupa-pol__tytul { float: left; width: 100%; margin: 0 0 .875rem; padding: 0; font-size: 1.125rem; font-weight: 600; }
.grupa-pol__tytul + * { clear: both; }
@media (min-width: 36em) {
  .pola--2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .pola--adres { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
  .pole--duze { grid-column: span 4; }
  .pole--male { grid-column: span 2; }
  .pole--pelne { grid-column: 1 / -1; }
  .pole--pol { grid-column: span 3; }
}

.pytanie { min-width: 0; margin: 0 0 1.5rem; padding: 0; border: 0; }
.pytanie__tytul { float: left; width: 100%; margin: 0 0 .625rem; padding: 0; font-size: 1rem; font-weight: 500; line-height: 1.45; }
.pytanie__tytul + * { clear: both; }
.pytanie > .pole__podp { margin-bottom: .625rem; }
.tak-nie { display: flex; flex-wrap: wrap; gap: .5rem; }
.tak-nie__opcja { position: relative; display: inline-flex; }
.tak-nie__opcja input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tak-nie__opcja label {
  display: inline-flex; align-items: center; gap: .625rem; min-height: 48px; min-width: 7rem;
  padding: .5rem 1.375rem .5rem .875rem; border: 2px solid var(--ramka); border-radius: var(--r-pigulka);
  background: #fff; font-weight: 500;
}
.tak-nie__opcja label::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ramka); background: #fff; box-sizing: border-box; }
.tak-nie__opcja input:hover + label { border-color: var(--nocny); }
.tak-nie__opcja input:checked + label { border-color: var(--nocny); background: var(--nocny); color: #fff; }
.tak-nie__opcja input:checked + label::before { border-color: #fff; box-shadow: inset 0 0 0 4px var(--nocny); }
.tak-nie__opcja input:focus-visible + label { outline: 3px solid var(--nocny); outline-offset: 3px; }

.wybory { display: grid; gap: .25rem; }
.wybor { position: relative; display: block; }
.wybor input { position: absolute; left: 0; top: .5rem; width: 28px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.wybor label { position: relative; display: block; min-height: 44px; padding: .55rem 0 .55rem 2.75rem; line-height: 1.45; cursor: pointer; }
.wybor label::before {
  content: ""; position: absolute; left: 0; top: .5rem; width: 28px; height: 28px; box-sizing: border-box;
  border: 2px solid var(--ramka); border-radius: 7px; background: #fff;
}
.wybor input:hover + label::before { border-color: var(--nocny); }
.wybor input:checked + label::before { background: var(--nocny); border-color: var(--nocny); }
.wybor input:checked + label::after {
  content: ""; position: absolute; left: 10px; top: calc(.5rem + 5px); width: 8px; height: 14px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.wybor input:focus-visible + label::before { outline: 3px solid var(--nocny); outline-offset: 3px; }
.wybor--zgoda label { font-weight: 450; }

.warunek { margin: 0 0 1.5rem; padding-left: 1.25rem; border-left: 4px solid var(--linia-jasna); }
.warunek--opiekun { margin-top: 1.25rem; border-left-color: var(--yl); }
.warunek__podp { margin: 0 0 .75rem; font-size: .9375rem; color: var(--tekst-2); }
.info { padding: 1rem 1.25rem; border-radius: var(--r-pole); background: var(--b1-08); }
.oswiadczenie {
  padding: 1.25rem 1.375rem; border-radius: var(--r-pole); background: var(--tlo-2);
  font-size: .9375rem; line-height: 1.6;
}
.oswiadczenie p { margin-bottom: .75em; max-width: 46em; }
.zgody { display: grid; gap: .5rem; margin-top: 1.25rem; }
.zgody__link { margin: .5rem 0 0; }

.podsumowanie { margin: .25rem 0 0; }
.podsumowanie:empty { margin: 0; }
.podsumowanie__lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .875rem 1.5rem; margin: 0;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem; border-radius: var(--r-pole);
  background: var(--odcien-postep); border-left: 6px solid var(--kolor-postep);
}
.podsumowanie__lista dt { font-size: .8125rem; font-weight: 500; color: var(--tekst-2); }
.podsumowanie__lista dd { font-weight: 500; }
.podsumowanie__komunikat {
  margin: 0; padding: 1rem 1.25rem; border-radius: var(--r-pole);
  background: var(--odcien-postep); border-left: 6px solid var(--kolor-postep);
}
.podsumowanie__komunikat a { font-weight: 600; }

.komunikat { margin-top: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--r-pole); background: var(--a2-08); border-left: 6px solid var(--a2); }
.komunikat:empty { margin: 0; padding: 0; border: 0; background: none; }
.komunikat:focus { outline: 3px solid var(--nocny); outline-offset: 3px; }
.komunikat p { max-width: 46em; }
.komunikat p + p, .komunikat p + dl, .komunikat dl + p { margin-top: .875rem; }
/* błędy formularza: komunikat nad formularzem (podsumowanie, limit), komunikat przy polu i obramowanie pola; kolor zawsze idzie z tekstem błędu */
.komunikat--blad { margin: 0 0 2rem; background: var(--c1-08); border-left-color: var(--c1); }
.komunikat__tytul { margin: 0 0 .5rem; font-size: 1.25rem; letter-spacing: -0.01em; }
.komunikat ul { margin: .75rem 0 0; padding-left: 1.25rem; }
.komunikat li { margin-bottom: .375rem; }
.komunikat--blad a { font-weight: 550; }
.pole__blad { margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.45; color: var(--c1); }
.pole__blad a { font-weight: 600; color: inherit; }
.pole [aria-invalid="true"] { border-color: var(--c1); border-width: 3px; }
.pytanie--blad { padding-left: 1rem; border-left: 4px solid var(--c1); }
.pytanie--blad .pole__blad, .zgody .pole__blad { margin-bottom: .625rem; }
.wybor input[aria-invalid="true"] + label::before { border-color: var(--c1); border-width: 3px; }
/* pułapka antyspamowa: pole poza ekranem, a nie display:none ani hidden, bo programy omijają ukryte pola; opakowanie ma aria-hidden, a pole tabindex -1 */
.pulapka { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.pomoc { padding: 1.5rem; border-radius: var(--r-panel); background: var(--tlo-2); align-self: start; overflow-wrap: anywhere; }
.pomoc__etykieta { display: block; }
.pomoc__tytul { font-size: 1.25rem; letter-spacing: -0.01em; }
.pomoc__tytul:not(:first-child) { margin-top: 2rem; }
.pomoc__kroki { margin: 0 0 1rem; padding-left: 1.25rem; }
.pomoc__kroki li { margin-bottom: .75rem; padding-left: .25rem; }
.pomoc__wazne { padding: .875rem 1rem; border-radius: var(--r-pole); background: #fff; border-left: 5px solid var(--c1); font-size: .9375rem; }
@media (min-width: 64em) {
  .rejestracja { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3.5rem; align-items: start; }
  .pomoc { position: sticky; top: 1.5rem; }
}

/* ------------------------------------------------------------------ strony egzaminów (lista i strona rodziny)
   Kolor rodziny (k-*) ustawia --kolor i --odcien na elemencie .strona-egz; bez koloru strona jest neutralna.
   Układ jak reszta strony: pasek koloru po lewej, ciemna linia nad listami, kolor zawsze obok tekstu. */
.podstrona--egzamin { background: var(--odcien, var(--tlo-2)); border-bottom: 6px solid var(--kolor, var(--nocny)); padding-bottom: 2.25rem; }
.podstrona--egzamin h1 { max-width: 24ch; font-size: clamp(2.125rem, 1.3rem + 3.2vw, 3.5rem); }
.podstrona--egzamin .na-stronie a { background: #fff; }
.podstrona--egzamin .na-stronie a:hover { background: var(--linia-jasna); }
.sekcja--egzamin { padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); border-top: 1px solid var(--linia-jasna); }
.podstrona--egzamin + .sekcja--egzamin { border-top: 0; }
.sekcja--egzamin h2 { margin-bottom: 1.25rem; font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem); }
.sekcja--poziomy { background: var(--tlo-2); }
.egz-wstep { max-width: 46rem; margin-bottom: 1.5rem; font-size: 1.1875rem; font-weight: 300; }

/* treść z pliku treści (HTML): akapity, podtytuły, listy faktów, ramka "Ważne" */
.tresc-egz { max-width: 46rem; }
.tresc-egz h3 { margin: 1.75rem 0 .5rem; font-size: 1.25rem; }
.tresc-egz > h3:first-child { margin-top: 0; }
.tresc-egz ul { margin-bottom: 1rem; }
.tresc-egz .wazne { margin-top: 1.25rem; }

/* poziom: skala Pre A1 - C2 (ozdoba, tekst niesie ten sam komunikat) i lista poziomów wariantów */
.skala { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.skala__stopien {
  display: inline-flex; align-items: center; justify-content: center; min-width: 4.25rem; min-height: 44px; padding: .25rem .875rem;
  border: 2px solid var(--linia-jasna); border-radius: var(--r-pigulka); color: var(--tekst-2); font-size: .9375rem; font-weight: 500;
}
.skala__stopien--jest { background: var(--kolor); border-color: var(--kolor); color: var(--na-kolorze); font-weight: 650; }
.k-yl.skala__stopien--jest { border-color: var(--nocny); }
.egz-poziomy { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; font-size: 1.125rem; }

/* części egzaminu i czas trwania */
.czesci-egz { display: grid; gap: 1.25rem; }
.czesc-wariant { padding: 1.25rem 1.375rem; border-radius: var(--r-pole) var(--r-panel) var(--r-panel) var(--r-pole); background: var(--tlo-2); border-left: 6px solid var(--kolor); }
.czesc-wariant__nazwa { margin: 0 0 .75rem; font-size: 1.1875rem; }
.czesc-wariant__lista { margin: 0; }
.czesc-wariant__lista > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem 1.5rem; padding: .625rem 0; border-top: 1px solid rgba(30, 27, 46, .14); }
.czesc-wariant__lista > div:first-child { border-top: 0; padding-top: 0; }
.czesc-wariant__lista dt { font-weight: 400; }
.czesc-wariant__lista dd { font-weight: 600; white-space: nowrap; }
.wyniki-egz { max-width: 46rem; margin-top: 2.25rem; }
.wyniki-egz h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
@media (min-width: 48em) {
  .czesci-egz { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
}

/* cena */
.ceny-egz { max-width: 40rem; margin: 0; border-top: 2px solid var(--nocny); }
.ceny-egz__wiersz {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem;
  padding: 1rem 0 1rem 1.25rem; border-bottom: 1px solid var(--linia-jasna);
}
.ceny-egz__wiersz::before { content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 6px; border-radius: 3px; background: var(--kolor); box-shadow: 0 0 0 1px rgba(30, 27, 46, .2); }
.ceny-egz dt { font-size: 1.125rem; }
.ceny-egz dd { font-size: 1.25rem; font-weight: 650; }

/* najbliższe terminy: osobna lista dla każdego wariantu, brak terminów z pytaniem o termin */
.terminy-wariant { margin-top: 2.25rem; }
.przypis + .terminy-wariant { margin-top: 1.25rem; }
.terminy-wariant__nazwa { margin: 0 0 .75rem; font-size: 1.25rem; }
.terminy-wariant__wiecej { margin: .75rem 0 0; }
.bez-terminu {
  display: grid; gap: .75rem; justify-items: start; padding: 1.25rem 1.5rem; border-radius: var(--r-pole);
  background: var(--yl-10); border-left: 6px solid var(--nocny);
}
.odjazdy + .bez-terminu, .terminy-wariant__wiecej + .bez-terminu { margin-top: 1rem; }
.bez-terminu__tekst { margin: 0; font-weight: 550; }

/* jak się zarejestrować */
.egz-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }

/* pytania i odpowiedzi: natywne <details>, działa bez JS; plus i minus rysowane w CSS */
.faq { max-width: 50rem; border-top: 2px solid var(--nocny); }
.faq__pozycja { border-bottom: 1px solid var(--linia-jasna); }
.faq__pozycja summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .75rem 0;
  font-size: 1.125rem; font-weight: 550; line-height: 1.35; list-style: none; cursor: pointer;
}
.faq__pozycja summary::-webkit-details-marker { display: none; }
.faq__pozycja summary::after {
  content: ""; flex: none; width: 1rem; height: 1rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat;
}
.faq__pozycja[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat; }
.faq__odpowiedz { padding: 0 2rem 1.25rem 0; }
.faq__odpowiedz p { max-width: 44em; }

/* lista egzaminów: karty rodzin w grupach */
.grupa-rodzin { margin-top: 2.5rem; }
h2 + .grupa-rodzin { margin-top: 1.5rem; }
.grupa-rodzin__tytul { margin: 0 0 1rem; padding-bottom: .625rem; border-bottom: 2px solid var(--nocny); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.rodziny { display: grid; gap: 1rem; }
.rodzina {
  display: grid; align-content: start; gap: .75rem; padding: 1.25rem 1.375rem 1.5rem;
  border-radius: var(--r-pole) var(--r-panel) var(--r-panel) var(--r-pole); background: var(--odcien); border-left: 6px solid var(--kolor);
}
.rodzina__tytul { margin: 0; font-size: 1.375rem; }
.rodzina__tytul a { display: inline-flex; align-items: center; min-height: 44px; }
.rodzina__egzaminy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rodzina__egzaminy li { padding: .25rem .75rem .25rem .5rem; border-radius: var(--r-pigulka); background: #fff; font-size: .9375rem; }
.rodzina__opis { margin: 0; color: var(--tekst-2); }
@media (min-width: 48em) {
  .rodziny { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .rodziny > .rodzina:only-child { grid-column: 1 / -1; max-width: 46rem; }
}
@media (min-width: 64em) {
  .rodziny { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* lista egzaminów: zestawienie poziomów Pre A1 - C2 (zamiast diagramu CEFR) */
.poziomy { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--nocny); }
.poziomy__wiersz { display: grid; gap: .25rem 2rem; padding: 1.125rem 0 1.25rem; border-bottom: 1px solid rgba(30, 27, 46, .16); }
.poziomy__poziom { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; }
.poziomy__egzaminy { margin-top: 0; }
@media (min-width: 48em) {
  .poziomy__wiersz { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; }
}

/* ------------------------------------------------------------------ strony treści (Jak się zapisać, Wyniki, Dla szkół, O nas, Kontakt, teksty prawne) */
.tresc-strony { max-width: 46rem; }
.tresc-strony h3 { margin: 1.75rem 0 .5rem; font-size: 1.25rem; }
.tresc-strony > h3:first-child { margin-top: 0; }
.tresc-strony .wazne { margin: 1.5rem 0; }

/* jak się zapisać: pełna procedura, kroki z dodatkową treścią (przyciski, cytat, dane do przelewu) w jednej kolumnie */
.kroki.kroki--pelne { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; max-width: 52rem; }
.kroki--pelne .krok:nth-child(4)::after { display: block; }
.kroki--pelne .krok:last-child::after { display: none; }
.kroki--pelne .krok p { max-width: 42em; }
.kroki--pelne .krok .krok__akcje { display: flex; flex-wrap: wrap; gap: .5rem .75rem; max-width: none; margin: .875rem 0 0; }
.krok .cytat { max-width: 42em; margin-top: .875rem; }
.krok .przelew { max-width: 34rem; }
.krok .tytul-maly { margin-top: 1.25rem; }
.sekcja--udogodnienia { border-top: 1px solid var(--linia-jasna); }

/* wyniki: tekst obok osi czasu, karta Young Learners, odbiór certyfikatu */
.wyniki__tekst p { max-width: 38em; }
.sekcja--young { padding-block: 0 clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem); }
.sekcja--young .wyniki__yl { max-width: 52rem; }
.sekcja--odbior { padding-top: 0; }

/* dla szkół: nagłówki bloków są h2, wyglądają jak h3 na stronie głównej; format pliku przy nazwie */
.szkoly h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.02em; }
.szkoly .tytul-maly { margin-top: 1.75rem; }
.pliki__format { font-size: .875rem; font-weight: 400; color: var(--tekst-2); white-space: nowrap; }

/* kontakt: statyczna mapa w linku do Map Google z podpisem OpenStreetMap */
.kontakt__mapa p { margin-top: 1.25rem; }
.mapa-kontakt { margin: 0; }
.mapa-kontakt__link { display: block; overflow: hidden; border-radius: var(--r-panel); border: 1px solid rgba(30, 27, 46, .2); background: var(--tlo-2); }
.mapa-kontakt__link img { width: 100%; height: auto; }
.mapa-kontakt__podpis { margin-top: .5rem; font-size: .875rem; color: var(--tekst-2); }
.mapa-kontakt__podpis a { display: inline-flex; align-items: center; min-height: 24px; color: var(--tekst-2); }

/* kontakt: formularz "Napisz do nas" pod danymi i mapą. Jedna kolumna o czytelnej szerokości (pola, komunikaty i informacja o danych osobowych), pola i komunikaty
   błędów jak w rejestracji (.pole, .komunikat). Jednorazowy komunikat o wysłaniu wiadomości stoi pod nagłówkiem sekcji: po przekierowaniu użytkownik ląduje na jej początku. */
.sekcja--formularz-kontaktowy { border-top: 1px solid var(--linia-jasna); }
.formularz-kontaktowy > * { max-width: 46rem; }
.formularz-kontaktowy h2 { margin-bottom: 1.5rem; }
.formularz-kontaktowy .komunikat { margin: 0 0 1.5rem; }
.formularz-kontaktowy__egzamin { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: var(--r-pole); background: var(--b2-08); border-left: 6px solid var(--b2); }
.formularz-kontaktowy__wstep { margin: 0 0 1.5rem; color: var(--tekst-2); }
.formularz-kontaktowy__rodo { margin: 1.5rem 0 0; padding: 1rem 1.25rem; border-radius: var(--r-pole); background: var(--tlo-2); }
.formularz-kontaktowy__rodo-tytul { margin: 0 0 .25rem; font-size: 1.125rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.formularz-kontaktowy__rodo ul { margin: 0; padding: 0; list-style: none; }
.formularz-kontaktowy__rodo a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.formularz-kontaktowy__akcje { margin-top: 1.5rem; }

/* o nas */
.sekcja--dlaczego { border-top: 1px solid var(--linia-jasna); }
.sekcja--dlaczego .lista-faktow { max-width: 46rem; font-size: 1.125rem; }

/* teksty prawne (polityka prywatności, RODO): tekst dosłownie z oryginału, numeracja listy jak w źródle, punktory jako dywiz */
.sekcja--prawo { padding-block: 1.5rem clamp(3rem, 2rem + 4vw, 6rem); }
.prawo { max-width: 46rem; font-size: 1rem; line-height: 1.6; }
.prawo + .prawo { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--linia-jasna); }
.prawo h2 { margin-bottom: .75rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing: -0.01em; line-height: 1.25; }
.prawo__lista { margin: 0; padding-left: 1.75rem; }
.prawo__lista > li { margin-bottom: 1rem; padding-left: .5rem; }
.prawo__lista > li::marker { font-weight: 600; }
.prawo__lista ul { margin: .5rem 0 0; padding-left: 1.5rem; list-style: "- "; }
.prawo__lista ul li { margin-bottom: .5rem; padding-left: .25rem; }
.prawo__lista p { margin: .75rem 0 0; }

/* ------------------------------------------------------------------ wymuszone kolory (tryb wysokiego kontrastu) */
@media (forced-colors: active) {
  .przystanek__znacznik, .postep__znacznik, .pigulka a, .tak-nie__opcja label { forced-color-adjust: auto; border-color: CanvasText; }
  .pigulka a[aria-current="true"], .tak-nie__opcja input:checked + label { outline: 3px solid Highlight; }
  .skala__stopien--jest { border-color: Highlight; border-width: 4px; }
}