@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Belleza";font-weight:400;font-display:swap;src:url(fonts/Belleza-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Belleza";font-weight:400;font-display:swap;src:url(fonts/Belleza-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
  --navy:#0A1F44; --black:#0B0B0D; --paper:#F5F7FA; --white:#FFFFFF;
  --orange:#FF4D00; --orange-press:#E04400; --tint-orange:#FFE9DF;
  --gray-1:#D9DEE6; --gray-2:#8A94A6; --gray-3:#3D4759;
  --sans:"IBM Plex Sans",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  /* Rytm odstępów (16.10.2026): --sec = pół przerwy między sekcjami, --head-gap = nagłówek sekcji → treść. Telefon / od 768 px. */
  --sec:48px; --head-gap:32px;
}
@media (min-width:768px) { :root { --sec:64px; --head-gap:48px } }
*,*::before,*::after { box-sizing:border-box; border-radius:0 }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px }
body { margin:0; background:var(--paper); color:var(--black); font:400 16px/1.5 var(--sans); caret-color:var(--orange); font-variant-numeric:tabular-nums }
::selection { background:var(--navy); color:var(--paper) }
a { color:inherit; text-underline-offset:8px; text-decoration-thickness:1px }
:focus-visible { outline:1px solid var(--orange); outline-offset:8px }
h1,h2,h3 { margin:0; font-weight:600; text-wrap:balance }
h2 { font-size:32px; line-height:1.25; letter-spacing:-.01em; color:var(--navy) }
h3 { font-size:24px; line-height:1.25; color:var(--navy) }
p { margin:0; text-wrap:pretty }
strong { font-weight:600 }
img { display:block; max-width:100%; height:auto }
.skip { position:absolute; left:16px; top:-80px; z-index:10; padding:8px 16px; background:var(--orange); color:var(--black); text-decoration:none }
.skip:focus { top:16px }
.wrap { max-width:1200px; margin:0 auto; padding:0 16px }
.mono { font-family:var(--mono) }
.cap { font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase }
.sec { padding:var(--sec) 0 }
.sec h2 { margin-bottom:var(--head-gap); max-width:24ch }
.prose { max-width:65ch }
.prose p+p { margin-top:16px }
.btn { display:inline-flex; align-items:center; min-height:48px; max-width:100%; padding:8px 24px; border:1px solid transparent; font:600 16px/1.25 var(--sans); text-decoration:none; transition:background-color 140ms ease-out,color 140ms ease-out,border-color 140ms ease-out }
.btn-accent { min-height:56px; font-size:20px; letter-spacing:.01em; background:var(--orange); color:var(--white) }
.btn-accent:hover,.btn-accent:active { background:var(--orange-press); color:var(--white) }
.btn-ghost { min-height:40px; padding:8px 16px; color:var(--paper); border-color:var(--gray-3); font-size:14px; white-space:nowrap }
.btn-ghost:hover,.btn-ghost:active { border-color:var(--paper) }
.btn-ghost.btn-orange { background:var(--orange); border-color:var(--orange); color:var(--white) }
.btn-ghost.btn-orange:hover,.btn-ghost.btn-orange:active { background:var(--orange-press); border-color:var(--orange-press) }

/* Wspólny nagłówek i zachowana animacja otwarcia. */
.hero,.site-header { background:var(--navy); color:var(--paper) }
.site-header { position:sticky; top:0; z-index:50 }
.bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; border-bottom:1px solid var(--gray-3) }
.bar>a:first-child { display:block; min-width:0; max-width:192px; padding:12px 0 } /* pole kliknięcia logo ~49 px na telefonie (było 25) */
.logo { display:block; height:auto; width:228px; max-width:100% }
.bar .btn-ghost { display:inline-flex; flex-shrink:0 }
.hero .head { padding:48px 0 64px }
.hero h1 { font-size:40px; line-height:1.02; letter-spacing:-.03em; color:var(--paper); max-width:16ch; overflow-wrap:anywhere }
.hero .promise { margin-top:24px; font-size:20px; line-height:1.4; color:var(--paper); max-width:40ch }
.hero .head .btn { margin-top:32px }
.hero .slots,.contact .slots { margin-top:16px; font-size:14px; color:var(--gray-2) }
.slots .fn { color:var(--orange); text-decoration:none; padding:0 4px }
.slots .fn:hover,.slots .fn:focus-visible { text-decoration:underline }
.hero { position:relative; overflow:hidden }
.hero>.wrap { position:relative; z-index:1 }
.hero-usp { position:relative; z-index:1; background:var(--navy) }
.hero-usp ul { list-style:none; display:grid; gap:24px; padding-top:24px; padding-bottom:40px }
.hero-usp ul::before { content:""; position:absolute; left:0; right:0; top:0; border-top:1px solid var(--gray-3) }
.hero-usp li { display:grid; gap:8px; align-content:start; min-width:0 }
.usp-figure { font:600 40px/1.1 var(--mono); letter-spacing:-.02em; color:var(--paper) }
.usp-label { font-size:16px; line-height:1.4; color:var(--gray-1); max-width:28ch }
.hero .bgx { position:absolute; inset:0; margin:0 auto; max-width:1200px; z-index:0; pointer-events:none; opacity:.9 }
.hero .bgx .art { position:absolute; inset:0; width:100%; height:100% }
.hero .bgx .lnp { fill:none; stroke:var(--orange); stroke-width:1 }
.hero .bgx .b { fill:none; stroke:var(--gray-3); stroke-width:1 }
.hero .bgx .ob { fill:none; stroke:var(--orange); stroke-width:1 }
.hero .bgx .grid path { stroke:var(--gray-3); stroke-width:1 }
.hero .bgx text { font:500 14px var(--mono); fill:var(--gray-2); letter-spacing:.08em }
@keyframes hero-bar { from { transform:scaleY(0) } }
@keyframes hero-line { from { stroke-dashoffset:1 } }
@keyframes hero-fade { from { opacity:0 } }
@media (prefers-reduced-motion:no-preference) {
  .hero .bgx .b,.hero .bgx .ob { transform-box:fill-box; transform-origin:50% 100%; animation:hero-bar 1120ms cubic-bezier(.16,1,.3,1) calc(var(--d) * 96ms) both }
  .hero .bgx .lnp { stroke-dasharray:1; animation:hero-line 2080ms cubic-bezier(.65,0,.35,1) 400ms both }
}

/* Wyniki: trzy otwarte wiersze, jeden akcent, cała historia pod kliknięciem. */
#dowod { padding-top:calc(var(--sec) * 1.5); padding-bottom:calc(var(--sec) - 16px) } /* 16 px zapasu na pasek przewijania karuzeli */
.proof-head { max-width:65ch; color:var(--gray-3); margin:-16px 0 32px }
h2.hx { margin:0 auto; max-width:36ch; text-align:center; font-size:32px; line-height:1.1; letter-spacing:-.025em }
#dlaczego { margin-bottom:var(--head-gap) }
h2.hx .mark { position:relative; white-space:nowrap; isolation:isolate }
h2.hx .hand { display:inline-block; width:.95em; height:.95em; margin-left:.2em; vertical-align:-.15em; fill:none; stroke:var(--orange); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round }
.fit-sec h2.hx { margin-bottom:var(--head-gap) }
h2.hx .mark::after { content:""; position:absolute; z-index:-1; left:-.06em; right:-.06em; bottom:.04em; height:.48em; background:rgba(255,77,0,.32); transform-origin:left }
h2.hx .grow { display:inline-flex; align-items:flex-end; gap:.06em; height:.7em; margin:0 .12em; vertical-align:baseline }
h2.hx .grow i { display:block; width:.12em; background:var(--orange); transform-origin:bottom }
h2.hx .grow i:nth-child(1) { height:30% }
h2.hx .grow i:nth-child(2) { height:55% }
h2.hx .grow i:nth-child(3) { height:100% }
h2.hx.anim-wait .mark::after { transform:scaleX(0) }
h2.hx.anim-wait .grow i { transform:scaleY(0) }
h2.hx.in-view .mark::after { animation:mark-draw 900ms cubic-bezier(.16,1,.3,1) 300ms both }
h2.hx.in-view .grow i { animation:bar-up 700ms cubic-bezier(.16,1,.3,1) both }
h2.hx.in-view .grow i:nth-child(2) { animation-delay:120ms }
h2.hx.in-view .grow i:nth-child(3) { animation-delay:240ms }
@keyframes mark-draw { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes bar-up { from { transform:scaleY(0) } to { transform:scaleY(1) } }
#dowod .proof-head { margin:24px auto var(--head-gap); max-width:48ch; text-align:center; font-size:18px; line-height:1.5 }
.client { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--navy) }
.client img { width:auto; height:40px; flex-shrink:0 }
.client-dc { flex-wrap:nowrap; gap:8px; white-space:nowrap }
.client-dc img { height:32px }
.result-natureum .client span { font-family:"Belleza",var(--sans); font-weight:400; font-size:24px; letter-spacing:.02em }
.pc-head { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; align-items:start } /* tytuł karty nad logo klienta (17.10.2026: obok siebie nachodziły na telefonie) */
.pc-head .client { justify-content:flex-start }
.pc-sub { font:600 20px/1.25 var(--sans); color:var(--navy) }
.pc-rating { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:-8px; font-size:14px; line-height:1.4; color:var(--gray-3) }
.pc-rating .stars { color:var(--orange); letter-spacing:2px; font-size:16px }
@media (max-width:767px) { .pc-rating .sep { display:none } .pc-rating .pc-count { flex-basis:100% } } /* telefon: gwiazdki i ocena, liczba opinii w nowej linii (17.10.2026) */
.client .anon { padding:8px; border:1px solid var(--gray-1); color:var(--gray-3) }
.src { font-size:14px; color:var(--gray-3); max-width:75ch }
.results-ledger { display:grid; grid-auto-flow:column; grid-auto-columns:min(85%,360px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding:0 0 16px; scrollbar-width:thin; scrollbar-color:var(--navy) var(--gray-1) }
.results-ledger:focus-visible { outline:2px solid var(--orange); outline-offset:4px }
.result-row { scroll-snap-align:start; display:flex; flex-direction:column; min-width:0; background:var(--white); border:1px solid var(--gray-1); color:var(--navy); text-decoration:none; transition:border-color .2s }
.result-row:hover,.result-row:focus-visible { border-color:var(--navy) }
.pc-media { position:relative; aspect-ratio:800/445; overflow:hidden; border-bottom:1px solid var(--gray-1); background:var(--paper) }
.pc-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:left top }
.pc-ph { background:var(--navy) }
.pc-ph svg { position:absolute; inset:0; width:100%; height:100% }
.pc-ph rect { fill:none; stroke:var(--gray-3); stroke-width:1 }
.pc-ph .g { stroke:var(--gray-3); stroke-width:1; opacity:.5 }
.pc-ph .l { fill:none; stroke:var(--orange); stroke-width:1.5 }
.pc-badge { position:absolute; left:16px; top:16px; padding:4px 8px; background:var(--tint-orange); font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gray-3) }
.pc-body { display:flex; flex-direction:column; gap:16px; flex:1; padding:24px }
.pc-cat { font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gray-3) }
.result-row .client { font:600 20px/1.25 var(--sans); letter-spacing:0; text-transform:none }
.result-figures { list-style:none; margin:0; padding:0 }
.result-figures li { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; align-items:center; padding:12px 0; border-top:1px solid var(--gray-1) }
.result-figures li:first-child { padding-top:0; border-top:0 }
.result-figure { font:600 28px/1.1 var(--mono); letter-spacing:-.02em; color:var(--navy); white-space:nowrap }
.result-figures li:first-child .result-figure { font-size:40px; line-height:1.1; letter-spacing:-.02em; color:var(--orange); white-space:nowrap }
.fig-label { font-size:14px; line-height:1.4; color:var(--gray-3) }
.result-link { margin-top:auto; display:flex; align-items:center; justify-content:center; height:48px; background:var(--orange); color:var(--white); font:600 16px/1 var(--sans); white-space:nowrap }
.result-row:hover .result-link,.result-row:focus-visible .result-link { background:var(--orange-press) }
.carousel-hint { margin-top:8px; font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gray-3) }
.carousel { position:relative }
.carousel-nav { position:absolute; inset:0 0 16px; z-index:2; pointer-events:none }
.carousel-nav .cn-btn { position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto }
.carousel-nav .cn-btn[data-dir="-1"] { left:-16px }
.carousel-nav .cn-btn[data-dir="1"] { right:-16px }
.carousel-nav[hidden] { display:none }
.cn-btn { width:48px; height:48px; display:grid; place-items:center; background:var(--white); border:1px solid var(--navy); border-radius:0; color:var(--navy); font:500 20px/1 var(--mono); cursor:pointer; transition:background .2s,color .2s,opacity .2s }
.cn-btn:hover:not(:disabled),.cn-btn:focus-visible { background:var(--navy); color:var(--paper) }
.cn-btn:focus-visible { outline:2px solid var(--orange); outline-offset:2px }
.cn-btn:disabled { opacity:0; pointer-events:none }

/* List: podpis należy do fotografii, nie jest kolejnym akcentem. */
.letter { display:grid; gap:32px }
.letter>* { min-width:0 }
.photo { margin:0; max-width:360px }
.photo img { width:100%; aspect-ratio:4/5; object-fit:cover }
/* Zrzut opinii klienta: autentyk, bez filtra i bez kadrowania. */
.review-shot { margin:24px 0; max-width:480px }
.review-shot img { display:block; width:100%; height:auto; border:1px solid var(--gray-1) }
.review-shot figcaption { margin-top:8px; font:400 12px/1.5 var(--mono); color:var(--gray-3) }
.letter .hello { font-size:24px; font-weight:600; color:var(--navy); margin-bottom:16px }
.letter .prose { font-size:17px; line-height:1.6; text-wrap:pretty }
.letter .prose p+p { margin-top:24px }
.letter .lead { font-size:20px; line-height:1.4; font-weight:600; color:var(--navy) }
.letter .prose strong { font-weight:600; color:var(--navy) }
.letter .pains-intro { margin-top:32px }
.letter .prose .pains { margin:16px 0 32px; padding:0; list-style:none; border-top:1px solid var(--gray-1) }
.letter .prose .pains li { position:relative; margin:0; padding:10px 0 10px 24px; border-bottom:1px solid var(--gray-1) }
.letter .prose .pains li::before { content:""; position:absolute; left:4px; top:20px; width:8px; height:8px; background:var(--orange) }
.sign { margin-top:24px; font-weight:600; color:var(--navy) }
.sign span { display:block; margin-top:8px; color:var(--gray-3) }
.sign:has(.sig) { width:220px; margin-left:auto }
.sign .regards { margin:0 0 4px; text-align:left; font-weight:400; color:var(--black) }
.sign .sig { width:220px; aspect-ratio:640/258; margin:0; background:var(--navy); -webkit-mask:url(podpis-amadeusz.png) left center/contain no-repeat; mask:url(podpis-amadeusz.png) left center/contain no-repeat }

/* Jedyna tabela porównawcza na stronie głównej: dwa światy obok siebie (wariant zatwierdzony 14.10.2026). */
.compare { display:grid; grid-template-columns:150px 1fr 1fr; width:100%; border:0; background:none }
.compare thead,.compare tbody,.compare tr { display:contents }
.compare th,.compare td { border:0; text-align:left; padding:20px 24px; overflow-wrap:normal }
.compare thead th:first-child { visibility:hidden }
.compare thead th { font:600 20px/1.25 var(--sans); letter-spacing:0; text-transform:none; padding:28px 24px }
.compare thead th:nth-child(2) { background:var(--white); color:var(--gray-3); border:1px solid var(--gray-1); border-bottom:0 }
.compare thead th.own { background:var(--navy); color:var(--white) }
.compare tbody th { font:600 16px/1.5 var(--sans); color:var(--navy); padding-left:0; border-top:1px solid var(--gray-1) }
/* ikona i nazwa w jednej linii z krzyżykiem i nagłówkiem komórek obok (28 px, ta sama góra co .ic) */
.compare tbody th { display:flex; flex-direction:row; align-items:center; align-self:start; gap:10px; line-height:28px; padding-top:21px; white-space:nowrap }
.compare .rh { flex:none; width:24px; height:24px; fill:none; stroke:var(--navy); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round }
.compare td { display:flex; gap:12px; align-items:flex-start }
.compare td.them { background:var(--white); color:var(--gray-3); border:1px solid var(--gray-1); border-bottom:0 }
.compare td.own { background:var(--navy); color:var(--white); font-weight:600; border-top:1px solid rgba(255,255,255,.14) }
.compare tbody tr:last-child td.them { border-bottom:1px solid var(--gray-1) }
.compare .ic { flex:none; width:22px; height:22px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:square }
.compare td.own .ic { width:28px; height:28px; padding:3px; color:#22C55E; stroke-width:3 }
/* kolory znaczeniowe znaków stanu: W-Commerce/DESIGN.md, „Semantic status colours” (14.10.2026) */
.compare td.them .ic { width:28px; height:28px; padding:3px; color:#D92D20; stroke-width:3 }
.compare .hl { display:block; font:600 20px/1.25 var(--sans); letter-spacing:-.01em; margin-bottom:6px }
.compare td.them .hl { color:var(--gray-3) }
.compare td.own .hl { color:var(--white) }
.compare td.own > span { font-weight:400; color:rgba(255,255,255,.8) }

/* Kwalifikacja (17.10.2026, jego słowa): „Tak, jeśli” jasna z polami do zaznaczenia przez klienta - zaznaczenie rysuje zielony ptaszek jak w tabeli porównania; „Czego nie robimy” jako strefa no-go - jasna czerwień, czerwona ramka i ikony (kreskowanie zdjęte: nieczytelne). Świadome odstępstwo od „Semantic status colours” (W-Commerce/DESIGN.md: czerwień tylko w znaku X) - LOG 17.10.2026. */
.fit { display:grid; grid-template-columns:minmax(0,1fr); gap:0 }
.fit>div { min-width:0 }
.fit h3 { font:600 20px/1.25 var(--sans); margin:0; padding:28px 24px }
.fit ul { list-style:none; margin:0; padding:0 }
.fit li { display:flex; gap:12px; align-items:flex-start; padding:20px 24px; font:600 18px/1.35 var(--sans); letter-spacing:-.01em }
.fit li > span { padding-top:2px }
.fit .ic { flex:none; width:28px; height:28px; padding:3px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:square }
.fit .yes { background:var(--white); border:1px solid var(--gray-1) }
.fit .yes h3 { color:var(--navy) }
.fit .yes li { color:var(--navy); border-top:1px solid var(--gray-1); padding:0 }
.fit .yes label { display:flex; flex:1; gap:16px; align-items:flex-start; padding:20px 24px; cursor:pointer }
.fit .yes label > span { padding-top:1px }
.fit .chk { appearance:none; position:relative; flex:none; width:24px; height:24px; margin:1px 0 0; border:1px solid var(--navy); background:var(--white); cursor:pointer; transition:border-color 140ms ease-out }
.fit .chk::after { content:""; position:absolute; inset:-3px; background:#22C55E; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; clip-path:inset(0 100% 0 0); transition:clip-path 320ms cubic-bezier(.16,1,.3,1) }
.fit .chk:checked { border-color:#22C55E }
.fit .chk:checked::after { clip-path:inset(0 0 0 0) }
.fit .chk:focus-visible { outline-offset:2px }
.fit .yes label:hover .chk:not(:checked) { background-color:var(--paper) }
.fit .no { --red:#C8291D; /* o stopień ciemniej niż #D92D20: nagłówek 20 px na #FEF3F2 = 5,1:1 (było 4,4) */ background:#FEF3F2; border:1px solid var(--red) }
.fit .no h3 { color:var(--red); border-bottom:1px solid var(--red) }
.fit .no li { border-top:1px solid rgba(217,45,32,.25); font:400 16px/1.5 var(--sans); letter-spacing:0; color:var(--gray-3) }
.fit .no li:first-child { border-top:0 }
.fit .no .ic { color:var(--red); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round }
.fit .no strong { display:block; font:600 18px/1.35 var(--sans); letter-spacing:-.01em; color:var(--navy); margin-bottom:6px }
@media (prefers-reduced-motion:reduce) { .fit .chk::after { transition:none } }

/* Pięć kanałów na pełnym granatowym pasie. */
.channels-sec { background:var(--paper); color:var(--black) } /* jasne tło od 16.10.2026: granat sugerował koniec strony (jego słowa) */
.channels-sec h2 { color:var(--navy) }
.lede { max-width:60ch; color:var(--gray-3); margin:-16px 0 32px }
.channels-sec .lede { color:var(--gray-3); margin:24px auto var(--head-gap); max-width:720px; text-align:center; font-size:18px; line-height:1.5 }
.channels { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:32px }
.channels li { min-width:0 }
.channels h3 { font-size:20px; color:var(--navy) }
.channels .heart h3 { color:var(--orange) }
.channels .cap { display:block; margin:8px 0 16px; color:var(--gray-3) }
.channels p { font-size:14px; color:var(--black) }
.channels .ci { display:block; width:32px; height:32px; margin-bottom:16px; fill:none; stroke:var(--gray-3); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.channels .heart .ci { stroke:var(--orange) }
/* Znak zespołu w środku okręgu, pięć kanałów na obwodzie (live 16.10.2026, wariant 2); na wąskim ekranie znak u góry i lista */
/* środek okręgu: ta sama karta co kanały (biała, 1px), ramka granatowa jako jedyne wyróżnienie; logo w wersji ciemnej */
.channels .hub { display:flex; flex-direction:column; align-items:flex-start; gap:16px; background:var(--white); border:1px solid var(--navy); padding:24px }
.channels .word { display:block; width:184px; max-width:100%; height:auto }
.channels .hub .word polyline:first-of-type { stroke:var(--navy) }
.channels .hub .word text { fill:var(--navy) }
.channels .hub-usp { font-size:14px; color:var(--black) }
.channels .team { display:block; width:auto; height:32px; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.channels .team .side { stroke:var(--gray-3) }
.channels .team .lead { stroke:var(--orange); fill:var(--white) }
.channels .ring { display:none }
.channels li:not(.hub):not(.ring) { padding-top:24px; border-top:1px solid var(--gray-1) }
.channels li.heart { border-top-color:var(--orange) }

/* Kroki w rzędzie na linii ze znacznikami (live 16.10.2026, wariant 2 wg procesu adwise.pl); na telefonie pionowo. */
.steps { list-style:none; margin:var(--head-gap) 0 0; padding:0; counter-reset:s; display:grid; gap:40px }
.steps li { counter-increment:s; position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:24px; min-width:0 }
.steps li::before { content:"0" counter(s); grid-row:1 / span 3; font:600 40px/1.1 var(--mono); color:var(--navy) }
.steps li > * { grid-column:2; min-width:0; max-width:65ch }
.steps h3 { font-size:20px; margin-bottom:8px }
.steps p { color:var(--gray-3) }
@media (min-width:768px) {
  .steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px }
  .steps li { display:block; padding-top:0; background:linear-gradient(var(--navy),var(--navy)) no-repeat 0 64px / 9px 9px }
  .steps li::before { display:block; margin-bottom:56px }
  .steps li::after { content:""; position:absolute; left:0; right:-32px; top:68px; border-top:1px solid var(--navy) }
  .steps li:last-child::after { right:0 }
}

/* Zamknięcie i stopka. */
.contact { background:var(--navy); color:var(--paper); padding:calc(var(--sec) * 1.5) 0 }
.contact h2 { color:var(--paper); font-size:32px; line-height:1.15; letter-spacing:-.02em; max-width:24ch }
.contact .lead { margin-top:16px; color:var(--paper); max-width:50ch }
.contact .btn { margin-top:32px }
/* Kontakt: tekst + biała karta z długością rozmowy (live 16.10.2026, wg adwise.pl); bez telefonu. */
.contact .kc { display:grid; grid-template-columns:minmax(0,1fr); gap:48px }
.contact .kc-free { margin-top:24px; color:var(--paper); font-weight:600; max-width:50ch }
.contact .kc-card { background:var(--white); color:var(--black); padding:32px 24px; border:1px solid var(--gray-1); min-width:0 }
.contact .kc-card > .cap { color:var(--gray-3) }
.contact .kc-time { margin-top:8px; font:600 56px/1 var(--mono); color:var(--navy) }
.contact .kc-next { margin-top:16px; color:var(--gray-3); max-width:40ch }
.contact .kc-card .btn { margin-top:24px; width:100%; justify-content:center; padding-inline:16px }
.contact .kc-card .slots { color:var(--gray-3) }
@media (min-width:768px) {
  .contact .kc { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center }
}
@media (min-width:1024px) {
  .contact .kc { grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:96px }
  .contact .kc-card { padding:40px }
}
/* Stopka: dane firmy po lewej, Google Partner po prawej, polityka prywatności osobną stroną (16.10.2026). */
footer { background:var(--navy); color:var(--gray-2); font-size:14px; border-top:1px solid var(--gray-3); padding:40px 0 32px }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:24px 48px }
footer .wrap>* { min-width:0 }
footer .logo { width:184px }
footer address { font-style:normal; line-height:1.6 }
footer .gp-badge { white-space:nowrap; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px; background:var(--white); color:var(--black); font:500 14px/1 var(--sans); text-decoration:none }
footer .gp-g { width:18px; height:18px; flex:none }
footer .foot-badges { display:flex; flex-direction:column; align-items:flex-start; gap:8px } /* odznaki partnerów jedna pod drugą (17.10.2026) */
footer .foot-claim { max-width:24ch; color:var(--gray-1); font-size:16px; line-height:1.4 }
footer .gp-ext { font-size:12px; color:var(--gray-3) }
footer .foot-grid { flex:1; display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--gray-3); border:1px solid var(--gray-3) } /* siatka 1 px jak w DESIGN.md (live 17.10.2026, wariant 1) */
footer .foot-grid > * { background:var(--navy); padding:24px; min-width:0 }
footer .foot-brand { display:flex; flex-direction:column; align-items:flex-start; gap:16px }
footer .foot-h { margin-bottom:12px; font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gray-2) }
footer .foot-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; line-height:1.6 }
footer .foot-list a { color:var(--paper); overflow-wrap:anywhere }
footer .foot-legal { flex-basis:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 32px; margin-top:32px; padding-top:16px; border-top:1px solid var(--gray-3); font:400 12px/1.5 var(--mono) } /* copyright z lewej, polityka prywatności z prawej (17.10.2026) */
footer .foot-legal a { color:var(--gray-2); display:inline-block; padding:12px 0; margin:-12px 0 } /* pole kliknięcia 42 px bez zmiany wyglądu */

/* Wspólna opowieść o wynikach. */
.case-intro { padding:var(--head-gap) 0 var(--sec) }
.back-link { display:inline-block; padding:8px 0; margin:-8px 0 calc(var(--head-gap) - 8px); /* pole kliknięcia 37 px, wygląd bez zmian */ font:500 14px/1.5 var(--mono); color:var(--navy) }
.case-intro h1 { max-width:24ch; font-size:32px; line-height:1.15; letter-spacing:-.02em; color:var(--navy); overflow-wrap:anywhere }
.case-meta { margin-top:24px; max-width:88ch; font:400 14px/1.5 var(--mono); color:var(--gray-3) }
.case-deck { margin-top:32px; max-width:65ch; font-size:20px }
.case-intro .btn { margin-top:32px } /* zaślepka wyników (17.10.2026) */
.story { max-width:65ch; padding-bottom:var(--sec) }
.story h2 { margin:48px 0 24px; font-size:24px }
.story h2:first-child { margin-top:0; font-size:32px }
.story p+p { margin-top:24px }
.story ul,.story ol { margin:24px 0; padding-left:24px }
.story li+li { margin-top:16px }
.story li::marker { font-family:var(--mono); color:var(--navy) }
.story .story-source { margin-top:32px; font-size:14px; color:var(--gray-3) }
.story-table { width:100%; table-layout:fixed; border-collapse:collapse; margin:32px 0; font:400 14px/1.5 var(--mono) }
.story-table th,.story-table td { border:1px solid var(--gray-1); padding:16px; text-align:left; vertical-align:top; overflow-wrap:anywhere }
.story-table th { font-weight:500; color:var(--navy) }
.case-results { padding:0 0 calc(var(--sec) * 1.5) }
.case-results h2 { margin-bottom:var(--head-gap) }
.case-metrics { margin:0 }
.case-metric { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:32px 0; border-top:1px solid var(--gray-1) }
.case-metric:last-child { border-bottom:1px solid var(--gray-1) }
.case-metric dt { color:var(--navy); font-size:20px }
.case-metric dd { margin:0; min-width:0 }
.case-metric .metric-value { font:600 40px/1.1 var(--mono); color:var(--navy) }
.case-metric .src { grid-column:1/-1 }
.case-close h2 { max-width:32ch }

@media (max-width:767px) {
  .result-figures li { grid-template-columns:minmax(0,1fr); row-gap:4px }
  .hero .bgx { opacity:.45 }
  .bar { gap:8px }
  .bar>a:first-child { max-width:176px }
  .bar .btn-ghost { padding:8px; font-size:14px }
  .compare { grid-template-columns:1fr 1fr }
  .compare thead th:first-child { display:none }
  .compare thead th { font-size:15px; padding:16px 12px }
  .compare tbody th { grid-column:1 / -1; padding:20px 0 8px; font:500 12px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gray-3) }
  .compare tbody th { flex-direction:row; align-items:center; gap:8px }
  .compare .rh { width:18px; height:18px; stroke:var(--gray-3) }
  .compare td { padding:14px 12px; font-size:14px; flex-direction:column; gap:8px }
  .compare .hl { font-size:16px }
  .story-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  .story-table,.story-table tbody { display:block }
  .story-table tr { display:block; border-top:1px solid var(--gray-1); padding:16px 0 }
  .story-table tr:last-child { border-bottom:1px solid var(--gray-1) }
  .story-table td { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; border:0; padding:8px 0 }
  .story-table td::before { content:attr(data-label); color:var(--gray-3) }
}
@media (min-width:768px) {
  footer .foot-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .wrap { padding:0 48px }
  .bar { min-height:96px }
  .bar>a:first-child { max-width:272px }
  .bar .logo { width:272px }
  .hero .head { padding:64px 0 48px }
  .hero h1 { font-size:48px }
  .letter { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start }
  .letter .photo { position:sticky; top:96px }
  .fit { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,auto) }
  /* symetria (17.10.2026, jego słowa): nagłówki i cztery wiersze obu kolumn na wspólnych liniach siatki */
  .fit>div { display:grid; grid-row:span 5; grid-template-rows:subgrid }
  .fit ul { display:contents }
  .hero-usp ul { grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px }
  .results-ledger { grid-auto-columns:calc((100% - 16px) / 1.6) }
  .carousel-hint { display:none }
  .carousel-nav .cn-btn[data-dir="-1"] { left:-24px }
  .carousel-nav .cn-btn[data-dir="1"] { right:-24px }
  .contact h2 { font-size:48px }
  .case-intro h1 { font-size:48px }
  .case-metric { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 48px }
}
@media (min-width:1024px) {
  @media (min-width:1200px) { footer .foot-grid { grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) } } /* 4 kolumny dopiero od 1200 px: przy 1024 e-mail i odznaki się nie mieściły */
  footer .foot-grid > * { padding:32px }
  footer .foot-badges { align-items:stretch }
  .hero h1 { font-size:96px }
  h2.hx { font-size:48px }
  .results-ledger { grid-auto-columns:calc((100% - 32px) / 2.4); gap:24px }
  .channels { display:block; position:relative; height:760px; margin-top:64px }
  .channels .ring { display:block; position:absolute; inset:0 }
  .channels .ring svg { width:100%; height:100%; overflow:visible }
  .channels .ring ellipse { fill:none; stroke:var(--navy); stroke-width:1; vector-effect:non-scaling-stroke }
  .channels .hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:248px; min-height:212px; padding:16px; z-index:1 } /* 212 = wysokość kart kanałów przy 3 liniach opisu */
  .channels li:not(.hub):not(.ring) { position:absolute; width:248px; transform:translate(-50%,-50%); background:var(--white); padding:16px; border:1px solid var(--gray-1); z-index:1 }
  .channels li.heart { border-color:var(--orange) }
  .channels li:nth-child(2) { left:50%; top:12% }
  .channels li:nth-child(3) { left:86%; top:38% }
  .channels li:nth-child(4) { left:72%; top:81% }
  .channels li:nth-child(5) { left:28%; top:81% }
  .channels li:nth-child(6) { left:14%; top:38% }
  .case-intro { padding-top:64px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .btn { transition:none }
  .hero .bgx * { animation:none }
}
.hero .bgx .delay-1 { --d:1 }
.hero .bgx .delay-2 { --d:2 }
.hero .bgx .delay-3 { --d:3 }
.hero .bgx .delay-4 { --d:4 }
.hero .bgx .delay-5 { --d:5 }
.hero .bgx .delay-6 { --d:6 }
.hero .bgx .delay-7 { --d:7 }
.hero .bgx .delay-8 { --d:8 }
.hero .bgx .delay-9 { --d:9 }
.hero .bgx .delay-10 { --d:10 }
.hero .bgx .delay-11 { --d:11 }
.hero .bgx .delay-12 { --d:12 }
.prose .pains { margin-top:16px; padding-left:24px; list-style:square }
.prose .pains li+li { margin-top:8px }
.prose .pains li::marker { color:var(--gray-3) }
.prose .pains+p { margin-top:16px }

.journey { max-width:720px; margin:0 auto var(--head-gap) }
.journey .stage { position:relative; height:296px }
.journey .wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.journey .wires path { fill:none; vector-effect:non-scaling-stroke; stroke-width:1 }
.journey .w { stroke:var(--gray-2) }
.journey .w-own { stroke:var(--orange) }
.journey .w-mk { stroke:var(--gray-2); stroke-dasharray:4 4 }
.journey .w-kl-own { stroke:var(--orange) }
.journey .w-kl-mk { stroke:var(--gray-2); stroke-dasharray:4 4 }
.journey .r-own { stroke:var(--orange) }
.journey .r-mk { stroke:var(--gray-3); stroke-dasharray:4 4 }
.journey .hd { position:absolute; width:8px; height:12px; fill:none; stroke-width:1 }
.journey .hd-own { left:calc(26% + 29px); top:46px; stroke:var(--orange) }
.journey .hd-mk { left:calc(26% + 29px); top:238px; stroke:var(--gray-3) }
.journey .n { position:absolute; width:104px; margin-left:-52px; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--gray-3) }
.journey .n svg { width:36px; height:36px; fill:none; stroke:var(--navy); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.journey .n.own, .journey .n.kl { color:var(--navy) }
.journey .n.own svg { width:56px; height:56px; padding:10px; background:var(--tint-orange); border:1px solid var(--orange) }
.journey .n.mk svg { width:56px; height:56px; padding:10px; background:var(--white); border:1px solid var(--gray-1); stroke:var(--gray-3) }
.journey .lab { position:absolute; right:calc(10% + 16px); margin:0; text-align:right; white-space:nowrap; font:500 11px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase }
.journey .lab-own { top:32px; color:var(--orange) }
.journey .lab-mk { bottom:32px; color:var(--gray-3) }
.journey .bill { position:absolute; width:28px; height:16px; margin:-8px 0 0 -14px; z-index:2; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(10,31,68,.25)); animation:bill 14s linear .5s 2 both }
.journey .bill svg { display:block; width:100%; height:100% }
.journey .bill .walker { position:absolute; left:-26px; top:-6px; width:24px; height:24px; padding:2px; fill:none; stroke:var(--navy); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round }
@keyframes bill { 0% { left:10%; top:148px; opacity:0; } 3.0% { left:10%; top:148px; opacity:1; } 3.64% { left:13.0%; top:154.0px; opacity:1; } 3.94% { left:14.37%; top:157.4px; opacity:1; } 4.37% { left:15.53%; top:166.2px; opacity:1; } 4.91% { left:16.55%; top:178.7px; opacity:1; } 5.53% { left:17.5%; top:193.0px; opacity:1; } 6.14% { left:18.45%; top:207.3px; opacity:1; } 6.69% { left:19.47%; top:219.8px; opacity:1; } 7.12% { left:20.63%; top:228.6px; opacity:1; } 7.42% { left:22.0%; top:232.0px; opacity:1; } 8.2% { left:26%; top:232px; opacity:1; } 9.13% { left:30.0%; top:220.0px; opacity:1; } 9.68% { left:32.74%; top:217.1px; opacity:1; } 10.22% { left:35.02%; top:209.3px; opacity:1; } 10.81% { left:36.94%; top:198.4px; opacity:1; } 11.42% { left:38.62%; top:185.8px; opacity:1; } 12.02% { left:40.17%; top:173.0px; opacity:1; } 12.57% { left:41.67%; top:161.8px; opacity:1; } 13.03% { left:43.25%; top:153.6px; opacity:1; } 13.4% { left:45.0%; top:150.0px; opacity:1; } 13.99% { left:48%; top:148px; opacity:1; } 18.11% { left:69%; top:148px; opacity:1; } 22.23% { left:90%; top:148px; opacity:1; } 24.03% { left:90%; top:192px; opacity:1; } 25.74% { left:90.0%; top:234.0px; opacity:1; } 25.89% { left:89.84%; top:237.6px; opacity:1; } 26.04% { left:89.36%; top:240.4px; opacity:1; } 26.22% { left:88.56%; top:242.4px; opacity:1; } 26.44% { left:87.44%; top:243.6px; opacity:1; } 26.73% { left:86.0%; top:244.0px; opacity:1; } 37.1% { left:calc(26% + 34px); top:244px; opacity:1; } 43.1% { left:14%; top:300px; opacity:0; } 47.1% { left:10%; top:148px; opacity:0; } 49.1% { left:10%; top:148px; opacity:1; } 49.74% { left:13.0%; top:142.0px; opacity:1; } 50.04% { left:14.37%; top:138.6px; opacity:1; } 50.47% { left:15.53%; top:129.8px; opacity:1; } 51.02% { left:16.55%; top:117.3px; opacity:1; } 51.63% { left:17.5%; top:103.0px; opacity:1; } 52.25% { left:18.45%; top:88.7px; opacity:1; } 52.79% { left:19.47%; top:76.2px; opacity:1; } 53.22% { left:20.63%; top:67.4px; opacity:1; } 53.52% { left:22.0%; top:64.0px; opacity:1; } 54.31% { left:26%; top:64px; opacity:1; } 55.23% { left:30.0%; top:76.0px; opacity:1; } 55.78% { left:32.74%; top:78.9px; opacity:1; } 56.33% { left:35.02%; top:86.7px; opacity:1; } 56.91% { left:36.94%; top:97.6px; opacity:1; } 57.53% { left:38.62%; top:110.2px; opacity:1; } 58.13% { left:40.17%; top:123.0px; opacity:1; } 58.67% { left:41.67%; top:134.2px; opacity:1; } 59.13% { left:43.25%; top:142.4px; opacity:1; } 59.5% { left:45.0%; top:146.0px; opacity:1; } 60.1% { left:48%; top:148px; opacity:1; } 64.22% { left:69%; top:148px; opacity:1; } 68.33% { left:90%; top:148px; opacity:1; } 69.15% { left:90%; top:128px; opacity:1; } 71.85% { left:90.0%; top:62.0px; opacity:1; } 72.0% { left:89.84%; top:58.4px; opacity:1; } 72.15% { left:89.36%; top:55.6px; opacity:1; } 72.32% { left:88.56%; top:53.6px; opacity:1; } 72.55% { left:87.44%; top:52.4px; opacity:1; } 72.83% { left:86.0%; top:52.0px; opacity:1; } 83.21% { left:calc(26% + 34px); top:52px; opacity:1; } 85.0% { left:calc(26% + 2px); top:22px; opacity:1; } 86%, 100% { left:calc(26% + 2px); top:22px; opacity:0; } }
.journey .stack { position:absolute; left:calc(26% - 16px); top:-2px; width:32px; height:32px; z-index:2; pointer-events:none }
.journey .stack svg { display:block; width:100%; height:100% }
.journey .walker-end { position:absolute; left:calc(26% - 38px); top:8px; width:24px; height:24px; padding:2px; z-index:2; pointer-events:none; fill:none; stroke:var(--navy); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; opacity:0; animation:walker-end 14s linear .5s 2 both }
@keyframes walker-end { 0%, 85.9% { opacity:0 } 86%, 100% { opacity:1 } }
.journey.anim-wait .bill, .journey.anim-wait .stack .s, .journey.anim-wait .walker-end { animation-play-state:paused }
.journey .stack .s { opacity:0; animation:14s ease-out .5s 2 both }
.journey .stack .s1 { animation-name:note1 } .journey .stack .s2 { animation-name:note2 } .journey .stack .s3 { animation-name:note3 } .journey .stack .s4 { animation-name:note4 } .journey .stack .s5 { animation-name:note5 }
@keyframes note1 { 0%, 85% { opacity:0 } 86%, 100% { opacity:1 } }
@keyframes note2 { 0%, 88% { opacity:0; transform:translateY(-4px) } 89.5%, 100% { opacity:1; transform:none } }
@keyframes note3 { 0%, 90% { opacity:0; transform:translateY(-4px) } 91.5%, 100% { opacity:1; transform:none } }
@keyframes note4 { 0%, 92% { opacity:0; transform:translateY(-4px) } 93.5%, 100% { opacity:1; transform:none } }
@keyframes note5 { 0%, 94% { opacity:0; transform:translateY(-4px) } 95.5%, 100% { opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce) { .journey .bill { display:none } .journey .stack { display:none } .journey .walker-end { display:none } }
@media (max-width:560px) {
  .journey .n { width:72px; margin-left:-36px }
  .journey .n svg { width:28px; height:28px }
  .journey .n.own svg, .journey .n.mk svg { width:56px; height:56px; padding:12px }
  .journey .n .cap { font-size:11px; letter-spacing:.02em; white-space:nowrap }
  .journey .lab { font-size:11px; letter-spacing:.04em }
  .journey .lab-own { top:12px }
  .journey .lab-mk { bottom:12px }
}
/* do 389 px długi podpis powrotu nie mieści się w linii (wychodził poza ekran albo na margines): łamie się na dwie i schodzi pod kafel marketplace */
@media (max-width:389px) {
  .journey { margin-bottom:calc(var(--head-gap) + 40px) }
  .journey .lab { left:8px; white-space:normal }
  .journey .lab-mk { bottom:-40px }
}