/* ============================================================================
   landing.css — Dobry Wstęp · SEKCJE LANDINGOWE (krok `landing`)
   Buduje WYŁĄCZNIE na tokenach z tokens.css i komponentach @ds* z base.css.
   ZAKAZ hardkodowania kolorów/cieni/rozmiarów — tylko var(--*) i klasy niszy.
   Klasy landingowe prefiks `lp-`. Motyw jasny „papierowy briefing" (ZAKAZ ciemnych teł).
   Motion: JEDEN easing (--ease-reveal easeOutExpo), reduced-motion = statyka (globalny
   bezpiecznik w tokens.css zeruje czasy; dodatkowo timeline sam sprawdza matchMedia).
   ============================================================================ */

/* ---- Reveal wejścia sekcji (fade + rise 16px, easeOutExpo) ----
   Chowamy TYLKO gdy JS aktywny (html.js) — bez JS treść jest widoczna (progressive enhancement).
   Stagger dzieci: transition-delay ustawiany w landing.js (data-stagger). */
html.js .reveal { opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js [data-stagger] > * { opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); }
html.js [data-stagger].is-visible > * { opacity: 1; transform: none; }

/* ---- Kontener i rytm sekcji (oddechy 112–160px rosnące; szpalta czytania 660px) ---- */
.lp-section { padding: clamp(72px, 11vw, 128px) 0; }
.lp-section-lg { padding: clamp(88px, 13vw, 160px) 0; }
/* Kotwice (#probka, #cennik) nie chowają nagłówka pod sticky-nav przy skoku.
   Wartość = wysokość sticky .lp-nav (~59px) + komfortowy oddech, żeby po skoku
   górna krawędź sekcji/pasma NIE dotykała nawigacji (PETLA2-10). */
.lp-section[id] { scroll-margin-top: 96px; }
.lp-band { background: var(--color-bg-alt); border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border); }
.lp-read { max-width: var(--maxw-read); margin-left: auto; margin-right: auto; }
.lp-head { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.lp-head .eyebrow { margin-bottom: var(--sp-4); }
.lp-head h2 { margin-bottom: var(--sp-4); }
.lp-head p { color: var(--color-text-muted); font-size: var(--fs-lg); line-height: 1.55; }
.lp-kicker { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-ui-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-subtle); }

/* ============================================================ NAV */
.lp-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur-micro) var(--ease-micro);
}
.lp-nav.is-scrolled { border-bottom-color: var(--color-border); }
.lp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; }
.lp-nav .brand { font-family: var(--font-display); font-weight: var(--fw-display-med);
  font-size: 1.2rem; letter-spacing: -.01em; color: var(--color-text); }
.lp-nav .brand:hover { text-decoration: none; }
.lp-nav-actions { display: flex; align-items: center; gap: var(--sp-3); }
.lp-nav-login { font-family: var(--font-ui); font-weight: var(--fw-ui-med); font-size: var(--fs-sm);
  color: var(--color-text-muted); }
.lp-nav-login:hover { color: var(--color-text); text-decoration: none; }
@media (max-width: 480px) { .lp-nav-login { display: none; } }

/* ============================================================ HERO
   TWARDY WYMÓG: całe hero (nagłówek+sub+CTA+karta+kropki) mieści się w 100dvh
   na 360/390/768/1280. Sekcja = flex-kadr o wysokości widoku, treść wyśrodkowana;
   typografia i kadr karty dobrane pod najmniejszy ekran (360×640). */
.lp-hero { padding: clamp(20px, 4vw, 72px) 0 clamp(24px, 4vw, 80px); overflow: hidden; }
.lp-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
/* Desktop: pełnoekranowy kadr hero (treść wyśrodkowana). Mobile/tablet (jedna kolumna): naturalna
   wysokość, treść od góry — kropki lądują tuż pod kartą (sticky-nav nie spycha ich pod fold). */
@media (min-width: 940px) {
  .lp-hero { min-height: 100svh; display: flex; align-items: center; }
  .lp-hero > .container { width: 100%; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.lp-hero-copy { max-width: 620px; }
.lp-hero .eyebrow-pill { margin-bottom: var(--sp-4); }
.lp-hero h1 {
  font-size: clamp(1.95rem, 6vw, 4.75rem); line-height: 1.05; letter-spacing: -.022em;
  margin-bottom: var(--sp-4); text-wrap: balance;
}
.lp-hero h1 em { font-style: italic; color: var(--color-accent); }
.lp-hero-sub { font-size: clamp(1.02rem, 2.2vw, 1.3rem); line-height: 1.5; color: var(--color-text-muted);
  max-width: 30em; margin-bottom: var(--sp-5); }
.lp-hero-sub .brk { display: block; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lp-cta-row .btn { padding: var(--sp-4) var(--sp-6); font-size: 1.02rem; }
.lp-microcopy { display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--color-text-subtle); }
.lp-microcopy svg { flex: none; color: var(--color-success); }
/* Mobile: priorytet ODDECH, nie wciskanie w 100dvh — user i tak scrolluje.
   Wcześniej hero był kompresowany (gapy 12-16px = ciasno); dajemy powietrze między blokami. */
@media (max-width: 560px) {
  .lp-hero { padding: var(--sp-6) 0 var(--sp-7); }        /* 32 górą / 48 dołem */
  .lp-hero-grid { gap: var(--sp-6); }                      /* 32 między kopią a kartą */
  .lp-hero .eyebrow-pill { margin-bottom: var(--sp-4); }
  .lp-hero h1 { margin-bottom: var(--sp-4); line-height: 1.12; }
  .lp-hero-sub { margin-bottom: var(--sp-5); }             /* 24 pod podtytułem */
  .lp-cta-row { margin-bottom: var(--sp-5); gap: var(--sp-3); }  /* 24 pod przyciskami */
  .lp-cta-row .btn { padding: var(--sp-4) var(--sp-5); }
}
/* Eyebrow-pill: uppercase + tracking robi go za szerokim na wąskich ekranach — łamał się na 2 linie
   w pill (~390–480px). Chowamy go ≤480px (jest redundantny z H1 i sub-nagłówkiem); pełna pozycja marki
   zostaje w <title>/OG. Bez nowrap → zero ryzyka poziomego scrolla. */
@media (max-width: 480px) {
  .lp-hero .eyebrow-pill { display: none; }
}
/* Najmniejsze ekrany (360×640): kadr niższy, treść ciaśniej. */
@media (max-width: 384px) {
  .lp-hero { padding: 12px 0 14px; }
  .lp-hero h1 { font-size: 1.54rem; }
  .lp-hero-sub { font-size: .96rem; margin-bottom: var(--sp-3); }
  .lp-cta-row { margin-bottom: var(--sp-2); }
  .lp-cta-row .btn { padding: var(--sp-2) var(--sp-4); }
  .lp-microcopy { margin-top: 2px; }
}

/* ---- POKAZ PRODUKTU W RUCHU: karta briefingu = JEDEN kadr o stałej wysokości ----
   6 faz stackuje się absolutnie w .mc-stage i podmienia W MIEJSCU (crossfade + slide-up
   12px, easeOutExpo ~450ms). Wysokość karty jest STAŁA między fazami (kadr = fixed height).
   Sterowanie (auto co ~2,5 s w viewport, pauza hover/focus, klik kropki) w landing.js.
   reduced-motion: statycznie faza 6, kropki nieaktywne (globalny bezpiecznik zeruje czasy). */
.lp-motion { position: relative; }
.mc {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4);
  max-width: 460px; margin: 0 auto;
}
@media (max-width: 560px) { .mc { padding: var(--sp-4); gap: var(--sp-2); } }
@media (max-width: 384px) { .mc { padding: var(--sp-3); } }
.mc-bar { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-border); }
.mc-dots { display: inline-flex; gap: 5px; }
.mc-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-strong); display: block; }
.mc-bar-title { font-family: var(--font-ui); font-size: 11px; font-weight: var(--fw-ui-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); margin-left: var(--sp-2); }

/* Kadr o stałej wysokości — dobrany pod najwyższą fazę (fakty/formularz), by treść się nie ucinała. */
.mc-stage { position: relative; height: clamp(200px, 56vw, 214px); overflow: hidden; }
@media (min-width: 560px) { .mc-stage { height: 208px; } }
@media (max-width: 384px) { .mc-stage { height: 204px; } }

/* Każda faza wypełnia kadr i centruje treść w pionie (krótkie fazy jak pierścień = wyśrodkowane).
   Nieprzezroczyste tło = faza wchodząca zasłania wygasającą (zero przebijania tekstu podczas zmiany). */
.mc-phase { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: var(--sp-2); background: var(--color-surface); }
/* Bez JS (progressive enhancement): widoczna tylko faza finałowa (payoff), reszta ukryta. */
.mc-phase:not(:last-child) { opacity: 0; visibility: hidden; }
.mc-phase:last-child { opacity: 1; }
/* Z JS: faza wygasająca ZNIKA NATYCHMIAST (transition:none), wchodząca robi czysty fade-in nad
   tłem karty — brak okna, w którym dwie fazy są jednocześnie półprzezroczyste (koniec przebijania). */
html.js .mc-phase {
  opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
  transition: none;
}
html.js .mc-phase.is-in {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 360ms var(--ease-reveal), transform 360ms var(--ease-reveal);
}
.mc-phase-label { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: var(--fw-ui-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--sp-2); }

/* Kropki postępu 1-6 pod kartą (skok do fazy) + subtelne „odtwórz" po ostatniej fazie. */
.mc-nav { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--sp-4); }
@media (max-width: 560px) { .mc-nav { margin-top: var(--sp-2); } }
/* Hit-area ≥24×24 (WCAG 2.2 AA — Target Size Minimum); wizualna kropka to ::before (8→20px), więc
   powiększenie przycisku nie zmienia wyglądu. */
.mc-nav-dot { position: relative; width: 24px; height: 24px; padding: 0; border: none; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: var(--radius-pill); }
.mc-nav-dot::before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px;
  border-radius: var(--radius-pill); background: var(--color-border-strong);
  transition: width var(--dur-micro) var(--ease-micro), background var(--dur-micro) var(--ease-micro); }
.mc-nav-dot:hover::before { background: var(--color-text-subtle); }
.mc-nav-dot.is-active::before { width: 20px; background: var(--color-accent); }
.mc-nav-dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.mc-nav-dot:disabled { cursor: default; }
.mc-replay { display: inline-flex; align-items: center; gap: 5px; margin-left: var(--sp-2);
  padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-border);
  background: var(--color-surface); font-family: var(--font-ui); font-size: 11px; font-weight: var(--fw-ui-med);
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); cursor: pointer;
  transition: color var(--dur-micro) var(--ease-micro), border-color var(--dur-micro) var(--ease-micro); }
.mc-replay:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.mc-replay:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.mc-replay svg { flex: none; color: var(--color-accent); }
/* `display: inline-flex` na .mc-replay nadpisuje natywne [hidden]{display:none} (równa specyficzność,
   nasza reguła później) → jawnie przywracamy ukrycie do czasu ostatniej fazy. */
.mc-replay[hidden] { display: none; }

/* F1 formularz */
.mc-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.mc-field { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-input); }
.mc-field .k { font-family: var(--font-ui); font-size: 11px; font-weight: var(--fw-ui-bold);
  letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-subtle); flex: none; width: 68px; }
.mc-field .v { font-size: var(--fs-sm); color: var(--color-text); font-weight: var(--fw-ui-med); }

/* F2 fakty (kompaktowo, by 2 fakty mieściły się w kadrze) */
.mc-facts { display: flex; flex-direction: column; gap: var(--sp-2); }
.mc-fact { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--color-border); background: var(--color-bg-alt); border-radius: 0 8px 8px 0; }
.mc-fact p { line-height: 1.4; }
.mc-fact.is-confirmed { border-left-color: var(--color-success); }
.mc-fact p { font-size: var(--fs-sm); line-height: 1.45; color: var(--color-text); }
/* Najmniejsze ekrany: fakty ciaśniej, by 2 fakty mieściły się w niższym kadrze (158px). */
@media (max-width: 384px) { .mc-facts { gap: 5px; } .mc-fact { padding: 5px var(--sp-3); gap: 4px; } .mc-fact p { line-height: 1.32; } }

/* F3 plan filary */
.mc-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mc-pillar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-surface); }
.mc-pillar .step-num { width: 26px; height: 26px; font-size: var(--fs-xs); }
.mc-pillar span { font-size: var(--fs-sm); font-weight: var(--fw-ui-med); color: var(--color-text); }

/* F4 pierścień gotowości */
.mc-ready { display: flex; align-items: center; gap: var(--sp-4); }
.mc-ready .ring { --ring-size: 88px; --ring-w: 9px; }
.mc-ready .ring-val b { font-size: var(--fs-lg); }
.mc-ready-side { min-width: 0; }
.mc-ready-side .pill { font-size: var(--fs-xs); }
.mc-ready-cap { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 6px; }

/* F5 czat symulacji */
.mc-chat { display: flex; flex-direction: column; gap: var(--sp-2); }
.mc-chat .sim-msg { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); }

/* F6 stempel raportu */
.mc-stamp { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--color-success-soft); border: 1px solid rgba(110, 112, 56, .28); border-radius: var(--radius-input); }
.mc-stamp .icon-chip { width: 38px; height: 38px; }
.mc-stamp .icon-chip svg { width: 20px; height: 20px; }
.mc-stamp-txt { font-size: var(--fs-sm); color: var(--color-text-muted); }
.mc-stamp-score { font-family: var(--font-display); font-weight: var(--fw-display-med);
  font-size: var(--fs-xl); color: var(--color-accent); line-height: 1; }
.mc-stamp-score sub { font-size: var(--fs-sm); color: var(--color-text-subtle); vertical-align: baseline; }

/* ============================================================ PYTANIA-LĘKI (2) */
.lp-fears-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 680px) { .lp-fears-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .lp-fears-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-fear { display: flex; flex-direction: column; gap: var(--sp-3); }
.lp-fear .icon-chip { margin-bottom: var(--sp-1); }
.lp-fear p { font-family: var(--font-display); font-size: 1.24rem; line-height: 1.35;
  color: var(--color-text); font-weight: var(--fw-display); letter-spacing: -.01em; }
.lp-fear.lp-fear-answer { background: var(--color-accent-soft); border-color: rgba(183, 79, 38, .22); }
.lp-fear.lp-fear-answer p { color: #8F3A1E; }

/* ============================================================ JAK DZIAŁA (3) */
.lp-steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); counter-reset: step; }
@media (min-width: 720px) { .lp-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .lp-steps { grid-template-columns: repeat(4, 1fr); } }
.lp-step { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.lp-step-num { display: flex; align-items: center; gap: var(--sp-3); }
.lp-step-num .step-num { width: 40px; height: 40px; font-size: var(--fs-base); }
.lp-step-num .lp-step-time { font-size: var(--fs-xs); color: var(--color-text-subtle);
  font-weight: var(--fw-ui-med); letter-spacing: .04em; text-transform: uppercase; }
.lp-step h3 { font-size: var(--fs-lg); }
.lp-step p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.55; }
.lp-loopbar { display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-top: clamp(40px, 6vw, 56px); padding: var(--sp-4) var(--sp-5); text-align: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  max-width: 560px; margin-left: auto; margin-right: auto; box-shadow: var(--shadow-sm); }
.lp-loopbar svg { flex: none; color: var(--color-success); }
.lp-loopbar span { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--color-text); font-weight: var(--fw-ui-med); }
.lp-loopbar b { color: var(--color-text); font-weight: var(--fw-ui-bold); }

/* ============================================================ PRÓBKA (4) */
.lp-proof-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) { .lp-proof-grid { grid-template-columns: 1fr 1fr; } }
.lp-proof-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.lp-proof-card > .label-caps { display: flex; align-items: center; gap: var(--sp-2); }
.lp-proof-plan { display: flex; flex-direction: column; gap: var(--sp-4); }
.lp-proof-block .lp-proof-eyebrow { display: block; font-family: var(--font-ui); font-size: 11px;
  font-weight: var(--fw-ui-bold); letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-subtle); margin-bottom: 6px; }
.lp-quote { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; line-height: 1.5;
  color: var(--color-text); border-left: 3px solid var(--color-accent); padding-left: var(--sp-4); }
.lp-obj { display: flex; flex-direction: column; gap: var(--sp-2); }
.lp-obj .lp-obj-q { font-size: var(--fs-sm); color: var(--color-text-muted); }
.lp-obj .lp-obj-q b { color: var(--color-error); font-weight: var(--fw-ui-bold); }
.lp-obj .lp-obj-a { font-size: var(--fs-sm); color: var(--color-text); padding-left: var(--sp-4);
  border-left: 2px solid var(--color-success); }
.lp-report-score { display: flex; align-items: baseline; gap: var(--sp-2); }
.lp-report-score .n { font-family: var(--font-display); font-weight: var(--fw-display-med);
  font-size: 3.4rem; line-height: .9; color: var(--color-accent); }
.lp-report-score .m { font-size: var(--fs-sm); color: var(--color-text-subtle);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.lp-proof-insight { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text); }
.lp-proof-cap { display: block; text-align: center; margin-top: clamp(32px, 5vw, 48px);
  font-size: var(--fs-sm); color: var(--color-text-subtle); }
.lp-proof-cta { text-align: center; margin-top: var(--sp-5); }

/* ============================================================ DLACZEGO NIE CHATGPT (5) */
.lp-vs { display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 0 auto;
  border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-surface); }
.lp-vs-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border); }
@media (min-width: 640px) { .lp-vs-row { grid-template-columns: 1fr 1fr; align-items: center; } }
.lp-vs-row:last-child { border-bottom: none; }
.lp-vs-head { background: var(--color-bg-alt); font-family: var(--font-ui); font-size: var(--fs-xs);
  font-weight: var(--fw-ui-bold); letter-spacing: .06em; text-transform: uppercase; }
.lp-vs-head span:first-child { color: var(--color-text-subtle); }
.lp-vs-head span:last-child { color: var(--color-accent); }
.lp-vs-gpt { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm);
  color: var(--color-text-muted); line-height: 1.5; }
.lp-vs-dw { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm);
  color: var(--color-text); line-height: 1.5; font-weight: var(--fw-ui-med); }
.lp-vs-gpt svg { flex: none; color: var(--color-text-subtle); margin-top: 2px; }
.lp-vs-dw svg { flex: none; color: var(--color-success); margin-top: 2px; }
.lp-vs-close { text-align: center; margin-top: var(--sp-6); font-family: var(--font-display);
  font-size: 1.24rem; font-style: italic; color: var(--color-text); }

/* ============================================================ PRYWATNOŚĆ (6) */
/* Centrowany blok „zapewnienia" (jak Dla firm) — ikona nad nagłówkiem, lista w wąskiej szpalcie. */
.lp-privacy { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: var(--sp-4); }
.lp-privacy h2 { margin-top: var(--sp-1); }
.lp-privacy-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success);
  box-shadow: var(--shadow-sm); }
.lp-privacy-ico svg { width: 40px; height: 40px; }
.lp-privacy-list { display: flex; flex-direction: column; gap: var(--sp-4);
  text-align: left; width: 100%; max-width: 520px; margin-top: var(--sp-3); }
.lp-privacy-list li { display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-base); line-height: 1.55; color: var(--color-text); }
.lp-privacy-list li svg { flex: none; color: var(--color-success); margin-top: 3px; }
.lp-privacy-list li b { font-weight: var(--fw-ui-bold); }

/* ============================================================ DLA FIRM (7) */
.lp-firms { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; }
.lp-firms .icon-chip { width: 52px; height: 52px; }
.lp-firms h2 { max-width: 16em; }
.lp-firms p { color: var(--color-text-muted); font-size: var(--fs-lg); max-width: 34em; line-height: 1.55; }

/* ============================================================ CENNIK (8) */
.lp-price-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: stretch;
  max-width: 820px; margin: 0 auto; }
@media (min-width: 760px) { .lp-price-grid { grid-template-columns: 1fr 1fr; } }
.lp-plan { display: flex; flex-direction: column; gap: var(--sp-4); position: relative; }
.lp-plan.is-pro { border-color: var(--color-accent); box-shadow: var(--shadow-card-hover); }
.lp-plan-badge { position: absolute; top: calc(var(--sp-4) * -1); left: 50%; transform: translateX(-50%);
  background: var(--color-accent); color: var(--color-accent-text); border-radius: var(--radius-pill);
  padding: 5px var(--sp-4); font-family: var(--font-ui); font-size: 11px; font-weight: var(--fw-ui-bold);
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.lp-plan-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-display-med); }
.lp-plan-price { display: flex; align-items: baseline; gap: var(--sp-2); }
.lp-plan-price .amt { font-family: var(--font-display); font-weight: var(--fw-display-med);
  font-size: 3rem; line-height: 1; color: var(--color-text); }
.lp-plan-price .per { font-size: var(--fs-sm); color: var(--color-text-subtle); }
.lp-plan-year { font-size: var(--fs-sm); color: var(--color-text-muted); }
.lp-plan-feats { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.lp-plan-feats li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm);
  line-height: 1.5; color: var(--color-text); }
.lp-plan-feats li svg { flex: none; color: var(--color-success); margin-top: 3px; }
.lp-trial-note { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--color-text-muted); }
.lp-trial-note b { color: var(--color-text); }
.lp-price-anchor { max-width: 640px; margin: clamp(40px, 6vw, 56px) auto 0; text-align: center;
  padding: var(--sp-4) var(--sp-5); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); }
.lp-price-anchor p { font-size: var(--fs-base); line-height: 1.6; color: var(--color-text-muted); }
.lp-price-anchor b { font-family: var(--font-display); color: var(--color-text); font-weight: var(--fw-display-med); }

/* ============================================================ FAQ (9) */
.lp-faq { max-width: var(--maxw-read); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.lp-faq details { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-input); overflow: hidden; }
.lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--fw-display-med); color: var(--color-text); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary .chev { flex: none; color: var(--color-text-subtle); transition: transform var(--dur-micro) var(--ease-micro); }
.lp-faq details[open] summary .chev { transform: rotate(180deg); }
.lp-faq details[open] summary { color: var(--color-accent); }
.lp-faq-a { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-sm); line-height: 1.65; color: var(--color-text-muted); }

/* ============================================================ CTA KOŃCOWE (10) */
.lp-final { text-align: center; }
.lp-final h2 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 14em; margin: 0 auto var(--sp-5); text-wrap: balance; }
.lp-final .btn { padding: var(--sp-4) var(--sp-7); font-size: 1.06rem; }
.lp-final-micro { display: block; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--color-text-subtle); }

/* ============================================================ STOPKA */
.lp-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-alt); }
.lp-footer-inner { display: flex; flex-direction: column; gap: var(--sp-5); padding: clamp(40px, 6vw, 64px) 0; }
.lp-footer-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); }
.lp-footer .brand { font-family: var(--font-display); font-weight: var(--fw-display-med); font-size: 1.2rem; color: var(--color-text); }
.lp-footer-tag { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--sp-2); max-width: 26em; }
.lp-footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
/* Cel dotykowy ≥44px (WCAG 2.5.8 wymaga ≥24px; 44px = komfort) — inline-flex, by tap-area
   objęła cały wiersz linku bez rozpychania układu w poziomie (PETLA2-9). */
.lp-footer-links a { display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-sm); color: var(--color-text-muted); }
.lp-footer-links a:hover { color: var(--color-text); }
.lp-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-subtle); }
.lp-footer-made { display: inline-flex; align-items: center; gap: var(--sp-2); }