/* ==========================================================================
   sprzedaz.html — tylko to, czego brakuje we wspólnym handshake.css.
   Wszystko pod .page-sprzedaz albo z prefiksem .sprz-.
   ========================================================================== */

/* ---------- nagłówek strony ---------- */
.page-sprzedaz .sprz-head{margin-top:clamp(20px,2.4vw,32px)}
.page-sprzedaz .sprz-head__body h1{margin-top:20px}
.page-sprzedaz .sprz-head__acts{margin-top:34px;gap:16px 28px}
.page-sprzedaz .phead .hero__proof{max-width:560px}

/* ---------- film: nagłówek na ciemnym tle ---------- */
.page-sprzedaz .film__head .eyebrow + h2{margin-top:18px}
.page-sprzedaz .film__head p{font-size:clamp(16px,1.3vw,18px);line-height:1.6;max-width:52ch;margin-inline:auto}
/* .vsl jest pozycjonowany, więc jego cień malował się NAD statycznym przyciskiem pod filmem */
.page-sprzedaz .film__cta{position:relative;z-index:1}

/* ---------- formularz: proporcje kolumny bocznej ---------- */
.page-sprzedaz #formularz .split--form > .reveal:first-child .h2{font-size:clamp(30px,3vw,44px)}
.page-sprzedaz #formularz .rating__g{color:var(--muted)}
.page-sprzedaz #formularz .grev__m .rating__g{color:var(--muted)}
.page-sprzedaz .sprz-grev-more{justify-self:start;margin-top:6px}
/* zgody: gwiazdka ma iść za tekstem, a nie uciekać do prawej krawędzi przy zawijaniu */
.page-sprzedaz #lead-form .check:not(.check--card){display:block;position:relative;padding-left:27px}
.page-sprzedaz #lead-form .check:not(.check--card) input{position:absolute;left:0;top:1px;margin:0}
/* telefon: kroki 1–3 i „A co, jeśli…” stoją w pełnej wersji w sekcji „Jak to działa” tuż pod formularzem,
   więc w kolumnie bocznej (która na telefonie spada pod formularz) ich nie powtarzamy */
@media (max-width:980px){.page-sprzedaz #formularz [data-step-side="1"] .side__body{display:none}}
.page-sprzedaz [data-step-side="3"] .h4 + .steps--mini{margin-top:14px}

/* ---------- jak to działa ---------- */
.sprz-steps{list-style:none;padding:0}
.sprz-steps__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sprz-steps__n{font-family:var(--display);font-size:clamp(28px,2.4vw,36px);line-height:1;color:var(--blue-text);font-variant-numeric:lining-nums}
.sprz-steps .tile--flat h3{margin-top:4px}
.sprz-after{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px clamp(24px,4vw,64px);align-items:center;margin-top:clamp(40px,4.5vw,64px);padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,44px);background:var(--surface)}
.sprz-after::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--navy)}
.sprz-after h3{font-size:clamp(22px,1.9vw,27px)}
.sprz-after p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:52ch}
@media (max-width:760px){.sprz-after{grid-template-columns:1fr}}

/* ---------- liczby na granacie: notka czytelna na ciemnym ---------- */

/* ---------- FAQ: tytuł po lewej, pytania po prawej (CBRE) ---------- */
.sprz-faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.9fr);gap:clamp(28px,5vw,80px);align-items:start}
.sprz-faq__head h2{margin-top:18px}
.sprz-faq__head .body{margin-top:20px;max-width:34ch}
.page-sprzedaz .faq__a > p:not(:last-child){padding-bottom:12px}
@media (min-width:981px){.sprz-faq__head{position:sticky;top:calc(var(--nav-h) + 32px)}}
@media (max-width:980px){.sprz-faq{grid-template-columns:1fr}}