/* ============================================================
   KLINIKA BIKO — KOSZYK v3
   ============================================================
   Napisany od zera. Nie dziedziczy nic po koszyku w quiz.html ani po
   koszyk-v2 — inny układ, inna nawigacja, inna hierarchia. Wspólne
   zostają wyłącznie kolory i krój pisma.

   POMYSŁ: koszyk nie jest sklepem, tylko ciągiem dalszym kwalifikacji.
   Zamiast jednej długiej przewijanej strony — trzy pełnoekranowe kroki
   z paskiem 1·2·3 u góry (wzorzec z join.whoop.com) i stałą „kartą
   terapii" z boku, która przez cały czas pokazuje, co pacjent kupuje
   (wzorzec ciemnego panelu z Stripe Checkout).

   PALETA — wprost z grafik na Instagram:
   reklamy/grafiki/2026-09-16/aktywnosc-kolor.css (krem + granat + pomarańcz).
   Kontrasty policzone w OKLCH, progi WCAG AA:
     biel na #9c3a00 (przycisk) .................. 6,96
     #e2621f jako plama pod czarnym tekstem ...... 5,62
     #e2621f jako element UI na kremie ........... 3,14  (próg 3,0)
     #f6a06a na granacie #1f4650 ................. 4,95
     biel na granacie #1f4650 ................... 12,1
   Jasny #e2621f NIE jest używany jako tekst ani jako tło przycisku —
   tam ma odpowiednio 3,5 i 3,5, czyli poniżej progu 4,5.
   ============================================================ */

:root {
    --sand:       #f4efe6;
    --sand-deep:  #e9e1d3;
    --paper:      #fffdf9;
    --ink:        #1b2326;
    --ink-2:      #4f5a5c;
    --ink-3:      #857c6c;
    --teal:       #2d5c68;
    --teal-deep:  #1f4650;
    --mint:       #dce9ee;
    --orange:     #e2621f;
    --orange-ink: #9c3a00;
    --orange-soft:#f6a06a;
    --bad:        #b42318;

    /* Kolor przycisku glownego. Decyzja Mateusza 17.09: przyciski zostaja czarne,
       tak jak byly na stronie. Zeby wrocic do pomaranczowych — podmien na
       var(--orange-ink) (biel na nim ma 6,96, kontrast przechodzi). */
    --btn:        var(--ink);

    --r:    14px;
    --r-lg: 22px;
    --pad:  clamp(20px, 5vw, 56px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Outfit', system-ui, sans-serif;
    background: var(--sand);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
a { color: inherit; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================
   SZKIELET
   ============================================================ */
.shell { min-height: 100dvh; }

@media (min-width: 900px) {
    .shell {
        display: grid;
        grid-template-columns: 400px minmax(0, 1fr);
        align-items: stretch;
    }
}

/* ============================================================
   KARTA TERAPII (kolumna stała)
   ============================================================ */
.card {
    background: var(--teal-deep);
    color: #fff;
    position: relative;
    z-index: 5;
}
@media (min-width: 900px) {
    /* Kolumna ma się MIEŚCIĆ w oknie, nie przewijać. Wszystkie odstępy pionowe
       i wielkość kwoty są liczone od wysokości okna (vh), więc na niższym
       laptopie karta ściska się sama zamiast chować treść pod scrollem.
       overflow-y: auto zostaje wyłącznie jako zabezpieczenie na skrajnie
       niskie okna (poniżej ~560 px), żeby nic nie zostało ucięte. */
    .card {
        position: sticky;
        top: 0;
        height: 100dvh;
        overflow-y: auto;
        padding: clamp(18px, 3.4vh, 44px) 40px clamp(16px, 3vh, 40px);
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

.card__top {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px var(--pad) 0;
}
@media (min-width: 900px) { .card__top { padding: 0 0 clamp(14px, 2.8vh, 36px); } }

.card__brand { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.04em; }
.card__kind {
    font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--orange-soft);
}

/* Pasek podglądu — tylko telefon */
.card__peek {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px var(--pad) 16px;
    text-align: left;
    color: inherit;
}
.card__peek-l b { display: block; font-size: 1.02rem; font-weight: 600; }
.card__peek-l span { font-size: .82rem; color: var(--mint); }
.card__peek-r { display: flex; align-items: center; gap: 10px; }
.card__peek-r b { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; }
.card__peek-r i { font-size: .8rem; color: var(--orange-soft); transition: transform .2s; }
.card.is-open .card__peek-r i { transform: rotate(180deg); }
@media (min-width: 900px) { .card__peek { display: none; } }

.card__body { display: none; padding: 0 var(--pad) 24px; }
.card.is-open .card__body { display: block; }
@media (min-width: 900px) { .card__body { display: block; padding: 0; } }

.card__label {
    font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--orange-soft); margin-bottom: 6px;
}
.card__amount {
    display: flex; align-items: baseline; gap: 6px;
    /* rosnie z szerokoscia, ale nie przekracza tego, co miesci sie w wysokosci okna */
    font-size: clamp(2.5rem, min(7vw, 6.4vh), 4.2rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1;
}
.card__amount small { font-size: .3em; font-weight: 600; letter-spacing: 0; }
.card__rate { font-size: .95rem; color: var(--mint); margin-top: 8px; }
.card__save {
    display: inline-block; margin-top: 10px;
    font-size: .78rem; font-weight: 600;
    color: var(--teal-deep); background: var(--orange-soft);
    padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
.card__save[hidden] { display: none; }

.card__rule { border: 0; border-top: 1px solid rgba(255,255,255,.16); margin: clamp(13px, 2.6vh, 26px) 0 clamp(10px, 2vh, 20px); }

.card__list { display: grid; gap: clamp(6px, 1.3vh, 11px); font-size: .92rem; color: var(--mint); }
.card__list li { display: flex; gap: 11px; align-items: flex-start; }
.card__list i { color: var(--orange-soft); font-size: .95rem; margin-top: 3px; flex: none; }

.card__guar { display: flex; gap: 12px; font-size: .88rem; color: var(--mint); }
.card__guar i { color: var(--orange-soft); font-size: 1.15rem; margin-top: 2px; flex: none; }
.card__guar b { color: #fff; }

.card__med { font-size: .82rem; color: rgba(255,255,255,.62); margin-top: clamp(9px, 1.8vh, 18px); }

.card__team { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: clamp(13px, 2.6vh, 26px); flex-wrap: nowrap; }
.card__team img {
    width: clamp(28px, 4.4vh, 40px); height: clamp(35px, 5.5vh, 50px);
    object-fit: cover; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.25);
}
.card__team span { flex: 1 1 0; min-width: 0; font-size: clamp(.68rem, 1.35vh, .74rem); line-height: 1.35; color: rgba(255,255,255,.6); }

/* Bardzo niskie okno (stary laptop, otwarta konsola): podpis pod zdjęciami
   schodzi jako pierwszy — twarze niosą zaufanie, nazwiska są też na stronie.
   Dzięki temu kolumna dalej mieści się bez przewijania. */
@media (min-width: 900px) and (max-height: 640px) {
    .card__team span { display: none; }
    /* Ostatni stopień ściskania: drobniejszy tekst i ciaśniejszy interlinia.
       Poniżej ~560 px okna kolumna i tak dostanie scroll — to zabezpieczenie,
       nie docelowy widok. */
    .card__list { font-size: .86rem; }
    .card__list li { line-height: 1.35; }
    .card__guar { font-size: .83rem; line-height: 1.4; }
    .card__med  { font-size: .76rem; line-height: 1.4; }
    .card__rate { font-size: .88rem; }
}

/* ============================================================
   KOLUMNA KROKÓW
   ============================================================ */
.flow {
    background: var(--sand);
    padding: 0 var(--pad) 140px;
    min-height: 100dvh;
}
@media (min-width: 900px) {
    /* Rytm pionowy liczony od wysokosci okna — prawa kolumna ma sie miescic
       bez przewijania. Dolny padding maly, bo paska dolnego tu nie ma. */
    .flow { padding: clamp(16px, 3vh, 44px) 0 clamp(16px, 3vh, 40px); display: flex; flex-direction: column; }
    .flow > * { width: min(100%, 640px); margin-inline: auto; padding-inline: var(--pad); }
}

/* ---------- PASEK KROKÓW ---------- */
.rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(12px, 2.2vh, 20px) 0 clamp(16px, 3.2vh, 30px);
}
.rail ol { display: flex; align-items: center; gap: 8px; }
.rail__i {
    display: flex; align-items: center; gap: 8px;
    font-size: .84rem; font-weight: 500; color: var(--ink-3);
    cursor: default;
}
.rail__i span {
    width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 50%; border: 1.5px solid var(--sand-deep);
    font-size: .76rem; font-weight: 700;
}
.rail__i + .rail__i::before {
    content: ""; width: 20px; height: 1.5px; background: var(--sand-deep); margin-right: 8px;
}
.rail__i.is-now { color: var(--ink); font-weight: 600; }
.rail__i.is-now span { background: var(--orange); border-color: var(--orange); color: #fff; }
.rail__i.is-done { color: var(--ink-2); cursor: pointer; }
.rail__i.is-done span { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }

.rail__phone {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .85rem; font-weight: 600; color: var(--orange-ink);
    text-decoration: none; white-space: nowrap;
}
.rail__phone:hover { text-decoration: underline; }
/* Cel dotyku 44 px bez zmiany ukladu: ikona ma 14 px (audyt 23.09.2026) */
.rail__phone { padding: 14px; margin: -14px; }

@media (max-width: 620px) {
    .rail__i:not(.is-now) span { font-size: 0; width: 10px; height: 10px; }
    .rail__i:not(.is-now) { font-size: 0; gap: 0; }
    .rail__i + .rail__i::before { width: 14px; margin-right: 6px; }
    .rail__phone span { display: none; }
}

/* ---------- KROK ---------- */
.step { display: none; animation: pop .3s ease both; }
.step.is-on { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.step__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--orange-ink); margin-bottom: clamp(8px, 1.6vh, 14px);
}
.step__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

.step__q {
    font-size: clamp(2rem, 5.5vw, 3.1rem);
    font-weight: 700; letter-spacing: -0.045em; line-height: 1.06;
    text-wrap: balance;
}
/* Zakreślacz — ten sam zabieg co na grafikach na Instagram */
.step__q em {
    position: relative; font-style: normal; display: inline-block; z-index: 0;
}
.step__q em::before {
    content: ""; position: absolute; left: -.1em; right: -.1em; bottom: .04em; height: .32em;
    background: var(--orange); opacity: .95; transform: rotate(-1.1deg); border-radius: 3px; z-index: -1;
}

.step__hint { margin-top: clamp(9px, 1.8vh, 16px); font-size: 1rem; color: var(--ink-2); max-width: 46ch; }

.step__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: clamp(16px, 3.4vh, 34px); }

/* ---------- PRZYCISKI ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 0 30px;
    background: var(--btn); color: #fff;
    border-radius: 99px; font-size: 1rem; font-weight: 600;
    transition: transform .12s, filter .12s;
    text-decoration: none;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.btn[disabled] { opacity: .5; cursor: progress; }
.btn--bare { background: none; color: var(--ink-2); min-height: 44px; padding: 0 6px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.btn--bare:hover { color: var(--ink); filter: none; }
.btn--pay { min-height: 62px; font-size: 1.05rem; }

.linky {
    font-size: .9rem; font-weight: 500; color: var(--orange-ink);
    text-decoration: underline; text-underline-offset: 4px; padding: 6px 0;
}

/* ============================================================
   KROK 1 — MIESIĄCE
   ============================================================ */
.months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: clamp(16px, 3.2vh, 32px); }

.mo {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: clamp(16px, 3vh, 26px) 8px clamp(13px, 2.4vh, 20px);
    background: var(--paper);
    border: 1.5px solid var(--sand-deep);
    border-radius: var(--r-lg);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s, transform .15s;
}
.mo:hover { border-color: var(--ink-3); }
.mo input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.mo__n { font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; }
.mo__w { font-size: .88rem; color: var(--ink-2); }
.mo__p { font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-top: 8px; }
/* Krotki opis wariantu — wzorzec Holi („Wsparcie w systemie malych krokow" /
   „Zdecydowane wejscie w proces leczenia"). U nas opis medyczny, nie nastawienie:
   pacjent ma wiedziec, co dany okres daje w leczeniu. */
.mo__d {
    font-size: .74rem;
    line-height: 1.3;
    color: var(--ink-3);
    margin-top: 6px;
    max-width: 16ch;
}
.mo:has(input:checked) .mo__d, .mo.is-sel .mo__d { color: var(--mint); }
@media (max-height: 760px) and (min-width: 900px) { .mo__d { display: none; } }

.mo__tag {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--orange-ink); background: var(--sand);
    border: 1.5px solid var(--orange); border-radius: 99px;
    padding: 3px 10px; white-space: nowrap;
}

/* Zaznaczenie: granatowe wypełnienie + pomarańczowa obwódka.
   Dwa sygnały naraz, więc nie polega wyłącznie na kolorze. */
.mo:has(input:checked), .mo.is-sel {
    background: var(--teal-deep);
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(226, 98, 31, .22);
}
.mo:has(input:checked) .mo__n, .mo.is-sel .mo__n { color: #fff; }
.mo:has(input:checked) .mo__w, .mo.is-sel .mo__w { color: var(--mint); }
.mo:has(input:checked) .mo__p, .mo.is-sel .mo__p { color: var(--orange-soft); }
.mo:has(input:checked) .mo__tag, .mo.is-sel .mo__tag { background: var(--teal-deep); color: var(--orange-soft); }
.mo:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- KOSZT DZIENNY ----------
   Uzasadnienie ceny bez porównań do konkurencji: nasza kwota podzielona
   przez nasze dni. Liczba jest największym elementem, bo to ona zostaje w głowie. */
.daily {
    display: flex; align-items: center; gap: clamp(14px, 2.2vw, 22px);
    margin-top: clamp(12px, 2.2vh, 22px);
    padding: clamp(12px, 2vh, 18px) clamp(15px, 2.2vw, 20px);
    background: var(--teal-deep); color: #fff;
    border-radius: var(--r-lg);
}
.daily__big { display: flex; flex-direction: column; line-height: 1; flex: none; }
.daily__big b {
    font-size: clamp(1.8rem, min(4.2vw, 4.4vh), 2.7rem);
    font-weight: 700; letter-spacing: -0.04em; color: var(--orange-soft);
    white-space: nowrap;
}
.daily__big span {
    font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.7); margin-top: 5px;
}
.daily__txt { font-size: .92rem; line-height: 1.45; color: var(--mint); }
.daily__txt span { color: #fff; font-weight: 600; white-space: nowrap; }
@media (max-width: 520px) { .daily { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* ---------- OBAWY PRZED PŁATNOŚCIĄ ----------
   Trzy pytania, które pacjent zadaje sobie w głowie tuż przed kliknięciem.
   Cytat w cudzysłowie, bo to jego słowa, nie nasze hasło. */
.fears { margin-top: clamp(18px, 3vh, 30px); }
.fears__t {
    font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 14px;
}
.fears__l { display: grid; gap: 14px; }
.fears__l li {
    display: grid; grid-template-columns: 26px 1fr; grid-template-areas: "ico q" ".  a";
    gap: 2px 12px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1.5px solid var(--sand-deep);
    border-radius: var(--r);
}
.fears__l i { grid-area: ico; color: var(--orange-ink); font-size: 1.05rem; margin-top: 2px; }
.fears__l b { grid-area: q; font-size: .96rem; font-weight: 600; color: var(--ink); }
.fears__l span { grid-area: a; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.fears__l a { font-weight: 600; color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .fears__l { grid-template-columns: 1fr 1fr; } .fears__l li:first-child { grid-column: 1 / -1; } }

/* ---------- OŚ TERAPII ---------- */
.axis { margin-top: clamp(16px, 3.4vh, 34px); }
.axis__line { position: relative; height: 3px; background: var(--sand-deep); border-radius: 99px; }
.axis__fill {
    position: absolute; inset: 0 auto 0 0; width: 50%;
    background: var(--orange); border-radius: 99px;
    transition: width .35s cubic-bezier(.4,0,.2,1);
}
.axis__pts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 12px; }
.axis__pts li { text-align: left; opacity: .38; transition: opacity .25s; }
.axis__pts li.on { opacity: 1; }
.axis__pts b {
    display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--sand-deep); color: var(--ink-2);
    font-size: .72rem; font-weight: 700;
    margin-bottom: 6px;
}
.axis__pts li.on b { background: var(--orange); color: #fff; }
.axis__pts span { display: block; font-size: .7rem; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 620px) {
    .axis__pts span { display: none; }
    .axis__pts { grid-template-columns: repeat(6, 1fr); justify-items: center; }
    .axis__pts li { text-align: center; }
}
.axis__note { margin-top: clamp(9px, 1.8vh, 16px); font-size: .9rem; color: var(--ink-2); }

/* ============================================================
   POLA
   ============================================================ */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(9px, 1.7vh, 14px); margin-top: clamp(16px, 3.2vh, 32px); }
.f--wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }

.f { position: relative; }
.f input {
    width: 100%; min-height: 62px;
    padding: 22px 18px 8px;
    font-size: 1.02rem; color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--sand-deep);
    border-radius: var(--r);
    transition: border-color .15s, box-shadow .15s;
}
.f label {
    position: absolute; left: 19px; top: 20px;
    font-size: 1rem; color: var(--ink-3);
    pointer-events: none;
    transition: transform .15s, font-size .15s, color .15s;
    transform-origin: left top;
}
.f input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(226,98,31,.18); }
.f input:focus + label,
.f input:not(:placeholder-shown) + label { transform: translateY(-12px) scale(.76); color: var(--ink-2); }
.f--short input { max-width: 200px; letter-spacing: .14em; }
.f__hint { font-size: .8rem; color: var(--ink-3); margin-top: 6px; }
.f__err { display: none; font-size: .84rem; font-weight: 500; color: var(--bad); margin-top: 6px; }
.f__err.on { display: block; }
.f__err.on::before { content: "⚠ "; font-weight: 700; }
.f.bad input { border-color: var(--bad); }

/* ============================================================
   KROK 3 — PŁATNOŚĆ
   ============================================================ */
.pays { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: clamp(16px, 3vh, 30px); }
@media (max-width: 460px) { .pays { grid-template-columns: 1fr; } }

.pay {
    position: relative;
    display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "ico name" "ico desc";
    gap: 0 14px; align-items: center;
    padding: clamp(13px, 2.4vh, 18px) 18px;
    background: var(--paper);
    border: 1.5px solid var(--sand-deep);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.pay input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pay img { grid-area: ico; max-height: 22px; width: auto; border-radius: 4px; }   /* zaokrąglenie dla badge’y (blik.png ma proste rogi) */
.pay b { grid-area: name; font-size: .98rem; font-weight: 600; }
.pay span { grid-area: desc; font-size: .8rem; color: var(--ink-3); }
.pay:hover { border-color: var(--ink-3); }
.pay:has(input:checked), .pay.is-sel {
    border-color: var(--orange);
    box-shadow: inset 0 0 0 1px var(--orange);
    background: #fff;
}
.pay:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }

.blik { margin-top: clamp(10px, 2vh, 18px); display: none; }
.blik.on { display: block; }

/* ---------- KROK 1 MA SIĘ ZMIEŚCIĆ RAZEM Z PORÓWNANIEM ----------
   Po dołożeniu bloku „ile razy taniej" ekran wyboru urósł o ~160 px.
   Zamiast wyrzucać treść — ściskamy to, co da się ścisnąć bez straty:
   wielkość pytania, oddechy między sekcjami i wnętrze bloku porównania. */
@media (min-width: 900px) {
    #step-1 .step__q { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
    #step-1 .months { margin-top: clamp(12px, 2.4vh, 22px); }
    #step-1 .mo { padding: clamp(13px, 2.4vh, 20px) 8px clamp(11px, 2vh, 16px); }
    #step-1 .mo__n { font-size: clamp(2rem, 5.4vw, 2.8rem); }
    #step-1 .mo__p { margin-top: 5px; }
    #step-1 .axis { margin-top: clamp(12px, 2.4vh, 24px); }
    #step-1 .step__go { margin-top: clamp(12px, 2.4vh, 24px); }
}
/* Na niższym oknie opisy etapów na osi schodzą — same numerki zostają,
   a zdanie pod osią i tak tłumaczy wybór. */
@media (min-width: 900px) and (max-height: 1040px) {
    #step-1 .axis__pts span { display: none; }
}

/* Drugi stopień: przy oknie do 860 px dociskamy krok 1 jeszcze o ~60 px,
   żeby porównanie kosztów zmieściło się bez przewijania. */
@media (min-width: 900px) and (max-height: 1040px) {
    #step-1 .step__hint { font-size: .94rem; margin-top: clamp(8px, 1.4vh, 12px); }
    #step-1 .months { gap: 8px; }
    #step-1 .mo__d { font-size: .7rem; margin-top: 4px; }
    #step-1 .axis__note { margin-top: clamp(6px, 1.2vh, 10px); font-size: .86rem; }
    #step-1 .mo { padding: clamp(11px, 2vh, 16px) 8px clamp(9px, 1.7vh, 13px); }
    #step-1 .step__go { margin-top: clamp(10px, 1.9vh, 18px); }
}

/* ---------- ZGODY ---------- */
.agree { margin-top: clamp(14px, 3vh, 30px); display: grid; gap: 0; }
/* Zgoda na płatność cykliczną: pojawia się dopiero po wyborze karty, więc musi się odróżniać
   od regulaminu, inaczej ginie jako kolejna linijka drobnego druku (audyt 20.09.2026). */
.agree__rec[hidden] { display: none; }
.agree__rec {
    background: var(--sand, rgba(214,116,58,.07));
    border: 1px solid rgba(214,116,58,.28);
    border-radius: 10px;
    padding: 4px 14px;
    margin-bottom: 10px;
}
.chk { display: grid; grid-template-columns: 24px 1fr; gap: 13px; align-items: start; padding: clamp(6px, 1.2vh, 11px) 0; cursor: pointer; }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk__b {
    width: 24px; height: 24px; border-radius: 7px;
    border: 1.5px solid var(--sand-deep); background: var(--paper);
    display: grid; place-items: center; margin-top: 1px;
}
.chk__b i { font-size: .72rem; color: #fff; opacity: 0; }
.chk:has(input:checked) .chk__b { background: var(--teal-deep); border-color: var(--teal-deep); }
.chk:has(input:checked) .chk__b i { opacity: 1; }
.chk:has(input:focus-visible) .chk__b { outline: 3px solid var(--orange); outline-offset: 2px; }
.chk > span { font-size: .93rem; color: var(--ink-2); }
.chk small { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 2px; }
.chk a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- BŁĄD ZBIORCZY ---------- */
.errbox {
    display: flex; gap: 12px; margin-top: 24px;
    padding: 16px 18px;
    background: #fef3f2; border: 1.5px solid var(--bad); border-left-width: 5px;
    border-radius: var(--r); color: var(--bad);
}
.errbox b { display: block; margin-bottom: 4px; }
.errbox ul { list-style: disc; padding-left: 18px; font-size: .9rem; }
.errbox i { margin-top: 3px; }

.safe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: clamp(12px, 2.4vh, 24px); font-size: .85rem; color: var(--ink-3); }
.safe > i { color: var(--teal); }

/* ============================================================
   EKRANY KOŃCOWE
   ============================================================ */
.step--end { text-align: left; padding-top: 10px; }
.tick {
    width: 64px; height: 64px; display: grid; place-items: center;
    border-radius: 50%; background: var(--mint); color: var(--teal-deep);
    font-size: 1.5rem; margin-bottom: 24px;
}
.tick--bad { background: #fef3f2; color: var(--bad); }
.when { margin-top: 28px; padding: 22px 24px; background: var(--paper); border: 1.5px solid var(--sand-deep); border-radius: var(--r-lg); }
.when__label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }
.when__big { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; margin: 4px 0 10px; }
.when p { font-size: .92rem; color: var(--ink-2); }
.why { margin-top: 24px; display: grid; gap: 8px; font-size: .94rem; color: var(--ink-2); }
.why li { padding-left: 18px; position: relative; }
.why li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ============================================================
   PASEK DOLNY (telefon)
   ============================================================ */
.dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: 14px;
    padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
    background: rgba(244,239,230,.92);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-top: 1px solid var(--sand-deep);
}
.dock__l { flex: 1; min-width: 0; }
.dock__l b { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; }
/* Jedna linia — przy „Zamawiam i płacę" podpis łamał się na dwie i podnosił pasek */
.dock__l span { display: block; font-size: .78rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock .btn { min-height: 50px; padding: 0 24px; white-space: nowrap; }
@media (min-width: 900px) { .dock { display: none; } }

/* Na telefonie pasek dolny przejmuje rolę głównego przycisku — ten w treści
   byłby drugim takim samym CTA dwa centymetry wyżej. Zostają tylko odnośniki
   poboczne. Ekrany końcowe mają własne przyciski, bo tam paska nie ma. */
@media (max-width: 899px) {
    #step-1 .step__go .btn:not(.btn--bare),
    #step-2 .step__go .btn:not(.btn--bare),
    #step-2 .step__go .btn:not(.btn--bare) { display: none; }
}

/* Przycisk w dolnym pasku w trakcie wysyłki — na telefonie to JEDYNY przycisk płatności. */
.dock .btn:disabled, .dock .btn.is-busy { opacity: .62; cursor: progress; }
.dock .btn.is-busy i { animation: dockSpin .9s linear infinite; }
@keyframes dockSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dock .btn.is-busy i { animation: none; } }

/* Ekran „potwierdzamy płatność" — ani sukces, ani porażka. */
.tick--wait { background: var(--sand-deep); color: var(--ink-2); }

/* ============================================================
   OKNO I CZEKANIE
   ============================================================ */
/* margin: auto jest tym, czym przeglądarka centruje <dialog> otwarty przez showModal().
   Reset „* { margin: 0 }" u góry pliku go kasował i okno lądowało w lewym górnym rogu
   (zgłoszone 19.09.2026). Przywracamy je tutaj — dotyczy obu okien: telefonu i regulaminu. */
.modal { border: 0; padding: 0; margin: auto; border-radius: var(--r-lg); max-width: min(440px, calc(100vw - 32px)); width: 100%; background: var(--paper); }
.modal::backdrop { background: rgba(27,35,38,.6); }
.modal form { padding: 28px; }
.modal h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; }
.modal > form > p { font-size: .92rem; color: var(--ink-2); }
.modal .fields, .modal .f { margin-top: 20px; }
.cb-done { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--teal); font-weight: 500; }

.wait {
    position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
    padding: 20px; background: rgba(244,239,230,.94); backdrop-filter: blur(6px);
}
.wait__box { max-width: 420px; text-align: center; background: var(--paper); border: 1.5px solid var(--sand-deep); border-radius: var(--r-lg); padding: 34px 28px; }
.wait__box h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; }
.wait__box p { font-size: .94rem; color: var(--ink-2); }
.wait__spin {
    width: 42px; height: 42px; margin: 0 auto 20px;
    border: 3px solid var(--sand-deep); border-top-color: var(--orange);
    border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wait__t { margin-top: 14px; font-weight: 700; color: var(--ink); }


/* ---------- PUNKT 8: NAKŁADKA Z REGULAMINEM / POLITYKĄ (18.09.2026) ---------- */
.modal--doc {
    max-width: min(780px, calc(100vw - 32px));
    max-height: 88vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.modal--doc[open] { display: flex; }

.doc-head {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 20px; border-bottom: 1px solid var(--sand-deep); background: var(--paper);
}
.doc-head h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.doc-x {
    flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: var(--sand); color: var(--ink); font-size: 1rem; cursor: pointer;
}
.doc-x:hover { background: var(--sand-deep); }

.doc-body {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 4px 20px 8px;
}
/* Dokument przychodzi z własnym <style> (klasy .doc*) — zdejmujemy tylko marginesy strony */
.doc-body .doc { padding: 0; }
.doc-body .doc__wrap { padding: 0; max-width: none; }
.doc-body .doc h1 { font-size: clamp(22px, 4vw, 28px); }
.doc-body .doc h2:first-of-type { margin-top: 24px; }
.doc-wait, .doc-err { padding: 28px 4px; font-size: .95rem; color: var(--ink-2); }

.doc-foot {
    flex: none; padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--sand-deep); background: var(--paper);
}
.doc-foot .btn { width: 100%; }

@media (max-width: 560px) {
    .modal--doc { max-width: 100vw; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
}


/* ---------- OPINIE PACJENTÓW NA DOLE KROKU 2 (18.09.2026) ---------- */
.opin { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--sand-deep); }
.opin__t {
    font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-2); margin-bottom: 16px;
}
.opin__l { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.opin__l > li {
    background: var(--paper); border: 1px solid var(--sand-deep);
    border-radius: 14px; padding: 16px 18px;
}
.opin__s { color: var(--orange); font-size: .82rem; letter-spacing: .12em; margin-bottom: 8px; }
.opin__q { font-size: .95rem; line-height: 1.6; color: var(--ink); }
.opin__a { margin-top: 8px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.opin__d { margin-top: 14px; font-size: .78rem; line-height: 1.6; color: var(--ink-2); }

@media (min-width: 760px) {
    .opin__l { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   KOMPUTER: KARTA TERAPII NA GÓRZE, NA ŚRODKU (18.09.2026, decyzja Damiana)
   Wcześniej karta stała jako przyklejona kolumna z lewej na całą wysokość okna.
   Teraz zachowuje się jak na telefonie po rozwinięciu: pełna szerokość u góry,
   treść wyśrodkowana w tej samej kolumnie co kroki, kroki pod spodem.
   Nadpisuje reguły z sekcji „KARTA TERAPII" wyżej — dlatego stoi na końcu pliku.
   ============================================================ */
@media (min-width: 900px) {
    .shell { display: block; }

    .card {
        position: static;
        height: auto;
        overflow: visible;
        padding: clamp(20px, 3vh, 36px) var(--pad) clamp(20px, 3vh, 36px);
    }

    /* Ta sama oś co kroki, ale szersza: treść rozkłada się na boki zamiast ciągnąć w dół.
       Wcześniej było 640 px — karta zajmowała wtedy prawie cały ekran wzwyż. */
    .card > * { width: min(100%, 1120px); margin-inline: auto; }
    .card__top { padding: 0 0 18px; }

    /* Pasek podglądu zostaje schowany — na komputerze karta jest zawsze rozwinięta */
    .card__peek { display: none; }

    /* TRZY KOLUMNY (19.09.2026): kwota | zakres terapii | gwarancja i zespół.
       Wcześniejsza próba dwóch kolumn odrywała nagłówek „Twoja terapia obejmuje" od listy —
       teraz każda grupa siedzi we własnym .card__col, więc nagłówek zostaje przy swojej treści. */
    .card__body {
        display: grid;
        grid-template-columns: minmax(210px, auto) minmax(0, 1.25fr) minmax(250px, 1fr);
        gap: clamp(24px, 3.5vw, 56px);
        align-items: start;
        padding: 0;
    }
    .card__col { display: block; min-width: 0; }

    /* Kreski rozdzielały sekcje w układzie pionowym. W kolumnach rozdziela je odstęp,
       a pionową granicę rysujemy na kolumnach 2 i 3. */
    .card__rule { display: none; }
    .card__body > .card__col + .card__col {
        border-left: 1px solid rgba(255,255,255,.16);
        padding-left: clamp(24px, 3.5vw, 56px);
        margin-left: calc(-1 * clamp(24px, 3.5vw, 56px) / 2);
    }

    /* Zdjęcia zespołu przestają być dociskane do dołu — w kolumnie nie ma czego dociskać. */
    .card__team { margin-top: clamp(14px, 2vh, 22px); padding-top: 0; }

    /* Plakietka oszczędności ma obejmować swój tekst, a nie ciągnąć się przez całą szerokość */
    .card__save { width: fit-content; }

    .flow { padding-top: clamp(10px, 2vh, 24px); }
}

/* Bardzo szerokie okna: karta ma limit, ale szeroki — treść stoi w trzech kolumnach,
   więc 720 px (z układu pionowego) ściskało je z powrotem do wąskich słupków. */
@media (min-width: 1400px) {
    .card > * { width: min(100%, 1240px); }
}

/* ============================================================
   KARTA CYKLICZNA — pakiet miesięczny (18.09.2026)
   Ramkę z polami karty renderuje PayU (Secure Forms) w swoim iframe,
   dlatego stylujemy tylko pojemnik, nie same pola.
   ============================================================ */
.pay--rec[hidden] { display: none; }
.pay__tag {
    display: inline-block; margin-left: 6px; padding: 2px 8px;
    border-radius: 999px; background: var(--teal); color: #fff;
    font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    vertical-align: middle;
}

.cardrec { margin-top: clamp(10px, 2vh, 18px); display: none; }
.cardrec.on { display: block; }

.subrows { display: grid; gap: 8px; margin: 0 0 12px; }
.subrows > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.subrows dt { flex: none; font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.subrows dd { margin: 0; text-align: right; font-size: .9rem; line-height: 1.45; color: var(--ink); }

.subhint { font-size: .84rem; line-height: 1.55; color: var(--ink-2); margin-bottom: 14px; }
.subnote { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: .8rem; line-height: 1.5; color: var(--ink-2); }
.subnote i { margin-top: .2em; color: var(--teal); }

.cardform-wrap { margin-top: 14px; }
.cardform {
    min-height: 52px; padding: 14px 16px;
    background: var(--paper); border: 1.5px solid var(--sand-deep); border-radius: 14px;
    transition: border-color .15s;
}
.cardform.is-focus { border-color: var(--teal); }
.cardform.is-error { border-color: #b42318; }
.cardform__wait { font-size: .88rem; color: var(--ink-2); }

/* ============================================================
   KROK 1 — PROPOZYCJA Z 19.09.2026 (wersja 3)
   Zastępuje: kafelki „1 / 3 / 6 miesięcy" (.months, .mo), pasek kosztu dziennego (.daily)
   i oś sześciu kropek (.axis). Tamte reguły zostają wyżej w pliku jako nieużywane —
   przy wdrożeniu na produkcję można je usunąć razem z ich HTML-em.

   Po co ta zmiana: pacjent oglądał film, przechodził quiz i trafiał do koszyka dalej nie
   wiedząc, za co płaci. Zakres pakietu tłumaczą teraz zakładki, a nie lista pięciu haseł.
   ============================================================ */

/* ---------- Karta u góry: opis planu zamiast listy ---------- */
.card__plan { font-size: .92rem; line-height: 1.5; color: #fff; }
.card__plan b { color: var(--orange-soft); font-weight: 600; }

/* ---------- Wynik z quizu ---------- */
.quizres {
    margin-top: 16px;
    background: var(--paper);
    border: 1.5px solid var(--sand-deep);
    border-left: 4px solid var(--orange);
    border-radius: var(--r);
    padding: 13px 18px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: clamp(16px, 3vw, 34px);
    align-items: center;
}
.qr__k { font-size: .62rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.qr__v { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 1px; }
.qr__big .qr__k { color: var(--orange-ink); }
.qr__big .qr__v { font-size: 1.85rem; color: var(--orange-ink); }
.qr__d { font-size: .76rem; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 820px) {
    .quizres { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 12px 15px; }
    .qr__d { grid-column: 1 / -1; }
}

/* ---------- Trzy plany ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 18px; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; gap: 9px; } }

.plan { position: relative; display: block; cursor: pointer; }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan__box {
    background: var(--paper);
    border: 1.5px solid var(--sand-deep);
    border-radius: var(--r-lg);
    padding: 18px 18px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .16s, box-shadow .16s;
}
.plan:hover .plan__box { border-color: var(--orange-soft); }
/* Uwaga: selektor ogólnego rodzeństwa (~), NIE sąsiadujący (+) — w kafelku
   „najczęściej wybierany" między inputem a pudełkiem stoi jeszcze plakietka. */
.plan input:focus-visible ~ .plan__box { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.plan input:checked ~ .plan__box { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(226,98,31,.16); }

.plan__name { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.plan input:checked ~ .plan__box .plan__name { color: var(--orange-ink); }
/* Na komputerze trzy kafelki dzielą wąską kolumnę treści i wychodzi 169 px na kafelek
   (zmierzone na produkcji przy oknie 1280). Bez nowrap łamała się sama liczba — „349" i „zł"
   lądowały w osobnych wierszach. Teraz kwota jest nierozdzielna, a „/ miesiąc" w razie
   braku miejsca schodzi pod nią całe. Na telefonie kafelek ma 350 px i mieści się w linii. */
.plan__price { display: flex; align-items: baseline; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.plan__price b { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.plan__price span { font-size: .88rem; color: var(--ink-2); white-space: nowrap; }
.plan__total { font-size: .87rem; color: var(--ink-2); margin-top: 2px; }
.plan__total u { text-decoration: none; font-weight: 600; color: var(--orange-ink); }
.plan__raty { font-size: .83rem; color: var(--ink-3); margin-top: 6px; }
.plan__badge {
    position: absolute; top: -9px; left: 16px; z-index: 2;
    background: var(--orange); color: #fff;
    font-size: .63rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
/* Kafelek z plakietka potrzebuje wiecej miejsca u gory, zeby napis jej nie dotykal.
   Selektor rodzenstwa zamiast :has() — plakietka stoi w HTML przed pudelkiem. */
.plan__badge ~ .plan__box { padding-top: 26px; }
.plan__pick { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--ink-3); }
.plan__dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: grid; place-items: center; flex: none; }
.plan__dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform .15s; }
.plan input:checked ~ .plan__box .plan__dot { border-color: var(--orange); }
.plan input:checked ~ .plan__box .plan__dot::after { transform: scale(1); }
.plan input:checked ~ .plan__box .plan__pick { color: var(--orange-ink); }

/* ---------- Koszt dzienny + pierwszy przycisk w jednym rzędzie ---------- */
.gorny {
    margin-top: 12px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    background: var(--mint); border-radius: var(--r);
    padding: 11px 11px 11px 18px;
}
.gorny__t { font-size: .89rem; color: var(--teal-deep); }
.gorny__t b { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-right: 4px; }
@media (max-width: 620px) {
    .gorny { padding: 13px; }
    .gorny .btn { width: 100%; justify-content: center; }
}

/* ---------- Zakres programu: zakładki ---------- */
.prog { margin-top: clamp(20px, 3.5vh, 32px); }
.prog__h { font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; }
.prog__h b { font-weight: 600; color: var(--orange-ink); }

/* Pasek zakładek przewija się w bok zamiast zawijać do drugiego rzędu —
   inaczej na telefonie urósłby o całą linię. */
.tabs { display: flex; gap: 7px; margin-top: 12px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none;
    background: var(--paper); border: 1.5px solid var(--sand-deep); border-radius: 99px;
    padding: 8px 15px 8px 12px;
    font-size: .87rem; font-weight: 600; color: var(--ink-2);
    transition: background .15s, border-color .15s, color .15s;
}
.tab i { font-size: .95rem; color: var(--ink-3); }
.tab:hover { border-color: var(--orange-soft); }
.tab[aria-selected="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.tab[aria-selected="true"] i { color: var(--orange-soft); }
.tab:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }

.panel {
    margin-top: 10px;
    background: var(--paper); border: 1.5px solid var(--sand-deep); border-radius: var(--r-lg);
    padding: 18px 20px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 6px clamp(20px, 3vw, 40px);
}
.panel__t { font-size: 1.02rem; font-weight: 600; }
.panel__p { font-size: .89rem; color: var(--ink-2); margin-top: 4px; }
.panel__l { grid-column: 2; grid-row: 1 / 3; align-self: start; }
.panel__l li { display: flex; gap: 9px; align-items: flex-start; font-size: .87rem; color: var(--ink-2); margin-top: 6px; }
.panel__l li:first-child { margin-top: 0; }
.panel__l li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex: none; margin-top: 8px; }
@media (max-width: 760px) {
    .panel { grid-template-columns: 1fr; padding: 16px; }
    .panel__l { grid-column: 1; grid-row: auto; margin-top: 10px; }
}

/* ---------- Co się wydarzy po zakupie ---------- */
.after { margin-top: clamp(18px, 3vh, 28px); background: var(--teal-deep); color: #fff; border-radius: var(--r-lg); padding: 18px clamp(18px, 3vw, 30px) 20px; }
.after__h { font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-soft); }
.after__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3vw, 30px); margin-top: 13px; }
@media (max-width: 760px) { .after__g { grid-template-columns: 1fr; gap: 14px; } }
.st { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; }
.st__n { width: 27px; height: 27px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: .87rem; font-weight: 700; }
.st__w { font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-soft); }
.st__t { font-size: .97rem; font-weight: 600; margin-top: 1px; }
.st__d { font-size: .84rem; color: var(--mint); margin-top: 2px; }

/* ---------- Oś planu w czasie ---------- */
.road { margin-top: 10px; background: var(--paper); border: 1.5px solid var(--sand-deep); border-radius: var(--r-lg); padding: 16px clamp(18px, 3vw, 30px) 18px; }
.road__h { font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }
.road__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 760px) { .road__grid { grid-template-columns: 1fr 1fr; } }
.stop { position: relative; padding-top: 18px; }
.stop::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 3px; background: var(--sand-deep); border-radius: 2px; }
.stop.is-in::before { background: var(--orange); }
.stop__dot { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--sand-deep); border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--sand-deep); }
.stop.is-in .stop__dot { background: var(--orange); box-shadow: 0 0 0 1.5px var(--orange); }
.stop__w { font-size: .69rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stop.is-in .stop__w { color: var(--orange-ink); }
.stop__t { font-size: .9rem; font-weight: 600; margin-top: 2px; }

/* Dwa przyciski przejścia: dolny zachowuje się jak dotąd, górny siedzi w pasku kosztu. */
@media (max-width: 620px) { .step__go .btn:first-child { width: 100%; justify-content: center; } }


/* Ikona Cookiebota (#CookiebotWidget, 48x48, fixed left:10px bottom:10px) w koszyku SCHOWANA (audyt 23.09.2026):
   najpierw zaslaniala cene w doku (22.09: przesunieta o -104 px), potem — plywajac nad trescia — zaslaniala pole
   „Numer telefonu” i ramke „W cenie” przy przewijaniu (zrzut z walidacji 23.09). Zmiane zgody daje link
   „Ustawienia ciasteczek” (#cookies-link, Cookiebot.renew()) na dole koszyka; na pozostalych stronach ikona zostaje. */
#CookiebotWidget { display: none !important; }


/* Ramka „W cenie” na kroku 2 (22.09.2026) — patrz komentarz w koszyk.html przy .wcenie */
.wcenie { margin: 14px 0 24px; padding: 16px 18px; border: 1px solid #d8d8d3; border-radius: 16px; background: #fff; font-size: 15px; line-height: 1.45; }
.wcenie__t { margin: 0 0 10px; font-weight: 600; }
.wcenie__l { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 7px; }
/* li NIE jest flexem: przy flex każde dziecko (b, tekst, plakietka) stawało się osobną kolumną i „Badania krwi —
   skierowanie od razu po opłaceniu” łamało się w cztery wąskie słupki (zrzut z produkcji 22.09 00:12). */
.wcenie__l li { position: relative; padding-left: 22px; }
.wcenie__l li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #2d5c68; font-weight: 700; }
.wcenie__w { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #eef4f5; color: #2d5c68; font-size: 13px; font-weight: 600; white-space: nowrap; }
.wcenie__g { margin: 0; padding-top: 10px; border-top: 1px solid #eeeeea; color: #3d3d44; }
.wcenie__tel { margin: 8px 0 0; color: #3d3d44; }
.wcenie__tel .linky { font-weight: 600; }


/* Audyt CRO 22.09.2026, pkt 1 i 4 — kotwice zaufania przy cenie i przy przycisku płatności */
.dock { flex-wrap: wrap; row-gap: 2px; }   /* gap 14px z reguły .dock robił z linii zaufania 111 px doku; z row-gap 2px ~95 px */
.dock__trust { display: block; flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.25; color: #6a6a73; text-align: center; }
.dock__trust .fa-lock { color: #2d5c68; margin-right: 3px; }


/* Znaczki Apple Pay / Google Pay (23.09.2026) — tekstowe, do podmiany na oficjalne SVG (zasady użycia znaków) */
/* Znaki Apple Pay / Google Pay / BLIK to <img> (pay/*.svg, pay/blik.png) — te same reguły co reszta metod (.pay img). 23.09.2026 */

/* Stopka koszyka: link do zmiany zgody na ciasteczka (zastepuje schowana ikone Cookiebota) i notka w oknie „Oddzwonimy”. 23.09.2026 */
.cfoot { margin: 18px 0 8px; text-align: center; }
.cfoot .linky { color: var(--ink-3); font-size: .8rem; font-weight: 500; }
.cb-note { font-size: .8rem; line-height: 1.45; color: var(--ink-3); margin: 6px 0 12px; }

/* Dialog banków BLIK powtarzalnego (3.10.2026) */
.banks { margin: 14px 0; padding-left: 20px; columns: 2; font-size: .92rem; line-height: 1.7; color: var(--ink); }
#blikrec-box .agree__rec { margin: 8px 0 14px; }
#blikrec-submit { width: 100%; margin-top: 8px; }