/* ==========================================================================
   sm-brand.css — warstwa wizualna „jak rolki i grafiki SM” (22.10.2026, decyzja Marii)
   Jedno zrodlo dla wszystkich stron lejka. Podpinane jako OSTATNI arkusz w <head>
   (po stylach strony), razem z js/sm-brand.js (defer).

   Zmienia WYLACZNIE wyglad: fonty, kolory, ksztalt przyciskow, tla aktow, ruch.
   Tresc, kolejnosc, linki, formularze i skrypty stron zostaja nietkniete.

   Prefiks `html:root body` (0,1,2) jest celowy: strony maja wlasne reguly
   z !important na `html body h2` (0,0,3) i style inline w <body>, ktore stoja
   POZNIEJ w zrodle — przy rownej specyficznosci wygralyby z tym arkuszem.

   KONTRASTY (WCAG 2.1 AA, policzone 22.10.2026):
     #1C1A19 na limonce #D4F410 ......... 13,83  przyciski, pigulki, zakreslacz
     limonka #D4F410 na #1C1A19 ......... 13,83  akcent na ciemnym
     limonka na kremie .................. 1,17   NIGDY jako tekst na jasnym
     biel na pomaranczu #EB512E ......... 3,65   tylko duzy tekst (pigulki w naglowkach)
     #EB512E na #1C1A19 ................. 4,75   akcent tekstowy na ciemnym
     #B83A1C na kremie #FAF7F2 .......... 5,37   akcent tekstowy na jasnym
     biel na #C9421F .................... 4,90   tlo pod bialy tekst ponizej 24 px
     #FAF7F2 na #1C1A19 ................. 16,23
     #A8A29B na #1C1A19 ................. 6,86

   Nazwy klas: bez ciagow lapanych przez wildcardy mobile-fixes.css
   (lead, card, box, number, price, amount, stat, subtitle, timeline, alert,
   warning, collapse, expand) — CLAUDE.md §8.
   ========================================================================== */

/* Zapasowy font dopasowany do Anton (zmierzone 22.10.2026 w Chrome, canvas TextMetrics, 100 px,
   na 10 prawdziwych naglowkach i przyciskach stron, wersaliki z polskimi znakami: Anton/Impact
   93,6–98,6%, mediana ~96% -> size-adjust 95,8%). Do czasu zaladowania Anton naglowki lamia sie
   (prawie) tak samo, wiec podmiana fontu nie przesuwa ukladu (CLS). */
@font-face {
    font-family: 'Anton Fallback';
    src: local('Impact');
    size-adjust: 95.8%;
    ascent-override: 118%;
    descent-override: 33%;
    line-gap-override: 0%;
}

/* Zapasowe Poppins dopasowane metrycznie — te same wartosci, ktore index.html zmierzyl canvasem
   (Roboto przed Arialem: na Androidzie local('Arial') to Roboto o innych proporcjach). Czesc stron
   (start, prezenty, rozmowa, ankieta, raty-0…) nie miala ich wcale — podmiana na Poppins przesuwala
   tekst (CLS do 0,21 na preview 22.10.2026). Wlasne nazwy, zeby nie kolidowac z definicjami stron. */
@font-face { font-family: 'SM Poppins Fallback Roboto'; src: local('Roboto'); font-weight: 400;
    size-adjust: 110.35%; ascent-override: 95.15%; descent-override: 31.72%; line-gap-override: 0%; }
@font-face { font-family: 'SM Poppins Fallback Roboto'; src: local('Roboto Bold'), local('Roboto'); font-weight: 700 900;
    size-adjust: 114.50%; ascent-override: 91.71%; descent-override: 30.57%; line-gap-override: 0%; }
@font-face { font-family: 'SM Poppins Fallback'; src: local('Arial'); font-weight: 400;
    size-adjust: 108.87%; ascent-override: 96.45%; descent-override: 32.15%; line-gap-override: 0%; }
@font-face { font-family: 'SM Poppins Fallback'; src: local('Arial Bold'), local('Arial'); font-weight: 700 900;
    size-adjust: 106.23%; ascent-override: 98.84%; descent-override: 32.95%; line-gap-override: 0%; }

:root {
    --sm-lime:        #D4F410;
    --sm-orange:      #EB512E;
    --sm-orange-ink:  #B83A1C;   /* pomarancz jako TEKST na jasnym */
    --sm-orange-deep: #C9421F;   /* pomarancz jako TLO pod maly bialy tekst */
    --sm-dark:        #1C1A19;
    --sm-dark-2:      #262321;
    --sm-cream:       #FAF7F2;
    --sm-ink:         #1C1A19;
    --sm-muted-dark:  #A8A29B;
    --sm-display:     'Anton', 'Anton Fallback', 'Impact', 'Arial Narrow Bold', 'Arial Narrow', sans-serif;
    --sm-text:        'Poppins', 'SM Poppins Fallback Roboto', 'SM Poppins Fallback', Arial, sans-serif;
    --sm-radius:      12px;
    --sm-ease:        cubic-bezier(.2, .8, .2, 1);

    /* tokeny stron — mapowanie na palete SM */
    --font-heading:        var(--sm-display) !important;
    --font-body:           var(--sm-text) !important;
    --color-primary:       var(--sm-orange-ink) !important;   /* 5,37 na kremie, biel na nim 5,74 */
    --color-primary-dark:  var(--sm-orange-ink) !important;
    --color-primary-light: var(--sm-orange) !important;
    --color-primary-glow:  rgba(212, 244, 16, .28) !important;
    --color-marker:        var(--sm-lime) !important;
    --color-background:    var(--sm-cream) !important;
    --color-text-primary:  var(--sm-ink) !important;
    --color-text-muted:    #5F5F5F !important;   /* bylo #6C6C6C: 4,27 na tintach (notki VAT) -> 5,3 */
    --gradient-primary:    linear-gradient(135deg, var(--sm-orange-deep), var(--sm-orange-ink)) !important;
}

/* ---------- PISMO ---------- */
html:root body {
    font-family: var(--sm-text) !important;
    background-color: var(--sm-cream);
    -webkit-font-smoothing: antialiased;
}
html:root body :is(p, li, a, span, div, button, input, select, textarea, label, small, strong, b, em, td, th,
                   blockquote, figcaption, dt, dd, summary, details) {
    font-family: var(--sm-text) !important;
}
html:root body strong, html:root body b { font-weight: 800; }

/* Naglowki: Anton, wersaliki. h2 z klasa *subtitle (podtytul hero) to tekst, nie naglowek. */
html:root body :is(h1, h2:not([class*="subtitle"]), h3, .section-title, .sm-display),
html:root body :is(h1, h2:not([class*="subtitle"]), h3, .section-title, .sm-display) * {
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .01em !important;
}
html:root body :is(h1, h2:not([class*="subtitle"]), h3, .section-title) {
    line-height: 1.24 !important;     /* v2: 1,14 -> 1,24 — ogonki Ą/Ę wchodzily w nastepna linie */
    text-wrap: balance;
}
html:root body h1 { font-size: 38px !important; }
html:root body :is(h2:not([class*="subtitle"]), .section-title) { font-size: 31px !important; }
html:root body h3 { font-size: 22px !important; line-height: 1.2 !important; }
@media (min-width: 769px) {
    html:root body h1 { font-size: clamp(42px, 3.8vw, 60px) !important; }
    /* waskie kolumny (formularze, krotkie strony) — CTA ma zostac na pierwszym ekranie */
    html:root body :is(.wrap, .oz-wrap, .ank-forma, .ank-glowa) h1 { font-size: 46px !important; }
    html:root body :is(h2:not([class*="subtitle"]), .section-title) { font-size: clamp(36px, 3.3vw, 50px) !important; }
    html:root body h3 { font-size: 26px !important; }
}
/* h4 i pytania FAQ zostaja tekstem — Poppins, waga niesie roznice (CLAUDE.md §1 pkt 6) */
html:root body :is(h4, h5, h6) { font-family: var(--sm-text) !important; font-weight: 800 !important; letter-spacing: 0 !important; }
html:root body :is(h4, h5, h6) * { font-family: var(--sm-text) !important; }

/* Wypelnienie gradientem w naglowkach (background-clip: text) — w stylu SM akcent jest
   jednolity. Klasa nadawana przez sm-brand.js po odczycie computed style. */
html:root body .sm-akcent-txt {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--sm-orange-ink) !important;
}
html:root body .sm-ciemne .sm-akcent-txt,
html:root body .sm-ciemne.sm-akcent-txt { color: var(--sm-lime) !important; }
html:root body .sm-ciemne[data-sm-akcent="o"] .sm-akcent-txt { color: var(--sm-orange) !important; }

/* ---------- PIGULKA — slowo kluczowe w naglowku ---------- */
html:root body :is(h1, h2, h3) :is(.zakresl, .zakresl--duzy, .zakresl--ciemny, .h1-accent, .lf-grad, #h1-cta-word, em),
html:root body .sm-pigulka {
    background: var(--sm-lime) !important;
    -webkit-text-fill-color: var(--sm-ink) !important;
    color: var(--sm-ink) !important;
    padding: 0 .2em !important;
    line-height: 1.24;
    border-radius: var(--sm-radius);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    font-style: normal;
}
/* naprzemiennie: co druga pigulka pomaranczowa z bialym (tylko duzy tekst — 3,65:1, prog 3:1) */
html:root body [data-sm-akcent="o"] :is(h1, h2, h3) :is(.zakresl, .zakresl--duzy, .zakresl--ciemny, .h1-accent, .lf-grad, #h1-cta-word, em) {
    background: var(--sm-orange) !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}
/* Obrot pigulki jak na okladkach — tylko w h1 i od pierwszego malowania (bez JS, inaczej CLS).
   max-width: 100% — dlugie slowo kluczowe lamie sie wewnatrz pigulki zamiast wychodzic poza ekran. */
html:root body h1 :is(.zakresl, .zakresl--duzy, .h1-accent, .lf-grad, #h1-cta-word),
html:root body .sm-tilt {
    display: inline-block;
    max-width: 100%;
    transform: rotate(-1.5deg);
    margin: .04em 0;
}

/* Zakreslacz w tekscie: limonka zamiast zoltego (czarny tekst na niej 13,83:1) */
html:root body :is(.zakresl, .zakresl--duzy, .zakresl--ciemny) { color: var(--sm-ink); }
/* Na ciemnym i na markowym pas obejmuje CALE litery — inaczej czarny tekst poza pasem znika (CLAUDE.md §5) */
html:root body :is(.sm-hero-foto, .akt-ciemny, .akt-marka, .sm-ciemne) :is(.zakresl, .zakresl--duzy),
html:root body .zakresl--ciemny {
    background: var(--sm-lime) !important;
    color: var(--sm-ink) !important;
    -webkit-text-fill-color: var(--sm-ink) !important;
    padding: 0 .18em !important;
    border-radius: 5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ---------- PRZYCISKI — limonkowa pigulka z pulsem ---------- */
html:root body :is(
    .wj-embed-button, .sticky-cta-button, .wb-bar__btn, .exit-popup-button,
    .m90-cta, .cta-button, .final-cta-button, .mbuy-btn, .buy-inline-btn, .lifetime-bar__btn, .is-buy,
    .sticky-buy-btn, .lt-bar__btn, .lb-przycisk--glowny, .oz-btn:not(.oz-btn--obrys),
    .pk-of-kup, .pk-przycisk, .download-btn, .cta-main-btn, .cta-btn, .btn-enter, .ank-wyslij,
    .rz-wyslij, .sm-cta, .top a.cta, a.cta, .pk-wyslij, .pk-czat-wyslij, .zf-wyslij
) {
    background: var(--sm-lime) !important;
    background-image: none !important;
    color: var(--sm-ink) !important;
    -webkit-text-fill-color: var(--sm-ink) !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .02em !important;
    box-shadow: 0 6px 0 rgba(28, 26, 25, .9), 0 10px 28px rgba(212, 244, 16, .28) !important;
    transition: transform .18s var(--sm-ease), box-shadow .18s var(--sm-ease) !important;
}
html:root body :is(
    .wj-embed-button, .sticky-cta-button, .wb-bar__btn, .exit-popup-button,
    .m90-cta, .cta-button, .final-cta-button, .mbuy-btn, .buy-inline-btn, .lifetime-bar__btn, .is-buy,
    .sticky-buy-btn, .lt-bar__btn, .lb-przycisk--glowny, .oz-btn:not(.oz-btn--obrys),
    .pk-of-kup, .pk-przycisk, .download-btn, .cta-main-btn, .cta-btn, .btn-enter, .ank-wyslij,
    .rz-wyslij, .sm-cta
) * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: inherit !important;
}
html:root body :is(.wj-embed-button, .m90-cta, .cta-button, .final-cta-button, .is-buy, .sticky-cta-button,
                   .sticky-buy-btn, .pk-of-kup, .lb-przycisk--glowny, .cta-main-btn, .cta-btn, .btn-enter):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 rgba(28, 26, 25, .9), 0 14px 34px rgba(212, 244, 16, .38) !important;
}
html:root body :is(.wj-embed-button, .m90-cta, .cta-button, .final-cta-button, .is-buy, .sticky-cta-button,
                   .sticky-buy-btn, .pk-of-kup, .lb-przycisk--glowny, .cta-main-btn, .cta-btn, .btn-enter):active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(28, 26, 25, .9) !important;
}
/* Na ciemnym: cien „podloza” jasniejszy, inaczej znika */
html:root body .sm-ciemne :is(.wj-embed-button, .m90-cta, .cta-button, .final-cta-button, .is-buy, .pk-of-kup,
                              .lb-przycisk--glowny, .cta-btn, .btn-enter, .oz-btn:not(.oz-btn--obrys)) {
    box-shadow: 0 6px 0 #7E9300, 0 10px 30px rgba(212, 244, 16, .25) !important;
}
@media (prefers-reduced-motion: no-preference) {
    html:root body .sm-puls {
        animation: sm-puls 2.6s var(--sm-ease) infinite;
    }
}
@keyframes sm-puls {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(212, 244, 16, 0)); }
    50%      { filter: drop-shadow(0 0 14px rgba(212, 244, 16, .55)); }
}
/* Przycisk drugorzedny (obrys) — ciemny obrys, bez limonki */
html:root body .oz-btn--obrys {
    border: 2px solid var(--sm-ink) !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
}

/* ---------- AKTY CIEMNE ---------- */
html:root body :is(.akt-ciemny, .sm-ciemne-sekcja) {
    background: var(--sm-dark) !important;
    background-image:
        radial-gradient(60% 50% at 12% 0%, rgba(212, 244, 16, .10), transparent 70%),
        radial-gradient(50% 45% at 100% 100%, rgba(235, 81, 46, .16), transparent 70%) !important;
    background-size: 140% 140%, 140% 140% !important;
    --color-text-primary:   #FAF7F2 !important;
    --color-text-secondary: #EDE7DE !important;
    --color-text-muted:     #A8A29B !important;
    --color-primary:        var(--sm-orange) !important;
    --color-primary-light:  var(--sm-orange) !important;
    --color-primary-dark:   var(--sm-orange) !important;
    --color-border:         #6B6560 !important;
}
html:root body .akt-ciemny :is(h1, h2:not([class*="subtitle"]), h3, .section-title) { color: #FAF7F2 !important; }
@media (prefers-reduced-motion: no-preference) {
    html:root body :is(.akt-ciemny, .sm-ciemne-sekcja) { animation: sm-dryf 22s ease-in-out infinite alternate; }
}
@keyframes sm-dryf {
    from { background-position: 0% 0%, 100% 100%; }
    to   { background-position: 30% 20%, 70% 80%; }
}

/* Akt markowy (sekcja domykajaca): #B83A1C — biel 5,74:1, biel .92 ~5,1:1 (na #C9421F biel .92 dawala 4,38) */
html:root body .akt-marka {
    background: var(--sm-orange-ink) !important;
    background-image: radial-gradient(70% 60% at 85% 10%, rgba(255, 255, 255, .10), transparent 70%) !important;
}

/* Karty cennika (oferty: granat #16264D, produkt-w-48h: petrol #123540) -> ciepla czern palety SM.
   Tekst w kartach jest jasny; na #1C1A19–#262321 kontrast rosnie, nie spada. */
html:root body :is(.m90-pcard, .pcard) {
    background: linear-gradient(160deg, var(--sm-dark-2) 0%, var(--sm-dark) 100%) !important;
    border: 1.5px solid rgba(212, 244, 16, .35) !important;
}
html:root body .m90-pcard.is-vip { border-color: rgba(235, 81, 46, .6) !important; }

/* ---------- HERO ZE ZDJECIEM ---------- */
/* Zdjecie Marii (kadr z okladek rolek, ciepla korekta) pod mocnym przyciemnieniem.
   Przyciemnienie tam, gdzie stoi tekst: >= .72 — biel na NAJJASNIEJSZYM pikselu zdjecia
   (255) pod warstwa #1C1A19 .72 daje rgb(92) -> 6,4:1; #EDE7DE -> 5,3:1.
   Telefon: zdjecie na pelna szerokosc u gory, ponizej jednolity ciemny.
   Desktop (>= 900): zdjecie po prawej, tekst na lewej/srodkowej, ciemnej czesci. */
html:root body .sm-hero-foto {
    --sm-foto: none;   /* v4 23.10.2026: hero bez zdjecia Marii na wszystkich stronach (decyzja Marii) */
    position: relative;
    background-color: var(--sm-dark) !important;
    background-image:
        linear-gradient(180deg, rgba(28, 26, 25, .42) 0, rgba(28, 26, 25, .74) 110px, rgba(28, 26, 25, .8) 300px, var(--sm-dark) 96vw),
        var(--sm-foto) !important;
    background-size: 100% 100%, 100% auto !important;
    background-position: 0 0, center top !important;
    background-repeat: no-repeat !important;
    --color-text-primary:   #FAF7F2 !important;
    --color-text-secondary: #EDE7DE !important;
    --color-text-muted:     #EDE7DE !important;
    --color-background:     var(--sm-dark) !important;
    color: #EDE7DE;
}
/* Hero ciemne bez zdjecia (produkt-w-48h): ten sam uklad i kolory, LCP zostaje tekstem */
html:root body .sm-hero-foto--bez,
html:root body .sm-hero-foto--bez.sm-hero-foto { --sm-foto: none !important; }
@media (min-width: 900px) {
    html:root body .sm-hero-foto {
        --sm-foto: none;
        /* tekst wysrodkowanych hero siega ~81% szerokosci: do 80% przyciemnienie >= .8
           (biel 7,5:1, #EDE7DE 6,4:1 na najjasniejszym pikselu); twarz w pasie 85–95% */
        background-image:
            linear-gradient(90deg, var(--sm-dark) 0%, rgba(28, 26, 25, .9) 50%, rgba(28, 26, 25, .8) 80%, rgba(28, 26, 25, .3) 100%),
            var(--sm-foto) !important;
        background-size: 100% 100%, auto 880px !important;
        background-position: 0 0, calc(100% + 200px) top !important;
    }
    /* waskie hero (karta na start): uklad pionowy jak na telefonie */
    html:root body .lb-glowa.sm-hero-foto {
        background-image:
            linear-gradient(180deg, rgba(28, 26, 25, .42) 0, rgba(28, 26, 25, .74) 110px, rgba(28, 26, 25, .8) 300px, var(--sm-dark) 100%),
            var(--sm-foto) !important;
        background-size: 100% 100%, 100% auto !important;
        background-position: 0 0, center top !important;
    }
}
html:root body .sm-hero-foto :is(h1, h2:not([class*="subtitle"]), h3) { color: #fff !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
html:root body .sm-hero-foto :is(h1, h2, h3) :is(.zakresl, .h1-accent, .lf-grad, em) { text-shadow: none; }
html:root body .sm-hero-foto :is(p, li, [class*="subtitle"], [class*="subtitle"] *, .hero-cta-micro, .hero-cta-micro *) {
    color: #EDE7DE !important;
    -webkit-text-fill-color: currentColor;
}
html:root body .sm-hero-foto :is(p, li, [class*="subtitle"]) strong { color: #fff !important; }

/* Jasne kafelki w ciemnym hero (CLAUDE.md §6b: w ciemnym akcie bez zagniezdzonych jasnych powierzchni) —
   grupowanie niesie obrys, nie wypelnienie. Wyjatek §6c: karta „za 90 dni” i makieta produktu
   zostaja jasne, z ciemnym tekstem. */
html:root body .sm-hero-foto :is(.hero-path, .hero-lifetime, .agree) {
    background: rgba(250, 247, 242, .05) !important;
    border: 1.5px solid rgba(250, 247, 242, .32) !important;
    box-shadow: none !important;
}
html:root body .sm-hero-foto :is(.hl-badge, .hero-badge) {
    background: var(--sm-lime) !important;
    color: var(--sm-ink) !important;
    -webkit-text-fill-color: var(--sm-ink) !important;
    border-color: transparent !important;
}
html:root body .sm-hero-foto :is(.spec-os__b, .hero-mockup-placeholder) {
    --color-text-primary: #1F1F1F !important;
    --color-text-secondary: #4A4A4A !important;
    --color-text-muted: #6C6C6C !important;
    color: #1F1F1F !important;
}
html:root body .sm-hero-foto :is(.spec-os__b, .hero-mockup-placeholder) :is(p, li, span, div, b, strong) {
    color: #1F1F1F !important;
    text-shadow: none !important;
}

/* ---------- PASEK POSTEPU ---------- */
.sm-postep {
    position: fixed; left: 0; top: 0; z-index: 2147483000;
    width: 100%; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--sm-lime), var(--sm-orange));
    transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- WEJSCIA SEKCJI ---------- */
@media (prefers-reduced-motion: no-preference) {
    html.sm-ruch .sm-wejscie > * {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .6s var(--sm-ease), transform .6s var(--sm-ease);
        transition-delay: calc(var(--sm-i, 0) * 50ms);
    }
    html.sm-ruch .sm-wejscie :is(h1, h2, h3).sm-pop { transform: translateY(24px) scale(.94); }
    html.sm-ruch .sm-wejscie.sm-widac > * { opacity: 1; transform: none; }
    html.sm-ruch .sm-wejscie.sm-widac :is(h1, h2, h3).sm-pop { transform: none; }
}

/* ==========================================================================
   v2 (22.10.2026, ocena Marii: „ma byc duzo bardziej zywo, DOKLADNIE jak grafiki SM”)
   Wzor: treści do SM/pakiet_2026-10-22 (okladki rolek, posty, karuzele, reklamy).
   Zasada pigulek z okladek: limonka #D4F410 -> tekst #141414; pomarancz #EB512E -> bialy
   (3,65:1 — wylacznie duzy, gruby tekst: Anton >= 24 px); lekki obrot -1/-2 st., cien pod spodem.
   ========================================================================== */

/* ---------- HERO-OKLADKA (index, specjalisci): H1 = okladka reklamy, kazda linia w pigulce ---------- */
html:root body .sm-hero-okladka {
    background-color: var(--sm-dark) !important;
    background-image:
        radial-gradient(55% 45% at 8% 0%, rgba(212, 244, 16, .16), transparent 70%),
        radial-gradient(50% 45% at 100% 85%, rgba(235, 81, 46, .22), transparent 70%) !important;
    background-size: 100% 100% !important;
}
html:root body h1.sm-okladka {
    /* rozmiar liczony od szerokosci: najdluzsza linia (Anton, wersaliki, z pigulka) = k * font-size.
       index: „8 GODZIN DZIENNIE” 6,74 em + pigulka .44 + odstep .17 -> k 7,5; specjalisci:
       „TWOJA DZIAŁALNOŚĆ,” 7,85 + .61 -> k 8,6. Zmierzone canvasem w Chrome 22.10.2026. */
    font-size: min(calc((100vw - 36px) / 7.5), 84px) !important;
    line-height: 1.12 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .16em;
    margin: 6px auto 0 !important;
    text-wrap: initial;
    text-shadow: none !important;
}
html:root body h1.sm-okladka:has(.sm-pig:nth-child(3)) { font-size: min(calc((100vw - 36px) / 8.6), 76px) !important; }
html:root body .sm-pig {
    display: inline-block;
    white-space: nowrap;
    padding: .07em .22em .03em;
    border-radius: 10px;
    box-shadow: 0 .07em 0 rgba(0, 0, 0, .35), 0 14px 30px -12px rgba(0, 0, 0, .7);
    transform: rotate(-1.6deg);
}
html:root body .sm-pig--l { background: var(--sm-lime); color: #141414 !important; -webkit-text-fill-color: #141414 !important; }
html:root body .sm-pig--o { background: var(--sm-orange); color: #fff !important; -webkit-text-fill-color: #fff !important; transform: rotate(-.8deg); }
html:root body .sm-pig + .sm-pig--l + .sm-pig--l { transform: rotate(-2deg); }
/* podtytul = naglowek CTA z reklam */
html:root body .sm-haslo {
    max-width: 760px;
    margin: 22px auto 24px !important;
    font-family: var(--sm-text) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    color: #FAF7F2 !important;
    letter-spacing: -.01em;
    text-wrap: balance;
}
@media (min-width: 769px) {
    html:root body .sm-haslo { font-size: 30px !important; margin: 30px auto 30px !important; }
}
html:root body .sm-hero-okladka .hero-cta-micro { color: #D9D3CA !important; }
/* dawne H1 jako naglowek pierwszej sekcji pod hero */
html:root body .sm-historia { padding-top: 56px !important; }
html:root body .sm-historia-tytul { margin: 0 auto 18px !important; max-width: 900px; }

/* ---------- GORNY PASEK — ciemny, wyzszy, z limonkowa linia ---------- */
html:root body :is(.wb-bar, .lifetime-bar, .lt-bar, header.top) {
    background: var(--sm-dark) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 3px solid var(--sm-lime) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .28) !important;
    color: #FAF7F2 !important;
}
html:root body :is(.wb-bar__in, .lifetime-bar__in, .lt-bar__in, header.top .top-in) {
    min-height: 61px;          /* + 3 px linii = 64 px */
    box-sizing: border-box;
    gap: 14px !important;
}
html:root body :is(.wb-bar__txt, .lifetime-bar__txt, .lt-bar__txt) {
    color: #D9D3CA !important;                 /* 11,4:1 na #1C1A19 */
    font-size: 12px !important;
    line-height: 1.35 !important;
}
html:root body :is(.wb-bar__txt, .lifetime-bar__txt, .lt-bar__txt) b {
    color: #FAF7F2 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}
html:root body header.top .top-logo { color: var(--sm-lime) !important; font-family: var(--sm-display) !important; font-size: 20px !important; letter-spacing: .04em !important; }
html:root body header.top .top-back { color: #FAF7F2 !important; font-size: 15px !important; font-weight: 600 !important; }
html:root body :is(.wb-bar, .lifetime-bar, .lt-bar) :is(.wb-bar__btn, .lifetime-bar__btn, .lt-bar__btn) {
    min-height: 48px !important;
    padding: 10px 18px !important;
    font-size: 17px !important;
    box-shadow: 0 4px 0 #7E9300 !important;
}
@media (min-width: 769px) {
    html:root body :is(.wb-bar__in, .lifetime-bar__in, .lt-bar__in, header.top .top-in) { min-height: 73px; }   /* 76 px */
    html:root body :is(.wb-bar__txt, .lifetime-bar__txt, .lt-bar__txt) { font-size: 14px !important; }
    html:root body :is(.wb-bar__txt, .lifetime-bar__txt, .lt-bar__txt) b { font-size: 19px !important; }
    html:root body :is(.wb-bar, .lifetime-bar, .lt-bar) :is(.wb-bar__btn, .lifetime-bar__btn, .lt-bar__btn) {
        min-height: 52px !important; padding: 12px 28px !important; font-size: 21px !important;
    }
    html:root body header.top .top-logo { font-size: 24px !important; }
    html:root body header.top .top-back { font-size: 17px !important; }
}

/* ---------- WIECEJ KOLORU ---------- */
/* Jasne sekcje: krem zamiast bieli (rytm: ciemna / kremowa). Biale zostaja karty — odcinaja sie od kremu. */
html:root body :is(.akt-bialy, .akt-jasny):not(.sm-hero-foto):not(.akt-ciemny) { background-color: var(--sm-cream) !important; }

/* pigulka slowa kluczowego w naglowkach sekcji — nadawana przez sm-brand.js (sm-pig-auto)
   albo istniejace wyroznienia (.hl, .hl2, gradient w literach) */
html:root body :is(h1, h2, .section-title) :is(.sm-pig-auto, .hl, .hl2, .sm-akcent-txt) {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    background: var(--sm-lime) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    padding: .06em .2em .02em !important;
    margin: .05em 0;
    border-radius: 8px;
    transform: rotate(-1.5deg);
    box-shadow: 0 .07em 0 rgba(28, 26, 25, .28), 0 10px 22px -12px rgba(28, 26, 25, .55);
    text-shadow: none !important;
}
/* #sm-brak w :is() = specyficznosc ID: regula pigulki wyzej ma #h1-cta-word w :is(), wiec liczy sie jak ID */
html:root body :is(h2, .section-title) :is(.sm-pig-auto, .hl, .hl2, .sm-akcent-txt, .zakresl, .zakresl--duzy, .zakresl--ciemny, #sm-brak).sm-pig-o {
    background: var(--sm-orange) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transform: rotate(-.9deg);
}
html:root body :is(h2, .section-title) :is(.zakresl, .zakresl--duzy, .zakresl--ciemny) {
    border-radius: 8px;
    box-shadow: 0 .07em 0 rgba(28, 26, 25, .28);
}

/* etykiety nad naglowkami (rozstrzelone wersaliki jak „DARMOWY WARSZTAT” na grafikach) */
html:root body .sm-etykieta {
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    color: var(--sm-orange-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    border-color: currentColor !important;
}
html:root body :is(.sm-ciemne, .akt-ciemny, .sm-hero-foto, .akt-marka) .sm-etykieta { color: var(--sm-lime) !important; }
html:root body .sm-ciemne[data-sm-akcent="o"] .sm-etykieta { color: var(--sm-orange) !important; }

/* karty: biale na kremie, mocniejszy obrys, gruba kolorowa krawedz u gory (limonka / pomarancz na zmiane).
   Krawedz rysowana cieniem wewnetrznym — nie zmienia wymiarow (bez przesuniec ukladu). */
html:root body .sm-karta {
    border-radius: 14px !important;
    box-shadow: inset 0 6px 0 var(--sm-k, var(--sm-lime)), 0 0 0 1.5px rgba(28, 26, 25, .14), 0 16px 32px -20px rgba(28, 26, 25, .5) !important;
}
html:root body .sm-karta--o { --sm-k: var(--sm-orange); }
html:root body :is(.sm-ciemne, .akt-ciemny, .sm-hero-foto) .sm-karta {
    box-shadow: inset 0 6px 0 var(--sm-k, var(--sm-lime)), 0 0 0 1.5px rgba(250, 247, 242, .22) !important;
}

/* znaczki: numery i ikony w kolkach — limonka (ciemny tekst) / pomarancz (bialy) na zmiane */
html:root body .sm-znaczek {
    background: var(--sm-lime) !important;
    background-image: none !important;
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    border-color: transparent !important;
    box-shadow: 0 3px 0 rgba(28, 26, 25, .3) !important;
}
html:root body .sm-znaczek--o { background: var(--sm-orange-deep) !important;   /* biel 4,90:1 — znaczki maja maly tekst */ color: #fff !important; -webkit-text-fill-color: #fff !important; }
html:root body .sm-znaczek * { color: inherit !important; -webkit-text-fill-color: currentColor !important; fill: currentColor; }
/* punktory list: kropka / znak przed punktem */
html:root body .sm-lista-bg > li::before { background: var(--sm-k, var(--sm-lime)) !important; background-image: none !important; box-shadow: 0 0 0 1.5px rgba(28, 26, 25, .55); }
html:root body .sm-lista-txt > li::before { color: var(--sm-k-txt, var(--sm-orange-ink)) !important; -webkit-text-fill-color: currentColor !important; }
html:root body .sm-lista--o { --sm-k: var(--sm-orange); --sm-k-txt: var(--sm-orange-ink); }
html:root body :is(.sm-ciemne, .akt-ciemny, .sm-hero-foto) .sm-lista-txt > li::before { color: var(--sm-k, var(--sm-lime)) !important; }
html:root body :is(.sm-ciemne, .akt-ciemny, .sm-hero-foto) .sm-lista-bg > li::before { box-shadow: none; }
html:root body ol > li::marker { color: var(--sm-orange-ink); font-weight: 800; }
html:root body :is(.sm-ciemne, .akt-ciemny) ol > li::marker { color: var(--sm-lime); }

/* drugi wariant CTA na ciemnym: pomarancz z bialym (#C9421F — biel 4,90:1, bo napis ma 18 px).
   Tylko przyciski w tresci ciemnych aktow, nie przyklejone paski. */
html:root body :is(.akt-ciemny, .sm-ciemne-sekcja)[data-sm-akcent="o"] :is(.wj-embed-button, .cta-button, .m90-cta, .final-cta-button):not(.wb-bar__btn):not(.sticky-cta-button) {
    background: var(--sm-orange-deep) !important;   /* biel 4,90:1 — napis 18 px nie jest „duzym tekstem” */
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 6px 0 #8E2A12, 0 10px 30px rgba(235, 81, 46, .3) !important;
}

/* ---------- „DLA KOGO JEST TEN WARSZTAT?” — jeden uklad (wzor: specjalisci) ---------- */
html:root body :is(.paths-section, .dla-kogo-section) :is(.paths-grid, .path-grid) {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 18px !important;
    max-width: 1080px;
    margin-left: auto; margin-right: auto;
}
@media (min-width: 860px) {
    html:root body :is(.paths-section, .dla-kogo-section) :is(.paths-grid, .path-grid) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
html:root body :is(.paths-section, .dla-kogo-section) .path-card {
    text-align: left;
    padding: 28px 24px 24px !important;
    background: #fff !important;
    border: 0 !important;
}
html:root body :is(.paths-section.akt-ciemny, .dla-kogo-section) .path-card { background: rgba(250, 247, 242, .04) !important; }
html:root body :is(.paths-section, .dla-kogo-section) .path-card h3 { font-size: 24px !important; line-height: 1.14 !important; margin: 0 0 12px !important; }
html:root body :is(.paths-section, .dla-kogo-section) .path-card .path-arrow { color: var(--sm-orange-ink) !important; margin-right: .3em; }
html:root body :is(.paths-section.akt-ciemny, .dla-kogo-section) .path-card .path-arrow { color: var(--sm-lime) !important; }
/* chipy z zawodami (specjalisci) i etykiety sciezek (produkt-w-48h) — pigulki na zmiane */
html:root body .sp-zawody li {
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--sm-dark) !important;
    color: #FAF7F2 !important;
    font-weight: 600 !important;
}
html:root body .sp-zawody li:nth-child(3n+1) { background: var(--sm-lime) !important; color: #141414 !important; }
html:root body .sp-zawody li:nth-child(3n+2) { background: var(--sm-orange-ink) !important; color: #fff !important; }
html:root body .dla-kogo-section .path-tag {
    display: inline-block;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: var(--sm-lime) !important;
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    font-family: var(--sm-display) !important;
    letter-spacing: .08em !important;
    border: 0 !important;
}
html:root body .dla-kogo-section .path-card.is-b .path-tag { background: var(--sm-orange-deep) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* statystyki w ciemnym akcie (index, specjalisci od v2): kafelki bez jasnego wypelnienia (§6b), liczby limonkowe */
html:root body .akt-ciemny .stat-item {
    background: rgba(250, 247, 242, .04) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
}
html:root body .akt-ciemny .stat-item p { color: #D9D3CA !important; }
html:root body .stat-number, html:root body .stat-number * {
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
}
html:root body .akt-ciemny .stat-number, html:root body .akt-ciemny .stat-number * { color: var(--sm-lime) !important; -webkit-text-fill-color: var(--sm-lime) !important; }
html:root body .akt-ciemny .stat-item.sm-karta--o .stat-number,
html:root body .akt-ciemny .stat-item.sm-karta--o .stat-number * { color: var(--sm-orange) !important; -webkit-text-fill-color: var(--sm-orange) !important; }
/* hero-okladka: wiekszy przycisk na desktopie, miejsce na ogonki (Ę, Ą) w pigulkach */
@media (min-width: 769px) {
    html:root body .sm-hero-okladka .hero-cta-first .wj-embed-button { font-size: 26px !important; padding: 22px 46px !important; }
}
html:root body .sm-pig { padding-bottom: .09em; }
/* pigulki w h1 nie lamia sie w srodku (dluzsza fraza = dwie pigulki w markupie, jak linie okladki) */
html:root body h1 :is(.zakresl, .zakresl--duzy, .h1-accent, .lf-grad, #h1-cta-word, .sm-pig-auto) { white-space: nowrap; }
html:root body h1 :is(.zakresl--duzy, #sm-brak).sm-pig-o { background: var(--sm-orange) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; transform: rotate(-.8deg); }
@media (max-width: 768px) {
    html:root body .sm-hero-okladka .hero-cta-first .wj-embed-button { white-space: nowrap !important; padding-left: 16px !important; padding-right: 16px !important; max-width: none !important; width: auto !important; font-size: min(18px, calc((100vw - 64px) / 15.5)) !important; }
}
/* Pigulki na koncu H1 (produkt-w-48h, lekcja-pokazowa) — kazda w swojej linii. W jednej linii z tekstem
   podzial wiersza zalezal od fontu: zapasowy vs Anton dawal inny uklad i skok po doczytaniu (CLS 0,20
   na produkt-w-48h, 0,07 na lekcji — Lighthouse na preview 22.10.2026). Oba H1 sa wysrodkowane. */
html:root body h1.hero-title > .zakresl--duzy,
html:root body h1.hero-title > .sm-pig-auto:last-child {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    margin: .1em auto 0 !important;
}

/* ==========================================================================
   v3 (23.10.2026, uwagi Marii do v2): sekcja domykajaca jak okladka, sekcja „Brakujacy element” + mity,
   „Dla kogo” na produkt-w-48h w kartach, zrzuty opinii na telefonie na cala kolumne + lightbox (sm-brand.js).
   ========================================================================== */

/* ---------- SEKCJA DOMYKAJACA (index, specjalisci, produkt-w-48h) — ciemna jak okladki ---------- */
html:root body .sm-final.akt-ciemny {
    background-color: var(--sm-dark) !important;
    background-image:
        radial-gradient(60% 45% at 8% 0%, rgba(212, 244, 16, .17), transparent 70%),
        radial-gradient(55% 45% at 100% 100%, rgba(235, 81, 46, .30), transparent 70%) !important;
    background-size: 100% 100% !important;
    animation: none !important;
    text-align: center;
}
html:root body .sm-final.akt-start { border-top: 3px solid var(--sm-lime); }
/* produkt-w-48h: pasek opinii + sekcja koncowa = jeden akt; poswiata pomaranczowa tylko na dole aktu */
html:root body .op-pasek.sm-final.akt-ciemny { background-image: radial-gradient(60% 70% at 8% 0%, rgba(212, 244, 16, .17), transparent 70%) !important; }
html:root body h2.sm-final-tytul {
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .01em !important;
    font-size: min(calc((100vw - 40px) / 7.4), 72px) !important;
    line-height: 1.12 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .16em;
    margin: 0 auto 28px !important;
    color: #FAF7F2 !important;
    -webkit-text-fill-color: #FAF7F2 !important;
    background: none !important;
    text-shadow: none !important;
}
/* produkt-w-48h: naglowek-zdanie, dwie pigulki w tekscie */
html:root body h2.sm-final-tytul--zdanie {
    display: block;
    font-size: 31px !important;
    line-height: 1.32 !important;
    text-wrap: balance;
}
@media (min-width: 769px) { html:root body h2.sm-final-tytul--zdanie { font-size: 50px !important; } }
html:root body .sm-final-tytul .sm-pig { margin: .04em 0; }
html:root body .sm-final .container-narrow > p {
    color: #EDE7DE !important;               /* 14,0:1 na #1C1A19 */
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
}
html:root body .sm-final-cta { margin-top: 30px; }
/* CTA = limonkowa pigulka z pulsem, jak w hero (bez pomaranczowego wariantu ciemnych aktow) */
html:root body .sm-final.akt-ciemny[class] :is(.wj-embed-button, .cta-button):not(#sm-brak) {
    background: var(--sm-lime) !important;
    color: var(--sm-ink) !important;
    -webkit-text-fill-color: var(--sm-ink) !important;
    box-shadow: 0 6px 0 #7E9300, 0 12px 34px rgba(212, 244, 16, .32) !important;
}
@media (min-width: 769px) {
    html:root body .sm-final .sm-final-cta .wj-embed-button { font-size: 24px !important; padding: 20px 42px !important; }
}

/* karta cytatu: kremowa, gruba limonkowa krawedz u gory, duzy cudzyslow; zrzut jako miniatura */
html:root body .sm-cytat {
    position: relative;
    max-width: 640px;
    margin: 44px auto 0 !important;
    padding: 40px 22px 20px !important;
    background: #FAF7F2 !important;
    border-radius: 16px;
    box-shadow: inset 0 8px 0 var(--sm-lime), 0 22px 48px -22px rgba(0, 0, 0, .8);
    text-align: left;
    color: #1C1A19;
}
html:root body .sm-cytat::before {
    content: "\201C";
    position: absolute;
    left: 20px; top: -22px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--sm-orange);
    color: #fff;
    font-family: var(--sm-display);
    font-size: 58px;
    line-height: 74px;
    text-align: center;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
    pointer-events: none;
}
html:root body .sm-cytat blockquote { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html:root body .sm-cytat blockquote p {
    color: #1C1A19 !important;               /* 15,9:1 */
    -webkit-text-fill-color: #1C1A19 !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
    font-weight: 500 !important;
    text-align: left !important;
    margin: 0 0 12px !important;
    max-width: none !important;
}
html:root body .sm-cytat figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1.5px solid rgba(28, 26, 25, .14);
}
html:root body .sm-cytat-zrzut {
    position: relative;
    flex: 0 0 108px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 0 0 1.5px rgba(28, 26, 25, .22), 0 6px 14px -6px rgba(28, 26, 25, .5);
    cursor: zoom-in;
    min-height: 48px;
}
html:root body .sm-cytat-zrzut img { display: block; width: 100%; height: auto; }
html:root body .sm-cytat-zrzut::after {
    content: "\2922";                        /* ⤢ */
    position: absolute; right: 4px; bottom: 4px;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sm-ink); color: var(--sm-lime);
    font-size: 15px; line-height: 1;
}
html:root body .sm-cytat-zrzut:focus-visible { outline: 3px solid var(--sm-orange-ink); outline-offset: 3px; }
html:root body .sm-cytat-podpis { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html:root body .sm-cytat-podpis b {
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: .02em;
    color: #1C1A19 !important;
}
html:root body .sm-cytat .sm-cytat-podpis .op-note {
    color: #4A4A4A !important;               /* 8,3:1 na kremie */
    -webkit-text-fill-color: #4A4A4A !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin: 0 !important;
}
@media (min-width: 769px) {
    html:root body .sm-cytat { padding: 46px 34px 24px !important; }
    html:root body .sm-cytat blockquote p { font-size: 19px !important; }
    html:root body .sm-cytat-zrzut { flex-basis: 132px; }
}
/* PS: wiekszy, „PS:” w pigulce */
html:root body .sm-final :is(.sm-ps p, p.sm-ps) {
    color: #FAF7F2 !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
}
html:root body .sm-final .sm-ps { margin-top: 40px !important; }
html:root body .sm-ps-pig { font-family: var(--sm-display) !important; font-size: 1.15em; letter-spacing: .03em; margin-right: .3em; padding: .02em .28em !important; }
@media (min-width: 769px) { html:root body .sm-final :is(.sm-ps p, p.sm-ps) { font-size: 21px !important; } }
html:root body .sm-final .list-podpis { color: #FAF7F2 !important; }
html:root body .sm-final .risk-line { color: #D9D3CA !important; }
html:root body .sm-final .op-pasek-track .op-shot { border-color: rgba(250, 247, 242, .3) !important; }
html:root body .sm-final > .op-note,
html:root body .sm-final .op-pasek .op-note { color: #D9D3CA !important; }

/* ---------- „BRAKUJACY ELEMENT” + MITY (index, specjalisci) ---------- */
/* kolumna wysrodkowana na kazdej szerokosci */
html:root body :is(.narracja, .puzzle-section, .mity).akt-ciemny { padding-left: 16px !important; padding-right: 16px !important; }
html:root body .akt-ciemny :is(.narracja-tresc, .puzzle-box, .mity-inner) {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
html:root body .narracja.akt-ciemny .narracja-tresc p { color: #FAF7F2 !important; }
/* wyrozniona karta: pomaranczowa krawedz, kremowy tekst, bez szarej kreski */
html:root body .akt-ciemny .puzzle-box.puzzle-box {
    background: rgba(250, 247, 242, .05) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: inset 0 7px 0 var(--sm-orange), 0 0 0 2px rgba(235, 81, 46, .6), 0 22px 46px -24px rgba(0, 0, 0, .85) !important;
    color: #FAF7F2 !important;
    padding: 32px 24px 26px !important;
    line-height: 1.7 !important;
}
html:root body .akt-ciemny .puzzle-box.puzzle-box p { color: #FAF7F2 !important; }
html:root body .puzzle-box strong {
    display: inline-block;
    background: var(--sm-lime);
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: .12em;
    font-size: 1.15em;
    padding: .04em .32em 0;
    border-radius: 6px;
    transform: rotate(-1.5deg);
    line-height: 1.3;
}
@media (min-width: 769px) { html:root body .akt-ciemny .puzzle-box.puzzle-box { padding: 38px 40px 32px !important; font-size: 19px !important; } }
/* naglowek „Wiem tez, co Cie trzyma” jak naglowki sekcji: Anton, wersaliki, slowo kluczowe w pigulce */
html:root body .mity .mity-wstep {
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: 31px !important;
    line-height: 1.24 !important;
    color: #FAF7F2 !important;
    text-align: center;
    text-wrap: balance;
    margin: 0 auto 30px !important;
}
@media (min-width: 769px) { html:root body .mity .mity-wstep { font-size: 47.5px !important; } }
html:root body .mity .mity-wstep .sm-pig-auto {
    font-family: var(--sm-display) !important;
    display: inline-block;
    white-space: nowrap;
    background: var(--sm-lime);
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    padding: .06em .2em .02em;
    border-radius: 8px;
    transform: rotate(-1.5deg);
    box-shadow: 0 .07em 0 rgba(0, 0, 0, .35);
}
/* karty mitow: limonkowa / pomaranczowa krawedz na zmiane, etykiety w pigulkach, prawda kremowa */
html:root body .mity .mit-karta.mit-karta {
    --mk: var(--sm-lime);
    background: rgba(250, 247, 242, .04) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: inset 0 6px 0 var(--mk), 0 0 0 1.5px rgba(250, 247, 242, .2) !important;
    padding: 28px 22px 22px !important;
}
html:root body .mity .mit-karta.mit-karta:nth-of-type(even) { --mk: var(--sm-orange); }
html:root body .mity :is(.mit-etykieta, .prawda-etykieta) {
    display: inline-block !important;
    padding: 5px 12px 4px !important;
    border-radius: 999px;
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    letter-spacing: .1em !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
}
html:root body .mity .mit-etykieta { background: var(--sm-orange-deep); color: #fff !important; -webkit-text-fill-color: #fff !important; }   /* biel 4,90:1 */
html:root body .mity .prawda-etykieta { background: var(--sm-lime); color: #141414 !important; -webkit-text-fill-color: #141414 !important; }
html:root body .mity .mit-tresc { color: #FAF7F2 !important; font-size: 19px !important; line-height: 1.4 !important; }
html:root body .mity .prawda-tresc { color: #FAF7F2 !important; }   /* 16,4:1 na #1C1A19 (prog z promptu 7:1) */
html:root body .mity .mit-kreska { background: rgba(250, 247, 242, .16) !important; margin: 18px 0 !important; }
html:root body .mity .mity-zamkniecie { color: #FAF7F2 !important; text-align: center; font-size: 19px !important; margin-top: 28px !important; }

/* ---------- „DLA KOGO TO JEST, A DLA KOGO NIE” (produkt-w-48h, sekcja [8]) — karty jak „Dla kogo” ---------- */
html:root body .sm-dla-karty { display: grid; gap: 18px; margin: 24px 0 26px; }
html:root body .sm-dla-karty .sm-dla-karta.path-card {
    background: rgba(250, 247, 242, .04) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: inset 0 6px 0 var(--sm-lime), 0 0 0 1.5px rgba(250, 247, 242, .22) !important;
    padding: 28px 22px 22px !important;
    text-align: left;
}
html:root body .sm-dla-karty .sm-dla-karta--nie.path-card { box-shadow: inset 0 6px 0 var(--sm-orange), 0 0 0 1.5px rgba(250, 247, 242, .22) !important; }
html:root body .sm-dla-karta > p:first-child { margin: 0 0 14px !important; }
html:root body .sm-dla-karta > p:first-child b {
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 24px;
    line-height: 1.15;
    color: #FAF7F2 !important;
}
html:root body .sm-dla-karta > p:first-child b::before { content: "\2713\00a0"; color: var(--sm-lime); }
html:root body .sm-dla-karta--nie > p:first-child b::before { content: "\2715\00a0"; color: var(--sm-orange); }
html:root body .sm-dla-karta ul { margin: 0 !important; }

/* ---------- ZRZUTY OPINII NA TELEFONIE — cala kolumna, tap = powiekszenie ---------- */
html:root body img[src*="dowody/"] { cursor: zoom-in; }
@media (max-width: 768px) {
    /* pasek trzech zrzutow: zamiast karuzeli 80–88% szerokosci — jeden pod drugim, kazdy na cala kolumne */
    html:root body .op-pasek-track {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        padding: 0 16px !important;
    }
    html:root body .op-pasek-track > .op-shot { width: 100% !important; flex: none !important; max-width: none !important; }
    /* zrzut wewnatrz sekcji, ktora ma juz margines strony — bez drugiego marginesu (326 -> 358 px @390) */
    html:root body section .op-solo { padding-left: 0; padding-right: 0; }
    html:root body section .op-pasek-track { padding-left: 0 !important; padding-right: 0 !important; }
}

/* lightbox (sm-brand.js): szerokie zrzuty w czytelnym rozmiarze, przewijane w bok */
.sm-lb {
    position: fixed; inset: 0; z-index: 2147483001;
    display: none;
    overflow: auto;
    overscroll-behavior: contain;
    background: rgba(12, 11, 10, .94);
    padding: 64px 12px 28px;
    box-sizing: border-box;
}
.sm-lb.is-on { display: flex; }
.sm-lb-pole { margin: auto; position: relative; }
.sm-lb-pole img {
    display: block;
    max-width: none !important;
    height: auto !important;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.sm-lb-pole.is-szeroki::after {
    content: "\21C6";                         /* ⇆ — przesun w bok */
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sm-lime); color: #141414; font-size: 22px;
    pointer-events: none;
}
.sm-lb-x {
    position: fixed; top: 10px; right: 10px;
    width: 48px; height: 48px; border-radius: 50%;
    border: 0; background: var(--sm-lime); color: #141414;
    font-size: 30px; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 0 #7E9300;
}
.sm-lb-x:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* mobile-fixes.css ma button { font-size ... !important } */
html:root body .sm-lb .sm-lb-x { font: 400 32px/48px Arial, sans-serif !important; padding: 0 !important; min-height: 48px; text-align: center; }
html.sm-lb-on, html.sm-lb-on body { overflow: hidden !important; }

/* siatka kart „Dla kogo” (index 9 kart, specjalisci 6): trzy kolumny od 860 px — bez osieroconej karty */
@media (min-width: 860px) {
    html:root body .paths-section .paths-grid.sp-segmenty { grid-template-columns: repeat(3, 1fr) !important; }
    html:root body .paths-section .paths-grid.sp-segmenty .path-card h3 { font-size: 22px !important; }
}

/* v3: tekst min. 16 px w sekcjach „Dla kogo” (chipy, etykiety przed/po) */
html:root body .sp-zawody li { font-size: 16px !important; }
html:root body .sp-kol .sp-etykieta { font-size: 16px !important; letter-spacing: .1em !important; }

/* ==========================================================================
   v4 (23.10.2026, uwagi Marii): ciemne sekcje bez przejsc, indywidualne prowadzenie w hero ofert,
   hero ofert bez zdjecia, sekcja Mapa Ekspertyzy(TM).
   ========================================================================== */

/* ---------- 1. CIEMNE SEKCJE: jedno tlo #1C1A19 — bez poswiat, gradientow i animacji ----------
   Kazda sekcja miala wlasne dwie poswiaty (lewa gora limonka, prawa dol pomarancz), wiec na kazdej granicy
   dwoch ciemnych sekcji powstawal poziomy „pas”. Teraz granica jest niewidoczna. Dotyczy tez sekcji
   domykajacej (:not(#sm-brak) bije html:root body .sm-final.akt-ciemny); zostaje jej limonkowa linia u gory. */
html:root body :is(.akt-ciemny, .sm-ciemne-sekcja, .sm-hero-foto--bez):not(#sm-brak) {
    background-color: var(--sm-dark) !important;
    background-image: none !important;
    animation: none !important;
}
/* dekoracyjne kola z poswiata w hero (oferty, produkt-w-48h) */
html:root body .hero-section.sm-hero-foto--bez::before,
html:root body .hero-section.sm-hero-foto--bez::after { display: none !important; }

/* ---------- 2. INDYWIDUALNE PROWADZENIE — karta z limonkowa krawedzia u gory hero ofert ---------- */
html:root body .sm-prow {
    max-width: 600px;
    margin: 0 auto 26px;
    padding: 18px 18px 16px;
    border-radius: 16px;
    text-align: center;
    background: rgba(250, 247, 242, .05);
    box-shadow: inset 0 0 0 2px var(--sm-lime);
}
html:root body .sm-prow p { margin: 0 !important; }
html:root body .sm-prow .sm-prow-1 { font-size: 17px !important; line-height: 1.4 !important; font-weight: 700 !important; color: #fff !important; }
html:root body .sm-prow .sm-prow-2 {
    margin-top: 8px !important;
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: 23px !important;
    line-height: 1.18 !important;
    color: var(--sm-lime) !important;
    -webkit-text-fill-color: var(--sm-lime) !important;
}
html:root body .sm-prow .sm-prow-3 { margin-top: 8px !important; font-size: 16px !important; line-height: 1.45 !important; color: #EDE7DE !important; }
@media (min-width: 769px) {
    html:root body .sm-prow { padding: 20px 28px 18px; }
    html:root body .sm-prow .sm-prow-2 { font-size: 28px !important; }
}
/* hero ofert: karta u gory zamiast pustego paska nad naglowkiem */
@media (max-width: 768px) {
    html:root body #hero.sm-hero-foto--bez { padding-top: 28px !important; }
}

/* ---------- 3. MAPA EKSPERTYZY(TM) — czerwony ocean -> blekitny ocean -> trzy kroki -> Twoja oferta ---------- */
html:root body .sm-mapa { padding-left: 16px !important; padding-right: 16px !important; }
html:root body .sm-mapa-in { max-width: 760px; margin: 0 auto; text-align: left; }
html:root body .sm-mapa-etyk {
    text-align: center;
    margin: 0 !important;
    font-family: var(--sm-display) !important;
    text-transform: uppercase;
    font-size: 24px !important;
    line-height: 1.3 !important;
}
html:root body h2.sm-mapa-tytul {
    text-align: center;
    margin: 14px 0 12px !important;
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .01em !important;
    font-size: min(calc((100vw - 32px) / 7.2), 60px) !important;
    line-height: 1.05 !important;
    color: var(--sm-ink) !important;
    -webkit-text-fill-color: var(--sm-ink) !important;
    background: none !important;
}
html:root body .sm-mapa-wstep { text-align: center; color: #4A4A4A !important; margin: 0 auto !important; max-width: 620px; }
html:root body .sm-mapa-oceany { display: grid; gap: 16px; margin: 26px 0 22px; }
html:root body .sm-mapa-ocean {
    --k: var(--sm-orange);
    background: #fff;
    border-radius: 16px;
    padding: 26px 20px 20px;
    box-shadow: inset 0 6px 0 var(--k), 0 0 0 1.5px rgba(28, 26, 25, .14), 0 12px 28px -16px rgba(28, 26, 25, .4);
}
html:root body .sm-mapa-ocean--blekitny { --k: var(--sm-lime); box-shadow: inset 0 6px 0 var(--k), 0 0 0 2px var(--sm-ink), 0 12px 28px -16px rgba(28, 26, 25, .4); }
html:root body .sm-mapa-ocean p { margin: 0 !important; color: #1F1F1F !important; }
html:root body .sm-mapa-ocean .sm-mapa-o-etyk {
    margin-bottom: 10px !important;
    font-family: var(--sm-display) !important;
    text-transform: uppercase;
    font-size: 24px !important;
    line-height: 1.15 !important;
    color: var(--sm-ink) !important;
}
html:root body .sm-mapa-ocean--czerwony .sm-mapa-o-etyk::before { content: "\2715\00a0"; color: var(--sm-orange-ink); }
html:root body .sm-mapa-ocean--blekitny .sm-mapa-o-etyk::before { content: "\2713\00a0"; color: var(--sm-ink); }
html:root body .sm-mapa-wersja {
    margin: 0 0 24px !important;
    padding: 0 0 0 16px;
    border-left: 4px solid var(--sm-orange);
    font-weight: 600;
    color: #1F1F1F !important;
}
html:root body .sm-mapa-kroki-tyt {
    margin: 0 0 12px !important;
    text-align: center;
    font-family: var(--sm-display) !important;
    text-transform: uppercase;
    font-size: 22px !important;
    line-height: 1.2 !important;
    color: var(--sm-ink) !important;
}
html:root body ol.sm-mapa-kroki { counter-reset: smk; list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
html:root body ol.sm-mapa-kroki > li {
    counter-increment: smk;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
    padding: 12px 16px 12px 12px !important;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 0 0 1.5px rgba(28, 26, 25, .14);
    font-weight: 700;
    color: #1F1F1F !important;
    line-height: 1.35 !important;
}
html:root body ol.sm-mapa-kroki > li::before {
    content: counter(smk);
    flex: 0 0 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sm-ink);
    color: var(--sm-lime);
    font-family: var(--sm-display);
    font-size: 22px;
    line-height: 1;
    position: static !important;
}
html:root body .sm-mapa-wynik {
    margin: 12px 0 0 !important;
    padding: 18px 20px !important;
    border-radius: 16px;
    background: var(--sm-ink);
    color: #FAF7F2 !important;
    text-align: center;
}
html:root body .sm-mapa-wynik b {
    display: block;
    margin-bottom: 4px;
    font-family: var(--sm-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 1.1;
    color: var(--sm-lime) !important;
}
html:root body .sm-mapa-klucz {
    margin: 26px 0 0 !important;
    text-align: center;
    font-family: var(--sm-display) !important;
    text-transform: uppercase;
    font-size: 26px !important;
    line-height: 1.35 !important;
    color: var(--sm-ink) !important;
}
html:root body .sm-mapa-klucz .sm-pig { margin: 4px 0; }
@media (min-width: 769px) {
    html:root body .sm-mapa-oceany { grid-template-columns: 1fr 1fr; gap: 20px; }
    html:root body ol.sm-mapa-kroki { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    html:root body ol.sm-mapa-kroki > li { flex-direction: column; text-align: center; padding: 18px 14px !important; }
    html:root body .sm-mapa-klucz { font-size: 34px !important; }
}

/* ---------- 4. SZYBKOSC: pierwszy ekran widoczny od razu ----------
   .js-anim .animate-on-scroll chowa tresc (opacity 0), dopoki skrypt na koncu <body> nie doda .in-view
   (albo bezpiecznik 2 s). W hero opoznialo to pierwsze malowanie i LCP — Lighthouse mobile na index:
   FCP 4,6 s, LCP 7,0 s, z czego 90% to „render delay”. Ruch nizej na stronie zostaje bez zmian. */
html.js-anim :is(.hero-section, #hero) .animate-on-scroll,
html.js-anim .animate-on-scroll:is(.hero-section, #hero) { opacity: 1 !important; transform: none !important; transition: none !important; }
/* pigulki i „= Twoja oferta” w Mapie: Anton (inaczej dziedzicza Poppins z regul akapitu) */
html:root body .sm-mapa :is(.sm-pig, .sm-mapa-wynik b) {
    font-family: var(--sm-display) !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase;
}
html:root body .sm-mapa .sm-mapa-wynik b { font-size: 30px !important; line-height: 1.1 !important; }
html:root body ol.sm-mapa-kroki > li { box-shadow: 0 0 0 1.5px rgba(28, 26, 25, .14) !important; border: 0 !important; }
html:root body ol.sm-mapa-kroki > li::before { flex: none !important; width: 42px; height: 42px; }