/* Wygenerowane przez site/build.mjs — nie edytuj bezpośrednio.
   Tokeny marki pochodzą z constants/Colors.ts (darkColors). */
:root {
  --accent: #00E5FF;
  --grad-start: #00dbe7;
  --grad-end: #00f1fe;
  --grad-text: #00363a;
  --ready: #00E676;
  --warning: #FFB800;
  --text-on-glass: #ddfcff;
  --app-bg: #080D20;
  --bg: #141C36;
  --soft: #1A2445;
  --deep: #10172C;
  --card: rgba(255,255,255,.045);
  --card-solid: #1D2748;
  --border: rgba(255,255,255,.11);
  --divider: rgba(255,255,255,.08);
  --text: #F2F5FB;
  --text-sub: #AAB6D0;
  --text-muted: #8E9BBA;
  --accent-soft: rgba(0,229,255,.09);
  --accent-soft-border: rgba(0,229,255,.22);
  --warm: rgba(255,184,0,.13);
  --warm-strong: rgba(255,166,60,.26);
  --app-divider: #1E2D42;
}

/* ═══════════════════════════════════════════════════════════════════════
   horizn.world — arkusz stylów
   Koncepcja „godzina niebieska”: noc u góry, świt na dole.

   Tokeny marki (akcent, gradient CTA, statusy) NIE są tu wpisane na sztywno —
   generator wstrzykuje je z `constants/Colors.ts` w bloku :root powyżej tego
   pliku, więc zmiana palety aplikacji przefarbowuje stronę przy deployu.
   Powierzchnie „zmierzchowe” (--bg/--soft/--deep) są własne dla strony.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Space Grotesk';
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-700.woff2) format('woff2');
}

:root {
  --radius: 26px;
  --radius-sm: 16px;
  --shadow-soft: 0 16px 44px rgba(4, 8, 22, 0.45);
  --maxw: 1120px;
}

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

body,
h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--accent);
}
a:hover {
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
}

/* Widoczny focus — ten sam akcent co `borderFocus` w aplikacji. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  background: var(--accent);
  color: var(--grad-text);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  z-index: 99;
}
.skip-link:focus {
  left: 16px;
}

/* Treść tylko dla czytników ekranu: znaki „✓"/„—" w tabeli same nie mówią,
   czy funkcja jest w planie. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ─────────────────────────── nawigacja ─────────────────────────── */

.nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px 0;
}
/* Znak marki skalowany rozmiarem tekstu — proporcje z nagłówka aplikacji:
   ikona 20 px przy foncie 19 (1.05em), odstęp 8 px (0.42em), waga 600
   i letter-spacing −0.3 px (components/HorizHeader.tsx). Sztywne 24 px przy
   mniejszym napisie sprawiały, że ikona wystawała nad i pod litery. */
.mark {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.nav .brand {
  display: flex;
  align-items: center;
  gap: 0.42em;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.016em;
  color: var(--text);
  text-decoration: none;
}
.nav .links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 15px;
}
.nav .links a {
  color: var(--text-sub);
  text-decoration: none;
}
.nav .links a:hover {
  color: var(--text);
}
/* Bieżąca strona: samo podświetlenie kolorem akcentu, bez podkreślenia.
   Akcent, a nie jaśniejsza szarość — różnica względem `--text-sub` musi być
   widoczna od razu, skoro jest jedynym sygnałem wizualnym. Dla czytnika ekranu
   niesie to `aria-current="page"`, więc informacja nie zależy od koloru. */
.nav .links a[aria-current='page'] {
  color: var(--accent);
}

/* Hamburger: na szerokim ekranie nie istnieje wizualnie ani dla czytnika —
   linki są widoczne inline, więc przycisk rozwijania byłby zbędnym elementem
   w kolejności fokusu. */
.nav-burger {
  display: none;
}

.lang {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  font-size: 13px;
}
.lang a,
.lang span {
  padding: 5px 12px;
  color: var(--text-muted);
  text-decoration: none;
}
.lang a:hover {
  color: var(--text);
}
.lang [aria-current='true'] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ─────────────────────────── hero ─────────────────────────── */

.hero {
  position: relative;
  /* Dolny padding ZERO, bo zrzut ma dochodzić do linii horyzontu i rozpływać się
     tuż nad nią. Powietrze pod treścią daje `.hero-copy`, nie sekcja — inaczej
     odstęp odsuwałby też telefon i cały efekt by przepadł. */
  padding: 76px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--deep) 0%, #182550 58%, #1f2c58 80%, var(--bg) 100%);
}

/* Gwiazdy gasnące ku dołowi — czysty CSS, żadnych obrazków. */
.hero .stars {
  position: absolute;
  inset: 0 0 40% 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 34% 8%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 22%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 76% 12%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 90% 26%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 22% 34%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 68% 38%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 45% 15%, rgba(255, 255, 255, 0.55), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
  mask-image: linear-gradient(180deg, #000 40%, transparent);
}

/* Łuna świtu tuż pod krawędzią sekcji. */
.hero .sun {
  position: absolute;
  left: 50%;
  bottom: -320px;
  transform: translateX(-50%);
  width: 1600px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    var(--warm-strong),
    var(--warm) 42%,
    rgba(0, 229, 255, 0.06) 62%,
    transparent 75%
  );
}

.horizon-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 229, 255, 0.55) 30%,
    rgba(255, 184, 0, 0.6) 50%,
    rgba(0, 229, 255, 0.55) 70%,
    transparent
  );
}

.hero .container {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  /* Kolumny „stoją na ziemi": telefon sięga dolnej krawędzi sekcji, a tekst
     kończy się wyżej dzięki własnemu paddingowi. */
  align-items: end;
}
/* Powietrze między notką o publikacji a linią horyzontu. Bez tego hero urywał
   się tuż pod nią i wyglądał na ucięty w pół zdania. */
.hero-copy {
  padding-bottom: 104px;
}
/* Nadtytuł hero: pełna nazwa ze sklepu. `.kicker` w sekcjach nie ma marginesu,
   bo odstęp daje tam `h2`; w hero `h1` jest zresetowany, więc odstęp trzeba
   dołożyć tutaj. */
.hero .kicker {
  margin-bottom: 12px;
}
.hero h1 {
  font-size: 50px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .sub {
  /* Bez `auto` po bokach: hero jest wyrównane DO LEWEJ, a przy `max-width: 46ch`
     automatyczny margines wyśrodkowywałby akapit w kolumnie i odsuwał go od
     krawędzi nagłówka. Na wąskim ekranie całą kolumnę centruje `text-align`
     na `.hero .container`, więc i tam nic nie trzeba tu zmieniać. */
  margin: 20px 0 30px;
  font-size: 18px;
  color: var(--text-sub);
  max-width: 46ch;
}
/* Status wydania to INFORMACJA, nie działanie — wcześniej wyglądał jak główny
   przycisk, którego nie da się kliknąć. Teraz notka z pulsującą kropką. */
.status-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 16px 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-sub);
  font-size: 14px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .status-dot {
    animation: status-pulse 2.6s ease-in-out infinite;
  }
  @keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
}

/* Przycisk drugorzędny — używany w sekcji prywatności i na stronie błędu.
   Hero nie ma już przycisków: pod informacją o publikacji idzie od razu zrzut. */
.btn-ghost {
  display: inline-block;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
}
.btn-ghost:hover {
  filter: brightness(1.06);
}

/* Ramka telefonu z prawdziwym zrzutem aplikacji (site/tools — patrz README).
   Zrzut jest JPEG-iem o znanych wymiarach, a <img> ma width/height, więc
   przeglądarka rezerwuje miejsce i hero nie przeskakuje po doładowaniu. */
/* Telefon „wschodzi nad horyzontem": większy niż wcześniej, dochodzi do dolnej
   krawędzi hero i rozpływa się maską tuż przed nią. Ten sam zabieg co na mobile,
   gdzie zrzut od początku był pokazywany częściowo — na desktopie daje obecność
   aplikacji bez rozdmuchiwania sekcji na dwa ekrany. */
.phone {
  width: 372px;
  margin: 0 auto -1px;
  max-height: 520px;
  overflow: hidden;
  border-radius: 48px 48px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 0;
  background: #0a0f22;
  padding: 11px 11px 0;
  /* Cień poza elementem znika pod maską — zostaje sama ciepła poświata. */
  box-shadow: 0 0 130px rgba(255, 166, 60, 0.14);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 78%, transparent);
}
.screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 38px 38px 0 0;
  background: var(--app-bg);
}

/* ─────────────────────────── sekcje ─────────────────────────── */

.section {
  position: relative;
  padding: 68px 0;
}
.section.alt {
  background: var(--soft);
}

/* Odkreślenie między sekcjami — cienka linia w motywie horyzontu, zanikająca
   po bokach. Powstało z dwóch powodów:
   · granica `features → privacy` była NIEWIDOCZNA, bo gradient sekcji
     prywatności startuje z odcienia sekcji poprzedniej;
   · z wyraźną granicą odstęp może być mniejszy — stąd 68 px zamiast 88 px,
     czyli 136 px między treścią sekcji zamiast 176 px.
   Selektor `.section + .section` pomija pierwszą sekcję po hero: tam linię
   rysuje już `.horizon-line`, mocniejsza i będąca częścią scenografii. */
.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  /* Pełna szerokość okna, jak `.horizon-line` pod hero — linia kończąca się na
     szerokości kontenera nie domykała sekcji, tylko wisiała w jej środku.
     Krycie ~3× niższe niż w hero i bez ciepłego ugru: tam linia jest częścią
     scenografii, tutaj ma tylko dyskretnie rozdzielać. */
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 229, 255, 0.1) 18%,
    rgba(0, 229, 255, 0.16) 50%,
    rgba(0, 229, 255, 0.1) 82%,
    transparent
  );
}
.kicker {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.section h2 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 10px 0 12px;
}
.section .lead {
  color: var(--text-sub);
  /* 58ch dobiera się do akapitu wielozdaniowego, ale nasze `lead` to jedno
     zdanie — łamało się na dwie linie, mimo że w kontenerze było wolne miejsce.
     Szersza miara zostawia je w jednej linii; w kolumnach (sekcja Prywatność)
     i tak ogranicza je szerokość kolumny. */
  max-width: 86ch;
  margin-bottom: 40px;
}



/* ─────────────────────────── prywatność ─────────────────────────── */

.privacy {
  background: linear-gradient(180deg, var(--soft), var(--bg));
}
.privacy .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.qa {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
}
.fact {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.fact .tick {
  color: var(--ready);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
.fact b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
}
.fact span {
  font-size: 13.5px;
  color: var(--text-sub);
}

/* ─────────────────────────── cennik ─────────────────────────── */

/* ── Podsumowanie funkcji w kartach ──
   Pierwszy widok sekcji: pięć kart tematycznych + karta rozwijająca pełną tabelę.
   Kropka niesie plan (szara = Free, akcent = tylko Pro); dla czytnika ekranu
   to samo mówi ukryty tekst przy każdej pozycji, bo sam kolor byłby informacją
   niedostępną. */
.features-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
}
.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-sub);
}
.legend .dot {
  margin-left: 12px;
}
.legend .dot:first-child {
  margin-left: 0;
}

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 9px;
  flex: none;
}
/* W pozycji listy kropka wyrównuje się do ŚRODKA pierwszego wiersza tekstu:
   `align-items: flex-start` stawiało ją przy górnej krawędzi, wyraźnie nad
   literami. Wartość = (wysokość wiersza − średnica) / 2. */
.fcard li .dot {
  margin-top: calc((1.45em - 9px) / 2);
}
.dot-free {
  background: var(--text-muted);
}
.dot-prem {
  background: var(--accent);
}

.fcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 4px;
}
.fcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 22px 22px;
}
.fcard-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.fcard ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 15.5px;
  color: var(--text);
}
.fcard li {
  display: flex;
  align-items: flex-start;
  line-height: 1.45;
}
.item-note {
  color: var(--text-muted);
}

/* Wejście do pełnej tabeli to LINK, nie kafel: kafel z przerywaną ramką czytał
   się jak szósta karta z treścią i mieszał się z pozostałymi. */
.fcards-more {
  margin-top: 20px;
  font-size: 15.5px;
}
.fcards-more a {
  text-decoration: none;
  font-weight: 600;
}
.fcards-more a:hover {
  text-decoration: underline;
}

/* ── Nakładka z pełną tabelą (mechanizm :target, zero JS) ──
   Wariant rozwijany w treści rozpychał sekcję na dwa ekrany i psuł rytm strony.
   Nakładka pokazuje tabelę NAD stroną i znika bez śladu w układzie. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal:target {
  opacity: 1;
  visibility: visible;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(6, 10, 24, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-card {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: 88vh;
  /* Przewija się WNĘTRZE, nie cała karta: nagłówek z krzyżykiem zostaje na
     miejscu, a padding karty jest widoczny u dołu. Gdy przewijała się karta,
     tabela dobiegała do samej krawędzi i nie było widać, gdzie nakładka się
     kończy ani czym się zaczyna. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 26px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-solid);
  box-shadow: var(--shadow-soft);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 4px;
}
/* Obszar przewijany: w obu osiach, bo tabela bywa szersza od telefonu. */
.modal-card .table-scroll {
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}
/* Nagłówki kolumn zostają widoczne przy przewijaniu — bez nich po kilku
   wierszach nie wiadomo, która kolumna to Free, a która Pro. Tło musi być
   nieprzezroczyste, inaczej wiersze przejeżdżałyby pod napisami. */
.modal-card .compare thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-solid);
}
.modal-title {
  font-weight: 600;
  font-size: 17px;
}
.modal-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-sub);
}
.modal-close:hover {
  color: var(--text);
}
.modal-close svg {
  width: 17px;
  height: 17px;
}
/* Tło nie przewija się pod otwartą nakładką — jak przy menu mobilnym. */
body:has(.modal:target) {
  overflow: hidden;
}

.fcards-note {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-muted);
}
/* W nocie kropka stoi w zdaniu, więc odstęp niosą już spacje wokół niej —
   `margin-right: 9px` z listy dokładał się do prawej spacji i robił dziurę
   dwa razy szerszą niż po lewej. */
.fcards-note .dot {
  margin-right: 0;
}

/* Tabela porównawcza planów. Zastąpiła sześć kart funkcji ORAZ dwie listy
   Free/Pro — te same informacje stały wcześniej w dwóch miejscach, więc
   strona mówiła to samo dwa razy i bez jasnego podziału.
   Zawartość wierszy odzwierciedla lib/premium.ts i lib/premiumPolicy.ts. */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.compare th,
.compare td {
  /* BEZ kreski w każdym wierszu. Szesnaście linii na krzyż z dwiema kolumnami
     znaczków robiło z zestawienia siatkę, w której nie było widać, co jest
     ważne. Rytm trzymają teraz odstępy, a linia oddziela tylko grupy. */
  padding: 11px 14px;
  text-align: left;
}
.compare thead th:not(:first-child) {
  text-align: center;
}
.compare thead th {
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Kolumna Pro wyróżniona kolorem nagłówka — bez tła, żeby tabela została
   lekka i nie zaczęła wyglądać jak cennik z ramkami. */
.compare thead th:last-child {
  color: var(--accent);
}
.compare tbody th {
  font-weight: 400;
  color: var(--text-sub);
}
.compare td {
  /* Szerokie kolumny wyśrodkowane pod nagłówkami: przy tabeli na pełną szerokość
     wąskie kolumny zbijały się w prawym narożniku i robiło się tam ciasno. */
  width: 11rem;
  text-align: center;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
  /* Wartości typu „bez limitu" mają zmieścić się w jednej linii — zawinięte
     na dwie rozbijały rytm wiersza i wyglądały jak błąd układu. */
  white-space: nowrap;
}
/* „✓" w kolumnie Free jest spokojne, akcent zostaje wyłącznie Pro. Wcześniej
   obie kolumny świeciły tym samym kolorem w wadze 700 i oko nie miało się
   o co zaczepić — a to kolumna Pro ma nieść różnicę. */
.compare td.yes {
  color: var(--text-sub);
  font-weight: 600;
}
.compare td:last-child.yes {
  color: var(--accent);
}
.compare td.no {
  color: var(--text-muted);
}
/* Nagłówek grupy: wiersz na całą szerokość, który dzieli 16 funkcji na sekcje.
   Osobne `tbody` per grupa, więc nagłówek jest powiązany z wierszami także
   strukturalnie (`scope="rowgroup"`), nie tylko wizualnie. */
/* Nazwa grupy NIESIE odcięcie: kreska jest jej podkreśleniem, nie osobną linią
   nad nią. Wcześniej oko miało do złożenia trzy rzeczy — linię, odstęp i napis;
   teraz nagłówek z kreską to jeden element, a wiersze pod nim wyraźnie do niego
   należą. Efekt: pięć kresek w całej tabeli, każda z własnym znaczeniem. */
.compare tr.group th {
  padding: 30px 14px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Pierwsza grupa styka się z nagłówkiem tabeli — tam pełny odstęp u góry
   robiłby dziurę pod „FUNKCJA / FREE / PREMIUM”. */
.compare tbody:first-of-type tr.group th {
  padding-top: 18px;
}
/* Pierwszy wiersz po kresce potrzebuje powietrza, żeby nie kleił się do niej. */
.compare tr.group + tr th,
.compare tr.group + tr td {
  padding-top: 15px;
}
/* Wiersz grupy nie jest danymi, więc nie podświetla się pod kursorem
   (reguła hover niżej celuje w `tr`, także w ten). */
.compare tbody tr.group:hover th {
  background: none;
}
/* Wiersz pod kursorem: przy 16 wierszach i dwóch kolumnach wartości łatwo
   zgubić się w poziomie. Tylko `hover: hover` — na dotyku „hover” zostaje
   przyklejony po tapnięciu i mylnie wskazywałby wiersz. */
@media (hover: hover) {
  .compare tbody tr:hover th,
  .compare tbody tr:hover td {
    /* Akcent, nie białe 4,5%: sekcja funkcji ma jaśniejsze tło (`.alt`),
       na którym biała mgiełka jest praktycznie niewidoczna. */
    background: var(--accent-soft);
  }
  .compare tbody tr:hover th {
    color: var(--text);
  }
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.plan {
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  position: relative;
}
.plan.hot {
  border-color: var(--accent-soft-border);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.08), var(--card-solid) 55%);
}
.plan .badge {
  position: absolute;
  top: -11px;
  left: 26px;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  color: var(--grad-text);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.plan h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan .price {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 2px;
}
.plan .per {
  font-size: 13.5px;
  color: var(--text-muted);
}
/* Zakres Pro jest identyczny w obu planach — mówimy to RAZ pod kartami,
   zamiast powtarzać listę funkcji przy każdej cenie (co wcześniej sugerowało,
   że plan roczny daje więcej). */
.plans-note {
  max-width: 86ch;
  margin-top: 18px;
  color: var(--text-sub);
  font-size: 14.5px;
}

.asterisk {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 16px;
  /* Nota drobnym druklem jest krótka, a font mały — przy 60ch wychodziły z niej
     trzy linie w połowie szerokości sekcji. Bez limitu ogranicza ją kontener. */
  max-width: none;
}

/* ─────────────────────────── stopka ─────────────────────────── */

.footer {
  border-top: 1px solid var(--divider);
  padding: 30px 0 40px;
  background: var(--deep);
}

/* ── domknięcie strony głównej: górna część stopki ──
   Landing kończy się JEDNYM blokiem zamiast sekcji „pytania” i stopki stojących
   jedno pod drugim z tymi samymi odnośnikami. Stopka jest tu więc wyższa i ma
   własny nagłówek — na podstronach prawnych zostaje sama linijka z wydawcą. */
/* Domknięcie strony głównej odcina się MOCNO: tą samą linią horyzontu, co pod
   hero (chłodne końce, ciepły środek). Zwykłe odkreślenie sekcji byłoby tu za
   ciche — to nie jest kolejna sekcja, tylko zejście z jasnego pasma treści
   w ciemne pasmo kontaktu i danych wydawcy. Klamra kompozycyjna: pierwsza taka
   linia zamyka hero, ostatnia otwiera stopkę.
   Podstrony prawne zostają przy zwykłej kresce stopki — tam nie ma pasm. */
.footer-rich {
  position: relative;
  border-top: 0;
  padding-top: 52px;
}
.footer-rich::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 229, 255, 0.55) 30%,
    rgba(255, 184, 0, 0.6) 50%,
    rgba(0, 229, 255, 0.55) 70%,
    transparent
  );
}
.footer-cta {
  text-align: center;
}
.footer-cta h2 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.footer-cta p {
  margin: 12px auto 0;
  max-width: 60ch;
  color: var(--text-sub);
}
.footer-docs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
/* Adres pomocy w osobnej linii, nie doklejony na końcu zdania: to jedyna rzecz
   w tym bloku, którą ktoś ma skopiować albo kliknąć. */
.footer-cta .footer-mail {
  /* `auto` po bokach jest konieczne: akapity w tym bloku mają `max-width: 60ch`,
     więc bez niego pudełko przykleja się do lewej mimo `text-align: center`. */
  margin: 20px auto 30px;
  font-size: 17px;
}
/* Nota o wydawcy zamyka blok — ta sama waga co w stopce podstron, tylko
   wyśrodkowana i bez własnego rzędu. */
.footer-cta .footer-note {
  margin-top: 36px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.footer-note a {
  color: var(--text-muted);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--text-muted);
}
/* Celowo `.footer-links`, nie `.footer nav`: przełącznik języka też jest
   elementem <nav>, więc łapał ten odstęp i rozpychał się o 20 px względem
   bliźniaka w nagłówku. */
/* Zawijanie jest konieczne, nie kosmetyczne: stopka powtarza pełną nawigację
   (5 pozycji), a polskie etykiety w jednym rzędzie rozpychały stronę w poziomie
   na ekranie 390 px. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
}
.footer-links a {
  color: var(--text-sub);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--text);
}
.footer-links a[aria-current='page'] {
  color: var(--accent);
}

/* ─────────────────────────── strony prawne ─────────────────────────── */

.legal {
  max-width: 760px;
  margin: 0 auto;
  /* Dolny odstęp niewielki: stopka ma własne 30 px paddingu i kreskę u góry,
     więc razem z marginesem ostatniego akapitu wychodzi wystarczające
     oddzielenie. Przy 72 px pod krótkim dokumentem (Kontakt) zostawała
     wyraźna dziura. */
  padding: 8px 28px 28px;
}
.legal h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.legal .updated {
  color: var(--text-muted);
  font-size: 14px;
  margin: 8px 0 30px;
}
.prose {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(242, 245, 251, 0.9);
}
/* Dokumenty prawne zawierają gołe URL-e (np. do zarządzania subskrypcją).
   Bez tego rozpychają stronę w poziomie na wąskich ekranach. */
.prose a {
  overflow-wrap: anywhere;
}
.prose h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 38px 0 12px;
  color: var(--text);
}
.prose h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 26px 0 10px;
  color: var(--text);
}
.prose p {
  margin: 0 0 14px;
}
.prose ul,
.prose ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.prose li {
  margin-bottom: 6px;
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 0 0 18px;
  color: var(--text-on-glass);
  font-size: 15.5px;
}
.prose blockquote p:last-child {
  margin-bottom: 0;
}
.prose strong {
  color: var(--text);
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 32px 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 15px;
}
.prose th,
.prose td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
}
.prose th {
  background: var(--card);
  font-weight: 600;
}
.prose code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  padding: 1px 6px;
}
/* Długie tabele nie mogą rozpychać strony w poziomie. */
.table-scroll {
  overflow-x: auto;
}

/* ═══════════════ 404 — „poza horyzontem” ═══════════════
   Motyw z nazwy marki: zero w „404” jest słońcem wschodzącym nad linią
   horyzontu, w tej samej scenerii co hero (noc u góry, świt na dole).
   Cała dekoracja to CSS — żadnych obrazów ani skryptów. */

/* Bez paska marki u góry: scena dostaje całe okno i jest w nim wyśrodkowana.
   `svh` zamiast `vh`, żeby na telefonie nie liczyć chowającego się paska
   adresu. `min-height` (nie `height`) pozwala treści rosnąć, gdy okno jest
   niskie — wtedy sekcja po prostu się wydłuża, nic nie zostaje ucięte. */
.notfound {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 64px 28px 40px;
  background: linear-gradient(180deg, var(--deep) 0%, #182550 55%, #1f2c58 78%, var(--bg) 100%);
}

/* Marka jako sygnatura pod sceną — jak podpis pod obrazem, nie pasek nawigacji.
   Nadal jest linkiem na stronę główną. */
.nf-signature {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42em;
  margin: 56px auto 0;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.016em;
  color: var(--text-sub);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.nf-signature:hover {
  color: var(--text);
  opacity: 1;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .nf-signature {
    transition: none;
  }
}

.nf-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nf-stars {
  position: absolute;
  inset: 0 0 45% 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.2px 1.2px at 14% 22%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1px 1px at 33% 10%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 57% 26%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 74% 14%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 30%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(1px 1px at 24% 38%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 66% 42%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 45% 17%, rgba(255, 255, 255, 0.55), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, transparent);
}
.nf-scene {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

/* Łuna świtu wyśrodkowana DOKŁADNIE na linii horyzontu — stąd kotwiczenie do
   dolnej krawędzi sceny i przesunięcie o połowę własnej wysokości. Wcześniej
   siedziała na procentach wysokości sekcji i odrywała się od słońca. */
.nf-glow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: min(900px, 150%);
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    var(--warm-strong),
    var(--warm) 42%,
    rgba(0, 229, 255, 0.06) 64%,
    transparent 78%
  );
}

.nf-glyph {
  position: relative; /* nad łuną */
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(2px, 1vw, 10px);
  font-size: clamp(92px, 20vw, 190px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
}
/* Czwórki chłodne, jak akcent aplikacji. */
.nf-glyph > span {
  background: linear-gradient(180deg, #d8fbff, var(--grad-start));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Zero = wschodzące słońce: cyjan u góry, ciepły ugier u dołu, plus poświata. */
.nf-glyph .nf-sun {
  background: linear-gradient(180deg, var(--grad-end) 18%, #ffd28a 60%, var(--warning) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 26px rgba(255, 184, 0, 0.4));
}

/* Linia horyzontu przecinająca scenę, z ciepłym środkiem pod słońcem. */
.nf-horizon {
  position: relative; /* nad łuną, żeby linia była wyraźna */
  display: block;
  height: 2px;
  margin-top: -0.08em;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 229, 255, 0.65) 18%,
    #ffd28a 50%,
    rgba(0, 229, 255, 0.65) 82%,
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 184, 0, 0.55), 0 0 44px rgba(0, 229, 255, 0.22);
}

/* Komunikaty pod horyzontem — oba języki równorzędnie. */
.nf-blocks {
  position: relative;
  margin-top: 44px;
}
.nf-block {
  max-width: 46ch;
  margin: 0 auto;
}
.nf-block + .nf-block {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.nf-lead {
  color: var(--text-sub);
  margin-bottom: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  .nf-glow {
    animation: nf-breathe 11s ease-in-out infinite alternate;
  }
  @keyframes nf-breathe {
    from {
      opacity: 0.75;
      transform: translate(-50%, 50%) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 50%) scale(1.04);
    }
  }
}

/* ─────────────────────────── responsywność ─────────────────────────── */

@media (max-width: 900px) {
  /* Odstępy międzysekcyjne to suma dolnego paddingu jednej sekcji i górnego
     następnej. Na desktopie 120 + 64 px czyta się jak oddech; na ekranie 844 px
     to była ćwiartka widoku pustego tła między hero a pierwszą sekcją. */
  .hero {
    padding: 56px 0 48px;
  }
  .hero-copy {
    padding-bottom: 0;
  }
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    /* Zrzut ma iść ZARAZ pod informacją o publikacji, więc pionowa przerwa
       siatki (48 px z widoku szerokiego) tu nie obowiązuje — odstęp wynika
       już z marginesu samego kadru. */
    gap: 0;
  }
  .hero h1 {
    font-size: 38px;
  }
  .hero .sub {
    margin-inline: auto;
  }
  /* Na telefonie NIE pokazujemy makiety telefonu w telefonie — 290 px ramki na
     ekranie 390 px czytało się jak zabawka, a interfejs w środku był mniejszy
     niż w rzeczywistości. Zamiast tego kadr: szerszy zrzut, obcięty u dołu
     i wygaszony w tło, jakby urządzenie wychodziło poza ekran. Dzięki temu
     widoczna jest ta część, która sprzedaje produkt (saldo, postęp, CTA),
     w naturalnej skali. */
  .phone {
    /* 100% kolumny, nie procent ekranu: kolumna to już szerokość ekranu minus
       padding kontenera, więc procent liczyłby się podwójnie i kadr wychodził
       węższy, niż zakładano. */
    width: min(340px, 100%);
    margin: 24px auto 0;
    max-height: 400px;
    overflow: hidden;
    padding: 9px 9px 0;
    border-bottom: 0;
    border-radius: 40px 40px 0 0;
    /* Cień poza elementem i tak zniknąłby pod maską — zostaje sama poświata. */
    box-shadow: 0 0 90px rgba(255, 166, 60, 0.1);
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent);
    mask-image: linear-gradient(180deg, #000 68%, transparent);
  }
  .screen {
    border-radius: 33px 33px 0 0;
  }
  .privacy .wrap {
    grid-template-columns: 1fr;
    /* W jednej kolumnie `gap` z desktopu (48 px) dzieli tekst od kafli, a nie
       kolumny od siebie — razem z marginesem leada dawało 66 px dziury. */
    gap: 20px;
  }
  /* Wąski ekran: [marka] … [hamburger] [wybór języka do prawej].
     Pasek zostaje jednorzędowy, a linki rozwijają się pod nim po kliknięciu. */
  .nav {
    flex-wrap: wrap;
    gap: 12px;
  }
  .nav .brand {
    margin-right: auto;
  }
  .nav-burger {
    display: grid;
    place-items: center;
    order: 2;
    width: 38px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-sub);
    cursor: pointer;
  }
  .nav-burger svg {
    width: 20px;
    height: 20px;
  }
  .nav-burger:hover {
    color: var(--text);
  }
  .nav .lang {
    order: 3;
  }

  /* Pasek zostaje na ekranie przy przewijaniu — dostęp do nawigacji nie może
     zależeć od powrotu na samą górę strony.
     UWAGA: żadnego `backdrop-filter`/`transform` na nagłówku. Nakładka menu jest
     jego potomkiem i ma `position: fixed`; taka właściwość na przodku tworzy nowy
     kontener odniesienia i przycięłaby nakładkę do wysokości paska. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--deep);
    border-bottom: 1px solid var(--divider);
  }

  /* Cel odnośnika nie może schować się pod przyklejonym paskiem. */
  [id] {
    scroll-margin-top: 76px;
  }

  /* `.privacy` ma własny padding-bottom (klasa+klasa), więc ogólne
     `.section { padding: 40px 0 }` z tego media query go nie dosięga. */
  .footer-rich {
    padding-top: 38px;
  }
  /* BEZ `padding-bottom`/`margin-bottom`: pochodziły z czasów, gdy domknięcie
     i rząd stopki były osobnymi blokami. Nota o wydawcy siedzi teraz WEWNĄTRZ
     `.footer-cta`, więc doklejały się do paddingu stopki i zostawiały ~98 px
     pustego pod ostatnią linijką. */
  .footer-cta h2 {
    font-size: 23px;
  }

  /* Stopka bez nawigacji: te same pozycje są w przyklejonym pasku, dostępne
     z każdego miejsca strony. Dopóki pasek chował menu na mobile, stopka była
     JEDYNĄ drogą do tych linków — teraz tylko je dubluje (i zawijała się na
     wąskim ekranie). Zostaje nota o prawach i kontakt. */
  .footer-links {
    display: none;
  }
  /* Przełącznik języka też znika ze stopki: na wąskim ekranie pasek u góry jest
     przyklejony, więc ten sam wybór jest w zasięgu z każdego miejsca strony.
     W stopce zostaje sama nota o wydawcy — wyśrodkowana, bo jest już jedyna
     i przy `space-between` wisiałaby przy lewej krawędzi. */
  .footer-meta .lang {
    display: none;
  }
  .footer-meta {
    justify-content: center;
    text-align: center;
  }

  /* Menu jako nakładka na całą stronę.
     UWAGA: nakładka jest DZIECKIEM `.nav`, więc jej z-index działa wewnątrz
     kontekstu stackingu paska — samo podniesienie `.nav` nie wystarcza.
     Elementy paska muszą dostać własny, wyższy z-index, inaczej nakładka
     przykrywa hamburgera i przechwytuje kliknięcie, którym miała się zamknąć. */
  .nav {
    z-index: 60;
  }
  .nav .brand,
  .nav-burger,
  .nav .lang {
    position: relative;
    z-index: 70;
  }
  .nav .links {
    position: fixed;
    inset: 0;
    z-index: 50;
    margin-left: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 22px;
    background: var(--deep);
    /* Nakładka jest nieprzezroczysta, ale delikatne rozmycie ratuje czytelność,
       gdyby przeglądarka zignorowała tło (np. przy wymuszonych kolorach). */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .nav .links:target {
    opacity: 1;
    visibility: visible;
  }
  .nav .links a {
    padding: 14px 20px;
  }
  /* W nakładce pozycje są duże i rozstrzelone na pełnym ekranie, więc sam kolor
     tekstu ginie. Bieżąca strona dostaje pigułkę w akcencie — ten sam sygnał,
     co w przełączniku języka obok. */
  .nav .links a[aria-current='page'] {
    border-radius: 999px;
    background: var(--accent-soft);
  }

  /* „×” pokazuje się tylko przy otwartej nakładce i podmienia hamburgera.
     Zamknięcie prowadzi do `#`, czyli do braku dopasowania `:target`. */
  .nav-close {
    display: none;
  }
  .nav:has(.links:target) .nav-open {
    display: none;
  }
  .nav:has(.links:target) .nav-close {
    display: grid;
  }

  /* Tło nie przewija się pod otwartą nakładką — bez JavaScriptu.
     W przeglądarkach bez `:has()` nakładka po prostu przewinie się razem
     ze stroną; degradacja jest łagodna. */
  body:has(.nav .links:target) {
    overflow: hidden;
  }
  .section {
    padding: 40px 0;
  }
  /* Karty jedna pod drugą; przy dwóch kolumnach pozycje typu „Import z mBanku,
     PKO BP, ING, Santandera" łamały się na trzy wiersze. */
  .fcards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .fcards .fcard:last-of-type,
  .fcards .fcard:last-of-type ul {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  /* Nakładka oddaje tabeli każdy piksel szerokości: przy paddingu z desktopu
     (24 + 26 px z każdej strony) kolumna Pro wystawała o 22 px na ekranie
     360 px — zmierzone bramką audytu. */
  .modal {
    padding: 12px;
  }
  .modal-card {
    padding: 16px 14px 18px;
    max-height: 92vh;
  }
  .modal-card .table-scroll {
    margin: 0 -14px;
    padding: 0 14px;
  }
  .features-head {
    display: block;
  }
  /* Legenda ląduje między nagłówkiem a leadem, więc potrzebuje odstępu z DOŁU:
     bez niego zdanie „Plan darmowy nie ma limitu…" kleiło się do kropek
     i czytało jak ich podpis. */
  .legend {
    margin: 10px 0 18px;
  }
  .section .lead {
    margin-bottom: 28px;
  }
  .section h2 {
    font-size: 27px;
  }
  .legal h1 {
    font-size: 30px;
  }

  /* Karty cen stoją jedna nad drugą, a odznaka „oszczędzasz" wystaje 10 px
     ponad kartę — przy odstępie 18 px zostawało między nimi 8 px i robiło się
     ciasno. Na szerokim ekranie karty są obok siebie, więc odznaka nie koliduje
     i tam odstęp zostaje bez zmian. */
  .plans {
    gap: 34px;
  }

  /* Tabela planów MUSI zmieścić się w szerokości ekranu. Przy 15 px i pełnym
     paddingu kolumna „Pro" wychodziła za krawędź i trzeba było przewijać
     w poziomie, żeby ją zobaczyć — czyli najważniejsza kolumna była ukryta. */
  .compare {
    font-size: 14px;
  }
  .compare th,
  .compare td {
    padding: 11px 6px;
  }
  .compare th:first-child,
  .compare td:first-child {
    padding-left: 0;
  }
  .compare td {
    width: 5.4rem;
  }
  .compare thead th {
    font-size: 11.5px;
    letter-spacing: 0.05em;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .sun {
    animation: glow 10s ease-in-out infinite alternate;
  }
  @keyframes glow {
    from {
      opacity: 0.8;
    }
    to {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* Nakładka menu pojawia się natychmiast — ale `visibility` musi nadal
     przeskakiwać skokowo, inaczej menu zostałoby klikalne po zamknięciu. */
  .nav .links {
    transition: none;
  }
}