/* ===== Pakiety v4 — style lokalne (style.css bez zmian) ===== */
[id]{scroll-margin-top:84px}
section{padding-block:clamp(48px,6vw,80px)}

/* 1. Hero */
.phero{background:linear-gradient(180deg,#EEF6F0 0%,#fff 100%);padding-block:56px 44px}
.phero h1{font-size:clamp(2.3rem,4.3vw,3.7rem)}
@media(max-width:800px){.phero .offer-map{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;padding:16px;border-radius:22px;text-align:left}.phero .offer-map .o{font-size:.7rem}.phero .offer-map .ic-round{width:40px;height:40px}.phero .offer-map .ic-round .ico{width:18px;height:18px}}
.phero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:960px){.phero .grid{grid-template-columns:1fr;gap:28px}}
.phero .kit{aspect-ratio:16/10;border-radius:var(--r28);background:url(../../img/klient/kit_packshot.jpg) center/cover no-repeat;box-shadow:var(--shadow);position:relative;overflow:hidden}
.phero .kit .cap{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);border-radius:999px;padding:8px 14px;font-size:.76rem;font-weight:600;color:var(--g900)}
.phero .mapwrap{margin-top:40px;text-align:center}
.phero .mapwrap .cap{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px}

/* 2. Karty pakietów — rozszerzenie .packs4/.pk ze style.css */
.packs-sec{padding-top:40px}
.packs4{margin-top:28px}
.pk{grid-template-rows:auto auto auto auto 1fr auto auto;gap:10px}
.pk .pk-body{display:grid;align-content:start}
.pk .pk-body>div{display:grid;gap:10px}
.pk .for{font-size:.8rem;color:var(--muted);line-height:1.5;margin:0}
.pk .for b{color:var(--g900);font-weight:600;display:block;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.pk .lbl{display:inline-flex;align-items:center;gap:6px;background:var(--g900);color:#fff;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px;width:max-content}
.pk .plus .lbl{margin-bottom:6px}
.pk .inc{border:1px solid var(--line);border-radius:12px;padding:0 12px}
.pk .inc-h{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;font:inherit;font-size:.9rem;font-weight:600;padding:11px 0;color:var(--ink)}
.pk .inc-h i{font-style:normal;color:var(--g600);font-size:1.15rem;font-weight:400;line-height:1}
.pk .inc-h i::before{content:"+"}
.pk.open .inc-h i::before{content:"−"}
.pk .inc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
.pk.open .inc-b{grid-template-rows:1fr}
.pk .inc-b>div{overflow:hidden;min-height:0}
.pk .inc ul{padding:2px 0 12px;margin:0;list-style:none;display:grid;gap:6px;font-size:.82rem;color:var(--ink2)}
.pk .inc li{padding-left:20px;position:relative}.pk .inc li::before{content:"✓";position:absolute;left:0;color:var(--g500);font-weight:700}
.pk .inc .s{display:none}
.pk .nm .ic-round{color:var(--g600)}
.pk.best .nm{color:var(--g900)}
@media(max-width:640px){
  /* MOBILE = akordeon kompaktowych modułów (ten sam markup) */
  .packs4{gap:12px}
  .pk{display:flex;flex-direction:column;padding:16px 16px 14px;gap:8px;border-radius:20px}
  .pk h3{min-height:0;font-size:1.05rem}
  .pk .box img{width:60px;height:60px;border-radius:12px}
  .pk .price{font-size:1.5rem}
  .pk .inc{order:5}
  .pk .pk-body{order:6;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
  .pk.open .pk-body{grid-template-rows:1fr}
  .pk .pk-body>div{overflow:hidden;min-height:0}
  .pk.open .pk-body>div{padding-bottom:4px}
  .pk .btn{order:7}
  .pk .inc .l{display:none}.pk .inc .s{display:inline}
  .pk .rib{left:14px}
}
/* zasada wizualna: kolejne poziomy zakresu danych */
.levels{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:22px;font-size:.8rem}
.levels a{display:inline-flex;align-items:center;gap:6px;background:var(--mint2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600;color:var(--g900)}
.levels a .ico{width:16px;height:16px;color:var(--g600)}
.levels a em{font-style:normal;color:var(--muted);font-weight:400;margin-left:4px}
.levels a u{text-decoration:none;color:var(--g300);font-weight:400}
.levels i{font-style:normal;color:var(--g300)}
.levels .cap{width:100%;text-align:center;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* 3. Tabela porównawcza */
.cmp-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.tbl{margin-top:26px}
.cmp4 td:first-child{font-weight:500}
.cmp4 th:first-child,.cmp4 td:first-child{z-index:1;box-shadow:1px 0 0 var(--line)}
.cmp4 td:first-child small{display:block;font-size:.74rem;color:var(--muted);font-weight:400}
@media(max-width:640px){.cmp4{font-size:.82rem}.cmp4 th,.cmp4 td{padding:11px 12px;white-space:nowrap}.cmp4 th:first-child,.cmp4 td:first-child{min-width:150px;max-width:170px;white-space:normal}.cmp4 th small{font-size:.85rem}}
.cmp-mob{display:none;font-size:.78rem;color:var(--muted);margin-top:10px}
@media(max-width:640px){.cmp-mob{display:block}}

/* 5. Co otrzymujesz */
.steps5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1000px){.steps5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps5{grid-template-columns:1fr}}
.steps5 .ph{aspect-ratio:4/3;margin:0 0 12px;border-radius:20px}
.steps5 .step{background:#fff;border:1px solid var(--line);border-radius:24px;padding:14px 14px 18px}
.steps5 .step .ph{margin-bottom:12px}

/* 6. Trzy warstwy */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.layers{grid-template-columns:1fr}}
.layers .card{gap:10px;border-radius:24px}
.layers .num{font-family:var(--mono);color:var(--g600);font-size:.78rem;letter-spacing:.1em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:900px){.two{grid-template-columns:1fr}}

/* 7. Czym się różni */
.diff{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.diff{grid-template-columns:1fr}}
.diff .card{grid-template-columns:auto 1fr;gap:14px;align-items:start;border-radius:22px}
.diff .card h3{font-size:1.05rem}

/* 8. Mikrobiom się zmienia */
.vflow{display:grid;gap:0;max-width:520px}
.vflow .s{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:10px 0}
.vflow .s .n{width:34px;height:34px;border-radius:50%;background:var(--g900);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem}
.vflow .s b{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.vflow .s p{font-size:.9rem;color:var(--ink2);margin:2px 0 0}
.vflow .d{padding-left:12px;color:var(--g300);line-height:1}

/* 9. Po co badanie cukru */
.glu{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.glu{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.glu{grid-template-columns:1fr}}
.glu .card{border-radius:22px}
.chain{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--g900)}
.chain span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px}
.chain i{font-style:normal;color:var(--g300)}

/* 10. Powtórz badanie */
.rep{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch}
@media(max-width:800px){.rep{grid-template-columns:1fr}.rep .arrow{transform:rotate(90deg)}}
.rep .card{gap:16px;grid-template-columns:1fr auto;align-items:end;border-radius:24px}
.rep .card .txt{display:grid;gap:8px;grid-column:1;grid-row:1;align-self:start}
.rep .card img{width:150px;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-s);grid-column:2;grid-row:1}
@media(max-width:560px){.rep .card{grid-template-columns:1fr}.rep .card img{grid-column:1;grid-row:2;width:170px}}
.rep .arrow{display:grid;place-items:center;font-size:2rem;color:var(--g300)}
.dark-card.two{gap:24px}
.dark-card .strike{text-decoration:line-through;color:#9FB9AA}
.dark-card .say{font-size:1.3rem;font-weight:500;color:#9FE3C2}

/* 11. Konsultacja rozbudowana */
.consult{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px 32px}
@media(max-width:900px){.consult{grid-template-columns:1fr}}
.consult .av{width:120px;height:120px;border-radius:50%;aspect-ratio:1;padding:8px;font-size:.6rem}
.consult ul{padding-left:18px;margin:8px 0 0;font-size:.9rem;color:var(--ink2);columns:2;gap:24px}
@media(max-width:700px){.consult ul{columns:1}}

/* 12. FAQ */
.faq4{border-top:1px solid var(--line)}
.faq4 details{border-bottom:1px solid var(--line)}
.faq4 summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-weight:500;font-size:1.05rem}
.faq4 summary::-webkit-details-marker{display:none}
.faq4 summary::after{content:"+";color:var(--muted);font-weight:300;font-size:1.3rem;line-height:1;flex:0 0 auto}
.faq4 details[open] summary::after{content:"−"}
.faq4 .a{padding:0 0 18px;color:var(--ink2);font-size:.95rem;max-width:70ch}

/* 13. Kreator */
.wiz{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start}
@media(max-width:900px){.wiz{grid-template-columns:1fr}}
.wiz .q{margin-top:18px}
.wiz .q b{display:block;font-size:.95rem;margin-bottom:8px}
.wiz .opts{display:flex;gap:8px;flex-wrap:wrap}
.wiz .opts button{all:unset;box-sizing:border-box;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font:inherit;font-size:.88rem;color:var(--ink)}
.wiz .opts button.on{background:var(--g900);color:#fff;border-color:var(--g900)}
.wiz .res{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;display:grid;gap:10px;box-shadow:var(--shadow-s)}
.wiz .res .k{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g600);font-weight:600}
.wiz .res .nm{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.wiz .res .pr{font-size:1.2rem;font-weight:500}
.wiz .res p{font-size:.9rem;color:var(--ink2);margin:0}

/* 14. Zamknięcie */
.closing2{background:var(--g900);color:#fff;padding-block:88px;text-align:center}
.closing2 h2{color:#fff;font-size:clamp(2rem,4.4vw,3.4rem)}
.closing2 p{color:#CFE9DB;max-width:56ch;margin-inline:auto}

.sticky-cta .wrap span{font-size:.9rem}
@media(max-width:640px){.sticky-cta .wrap{gap:10px}.sticky-cta .wrap span{font-size:.8rem}}