/* ============================================================
   Studio Arlek — style wspolne dla calej witryny.

   Tu trafia tylko to, co musi dzialac na KAZDEJ podstronie.
   Sekcje strony glownej maja osobny front-au.css, zeby nie
   ladowac ich tam, gdzie ich nie ma.
   ============================================================ */

/* --- znak marki skladany z tekstu -------------------------- */

/* Uzywany, dopoki nie ma assets/img/logo-studioarlek.png.
   Odwzorowuje uklad starego znaku: pierwszy czlon stonowany,
   drugi mocny — tyle ze z prawidlowa nazwa zamiast obcej domeny. */

.au-logo {
    display: inline-flex;
    align-items: baseline;
    gap: .28em;
    font-family: var(--font-heading);
    /* Wysokosc znaku przychodzi z szablonu, zeby naglowek i stopka
       mogly uzyc tego samego pliku w dwoch rozmiarach. */
    font-size: calc(var(--au-logo-h, 44px) * .58);
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.au-logo__studio {
    font-weight: 300;
    font-size: .62em;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.au-logo__arlek {
    font-weight: 700;
    color: currentColor;
}

/* Na ciemnym tle naglowka i stopki tekst jest bialy z automatu
   (currentColor), na jasnym — ciemny. Nic do nadpisywania. */

/* --- pasek gorny: notka zamiast telefonu ------------------- */

/* To jest informacja, nie odnosnik — nie moze udawac klikalnego. */
.topbar__contact-item--note {
    cursor: default;
}

.topbar__contact-item--note:hover {
    opacity: 1;
}

/* --- naglowek sekcji i siatka kart -------------------------------
   Uzywane przez strone kontroli (page-site-check.php). Byly wczesniej
   w front-au.css, ktory zniknal razem z moja wlasna wersja strony
   glownej — a te dwa wzorce nadal sa potrzebne. */

.au-section__header {
    max-width: 720px;
    margin: 0 0 var(--space-12);
}

.au-section__header--light .section-title,
.au-section__header--light .section-label,
.au-section__header--light .section-subtitle {
    color: var(--color-dark-text);
}

.au-trust__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.au-trust__card {
    padding: var(--space-8);
    background: var(--color-dark-surface);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-lg);
}

.au-trust__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-dark-text);
    margin: 0 0 var(--space-3);
}

.au-trust__text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    /* Wlasny kolor, a nie dziedziczony: karta ma wlasne tlo, wiec
       regula "w ciemnej sekcji tekst jasny" nie zawsze tu dochodzi. */
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

@media (max-width: 768px) {
    .au-trust__grid { grid-template-columns: 1fr; }
    .au-section__header { margin-bottom: var(--space-10); }
}

/* --- opinie na osobnej zakladce ----------------------------------- */

.au-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.au-review {
    margin: 0;
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.au-review__stars {
    color: #FBBF24;
    font-size: var(--text-sm);
    letter-spacing: .1em;
}

.au-review__quote {
    margin: 0;
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
}

.au-review__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.au-review__avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
}

.au-review__name {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text);
}

/* Zrodlo mowi wprost, ze to tlumaczenie — bo w profilu Google
   opinia jest po polsku i ktos to sprawdzi. */
.au-review__source {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    .au-reviews { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .au-reviews { grid-template-columns: 1fr; }
}

/* ==================================================================
   OTWARCIE PODSTRONY I RYTM SEKCJI

   Zmierzone 02.09.2026 na zywej stronie:
     /privacy/ i /terms/  13 stykow o kontrascie 1,0
     /faq/                 5 stykow 1,0
     /contact/             cala strona jedno biale tlo
     wszedzie              biel obok kosci = 1,09

   Regula z WORKFLOW: dwa sasiadujace tla musza dawac co najmniej
   1,5:1, a strona potrzebuje przynajmniej jednego przeskoku ponad 7:1.
   Bez tego caly dokument czyta sie jak jeden pas i zadna sekcja nie ma
   poczatku. Odstep 120 px tego nie zalatwia — pustka to nie granica.
   ================================================================== */

/* --- otwarcie podstrony ------------------------------------------
   Bylo: bialy pasek 249 px z odstepem 40 px, przy sekcjach na 120 px.
   Podstrona zaczynala sie nijak. Teraz otwiera sie tak samo mocno
   jak strona glowna — ciemno, z zapasem powietrza. */

/* Specyficznosc podniesiona i !important na tle.
   Bez tego .section--light (ta sama specyficznosc, ten sam element)
   wygrywalo i tlo zostawalo biale — a poniewaz kolor tytulu JUZ sie
   zmienil na bialy, wyszedl bialy tekst na bialym tle. Kontrast 1,0,
   czyli tytul strony niewidoczny. Zmierzone, nie zauwazone okiem. */
.section.legal-hero,
.section.section--hero,
section.legal-hero,
section.section--hero {
    background: linear-gradient(180deg, #141e2b 0, #121c27 45%, #0f1720 100%) !important;
    padding-top: clamp(56px, 7vw, 104px) !important;
    padding-bottom: clamp(56px, 7vw, 104px) !important;
    position: relative;
}

.section.legal-hero .section-title,
.section.section--hero .section-title,
.section.legal-hero .breadcrumbs__current,
.section.section--hero .breadcrumbs__current {
    color: #fff;
}

.section.legal-hero .section-subtitle,
.section.section--hero .section-subtitle {
    color: rgba(255, 255, 255, .74);
}

.section.legal-hero .breadcrumbs a,
.section.section--hero .breadcrumbs a {
    color: rgba(255, 255, 255, .55);
}

.legal-hero .breadcrumbs a:hover,
.section--hero .breadcrumbs a:hover {
    color: #fff;
}

.section.legal-hero .section-label,
.section.section--hero .section-label {
    color: var(--color-primary);
}

/* Cienka kreska u dolu otwarcia — granica widoczna takze wtedy,
   gdy kolejna sekcja tez jest ciemna. */
.legal-hero::after,
.section--hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--color-primary);
    opacity: .85;
}

/* --- rytm sekcji --------------------------------------------------
   Biel obok kosci daje 1,09 — granicy nie widac. Doklada wiec kreske
   o kontrascie ponad 3:1 wobec obu stron, co Twoja bramka uznaje za
   granice rownowazna roznicy tla. */

/* Kreska jako granica tam, gdzie roznica tla nie wystarcza.
   Biel obok kosci to 1,09 — ponizej progu 1,5, wiec granicy fizycznie
   nie widac. Bramka oddzielenia dopuszcza zamiast tego kreske >=2 px
   o kontrascie 3:1 wobec obu stron; token --color-border ma wobec bieli
   okolo 1,1, wiec sie nie nadaje. #8f8a86 daje 3,4:1 na bieli
   i 3,2:1 na kosci — widac ja, a nie krzyczy. */
/* Kazda sekcja stykajaca sie z poprzednia. Wczesniejsza wersja
   wymieniala konkretne pary klas i przez to omijala sekcje z dodatkowym
   modyfikatorem (.section.portfolio, .section.faq-page). Prosciej
   i pewniej: regula dla wszystkich, wyjatek dla ciemnych ponizej. */
section.section + section.section {
    border-top: 2px solid #8f8a86;
}

/* Ciemna sekcja nie potrzebuje kreski — sama jest granica. */
/* Ciemna sekcja jest granica sama w sobie — kontrast ponad 14:1.
   Kreska bylaby tam obwodka, nie oddzieleniem. */
section.section--dark + section.section,
section.section + section.section--dark,
section.legal-hero + section.section {
    border-top: 0;
}

/* Dwie biale sekcje pod rzad to jedna sekcja z przerwa w srodku.
   Druga dostaje odcien, zeby styk byl widoczny. */
.section--light + .section--light,
.section:not([class*="--"]) + .section:not([class*="--"]) {
    background: var(--color-bg-alt);
}

/* --- naglowek sekcji: wyrazniejsza hierarchia --------------------- */

.section-label {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

/* ==================================================================
   JAK TO DZIALA — trzy kroki na stronie glownej

   Sekcja nosi caly model sprzedazy, wiec musi byc czytelna w piec
   sekund. Trzeci krok jest wyrozniony, bo to jedyne miejsce, w ktorym
   klient placi — a cala obietnica polega na tym, ze wczesniej nie.
   ================================================================== */

/* (stare reguly .au-kroki/.au-krok/.au-jak__stopka usuniete — nowa wersja na koncu pliku) */


/* ============================================================
   NOTATKA O PLATNOSCI W FORMULARZU ZAMOWIENIA
   Zastapila wybor "polowa z gory / calosc". Ma czytac sie jak
   uspokojenie tuz przed przyciskiem "wyslij", a nie jak drobny druk,
   wiec dostaje pomaranczowa krawedz z lewej i wlasne tlo.
   ============================================================ */
.order-form__payment-note {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}

.order-form__payment-head {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
}

.order-form__payment-text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
}

/* ============================================================
   DWA STYKI, KTORE WYPADLY Z REGULY SEPARATORA

   Regula wyzej brzmi `section.section + section.section`, wiec
   obejmuje tylko sekcje majace klase .section. Na stronie glownej
   dwie jej nie maja — <section class="offer"> i <section class="trusted">
   — i przez to stykaly sie z poprzednia sekcja bez zadnej granicy.

   Zmierzone w przegladarce (getComputedStyle, nie na oko):
     .au-jak    -> .offer     kontrast 1.07:1, border 0
     .portfolio -> .trusted   kontrast 1.08:1, border 1px rgba(0,0,0,.06)

   Drugi ma kreske, ale 1px o kontrascie ~1.06:1 to kreska, ktorej nie
   widac. Obie pary dostaja te sama granice co reszta strony: 2px
   #8f8a86, czyli 3.4:1 na bialym — powyzej progu 3:1.
   ============================================================ */
section.au-jak + section.offer,
section.portfolio + section.trusted {
    border-top: 2px solid #8f8a86;
}

/* ============================================================
   STARA STRONA -> NOWA

   Uklad dwukolumnowy: lewa mowi, co jest zle teraz, prawa co bedzie
   po przebudowie. Lewa dostaje chlodne, wygaszone tlo, prawa biale
   z pomaranczowa krawedzia — zeby kierunek czytania byl widoczny,
   zanim ktokolwiek przeczyta naglowek.

   Na telefonie kolumny ida jedna pod druga. Wtedy tag "On your site now"
   / "After the rebuild" jest JEDYNA rzecza, ktora mowi, ktora to strona
   — dlatego nie znika przy zwezaniu, tylko robi sie wyrazniejszy.
   ============================================================ */
.au-zmiana__lista {
    list-style: none;
    margin: var(--space-10) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-6);
}

.au-zmiana__row {
    display: grid;
    grid-template-columns: 3.5rem 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-7) var(--space-7) var(--space-7) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    background: #fff;
}

.au-zmiana__nr {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    opacity: .35;
    font-variant-numeric: tabular-nums;
}

.au-zmiana__kol {
    padding: var(--space-5);
    border-radius: var(--radius-md, 8px);
    height: 100%;
}

/* Stan obecny: wygaszony, chlodniejszy — ma czytac sie jak diagnoza. */
.au-zmiana__kol--stare {
    background: var(--color-bg-alt);
    border-left: 3px solid #b9b3ad;
}

/* Po przebudowie: jasne tlo i pomaranczowa krawedz, czyli kolor,
   ktorym cala strona oznacza rzeczy dobre. */
.au-zmiana__kol--nowe {
    background: #fff;
    border-left: 3px solid var(--color-primary);
}

.au-zmiana__tag {
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: .35em .8em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.au-zmiana__tag--stare {
    background: #ded9d4;
    color: #4a453f;   /* 6.3:1 na tle #ded9d4 — powyzej progu 4.5:1 */
}

.au-zmiana__tag--nowe {
    background: var(--color-primary);
    color: #fff;
}

.au-zmiana__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.au-zmiana__text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
}

.au-zmiana__stopka {
    max-width: 820px;
    margin: var(--space-10) 0 0;
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
}

.au-zmiana__stopka a {
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .au-zmiana__row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-6);
    }
    /* Numer wchodzi w jedna linie z gora karty, zeby nie zjadal
       calego wiersza na waskim ekranie. */
    .au-zmiana__nr { font-size: var(--text-xl); }
    .au-zmiana__tag { font-size: 11px; }
}

/* ============================================================
   POMARANCZ POD BIALY MALY TEKST

   Markowy --color-primary (#ff3c00) daje z bialym tekstem 3.56:1.
   Dla duzych naglowkow to wystarcza (prog 3:1), ale male pigulki
   — "The only point you pay", "After the rebuild" — to tekst 11-12px,
   czyli prog 4.5:1. Bialy na #ff3c00 go nie przechodzi.

   #d63200 to ten sam pomarancz przyciemniony do 4.87:1. Roznicy nie
   widac obok siebie, a napis staje sie czytelny dla kogos, kto czyta
   przy sloncu albo ma slabszy wzrok. DDA s24 i WCAG 2.1 AA.

   Duze elementy (przyciski, naglowki) zostaja na oryginalnym kolorze.
   ============================================================ */
.au-krok__koszt--platne,
.au-zmiana__tag--nowe {
    background: #d63200;
}

/* ============================================================
   PADDINGI DWOCH NOWYCH SEKCJI

   Zmierzone w przegladarce przy 390px: obie moje sekcje mialy
   padding gora 0, dol 0, podczas gdy sasiednie mialy 36-60px.
   Wygladalo to tak, jakby tresc byla sklejona z poprzednia sekcja.

   Powod: klasa .section NIE nadaje zadnego paddingu dla ekranu.
   W main.css jedyna regula .section z paddingiem siedzi w @media print,
   a token --section-padding: 120px jest zdefiniowany i nigdzie nie uzyty.
   Sekcje, ktore maja odstepy (.offer, .portfolio, .about-reviews), biora
   je z wlasnych klas. Zalozylem, ze .section dziala jak na innych stronach
   — nie dziala.

   Nie ruszam samej .section, bo podstrony maja juz wlasne paddingi
   i doszlyby do siebie podwojnie. Naprawiam to, co zepsulem.

   clamp: 48px na telefonie (jak sasiedzi), 96px na duzym ekranie.
   ============================================================ */
section.au-jak,
section.au-zmiana {
    padding-top: clamp(48px, 7vw, 96px);
    padding-bottom: clamp(48px, 7vw, 96px);
}

/* ============================================================
   ROZMIARY: CZYTELNOSC NA TELEFONIE

   Zmierzone przy 390px. Trzy rzeczy naprawde przeszkadzaly.
   ============================================================ */

/* 1. Etykieta nad naglowkiem hero miala 10px. To zdanie niesie cala
      obietnice modelu ("Free rebuild first - you decide after") i bylo
      najmniejszym tekstem na ekranie. */
@media (max-width: 640px) {
    .hero__label {
        font-size: 12px;
        letter-spacing: .06em;
        line-height: 1.4;
    }
}

/* 2. Baner cookies mial 12-13px. To jest tekst zgody — czlowiek ma na
      jego podstawie podjac decyzje o swoich danych. Privacy Act 1988
      i RODO wymagaja, zeby zgoda byla zrozumiala; 12px na telefonie
      nie sprzyja czytaniu, a nie czytaniu. */
.arlek-cookies__desc,
.arlek-cookies__cat p {
    font-size: 14px;
    line-height: 1.6;
}

/* 3. Przyciski w kafelkach realizacji mialy 23px wysokosci. WCAG 2.5.8
      (AA w 2.2) wymaga minimum 24px, wytyczna Apple mowi o 44px.
      Nie zmieniam wygladu — dokladam obszar dotyku pionowo. */
@media (max-width: 900px) {
    .portfolio__btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .arlek-cookies__btn {
        min-height: 44px;
    }
}

/* ============================================================
   ETYKIETA SEKCJI STALA W INNEJ OSI NIZ NAGLOWEK

   Widac to na kazdej podstronie z ciemnym hero: napis "ABOUT US"
   przy lewej krawedzi, a pod nim wysrodkowany naglowek. Wyglada,
   jakby ktos zapomnial dokonczyc uklad.

   ZMIERZONE (1900px): srodek etykiety 358px, srodek naglowka 942px
   — 584px rozjazdu. To samo na /our-work/, /reviews/, /about/,
   /contact/, /faq/, /privacy/, /terms/ oraz w ciemnych sekcjach
   /site-check/.

   PRZYCZYNA
     main.css ma regule:
       .section--hero .section-label { text-align: center }
     ale .section-label to inline-flex. text-align NA elemencie
     centruje jego WNETRZE, nie jego polozenie. O polozeniu decyduje
     wyrownanie RODZICA, a .container ma text-align: start.
     Naglowek centruje sie poprawnie, bo jest blokiem z tekstem
     w srodku — i stad rozjazd.

   POPRAWKA
     Nie centruje calego .container (siedza w nim tez okruszki
     nawigacji i przyciski, ktore maja zostac przy lewej). Robie
     z etykiety blok o szerokosci wlasnej tresci i daje jej
     marginesy auto — wtedy przesuwa sie sam prostokat.

   NIE dotykam sekcji z naglowkiem wyrownanym do lewej: tam etykieta
   i naglowek juz stoja w jednej osi.
   ============================================================ */
/* !important jest tu konieczne, nie wygodne: ux-fixes.css ma
   ".section-label { display: inline-flex !important }". Bez zbicia tego
   element zostaje liniowy, a marginesy auto na elemencie liniowym
   licza sie jako zero — czyli sama regula nic by nie dala.
   Sprawdzone w przegladarce: rozjazd 584px -> 0px. */
.legal-hero .section-label,
.section--hero .section-label,
.section--dark .au-section__header--light .section-label,
.au-section__header--srodek .section-label {
    display: flex !important;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   DZIURA W SIATCE NA /about/

   .on-do__grid to `repeat(2, 1fr)` z TRZEMA kartami i bez zadnej
   reguly rozciagania. Trzecia ladowala sama w lewej kolumnie,
   a obok niej zostawal pusty prostokat na pol szerokosci.

   Nie jest to przypadek do zamiecenia — trzecia karta ("Why we build
   it first") jest najdluzsza z calej trojki: ma akapit i czteropunktowa
   liste, podczas gdy dwie pierwsze to naglowek i dwa zdania. Rozciagam
   ja wiec na obie kolumny: dziura znika, a karta dostaje szerokosc,
   ktorej jej tresc i tak potrzebowala.
   ============================================================ */
body.pg-about .on-do__grid > .on-do-card:nth-child(3) {
    grid-column: 1 / -1;
}

/* Rozciagnieta karta czyta sie zle jako jedna kolumna tekstu na
   1100px. Tresc idzie w dwie kolumny od szerokosci, przy ktorej
   to ma sens. */
@media (min-width: 860px) {
    body.pg-about .on-do__grid > .on-do-card:nth-child(3) .on-do-card__desc,
    body.pg-about .on-do__grid > .on-do-card:nth-child(3) .on-do-card__list {
        max-width: 52ch;
    }
    body.pg-about .on-do__grid > .on-do-card:nth-child(3) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 clamp(24px, 3vw, 44px);
        align-items: start;
    }
    body.pg-about .on-do__grid > .on-do-card:nth-child(3) .on-do-card__icon,
    body.pg-about .on-do__grid > .on-do-card:nth-child(3) .on-do-card__title {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   "EVERYTHING HERE CAN BE VERIFIED" — zakonczenie /about/

   Bylo: 517px wysokosci, 116 znakow, sam adres pocztowy w pustce.
   Gestosc 22 znaki na 100px przy 137 w sekcji obok.

   Trzy kolumny, bo to trzy rozne pytania nieufnego czytelnika:
   kim jestescie, co zrobiliscie, co macie o mnie. Kazda kolumna
   konczy sie czyms, co da sie kliknac i sprawdzic.
   ============================================================ */
.au-sprawdz {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 44px);
    margin-top: var(--space-10);
}

.au-sprawdz__kol {
    padding: var(--space-6);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg, 12px);
    border-top: 3px solid var(--color-primary);
}

.au-sprawdz__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.au-sprawdz__adres {
    margin: 0 0 var(--space-4);
    font-style: normal;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
}

.au-sprawdz__text {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
}

.au-sprawdz__text--drobne {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.au-sprawdz__lista {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.au-sprawdz__lista li {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    border-bottom: 1px solid var(--color-border);
}

.au-sprawdz__lista li:last-child { border-bottom: 0; }

/* Strzalka zamiast kropki: te pozycje sa do KLIKNIECIA, nie do czytania. */
.au-sprawdz__lista li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

.au-sprawdz__lista a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.au-sprawdz__lista a:hover,
.au-sprawdz__lista a:focus-visible {
    color: var(--color-primary);
    border-bottom-color: currentColor;
}

.au-sprawdz__mail {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-base);
}

.au-sprawdz__mail a {
    color: var(--color-primary);
    font-weight: 600;
    word-break: break-word;
}

.au-sprawdz__mail-sub {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    .au-sprawdz { grid-template-columns: 1fr; }
}

/* ============================================================
   "STARA -> NOWA": poprawki po obejrzeniu sekcji w izolacji

   Cztery rzeczy, ktorych nie widac bylo w kodzie, tylko na zrzucie.
   ============================================================ */

/* 1. Numer rzedu byl blady do granicy czytelnosci (opacity .35 na
      jasnym pomaranczu, na bialym tle). To on prowadzi wzrok przez
      cala sekcje, wiec musi byc widoczny, a nie ledwie obecny. */
.au-zmiana__nr {
    opacity: 1;
    color: #d63200;
    font-size: var(--text-xl);
}

/* 2. i 3. Prawa kolumna byla golym tekstem obok karty, i konczyla sie
      wyzej niz lewa. Teraz obie sa kartami tej samej wysokosci: rzad
      ma rowny dol, a "przed" i "po" czytaja sie jako para. */
.au-zmiana__row { align-items: stretch; }

.au-zmiana__kol--nowe {
    background: #fff;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
}

.au-zmiana__kol--stare {
    border: 1px solid #d9d3cd;
    border-left: 3px solid #b9b3ad;
}

/* 4. Naglowek w prawej kolumnie (dopisany w szablonie) ma czytac sie
      jako odpowiedz na lewy, nie jako drugi problem — stad kolor
      pomaranczowy zamiast czarnego. */
.au-zmiana__kol--nowe .au-zmiana__title {
    color: #b32900;
}

/* Rzad nie potrzebuje wlasnej ramki, skoro obie kolumny sa juz kartami
   — podwojna obwodka robila wrazenie ramki w ramce. */
.au-zmiana__row {
    border: 0;
    padding: 0 0 0 var(--space-2);
    background: transparent;
}

@media (max-width: 900px) {
    .au-zmiana__row { padding-left: 0; }
}

/* ============================================================
   TEKST JUSTOWANY NA WASKIEJ KOLUMNIE

   Akapit "We are a European studio..." mial text-align: justify
   przy szerokosci 537px i hyphens: manual. Justowanie bez dzielenia
   wyrazow rozpycha odstepy miedzy slowami, zeby dociagnac wiersz do
   krawedzi — powstaja pionowe "rzeki" bieli i tekst czyta sie gorzej,
   mimo ze wyglada "rowniej".

   Justowanie ma sens w gazecie, gdzie lamacz dzieli wyrazy. W przegladarce,
   na kolumnie ponizej ~600px i bez dzielenia, robi wylacznie szkode.
   ============================================================ */
.about-reviews__desc,
.section-subtitle,
.au-zmiana__text,
.au-sprawdz__text {
    text-align: left;
    text-wrap: pretty;
}

/* ============================================================
   /site-check/ : pytanie i odpowiedz nie stoja w jednej osi

   ZMIERZONE
     .pillar-item__label  padding: 0        left: 34px
     .pillar-item__body   padding-left: 34px

   Odpowiedz byla wciecia o 34px wzgledem pytania, wiec lista miala
   poszarpana lewa krawedz i czytala sie jak dwa osobne teksty zamiast
   pary pytanie-odpowiedz.

   PRZYCZYNA
     Komponent .pillar-item jest wspoldzielony z /websites/, gdzie
     kazda pozycja ma na poczatku ikone ptaszka i wciecie 34px sluzy
     do wyrownania tekstu POD nia. Na /site-check/ pozycje to zwykle
     <li> bez ikony (sprawdzone: brak svg, brak ::before, brak markera)
     — wiec wciecie nie ma do czego sie odnosic.

   Regula ograniczona do tej strony, zeby nie ruszyc /websites/,
   gdzie to samo wciecie jest potrzebne.
   ============================================================ */
body.pg-site-check .pillar-item {
    padding: var(--space-4) var(--space-5);
}

body.pg-site-check .pillar-item__label {
    display: block;
    padding: 0;
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--color-text);
}

body.pg-site-check .pillar-item__body {
    padding: 0;
    color: var(--color-text-body);
}

/* ============================================================
   /contact/ : "kim jestesmy" + "jak nas sprawdzic" obok siebie

   Blok z adresem mial 720px w kontenerze 1292px — po prawej zostawalo
   548px pustki, i to na samym koncu strony kontaktowej.

   Teraz dwie kolumny: po lewej dane firmy (wymog Spam Act 2003),
   po prawej trzy sprawdzenia, ktore australijski odbiorca moze
   wykonac sam. Powod z badania rynku: 63% konsumentow w Australii
   mialo w ostatnim roku do czynienia z proba oszustwa, a odruchem
   przed zaplaceniem komukolwiek jest sprawdzenie numeru ABN.
   Nie mamy ABN, wiec dajemy narzedzie, ktore robi to samo dla firmy
   z Unii — VIES Komisji Europejskiej.
   ============================================================ */
body.pg-contact .au-contact__details,
body.pg-contact .au-contact__weryfikacja {
    box-sizing: border-box;
}

@media (min-width: 1000px) {
    body.pg-contact .au-contact__details,
    body.pg-contact .au-contact__weryfikacja {
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 22px);
    }
    body.pg-contact .au-contact__weryfikacja {
        margin-left: 36px;
    }
}

.au-weryf {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
}

.au-weryf__krok {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: var(--space-4);
    align-items: start;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.au-weryf__krok:last-child { border-bottom: 0; padding-bottom: 0; }

/* Numer w kolku: krok, nie ozdoba — ma byc czytelny, wiec ciemniejszy
   pomarancz (bialy na #ff3c00 daje tylko 3.56:1). */
.au-weryf__nr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #d63200;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
}

.au-weryf__title {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    color: var(--color-text);
}

.au-weryf__text {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
    text-align: left;
}

.au-weryf__link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #b32900;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.au-weryf__link:hover,
.au-weryf__link:focus-visible {
    border-bottom-color: currentColor;
}

.au-weryf__stopka {
    margin: var(--space-6) 0 0;
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-border);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
}

/* Gory obu kolumn musza sie zgadzac. Lewa (dane firmy) dziedziczy po
   .au-contact__details margines 64px, padding 40px i kreske oddzielajaca
   od formularza; prawa nie miala nic, wiec jej naglowek stal 105px wyzej.
   Teraz obie zaczynaja sie w tej samej linii, a kreska idzie przez cala
   szerokosc sekcji zamiast urywac sie w polowie. */
@media (min-width: 1000px) {
    body.pg-contact .au-contact__weryfikacja {
        margin-top: 64px;
        padding-top: 40px;
        border-top: 1px solid rgba(18, 28, 39, .15);
    }
}

/* ============================================================
   "DLACZEGO TYLE, A NIE WIECEJ"

   Cena znacznie ponizej rynku jest w Australii sygnalem RYZYKA, nie
   okazji — 63% konsumentow mialo tam w ostatnim roku do czynienia
   z proba oszustwa. Sekcja ma wiec czytac sie jak wyjasnienie, nie
   jak reklama: spokojne tlo, cztery powody obok siebie, i na koncu
   akapit o tym, czego w cenie NIE MA.

   Ostatni akapit dostaje pomaranczowa krawedz, bo to on robi tu
   najwiecej roboty: oferta bez minusow jest drugim sygnalem
   ostrzegawczym po zbyt niskiej cenie.
   ============================================================ */
.au-dlaczego {
    margin-top: clamp(48px, 6vw, 88px);
    padding-top: clamp(32px, 4vw, 56px);
    border-top: 2px solid var(--color-border);
}

.au-dlaczego__glowna {
    max-width: 760px;
    margin-bottom: var(--space-8);
}

.au-dlaczego__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.au-dlaczego__lead {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
    text-align: left;
}

.au-dlaczego__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-8);
}

.au-dlaczego__powod {
    padding-left: var(--space-5);
    border-left: 2px solid #d63200;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
}

.au-dlaczego__powod strong { color: var(--color-text); }

.au-dlaczego__uwaga {
    max-width: 820px;
    margin: var(--space-8) 0 0;
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
    text-align: left;
}

@media (max-width: 900px) {
    .au-dlaczego__lista { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOK NAGLOWKOWY WYSRODKOWANY WEWNATRZ, ALE PRZYKLEJONY DO LEWEJ

   ZMIERZONE (/site-check/, sekcja zamykajaca, 1280px):
     .container            0 - 1280   srodek 640
     .au-section__header   24 - 744   srodek 384   max-width: 720px
     .section-title        text-align: center

   Naglowek i podtytul byly wiec wysrodkowane WZGLEDEM SWOJEGO PUDELKA,
   a pudelko stalo przy lewej krawedzi. Efekt: tekst "wysrodkowany"
   o 256px w lewo od srodka strony, a pod nim polowa sekcji pustki.
   Z daleka wyglada to jak uklad, ktory sie rozjechal — bo sie rozjechal.

   Przyczyna: max-width bez margin-inline: auto. Klasyczny brak.

   Poprawka obejmuje oba warianty, ktore centruja tytul: --srodek
   (jasne sekcje) i --light (naglowki na ciemnym tle). Przycisk pod
   takim naglowkiem tez idzie na srodek, bo inaczej zostaje sam
   przy lewej krawedzi pod wysrodkowanym tekstem.
   ============================================================ */
.au-section__header--srodek,
.section--dark .au-section__header--light {
    margin-left: auto;
    margin-right: auto;
}

/* Akapit z przyciskiem, ktory stoi zaraz po wysrodkowanym naglowku. */
.au-section__header--srodek + p,
.section--dark .au-section__header--light + p {
    text-align: center;
}

/* Sekcje zamykajace mialy 740px wysokosci na naglowek, zdanie i przycisk
   — czyli okolo polowy tej wysokosci nie robilo nic. Odstepy schodza do
   poziomu reszty strony. */
.section--light .au-section__header--srodek,
.section--dark .au-section__header--light {
    margin-bottom: var(--space-8);
}

/* ============================================================
   LISTY WERYFIKACYJNE: CALY WIERSZ KLIKALNY NA TELEFONIE

   Zmierzone przy 390px: linki w .au-sprawdz__lista mialy 19px wysokosci
   celu dotykowego, bo byly liniowe (display: inline) wewnatrz <li>
   o wysokosci 35px.

   WCAG 2.5.8 zwalnia linki liniowe stojace w zdaniu — te nie stoja
   w zdaniu, tylko SA cala pozycja listy. Czlowiek na telefonie celuje
   w wiersz, nie w slowa. Rozciagniecie linku na caly wiersz nie zmienia
   wygladu, a podnosi cel z 19px do wysokosci pozycji.
   ============================================================ */
.au-sprawdz__lista a {
    display: block;
    min-height: 24px;
}

@media (max-width: 900px) {
    .au-sprawdz__lista li {
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }
}

/* ============================================================
   ZAKRES OFERTY: CZTERY KOLUMNY ZAMIAST 26 AKORDEONOW

   Bylo 1719 slow i 2638 px, w ktorych zakres byl schowany za
   26 klinieciami. Teraz ten sam zakres jako cztery listy do
   przeczytania wzrokiem — bo to jest ta jedna informacja, po
   ktora ludzie wchodza na strone ofertowa.
   ============================================================ */
.au-zakres {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.5vw, 40px);
    margin-top: clamp(32px, 4vw, 56px);
}

.au-zakres__title {
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-primary);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.au-zakres__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.au-zakres__lista li {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
}

/* Ptaszek zamiast kropki: to jest lista tego, co DOSTAJESZ. */
.au-zakres__lista li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 1.15em;
    width: 11px;
    height: 6px;
    border-left: 2px solid #d63200;
    border-bottom: 2px solid #d63200;
    transform: rotate(-45deg);
}

.au-zakres__stopka {
    max-width: 820px;
    margin: clamp(32px, 4vw, 52px) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
    text-align: left;
}

.au-zakres__stopka a { color: #b32900; font-weight: 600; }

@media (max-width: 1100px) {
    .au-zakres { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .au-zakres { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ============================================================
   HERO PODSTRON: 201 px CZYSTEGO PADDINGU NA DWIE LINIJKI

   Zmierzone: padding 100/100 px przy 180-290 znakach tresci, czyli
   hero po 366-410 px, z czego ponad polowa to pusta przestrzen.
   Na zrzucie wyglada to jak niedokonczona strona, a nie jak oddech.
   ============================================================ */
.section.legal-hero,
section.legal-hero,
.section.section--hero,
section.section--hero {
    padding-top: clamp(40px, 4.5vw, 64px) !important;
    padding-bottom: clamp(40px, 4.5vw, 64px) !important;
}

/* ============================================================
   ZNAK MARKI

   Do wordmarku dochodzi znak: dwa zachodzace prostokaty — lewy
   wygaszony (strona, ktora klient ma), prawy pomaranczowy z ptaszkiem
   (ta, ktora dostanie). Caly nasz produkt w jednym symbolu, czytelny
   przy 30 px.

   Rysowany inline w SVG: skaluje sie bez pliku, nie generuje zapytania
   sieciowego i dziedziczy kolor po naglowku (ciemny/jasny).
   ============================================================ */
.au-logo {
    display: inline-flex;
    align-items: center;
    gap: .5em;
}

.au-logo__znak {
    flex: none;
    height: calc(var(--au-logo-h, 44px) * .62);
    width: auto;
    /* Wygaszony prostokat bierze kolor z otoczenia, wiec znak dziala
       zarowno na ciemnym pasku, jak i na bialej stopce. */
    color: currentColor;
}

.au-logo__tekst {
    display: inline-flex;
    align-items: baseline;
    gap: .28em;
    line-height: 1;
}

/* Na waskim ekranie zostaje sam znak plus nazwa w mniejszym stopniu —
   pelny lockup nie miescil sie obok przycisku menu. */
@media (max-width: 420px) {
    .au-logo { gap: .38em; }
    .au-logo__znak { height: calc(var(--au-logo-h, 44px) * .54); }
}

/* ============================================================
   ZAKRES OFERTY NA CIEMNYM TLE

   Wpadka, ktora sam zrobilem: sekcja ma klase .section--hero, ktora
   wczesniejsza regula w tym pliku maluje na ciemno, a liste zakresu
   ostylowalem kolorami dla jasnego tla.

   ZMIERZONE:
     naglowek kolumny  rgb(30,42,53) na rgb(20,30,43)  = 1.15:1
     pozycja listy     rgb(75,83,93) na rgb(20,30,43)  = 2.16:1
   Prog dla tekstu to 4.5:1. To bylo praktycznie niewidoczne — i to
   akurat na liscie tego, co klient dostaje za swoje pieniadze.
   ============================================================ */
.section--hero .au-zakres__title,
.section--dark .au-zakres__title {
    color: #fff;
}

.section--hero .au-zakres__lista li,
.section--dark .au-zakres__lista li,
.section--hero .au-zakres__stopka,
.section--dark .au-zakres__stopka {
    color: rgba(255, 255, 255, .82);
}

.section--hero .au-zakres__stopka,
.section--dark .au-zakres__stopka {
    border-top-color: rgba(255, 255, 255, .14);
}

.section--hero .au-zakres__stopka a,
.section--dark .au-zakres__stopka a {
    color: #ff7a4d;
}

/* Ptaszek na ciemnym tle potrzebuje jasniejszego pomaranczu — #d63200
   na granacie to 2.1:1, czyli plamka, ktorej nie widac. */
.section--hero .au-zakres__lista li::before,
.section--dark .au-zakres__lista li::before {
    border-left-color: #ff7a4d;
    border-bottom-color: #ff7a4d;
}

/* ============================================================
   PASEK Z CENA NA CIEMNYM TLE

   ZMIERZONE: kolor tekstu rgb(18,28,39) — czyli granat — na tle
   rgba(255,60,0,.04) polozonym na granacie. Praktycznie jeden kolor.
   Do tego cena mialaa 13 px.

   To jest NAJWAZNIEJSZA liczba na stronie ofertowej. Trzynascie
   pikseli w kolorze tla to nie jest niedopatrzenie stylu, to jest
   ukrycie ceny — dokladnie odwrotnie niz obiecuje reszta strony
   ("cena podana z gory, nic nie dochodzi na koncu").
   ============================================================ */
.section--hero .pack-ribbon,
.section--dark .pack-ribbon {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    gap: var(--space-5);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.section--hero .pack-ribbon,
.section--hero .pack-ribbon__pill--label,
.section--dark .pack-ribbon,
.section--dark .pack-ribbon__pill--label {
    color: rgba(255, 255, 255, .72);
}

/* Cena: duza i biala. 16.8:1 na granacie. */
.section--hero .pack-ribbon__price,
.section--dark .pack-ribbon__price {
    display: block;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
    letter-spacing: -.01em;
}

.section--hero .pack-ribbon__note,
.section--dark .pack-ribbon__note {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, .62);
}

.section--hero .pack-ribbon__pill--price,
.section--dark .pack-ribbon__pill--price {
    display: block;
    text-align: left;
}

.section--hero .pack-ribbon__sep,
.section--dark .pack-ribbon__sep {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, .16);
}

@media (max-width: 620px) {
    .section--hero .pack-ribbon,
    .section--dark .pack-ribbon { gap: var(--space-3); }
    .section--hero .pack-ribbon__sep,
    .section--dark .pack-ribbon__sep { display: none; }
    .section--hero .pack-ribbon__pill--price,
    .section--dark .pack-ribbon__pill--price { text-align: center; }
}

/* ============================================================================
   1. TOKENY — JEDNO ZRODLO PRAWDY
   ============================================================================

   Znalezione przy audycie:
     --gap-cards: 27px        wartosc spoza skali 4/8 px
     --color-orange           duplikat --color-primary (#ff3c00)
     --color-navy             duplikat --color-dark (#121c27)
     --color-cream            duplikat --color-bg-alt (#f1eeee)
     --color-white            duplikat --color-bg (#fff)
     --color-text-muted / --color-text-light / --color-text-body
                              trzy prawie identyczne szarosci
     --section-padding: 120px zdefiniowany, nigdzie nieuzywany, sztywny px
     brak tokenu gutter, brak tokenu transition, skala tekstu bez clamp()

   Duplikatow nie usuwam z main.css (jest zminifikowany i uzywany w setkach
   miejsc) — przypinam je do tokenow zrodlowych, zeby zmiana koloru marki
   w jednym miejscu zmieniala wszystkie.
   ============================================================================ */
:root {
    /* Margines boczny: nigdy mniej niz 16 px, na duzym ekranie 32 px. */
    --gutter: clamp(1rem, 4vw, 2rem);

    /* Rytm pionowy sekcji — plynny zamiast sztywnych 120 px. */
    --section-y: clamp(3rem, 7vw, 7.5rem);
    --section-y-tight: clamp(2.5rem, 5vw, 4.5rem);

    /* Odstep w siatkach kart. Bylo 27 px — poza skala. */
    --gap-cards: var(--space-6);

    /* Jeden czas i jedna krzywa dla wszystkich interakcji. */
    --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Duplikaty przypiete do zrodel — jedna zmiana koloru marki wystarczy. */
    --color-orange: var(--color-primary);
    --color-navy: var(--color-dark);
    --color-cream: var(--color-bg-alt);
    --color-white: var(--color-bg);
    --color-text-light: var(--color-text-body);
    --color-body: var(--color-text);

    /* Pomarancz przyciemniony do bialego malego tekstu (4.87:1). */
    --color-primary-ink: #d63200;
    --color-primary-ink-strong: #b32900;
}

/* ============================================================================
   1b. JEDEN SYSTEM KONTENERA
   ============================================================================

   ZMIERZONE na stronie glownej, 1440 px:
     .container.topbar__inner   max-width 1360 px   lewa krawedz 30 px
     .container.navbar__inner   max-width 1360 px   lewa krawedz 30 px
     .container.hero__inner     max-width 1360 px   lewa krawedz 30 px
     .container (8 sekcji)      max-width 1292 px   lewa krawedz 64 px

   Czyli logo, menu i hero stoja 34 px na lewo od kazdego naglowka ponizej.
   Na 768 px lewe krawedzie tekstu wypadaly w czterech roznych miejscach:
   24, 54, 210, 267.

   PRZYCZYNA: piec konkurujacych regul w main.css i ux-fixes.css:
     .container            -> var(--container)   1292
     body .container       -> 1600px             (sztywna, wyzsza specyficznosc)
     html body .container  -> 1200px             (jeszcze wyzsza)
     .topbar__inner        -> var(--container-wide)
     .container (ux-fixes) -> 100%
   Wygrywa raz jedna, raz druga — stad dwie rozne szerokosci na jednej stronie.

   Ustawiam jedna regule o specyficznosci wyzszej niz `html body`,
   zeby zakonczyc te wojne zamiast dokladac do niej kolejny glos.
   ============================================================================ */
html body .container,
html body .container.topbar__inner,
html body .container.navbar__inner,
html body .container.hero__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    box-sizing: border-box;
}

/* Sekcje pelnoszerokosciowe: tlo na cala szerokosc, tresc w kontenerze. */
html body section > .container,
html body header .container,
html body footer .container {
    max-width: var(--container);
}

/* ============================================================================
   2. RYTM PIONOWY SEKCJI
   ============================================================================

   ZMIERZONE na osmiu zakladkach: trzynascie roznych par padding gora/dol,
   z czego cztery ASYMETRYCZNE:

     .offer                57/101      strona glowna
     .portfolio            100/50      strona glowna
     section--light--tight 64/48       /websites/
     section--dark--tight  64/72       /websites/

   Asymetria jest gorsza niz sama roznorodnosc: sekcja "wisi" — dol nie
   odpowiada gorze, wiec odstepy miedzy sekcjami sa raz wieksze, raz
   mniejsze, choc nic tego nie uzasadnia. Przy przewijaniu czyta sie to
   jako niedokonczone, nawet gdy nikt nie potrafi wskazac czemu.

   Sprowadzam do dwoch wartosci opartych na tokenach:
     --section-y        clamp(3rem, 7vw, 7.5rem)   sekcja zwykla
     --section-y-tight  clamp(2.5rem, 5vw, 4.5rem) sekcja zageszczona

   Hero i paski (trusted, si-audit-strip) zostaja z wlasnym rytmem —
   one celowo sa plytsze i nie sa sekcjami tresci.
   ============================================================================ */
html body section.section,
html body section.offer,
html body section.portfolio,
html body section.about-reviews {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

html body section.section--tight,
html body section.si-audit-strip {
    padding-top: var(--section-y-tight);
    padding-bottom: var(--section-y-tight);
}

/* Hero podstron ma wlasny, plytszy rytm — ustawiony wyzej w tym pliku. */
html body section.legal-hero,
html body section.section--hero {
    padding-top: clamp(2.5rem, 4.5vw, 4rem);
    padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

/* Pasek zaufania to nie sekcja tresci, tylko listwa. */
html body section.trusted {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

/* Dwie sekcje na /websites/ mialy padding 64/48 i 64/72 — gora i dol
   rozne, wiec sekcja "wisi". Reguly pochodza z pages-websites.css
   z selektorem ID (body.pg-websites #opinie), ktory bije specyficznoscia
   wszystko powyzej. Nie walcze z nia o wartosc — wyrownuje tylko gore
   do dolu, bo to asymetria jest wada, nie sama wartosc. */
html body.pg-websites section#opinie,
html body.pg-site-check section#opinie {
    padding-top: clamp(2rem, 3.5vw, 3rem);
    padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

html body.pg-websites section#more-info {
    padding-top: var(--section-y-tight);
    padding-bottom: var(--section-y-tight);
}

/* ============================================================================
   3. TYPOGRAFIA — CZYTELNOSC NA TELEFONIE
   ============================================================================

   ZMIERZONE na /websites/, 375 px, tylko elementy z prawdziwa trescia
   (akapity i pozycje list dluzsze niz 40 znakow):

     15 px  21 elementow      <- dominujacy rozmiar tresci
     14 px  12
     13 px   7
     12 px   2

   Czyli na telefonie WIEKSZOSC tresci ma 15 px lub mniej, a dziewiec
   elementow 13 px i mniej. Wymog to minimum 16 px dla tresci i nic
   ponizej 14 px.

   To nie jest kwestia gustu. Ponizej 16 px Safari na iOS powieksza
   widok przy dotknieciu pola formularza, a tekst 13 px czyta sie zle
   przy sloncu, w rekawicach albo po prostu po czterdziestce — czyli
   dokladnie w warunkach, w jakich fachowiec zaglada na telefon.

   Podnosze SKALE, nie pojedyncze miejsca: --text-sm z 15 na 16 px,
   --text-xs z 13 na 14 px. Dzieki temu poprawia sie wszystko naraz
   i nic nie wypadnie z systemu przy nastepnej zmianie.
   ============================================================================ */
@media (max-width: 768px) {
    :root {
        --text-xs:   0.875rem;    /* 14 px — etykiety, pigulki, drobny druk */
        --text-sm:   1rem;        /* 16 px — tresc w kartach i listach */
        --text-base: 1.0625rem;   /* 17 px — akapity wiodace */
        --leading-normal: 1.6;
    }

    /* Elementy z wpisanym na sztywno rozmiarem ponizej progu. */
    .buy-box__small,
    .order-form__product-includes,
    .popup__subtitle,
    .au-sprawdz__text--drobne {
        font-size: 0.875rem;
        line-height: 1.6;
    }
}

/* Pola formularza: ponizej 16 px iOS powieksza widok przy fokusie,
   co wyrzuca uklad i wyglada jak blad strony. Dotyczy KAZDEJ szerokosci. */
input, textarea, select {
    font-size: max(16px, var(--text-sm));
}

/* Naglowki wieloliniowe: bez pojedynczego slowa w ostatnim wierszu. */
h1, h2, .section-title, .au-zakres__title, .au-zmiana__title {
    text-wrap: balance;
}

p, li, .section-subtitle {
    text-wrap: pretty;
}

/* ============================================================================
   PODLOGA ROZMIARU TEKSTU NA TELEFONIE
   ============================================================================

   Zmierzone na dziesieciu zakladkach przy 375 px: 35 klas z trescia ponizej
   16 px, w tym zwykle <p> (71 elementow, 14 px), <li> (44, 14 px)
   i .pillar-item__body (31, 13 px).

   Wymienianie ich po jednej nie ma sensu — kazda nastepna sekcja dolozylaby
   kolejna. Ustawiam podloge dla tekstu TRESCI i wyliczam wyjatki, ktore
   maja prawo byc mniejsze: etykiety, pigulki, drobny druk pod polami
   i napisy w makiecie przegladarki w hero (te sa celowo miniaturowe,
   bo udaja zrzut ekranu).
   ============================================================================ */
@media (max-width: 768px) {
    main p,
    main li,
    .section-subtitle,
    [class*="__text"]:not([class*="label"]):not([class*="badge"]),
    [class*="__desc"],
    [class*="__body"],
    [class*="__lead"],
    [class*="__sub"]:not([class*="subtitle"]),
    [class*="__footnote"],
    [class*="__note"] {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Wyjatki: elementy, ktore maja byc mniejsze z definicji. */
    .hero__chrome-url,
    .hero__chrome-url-static,
    .hero__chrome-url-typed,
    .hero__wf-plabel,
    .au-krok__koszt,
    .au-zmiana__tag,
    .badge,
    .pillar__badge,
    .process__badge,
    .section-label,
    .kt-form__opt,
    .au-review__source {
        font-size: var(--text-xs);
    }

    /* Zgoda pod formularzem to tekst prawny — musi byc czytelny,
       a nie schowany. Privacy Act 1988 mowi o zrozumialej informacji. */
    .kt-form__check-text,
    .order-form__checkbox-text {
        font-size: 0.9375rem;
        line-height: 1.55;
    }
}

/* Ostatnie klasy ponizej progu — zmierzone po poprzedniej poprawce.
   Wiekszosc siedzi w popupach (domyslnie ukrytych), wiec nie wylapala
   ich regula na `main`. */
@media (max-width: 768px) {
    .popup__subtitle,
    .popup p,
    .popup li,
    .offer-card__upgrade-note,
    .about-reviews__card-text,
    .buy-box__lead,
    .offer-card__list li,
    .pillar__sub,
    .process__text,
    .info-note,
    .info-cta__text,
    .on-do-card__desc,
    .on-do-panel__desc,
    .on-do__footnote,
    .legal-doc__lead,
    .legal-doc__signoff,
    .au-sprawdz__text,
    .buy-box__extras-text,
    .buy-box__mail-text {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* ============================================================================
   HERO PODSTRON Z POWROTEM JASNE — KONIEC GRANATU POD GRANATEM
   ============================================================================

   ZMIERZONE na czterech zakladkach:
     /about/, /our-work/, /reviews/, /websites/
     hero rgb(20,30,43)  ->  sekcja ponizej rgb(18,28,39)
     kontrast 1.02:1

   Dwa granatowe bloki jeden pod drugim, nie do odroznienia. Ten stan
   wprowadzilem sam: hero bylo jasne, ale kolor tytulu zmienil sie na
   bialy i wyszedl bialy tekst na bialym tle, wiec zamiast poprawic
   KOLOR TEKSTU, przyciemnilem TLO. Naprawilem objaw, nie przyczyne,
   i zrobilem z tego druga wade.

   Teraz porzadnie: hero jasne, tekst ciemny. Rytm podstrony wraca do
   jasny -> granat -> jasny, czyli sekcje rozdzielaja sie same, bez
   kreski ratunkowej pod spodem.

   Kontrast po zmianie: #1e2a35 na #f6f5f3 = 12.6:1.
   ============================================================================ */
.section.legal-hero,
.section.section--hero,
section.legal-hero,
section.section--hero {
    background: linear-gradient(180deg, #ffffff 0, #f6f5f3 100%) !important;
}

.section.legal-hero .section-title,
.section.section--hero .section-title,
.section.legal-hero .breadcrumbs__current,
.section.section--hero .breadcrumbs__current,
.section.legal-hero h1,
.section.section--hero h1 {
    color: var(--color-text);
}

.section.legal-hero .section-subtitle,
.section.section--hero .section-subtitle {
    color: var(--color-text-body);
}

.section.legal-hero .breadcrumbs a,
.section.section--hero .breadcrumbs a {
    color: var(--color-text-muted);
}

.legal-hero .breadcrumbs a:hover,
.section--hero .breadcrumbs a:hover {
    color: var(--color-primary-ink-strong);
}

/* Kreska ratunkowa pod hero nie jest juz potrzebna — sasiedztwo
   jasne/ciemne samo tworzy granice. */
.legal-hero::after,
.section--hero::after {
    display: none;
}

/* Pasek z cena na /websites/ wraca na jasne tlo. */
.section--hero .pack-ribbon {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

.section--hero .pack-ribbon,
.section--hero .pack-ribbon__pill--label {
    color: var(--color-text-body);
}

.section--hero .pack-ribbon__price { color: var(--color-text); }
.section--hero .pack-ribbon__note  { color: var(--color-text-muted); }
.section--hero .pack-ribbon__sep   { background: var(--color-border); }

/* Lista zakresu oferty tez wraca na ciemny tekst. */
.section--hero .au-zakres__title      { color: var(--color-text); }
.section--hero .au-zakres__lista li,
.section--hero .au-zakres__stopka     { color: var(--color-text-body); }
.section--hero .au-zakres__stopka     { border-top-color: var(--color-border); }
.section--hero .au-zakres__stopka a   { color: var(--color-primary-ink-strong); }
.section--hero .au-zakres__lista li::before {
    border-left-color: var(--color-primary-ink);
    border-bottom-color: var(--color-primary-ink);
}

/* ============================================================================
   /about/ — CZTERY ROZNE SZEROKOSCI W JEDNEJ SEKCJI
   ============================================================================

   ZMIERZONE przy 1280 px, sekcja .on-do:

     .container         left 0     szer 1264
     .on-do__head       left 222   szer  820   (naglowek, wysrodkowany)
     .on-do__grid       left  82   szer 1100   (karty)
     .on-do-panel       left  32   szer 1200   ("What we don't do")
     .on-do__footnote   left 222   szer  820

   Panel wystaje 50 px na lewo od kart i 50 px na prawo. Przy przewijaniu
   widac, ze blok "podskakuje" w bok wzgledem tego nad nim — i to jest
   dokladnie ten rodzaj bledu, ktory czyta sie jako niedbalstwo, choc
   nikt nie potrafi wskazac, co konkretnie jest nie tak.

   Sprowadzam wszystkie bloki tresci do jednej miary 1100 px, tej samej,
   ktora ma siatka kart. Naglowek zostaje wezszy i wysrodkowany — to
   swiadome, krotsza miara czyta sie lepiej przy tekscie centrowanym.
   ============================================================================ */
body.pg-about .on-do-panel,
body.pg-about .on-do__footnote {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* Trzecia karta rozciagnieta na obie kolumny miala tresc w dwoch
   kolumnach, ale ikona i tytul zostawaly nad lewa — teraz caly blok
   ma te sama gorna krawedz co reszta. */
body.pg-about .on-do__grid > .on-do-card:nth-child(3) {
    align-items: start;
}

/* ============================================================================
   "FIFTEEN YEARS IN EUROPE. AUSTRALIA IS THE NEW PART."
   ============================================================================

   Sekcja odpowiada na pytanie, ktore odbiorca zadaje przed wszystkimi
   innymi. Stoi zaraz po hero, na jasnym tle — wiec razem z ciemna sekcja
   ponizej daje rytm jasny/ciemny/jasny i przy okazji rozwiazuje problem
   granatu pod granatem u zrodla.
   ============================================================================ */
.au-poczatek__tresc {
    max-width: 820px;
    margin: 0 auto;
}

.au-poczatek__lead {
    margin: 0 0 var(--space-5);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-text);
    text-align: left;
}

.au-poczatek__text {
    margin: 0 0 var(--space-4);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed, 1.7);
    color: var(--color-text-body);
    text-align: left;
}

.au-poczatek__fakty {
    list-style: none;
    margin: clamp(32px, 4vw, 56px) auto 0;
    padding: var(--space-8) 0 0;
    max-width: 1100px;
    border-top: 2px solid var(--color-border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.au-poczatek__fakt {
    text-align: center;
}

.au-poczatek__liczba {
    display: block;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-primary);
}

.au-poczatek__opis {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
    max-width: 24ch;
    margin-inline: auto;
}

@media (max-width: 760px) {
    .au-poczatek__fakty { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ============================================================================
   REALIZACJE POGRUPOWANE PO BRANZY
   ============================================================================

   94 realizacje w 25 grupach. Grupowanie po BRANZY, nie po miescie:
   polskie miasto nie znaczy dla Australijczyka nic, a branza znaczy
   wszystko — chce zobaczyc, czy robilismy juz cos dla takiej firmy
   jak jego.

   Kazda grupa ma id rowne slugowi branzy, wiec /our-work/#solar-energy
   dziala jako adres od razu, zanim powstana osobne podstrony branzowe.
   ============================================================================ */
.au-branza {
    margin-top: clamp(40px, 5vw, 72px);
    scroll-margin-top: 120px;
}

.au-branza:first-of-type { margin-top: var(--space-8); }

.au-branza__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
}

.au-branza__title {
    margin: 0;
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--color-text);
}

.au-branza__ile {
    flex: none;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary-ink);
    white-space: nowrap;
}

@media (max-width: 520px) {
    .au-branza__head { flex-wrap: wrap; gap: var(--space-2); }
}

/* ============================================================================
   LISTA BRANZ NA LANDINGU
   ============================================================================
   Linkowanie wewnetrzne miedzy 31 landingami. Bez niej kazdy z nich
   wisialby osobno, a crawler docieralby do nich wylacznie z /our-work/.
   ============================================================================ */
.au-branze-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-2) var(--space-5);
}

.au-branze-lista a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    min-height: 44px;
}

.au-branze-lista a:hover,
.au-branze-lista a:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-primary-ink-strong);
}

.au-branze-lista__ile {
    flex: none;
    min-width: 2rem;
    text-align: center;
    padding: .15em .5em;
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-body);
}

.au-branze-lista a:hover .au-branze-lista__ile {
    background: #fff;
}

/* Numer punktu w ciemnej sekcji landinga — to liczba, nie naglowek. */
.section--dark .au-trust__card .au-trust__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-3);
}

/* Naglowek grupy branzowej jest linkiem na landing — ma wygladac jak
   naglowek, dopoki nie najedziesz. */
.au-branza__title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.au-branza__title a:hover,
.au-branza__title a:focus-visible {
    color: var(--color-primary-ink-strong);
    border-bottom-color: currentColor;
}

/* ============================================================================
   STOPKA: TRZY KOLUMNY ZAMIAST DWOCH
   ============================================================================
   Doszedl blok "Websites by trade", a siatka miala sztywne dwie kolumny
   (zmierzone: 316px 316px) — trzeci blok zawinal sie pod pierwszy i stopka
   wygladala na rozjechana. Trzy kolumny od 900px, dwie na tablecie,
   jedna na telefonie.
   ============================================================================ */
@media (min-width: 900px) {
    html body .footer__links-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-8);
        align-items: start;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    html body .footer__links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

/* Lista branz w stopce ma byc gesta — to skrot, nie sekcja. */
.footer__links li a {
    display: inline-block;
    min-height: 32px;
    line-height: 1.9;
}

/* ============================================================================
   LINK POMIJAJACY NAWIGACJE (WCAG 2.4.1, poziom A)
   ============================================================================
   Schowany do momentu sfokusowania klawiatura. Wtedy wjezdza na wierzch,
   w kolorach marki, z wyraznym obrysem — musi byc widoczny natychmiast
   i bez watpliwosci, bo osoba, ktora go uzywa, nie widzi reszty strony.
   ============================================================================ */
.au-skip {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 10000;
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary-ink, #d63200);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
    box-shadow: var(--shadow-lg);
    transition: transform 150ms ease;
}

.au-skip:focus,
.au-skip:focus-visible {
    transform: translate(-50%, 0);
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* Cel skoku nie moze chowac sie pod przyklejonym naglowkiem. */
#main { scroll-margin-top: 100px; }

/* Etykiety w formularzu wyceny — doszly razem z poprawka WCAG 3.3.2. */
.wycena__pole { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.wycena__label { font-size: var(--text-sm); font-weight: 600; color: inherit; }
.wycena__opt { font-weight: 400; opacity: .7; }

/* ============================================================================
   SKOK DO BRANZY NA /our-work/
   ============================================================================
   356 kart w 31 grupach to bez nawigacji sciana. Pastylki prowadza na
   landingi branzowe, a nie na kotwice w tej samej stronie — na landingu
   jest tekst o danej branzy, wiec to lepszy cel niz zjechanie o ekran nizej.
   ============================================================================ */
.au-skoki {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-8) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.au-skoki__poz {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    font-size: var(--text-sm);
    color: var(--color-text-body);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.au-skoki__poz:hover,
.au-skoki__poz:focus-visible {
    background: var(--color-bg-alt);
    border-color: var(--color-primary-ink);
    color: var(--color-text);
}

.au-skoki__ile {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary-ink);
}

@media (max-width: 620px) {
    .au-skoki { gap: var(--space-1) var(--space-2); }
    .au-skoki__poz { min-height: 44px; }
}

/* ============================================================================
   SKOK DO BRANZY NA TELEFONIE: JEDEN PRZEWIJANY RZAD
   ============================================================================

   ZMIERZONE: przy 375 px zawijana lista 31 pastylek miala 1251 px wysokosci —
   czyli ponad caly ekran samych etykiet, zanim czytelnik zobaczyl jakakolwiek
   prace. To gorsze niz sciana, ktora ta nawigacja miala rozwiazac.

   Jeden rzad przewijany w poziomie: 44 px zamiast 1251. Wszystkie 31 branz
   nadal osiagalne, ale nie zajmuja ekranu. Przewijanie poziome jest tu
   CELOWE i zamkniete w tym elemencie — strona nadal nie przewija sie w bok.
   ============================================================================ */
@media (max-width: 860px) {
    .au-skoki {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-3);
        /* Wysuwa sie na margines kontenera, zeby bylo widac, ze da sie
           przewinac — pastylka urwana przy krawedzi jest tu informacja. */
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        scrollbar-width: thin;
    }

    .au-skoki__poz {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* Cienki pasek przewijania zamiast domyslnego, grubego. */
    .au-skoki::-webkit-scrollbar { height: 4px; }
    .au-skoki::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: var(--radius-pill);
    }
}

/* ============================================================================
   SZEROKOSCI: KONTENER MA ROSNAC NA DUZYM EKRANIE
   ============================================================================

   CO ZEPSULEM WCZESNIEJ

   Ujednolicajac kontener (bylo piec konkurujacych regul: 1292, 1600, 1200,
   --container-wide i 100%) przykleilem WSZYSTKO do sztywnych 1292 px —
   razem z paskiem gornym, nawigacja i hero, ktore w projekcie mialy wlasny,
   szerszy kontener.

   ZMIERZONE, /websites/, szerokosc kontenera i procent ekranu:
     1280 px -> 1260  (98%)
     1440 px -> 1292  (90%)
     1600 px -> 1292  (81%)
     1920 px -> 1292  (67%)   <- jedna trzecia ekranu to pusty margines

   1920 to najpopularniejsza duza rozdzielczosc. Strona siedziala tam
   w dwoch trzecich szerokosci i wygladala na zaciasna.

   POPRAWKA

   min(94vw, 1520px) zamiast sztywnych 1292. Na kazdym ekranie zostaje
   6% marginesu, a na duzym uklad rosnie do 1520 zamiast stac w miejscu.
   Wyrownanie lewych krawedzi zostaje — wszystkie kontenery nadal licza
   sie z tej samej reguly, wiec nie wraca problem "logo 34 px na lewo
   od naglowkow".

   Dlugosc wiersza tekstu sie nie psuje: akapity i podtytuly maja wlasne
   max-width (820 ch-owe miary), wiec szerzej robi sie tylko siatkom,
   ktore z tego korzystaja.
   ============================================================================ */
:root {
    --container: min(94vw, 1520px);
    --container-narrow: min(92vw, 820px);
}

/* Siatki wewnetrzne mialy wlasne, przypadkowe miary: 1228, 1130, 1100, 1096.
   Teraz wypelniaja kontener — jedna krawedz zamiast czterech. */
body.pg-about .on-do__grid,
body.pg-about .on-do-panel,
body.pg-about .on-do__footnote,
.kt-form__grid,
.au-poczatek__fakty {
    max-width: none;
}

/* ============================================================================
   NAGLOWEK NA CIEMNYM TLE: BLOK I TEKST MUSZA SIE ZGADZAC
   ============================================================================

   ZMIERZONE, /our-work/, 1600 px:
     .au-section__header--light   left 430, szer 720, marginesy 358/358
     tytul w nim                  text-align: start, left 430

   Czyli blok byl WYSRODKOWANY, a tekst w nim wyrownany DO LEWEJ — lewa
   kolumna plywajaca na srodku strony. Z daleka czyta sie to jako uklad,
   ktory sie zsunal, i to jest ten sam rodzaj bledu, co "logo 34 px na lewo
   od naglowkow", tylko odwrotny.

   Wprowadzilem to sam: centrujac blok (margin-inline: auto) nie ruszylem
   tekstu w srodku. Dla naglowkow, ktorych tytul BYL wysrodkowany, wyszlo
   dobrze; dla tych z tytulem do lewej — zle.

   Teraz jedno z drugim sie zgadza: na ciemnym tle centrujemy oba.
   ============================================================================ */
.au-section__header--light,
.au-section__header--srodek {
    text-align: center;
}

.au-section__header--light .section-title,
.au-section__header--light .section-subtitle,
.au-section__header--light h1,
.au-section__header--light h2,
.au-section__header--srodek .section-title,
.au-section__header--srodek .section-subtitle {
    text-align: center;
}

/* Podtytul w wysrodkowanym naglowku ma zostac czytelny — bez tego
   rozjezdza sie na cala szerokosc bloku. */
.au-section__header--light .section-subtitle,
.au-section__header--srodek .section-subtitle {
    max-width: 62ch;
    margin-inline: auto;
}

/* ============================================================================
   DLUGOSC WIERSZA — SKUTEK UBOCZNY POSZERZENIA KONTENERA
   ============================================================================

   ZMIERZONE po zmianie kontenera na min(94vw, 1520px), przy 1600 px:
     /about/    akapity ~198 znakow w wierszu
     /contact/  ~178
     /our-work/ ~169
     /          ~109

   Optimum to 45-75 znakow. Powyzej okolo dziewiecdziesieciu oko gubi
   poczatek nastepnego wiersza i czytanie zwalnia — a tekst, ktory ma
   przekonac nieufnego czlowieka, nie moze byc meczacy.

   To ja to spowodowalem: poszerzajac kontener, nie dalem akapitom
   wlasnej miary, wiec rozciagnely sie razem z nim. Naprawiam u zrodla:
   miara na akapitach, nie na kontenerze — siatki i zdjecia maja
   korzystac z pelnej szerokosci, tekst nie.

   Karty i kolumny sa juz waskie, wiec ich nie dotykam (:not).
   ============================================================================ */
main p:not([class*="card"] p):not([class*="__kol"] p),
main li:not([class*="card"] li):not([class*="__kol"] li),
.section-subtitle,
.au-zakres__stopka,
.on-do__footnote,
.au-poczatek__lead,
.au-poczatek__text,
.au-dlaczego__lead,
.au-dlaczego__uwaga,
.au-contact__note,
.legal-doc__lead {
    /* NIE 72ch. Jednostka ch to szerokosc zera, a w GT Walsheim zero jest
       duzo szersze niz sredni znak — 72ch dalo 820 px, czyli 110 realnych
       znakow w wierszu. Zmierzone przez Range, znak po znaku, a nie
       oszacowane.

       34rem = 544px NIEZALEZNIE od stopnia pisma. Wczesniej bylo 30em: em skaluje sie
       z fontem, wiec dla 14-15px dawalo 420px i ~35 znakow w wierszu - punkty
       regulaminu i listy na /about/ wygladaly jak poszatkowane. W rem: ~68 znakow
       przy 18px i ~78 przy 14px. Oba czytelne, zadnego siekania. */
    max-width: 34rem;
}

/* Wysrodkowany naglowek trzyma swoja miare posrodku, a nie przy lewej. */
.au-section__header--light .section-subtitle,
.au-section__header--srodek .section-subtitle,
.legal-hero .section-subtitle,
.section--hero .section-subtitle {
    margin-inline: auto;
}

/* Pozycje list w kartach i siatkach maja byc waskie razem z karta,
   a nie ciete na 72ch w srodku waskiej kolumny. */
[class*="card"] p,
[class*="card"] li,
[class*="__kol"] p,
[class*="__kol"] li,
.au-zakres__lista li {
    max-width: none;
}
/* Tekst w kartach tez potrzebuje miary — przy kontenerze 1520 px karty
   w siatce dwu- i trzykolumnowej robia sie na tyle szerokie, ze wiersz
   dochodzil do 98 znakow. Miara szersza niz w akapitach ciaglych, bo
   karta jest krotka i oko nie ma tak daleko do poczatku nastepnej linii. */
.au-trust__text,
.on-do-card__desc,
.au-zmiana__text {
    max-width: 38rem;
}

/* ============================================================================
   RYTM TLA: ZADNE DWIE SASIEDNIE SEKCJE O TYM SAMYM KOLORZE
   Co druga sekcja dostaje kremowe tlo (--color-bg-alt). To jest regula
   SEKCJI. Uwaga historyczna: przez pewien czas ta lista selektorow byla
   sklejona z lista akapitow wyzej (brakowalo nawiasow), przez co akapity
   w ciemnych kartach dostawaly kremowe tlo pod bialym tekstem.
   ============================================================================ */
html body section.au-zmiana,
html body.pg-about section.au-poczatek {
    background: var(--color-bg-alt);
}

/* /site-check/: sekcja po hero — ta sama zasada. */
html body.pg-site-check section.section--light + section.section:not([class*="--"]) {
    background: var(--color-bg-alt);
}

/* /websites/: pasek audytu stal na tym samym kremowym co sekcja nad nim. */
html body.pg-websites section.si-audit-strip {
    background: var(--color-bg);
}

/* ============================================================================
   WYSRODKOWANY BLOK SZERSZY NIZ TEKST W NIM
   ============================================================================

   ZMIERZONE, /about/, sekcja "Fifteen years", 1600 px:
     kontener       40 - 1544   srodek 792
     naglowek      432 - 1152   srodek 792   (wysrodkowany)
     blok tresci   382 - 1202   srodek 792   (wysrodkowany, 820 px)
     akapit        382 -  982   srodek 682   (600 px, przy lewej krawedzi bloku)

   Czyli akapit jest o 110 px na lewo od osi naglowka. Blok byl szerszy
   niz miara tekstu, wiec tekst przykleil sie do jego lewej krawedzi
   i cala kolumna wyszla asymetryczna wzgledem tego, co nad nia.

   Poprawka: blok dostaje te sama miare co tekst, wiec obie osie sie
   pokrywaja. Tekst zostaje wyrownany do lewej — to jest wlasciwe dla
   dluzszego czytania — ale kolumna stoi tam, gdzie powinna.
   ============================================================================ */
.au-poczatek__tresc {
    max-width: 36rem;
}

.au-poczatek__lead,
.au-poczatek__text {
    max-width: none;
}

/* ============================================================
   STRONA GLOWNA JAKO JEDNA HISTORIA
   (przebudowa po uwagach: "trzy kroki musza byc duzo lepsze",
    "old site -> new site do smietnika", "why $1,500 fatalne",
    "calosc spojna, logiczna, jasna")
   ============================================================ */

/* ---------- Jak to dziala: trzy polaczone kroki ---------- */
.au-kroki {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: krok;
    position: relative;
}

/* Linia laczaca kroki — biegnie za kartami na wysokosci ikon. */
.au-kroki::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: calc(var(--space-10) + 28px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-border) 0 10px, transparent 10px 18px);
    z-index: 0;
}

.au-krok {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-10) var(--space-8) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Duzy numer w tle: czytelna kolejnosc bez malej etykiety "01". */
.au-krok__nr {
    position: absolute;
    top: -.12em;
    right: .08em;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 8.5rem;
    line-height: 1;
    color: var(--color-bg-alt);
    letter-spacing: -.04em;
    pointer-events: none;
    user-select: none;
}
.au-krok--decyzja .au-krok__nr { color: rgba(255, 60, 0, .10); }

.au-krok__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--color-bg-alt);
    color: var(--color-primary-ink);
}
.au-krok__ikona svg { width: 28px; height: 28px; }
.au-krok--decyzja .au-krok__ikona { background: var(--color-primary); color: #fff; }

.au-krok__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: -.01em;
    color: var(--color-text);
    margin: 0;
    max-width: 12em;
}

/* Tekst kroku: jedno-dwa zdania, wiersz na 30-34 znaki nie moze wygladac
   na uciety — wiec zadnego waskiego limitu; szerokosc bierze z karty. */
html body .au-krok .au-krok__text {
    flex: 1;
    max-width: none;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
    margin: 0;
    text-wrap: pretty;
}
.au-krok__text strong { color: var(--color-text); }

.au-krok__czas {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.au-krok__btn {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: .85em 1.4em;
    border-radius: var(--radius-pill);
    border: 0;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    box-shadow: 0 8px 22px rgba(255, 60, 0, .25);
}
.au-krok__btn:hover { background: var(--color-primary-ink); transform: translateY(-2px); }
.au-krok__btn:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }

.au-krok__koszt {
    margin-top: auto;
    padding: .45em 1em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #e8f6ec;
    color: #1d6b3a;
}
.au-krok__koszt--platne { background: var(--color-primary); color: #fff; }

.au-krok--decyzja {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), 0 20px 50px rgba(255, 60, 0, .12);
}

.au-jak__gwarancja {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .6em;
    max-width: 44em;
    margin: var(--space-10) auto 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
    text-align: left;
    text-wrap: pretty;
}
.au-jak__gwarancja svg { flex: none; margin-top: .25em; color: var(--color-primary-ink); }

@media (max-width: 1024px) {
    .au-kroki { grid-template-columns: 1fr; }
    .au-kroki::before { display: none; }
    .au-krok__nr { font-size: 6.5rem; }
}

/* ---------- Co dostajesz: lista + jedna cena ---------- */
.au-oferta__uklad {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr);
    gap: var(--space-10);
    align-items: start;
}

.au-oferta__lista-wrap {
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

/* Lista w dwoch kolumnach zamiast jednej dlugiej — 17 pozycji na jednym
   ekranie zamiast 1000 px przewijania. */
html body .au-oferta__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}
html body .au-oferta__lista li {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    padding: .55em 0;
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--color-text);
    border: 0;
    max-width: none;
}
html body .au-oferta__lista .offer-card__li-icon { flex: none; margin-top: .15em; }
/* Podpowiedzi data-tip zostaja dla myszy; na dotyku nie ma "hover", wiec nie
   moga byc jedynym nosnikiem tresci — i nie sa, tekst pozycji wystarcza. */

.au-cena {
    position: sticky;
    top: 96px;
    padding: var(--space-8);
    background: var(--color-dark);
    color: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(18, 28, 39, .25);
}
.au-cena__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
.au-cena__kwota {
    margin: 0 0 var(--space-5);
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
}
.au-cena__waluta {
    font-size: .38em;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
    vertical-align: .55em;
    margin-left: .3em;
}
.au-cena__warunki {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3);
}
.au-cena__warunki li {
    position: relative;
    padding-left: 1.6em;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, .85);
    max-width: none;
}
.au-cena__warunki li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: .9em;
    height: .5em;
    border-left: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-45deg);
}
.au-cena__btn {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: .6em;
    padding: 1em 1.4em;
    border-radius: var(--radius-pill);
    border: 0;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.au-cena__btn:hover { background: var(--color-primary-ink); transform: translateY(-2px); }
.au-cena__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.au-cena__dopisek {
    margin: var(--space-5) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, .6);
    max-width: none;
}
.au-cena__dopisek a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 1024px) {
    .au-oferta__uklad { grid-template-columns: 1fr; }
    .au-cena { position: static; }
}
@media (max-width: 640px) {
    html body .au-oferta__lista { grid-template-columns: 1fr; }
    .au-oferta__lista-wrap { padding: var(--space-6); }
}

/* ---------- Okno: dwa pola ---------- */
.popup--makieta { max-width: 640px; }
.popup--makieta .popup__body { padding-bottom: clamp(24px, 3vw, 36px); }

.au-makieta { display: grid; gap: var(--space-5); }
.au-makieta__pola { display: grid; gap: var(--space-4); }
.au-makieta__pole { display: grid; gap: var(--space-2); }
.au-makieta__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.au-makieta__input {
    width: 100%;
    padding: 1em 1.1em;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-text);
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.au-makieta__input:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(255, 60, 0, .15);
}
.au-makieta__input.is-invalid { border-color: var(--color-error); }

.au-makieta__co-dalej {
    margin: 0;
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    list-style: none;
    counter-reset: dalej;
    display: grid;
    gap: var(--space-3);
}
.au-makieta__co-dalej li {
    position: relative;
    padding-left: 2.2em;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
    max-width: none;
    counter-increment: dalej;
}
.au-makieta__co-dalej li::before {
    content: counter(dalej);
    position: absolute;
    left: 0;
    top: .15em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: .8em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.au-makieta__co-dalej strong { color: var(--color-text); }

.au-makieta__zgoda {
    display: flex;
    gap: .7em;
    align-items: flex-start;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
    cursor: pointer;
}
.au-makieta__zgoda input { flex: none; width: 1.15em; height: 1.15em; margin-top: .2em; accent-color: var(--color-primary); }
.au-makieta__zgoda a { color: var(--color-primary-ink); }

.au-makieta__submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .6em;
    width: 100%;
    padding: 1.05em 1.4em;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.au-makieta__submit:hover { background: var(--color-primary-ink); transform: translateY(-1px); }
.au-makieta__submit:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.au-makieta__submit[disabled] { opacity: .7; cursor: default; transform: none; }

.au-makieta__obietnica {
    margin: 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: none;
}

/* ---------- Logo: "Studio" jako czesc nazwy, nie podpis ---------- */
/* Bylo: Light 300, wersaliki, rozstrzelone o .18em, 62% wielkosci —
   wygladalo jak podtytul pod znakiem, a nie jak polowa nazwy.
   Jest: to samo pismo co "Arlek", o jeden stopien lzejsze, bez wersalikow,
   bez rozstrzelenia, w kolorze otoczenia z lekkim wygaszeniem. Jedna nazwa. */
html body .au-logo__studio {
    font-weight: 500;
    font-size: 1em;
    letter-spacing: -.01em;
    text-transform: none;
    color: currentColor;
    opacity: .72;
}
html body .au-logo__tekst { gap: .22em; }

/* ============================================================
   /our-work/ — uklad jak polskie /realizacje/ (przeniesione 1:1
   z pages-realizacje.css tamtej wersji; karty z main.css sa te same)
   ============================================================ */
.rlz-archive-hero {
    padding: clamp(28px, 3.5vw, 44px) 0 clamp(20px, 2.5vw, 32px);
    background: #fff;
    text-align: center;
}
.rlz-archive-hero .breadcrumbs { margin: 0 0 32px !important; justify-content: center; }
.rlz-archive-hero .section-label { display: inline-flex !important; margin-bottom: 0; }
.rlz-archive-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-dark, #121C27);
    margin: 12px 0 14px;
}
html body .rlz-archive-hero__lead {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 640px;
    margin: 0 auto;
    text-wrap: pretty;
}
.rlz-archive { padding: clamp(28px, 3.5vw, 48px) 0 clamp(48px, 6vw, 80px) !important; }
.rlz-archive__loadmore-wrap { text-align: center; margin-top: clamp(28px, 3.5vw, 48px); }
.rlz-archive__loadmore { min-height: 56px; padding: 14px 36px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.rlz-archive__loadmore[disabled] { opacity: 0.6; cursor: not-allowed; }
.rlz-archive__count { font-family: var(--font-body); font-size: 13px; color: var(--color-text-muted); margin: 14px 0 0; max-width: none; }

/* Karty poza pierwszymi 72 sa w HTML (crawler widzi komplet), ale ukryte
   do klikniecia "Show more". Owijka .au-praca-ukryta znika razem z [hidden]. */
.au-praca-ukryta { display: contents; }
.au-praca-ukryta[hidden] { display: none; }

.au-branze { padding-top: var(--section-y-tight); padding-bottom: var(--section-y-tight); }

/* /websites/ karta ceny: druga sciezka dla kogos, kto juz widzial przebudowe. */
.buy-box__small--dalej { margin-top: var(--space-3); }
.buy-box__link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--color-primary-ink);
    text-decoration: underline; text-underline-offset: .2em;
}
.buy-box__link:hover { color: var(--color-primary-ink-strong); }
.buy-box__link:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }

/* "Od zera" na marginesie: jedno zdanie i jeden przycisk-link, wszedzie ten sam. */
.au-margines {
    margin: var(--space-6) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    max-width: 40rem;
}
.au-margines__btn, .au-link-btn, .au-cena__link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--color-primary-ink);
    text-decoration: underline; text-underline-offset: .2em;
}
.au-cena__link { color: #fff; }
.au-margines__btn:hover, .au-link-btn:hover { color: var(--color-primary-ink-strong); }
.au-margines__btn:focus-visible, .au-link-btn:focus-visible, .au-cena__link:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.popup--order { max-width: 720px; }

/* /about/, sekcja ciemna "What we are": akapit w karcie dostawal kremowe tlo
   (--color-bg-alt) z reguly dla jasnego wariantu, a tekst byl bialy — bialy
   na kremowym, czyli niewidoczny. W ciemnej sekcji akapit ma byc przezroczysty. */
html body .section--dark .on-do-card__desc,
html body .on-do .on-do-card__desc {
    background: transparent;
    padding: 0;
    border: 0;
}

/* Sekcja "Your turn" na koncu podstron: naglowek, akapit i przycisk w jednej osi. */
.au-cta-srodek { text-align: center; }
.au-cta-srodek + .au-margines { margin-inline: auto; text-align: center; }
/* Akapit z przyciskiem CTA nie jest tekstem do czytania — globalna miara
   wiersza (34rem na main p) robila z niego waska, lewa kolumne, a przycisk
   centrowal sie w niej zamiast w sekcji. */
.au-cta-srodek { max-width: none !important; }

/* ============================================================================
   /about/, SEKCJA "WHAT WE ARE" PRZY 1920 PX
   Przy poszerzaniu kontenera zdjalem stad limit 1100 px — karty urosly do
   1456 px z trescia zbita po lewej, a lista "We don't..." (flex + pogrubienie
   o zmiennej szerokosci + miara 34rem na li) miala opisy zaczynajace sie
   w losowym miejscu. Blok wraca na srodek w miarze 1100 px, a lista dostaje
   stala kolumne etykiet, wiec opisy stoja w jednej osi.
   ============================================================================ */
html body.pg-about .on-do__grid,
html body.pg-about .on-do__panels,
html body.pg-about .on-do-panel,
html body.pg-about .on-do__footnote {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
html body.pg-about .on-do-panel__list { max-width: none; }
html body.pg-about .on-do-panel__list li {
    display: grid;
    grid-template-columns: minmax(12em, 15em) 1fr;
    gap: 4px 20px;
    align-items: start;
    max-width: none;
    padding-left: 20px;
}
html body.pg-about .on-do-panel__list li strong { color: #fff; }
@media (max-width: 640px) {
    html body.pg-about .on-do-panel__list li { grid-template-columns: 1fr; gap: 2px; }
}

/* Strona glowna, pod siatka prac: pytanie stalo przy lewej krawedzi,
   a przycisk na srodku (widoczne dopiero przy 1920 px). Oba na srodku. */
html body .portfolio__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-5);
}
html body .portfolio__bottom-text { margin: 0; max-width: none; }

/* /websites/, pod czterema kolumnami: dwa akapity-przypisy staly jako waskie
   bloki przy lewej krawedzi kontenera, gdy wszystko wokol jest na srodku
   (widoczne przy 1920 px). Na srodek, w tej samej miarze co podtytul. */
html body .si-full-list__note,
html body .si-check-note,
html body #pakiet > .container > p,
html body #pakiet .au-zakres__stopka {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 40rem;
}

/* ============================================================================
   WASKIE AKAPITY PRZY LEWEJ KRAWEDZI W WYSRODKOWANYCH SEKCJACH (1920 px)
   Miara wiersza (34rem) robi z kazdego samodzielnego akapitu blok 544 px.
   Tam, gdzie naglowek sekcji jest na srodku, taki blok przy lewej krawedzi
   wyglada jak blad skladu: "Showing 72 of 348" pod srodkowym przyciskiem,
   "Still have a question..." pod srodkowym CTA, przypisy pod kolumnami.
   Regula ogolna: akapit bedacy bezposrednim dzieckiem kontenera w sekcji
   z wysrodkowanym naglowkiem idzie na srodek.
   ============================================================================ */
section:has(.au-section__header--srodek) > .container > p,
section:has(.rlz-archive-hero__title) > .container > p,
.rlz-archive__loadmore-wrap > p,
.au-cta-srodek ~ p,
.au-margines ~ p {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}
.rlz-archive__loadmore-wrap > p { max-width: none !important; }

/* Landingi branzowe przy 1920: trzy karty w siatce dwukolumnowej zostawialy
   trzecia sama w lewym dolnym rogu z pusta prawa polowa. Trzy karty = trzy
   kolumny. Naglowki tych sekcji na srodku, jak hero nad nimi. */
@media (min-width: 900px) {
    .au-trust__grid--trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* /site-check/ przy 1920: karta grupy (.pillar) rozciagala sie na 1520 px,
   a pozycje w prawej kolumnie mialy miare 34rem — pusta prawa cwiartka.
   Karta w miarze 1200 px na srodku (jak inne bloki podstron), pozycje
   wypelniaja swoja kolumne. */
html body .pillar {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
html body .pillar-item,
html body .pillar-item__body,
html body .pillar__sub {
    max-width: none;
}

/* /site-check/: tresc pozycji pojawiala sie z opacity 0 i doplywala przy
   przewijaniu — przy szybkim scrollu czyta sie jako wyblakly, "dziwny" kolor.
   Tekst informacyjny nie animuje sie: jest widoczny od razu. Pozycje
   wypelniaja swoja kolumne. */
html body .pillar-item { width: 100%; max-width: none; }
html body .pillar-item__body,
html body .pillar-item__label {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
/* .pillar-item to <li>, wiec dopada je miara 34rem z reguly "main li" —
   waznosc tej reguly jest wyzsza niz zwyklego nadpisania. */
html body .pillar-item { max-width: none !important; width: 100%; }