/* Lasernomia: arkusz glowny. Kolejnosc: tokeny, kroje, podstawy, uklad, elementy.
   Zasada nadrzedna: liczba ma byc czytelna, reszta ma jej nie przeszkadzac. */

@import url("tokeny.css");
@import url("kroje.css");

/* =========================== PODSTAWY =========================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ln-tlo);
  color: var(--ln-atrament);
  font-family: var(--ln-pismo-tresc);
  font-size: var(--ln-tresc);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--ln-pismo-naglowki);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--ln-h1); }
h2 { font-size: var(--ln-h2); margin-block: var(--ln-odstep-8) var(--ln-odstep-4); }
h3 { font-size: var(--ln-h3); margin-block: var(--ln-odstep-6) var(--ln-odstep-3); font-weight: 600; }

p, ul, ol { margin-block-end: var(--ln-odstep-4); }
p { text-wrap: pretty; }
li { margin-block-end: var(--ln-odstep-2); }
ul, ol { padding-inline-start: 1.35rem; }
li::marker { color: var(--ln-akcent-tekst); }

strong { font-weight: 600; }

a { color: var(--ln-akcent-tekst); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--ln-akcent-cta);
  outline-offset: 2px;
  border-radius: 2px;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* =========================== UKLAD =========================== */
.ln-kontener { width: var(--ln-szer); margin-inline: auto; }

.ln-sekcja { padding-block: var(--ln-sekcja); }
.ln-sekcja--pas { background: var(--ln-tlo-pas); }
.ln-sekcja--ciemna { background: var(--ln-atrament); color: #FFF; }
.ln-sekcja--ciemna h2, .ln-sekcja--ciemna h3 { color: #FFF; }
.ln-sekcja--ciemna a { color: #F6C99A; }

/* Tresc artykulu: pelna szerokosc kontenera, lewo-wyrownana.
   Zero max-width w ch na tekscie: to twardy standard agencji. */
.ln-tresc > * { max-width: none; }

/* =========================== NAGLOWEK =========================== */
.ln-naglowek {
  background: var(--ln-tlo);
  border-block-end: 1px solid var(--ln-linia);
  position: sticky; top: 0; z-index: 50;
}
.ln-naglowek__rzad {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ln-odstep-6); min-height: 4rem;
}
.ln-logo {
  font-family: var(--ln-pismo-naglowki); font-weight: 700; font-size: 1.2rem;
  color: var(--ln-atrament); text-decoration: none; letter-spacing: -0.02em;
}
.ln-logo:hover { color: var(--ln-atrament); }
.ln-logo b { color: var(--ln-akcent-cta); font-weight: 700; }

/* Menu to NAPISY, nie kafelki: bez tla, bez obwodki, bez podkreslenia.
   Po najechaniu zmienia sie wylacznie barwa napisu, nic nie podskakuje. */
.ln-menu { display: flex; gap: var(--ln-odstep-6); list-style: none; margin: 0; padding: 0; }
.ln-menu a {
  color: var(--ln-atrament); text-decoration: none; font-size: 0.97rem;
  transition: color var(--ln-plynnie);
}
.ln-menu a:hover, .ln-menu a[aria-current="page"] { color: var(--ln-akcent-cta); }

.ln-hamburger { display: none; }

@media (max-width: 60rem) {
  .ln-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; background: none; border: 0; cursor: pointer;
    color: var(--ln-atrament);
  }
  .ln-menu {
    position: fixed; inset: 0; background: var(--ln-tlo);
    flex-direction: column; justify-content: center; align-items: center;
    gap: var(--ln-odstep-8); font-size: 1.25rem;
    transform: translateX(100%); transition: transform var(--ln-plynnie);
    z-index: 60;
  }
  body.ln-menu-otwarte .ln-menu { transform: translateX(0); }
  body.ln-menu-otwarte { overflow: hidden; }
  .ln-menu a { min-height: 44px; display: flex; align-items: center; }
}

/* =========================== HERO =========================== */
/* Hero nie ma zdjecia. Ma kalkulator, bo obietnica marki jest liczbowa. */
.ln-hero { padding-block: clamp(2rem, 4vw, 3.5rem) var(--ln-sekcja); }
.ln-hero__siatka { display: grid; gap: var(--ln-odstep-8); align-items: start; }
@media (min-width: 62rem) {
  .ln-hero__siatka { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 4vw, 3.5rem); }
}
.ln-nadtytul {
  font-family: var(--ln-pismo-naglowki); font-size: var(--ln-meta); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ln-tekst2);
  margin-block-end: var(--ln-odstep-3);
}
.ln-hero__lead { font-size: 1.15rem; color: var(--ln-tekst2); margin-block-start: var(--ln-odstep-4); }

/* =========================== PASEK ZAUFANIA =========================== */
.ln-zaufanie { display: grid; gap: var(--ln-odstep-4); }
@media (min-width: 48rem) { .ln-zaufanie { grid-template-columns: repeat(4, 1fr); } }
.ln-zaufanie__poz { border-inline-start: 3px solid var(--ln-akcent); padding-inline-start: var(--ln-odstep-4); }
.ln-zaufanie__liczba {
  font-family: var(--ln-pismo-naglowki); font-weight: 700; font-size: 1.6rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; display: block;
}
.ln-zaufanie__opis { font-size: var(--ln-meta); color: var(--ln-tekst2); }

/* =========================== STEMPEL DANYCH =========================== */
/* Kazda liczba na tej stronie mowi, skad jest i z kiedy. To nasza przewaga. */
.ln-stempel {
  font-size: 0.8125rem; color: var(--ln-tekst2); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: var(--ln-odstep-2);
}
.ln-stempel::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ln-akcent); flex: none;
}

/* =========================== KARTA PRODUKTU =========================== */
.ln-karta-produktu {
  background: var(--ln-karta); border: 1px solid var(--ln-linia);
  border-radius: var(--ln-promien); padding: var(--ln-odstep-6);
  display: grid; gap: var(--ln-odstep-4); box-shadow: var(--ln-cien);
}
@media (min-width: 48rem) {
  .ln-karta-produktu { grid-template-columns: 2fr 3fr; align-items: start; gap: var(--ln-odstep-8); }
}
.ln-karta-produktu__nazwa { font-family: var(--ln-pismo-naglowki); font-size: var(--ln-h3); margin: 0; }
.ln-karta-produktu__meta { font-size: var(--ln-meta); color: var(--ln-tekst2); }
.ln-cena {
  font-family: var(--ln-pismo-naglowki); font-weight: 700; font-size: var(--ln-kwota);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1;
}
.ln-cena__zestaw { display: block; font-size: var(--ln-meta); font-weight: 400; color: var(--ln-tekst2); font-family: var(--ln-pismo-tresc); letter-spacing: 0; }

/* Wiersz "na czym zarabiasz": to jest powod istnienia tej strony */
.ln-zarobek { list-style: none; padding: 0; margin-block: var(--ln-odstep-4); }
.ln-zarobek li { display: flex; justify-content: space-between; gap: var(--ln-odstep-4); padding-block: var(--ln-odstep-2); border-block-end: 1px dashed var(--ln-linia); }
.ln-zarobek b { font-variant-numeric: tabular-nums; color: var(--ln-zysk); white-space: nowrap; }

/* =========================== PRZYCISKI I AFILIACJA =========================== */
.ln-cta { display: grid; gap: var(--ln-odstep-3); }
.ln-przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ln-odstep-2);
  min-height: 48px; padding: var(--ln-odstep-3) var(--ln-odstep-6);
  font-family: var(--ln-pismo-naglowki); font-weight: 600; font-size: 1rem;
  border-radius: var(--ln-promien); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background var(--ln-plynnie), border-color var(--ln-plynnie);
}
.ln-przycisk--glowny { background: var(--ln-akcent-cta); color: #FFF; }
.ln-przycisk--glowny:hover { background: var(--ln-akcent-cta-h); color: #FFF; }
.ln-przycisk--drugi { background: transparent; color: var(--ln-atrament); border-color: var(--ln-linia-mocna); }
.ln-przycisk--drugi:hover { border-color: var(--ln-atrament); color: var(--ln-atrament); }

/* Oznaczenie afiliacji jest elementem zaufania, nie drobnym drukiem do ukrycia. */
.ln-partnerski {
  font-size: var(--ln-meta); color: var(--ln-tekst2); line-height: 1.5;
}
.ln-partnerski strong { color: var(--ln-atrament); font-weight: 600; }

.ln-baner-reklamowy {
  background: var(--ln-tlo-pas); border: 1px solid var(--ln-linia);
  border-inline-start: 4px solid var(--ln-akcent);
  border-radius: var(--ln-promien); padding: var(--ln-odstep-4) var(--ln-odstep-6);
  font-size: var(--ln-meta); margin-block-end: var(--ln-odstep-6);
}

/* =========================== TABELE =========================== */
.ln-tabela-pojemnik { overflow-x: auto; border: 1px solid var(--ln-linia); border-radius: var(--ln-promien); background: var(--ln-karta); }
.ln-tabela { border-collapse: collapse; width: 100%; font-size: 0.95rem; min-width: 34rem; }
.ln-tabela th {
  font-family: var(--ln-pismo-naglowki); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ln-tekst2);
  text-align: start; padding: var(--ln-odstep-3) var(--ln-odstep-4);
  background: var(--ln-tlo-pas); border-block-end: 2px solid var(--ln-linia-mocna);
  white-space: nowrap; position: sticky; top: 0;
}
.ln-tabela td { padding: var(--ln-odstep-3) var(--ln-odstep-4); border-block-end: 1px solid var(--ln-linia); vertical-align: top; }
.ln-tabela tr:last-child td { border-block-end: 0; }
.ln-tabela .ln-l { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln-tabela .ln-zysk-l { color: var(--ln-zysk); font-weight: 600; }
.ln-tabela .ln-koszt-l { color: var(--ln-koszt); }

/* Wiersz zwrotu: znak firmowy serwisu, bo nikt inny w tej niszy go nie liczy */
.ln-tabela tr.ln-zwrot td { background: var(--ln-akcent-slad); font-weight: 600; }

.ln-podpis-tabeli { font-size: var(--ln-meta); color: var(--ln-tekst2); margin-block-start: var(--ln-odstep-2); }

/* =========================== KALKULATOR =========================== */
.ln-kalkulator {
  background: var(--ln-karta); border: 1px solid var(--ln-linia);
  border-radius: var(--ln-promien); box-shadow: var(--ln-cien); overflow: hidden;
}
.ln-kalkulator__belka {
  background: var(--ln-atrament); color: #FFF;
  padding: var(--ln-odstep-3) var(--ln-odstep-6);
  font-family: var(--ln-pismo-naglowki); font-weight: 600; font-size: 0.95rem;
  display: flex; justify-content: space-between; align-items: center; gap: var(--ln-odstep-4);
}
.ln-kalkulator__belka span { font-family: var(--ln-pismo-tresc); font-weight: 400; font-size: 0.8125rem; opacity: .85; }
.ln-kalkulator__ciało { padding: var(--ln-odstep-6); display: grid; gap: var(--ln-odstep-4); }
.ln-pole { display: grid; gap: var(--ln-odstep-2); }
.ln-pole label { font-size: var(--ln-meta); font-weight: 600; }
.ln-pole select, .ln-pole input {
  min-height: 44px; padding: var(--ln-odstep-2) var(--ln-odstep-3);
  border: 1px solid var(--ln-linia-mocna); border-radius: var(--ln-promien);
  font: inherit; font-size: 1rem; background: #FFF; color: var(--ln-atrament); width: 100%;
}
.ln-wyniki { display: grid; gap: var(--ln-odstep-3); border-block-start: 1px solid var(--ln-linia); padding-block-start: var(--ln-odstep-4); }
.ln-wynik { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ln-odstep-4); }
.ln-wynik__etykieta { font-size: var(--ln-meta); color: var(--ln-tekst2); }
.ln-wynik__wartosc {
  font-family: var(--ln-pismo-naglowki); font-weight: 700; font-size: 1.35rem;
  font-variant-numeric: tabular-nums; color: var(--ln-akcent-cta); white-space: nowrap;
}
.ln-wynik--glowny .ln-wynik__wartosc { font-size: var(--ln-kwota); }
.ln-komunikat { font-size: var(--ln-meta); color: var(--ln-koszt); }
.ln-zalozenia { font-size: 0.8125rem; color: var(--ln-tekst2); border-block-start: 1px dashed var(--ln-linia); padding-block-start: var(--ln-odstep-3); }

/* =========================== OPINIE UZYTKOWNIKOW =========================== */
.ln-opinia {
  border-inline-start: 3px solid var(--ln-linia-mocna);
  padding-inline-start: var(--ln-odstep-4); margin-block: var(--ln-odstep-4);
}
.ln-opinia--krytyczna { border-inline-start-color: var(--ln-koszt); }
.ln-opinia p { margin-block-end: var(--ln-odstep-2); }
.ln-opinia__oryginal { font-size: var(--ln-meta); color: var(--ln-tekst2); font-style: italic; }
.ln-opinia__zrodlo { font-size: 0.8125rem; color: var(--ln-tekst2); }

/* =========================== STOPKA =========================== */
.ln-stopka { background: var(--ln-atrament); color: #C9CFD9; padding-block: var(--ln-sekcja); margin-block-start: var(--ln-sekcja); }
.ln-stopka a { color: #F6C99A; }
.ln-stopka__siatka { display: grid; gap: var(--ln-odstep-8); }
@media (min-width: 48rem) { .ln-stopka__siatka { grid-template-columns: 2fr 1fr 1fr; } }
.ln-stopka h3 { color: #FFF; font-size: 0.9rem; text-transform: uppercase; letter-spacing: .07em; margin-block: 0 var(--ln-odstep-3); }
.ln-stopka ul { list-style: none; padding: 0; }

/* =========================== DROBIAZGI =========================== */
.ln-pomin {
  position: absolute; inset-inline-start: -9999px;
}
.ln-pomin:focus {
  inset-inline-start: var(--ln-odstep-4); top: var(--ln-odstep-4);
  background: var(--ln-atrament); color: #FFF; padding: var(--ln-odstep-3) var(--ln-odstep-4);
  z-index: 100; border-radius: var(--ln-promien);
}

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

/* Nakladka menu (z-index 60) siedzi w tym samym kontekscie co naglowek
   i przykrywala wlasny przycisk zamkniecia. Hamburger sluzy do otwarcia
   I do zamkniecia, wiec musi zostac nad nia. Bez tej reguly menu zamyka
   sie tylko klawiszem Escape albo kliknieciem w odnosnik, czyli jest
   polzepsute na telefonie. */
@media (max-width: 60rem) {
  body.ln-menu-otwarte .ln-hamburger { position: relative; z-index: 70; }
}

/* =========================== FAQ =========================== */
/* details/summary zamiast JavaScriptu: dziala bez skryptu i jest dostepne z klawiatury */
.ln-faq details {
  border-block-end: 1px solid var(--ln-linia);
  padding-block: var(--ln-odstep-3);
}
.ln-faq summary {
  cursor: pointer; font-weight: 600; font-family: var(--ln-pismo-naglowki);
  list-style: none; display: flex; justify-content: space-between; gap: var(--ln-odstep-4);
  min-height: 44px; align-items: center;
}
.ln-faq summary::-webkit-details-marker { display: none; }
.ln-faq summary::after {
  content: "+"; color: var(--ln-akcent-cta); font-size: 1.4rem; line-height: 1; flex: none;
}
.ln-faq details[open] summary::after { content: "\2212"; }
.ln-faq details[open] summary { margin-block-end: var(--ln-odstep-3); }

/* =========================== SUWAK KALKULATORA =========================== */
.ln-pole input[type="range"] { padding: 0; min-height: 44px; accent-color: var(--ln-akcent-cta); }
.ln-pole output { font-variant-numeric: tabular-nums; font-weight: 600; }

/* =========================== OSPRZET =========================== */
.ln-osprzet { margin-block: var(--ln-odstep-8); }

/* =========================== KALKULATOR: UKLAD WYNIKOW =========================== */
/* Stempel SZACUNEK stoi raz, pod blokiem wynikow. Przy kazdym wyniku z osobna
   powtarzal to samo zdanie trzy razy i spychal liczby na lewo: sprawdzone na
   zrzucie 1440 px. W kodzie zostaje dla czytnikow ekranu. */
.ln-wynik .ln-stempel,
.ln-wynik [data-ln-stempel] {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.ln-wynik {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: var(--ln-odstep-4); position: relative;
}
.ln-wynik__etykieta { line-height: 1.35; }
.ln-podstawa {
  font-size: 0.8125rem; color: var(--ln-tekst2);
  border-block-start: 1px dashed var(--ln-linia);
  padding-block-start: var(--ln-odstep-3); margin-block-end: var(--ln-odstep-2);
}

/* =========================== SCIEZKI PERSON W HERO =========================== */
.ln-sciezki { list-style: none; padding: 0; margin-block-start: var(--ln-odstep-8); display: grid; gap: var(--ln-odstep-4); }
.ln-sciezki li { display: grid; gap: var(--ln-odstep-1); padding-block-end: var(--ln-odstep-4); border-block-end: 1px solid var(--ln-linia); }
.ln-sciezki li:last-child { border-block-end: 0; }
.ln-sciezki a { font-family: var(--ln-pismo-naglowki); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.ln-sciezki a:hover { text-decoration: underline; }
.ln-sciezki span { font-size: var(--ln-meta); color: var(--ln-tekst2); }

/* =========================== HUB DZIALU =========================== */
/* Hub czyta sie wzrokiem, po tytulach. Kafel niesie tylko to, co pomaga wybrac
   tekst, i nie ma zdjecia: obrazek nie pomaga w wyborze artykulu, a doklada wagi
   stronie, ktora ma sie otworzyc natychmiast.

   Nazwy klas koncza sie na -art (kafel ARTYKULU) i NIE WOLNO ich skracac do
   .ln-kafel. Katalog maszyn nizej w tym pliku ma wlasny blok .ln-kafel z innym
   ukladem; przy jednej nazwie wygrywa blok stojacy nizej i kafle huba po cichu
   traca hover oraz swoja siatke. Sprawdzone pomiarem 29.08.2026: hover na hubie
   nie zmienial ani ramki, ani barwy tytulu, mimo poprawnej reguly wyzej. */

/* Tekst wprowadzajacy: ta sama szerokosc kontenera co reszta serwisu.
   Zadnego zwezania kolumny prozy, to twardy standard agencji. */
.ln-hub-wstep > * { max-width: none; }

/* --- trzy wejscia do dzialu --- */
.ln-hub-start {
  list-style: none; padding: 0; margin: 0;
  counter-reset: ln-krok; display: grid; gap: var(--ln-odstep-4);
}
.ln-hub-start li {
  counter-increment: ln-krok;
  display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--ln-odstep-4);
  align-items: start;
  padding-block-end: var(--ln-odstep-4);
  border-block-end: 1px solid var(--ln-linia-mocna);
  margin-block-end: 0;
}
.ln-hub-start li:last-child { border-block-end: 0; padding-block-end: 0; }
.ln-hub-start li::before {
  content: counter(ln-krok);
  font-family: var(--ln-pismo-naglowki); font-weight: 700; font-size: 1.35rem;
  /* ciemniejszy wariant akcentu, bo ta sekcja stoi na pasie, nie na tle:
     zmierzone 5,45:1 na #E7EBF1, gdy zwykly akcent dawal 4,18:1 */
  font-variant-numeric: tabular-nums; color: var(--ln-akcent-cta-h);
  /* ten sam odstep pionowy co odnosnik obok, inaczej numer i tytul stoja na
     dwoch roznych wysokosciach: odnosnik ma wlasny padding pod pole dotyku */
  line-height: 1.3; padding-block: var(--ln-odstep-3);
}
/* Odnosnik jest blokiem z odstepem pionowym, zeby pole dotyku mialo 44 px.
   Sam wiersz tekstu ma okolo 25 px i na telefonie trafia sie w niego z trudem. */
.ln-hub-start__link {
  display: inline-block; padding-block: var(--ln-odstep-3);
  font-family: var(--ln-pismo-naglowki); font-weight: 600; font-size: 1.05rem;
  /* jak wyzej: na pasie zwykly akcent tekstowy dawal 4,25:1, czyli ponizej AA */
  line-height: 1.3; text-decoration: none; color: var(--ln-akcent-cta-h);
}
.ln-hub-start__link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ln-hub-start p { margin: 0; color: var(--ln-tekst2); font-size: var(--ln-meta); }

/* --- siatka kafli --- */
.ln-kafle-art { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ln-odstep-4); }
@media (min-width: 48rem) { .ln-kafle-art { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .ln-kafle-art { grid-template-columns: repeat(3, 1fr); } }

.ln-kafel-art {
  position: relative;    /* pod nakladke odnosnika: polem dotyku jest caly kafel, nie sam napis */
  background: var(--ln-karta);
  border: 1px solid var(--ln-linia); border-radius: var(--ln-promien);
  padding: var(--ln-odstep-6);
  display: flex; flex-direction: column; gap: var(--ln-odstep-2);
  margin-block-end: 0;
  transition: border-color var(--ln-plynnie), box-shadow var(--ln-plynnie);
}
.ln-kafel-art:hover { border-color: var(--ln-linia-mocna); box-shadow: var(--ln-cien); }
.ln-kafel-art--bez-linku { background: var(--ln-tlo-pas); border-style: dashed; }

.ln-kafel-art__tytul {
  font-size: 1.05rem; line-height: 1.3; margin: 0; font-weight: 600;
  text-wrap: balance;
}
.ln-kafel-art__tytul a { color: var(--ln-atrament); text-decoration: none; }
.ln-kafel-art__tytul a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ln-kafel-art:hover .ln-kafel-art__tytul a { color: var(--ln-akcent-cta); }
/* Obwodka skupienia obejmuje caly kafel, bo klikalny jest caly kafel.
   Domyslna obwodka wokol samego napisu klamalaby o polu klikniecia. */
.ln-kafel-art__tytul a:focus-visible { outline: none; }
.ln-kafel-art:focus-within { outline: 3px solid var(--ln-akcent-cta); outline-offset: 2px; }

.ln-kafel-art__zajawka { color: var(--ln-tekst2); font-size: 0.95rem; margin: 0; }
.ln-kafel-art__meta {
  margin: auto 0 0; padding-block-start: var(--ln-odstep-3);
  border-block-start: 1px dashed var(--ln-linia);
  display: flex; flex-wrap: wrap; gap: var(--ln-odstep-2) var(--ln-odstep-4);
  font-size: 0.8125rem; color: var(--ln-tekst2); font-variant-numeric: tabular-nums;
}
.ln-kafel-art__stan {
  font-family: var(--ln-pismo-naglowki); font-size: 0.75rem; font-weight: 600;
  /* podpis stanu stoi na kaflu w barwie pasa, wiec ta sama poprawka: 5,45:1 */
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ln-akcent-cta-h);
}

/* =========================== KATALOG MASZYN =========================== */
/* Szablon: szablon-katalog.php plus template-parts/kafel-maszyny.php.
   Wszystko na istniejacych tokenach. Zero nowych barw i zero nowych stopni
   pisma: katalog ma wygladac jak reszta serwisu, a nie jak osobna strona. */

.ln-katalog-wstep {
  border-inline-start: 4px solid var(--ln-akcent);
  padding-inline-start: var(--ln-odstep-6);
  margin-block: var(--ln-odstep-6);
}
.ln-katalog-wstep p:last-child { margin-block-end: 0; }

/* --- drabina czterech polek --- */
/* Numer szczebla robi licznik CSS, nie znak w tresci: kolejnosc ma wynikac
   ze znacznika listy, zeby czytnik ekranu tez ja slyszal. */
.ln-drabina {
  list-style: none; padding: 0; margin-block: var(--ln-odstep-6);
  counter-reset: szczebel; display: grid; gap: var(--ln-odstep-4);
}
@media (min-width: 62rem) { .ln-drabina { grid-template-columns: repeat(2, 1fr); } }

.ln-drabina__szczebel {
  counter-increment: szczebel;
  background: var(--ln-karta); border: 1px solid var(--ln-linia);
  border-inline-start: 3px solid var(--ln-akcent);
  border-radius: var(--ln-promien); padding: var(--ln-odstep-6);
  margin-block-end: 0;
}
.ln-drabina__polka {
  font-family: var(--ln-pismo-naglowki); font-weight: 700; font-size: var(--ln-h3);
  margin-block-end: var(--ln-odstep-1);
}
.ln-drabina__polka::before {
  content: counter(szczebel) ". "; color: var(--ln-akcent-tekst);
  font-variant-numeric: tabular-nums;
}
.ln-drabina__zakres {
  font-family: var(--ln-pismo-naglowki); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ln-akcent-tekst);
  margin-block-end: var(--ln-odstep-3);
}
.ln-drabina__kto { color: var(--ln-tekst2); }
.ln-drabina__prog { font-size: var(--ln-meta); }
.ln-drabina__szczebel p:last-child { margin-block-end: 0; }

/* --- filtry: napisy, nie kafelki --- */
/* Po najechaniu i po wybraniu zmienia sie barwa napisu i grubosc kreski pod nim.
   Nic nie zmienia szerokosci, wiec rzad filtrow nie skacze pod kursorem. */
/* Tlo BIALE, nie pas. Zmierzone: barwa wezwania #A85C13 na pasie #E7EBF1 daje
   4,17:1, czyli ponizej progu AA 4,50 dla zwyklego tekstu. Na bieli ta sama
   barwa daje 4,99:1. Filtr, ktorego nie widac, nie jest filtrem. */
.ln-filtry-blok {
  background: var(--ln-karta); border: 1px solid var(--ln-linia);
  border-radius: var(--ln-promien); padding: var(--ln-odstep-4) var(--ln-odstep-6);
  margin-block: var(--ln-odstep-6);
}
.ln-filtry__etykieta {
  font-family: var(--ln-pismo-naglowki); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ln-tekst2);
  margin-block: var(--ln-odstep-3) var(--ln-odstep-1);
}
.ln-filtry-blok > .ln-filtry__etykieta:first-child { margin-block-start: 0; }
.ln-filtry {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0 var(--ln-odstep-6);
}
.ln-filtry li { margin-block-end: 0; }
.ln-filtr {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ln-atrament); text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: color var(--ln-plynnie), border-color var(--ln-plynnie);
}
.ln-filtr:hover { color: var(--ln-akcent-cta); border-block-end-color: var(--ln-linia-mocna); }
.ln-filtr--aktywny {
  color: var(--ln-akcent-cta); font-weight: 600;
  border-block-end-color: var(--ln-akcent-cta);
}
.ln-filtry__nota, .ln-filtry__wynik { font-size: var(--ln-meta); color: var(--ln-tekst2); }
.ln-filtry__nota { margin-block: var(--ln-odstep-2) 0; }

/* --- siatka kafli --- */
.ln-kafle {
  display: grid; gap: var(--ln-odstep-4);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  margin-block: var(--ln-odstep-6);
}

.ln-kafel {
  background: var(--ln-karta); border: 1px solid var(--ln-linia);
  border-radius: var(--ln-promien); box-shadow: var(--ln-cien);
  padding: var(--ln-odstep-6);
  display: flex; flex-direction: column; gap: var(--ln-odstep-2);
}
.ln-kafel > * { margin-block: 0; }

.ln-kafel__kategoria {
  font-family: var(--ln-pismo-naglowki); font-size: var(--ln-meta); font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ln-tekst2);
}
.ln-kafel__nazwa { font-size: var(--ln-h3); margin-block: 0; }
.ln-kafel__nazwa a { color: var(--ln-atrament); text-decoration: none; }
.ln-kafel__nazwa a:hover { color: var(--ln-akcent-cta); text-decoration: underline; }

.ln-kafel__cena .ln-cena { font-size: 1.5rem; display: block; }
.ln-kafel__cena--brak { font-size: var(--ln-meta); color: var(--ln-tekst2); }

/* Parametry: nazwa po lewej, wartosc po prawej, liczby w jednej kolumnie.
   Definicje zamiast tabeli, bo to sa trzy pary, a nie zestawienie do porownan. */
.ln-kafel__parametry {
  margin-block: var(--ln-odstep-2); display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: var(--ln-odstep-1) var(--ln-odstep-4);
  font-size: 0.95rem;
}
.ln-kafel__parametry dt { color: var(--ln-tekst2); }
/* Wartosc do LEWEJ, nie do prawej. Wartosc dwuwierszowa wyrownana do prawej
   ma poszarpana krawedz od strony, z ktorej sie ja czyta, i przestaje sie
   skanowac wzrokiem w dol kolumny. Sprawdzone na kaflu RA3 (1440 px). */
.ln-kafel__parametry dd {
  margin: 0; font-variant-numeric: tabular-nums; font-weight: 600;
  text-wrap: pretty;
}
.ln-kafel__status {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--ln-tekst2); text-transform: uppercase;
}

.ln-kafel__zarobek { font-size: 0.95rem; }
.ln-kafel__zarobek strong { color: var(--ln-zysk); }

.ln-kafel__tagi {
  list-style: none; padding: 0; margin-block: var(--ln-odstep-1);
  display: flex; flex-wrap: wrap; gap: var(--ln-odstep-2);
  font-size: 0.8125rem; color: var(--ln-tekst2);
}
.ln-kafel__tagi li {
  margin-block-end: 0; border: 1px solid var(--ln-linia);
  border-radius: 999px; padding: 2px var(--ln-odstep-3);
}

/* Przycisk kafla siada na dole, zeby przyciski w rzedzie stanely w jednej linii
   mimo roznej dlugosci opisow. */
.ln-kafel__akcja { margin-block-start: auto; padding-block-start: var(--ln-odstep-3); }
.ln-kafel__akcja .ln-przycisk { width: 100%; }

/* Ten sam powod co wyzej: odnosnik powrotu stoi na bieli, nie na pasie. */
.ln-pusto {
  background: var(--ln-karta); border: 1px solid var(--ln-linia);
  border-radius: var(--ln-promien); padding: var(--ln-odstep-6);
}

/* =========================== OKRUSZKI =========================== */
/* Jedna linia, zawsze. Architektura serwisu mowi wprost: okruszki nie zawijaja
   sie na 320 px. Dlatego lista nie lamie sie na wiersze, tylko przewija w swoim
   wlasnym pojemniku, a nazwy dzialow sa skracane w ln_okruszek_etykieta().
   Pasek przewijania jest ukryty, bo przy trzech ogniwach zabiera wiecej miejsca
   niz same okruszki, a przewijanie palcem dziala bez niego. */
.ln-okruszki { margin-block-end: var(--ln-odstep-6); }
.ln-okruszki ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--ln-odstep-2);
  font-size: var(--ln-meta); color: var(--ln-tekst2);
  overflow-x: auto; scrollbar-width: none;
}
.ln-okruszki ol::-webkit-scrollbar { display: none; }
.ln-okruszki li {
  margin: 0; flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--ln-odstep-2);
  white-space: nowrap;
}
/* Ukosnik jest dekoracja: nie wchodzi do drzewa dostepnosci, bo strukture
   niesie znacznik nav plus lista uporzadkowana. Barwa taka jak tekst okruszka
   (zmierzone 5,52:1 na tle), bo --ln-linia-mocna daje 1,66:1, czyli separator
   niewidoczny dla czesci ludzi. */
.ln-okruszki li + li::before { content: "/"; color: var(--ln-tekst2); }
/* Pole dotyku: odstep pionowy podnosi wysokosc odnosnika, nie zmieniajac
   wygladu wiersza. Okruszek jest nawigacja pomocnicza, nie glownym wezwaniem. */
.ln-okruszki a {
  color: var(--ln-tekst2); text-decoration: none;
  padding-block: var(--ln-odstep-2);
  transition: color var(--ln-plynnie);
}
.ln-okruszki a:hover { color: var(--ln-akcent-tekst); text-decoration: underline; }
.ln-okruszki [aria-current="page"] { color: var(--ln-atrament); }

/* =========================== STOPKA: PASEK DOLNY =========================== */
/* Strony formalne, nota o linkach partnerskich i copyright. Napisy, nie kafelki,
   tak samo jak w menu glownym. */
.ln-stopka__dol {
  margin-block-start: var(--ln-sekcja);
  padding-block-start: var(--ln-odstep-6);
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--ln-meta);
}
.ln-stopka__dol p { margin-block-end: var(--ln-odstep-4); }
.ln-stopka__prawne ul {
  list-style: none; margin: 0 0 var(--ln-odstep-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--ln-odstep-2) var(--ln-odstep-6);
}
.ln-stopka__prawne li { margin: 0; }
.ln-stopka__prawne a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.ln-stopka__prawne a:hover { text-decoration: underline; }
.ln-stopka__copy { color: #9AA3B0; margin-block-end: 0; }

/* =========================== STRONA GLOWNA =========================== */
/* Sekcje strony glownej: glowna-drabina, glowna-sciezki, glowna-kalkulacje,
   glowna-produkty, glowna-osprzet, glowna-metoda, glowna-cta.
   Wszystko na istniejacych tokenach. Zero nowych barw i zero nowych stopni
   pisma poza jednym: liczba w kaflu kalkulacji uzywa gotowego --ln-kwota.

   Kontrasty ZMIERZONE, nie oszacowane, dla kazdej nowej pary barwa-tlo:
   --ln-akcent-tekst #A85A0A na bieli 5,08:1 · --ln-tekst2 #5C6470 na tle 5,52:1
   i na pasie 5,00:1 · --ln-akcent #E07B1A na atramencie #232936 4,86:1 ·
   #C9CFD9 na atramencie 9,54:1. Prog AA dla tekstu to 4,50:1. */

/* Naglowek sekcji: bez podwojnego odstepu u gory. Wlasny margines h2 dokladal
   sie do wypelnienia sekcji i dawal 6,5rem u gory przy 4,5rem u dolu. */
.ln-sekcja > .ln-kontener > h2:first-child { margin-block-start: 0; }

/* Zdanie wprowadzajace pod naglowkiem sekcji. Pelna szerokosc kontenera,
   bez zwezania kolumny prozy: to twardy standard w calym serwisie. */
.ln-sek-wstep { color: var(--ln-tekst2); margin-block-end: var(--ln-odstep-6); }
.ln-sek-wstep--ciemna { color: #C9CFD9; }

/* Stempel danych na ciemnym tle. Bez tej reguly dziedziczy --ln-tekst2,
   ktore na atramencie daje 2,43:1, czyli jest nieczytelne. */
.ln-sekcja--ciemna .ln-stempel { color: #C9CFD9; }

/* --- 3. drabina maszyn: wyjscia do stron produktow --- */
/* Odnosniki sa blokami z odstepem pionowym, zeby pole dotyku mialo 44 px.
   Sam wiersz tekstu ma okolo 25 px i na telefonie trafia sie w niego z trudem. */
.ln-drabina__wyjscia { display: grid; margin-block-end: 0; }
.ln-drabina__wyjscia a { display: inline-block; padding-block: var(--ln-odstep-3); font-weight: 600; }

/* --- 4. trzy wejscia tematyczne --- */
/* Karta wejscia ma KILKA odnosnikow, wiec nie moze byc kaflem z nakladka na
   caly obszar (jak .ln-kafel-art nizej). Klikalne sa tylko tytuly w liscie. */
.ln-wejscia { display: grid; gap: var(--ln-odstep-4); }
@media (min-width: 62rem) { .ln-wejscia { grid-template-columns: repeat(3, 1fr); } }

.ln-wejscie {
  background: var(--ln-karta); border: 1px solid var(--ln-linia);
  border-block-start: 3px solid var(--ln-akcent);
  border-radius: var(--ln-promien); padding: var(--ln-odstep-6);
}
.ln-wejscie__pytanie {
  font-size: var(--ln-h3); margin-block: 0 var(--ln-odstep-2); text-wrap: balance;
}
.ln-wejscie__opis { color: var(--ln-tekst2); font-size: 0.95rem; }
.ln-wejscie__linki { list-style: none; padding: 0; margin-block-end: 0; }
.ln-wejscie__linki li {
  margin-block-end: 0; border-block-start: 1px solid var(--ln-linia);
}
.ln-wejscie__linki a {
  display: block; padding-block: var(--ln-odstep-3);
  font-weight: 600; line-height: 1.35; text-decoration: none;
}
.ln-wejscie__linki a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* --- 5. kafle kalkulacji --- */
/* Siatke i sam kafel bierzemy gotowe z bloku HUB DZIALU (.ln-kafle-art).
   Dokladamy jedno: liczbe nad tytulem. Ona jest tu wizualem sekcji, bo nasza
   przewaga nad konkurencja w tej niszy to liczba ze zrodlem, a nie obietnica. */
.ln-kafel-art__liczba {
  font-family: var(--ln-pismo-naglowki); font-weight: 700;
  font-size: var(--ln-kwota); line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--ln-akcent-tekst);
  margin: 0; text-wrap: balance;
}

/* --- 7. osprzet: wyjscia --- */
.ln-osprzet-wyjscia { display: grid; gap: var(--ln-odstep-2); margin-block-start: var(--ln-odstep-4); }
.ln-osprzet-wyjscia a { display: inline-block; padding-block: var(--ln-odstep-3); font-weight: 600; }

/* --- 8. metodologia na ciemnym tle --- */
.ln-metoda {
  display: grid; gap: var(--ln-odstep-6);
  margin-block: var(--ln-odstep-6);
}
@media (min-width: 48rem) { .ln-metoda { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .ln-metoda { grid-template-columns: repeat(4, 1fr); } }

.ln-metoda__poz { border-inline-start: 3px solid var(--ln-akcent); padding-inline-start: var(--ln-odstep-4); }
.ln-metoda__liczba {
  font-family: var(--ln-pismo-naglowki); font-weight: 700; font-size: var(--ln-h3);
  font-variant-numeric: tabular-nums; color: var(--ln-akcent);
  line-height: 1.2; margin-block-end: var(--ln-odstep-2);
}
.ln-metoda__opis { margin: 0; font-size: var(--ln-meta); color: #C9CFD9; line-height: 1.5; }
.ln-metoda__wyjscia { display: grid; gap: var(--ln-odstep-2); margin-block-end: 0; }
.ln-metoda__wyjscia a { display: inline-block; padding-block: var(--ln-odstep-3); font-weight: 600; }

/* --- 9. wezwanie koncowe: przyciski do NASZYCH stron --- */
/* Na telefonie przyciski stoja jeden pod drugim i zajmuja pelna szerokosc,
   bo obok siebie schodzilyby ponizej 44 px pola dotyku. */
.ln-cta-wyjscia { display: grid; gap: var(--ln-odstep-3); margin-block-end: 0; }
@media (min-width: 48rem) {
  .ln-cta-wyjscia { display: flex; flex-wrap: wrap; gap: var(--ln-odstep-4); }
}