/* Wygląd stron sprzedażowych SkanerFirmy według projektu właściciela z 27.09.2026 (makieta z Google Stitch).
   Kolory, kroje i odstępy przepisane z makiety; zamiast Tailwinda z CDN i ikon z Google Fonts — własny arkusz
   i ikony SVG w stronie, bo polityka bezpieczeństwa serwera wpuszcza tylko pliki z naszej domeny.
   Arkusz jest wspólny dla strony głównej i stron zakupu pakietów (/kup/pomiar, /kup/profil-google, /kup/profil-i-strona —
   blok „Strony zakupu” na końcu); regulamin i strona odbioru zostają przy site.css. Stany sprzedaży
   (.when-open/.when-soon/.when-paused, .when-direct/.when-not-direct) działają tu tak samo jak w site.css — czystym CSS,
   bez JavaScriptu. */
@import url('/fonts/fonts.css');

:root{
  --lp-primary:#0f7a43;
  --lp-primary-deep:#005f32;
  --lp-ink:#131b2e;
  --lp-ink-soft:#3f4940;
  --lp-outline:#626d62;
  --lp-line:#becabd;
  --lp-line-30:rgba(190,202,189,.3);
  --lp-line-40:rgba(190,202,189,.4);
  --lp-line-50:rgba(190,202,189,.5);
  --lp-line-60:rgba(190,202,189,.6);
  --lp-bg:#f7fbf9;
  --lp-white:#fff;
  --lp-low:#f1f7f4;
  --lp-mid:#e7f2ec;
  --lp-high:#dcefe4;
  --lp-variant:#cfe8da;
  --lp-inverse:#283044;
  --lp-em-50:#ecfdf5;
  --lp-em-100:#d1fae5;
  --lp-em-200:#a7f3d0;
  --lp-em-300:#6ee7b7;
  --lp-em-500:#10b981;
  --lp-em-800:#065f46;
  --lp-em-950:#022c22;
  --lp-rose-50:#fff1f2;
  --lp-rose-200:#fecdd3;
  --lp-rose-800:#9f1239;
  --lp-amber-50:#fffbeb;
  --lp-amber-200:#fde68a;
  --lp-amber-800:#92400e;
  --lp-amber-950:#451a03;
  --lp-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --lp-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --lp-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --lp-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  --lp-shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);
  /* Zielenie strony w jednym miejscu (audyt 27.09.2026: kilkanaście ręcznie wpisanych odcieni). Biały tekst stoi tylko
     na #0f7a43 i ciemniejszych (kontrast co najmniej 5,4:1); jaśniejsze zielenie służą poświatom i ikonom. */
  --lp-g-900:#075c30;
  --lp-g-800:#0b6a39;
  --lp-g-700:#0f7a43;
  --lp-g-500:#12a063;
  --lp-g-450:#0e9f6e;
  --lp-g-400:#10b981;
  --lp-grad-btn:linear-gradient(180deg, rgba(255,255,255,.12), transparent 55%), linear-gradient(135deg, #0f7a43, #0b6a39 60%, #075c30);
  --lp-grad-btn-hover:linear-gradient(135deg, #0d8049, #0f7a43 50%, #0b6a39);
  --lp-grad-dark:linear-gradient(90deg, #0b6a39, #0f7a43);
  --lp-grad-text:linear-gradient(90deg, #0f7a43, #0e9f6e);
  --lp-grad-ic:linear-gradient(135deg, #12a063, #0b6a39);
  --lp-grad-border:linear-gradient(160deg, rgba(16,185,129,.42), rgba(190,202,189,.35) 40%, rgba(255,255,255,.95) 72%, rgba(110,231,183,.4));
  --lp-grad-border-strong:linear-gradient(160deg, #34d399, #0f7a43 45%, #6ee7b7);
  --lp-glow-ic:0 0 0 .22em rgba(16,185,129,.12), 0 8px 18px -8px rgba(16,185,129,.8);
  /* Jedna szerokość treści sekcji (audyt: sekcje miały 1240–1790 px). */
  --lp-content:min(1560px, 100%);
  --lp-head:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  --lp-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}

/* ——— podstawa ——— */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:16px; -webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--lp-bg); color:var(--lp-ink); font-family:var(--lp-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
main{flex:1 0 auto}
img,svg{max-width:100%}
img{height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input{font:inherit; color:inherit}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0; list-style:none}
h1,h2,h3,h4{font-family:var(--lp-head); text-wrap:balance}
strong,b{font-weight:700}
::selection{background:var(--lp-primary); color:#fff}
:focus-visible{outline:3px solid var(--lp-primary); outline-offset:3px; border-radius:6px}
[hidden]{display:none !important}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.ic{width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ic--fill{fill:currentColor; stroke:none}
.kotwica{display:block; position:relative; top:-8px; visibility:hidden}
.nobr{white-space:nowrap}

/* ——— stan sprzedaży: te same reguły co w site.css ——— */
html[data-sales="open"] .when-soon,html[data-sales="open"] .when-paused{display:none !important}
html[data-sales="soon"] .when-open,html[data-sales="soon"] .when-paused{display:none !important}
html[data-sales="paused"] .when-open,html[data-sales="paused"] .when-soon{display:none !important}
html:not([data-sales]) .when-soon,html:not([data-sales]) .when-paused{display:none !important}
html[data-direct="on"] .when-not-direct{display:none !important}
html[data-direct="off"] .when-direct{display:none !important}
html:not([data-direct]) .when-direct{display:none !important}
.owner-preview{background:var(--lp-amber-50); color:var(--lp-amber-800); border-bottom:1px solid var(--lp-amber-200); text-align:center; font-size:13px; font-weight:700; line-height:1.5; padding:10px 16px}

/* ——— układ ——— */
/* Szerokość treści najwyżej 1200 px (decyzja właściciela 27.09.2026: na monitorze ultrawide 1440 px było za szeroko). */
.lp-wrap{width:100%; max-width:1248px; margin-inline:auto; padding-inline:24px}
.lp-section{padding-block:clamp(56px, 5.5vw, 112px); border-bottom:1px solid rgba(190,202,189,.2)}
.lp-head{max-width:768px; margin-inline:auto; text-align:center}
.lp-head > * + *{margin-top:12px}
.lp-h2{font-size:26px; line-height:32px; font-weight:800; letter-spacing:-.025em; color:var(--lp-ink)}
@media(min-width:1024px){.lp-h2{font-size:clamp(22px, 1.5vw + 8px, 34px); line-height:1.2}}
.lp-head p:not(.lp-pill):not(.lp-eyebrow){font-size:16px; line-height:24px; color:var(--lp-ink-soft)}
.lp-head p strong{color:var(--lp-ink)}

/* Plakietki nad nagłówkami sekcji */
.lp-pill{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; background:var(--lp-em-50); border:1px solid rgba(15,122,67,.2); color:var(--lp-primary); font-size:11px; line-height:16px; font-weight:700}
.lp-pill .ic{width:14px; height:14px}

/* ——— przyciski ——— */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; border-radius:10px; cursor:pointer; font-family:var(--lp-head); font-weight:700; text-align:center;
  background:var(--lp-primary); color:#fff; transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{background:var(--lp-primary-deep)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:16px; height:16px}
.btn--sm{padding:6px 12px; border-radius:7px; font-family:var(--lp-body); font-size:13px; line-height:18px; gap:6px; box-shadow:var(--lp-shadow-sm)}
.btn--sm .ic{width:14px; height:14px}
/* Na ekranie dotykowym każdy przycisk ma co najmniej 44 px wysokości; przy myszy zostaje smukły. */
@media(hover:none),(max-width:767px){.btn,.lp-brand{min-height:44px}}

/* Połysk przesuwający się po przycisku (z makiety). Przy wyłączonym ruchu go nie ma. */
.shimmer::after{
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; pointer-events:none;
  background:linear-gradient(60deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%) rotate(30deg); animation:lp-shimmer 3.5s infinite;
}
@keyframes lp-shimmer{0%{transform:translateX(-100%) rotate(30deg)} 30%,100%{transform:translateX(100%) rotate(30deg)}}
@keyframes lp-pulse{50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shimmer::after{display:none}
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ——— znak marki: w hero (paska górnego nie ma — decyzja właściciela 27.09.2026) ——— */
.lp-brand{display:inline-flex; align-items:center; gap:.45em; font-family:var(--lp-head); font-size:17px; line-height:1.3; font-weight:800; letter-spacing:-.025em; color:var(--lp-ink); min-height:44px; transition:opacity .2s}
.lp-brand:hover{opacity:.9}
.lp-brand-mark{width:1.5em; height:1.5em; border-radius:.42em; background:var(--lp-grad-ic); box-shadow:var(--lp-glow-ic); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}
.lp-brand-mark .ic{width:.92em; height:.92em}
.lp-brand em{font-style:normal; color:var(--lp-primary)}

/* ——— hero: pełna wysokość i pełna szerokość ekranu ——— */
/* Obraz po prawej od góry do dołu ekranu i do jego prawej krawędzi; kolumna obrazu = mniejsza z dwóch: połowa ekranu
   albo 80% jego wysokości, więc pionowy obraz 4:5 widać w całości. Lewa kolumna: logo u góry, pod nim tekst wyśrodkowany
   w pionie i w poziomie (blok tekstu ma stałą szerokość, logo stoi na jego lewej krawędzi). Wszystko w hero rośnie
   z szerokością ekranu (clamp) — ustawione pod zwykłe powiększenie przeglądarki, także na monitorze 2560 px
   (runda 6 właściciela 27.09.2026: „trzeba wszystko powiększyć”). Rozmiary odstępów, plakietek i przycisku są w em,
   więc rosną razem ze swoim tekstem. */
.lp-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--lp-line-30);
  background:radial-gradient(40% 50% at 8% 18%, rgba(16,185,129,.1), transparent 70%), radial-gradient(34% 40% at 42% 92%, rgba(110,231,183,.14), transparent 70%), linear-gradient(180deg, #fff, var(--lp-bg))}
.lp-hero-grid{display:grid; grid-template-columns:minmax(0,1fr)}
.lp-hero-copy{padding:12px 24px 36px}
.lp-hero-text{margin-top:20px}
.lp-hero-text > * + *{margin-top:20px}
.lp-badge{display:inline-flex; align-items:center; gap:.6em; padding:.45em 1.1em; border-radius:999px; font-size:12px;
  background:linear-gradient(90deg, rgba(236,253,245,.97), rgba(209,250,229,.85)); border:1px solid rgba(16,185,129,.35);
  box-shadow:0 10px 26px -14px rgba(16,185,129,.7), inset 0 1px 0 rgba(255,255,255,.9)}
.lp-badge i{width:.6em; height:.6em; border-radius:50%; background:#10b981; box-shadow:0 0 0 .22em rgba(16,185,129,.2), 0 0 .7em rgba(16,185,129,.85); animation:lp-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.lp-badge span{line-height:1.4; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--lp-em-800)}
.lp-h1{font-size:30px; line-height:1.1; font-weight:800; letter-spacing:-.025em; color:var(--lp-ink)}
@media(min-width:640px){.lp-h1{font-size:38px}}
/* Wyróżniona fraza (do 24 znaków) zostaje w jednej linii. */
@media(min-width:640px){.lp-h1 span{white-space:nowrap}}
.lp-h1 span{position:relative; color:var(--lp-primary); background:linear-gradient(100deg, #0b6a39 0%, #0f7a43 40%, #0e9f6e 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 .22em rgba(16,185,129,.32))}
@media(min-width:640px){.lp-h1 span::after{content:''; position:absolute; left:-.02em; right:-.02em; bottom:-.08em; height:.13em; border-radius:999px; z-index:-1;
  background:linear-gradient(90deg, rgba(16,185,129,.1), rgba(16,185,129,.75) 45%, rgba(52,211,153,.25)); box-shadow:0 0 .35em rgba(16,185,129,.55)}}
.lp-lead{font-size:17px; line-height:1.6; color:var(--lp-ink-soft)}
.lp-lead strong{color:var(--lp-ink)}
.lp-lead p + p{margin-top:.6em}
.lp-hero-cta{padding-top:4px}
.lp-hero-cta .btn{width:100%}
.lp-hero .btn--hero{font-size:17px; padding:.95em 1.7em; min-height:3.2em}
@media(min-width:640px){.lp-hero-cta .btn{width:auto}}
.lp-trust{display:flex; flex-wrap:wrap; align-items:center; gap:.45em; font-size:12px}
.lp-trust span{display:inline-flex; align-items:center; gap:.4em; padding:.42em .8em; border-radius:999px; line-height:1.35; font-weight:600; color:var(--lp-ink);
  background:linear-gradient(180deg, #fff, rgba(236,253,245,.75)); border:1px solid rgba(16,185,129,.25); box-shadow:0 8px 20px -14px rgba(15,122,67,.55), inset 0 1px 0 #fff}
.lp-trust .ic{width:1.15em; height:1.15em; color:#10b981; filter:drop-shadow(0 0 .3em rgba(16,185,129,.5))}
.lp-state{border-radius:1em; padding:1em 1.15em; border:1px solid rgba(245,158,11,.32); background:linear-gradient(135deg, rgba(255,251,235,.97), rgba(255,255,255,.85)); box-shadow:0 12px 28px -20px rgba(180,83,9,.45); color:var(--lp-amber-950); font-size:15px; line-height:1.6}
.lp-state strong{display:block; color:var(--lp-amber-800); margin-bottom:4px}
.lp-state a{color:var(--lp-primary-deep); text-decoration:underline; text-underline-offset:3px}

.lp-hero-visual{position:relative}
.lp-hero-figure{position:relative; overflow:hidden; background:#eef3f6}
.lp-hero-figure img{width:100%; aspect-ratio:4/5; object-fit:cover}
@media(max-width:1023px),(orientation:portrait){.lp-hero-figure img{max-height:min(70vh, 760px)}}
/* Hero w jednej kolumnie (768–1023 px i tablety pionowo): tekst zaczyna się tam, gdzie sekcje niżej (ta sama szerokość
   co .lp-wrap--wide i jego 24 px wcięcia), a akapit wstępu ma czytelną długość wiersza (kontrola 27.09.2026, F5a i F6). */
@media(min-width:768px) and (max-width:1023px),(min-width:768px) and (orientation:portrait){.lp-hero-copy{padding-inline:calc((100% - min(1840px, 92vw)) / 2 + 24px)}}
@media(max-width:1023px),(orientation:portrait){.lp-lead{max-width:44rem}}
@media(min-width:1024px) and (orientation:landscape){
  .lp-hero{--hero-w:clamp(560px, 40vw, 1000px); min-height:100vh; min-height:100svh; display:flex; flex-direction:column}
  .lp-hero-grid{flex:1; grid-template-columns:minmax(0,1fr) min(50vw, 80vh)}
  .lp-hero-copy{display:grid; grid-template-rows:1fr auto 1fr; justify-items:center; padding:clamp(18px, 1.6vw, 44px) clamp(24px, 4vw, 110px)}
  .lp-hero-brand{grid-row:1; align-self:start; width:min(100%, var(--hero-w)); font-size:clamp(17px, .55vw + 10px, 26px)}
  .lp-hero-text{grid-row:2; width:min(100%, var(--hero-w)); margin-top:0; padding-block:clamp(24px, 3vw, 72px)}
  .lp-hero-text > * + *{margin-top:clamp(18px, 1.55vw, 42px)}
  .lp-badge{font-size:clamp(12px, .38vw + 6px, 16px)}
  .lp-h1{font-size:clamp(32px, 2.9vw + 2px, 80px)}
  .lp-lead{font-size:clamp(16px, .6vw + 9px, 25px)}
  .lp-hero .btn--hero{font-size:clamp(15px, .55vw + 8px, 22px)}
  .lp-trust{font-size:clamp(12px, .32vw + 7.5px, 17px)}
  .lp-hero-figure{position:absolute; inset:0}
  .lp-hero-figure img{height:100%; aspect-ratio:auto}
}
@supports(height:100svh){@media(min-width:1024px) and (orientation:landscape){.lp-hero-grid{grid-template-columns:minmax(0,1fr) min(50vw, 80svh)}}}
.lp-caption{
  position:absolute; left:12px; right:12px; bottom:12px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:.6em; row-gap:.15em;
  padding:.8em 1em; border-radius:1em; border:1px solid transparent; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,253,248,.9)) padding-box, var(--lp-grad-border) border-box;
  box-shadow:0 20px 48px -24px rgba(15,122,67,.55), 0 0 0 .3em rgba(255,255,255,.3); font-size:13px; line-height:1.4; color:var(--lp-ink)
}
@media(min-width:640px){.lp-caption{left:16px; right:16px; bottom:16px; font-size:14px}}
@media(min-width:1024px){.lp-caption{--gap:clamp(16px, 1.3vw, 36px); left:var(--gap); right:var(--gap); bottom:var(--gap); font-size:clamp(13px, .42vw + 8px, 20px)}}
/* Trzy wiersze tekstu właściciela: kropka i etykieta, pod nimi opis, na dole zdanie na zielono — także na telefonie. */
.lp-caption-main{display:contents}
.lp-caption-main span{grid-column:2 / 4; grid-row:2}
.lp-caption-main i{width:.6em; height:.6em; border-radius:50%; background:var(--lp-g-400); box-shadow:0 0 0 .22em rgba(16,185,129,.2), 0 0 .7em rgba(16,185,129,.85); flex-shrink:0}
.lp-caption-main b{grid-column:2 / 4; min-width:0}
.lp-caption-main span{color:var(--lp-ink-soft)}
.lp-caption-note{grid-column:2 / 4; grid-row:3; font-weight:700; color:var(--lp-primary)}

/* ——— pakiety ——— */
/* Karty w stylu obrazów strony (błyszczący render z zieloną poświatą — runda 7 właściciela 27.09.2026: „obrazy mamy
   w stylu glow, a design w matowej pasteli”): świecąca obwódka z gradientu, miękki zielony blask pod kartą, szklane
   ramki z ikoną zamiast płaskich prostokątów, zaznaczenia jako świecące zielone kółka. Sekcja rośnie z szerokością
   ekranu jak hero: wszystko w kartach jest w em od jednego rozmiaru bazowego. */
.lp-pricing{
  position:relative; overflow:hidden;
  background:
    radial-gradient(42% 38% at 12% 8%, rgba(16,185,129,.12), transparent 70%),
    radial-gradient(38% 40% at 88% 22%, rgba(110,231,183,.14), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(16,185,129,.08), transparent 70%),
    var(--lp-bg);
}
.lp-wrap--wide{max-width:min(1840px, 92vw)}
@media(max-width:767px){.lp-wrap--wide{max-width:none}}
.lp-pricing-inner > * + *{margin-top:clamp(40px, 3.2vw, 80px)}
.lp-head--xl{max-width:min(1180px, 100%)}
.lp-head--xl > * + *{margin-top:.8em}
.lp-head--xl .lp-pill{font-size:clamp(12px, .28vw + 7.5px, 15px); padding:.4em 1.1em; letter-spacing:.06em; background:linear-gradient(90deg, rgba(236,253,245,.95), rgba(209,250,229,.8)); box-shadow:0 8px 24px -14px rgba(16,185,129,.6)}
.lp-head--xl .lp-h2{font-size:clamp(26px, 1.9vw + 5px, 58px); line-height:1.15}
/* Zdanie pod opisem cennika: pomiar jest w cenie pakietów 249 i 799 zł (audyt 27.09.2026). */
.lp-head.lp-head--xl p.lp-head-note:not(.lp-pill):not(.lp-eyebrow){display:inline-flex; align-items:flex-start; gap:.55em; max-width:none; text-wrap:wrap; margin-top:1em; padding:.7em 1.1em; border-radius:1em; text-align:left;
  font-size:clamp(15px, .3vw + 11px, 19px); line-height:1.5; color:var(--lp-g-800); background:linear-gradient(135deg, rgba(236,253,245,.95), rgba(255,255,255,.8)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.25), 0 10px 26px -20px rgba(15,122,67,.5)}
.lp-head-note .ic{width:1.25em; height:1.25em; flex:none; margin-top:.1em; color:var(--lp-g-700)}
.lp-head.lp-head--xl p:not(.lp-pill):not(.lp-eyebrow){text-wrap:balance; font-size:clamp(16px, .5vw + 10px, 23px); line-height:1.55; max-width:62ch; margin-inline:auto}

.lp-plans{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px, 2vw, 48px); align-items:stretch; max-width:min(720px, 100%); margin-inline:auto; font-size:clamp(15px, .3vw + 11px, 19px)}
/* Trzy karty obok siebie dopiero od 1280 px — przy 1024–1279 px napisy w wąskich kartach łamały się na 2–3 linie. */
@media(min-width:1280px){.lp-plans{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:var(--lp-content); padding-top:.8em}}
.lp-plan{
  position:relative; display:flex; flex-direction:column; padding:2.1em 1.8em 1.8em; border-radius:1.6em; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9)) padding-box,
    linear-gradient(160deg, rgba(16,185,129,.45), rgba(190,202,189,.35) 38%, rgba(255,255,255,.95) 70%, rgba(110,231,183,.4)) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 28px 60px -34px rgba(15,122,67,.45), 0 10px 26px -18px rgba(19,27,46,.16);
}
.lp-plan--featured{
  border-width:2px;
  background:
    radial-gradient(90% 38% at 50% 0%, rgba(16,185,129,.13), transparent 70%) padding-box,
    linear-gradient(180deg, #fff, #f4fdf8) padding-box,
    var(--lp-grad-border-strong) border-box;
  box-shadow:0 0 0 .4em rgba(16,185,129,.09), 0 34px 80px -30px rgba(16,185,129,.6), 0 12px 32px -20px rgba(15,122,67,.4);
  z-index:1;
}
/* Wyróżniona karta wyżej o .8em marginesem, nie przesunięciem: siatka rozciąga ją w dół, więc dolne krawędzie kart
   i przyciski zakupu stoją w jednej linii (kontrola 27.09.2026, F1). */
@media(min-width:1280px){.lp-plan--featured{margin-top:-.8em}}
.lp-ribbon{
  position:absolute; top:0; left:50%; transform:translate(-50%, -50%); display:flex; align-items:center; gap:.45em; white-space:nowrap;
  padding:.45em 1.2em; border-radius:999px; font-size:max(12px, .68em); line-height:1.2; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--lp-grad-dark); box-shadow:0 10px 24px -8px rgba(16,185,129,.8), 0 0 0 3px rgba(255,255,255,.9);
}
.lp-ribbon .ic{width:1.15em; height:1.15em}
.lp-plan-top{flex:1; display:flex; flex-direction:column; gap:1.05em}
/* Ramka z informacją (karty 14 i 249 zł) stoi tuż nad przyciskiem — puste miejsce zostaje nad nią, nie pod. Karta
   799 zł ramki nie ma: o domenie i hostingu mówi mikrotekst pod przyciskami (uwaga właściciela z 28.09.2026). */
.lp-plan-top > .lp-note{margin-top:auto}
.lp-plan-meta{display:flex; flex-direction:column; align-items:flex-start; gap:.5em}
.lp-tag{display:inline-flex; align-items:center; padding:.45em 1em; border-radius:999px; font-size:max(12px, .64em); line-height:1.3; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--lp-ink-soft); background:linear-gradient(135deg, rgba(236,245,240,.95), rgba(246,250,248,.8)); box-shadow:inset 0 0 0 1px rgba(190,202,189,.5)}
.lp-tag--green{color:var(--lp-em-800); background:linear-gradient(135deg, rgba(209,250,229,.95), rgba(236,253,245,.8)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.3)}
.lp-plan-when{display:inline-flex; align-items:center; gap:.35em; font-size:max(13px, .72em); font-weight:700; color:var(--lp-primary)}
.lp-plan-when .ic{width:1.2em; height:1.2em}
.lp-limit{font-size:max(12px, .66em); line-height:1.3; font-weight:700; padding:.4em .85em; border-radius:999px; color:var(--lp-amber-800); background:rgba(255,251,235,.9); box-shadow:inset 0 0 0 1px rgba(245,158,11,.3)}
/* Nazwa pakietu z oferty (ta sama na /kup, w e-mailach i w regulaminie) nad tytułem karty. */
.lp-plan-name{font-size:max(13px, .78em); line-height:1.35; font-weight:800; color:var(--lp-g-800)}
.lp-plan-req{display:flex; align-items:flex-start; gap:.5em; font-size:max(16px, .9em); line-height:1.45; font-weight:600; color:var(--lp-ink-soft)}
.lp-plan-req .ic{width:1.25em; height:1.25em; flex:none; color:var(--lp-g-700); filter:drop-shadow(0 0 .3em rgba(16,185,129,.35))}
.lp-plans-note{text-align:center; font-size:max(16px, .9em); line-height:1.5; color:var(--lp-outline)}
.lp-plan h3{font-size:1.38em; line-height:1.22; font-weight:800; letter-spacing:-.02em; color:var(--lp-ink)}
.lp-plan-say{font-size:max(16px, .9em); line-height:1.55; color:var(--lp-ink-soft)}
.lp-price{display:flex; align-items:baseline; gap:.5em; padding-bottom:1em; border-bottom:1px solid rgba(190,202,189,.4)}
.lp-price b{font-family:var(--lp-head); font-size:2.6em; line-height:1; font-weight:800; letter-spacing:-.03em; color:var(--lp-ink)}
.lp-plan--featured .lp-price b{background:var(--lp-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.lp-price span{font-size:max(12px, .75em); font-weight:600; color:var(--lp-outline)}
.lp-price:has(+ .lp-price-note){padding-bottom:0; border-bottom:0}
.lp-price-note{margin-top:-.45em; padding-bottom:1em; border-bottom:1px solid rgba(190,202,189,.4)}
.lp-price-note span{display:inline-block; padding:.4em .9em; border-radius:999px; font-size:max(13px, .8em); line-height:1.3; font-weight:700; color:var(--lp-em-800);
  background:linear-gradient(135deg, rgba(209,250,229,.95), rgba(236,253,245,.8)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.3), 0 8px 20px -14px rgba(16,185,129,.7)}
.lp-note strong{color:var(--lp-ink)}
.lp-list{font-size:max(16px, .9em); line-height:1.45; color:var(--lp-ink)}
.lp-list li{display:flex; align-items:flex-start; gap:.65em}
.lp-list li + li{margin-top:.7em}
.lp-list strong{font-weight:700}
.lp-list .ic{width:1.3em; height:1.3em; flex:none; margin-top:.05em; color:#10b981; filter:drop-shadow(0 0 .35em rgba(16,185,129,.45))}
.lp-note{
  display:flex; align-items:flex-start; gap:.7em; padding:.95em 1.1em; border-radius:1em; font-size:max(16px, .9em); line-height:1.5; color:var(--lp-ink-soft);
  background:linear-gradient(135deg, rgba(236,253,245,.95), rgba(255,255,255,.75));
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.2), 0 10px 26px -20px rgba(15,122,67,.5);
}
.lp-note .ic{width:1.35em; height:1.35em; flex:none; color:var(--lp-primary); filter:drop-shadow(0 0 .3em rgba(16,185,129,.4))}
.lp-plan-bottom{padding-top:1.5em; display:flex; flex-direction:column; gap:.7em}
.lp-plan-bottom .lp-fine{text-align:center; text-wrap:balance}
/* Podpis z dwóch zdań (karta 799 zł: termin, potem domena i hosting): każde zdanie od nowej linii i łamane osobno,
   odnośnik w jednym kawałku. */
.lp-plan-bottom .lp-fine > span{display:block; text-wrap:balance}
.lp-plan-bottom .lp-fine > span + span{margin-top:.3em}
.lp-plan-bottom .lp-fine a{white-space:nowrap}
.lp-fine{font-size:max(13px, .74em); line-height:1.4; color:var(--lp-outline)}
/* Podpis pod przyciskiem zakupu ma w każdej karcie tę samą wysokość — przyciski trzech kart stoją w jednej linii (F1). */
@media(min-width:1280px){.lp-plan-bottom .lp-fine{min-height:2.8em}}
/* Od 1280 px (trzy karty obok siebie) karty dzielą cztery wiersze jednej siatki (subgrid): treść, podgląd strony,
   zakup, podpis. Przyciski zakupu mają w trzech kartach tę samą górę, dół i wysokość, a podpisy zaczynają się na jednej
   linii — bez wysokości wpisanych na sztywno, także gdy podpis karty 799 zł ma więcej linii niż pozostałe (uwaga
   właściciela z 28.09.2026). Karta bez przycisku podglądu sięga treścią przez wiersz podglądu, więc jej ramka
   z informacją stoi tuż nad przyciskiem zakupu, a dół karty zajmuje tylko wiersze zakupu i podpisu (części karty na
   siebie nie nachodzą); odstępy jak w układzie wyżej (1.5em nad pierwszym przyciskiem, .7em między elementami).
   Kartę z podglądem rozpoznaje :has() — przeglądarka bez subgrid albo bez :has() zostaje przy układzie wyżej. */
@media(min-width:1280px){@supports (grid-template-rows:subgrid) and selector(:has(a)){
  .lp-plans{grid-template-rows:1fr auto auto auto; row-gap:.7em}
  .lp-plan{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:1 / span 4}
  .lp-plan-top{grid-column:1; grid-row:1 / span 2; padding-bottom:.8em}
  .lp-plan-bottom{display:grid; grid-column:1; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:3 / span 2; padding-top:0}
  .lp-plan-bottom > *{grid-row:1}
  .lp-plan-bottom > .lp-fine{grid-row:2}
  .lp-plan-bottom > .lp-plan-state{align-self:center}
  .lp-plan:has(.btn--showcase) .lp-plan-top{grid-row:1; padding-bottom:0}
  .lp-plan:has(.btn--showcase) .lp-plan-bottom{grid-row:2 / span 3; padding-top:.8em}
  .lp-plan:has(.btn--showcase) .lp-plan-bottom > *{grid-row:2}
  .lp-plan:has(.btn--showcase) .lp-plan-bottom > .btn--showcase{grid-row:1}
  .lp-plan:has(.btn--showcase) .lp-plan-bottom > .lp-fine{grid-row:3}
}}
/* Odnośniki w uwagach i przypisach wyglądają jak odnośniki: kolor i podkreślenie, nie sam kolor (WCAG 1.4.1, F2). */
.lp-note a,.lp-fine a{color:var(--lp-primary-deep); text-decoration:underline; text-underline-offset:3px}
/* Przypis przy cenie 799 zł mówi, że domena i hosting nie są w cenie — warunek zakupu, nie drobny druk (F3). */
.lp-offer-foot{font-size:max(15px, .84em); color:var(--lp-ink-soft)}
.lp-plan-state{font-size:max(14px, .8em); line-height:1.5; color:var(--lp-ink-soft); text-align:center}
/* Przyciski w kartach: w em, żeby rosły z sekcją. */
.btn--plan{display:flex; width:100%; min-height:3em; padding:.9em 1.2em; border-radius:.8em; font-size:.94em; line-height:1.3;
  background:linear-gradient(180deg, #13925a, #0f7a43); box-shadow:0 14px 30px -14px rgba(16,185,129,.85), inset 0 1px 0 rgba(255,255,255,.25)}
.btn--plan:hover{background:linear-gradient(180deg, #0f7a43, #005f32)}
/* Karta 799 zł: podgląd strony stoi nad zakupem (decyzja właściciela) — duży i wyraźny, ale jako przycisk podglądu
   (jasny, z grubą zieloną obwódką i poświatą), żeby zakup był jednym, jasnym przyciskiem głównym (audyt 27.09.2026). */
.btn--plan.btn--showcase{min-height:3.3em; padding:.95em 1.2em; font-size:1em; gap:.6em; color:var(--lp-g-800);
  background:linear-gradient(180deg, #fff, #effcf5); box-shadow:inset 0 0 0 2px rgba(16,185,129,.55), 0 0 0 .3em rgba(16,185,129,.1), 0 16px 34px -18px rgba(16,185,129,.8)}
.btn--plan.btn--showcase:hover{background:linear-gradient(180deg, #f6fef9, #dff7ea)}
.btn--showcase .ic{width:1.25em; height:1.25em}
.lp-plans-after{display:flex; justify-content:center}

/* ——— profil przed i po ——— */
/* Ten sam styl „glow” co cennik (runda 10 właściciela 27.09.2026: „tutaj też trzeba poprawić design do nowego glow
   stylu”): karta „przed” z chłodną, różową poświatą i krzyżykami, karta „po” ze świecącą zieloną obwódką
   i zaznaczeniami jak w cenniku; pod kartami szklany panel z trzema kaflami i jednym dużym przyciskiem.
   Wszystko w em od jednego rozmiaru, więc sekcja rośnie z ekranem jak hero i cennik. */
.lp-profile{
  position:relative; overflow:hidden;
  background:
    radial-gradient(36% 34% at 8% 42%, rgba(244,63,94,.07), transparent 70%),
    radial-gradient(40% 38% at 92% 30%, rgba(16,185,129,.12), transparent 70%),
    radial-gradient(46% 36% at 50% 100%, rgba(110,231,183,.12), transparent 70%),
    #fff;
}
.lp-profile-inner > * + *{margin-top:clamp(40px, 3.2vw, 80px)}
.lp-versus{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px, 2vw, 48px); max-width:var(--lp-content); margin-inline:auto; font-size:clamp(15px, .3vw + 11px, 19px)}
@media(min-width:1024px){.lp-versus{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch}}
.lp-side{position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:1.6em; border:1px solid transparent}
.lp-side--before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,250,251,.92)) padding-box,
    linear-gradient(160deg, rgba(244,63,94,.32), rgba(226,232,240,.6) 45%, rgba(255,255,255,.95) 75%, rgba(244,63,94,.18)) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 26px 56px -36px rgba(159,18,57,.35), 0 10px 26px -18px rgba(19,27,46,.14);
}
.lp-side--after{
  border-width:2px;
  background:
    radial-gradient(90% 30% at 50% 0%, rgba(16,185,129,.12), transparent 70%) padding-box,
    linear-gradient(180deg, #fff, #f4fdf8) padding-box,
    var(--lp-grad-border-strong) border-box;
  box-shadow:0 0 0 .4em rgba(16,185,129,.09), 0 34px 80px -30px rgba(16,185,129,.55), 0 12px 32px -20px rgba(15,122,67,.4);
}
.lp-side-img{position:relative; aspect-ratio:16/9; overflow:hidden; background:#eef3f6}
.lp-side-img img{width:100%; height:100%; object-fit:cover}
/* Obraz przechodzi miękko w kartę zamiast ostrej kreski. */
.lp-side-img::after{content:''; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.9))}
.lp-side--before .lp-side-img img{filter:saturate(.85)}
.lp-side-body{flex:1; display:flex; flex-direction:column; gap:1.05em; padding:1.6em 1.8em 1.8em}
.lp-side-tags{display:flex; flex-wrap:wrap; align-items:center; gap:.5em}
.lp-tag--rose{color:#9f1239; background:linear-gradient(135deg, rgba(255,228,230,.95), rgba(255,241,242,.85)); box-shadow:inset 0 0 0 1px rgba(244,63,94,.28)}
.lp-tag--solid{color:#fff; background:var(--lp-grad-dark); box-shadow:0 8px 20px -10px rgba(16,185,129,.9)}
.lp-side h3{font-size:1.38em; line-height:1.22; font-weight:800; letter-spacing:-.02em; color:var(--lp-ink)}
.lp-side-say{font-size:max(16px, .9em); line-height:1.55; color:var(--lp-ink-soft); padding-bottom:1em; border-bottom:1px solid rgba(190,202,189,.4)}
.lp-side--before .lp-list li{color:var(--lp-ink-soft)}
.lp-side--before .lp-list .ic{color:#e11d48; filter:drop-shadow(0 0 .35em rgba(244,63,94,.35))}
.lp-list li strong{color:var(--lp-ink)}
.lp-side-foot{display:flex; align-items:center; justify-content:center; gap:.6em; padding:1em 1.4em; text-align:center; font-size:max(14px, .84em); line-height:1.45; font-weight:700}
.lp-side-foot .ic{width:1.35em; height:1.35em; flex:none}
.lp-side--before .lp-side-foot{color:#9f1239; background:linear-gradient(90deg, rgba(255,241,242,.95), rgba(255,228,230,.7)); box-shadow:inset 0 1px 0 rgba(244,63,94,.18)}
.lp-side--before .lp-side-foot .ic{color:#e11d48}
.lp-side--after .lp-side-foot{color:#fff; background:var(--lp-grad-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* Strona główna, od 1024 px (karty „przed” i „po” obok siebie): obie karty dzielą wiersze jednej siatki (subgrid) —
   obraz, plakietki, tytuł, zdanie, lista, stopka. Zdanie, kreska pod nim i lista zaczynają się w obu kartach na tej
   samej wysokości, choć tytuł jednej ma dwie linie, a drugiej jedną (ta sama zasada co w kaflach .lp-why). Tylko
   w sekcji strony głównej (.lp-profile) — karty na stronie pakietu mają inną budowę. */
@media(min-width:1024px){@supports(grid-template-rows:subgrid){
  .lp-profile .lp-versus{row-gap:0}
  .lp-profile .lp-side{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 6}
  .lp-profile .lp-side-body{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 4}
}}

/* Panel pod kartami: nagłówek, trzy szklane kafle, jeden duży przycisk. */
.lp-outcome{
  max-width:var(--lp-content); margin-inline:auto; padding:clamp(28px, 2.4vw, 56px) clamp(20px, 2.8vw, 64px);
  border-radius:clamp(20px, 1.6vw, 32px); border:1px solid transparent; text-align:center; font-size:clamp(15px, .3vw + 11px, 19px);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(16,185,129,.1), transparent 70%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,253,248,.92)) padding-box,
    linear-gradient(160deg, rgba(16,185,129,.4), rgba(190,202,189,.35) 40%, rgba(255,255,255,.95) 70%, rgba(110,231,183,.45)) border-box;
  box-shadow:0 30px 70px -40px rgba(15,122,67,.5), 0 10px 26px -18px rgba(19,27,46,.14);
}
.lp-outcome > * + *{margin-top:1.6em}
.lp-outcome-head h3{font-size:clamp(22px, 1.2vw + 8px, 40px); line-height:1.2; font-weight:800; letter-spacing:-.02em; color:var(--lp-ink); text-wrap:balance}
.lp-outcome-head p{max-width:60ch; margin:.7em auto 0; font-size:max(16px, 1em); line-height:1.6; color:var(--lp-ink-soft); text-wrap:balance}
.lp-outcome-head strong{color:var(--lp-ink)}
.lp-outcome-tiles{display:grid; grid-template-columns:minmax(0,1fr); gap:.8em}
@media(min-width:640px){.lp-outcome-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-outcome-tiles > div{display:flex; flex-direction:column; align-items:center; gap:.35em; padding:1.1em 1em; border-radius:1em;
  background:linear-gradient(135deg, rgba(236,253,245,.95), rgba(255,255,255,.8)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.2), 0 12px 28px -20px rgba(15,122,67,.55)}
.lp-outcome-tiles .ic{width:1.5em; height:1.5em; color:var(--lp-primary); filter:drop-shadow(0 0 .35em rgba(16,185,129,.45))}
.lp-outcome-tiles span{font-size:max(12px, .7em); line-height:1.3; font-weight:800; letter-spacing:.08em; color:var(--lp-outline)}
.lp-outcome-tiles strong,.lp-outcome-tiles b{font-family:var(--lp-head); font-size:1.12em; line-height:1.25; font-weight:800; color:var(--lp-ink)}
.lp-outcome-tiles b{font-size:1.5em; background:var(--lp-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.lp-outcome-cta{display:flex; flex-direction:column; align-items:center; gap:.9em}
/* Duży świecący przycisk — jak „Zobacz przykładową stronę” w cenniku. */
.btn--glow{min-height:3.4em; padding:1em 1.9em; border-radius:.85em; font-size:1.08em; line-height:1.3; color:#fff;
  background:var(--lp-grad-btn);
  box-shadow:0 0 0 .3em rgba(16,185,129,.16), 0 20px 44px -16px rgba(16,185,129,.95), inset 0 1px 0 rgba(255,255,255,.3)}
.btn--glow:hover{background:var(--lp-grad-btn-hover); box-shadow:0 0 0 .35em rgba(16,185,129,.22), 0 24px 50px -16px rgba(16,185,129,1), inset 0 1px 0 rgba(255,255,255,.3)}
@media(max-width:639px){.lp-outcome-cta .btn--glow{width:100%}}
/* Zakup w kartach cennika: ten sam świecący przycisk, dopasowany do szerokości karty. */
.btn--plan.btn--glow{min-height:3.2em; padding:.95em 1.2em; font-size:.98em}
.lp-outcome-fine{font-size:max(13px, .78em); line-height:1.6; color:var(--lp-outline)}
.lp-outcome-fine span{white-space:nowrap}

/* ——— strona pod AI ——— */
/* Runda 11 właściciela (27.09.2026): „Profil pomaga Cię znaleźć. Strona pomaga Cię wybrać.” — ten sam styl „glow” co
   cennik i profil przed/po: cztery szklane kafle z ikoną w świecącym kółku, szklany panel o danych dla AI z obrazem
   i pigułkami, na końcu wyróżniony blok pakietu 799 zł (zielona obwódka jak polecana karta cennika). W em od jednego
   rozmiaru — rośnie z ekranem. */
.lp-site{
  position:relative; overflow:hidden;
  background:
    radial-gradient(40% 36% at 86% 6%, rgba(16,185,129,.12), transparent 70%),
    radial-gradient(36% 34% at 6% 48%, rgba(110,231,183,.13), transparent 70%),
    radial-gradient(46% 36% at 60% 100%, rgba(16,185,129,.1), transparent 70%),
    var(--lp-bg);
}
.lp-site-inner > * + *{margin-top:clamp(40px, 3.2vw, 80px)}
.lp-why,.lp-aiblock,.lp-offer{max-width:var(--lp-content); margin-inline:auto; font-size:clamp(15px, .3vw + 11px, 19px)}

/* Cztery kafle. Kafle jednego rzędu dzielą trzy wiersze siatki (subgrid): ikona, tytuł, tekst — tytuły i teksty
   zaczynają się na tej samej wysokości bez względu na to, ile linii ma tytuł, a kafle są równej wysokości (uwaga
   właściciela z 28.09.2026). Bez wysokości wpisanych na sztywno; przeglądarka bez subgrid układa kafel w kolumnę. */
.lp-why{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(16px, 1.4vw, 32px)}
@media(min-width:640px){.lp-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.lp-why{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lp-why-tile{
  display:flex; flex-direction:column; gap:.75em; padding:1.6em 1.5em; border-radius:1.4em; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88)) padding-box,
    linear-gradient(160deg, rgba(16,185,129,.42), rgba(190,202,189,.35) 40%, rgba(255,255,255,.95) 72%, rgba(110,231,183,.4)) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 24px 54px -34px rgba(15,122,67,.45), 0 8px 22px -18px rgba(19,27,46,.14);
}
.lp-why-ic{display:flex; align-items:center; justify-content:center; width:2.8em; height:2.8em; border-radius:.9em; color:#fff;
  background:var(--lp-grad-ic); box-shadow:0 0 0 .3em rgba(16,185,129,.12), 0 12px 24px -10px rgba(16,185,129,.85), inset 0 1px 0 rgba(255,255,255,.3)}
.lp-why-ic .ic{width:1.4em; height:1.4em}
.lp-why-tile h3{margin-top:.35em; font-size:1.14em; line-height:1.28; font-weight:800; letter-spacing:-.015em; color:var(--lp-ink)}
.lp-why-tile p{font-size:max(16px, .88em); line-height:1.6; color:var(--lp-ink-soft)}
.lp-why-tile strong{color:var(--lp-ink)}
@supports(grid-template-rows:subgrid){.lp-why-tile{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 3}}

/* Panel o danych dla AI: obraz i tekst obok siebie. */
.lp-aiblock{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px, 2.4vw, 56px); align-items:center;
  padding:clamp(16px, 1.6vw, 36px); border-radius:clamp(20px, 1.6vw, 32px); border:1px solid transparent;
  background:
    radial-gradient(60% 70% at 0% 50%, rgba(16,185,129,.1), transparent 70%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,253,248,.9)) padding-box,
    linear-gradient(160deg, rgba(16,185,129,.38), rgba(190,202,189,.35) 40%, rgba(255,255,255,.95) 70%, rgba(110,231,183,.42)) border-box;
  box-shadow:0 30px 70px -40px rgba(15,122,67,.45), 0 10px 26px -18px rgba(19,27,46,.12);
}
@media(min-width:1280px){.lp-aiblock{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
@media(max-width:1279px){.lp-aiblock-visual{width:100%; max-width:760px; margin-inline:auto}}
.lp-aiblock-visual{overflow:hidden; border-radius:1.1em; background:#eef3f6; box-shadow:0 0 0 1px rgba(16,185,129,.18), 0 22px 50px -26px rgba(16,185,129,.6)}
.lp-aiblock-visual img{width:100%; aspect-ratio:1376/768; object-fit:cover}
.lp-aiblock-copy{display:flex; flex-direction:column; gap:1em; padding:.4em clamp(4px, 1vw, 24px) .6em}
.lp-aiblock-copy .lp-tag{align-self:flex-start; gap:.55em}
.lp-aiblock-copy .lp-tag .ic{width:1.35em; height:1.35em}
.lp-aiblock-copy h3{font-size:clamp(22px, 1.1vw + 9px, 38px); line-height:1.2; font-weight:800; letter-spacing:-.02em; color:var(--lp-ink); text-wrap:balance}
.lp-aiblock-copy > p:not(.lp-tag){font-size:max(16px, .95em); line-height:1.65; color:var(--lp-ink-soft)}
.lp-aiblock-copy strong{color:var(--lp-ink)}
.lp-aiblock-chips{display:flex; flex-wrap:wrap; gap:.4em; padding-top:.3em}
@media(min-width:640px){.lp-aiblock-chips{flex-wrap:nowrap}}
.lp-aiblock-chips li{display:inline-flex; align-items:center; gap:.4em; padding:.4em .75em; border-radius:999px; font-size:clamp(12px, .2vw + 9px, 14px); white-space:nowrap; line-height:1.3; font-weight:700; color:var(--lp-em-800);
  background:linear-gradient(180deg, #fff, rgba(236,253,245,.8)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.28), 0 8px 18px -14px rgba(15,122,67,.6)}
.lp-aiblock-chips li::before{content:''; flex:none; width:.45em; height:.45em; border-radius:50%; background:#10b981; box-shadow:0 0 .5em rgba(16,185,129,.8)}

/* Blok pakietu 799 zł: zakres po lewej, cena i przyciski po prawej. */
.lp-offer{
  display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; border-radius:clamp(20px, 1.6vw, 32px); border:2px solid transparent;
  background:
    radial-gradient(70% 40% at 20% 0%, rgba(16,185,129,.12), transparent 70%) padding-box,
    linear-gradient(180deg, #fff, #f4fdf8) padding-box,
    var(--lp-grad-border-strong) border-box;
  box-shadow:0 0 0 .4em rgba(16,185,129,.09), 0 34px 80px -30px rgba(16,185,129,.55), 0 12px 32px -20px rgba(15,122,67,.4);
}
@media(min-width:1024px){.lp-offer{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.lp-offer-main{display:flex; flex-direction:column; justify-content:center; gap:1.05em; padding:clamp(24px, 2.4vw, 56px)}
.lp-offer-main h3{font-size:clamp(22px, 1.1vw + 9px, 38px); line-height:1.2; font-weight:800; letter-spacing:-.02em; color:var(--lp-ink); text-wrap:balance}
.lp-offer-say{font-size:max(16px, .95em); line-height:1.6; color:var(--lp-ink-soft); padding-bottom:1.1em; border-bottom:1px solid rgba(190,202,189,.4)}
.lp-offer-say strong{color:var(--lp-ink)}
.lp-list--cols li + li{margin-top:0}
.lp-list--cols{display:grid; grid-template-columns:minmax(0,1fr); gap:.75em 1.6em}
@media(min-width:640px){.lp-list--cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-offer-side{display:flex; flex-direction:column; justify-content:center; gap:1em; padding:clamp(24px, 2.4vw, 56px);
  background:linear-gradient(160deg, rgba(236,253,245,.9), rgba(209,250,229,.55)); border-top:1px solid rgba(16,185,129,.2)}
@media(min-width:1024px){.lp-offer-side{border-top:0; border-left:1px solid rgba(16,185,129,.2)}}
.lp-offer-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:.5em}
.lp-offer-price b{font-family:var(--lp-head); font-size:3.2em; line-height:1; font-weight:800; letter-spacing:-.03em; background:var(--lp-grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.lp-offer-price span{font-size:.9em; font-weight:700; color:var(--lp-ink-soft)}
.lp-offer-price .lp-offer-star{align-self:flex-start; margin-left:-.5em; font-family:var(--lp-head); font-size:1.8em; line-height:1; font-weight:800; color:var(--lp-primary)}
.lp-offer-pill{align-self:flex-start; padding:.4em .9em; border-radius:999px; font-size:max(13px, .8em); line-height:1.3; font-weight:700; color:var(--lp-em-800);
  background:linear-gradient(135deg, rgba(209,250,229,.95), rgba(236,253,245,.8)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.3), 0 8px 20px -14px rgba(16,185,129,.7)}
.lp-offer-cta{display:flex; flex-direction:column; gap:.7em; padding-top:.3em}
.lp-offer-cta .btn{display:flex; width:100%}
.lp-offer-cta .btn--glow{font-size:1em; padding:1em 1.2em}
.lp-offer-cta .lp-fine{text-align:center; line-height:1.55; text-wrap:balance}
/* Drugi przycisk: jasny, z zieloną obwódką — pod głównym, świecącym. */
.btn--outline{min-height:max(44px, 3em); padding:.85em 1.2em; border-radius:.85em; font-size:.94em; line-height:1.3; gap:.55em; color:var(--lp-em-800);
  background:linear-gradient(180deg, #fff, #effcf5); box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.45), 0 10px 24px -16px rgba(15,122,67,.55)}
.btn--outline:hover{background:linear-gradient(180deg, #f6fef9, #dff7ea)}
.btn--outline .ic{width:1.2em; height:1.2em}

/* ——— realizacje (makieta) ——— */
/* Prośba właściciela z 27.09.2026: „nowa sekcja z dwoma realizacjami w postaci galerii jako study case — na razie
   placeholder”. Szklane karty jak reszta strony, galeria z miejscami na zdjęcia (przerywana obwódka = do uzupełnienia). */
.lp-real{position:relative; overflow:hidden;
  background:radial-gradient(38% 36% at 90% 14%, rgba(16,185,129,.1), transparent 70%), radial-gradient(36% 34% at 6% 86%, rgba(110,231,183,.12), transparent 70%), #fff}
.lp-real-inner > * + *{margin-top:clamp(40px, 3.2vw, 80px)}
.lp-real-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px, 2vw, 48px); max-width:var(--lp-content); margin-inline:auto; font-size:clamp(15px, .3vw + 11px, 19px)}
@media(min-width:1024px){.lp-real-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-real-card{display:flex; flex-direction:column; overflow:hidden; border-radius:1.6em; border:1px solid transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9)) padding-box, var(--lp-grad-border) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 28px 60px -34px rgba(15,122,67,.45), 0 10px 26px -18px rgba(19,27,46,.14)}
.lp-real-gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6em; padding:.9em .9em 0}
.lp-real-shot{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45em; aspect-ratio:4/3; padding:.6em; border-radius:1em; text-align:center;
  font-size:max(12px, .72em); line-height:1.35; font-weight:700; color:var(--lp-g-800); border:1.5px dashed rgba(16,185,129,.5);
  background:radial-gradient(70% 70% at 50% 30%, rgba(16,185,129,.12), transparent 70%), linear-gradient(135deg, rgba(209,250,229,.55), rgba(236,253,245,.4))}
.lp-real-shot--main{grid-column:1 / -1; aspect-ratio:16/9; font-size:max(13px, .85em)}
.lp-real-shot .ic{width:1.8em; height:1.8em; color:var(--lp-g-700); opacity:.85}
.lp-real-body{display:flex; flex-direction:column; gap:1em; padding:1.4em 1.6em 1.8em}
.lp-real-body h3{font-size:1.38em; line-height:1.22; font-weight:800; letter-spacing:-.02em; color:var(--lp-ink)}
.lp-real-facts{display:grid; gap:.7em; margin:0}
.lp-real-facts div{padding:.8em 1em; border-radius:.9em; background:linear-gradient(135deg, rgba(236,253,245,.9), rgba(255,255,255,.8)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.18)}
.lp-real-facts dt{font-size:max(12px, .7em); line-height:1.3; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--lp-outline)}
.lp-real-facts dd{margin:.25em 0 0; font-size:max(15px, .9em); line-height:1.55; color:var(--lp-ink-soft)}

/* ——— o twórcy ——— */
/* Runda 13 właściciela (27.09.2026): „Wiesz, kto robi Twoje zlecenie.” — ten sam styl „glow”: szklana karta ze
   świecącą obwódką, duży portret w ramce z zieloną poświatą i belką na zdjęciu, przywitanie zielonym gradientem,
   kontakt jako jeden duży, klikalny wiersz. W em od jednego rozmiaru — rośnie z ekranem. */
.lp-owner-sec{
  position:relative; overflow:hidden;
  background:
    radial-gradient(38% 40% at 10% 30%, rgba(16,185,129,.11), transparent 70%),
    radial-gradient(40% 36% at 92% 80%, rgba(110,231,183,.13), transparent 70%),
    #fff;
}
.lp-owner-inner > * + *{margin-top:clamp(40px, 3.2vw, 80px)}
.lp-owner{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px, 3vw, 72px); align-items:center;
  max-width:var(--lp-content); margin-inline:auto; padding:clamp(22px, 2.6vw, 60px);
  border-radius:clamp(20px, 1.6vw, 32px); border:1px solid transparent; font-size:clamp(15px, .3vw + 11px, 19px);
  background:
    radial-gradient(60% 70% at 0% 40%, rgba(16,185,129,.1), transparent 70%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,253,248,.9)) padding-box,
    linear-gradient(160deg, rgba(16,185,129,.4), rgba(190,202,189,.35) 40%, rgba(255,255,255,.95) 70%, rgba(110,231,183,.45)) border-box;
  box-shadow:0 30px 70px -40px rgba(15,122,67,.5), 0 10px 26px -18px rgba(19,27,46,.14);
}
@media(min-width:900px){.lp-owner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.lp-owner-photo{display:flex; flex-direction:column; align-items:center; gap:1em}
.lp-owner-frame{position:relative; width:min(100%, clamp(240px, 24vw, 440px)); aspect-ratio:4/5; overflow:hidden; border-radius:1.4em;
  box-shadow:0 0 0 .35em rgba(16,185,129,.12), 0 0 0 1px rgba(16,185,129,.35), 0 30px 60px -28px rgba(16,185,129,.65)}
.lp-owner-frame img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.lp-owner-frame figcaption{position:absolute; left:.8em; right:.8em; bottom:.8em; padding:.65em .9em; border-radius:.8em; text-align:center;
  font-size:.8em; line-height:1.35; font-weight:700; color:#fff; background:linear-gradient(90deg, rgba(11,106,57,.94), rgba(15,122,67,.92));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 10px 24px -12px rgba(16,185,129,.8), inset 0 1px 0 rgba(255,255,255,.2)}
.lp-owner-name{text-align:center}
.lp-owner-name b{display:block; font-family:var(--lp-head); font-size:1.25em; line-height:1.3; font-weight:800; color:var(--lp-ink)}
.lp-owner-name span{font-size:max(13px, .82em); line-height:1.4; font-weight:600; color:var(--lp-outline)}
.lp-owner-copy{display:flex; flex-direction:column; gap:1.1em}
.lp-owner-hello{width:fit-content; font-family:var(--lp-head); font-size:clamp(26px, 1.3vw + 10px, 44px); line-height:1.15; font-weight:800; letter-spacing:-.02em;
  color:var(--lp-primary); background:linear-gradient(100deg, #0b6a39, #0f7a43 40%, #0e9f6e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 .2em rgba(16,185,129,.25))}
/* Treść bloku składa serwer (engine/site-pages.ts → sellerBlockHtml) — tu tylko oprawa. */
.seller-block > * + *{margin-top:1em}
.seller-block p{font-size:max(16px, 1em); line-height:1.65; color:var(--lp-ink-soft)}
.seller-block p strong,.seller-block p b{color:var(--lp-ink)}
.seller-block a{color:var(--lp-primary-deep); text-decoration:underline; text-underline-offset:3px}
.seller-block .seller-contact{margin-top:1.6em}
.seller-contact a{display:flex; align-items:center; gap:.85em; min-height:44px; padding:.85em 1.1em; border-radius:1em; font-size:.95em; line-height:1.45; font-weight:600;
  color:var(--lp-ink); text-decoration:none; background:linear-gradient(135deg, rgba(236,253,245,.95), rgba(255,255,255,.82));
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.24), 0 12px 28px -20px rgba(15,122,67,.55); transition:box-shadow .2s, transform .2s}
.seller-contact a:hover,.seller-contact a:focus-visible{transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.45), 0 16px 32px -18px rgba(15,122,67,.65)}
.seller-contact a strong{color:var(--lp-primary-deep); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}
.seller-contact-ic{width:2.3em; height:2.3em; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; color:#fff;
  background:var(--lp-grad-ic); box-shadow:0 0 0 .25em rgba(16,185,129,.14), 0 8px 18px -8px rgba(16,185,129,.8)}
.seller-contact-ic svg{width:1.15em; height:1.15em}
@media(prefers-reduced-motion:reduce){.seller-contact a:hover,.seller-contact a:focus-visible{transform:none}}

/* ——— FAQ ——— */
/* Runda 14 właściciela (27.09.2026): „Masz wątpliwość? Tu są konkrety.” — ten sam styl „glow”: szklane karty ze
   świecącą obwódką, znak zapytania w zielonym kółku z poświatą, odpowiedzi od razu widoczne (bez rozwijania). */
.lp-faq-sec{
  position:relative; overflow:hidden;
  background:
    radial-gradient(40% 36% at 88% 12%, rgba(16,185,129,.11), transparent 70%),
    radial-gradient(38% 36% at 8% 78%, rgba(110,231,183,.13), transparent 70%),
    var(--lp-bg);
}
.lp-faq-inner > * + *{margin-top:clamp(40px, 3.2vw, 80px)}
.faq{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(16px, 1.4vw, 32px); max-width:var(--lp-content); margin-inline:auto; font-size:clamp(15px, .3vw + 11px, 19px)}
@media(min-width:900px){.faq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-faq-item{
  display:flex; flex-direction:column; gap:.9em; padding:1.5em 1.6em; border-radius:1.4em; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88)) padding-box,
    linear-gradient(160deg, rgba(16,185,129,.4), rgba(190,202,189,.35) 40%, rgba(255,255,255,.95) 72%, rgba(110,231,183,.38)) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 24px 54px -36px rgba(15,122,67,.45), 0 8px 22px -18px rgba(19,27,46,.14);
}
.lp-faq-item h3{display:flex; align-items:flex-start; gap:.75em; font-size:1.08em; line-height:1.35; font-weight:800; letter-spacing:-.01em; color:var(--lp-ink)}
.lp-faq-ic{display:inline-flex; align-items:center; justify-content:center; flex:none; width:1.9em; height:1.9em; margin-top:-.2em; border-radius:50%; color:#fff;
  background:var(--lp-grad-ic); box-shadow:0 0 0 .22em rgba(16,185,129,.12), 0 8px 18px -8px rgba(16,185,129,.8)}
.lp-faq-ic .ic{width:1.15em; height:1.15em}
.lp-faq-a{padding-left:calc((1.9em + .75em) * 1.08)}
.lp-faq-a > * + *{margin-top:.6em}
.lp-faq-a p{font-size:max(16px, .92em); line-height:1.65; color:var(--lp-ink-soft)}
.lp-faq-a strong{color:var(--lp-ink)}
@media(max-width:639px){.lp-faq-a{padding-left:0}}
/* Karty jednego rzędu dzielą dwa wiersze siatki (pytanie, odpowiedź): odpowiedzi zaczynają się na tej samej wysokości
   także wtedy, gdy jedno pytanie ma dwie linie, a drugie jedną (ta sama zasada co w kaflach .lp-why). */
@supports(grid-template-rows:subgrid){.lp-faq-item{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 2}}

/* ——— domknięcie ——— */
/* Runda 15 właściciela (27.09.2026): ciemnozielone domknięcie w stylu „glow” — miętowe poświaty na brzegach (biały
   tekst zostaje na ciemnym tle), świecąca plakietka i jeden duży, jasny przycisk z poświatą. Rośnie z ekranem. */
.lp-closer{position:relative; overflow:hidden; padding-block:clamp(64px, 6vw, 140px); color:#fff; text-align:center;
  background:
    radial-gradient(38% 60% at 8% 12%, rgba(52,211,153,.2), transparent 70%),
    radial-gradient(40% 60% at 92% 92%, rgba(16,185,129,.24), transparent 70%),
    linear-gradient(135deg, #053d2a, #0b6a39 55%, #0a5a33)}
.lp-closer-inner{font-size:clamp(15px, .3vw + 11px, 19px)}
.lp-closer-inner > * + *{margin-top:1.7em}
.lp-closer-head{max-width:min(1400px, 100%); margin-inline:auto}
.lp-closer-head > * + *{margin-top:.9em}
.lp-closer-badge{display:inline-flex; padding:.45em 1.1em; border-radius:999px; font-size:max(12px, .72em); line-height:1.3; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#d1fae5; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(110,231,183,.4), 0 0 26px rgba(52,211,153,.3)}
.lp-closer h2{font-size:clamp(28px, 2vw + 8px, 58px); line-height:1.15; font-weight:800; letter-spacing:-.025em; color:#fff; text-wrap:balance}
.lp-closer-head p:not(.lp-closer-badge){max-width:62ch; margin-inline:auto; font-size:clamp(16px, .5vw + 10px, 23px); line-height:1.55; color:rgba(255,255,255,.88); text-wrap:balance}
.lp-closer-head p strong{color:#fff}
.lp-closer-cta{display:flex; justify-content:center}
.btn--closer{min-height:3.4em; padding:1em 2em; border-radius:.9em; font-size:1.1em; line-height:1.3; color:#0b6a39; background:linear-gradient(180deg, #fff, #ecfdf5);
  box-shadow:0 0 0 .3em rgba(255,255,255,.12), 0 0 40px rgba(52,211,153,.45), 0 20px 40px -20px rgba(0,0,0,.45)}
.btn--closer:hover{background:#fff; box-shadow:0 0 0 .35em rgba(255,255,255,.18), 0 0 56px rgba(52,211,153,.6), 0 24px 44px -20px rgba(0,0,0,.5)}
@media(max-width:639px){.lp-closer-cta .btn--closer{width:100%}}
.lp-closer-fine{font-size:.82em; line-height:1.6; color:rgba(255,255,255,.78)}
.lp-closer-fine > * + *{margin-top:.2em}
.lp-closer .lp-state{max-width:560px; margin-inline:auto; text-align:left; color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.1); box-shadow:0 0 26px rgba(52,211,153,.2)}
.lp-closer .lp-state strong{color:#d1fae5}
.lp-closer .lp-state a{color:#fff}
/* Zaznaczenie klawiaturą widać także na ciemnozielonym tle. */
.lp-closer :focus-visible{outline-color:#fff}

/* ——— stopka ——— */
/* Jasna stopka ze świecącą kreską u góry: logo i zdanie o firmie po lewej, dokumenty i e-mail po prawej (na telefonie
   jedno pod drugim), na dole linia sprzedawcy i zdanie o VAT. E-mail i linię sprzedawcy wstawia serwer. */
.lp-footer{position:relative; background:linear-gradient(180deg, #f5fbf8, var(--lp-bg)); border-top:1px solid rgba(16,185,129,.18)}
.lp-footer::before{content:''; position:absolute; left:12%; right:12%; top:-1px; height:1px; background:linear-gradient(90deg, transparent, rgba(16,185,129,.7), transparent); box-shadow:0 0 14px rgba(16,185,129,.55)}
@media(min-width:768px){.lp-wrap.lp-footer-inner{max-width:min(1608px, 92vw)}}
.lp-footer-inner{display:flex; flex-direction:column; gap:1.8em; padding-top:clamp(40px, 3.4vw, 80px); padding-bottom:clamp(40px, 3vw, 64px); font-size:clamp(14px, .2vw + 11px, 17px)}
.lp-footer-top{display:flex; flex-direction:column; align-items:center; gap:1.4em; text-align:center}
@media(min-width:1280px){.lp-footer-top{flex-direction:row; align-items:flex-start; justify-content:space-between; text-align:left}}
.lp-footer-about{display:flex; flex-direction:column; align-items:center; gap:.8em; max-width:34em}
@media(min-width:1280px){.lp-footer-about{align-items:flex-start}}
.lp-footer-brand{font-size:1.3em}
.lp-footer-about p{font-size:.95em; line-height:1.6; color:var(--lp-ink-soft)}
.lp-footer-about strong{color:var(--lp-ink)}
.lp-footer-side{display:flex; flex-direction:column; align-items:center; gap:.4em}
@media(min-width:1280px){.lp-footer-side{align-items:flex-end}}
.lp-footer-links{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 1.1em; font-size:.9em; color:var(--lp-ink-soft)}
@media(min-width:1280px){.lp-footer-links{justify-content:flex-end}}
.lp-footer-links a{display:inline-flex; align-items:center; min-height:44px; transition:color .2s}
.lp-footer-links a:hover,.lp-footer-links a:focus-visible{color:var(--lp-primary); text-decoration:underline}
.lp-footer-links i{font-style:normal; color:var(--lp-line)}
.lp-footer-reports{display:inline-flex; align-items:center; gap:1.1em}
@media(max-width:639px){.lp-footer-links i{display:none}}
/* Grupa „Pakiety” (decyzja właściciela z 30.09.2026): odnośniki do stron trzech pakietów nad odnośnikami dokumentów, ten sam
   wygląd; etykieta pogrubiona, na telefonie w osobnej linii nad odnośnikami. Na stronie pakietu jego własnego odnośnika nie ma. */
.lp-footer-label{font-weight:700; color:var(--lp-ink)}
@media(max-width:639px){.lp-footer-label{flex-basis:100%; padding-top:.4em}}
.lp-footer-mail{display:inline-flex; align-items:center; gap:.6em; font-weight:700}
.lp-footer-mail-ic{display:inline-flex; align-items:center; justify-content:center; width:2em; height:2em; border-radius:50%; color:#fff;
  background:var(--lp-grad-ic); box-shadow:0 0 0 .2em rgba(16,185,129,.12), 0 8px 18px -8px rgba(16,185,129,.8)}
.lp-footer-mail-ic .ic{width:1.05em; height:1.05em}
.lp-footer-mail a{display:inline-flex; align-items:center; min-height:44px; color:var(--lp-primary-deep); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}
.lp-footer-fine{padding-top:1.2em; border-top:1px solid rgba(190,202,189,.35); text-align:center; font-size:max(12.5px, .8em); line-height:1.6; color:var(--lp-outline)}
.lp-footer-fine > * + *{margin-top:.15em}
/* Przed uzupełnieniem danych w panelu linia sprzedawcy jest pusta — wtedy znika też kropka przed nią. */
.lp-footer-seller:has(> [data-seller-line]:empty){display:none}

/* ——— dolny pasek na telefonie ——— */
.lp-tabbar{position:fixed; left:0; bottom:0; z-index:50; width:100%; display:flex; justify-content:space-around; align-items:center; padding:8px 16px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--lp-line-30)}
.lp-tabbar a{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:64px; min-height:44px; padding-block:4px; font-size:12px; line-height:16px; color:var(--lp-ink-soft)}
.lp-tabbar a:first-child{color:var(--lp-primary); font-weight:600}
.lp-tabbar .ic{width:20px; height:20px}
@media(min-width:768px){.lp-tabbar{display:none}}
@media(max-width:767px){.lp-footer-inner{padding-bottom:96px}}
/* ——— Strony zakupu ——— */
/* Strony zakupu pakietów /kup/pomiar, /kup/profil-google i /kup/profil-i-strona (polecenie właściciela z 27.09.2026:
   każdy pakiet ma własną stronę zakupu, a klient płaci na niej). Jeden szablon (public/zakup.html) i skrypt
   (public/zakup.js) dla trzech pakietów. Klasy mają przedrostek zk-.
   Układ według uwagi właściciela z 28.09.2026 („Wszystko jest zbyt wielkie… proste zgody i adres mailowy mają osobną
   kartę, a da się to zmieścić w jednej karcie. A płatności najlepiej dać na tej samej stronie — to wszystko da się
   zmieścić bez scrollowania”): krótki wstęp i JEDEN rząd dwóch równych kart — po lewej „Twoje dane” (wszystkie pola,
   potwierdzenia i oświadczenia), po prawej „Płatność” (co zamawiasz, formularz Stripe, przycisk zamówienia). Karty mają
   tę samą górę i wysokość i stoją symetrycznie względem osi strony; pod nimi jedna mała karta „Co się stanie po zapłacie”
   (trzy kroki w trzech kolumnach). Nagłówek, wstęp, rząd kart, karta informacji i stopka mają te same lewe i prawe krawędzie (szerokość treści
   strony głównej). Poniżej 1024 px karty stoją jedna pod drugą: najpierw dane, potem płatność. Pilnuje tego pomiar
   w Chrome: scripts/zakup-uklad.mjs (reguły: scripts/zakup-uklad-reguly.mjs), także to, czy na dużym ekranie cały wstęp
   i obie karty razem z przyciskiem zamówienia mieszczą się w widocznej części strony (ONE_SCREEN). */

/* Treść zależna od pakietu: element z data-for="<pakiet…>" widać tylko na stronie tego pakietu (serwer wstawia
   html[data-product]); bez tego atrybutu widać wszystko — lepiej za dużo niż pusta strona. */
html[data-product="local-scan"] [data-for]:not([data-for~="local-scan"]),
html[data-product="profile-fill"] [data-for]:not([data-for~="profile-fill"]),
html[data-product="profile-website"] [data-for]:not([data-for~="profile-website"]){display:none !important}

/* Jedna szerokość, jedno wcięcie, jeden odstęp i jeden promień dla całej strony. Szerokość treści jak na stronie głównej
   (--lp-content w .lp-wrap--wide: min(1560px, 92vw − 2×24px) od 768 px) — krawędzie kart zgadzają się z cennikiem strony
   głównej (decyzja 28.09.2026: strona zakupu ma przypominać landing całym układem). Rozmiary zwarte (28.09.2026):
   wcięcie kart 20–28 px, odstęp 16–20 px. */
.zk-body{
  --zk-max:1560px; --zk-gutter:24px; --zk-pad:clamp(20px, 1.6vw, 28px); --zk-gap:clamp(16px, 1.2vw, 20px); --zk-radius:clamp(20px, 1.4vw, 26px); --zk-col-gap:clamp(12px, 1vw, 18px);
  background:
    radial-gradient(46% 26% at 4% 2%, rgba(16,185,129,.12), transparent 70%),
    radial-gradient(40% 24% at 98% 10%, rgba(110,231,183,.16), transparent 70%),
    radial-gradient(50% 30% at 50% 100%, rgba(16,185,129,.07), transparent 70%),
    var(--lp-bg);
}
.zk-wrap{width:min(var(--zk-max), 100% - 2 * var(--zk-gutter)); margin-inline:auto}
@media(min-width:768px){.zk-wrap{width:min(var(--zk-max), 92vw - 2 * var(--zk-gutter))}}
.zk-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Nagłówek jak na stronie głównej (tam logo stoi w hero, bez paska): logo po lewej, „← Pakiety” po prawej, te same
   rozmiary co logo w hero; niższy niż wcześniej, żeby formularz z płatnością zmieścił się na ekranie. */
.zk-top-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:10px}
.zk-top .lp-brand{font-size:17px}
.zk-back{display:inline-flex; align-items:center; gap:.45em; min-height:44px; padding:0 1.15em; border-radius:999px; font-family:var(--lp-head); font-size:15px; line-height:1.2; font-weight:700; color:var(--lp-g-800);
  background:linear-gradient(180deg, #fff, #effcf5); box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.38), 0 8px 20px -14px rgba(15,122,67,.6); transition:box-shadow .2s ease, background .2s ease}
.zk-back:hover{background:linear-gradient(180deg, #f6fef9, #dff7ea); box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.6), 0 10px 24px -14px rgba(15,122,67,.7)}
@media(min-width:1024px){
  .zk-top-inner{padding-block:clamp(8px, .6vw, 14px)}
  .zk-top .lp-brand{font-size:clamp(17px, .55vw + 10px, 26px)}
  .zk-back{font-size:clamp(15px, .4vw + 9.5px, 20px); min-height:max(44px, 2.6em)}
}

/* Kolumna: wstęp, komunikaty, rząd dwóch kart, karta informacji — jedna pod drugą, z jednym odstępem. */
.zk{font-size:16px}
.zk-col{display:flex; flex-direction:column; gap:var(--zk-gap); padding-block:clamp(2px, .4vw, 8px) clamp(40px, 4vw, 80px)}
.zk-col > *{min-width:0}

/* Wstęp: plakietka, nazwa pakietu, jedno zdanie — zwarty, bez paska kroków (jeden widok zamiast dwóch kroków). */
.zk-intro.lp-head{width:100%; max-width:none; margin:0}
.zk-intro.lp-head > * + *{margin-top:6px}
.zk-h1.lp-h2{font-size:clamp(24px, .9vw + 12px, 30px); line-height:1.15}
.zk-intro .zk-lead{max-width:none; margin-inline:auto; font-size:15px; line-height:1.45; color:var(--lp-ink-soft); text-wrap:balance}
.zk-notice{padding:12px calc(var(--zk-pad) + 1px); border-radius:14px; font-size:15px; line-height:1.5; color:var(--lp-amber-950);
  background:linear-gradient(135deg, rgba(255,251,235,.97), rgba(255,255,255,.88)); box-shadow:inset 0 0 0 1px rgba(245,158,11,.38), 0 12px 28px -20px rgba(180,83,9,.45)}
.zk-notice a{color:var(--lp-primary-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* Rząd dwóch kart: od 1024 px dwie równe kolumny (ta sama szerokość, ta sama góra, ta sama wysokość — siatka rozciąga
   obie karty do wyższej), poniżej jedna pod drugą. */
.zk-sell{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--zk-gap); align-items:stretch}
@media(min-width:1024px){.zk-sell{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Karta: szkło ze świecącą obwódką jak karty cennika strony głównej; obie karty mają ten sam wygląd, wcięcie i promień. */
.zk-card{position:relative; min-width:0; display:flex; flex-direction:column; gap:12px; margin:0; padding:var(--zk-pad); border-radius:var(--zk-radius); border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9)) padding-box,
    linear-gradient(160deg, rgba(16,185,129,.45), rgba(190,202,189,.35) 38%, rgba(255,255,255,.95) 70%, rgba(110,231,183,.4)) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 28px 60px -34px rgba(15,122,67,.45), 0 10px 26px -18px rgba(19,27,46,.16)}
/* Wiersz tytułu: ten sam kafelek z numerem i ten sam tytuł w obu kartach. */
.zk-card-head{display:flex; align-items:center; gap:12px}
.zk-card-head h2{font-size:clamp(20px, .4vw + 15px, 22px); line-height:1.2; font-weight:800; letter-spacing:-.02em; color:var(--lp-ink)}
.zk-num{display:inline-flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; border-radius:11px; font-family:var(--lp-head); font-size:16px; font-weight:800; color:#fff;
  background:var(--lp-grad-ic); box-shadow:0 0 0 .22em rgba(16,185,129,.12), 0 8px 18px -10px rgba(16,185,129,.9), inset 0 1px 0 rgba(255,255,255,.3)}

/* Karta danych: pola, potwierdzenia i oświadczenia w jednym bloku (fieldset — w czasie potwierdzania płatności cały
   blok jest nieczynny). */
.zk-fieldset{min-width:0; display:flex; flex-direction:column; gap:12px; margin:0; padding:0; border:0}

/* Pola: siatka dwóch równych kolumn; każde pole to podsiatka czterech wierszy (etykieta, pole, podpowiedź, błąd), więc
   pola w jednym wierszu zaczynają się na tej samej wysokości i mają tę samą wysokość, nawet gdy etykieta albo podpowiedź
   jest dłuższa. Odstęp między wierszami daje górny margines etykiety (w pierwszym wierszu znosi go ujemny margines
   siatki). 16 px w polu — telefon nie powiększa strony. */
.zk-fields{display:grid; grid-template-columns:minmax(0,1fr); column-gap:var(--zk-col-gap); margin-top:-10px}
@media(min-width:560px){.zk-fields{grid-template-columns:repeat(2,minmax(0,1fr))} .zk-field--full{grid-column:1 / -1}}
/* Od 1440 px kolumny są dość szerokie, by główna usługa stanęła obok drugiej — karta danych jest o jeden wiersz niższa,
   a przycisk zamówienia bliżej ekranu (kontrola 28.09.2026: „Zamawiam…” przy 1920×1080 w przeglądarce). */
@media(min-width:1440px){.zk-fields .zk-field--full{grid-column:auto}}
.zk-field{min-width:0; display:grid; grid-template-rows:subgrid; grid-row:span 4}
.zk-label{display:block; margin:10px 0 5px; font-size:14px; line-height:1.3; font-weight:700; color:var(--lp-ink)}
.zk-req{color:#b42318; font-weight:800}
.zk-opt{font-weight:500; color:var(--lp-outline)}
.zk-input{display:block; width:100%; min-height:46px; padding:10px 12px; border-radius:12px; border:1.5px solid rgba(98,109,98,.34); background:#fff; color:var(--lp-ink); font:inherit; font-size:16px; line-height:1.35;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px -16px rgba(15,122,67,.55); transition:border-color .15s ease, box-shadow .15s ease}
.zk-input::placeholder{color:#6b756b; opacity:1}
.zk-input:hover{border-color:rgba(15,122,67,.5)}
.zk-input:focus{outline:none; border-color:var(--lp-primary); box-shadow:0 0 0 4px rgba(16,185,129,.2)}
.zk-input[aria-invalid="true"]{border-color:#b42318; box-shadow:0 0 0 4px rgba(180,35,24,.12)}
.zk-input:disabled{background:#f4f6f4; cursor:not-allowed}
.zk-hint{margin-top:4px; font-size:13px; line-height:1.4; color:var(--lp-ink-soft)}
.zk-hint a{color:var(--lp-primary-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.zk-field-error{margin-top:5px; font-size:13px; line-height:1.4; font-weight:700; color:#b42318}
/* Zakup na firmę: pole wyboru stoi w wierszu etykiet, a NIP — w wierszu pól, obok e-maila (na tej samej wysokości). */
.zk-taxid{display:contents}
.zk-field--buyer > .zk-check--plain.zk-label{display:flex; align-items:center; gap:8px; padding:0; font-weight:700}
.zk-field--buyer > .zk-check--plain.zk-label input{width:18px; height:18px; margin:0}

/* Potwierdzenia i oświadczenia: zwarte wiersze do kliknięcia, oddzielone od pól cienką kreską; zaznaczony świeci na
   zielono, błędny — na czerwono. Zdanie pod nimi drobnym drukiem. */
.zk-checks{display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid rgba(16,185,129,.2)}
.zk-checks-list{display:flex; flex-direction:column; gap:6px}
.zk-check{display:flex; align-items:flex-start; gap:10px; padding:5px 12px; border-radius:12px; cursor:pointer; font-size:14px; line-height:1.45; color:var(--lp-ink);
  background:linear-gradient(135deg, rgba(236,253,245,.85), rgba(255,255,255,.75)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.24); transition:box-shadow .15s ease, background .15s ease}
.zk-check:hover{box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.5)}
.zk-check:has(input:checked){background:linear-gradient(135deg, rgba(209,250,229,.92), rgba(236,253,245,.82)); box-shadow:inset 0 0 0 1.5px rgba(15,122,67,.62)}
.zk-check:has(input[aria-invalid="true"]){box-shadow:inset 0 0 0 1.5px #b42318, 0 0 0 3px rgba(180,35,24,.1)}
.zk-check input{flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--lp-primary); cursor:pointer}
.zk-check a{color:var(--lp-primary-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.zk-check--plain{padding:0; background:none; box-shadow:none}
.zk-check--plain:hover,.zk-check--plain:has(input:checked){background:none; box-shadow:none}
.zk-check-row > .zk-field-error{margin-inline:12px}
.zk-note{font-size:13px; line-height:1.45; color:var(--lp-ink-soft)}
.zk-note a{color:var(--lp-primary-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* Karta płatności: „Zamawiasz: …” z zakresem i terminem (art. 17 ust. 1 u.p.k. — tuż przed przyciskiem zamówienia),
   miejsce na formularz Stripe (do chwili, gdy dane są kompletne, spokojna ramka z informacją), podpowiedź BLIK
   i przycisk zamówienia na całą szerokość wnętrza karty, zawsze na dole karty. */
.zk-what{padding:12px 16px; border-radius:14px; font-size:14px; line-height:1.45; color:var(--lp-ink);
  background:linear-gradient(135deg, rgba(236,253,245,.9), rgba(255,255,255,.82)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.28)}
.zk-what-head{font-size:15px}
.zk-what-head strong,.zk-what-head b{font-weight:800}
.zk-what-vat{color:var(--lp-outline)}
.zk-what-list{display:grid; gap:2px; margin:6px 0 0; padding:0; list-style:none}
.zk-what-list li{position:relative; padding-left:16px; color:var(--lp-ink-soft)}
.zk-what-list li::before{content:''; position:absolute; left:3px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--lp-g-400); box-shadow:0 0 .45em rgba(16,185,129,.6)}
.zk-what :is(.zk-what-term,.zk-what-hosting){margin-top:6px}
.zk-what-term{display:flex; align-items:flex-start; gap:6px}
.zk-what-term .ic{width:16px; height:16px; flex:none; margin-top:2px; color:var(--lp-g-700)}
.zk-what-hosting{padding:6px 10px; border-radius:10px; font-size:13px; line-height:1.45; color:var(--lp-amber-950); background:rgba(255,251,235,.9); box-shadow:inset 0 0 0 1px rgba(245,158,11,.3)}
.zk-what-hosting a{color:var(--lp-primary-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* Miejsce na formularz płatności. Dopóki dane nie są kompletne — ramka z przerywaną obwódką, rozciągnięta na wolne
   miejsce karty; potem szkielet w czasie wczytywania i formularz Stripe. */
.zk-pay-frame{flex:1 0 auto; display:flex; flex-direction:column; min-width:0}
.zk-card--pay[data-pay="ready"] .zk-pay-frame,.zk-card--pay[data-pay="preparing"] .zk-pay-frame{flex-grow:0}
.zk-pay-wait{flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:120px; padding:16px 20px; border-radius:14px; text-align:center;
  border:1.5px dashed rgba(16,185,129,.45); background:rgba(236,253,245,.45)}
.zk-pay-wait .ic{width:26px; height:26px; color:var(--lp-g-700)}
.zk-pay-wait-text{max-width:44ch; font-size:14px; line-height:1.45; font-weight:600; color:var(--lp-ink); text-wrap:balance}
.zk-pay-wait-sub{font-size:13px; line-height:1.4; color:var(--lp-outline)}
.zk .zk-pay-retry{margin-top:4px; min-height:40px; padding:.5em 1.2em; font-size:14px}
.zk-pay-loading{display:grid; gap:10px}
.zk-skeleton{display:block; height:48px; border-radius:12px; background:linear-gradient(90deg, #edf6f1, #f9fdfb 45%, #edf6f1 90%); background-size:220% 100%; box-shadow:inset 0 0 0 1px rgba(190,202,189,.5); animation:zk-skeleton 1.4s ease-in-out infinite}
@keyframes zk-skeleton{from{background-position:120% 0} to{background-position:-120% 0}}
.zk-pay-loading-text{font-size:13px; line-height:1.4; text-align:center; color:var(--lp-outline)}
.zk-pay-element{min-width:0}
.zk-pay-element:empty{display:none}
.zk-blik{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; font-size:14px; line-height:1.4; font-weight:600; color:var(--lp-em-800);
  background:linear-gradient(135deg, rgba(209,250,229,.92), rgba(236,253,245,.8)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.32)}
.zk-blik .ic{width:18px; height:18px; flex:none; color:var(--lp-g-700)}
.zk-pay-status{font-size:14px; line-height:1.45; font-weight:700; text-align:center; color:var(--lp-g-800)}
.zk-error{padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.45; font-weight:600; color:#912018; background:#fef3f2; box-shadow:inset 0 0 0 1px rgba(180,35,24,.3)}
.zk-pay-end{margin-top:auto; display:flex; flex-direction:column; gap:10px}
.zk .zk-pay-btn{width:100%; min-height:52px; padding:.75em 1.2em; font-size:17px; line-height:1.3}
.zk .btn:disabled,.zk .btn[aria-disabled="true"]{cursor:not-allowed; opacity:.55; filter:saturate(.6); box-shadow:none}
.zk .btn:disabled::after,.zk .btn[aria-disabled="true"]::after{display:none}
.zk .btn[aria-busy="true"]{cursor:progress}
.zk-pay-safe{font-size:13px; line-height:1.45; text-align:center; color:var(--lp-ink-soft); text-wrap:balance}
.zk-pay-safe .ic{display:inline-block; width:15px; height:15px; margin-right:5px; vertical-align:-2px; color:var(--lp-g-700)}
.zk-pay-safe a{color:var(--lp-primary-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* Pakiet, którego dziś nie kupisz wprost (zakup bezpośredni wyłączony albo limit miesięczny): zamiast formularza —
   powód, pomiar i kontakt. Pokazuje go arkusz (html[data-direct="off"]) albo skrypt (data-state="closed"). Wyśrodkowana
   karta na całą szerokość kolumny. */
.zk-closed{display:none; padding:var(--zk-pad); border-radius:var(--zk-radius); border:1px solid transparent; text-align:center;
  background:linear-gradient(135deg, rgba(255,251,235,.97), rgba(255,255,255,.9)) padding-box, linear-gradient(160deg, rgba(245,158,11,.45), rgba(255,255,255,.9) 60%, rgba(16,185,129,.35)) border-box;
  box-shadow:0 24px 54px -38px rgba(180,83,9,.45)}
html[data-direct="off"]:not([data-product="local-scan"]) .zk-closed,.zk[data-state="closed"] .zk-closed{display:block}
html[data-direct="off"]:not([data-product="local-scan"]) .zk-sell,.zk[data-state="closed"] .zk-sell{display:none}
.zk-closed-title{font-family:var(--lp-head); font-size:clamp(20px, .4vw + 15px, 22px); line-height:1.25; font-weight:800; color:var(--lp-ink)}
.zk-closed p + p{margin-top:10px}
.zk-closed > p:not(.zk-closed-title):not(.zk-closed-actions){max-width:62ch; margin-inline:auto; font-size:16px; line-height:1.6; color:var(--lp-ink-soft)}
.zk-closed-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding-top:8px}
.zk-closed-actions .btn{flex:0 1 300px; font-size:16px; min-height:3.4em}
/* Sprzedaż jeszcze nie ruszyła albo jest wstrzymana: ta sama karta co przy pakiecie, którego dziś nie kupisz — tytuł,
   zdanie i duże przyciski zamiast samego linku w tekście. */
.zk-col > .lp-state{padding:var(--zk-pad); border-radius:var(--zk-radius); border:1px solid transparent; text-align:center; font-size:16px; line-height:1.6; color:var(--lp-ink-soft);
  background:linear-gradient(135deg, rgba(255,251,235,.97), rgba(255,255,255,.9)) padding-box, linear-gradient(160deg, rgba(245,158,11,.45), rgba(255,255,255,.9) 60%, rgba(16,185,129,.35)) border-box;
  box-shadow:0 24px 54px -38px rgba(180,83,9,.45)}
.zk-col > .lp-state strong{margin-bottom:8px; font-family:var(--lp-head); font-size:clamp(20px, .4vw + 15px, 22px); line-height:1.3; font-weight:800; color:var(--lp-ink)}
.zk-col > .lp-state .zk-closed-actions{margin-top:12px}
.zk-col > .lp-state .zk-closed-actions .btn{color:var(--lp-em-800); text-decoration:none}
/* Nic tu dziś nie kupisz (sprzedaż nieotwarta, pakiet bez zakupu wprost albo wyczerpany limit): bez plakietki
   „ZAMÓWIENIE” i bez zdania „Podaj firmę…”, które zapraszają do formularza, którego nie ma. */
html:not([data-sales="open"]) :is(.zk-lead,.zk-intro .lp-pill),
html[data-direct="off"]:not([data-product="local-scan"]) :is(.zk-lead,.zk-intro .lp-pill),
.zk[data-state="closed"] :is(.zk-lead,.zk-intro .lp-pill){display:none}
/* Plakietka wstępu mieści się w jednej linii także przy 360–375 px. */
@media(max-width:419px){.zk-intro .lp-pill{font-size:11px; letter-spacing:0}}
/* Od 1024 px (dwie karty obok siebie) bez plakietki: nazwa pakietu i zdanie wstępu wystarczą, a przycisk zamówienia
   wchodzi o ok. 25 px wyżej (kontrola 28.09.2026). */
@media(min-width:1024px){.zk-intro .lp-pill{display:none}}
/* Nic tu dziś nie kupisz (sprzedaż „wkrótce” albo „wstrzymana”, pakiet bez zakupu wprost albo wyczerpany limit): bez
   karty „Co się stanie po zapłacie”. */
html:not([data-sales="open"]) .zk-more{display:none}
html[data-direct="off"]:not([data-product="local-scan"]) .zk-more,.zk[data-state="closed"] .zk-more{display:none}

/* „Co się stanie po zapłacie” pod kartami: JEDNA mała, spokojniejsza karta na całą szerokość kolumny (cienka obwódka, bez
   poświaty). Wyłączeń, kryteriów odbioru i rozliczeń tu nie ma — są w regulaminie i zasadach zwrotów (zasada właściciela
   z 28.09.2026: „Landing to nie jest umowa”). Od 1024 px trzy kroki stoją obok siebie w trzech równych kolumnach, które
   zaczynają się na jednej linii (jak trzy karty cennika strony głównej); 768–1023 px kroki jeden pod drugim; na telefonie
   zwijany wiersz (<details>, public/zakup.js rozwija go od 768 px). */
.zk-more{--zk-info-gap:clamp(24px, 2.4vw, 48px); padding:6px var(--zk-pad); border-radius:var(--zk-radius); border:1px solid rgba(190,202,189,.6);
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.6)); box-shadow:0 18px 44px -36px rgba(15,122,67,.45)}
.zk-info{position:relative; min-width:0}
.zk-info-title{display:flex; align-items:center; gap:.75em; min-height:52px; padding-block:12px; cursor:pointer; list-style:none}
.zk-info-title::-webkit-details-marker{display:none}
.zk-info-name{flex:1; display:flex; align-items:center; font-size:16px; line-height:1.3; font-weight:800; letter-spacing:-.01em; color:var(--lp-ink)}
.zk-info-chev{width:22px; height:22px; flex:none; color:var(--lp-g-700); transition:transform .2s ease}
.zk-info[open] .zk-info-chev{transform:rotate(180deg)}
.zk-info-ic{display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; border-radius:10px; color:#fff; background:var(--lp-grad-ic);
  box-shadow:0 0 0 .2em rgba(16,185,129,.1), 0 8px 18px -10px rgba(16,185,129,.8)}
.zk-info-ic .ic{width:17px; height:17px}
.zk-info > ol{padding-bottom:18px}
.zk-info-steps{display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:zk-after}
.zk-info-steps li{counter-increment:zk-after; display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; font-size:15px; line-height:1.55; color:var(--lp-ink-soft)}
.zk-info-steps li::before{content:counter(zk-after); display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-family:var(--lp-head); font-size:13px; font-weight:800; color:var(--lp-g-800);
  background:var(--lp-em-100); box-shadow:inset 0 0 0 1px rgba(16,185,129,.4)}
/* Od 768 px zawsze rozwinięta: bez strzałki, tytuł nie jest przyciskiem. Do chwili, gdy public/zakup.js rozwinie
   <details>, arkusz pokazuje treść mimo zwinięcia (przeglądarki z ::details-content; pozostałe pomijają regułę). */
@media(min-width:768px){
  .zk-more{padding:var(--zk-pad)}
  .zk-info-title{min-height:0; padding-block:0; margin-bottom:12px; cursor:default}
  .zk-info-chev{display:none}
  .zk-info > ol{padding-bottom:0}
  html:not([data-info-ready]) .zk-info::details-content{content-visibility:visible; display:block}
}
/* Trzy kroki obok siebie, rozdzielone cienkimi kreskami — ta sama szerokość kolumn i ta sama góra. */
@media(min-width:1024px){
  .zk-info-steps{grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--zk-info-gap)}
  .zk-info-steps li{position:relative}
  .zk-info-steps li + li::after{content:''; position:absolute; top:0; bottom:0; left:calc(var(--zk-info-gap) / -2); width:1px; background:linear-gradient(180deg, rgba(190,202,189,.15), rgba(190,202,189,.75) 18%, rgba(190,202,189,.75) 82%, rgba(190,202,189,.15))}
}

/* Stopka strony głównej, na szerokość kolumny (krawędzie jak karty). Strony zakupu nie mają dolnego paska strony
   głównej — bez jego 96 px zapasu pod stopką. */
.zk-body .lp-wrap.lp-footer-inner{width:min(var(--zk-max), 100% - 2 * var(--zk-gutter)); max-width:none; padding-inline:0}
@media(min-width:768px){.zk-body .lp-wrap.lp-footer-inner{width:min(var(--zk-max), 92vw - 2 * var(--zk-gutter))}}
@media(max-width:767px){.zk-body .lp-footer-inner{padding-bottom:40px}}

/* Duże monitory (od 1800 px): trochę większe etykiety i pola. */
@media(min-width:1800px){
  .zk-label{font-size:15px}
  .zk-input{font-size:17px}
  .zk-what{font-size:15px}
  .zk-what-head{font-size:16px}
  .zk .zk-pay-btn{min-height:54px; font-size:18px}
}
/* ——— Landingi pakietów ——— */
/* Strony pakietów /pomiar-widocznosci-google, /uzupelnienie-profilu-google i /profil-google-i-strona-firmy (polecenie
   właściciela z 27.09.2026: każda strona sprzedaje jeden pakiet, w wyglądzie strony głównej). Używają klocków strony
   głównej: plakietki, kafle .lp-why, cały cennik #pakiety (te same trzy karty, wyróżniona karta pakietu strony),
   profil przed/po .lp-versus, blok .lp-aiblock, „O twórcy”, FAQ, domknięcie, stopka i dolny pasek. Ten blok dokłada
   tylko to, czego strona główna nie ma: hero z poziomym obrazem 3:2, zdanie-most, zakres pakietu, kroki i dowód
   z przykładowym raportem. Klasy mają przedrostek lp-pk-, a klocki strony głównej zmienia wyłącznie pod body.lp-pk.
   Szablony składa scripts/landing-pages.mjs, układ mierzy scripts/landing-uklad.mjs (reguły:
   scripts/landing-uklad-reguly.mjs). */
.lp-pk .lp-pill{text-transform:uppercase}
.lp-pk-inner > * + *{margin-top:clamp(40px, 3.2vw, 80px)}
.lp-pk-stack{display:grid; gap:clamp(20px, 2vw, 48px)}
.lp-pk-link{color:var(--lp-primary-deep); font-weight:700; text-decoration:underline; text-decoration-color:rgba(15,122,67,.45); text-underline-offset:3px}
.lp-pk-link:hover{text-decoration-color:currentColor}
/* Odesłanie do dokumentu w zdaniu („Szczegóły w regulaminie”): kolor zdania, więc czytelne na białej karcie i na ciemnym domknięciu. */
.lp-pk-doc{color:inherit; text-decoration:underline; text-underline-offset:3px}

/* Hero: tekst po lewej, poziomy obraz po prawej (od 1024 px), obraz miękko wtopiony w tło, podpis jako szklana karta
   nachodząca na dół obrazu. Rozmiary liter jak w hero strony głównej (te same reguły .lp-badge/.lp-h1/.lp-lead). */
.lp-pk-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--lp-line-30);
  background:radial-gradient(40% 50% at 8% 18%, rgba(16,185,129,.1), transparent 70%), radial-gradient(34% 40% at 60% 92%, rgba(110,231,183,.14), transparent 70%), linear-gradient(180deg, #fff, var(--lp-bg))}
.lp-pk-hero-inner{display:flex; flex-direction:column; padding-top:12px; padding-bottom:clamp(40px, 4vw, 96px)}
.lp-pk-hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px, 3vw, 72px); align-items:center; margin-top:20px}
/* Przycisk, odnośnik i plakietki (uwaga właściciela z 28.09.2026): JEDEN układ na trzech stronach. O układzie decyduje
   szerokość kolumny tekstu (obejma zapytań o szerokość), a nie długość tekstu przycisku — inaczej strona z krótkim
   przyciskiem miałaby odnośnik obok, a strona z długim pod spodem.
     - kolumna od 640 px (ekran poziomy od ok. 1362 px, tablet od ok. 750 px): przycisk i odnośnik w jednym rzędzie,
       trzy plakietki w jednym rzędzie; rozmiary liter i odstęp dobrane tak, że najdłuższa para (799 zł) mieści się
       w 640 px,
     - węższa: odnośnik pod przyciskiem, od jego lewej krawędzi, plakietki jedna pod drugą, wszystkie tej samej
       szerokości — nigdy jedna sama w drugim rzędzie.
   Gdyby nowy tekst był dłuższy niż kolumna: odnośnik przechodzi pod przycisk (od lewej), a tekst plakietki łamie się
   w plakietce — pomiar scripts/landing-uklad.mjs zgłosi wtedy różny układ stron. */
.lp-pk-hero-text{container:lp-pk-hero / inline-size}
.lp-pk-hero-text > * + *{margin-top:20px}
.lp-pk .lp-h1{text-wrap:balance}
.lp-pk-hero-actions{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding-top:4px}
.lp-pk-hero-actions .lp-hero-cta{align-self:stretch; padding-top:0}
.lp-pk-hero .btn--hero{width:100%; font-size:17px; padding:.95em 1.5em; min-height:3.2em}
.lp-pk-hero .btn--hero > span{text-wrap:balance}
.lp-pk-hero .lp-plan-state{text-align:left}
.lp-pk-more{display:inline-flex; align-items:center; justify-content:flex-start; gap:.4em; min-height:44px; font-family:var(--lp-head); font-size:16px; font-weight:700; color:var(--lp-primary-deep);
  text-decoration:underline; text-decoration-thickness:1.5px; text-decoration-color:rgba(15,122,67,.4); text-underline-offset:5px; transition:color .2s}
.lp-pk-more:hover{color:var(--lp-primary); text-decoration-color:currentColor}
.lp-pk-more .ic{width:1.1em; height:1.1em}
@media(min-width:640px){
  .lp-pk-hero-actions .lp-hero-cta{align-self:flex-start}
  .lp-pk-hero .btn--hero{width:auto}
}
.lp-pk .lp-trust{display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:.5em; width:fit-content; max-width:100%}
.lp-pk .lp-trust span{min-width:0; padding:.42em .85em .42em .7em}
@container lp-pk-hero (min-width:640px){
  .lp-pk-hero-actions{flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px clamp(16px, 1.4vw, 32px)}
  .lp-pk-hero-actions .lp-hero-cta{align-self:center}
  /* Bez zakupu wprost (249 i 799 zł) blok ma zdanie i mały przycisk — odnośnik stoi wtedy pod przyciskiem, od jego
     lewej krawędzi (układ zapasowy z uwagi właściciela), a nie obok całego bloku. */
  html:not([data-direct="on"]) .lp-pk-hero-actions:has(.lp-plan-state){flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:6px}
  html:not([data-direct="on"]) .lp-pk-hero-actions:has(.lp-plan-state) .lp-hero-cta{align-self:flex-start}
  .lp-pk-hero .btn--hero{font-size:15.5px}
  .lp-pk-more{font-size:15px}
  .lp-pk .lp-trust{grid-template-columns:repeat(3,minmax(0,auto)); justify-content:start; width:auto}
}
.lp-pk-hero-figure{position:relative; max-width:880px; width:100%; margin-inline:auto}
.lp-pk-hero-img img{width:100%; aspect-ratio:1600/1067; object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 11%, #000 86%, transparent); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 11%, #000 86%, transparent); mask-composite:intersect}
.lp-pk-caption.lp-caption{position:relative; left:auto; right:auto; bottom:auto; width:min(92%, 36em); margin:-3.2em auto 0}
@media(max-width:639px){.lp-pk-caption.lp-caption{width:100%; margin-top:-1.4em}}
/* Dwie kolumny i pełna wysokość ekranu tylko przy ekranie poziomym (jak hero strony głównej); tablet pionowo — jedna
   kolumna. Kolumna tekstu jest trochę szersza od kolumny obrazu (jak w hero strony głównej), żeby od ok. 1362 px
   miała 640 px — wtedy przycisk z odnośnikiem i trzy plakietki stoją w jednym rzędzie. Rozmiary liter przycisku
   i odnośnika z tego bloku stoją w arkuszu po regule obejmy, więc ją zastępują. */
@media(min-width:1024px) and (orientation:landscape){
  .lp-pk-hero{min-height:min(100vh, 1100px); min-height:min(100svh, 1100px); display:flex; flex-direction:column}
  .lp-pk-hero-inner{flex:1; padding-top:clamp(18px, 1.6vw, 44px)}
  .lp-pk-hero-grid{flex:1; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); margin-top:clamp(8px, 1vw, 24px)}
  .lp-pk-brand{align-self:flex-start; font-size:clamp(17px, .55vw + 10px, 26px)}
  .lp-pk-hero-text > * + *{margin-top:clamp(18px, 1.5vw, 40px)}
  .lp-pk-hero .btn--hero{font-size:clamp(15px, .55vw + 8px, 22px)}
  .lp-pk-more{font-size:clamp(15px, .45vw + 9px, 21px)}
  .lp-pk .lp-trust{font-size:clamp(12px, .25vw + 8.6px, 14.5px)}
  .lp-pk-hero-figure{max-width:none}
  .lp-pk-caption.lp-caption{font-size:clamp(13px, .38vw + 8px, 19px)}
}
/* Kolumna tekstu jest tu węższa niż w hero strony głównej (obraz zajmuje połowę), więc nagłówek o ton mniejszy. */
@media(min-width:1024px) and (orientation:landscape){.lp-pk .lp-h1{font-size:clamp(32px, 2.6vw + 2px, 74px)}}

/* Tła sekcji na przemian, jak na stronie głównej: miętowe z poświatą i białe. Cennik (.lp-pricing, miętowy), „O twórcy”
   (biały) i pytania (miętowe) mają tła strony głównej. */
.lp-pk-problem,.lp-pk-steps-sec{position:relative; overflow:hidden;
  background:radial-gradient(40% 36% at 86% 6%, rgba(16,185,129,.12), transparent 70%), radial-gradient(36% 34% at 6% 48%, rgba(110,231,183,.13), transparent 70%), radial-gradient(46% 36% at 60% 100%, rgba(16,185,129,.1), transparent 70%), var(--lp-bg)}
.lp-pk-offer,.lp-pk-proof-sec{position:relative; overflow:hidden;
  background:radial-gradient(38% 36% at 90% 14%, rgba(16,185,129,.1), transparent 70%), radial-gradient(36% 34% at 6% 86%, rgba(110,231,183,.12), transparent 70%), #fff}
/* Zdanie-most pod kaflami: przejście do oferty. */
.lp-pk-bridge{display:flex; align-items:center; justify-content:center; gap:.7em; width:fit-content; max-width:min(980px, 100%); margin-inline:auto; padding:.9em 1.5em; border-radius:1.2em; text-align:left;
  font-family:var(--lp-head); font-size:clamp(16px, .45vw + 11px, 23px); line-height:1.45; font-weight:700; color:var(--lp-g-800); text-wrap:balance;
  background:linear-gradient(135deg, rgba(236,253,245,.97), rgba(255,255,255,.85)); box-shadow:inset 0 0 0 1px rgba(16,185,129,.28), 0 16px 34px -24px rgba(15,122,67,.6)}
.lp-pk-bridge .ic{width:1.4em; height:1.4em; flex:none; padding:.25em; border-radius:50%; color:#fff; background:var(--lp-grad-ic); box-shadow:0 0 0 .2em rgba(16,185,129,.14)}

/* Zakres pakietu w dwóch kolumnach (uwaga właściciela z 28.09.2026): po lewej karta „W pakiecie” (mocna obwódka jak
   blok pakietu 799 zł, lista w jednej kolumnie), po prawej „Czego pakiet nie obejmuje” i pod nią „Co jest potrzebne”.
   Kolumny mają tę samą szerokość, górę i dół — gdy lewa karta jest wyższa, obie karty prawej kolumny rosną po równo
   (wolne miejsce nie zbiera się w jednej karcie); bez listy wyłączeń całą prawą kolumnę wypełnia „Co jest potrzebne”.
   Treść każdej karty zaczyna się w tej samej odległości od jej krawędzi (dopełnienie + obwódka), więc tytuły kart
   w obu kolumnach stoją na jednej wysokości. Poniżej 1024 px karty stoją jedna pod drugą. */
.lp-pk-stack{max-width:var(--lp-content); margin-inline:auto; font-size:clamp(15px, .3vw + 11px, 19px)}
.lp-pk-zakres{--pk-pad:clamp(22px, 2.2vw, 48px); --pk-gap:clamp(20px, 2vw, 40px); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--pk-gap);
  max-width:var(--lp-content); margin-inline:auto; font-size:clamp(15px, .3vw + 11px, 19px)}
@media(min-width:1024px){.lp-pk-zakres{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch}}
.lp-pk-zakres-side{display:flex; flex-direction:column; gap:var(--pk-gap); min-width:0}
.lp-pk-zakres-side > *{flex:1 0 auto}
.lp-pk-zakres .lp-list li + li{margin-top:.85em}
/* Gdy prawa kolumna jest wyższa, lista „W pakiecie” rozkłada pozycje równo na całą wysokość karty. */
.lp-pk-scope .lp-list{flex:1; display:flex; flex-direction:column; justify-content:space-between}
.lp-pk-scope{display:flex; flex-direction:column; padding:var(--pk-pad); border-radius:clamp(20px, 1.6vw, 32px); border:2px solid transparent;
  background:radial-gradient(70% 40% at 20% 0%, rgba(16,185,129,.12), transparent 70%) padding-box, linear-gradient(180deg, #fff, #f4fdf8) padding-box, var(--lp-grad-border-strong) border-box;
  box-shadow:0 0 0 .4em rgba(16,185,129,.09), 0 34px 80px -30px rgba(16,185,129,.5), 0 12px 32px -20px rgba(15,122,67,.35)}
.lp-pk-label{display:flex; align-items:center; gap:.6em; margin-bottom:1.1em; font-size:clamp(19px, .55vw + 12px, 27px); line-height:1.25; font-weight:800; letter-spacing:-.015em; color:var(--lp-ink)}
.lp-pk-label-ic{display:inline-flex; align-items:center; justify-content:center; flex:none; width:2em; height:2em; border-radius:.65em; color:#fff; background:var(--lp-grad-ic);
  box-shadow:0 0 0 .22em rgba(16,185,129,.12), 0 10px 22px -10px rgba(16,185,129,.85), inset 0 1px 0 rgba(255,255,255,.3)}
.lp-pk-label-ic .ic{width:1.1em; height:1.1em}
.lp-pk-box{padding:calc(var(--pk-pad) + 1px); border-radius:clamp(20px, 1.6vw, 32px); border:1px solid transparent}
.lp-pk-box--out{background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,250,251,.92)) padding-box, linear-gradient(160deg, rgba(244,63,94,.3), rgba(226,232,240,.6) 45%, rgba(255,255,255,.95) 75%, rgba(244,63,94,.16)) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 26px 56px -38px rgba(159,18,57,.32), 0 10px 26px -18px rgba(19,27,46,.12)}
.lp-pk-box--out .lp-pk-label-ic{color:#9f1239; background:linear-gradient(135deg, rgba(255,228,230,.95), rgba(255,241,242,.85)); box-shadow:inset 0 0 0 1px rgba(244,63,94,.3)}
.lp-pk-box--out .lp-list li{color:var(--lp-ink-soft)}
.lp-pk-box--out .lp-list .ic{color:#e11d48; filter:drop-shadow(0 0 .35em rgba(244,63,94,.3))}
.lp-pk-box--need{background:radial-gradient(80% 50% at 100% 0%, rgba(16,185,129,.1), transparent 70%) padding-box, linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,253,248,.92)) padding-box, var(--lp-grad-border) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 26px 56px -36px rgba(15,122,67,.45), 0 10px 26px -18px rgba(19,27,46,.12)}
.lp-pk-box--need p{font-size:max(16px, 1em); line-height:1.65; color:var(--lp-ink)}

/* Kroki jako koła z numerami (uwaga właściciela z 28.09.2026: „w okręgach, po kolei, równo”) — bez ramek kart. Koła
   mają jeden rozmiar i stoją na linii, która biegnie tylko od pierwszego do ostatniego koła (odcinki między środkami
   sąsiednich kół). W szerokiej obejmie (od 1000 px, czyli ekran od ok. 1140 px — kolumna kroku ma wtedy co najmniej
   ok. 180 px): rząd równych kolumn, koło na środku kolumny, pod nim tytuł i opis na środku; podsiatka trzech wierszy
   (koło, tytuł, opis) trzyma tytuły i opisy wszystkich kroków na jednej wysokości, także gdy tytuł ma 2–3 linie.
   W węższej: oś pionowa — koła po lewej na pionowej linii, tytuł na wysokości koła, opis pod nim, równe odstępy.
   Na osi pionowej pierwszy wiersz tytułu stoi na środku koła, a odstęp tytuł → opis jest ten sam w każdym kroku,
   także gdy tytuł ma dwie linie (dopełnienie tytułu zamiast samego wyśrodkowania w polu o wysokości koła). */
.lp-pk-stepper{container:lp-pk-kroki / inline-size; max-width:var(--lp-content); margin-inline:auto}
.lp-pk-steps{--kolo:clamp(52px, 2.2vw + 24px, 68px); --gap:clamp(18px, 1.8vw, 36px); --odstep:clamp(26px, 2.4vw, 40px);
  display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--odstep); max-width:46em; margin:0 auto; padding:0; list-style:none; font-size:clamp(16px, .3vw + 11.5px, 19px)}
.lp-pk-step{position:relative; display:grid; grid-template-columns:var(--kolo) minmax(0,1fr); column-gap:1.15em; align-items:start}
.lp-pk-step-num{position:relative; z-index:1; grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; width:var(--kolo); height:var(--kolo); border-radius:50%;
  font-family:var(--lp-head); font-size:calc(var(--kolo) * .4); line-height:1; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; background:var(--lp-grad-ic);
  box-shadow:0 0 0 5px #fff, 0 0 0 6px rgba(16,185,129,.3), 0 14px 28px -12px rgba(16,185,129,.9), inset 0 1px 0 rgba(255,255,255,.3)}
.lp-pk-step h3{grid-column:2; display:flex; align-items:center; min-height:var(--kolo); padding-block:calc((var(--kolo) - 1.3em) / 2); font-size:1.18em; line-height:1.3; font-weight:800; letter-spacing:-.01em; color:var(--lp-ink)}
.lp-pk-step p{grid-column:2; font-size:max(16px, .94em); line-height:1.6; color:var(--lp-ink-soft); text-wrap:pretty}
.lp-pk-step:not(:last-child)::before{content:''; position:absolute; z-index:0; left:calc(var(--kolo) / 2 - 1px); top:calc(var(--kolo) / 2); width:2px; height:calc(100% + var(--odstep)); border-radius:2px;
  background:linear-gradient(180deg, rgba(16,185,129,.75), rgba(110,231,183,.55)); box-shadow:0 0 10px rgba(16,185,129,.45)}
@container lp-pk-kroki (min-width:1000px){
  .lp-pk-steps{grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(3,auto); column-gap:var(--gap); row-gap:0; max-width:none}
  .lp-pk-steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lp-pk-step{grid-row:span 3; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr); column-gap:0; justify-items:center; text-align:center}
  .lp-pk-step-num{grid-row:auto}
  .lp-pk-step h3{grid-column:auto; display:block; min-height:0; padding-block:0; margin-top:1.1em}
  .lp-pk-step p{grid-column:auto; max-width:24em; margin-top:.55em}
  .lp-pk-step:not(:last-child)::before{left:50%; top:calc(var(--kolo) / 2 - 1px); width:calc(100% + var(--gap)); height:2px;
    background:linear-gradient(90deg, rgba(16,185,129,.75), rgba(110,231,183,.55))}
}

/* Dowód: przykładowy raport (pomiar), profil przed/po (249 zł), przykładowa strona (799 zł). Tekst dowodu jest większy
   niż zwykły tekst kart (uwaga właściciela z 28.09.2026 do kart „przed / po”: „większe teksty”) — ten sam rozmiar na
   trzech stronach. */
.lp-pk-proof-sec{--pk-proof:clamp(17px, .35vw + 12px, 20px)}
/* Przykładowy raport: dwie równe kolumny o tej samej górze i dole (od 1024 px). Zrzut raportu nie jest przycinany —
   gdy prawa kolumna jest wyższa, karta zrzutu rośnie, a podpis stoi na środku wolnego miejsca; gdy wyższa jest lewa,
   rośnie obraz prawej kolumny (kadr obrazu, bez zmiany proporcji treści). */
.lp-pk-proof{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px, 2.6vw, 64px); align-items:stretch; max-width:var(--lp-content); margin-inline:auto; font-size:clamp(15px, .3vw + 11px, 19px)}
@media(min-width:1024px){.lp-pk-proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-pk-shot{display:flex; flex-direction:column; padding:clamp(10px, .9vw, 18px); border-radius:clamp(20px, 1.6vw, 32px); border:1px solid transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,253,248,.92)) padding-box, var(--lp-grad-border) border-box;
  box-shadow:0 30px 70px -40px rgba(15,122,67,.5), 0 10px 26px -18px rgba(19,27,46,.14)}
.lp-pk-shot-img{flex:none; overflow:hidden; border-radius:clamp(12px, 1vw, 20px); box-shadow:0 0 0 1px rgba(190,202,189,.55)}
.lp-pk-shot-img img{width:100%}
.lp-pk-shot figcaption{flex:1; display:flex; align-items:center; gap:.6em; padding:.95em .5em .35em; font-size:var(--pk-proof); line-height:1.55; color:var(--lp-ink-soft)}
.lp-pk-shot figcaption .ic{width:1.3em; height:1.3em; flex:none; align-self:flex-start; margin-top:.1em; color:var(--lp-primary)}
.lp-pk-proof-side{display:flex; flex-direction:column; gap:clamp(20px, 1.8vw, 40px)}
.lp-pk-proof-img{flex:1 0 auto; display:flex; overflow:hidden; border-radius:1.1em; background:#eef3f6; box-shadow:0 0 0 1px rgba(16,185,129,.18), 0 22px 50px -26px rgba(16,185,129,.6)}
.lp-pk-proof-img img{width:100%; aspect-ratio:1376/768; object-fit:cover}
.lp-pk-points li + li{margin-top:1em}
.lp-pk-points{font-size:var(--pk-proof); line-height:1.55}
/* Karty „przed / po”: wiersz tytułu i większy tekst; od 1024 px obie karty w jednej podsiatce wierszy (obraz,
   plakietka, tytuł, tekst, a przy bogatszych polach także lista) — wiersze obu kart stoją na jednej wysokości,
   a karty mają tę samą wysokość. */
.lp-pk .lp-side-img{aspect-ratio:2/1}
.lp-pk .lp-side-body{gap:0; padding:1.5em 1.9em 2em}
.lp-pk .lp-pk-side-title{margin-top:.75em; font-size:clamp(23px, .8vw + 14px, 32px); line-height:1.2; font-weight:800; letter-spacing:-.02em; color:var(--lp-ink)}
.lp-pk-side-text{margin-top:.55em; font-size:clamp(18px, .45vw + 12px, 22px); line-height:1.6; color:var(--lp-ink-soft)}
.lp-pk-side-text strong{color:var(--lp-ink)}
.lp-pk-side-text--say{padding-bottom:1em; border-bottom:1px solid rgba(190,202,189,.4); font-size:var(--pk-proof)}
.lp-pk .lp-versus .lp-list{margin-top:1.1em; font-size:var(--pk-proof)}
.lp-pk .lp-versus .lp-list li + li{margin-top:.75em}
@media(min-width:1024px){
  .lp-pk .lp-versus{grid-template-rows:auto auto auto 1fr; row-gap:0}
  .lp-pk .lp-versus.lp-pk-versus--rich{grid-template-rows:auto auto auto auto 1fr}
  .lp-pk .lp-side{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 4}
  .lp-pk .lp-side-img{align-self:stretch}
  .lp-pk .lp-side-body{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 3; align-items:start}
  .lp-pk .lp-pk-versus--rich .lp-side{grid-row:span 5}
  .lp-pk .lp-pk-versus--rich .lp-side-body{grid-row:span 4}
  /* Pozycje list obu kart we wspólnych wierszach (liczba pozycji w --pk-items — z klasy lp-pk-versus--n2…n5, którą
     wpisuje scripts/landing-pages.mjs): gdy pozycja łamie się tylko w jednej karcie, następne i tak stoją na tej samej
     wysokości co w drugiej. */
  @supports(grid-template-rows:subgrid){
    .lp-pk-versus--n2{--pk-items:2} .lp-pk-versus--n3{--pk-items:3} .lp-pk-versus--n4{--pk-items:4} .lp-pk-versus--n5{--pk-items:5}
    .lp-pk .lp-versus.lp-pk-versus--rich{grid-template-rows:auto auto auto auto; grid-auto-rows:auto}
    .lp-pk .lp-pk-versus--rich .lp-side{grid-row:span calc(4 + var(--pk-items, 4))}
    .lp-pk .lp-pk-versus--rich .lp-side-body{grid-row:span calc(3 + var(--pk-items, 4))}
    .lp-pk .lp-pk-versus--rich .lp-list{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span var(--pk-items, 4); row-gap:.75em; align-items:start}
    .lp-pk .lp-pk-versus--rich .lp-list li + li{margin-top:0}
  }
}
.lp-pk-proof-foot{display:flex; flex-direction:column; align-items:center; gap:1em}
.lp-pk-proof-foot .lp-note{max-width:min(980px, 100%); font-size:var(--pk-proof); text-wrap:balance}
.lp-pk-caption-note{max-width:70ch; margin-inline:auto; text-align:center; text-wrap:balance; font-size:max(14px, .82em); line-height:1.55; color:var(--lp-outline)}
.lp-pk-site .lp-pk-caption-note{margin-inline:0; text-align:left}
.lp-pk-site .lp-aiblock-copy{gap:1.3em}
.lp-pk-showcase{align-self:flex-start}
@media(max-width:639px){.lp-pk-showcase{align-self:stretch}}

/* Cennik: ten sam co na stronie głównej (polecenie właściciela z 28.09.2026: jedna sekcja, wyróżniony pakiet strony).
   Od 1280 px trzy karty w kolejności strony głównej (14 → 799 → 249 zł); w jednej kolumnie karta pakietu tej strony
   stoi pierwsza. */
@media(max-width:1279px){.lp-pk .lp-plans > .lp-plan--featured{order:-1}}

/* O twórcy: dłuższe przywitanie z tekstu strony pakietu. */
.lp-pk .lp-owner-hello{font-size:clamp(22px, 1vw + 11px, 38px); text-wrap:balance}

/* Pytania: przy nieparzystej liczbie ostatnia karta zajmuje cały rząd — bez jednej karty samej w pół rzędu. */
@media(min-width:900px){.lp-pk .lp-faq-item:last-child:nth-child(odd){grid-column:1 / -1}}
.lp-pk .lp-closer .lp-plan-state{color:rgba(255,255,255,.86)}