/* Podstrona OFERTA I CENNIK (makieta) — Sticker Pop */
.o-head{padding:clamp(34px,5vw,70px) 0 clamp(14px,2vw,26px)}
.o-head h1{font-size:clamp(40px,7.4vw,108px);margin:18px 0 18px}
.o-head h1 span{display:inline-block;padding:.04em .2em .02em;background:var(--honey);border:var(--bw) solid var(--ink);box-shadow:var(--sh-l);transform:rotate(-1.4deg)}
.o-head p{max-width:60ch;font-size:clamp(16px,1.3vw,19px)}
.back{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--mono);text-transform:uppercase;text-decoration:none;margin-top:16px}
.back svg{width:16px;height:16px;transition:transform .3s var(--pop)}.back:hover svg{transform:translateX(-4px)}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(22px,3vw,40px)}
@media(max-width:1060px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;gap:12px;min-height:400px}
.plan .k{font:700 11.5px/1.3 var(--mono);text-transform:uppercase}
.plan h2{font:900 clamp(24px,2.2vw,32px)/1 var(--head);font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em}
.plan .price{margin-top:auto;font:900 clamp(42px,4.2vw,60px)/.9 var(--head);font-stretch:118%;letter-spacing:-.04em}
.plan .price small{display:block;font:700 12px/1.3 var(--mono);letter-spacing:0;text-transform:uppercase;margin-top:8px}
.plan .meta{display:flex;justify-content:space-between;gap:10px;font:700 12px/1.3 var(--mono);text-transform:uppercase;border-top:2px dashed var(--ink);padding-top:12px}
.plan .btn{align-self:stretch;justify-content:center}
.plan.best{background:var(--green);color:var(--cream)}
.plan.best .price{color:var(--honey)}
.plan.best .meta{border-color:rgba(246,241,232,.4)}
.plan.best .btn{background:var(--honey);color:var(--ink)}
.ribbon{align-self:flex-start;background:var(--honey);color:var(--ink);border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:900 12px/1 var(--head);font-stretch:112%;text-transform:uppercase;padding:8px 11px;transform:rotate(-3deg)}

/* ścieżki A–C */
.paths-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2.4vw,30px)}
.paths-nav a{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;background:var(--c,var(--paper));border:var(--bw) solid var(--ink);border-radius:99px;box-shadow:4px 4px 0 var(--ink);text-decoration:none;font:800 14px/1.1 var(--head);font-stretch:108%;text-transform:uppercase;transition:transform .2s var(--pop),box-shadow .2s}
.paths-nav a:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:7px 7px 0 var(--ink)}
.paths-nav i{flex:none;display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);font:900 17px/1 var(--head);font-style:normal}
@media(max-width:560px){.paths-nav a{width:100%}}
.path{padding-top:clamp(40px,6vw,84px);scroll-margin-top:96px}
.path__head{display:flex;align-items:flex-start;gap:clamp(14px,2vw,26px);margin-bottom:clamp(20px,2.6vw,36px)}
.path__l{flex:none;display:grid;place-items:center;width:clamp(52px,7vw,96px);aspect-ratio:1;background:var(--c);border:var(--bw) solid var(--ink);border-radius:50%;box-shadow:var(--sh);transform:rotate(-8deg);font:900 clamp(30px,3.6vw,52px)/1 var(--head);font-stretch:120%}
.path__head>div{min-width:0}
.path__head .k{font:700 12px/1.3 var(--mono);text-transform:uppercase}
.path__head h2{font-size:clamp(21px,4.4vw,62px);margin:6px 0 10px;overflow-wrap:break-word;hyphens:auto}
.path__head p{max-width:62ch;font-size:clamp(16px,1.2vw,18px)}
.plans--3{grid-template-columns:repeat(3,1fr);margin-top:0}
.plans--2{grid-template-columns:repeat(2,1fr);margin-top:0}
@media(max-width:1060px){.plans--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.plans--3,.plans--2{grid-template-columns:1fr}}
.path .plan{min-height:0}
.plan h3{font:900 clamp(22px,2vw,30px)/1 var(--head);font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:anywhere}
.plan .price{font-size:clamp(38px,3.8vw,56px);overflow-wrap:anywhere}
.plan .facts{list-style:none;display:grid;gap:8px;border-top:2px dashed var(--ink);padding-top:12px}
.plan .facts li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font:700 12px/1.35 var(--mono);text-transform:uppercase}
.plan .facts b{font:800 14px/1.2 var(--body);text-align:right;text-transform:none;white-space:nowrap}
.plan.best .facts{border-color:rgba(246,241,232,.4)}
.plan .steps{margin:0;padding-left:1.35em;display:grid;gap:4px;font-size:15px}
.plan .inc{font:700 12px/1.4 var(--mono);text-transform:uppercase}
/* zniżki pakietowe: naklejka z procentem + przekreślona cena regularna i kwota oszczędności */
.plan{position:relative}
.disc ~ .k,.disc ~ .ribbon{max-width:62%}
.disc{position:absolute;top:-34px;right:12px;z-index:2;display:grid;justify-items:center;gap:2px;padding:9px 14px 8px;background:var(--terra);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);transform:rotate(5deg);transition:transform .3s var(--pop)}
.disc b{font:900 clamp(26px,2.4vw,34px)/1 var(--head);font-stretch:120%;letter-spacing:-.03em}
.disc small{font:700 10px/1.1 var(--mono);text-transform:uppercase}
.plan:hover .disc{transform:rotate(-4deg) scale(1.06)}
.plan.best .disc{background:var(--honey)}
.plan .was{margin-top:-4px;font:700 12.5px/1.45 var(--mono);text-transform:uppercase}
.plan .was s{text-decoration-thickness:2px;opacity:.75}
.plan .was b{background:var(--leaf);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:2px 7px;font:800 12.5px/1.3 var(--mono);white-space:nowrap}
.plan.best .was b{background:var(--honey)}
.price--free span:first-child{white-space:nowrap;font-size:clamp(30px,3vw,44px)}
.reg-link{font:700 13px/1.3 var(--mono);text-transform:uppercase}
.price-note{margin-top:clamp(18px,2.4vw,28px);max-width:70ch;font:700 12px/1.45 var(--mono);text-transform:uppercase}
.rules{list-style:none;display:grid;gap:12px;max-width:920px;padding:clamp(20px,2.6vw,34px)}
.rules li{position:relative;padding-left:34px;max-width:70ch}
.rules li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border:2px solid var(--ink);border-radius:5px;background:var(--leaf)}
.rules li:nth-child(2)::before{background:var(--blush)}.rules li:nth-child(3)::before{background:var(--honey)}.rules li:nth-child(4)::before{background:var(--sky)}

.how{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:900px){.how{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.how{grid-template-columns:1fr}}
.how .n{display:grid;place-items:center;width:52px;height:52px;border:var(--bw) solid var(--ink);border-radius:50%;background:var(--paper);box-shadow:3px 3px 0 var(--ink);font:900 22px/1 var(--head);margin-bottom:34px;transition:transform .3s var(--pop)}
.how .card:hover .n{transform:rotate(-12deg) scale(1.12)}
.how b{font:900 clamp(18px,1.7vw,24px)/1.1 var(--head);font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em}

.faq{display:grid;gap:14px;max-width:920px}
.faq details{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--sh);padding:2px 20px;transition:transform .2s var(--pop)}
.faq details:hover{transform:translate(-2px,-2px)}
.faq details[open]{background:var(--honey)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font:900 clamp(16px,1.6vw,22px)/1.15 var(--head);font-stretch:108%;text-transform:uppercase;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;display:grid;place-items:center;border:var(--bw) solid var(--ink);border-radius:8px;background:var(--leaf);font:900 22px/1 var(--head);transition:transform .35s var(--pop)}
.faq details[open] summary::after{transform:rotate(135deg);background:var(--terra)}
.faq details p{padding:0 0 18px;max-width:64ch;animation:faqIn .4s var(--pop) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}}
.reduce .faq details p{animation:none}

.cta-box{background:var(--green);color:var(--cream);border:var(--bw) solid var(--ink);box-shadow:14px 14px 0 var(--honey),14px 14px 0 3px var(--ink);border-radius:26px;padding:clamp(28px,5vw,64px);display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.cta-box h2{font-size:clamp(28px,4.4vw,64px);color:var(--honey);max-width:14ch}
.cta-box p{max-width:40ch;margin-top:10px}