/* MERGE 930 x B · 2026-09-25 · warstwa wizualna z WOW B (ff64ff7) na shellu 930 (5d6d631).
   Zero nowego tekstu, zero zmian kolejnosci, cen i gwarancji. Tylko transform/opacity/kolor/cien.
   Hierarchia ruchu: 1 instrument tygodnia (#wdd) · 2 stos trybow (#modes, telefon) · 3 reveal 927 + szwy sekcji · 4 mikrointerakcje. */
html.pl{--mb-rim:linear-gradient(180deg,rgba(232,195,115,.30),rgba(241,235,223,.07) 36%,rgba(241,235,223,.03));--mb-shadow:inset 0 1px 0 rgba(241,235,223,.04),0 26px 50px -30px rgba(0,0,0,.9);--mb-card:#100f0d}

/* ---------- 1. Instrument tygodnia: pasek 168 h nad krokami 01-04 (B .inst/.stage, sterowany krokiem, bez pinu) ---------- */
html.pl .clarity-product>.wrap>.wdd,html.pl .wdd{border:1px solid transparent;border-radius:14px;background:linear-gradient(var(--mb-card),var(--mb-card)) padding-box,var(--mb-rim) border-box;box-shadow:var(--mb-shadow)}
html.pl .mb-inst{position:relative;padding:10px 14px 4px;border-bottom:1px solid var(--line)}
html.pl .mb-inst__stage{position:relative;height:78px}
@media(min-width:768px){html.pl .mb-inst{padding:14px 24px 6px}html.pl .mb-inst__stage{height:104px}}
html.pl .mb-inst svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
html.pl .mb-inst path{fill:none;vector-effect:non-scaling-stroke}
html.pl .mb-track{stroke:rgba(241,235,223,.12);stroke-width:1.5}
html.pl .mb-tick{stroke:rgba(241,235,223,.16);stroke-width:1}
html.pl .mb-wk{stroke:url(#mb-gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
html.pl .mb-inst.is-drawn .mb-wk{stroke-dashoffset:0}
html.pl .mb-cut{stroke:var(--red);stroke-width:1.6;stroke-dasharray:5 6;opacity:0;transition:opacity .45s var(--ease)}
html.pl .mb-inst .mb-bump{fill:rgba(232,195,115,.10);stroke:rgba(232,195,115,.55);stroke-width:1.2;opacity:0;transform:translateY(12px);transform-box:fill-box;transition:opacity .5s var(--ease),transform .6s var(--ease)}
html.pl .mb-hold{stroke:var(--gold-hi);stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .5s var(--ease)}
html.pl .mb-inst[data-mb-step="2"] .mb-cut{opacity:1}
html.pl .mb-inst[data-mb-step="3"] .mb-cut{opacity:.28}
html.pl .mb-inst[data-mb-step="3"] .mb-bump{opacity:1;transform:none}
html.pl .mb-inst[data-mb-step="4"] .mb-bump{opacity:.35;transform:none}
html.pl .mb-inst[data-mb-step="4"] .mb-hold{opacity:1}
html.pl .mb-x{position:absolute;left:35%;top:93%;width:12px;height:12px;margin:-6px 0 0 -6px;opacity:0;transform:scale(.6);transition:opacity .35s var(--ease),transform .35s var(--ease);background:linear-gradient(45deg,transparent 44%,var(--red) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--red) 44% 56%,transparent 56%)}
html.pl .mb-inst[data-mb-step="3"] .mb-x{opacity:1;transform:none}
html.pl .mb-node{position:absolute;top:64.7%;left:var(--x);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;border:1.5px solid rgba(241,235,223,.34);background:var(--mb-card);transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease)}
html.pl .mb-node.is-on{background:var(--gold);border-color:var(--gold)}
html.pl .mb-node.is-now{box-shadow:0 0 0 5px rgba(212,168,83,.16)}
html.pl .mb-node--end{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-color:rgba(241,235,223,.22)}

/* ---------- 2. Stan tygodnia: zakladki z przesuwanym wskaznikiem (B .gtabs__ind) ---------- */
html.pl .mb-slide{position:relative}
html.pl .mb-slide>button{border-bottom-color:transparent!important}
html.pl .mb-slide>button::after{display:none!important}
html.pl .mb-ind{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--gold-hi);transform:translateX(var(--mb-l,0));width:var(--mb-w,0);transition:transform .45s var(--ease),width .45s var(--ease);pointer-events:none}
html.pl .plan-selector.mb-slide .mb-ind{height:3px}

/* ---------- 3. Stos trybow tygodnia na telefonie (B .scard/.stack, sticky + przygaszenie) ---------- */
@media(max-width:1023px){
 /* body z overflow-x:hidden jest kontenerem scrolla i gasi sticky. clip przycina tak samo, bez kontenera. Stara przegladarka zostaje przy hidden. */
 html.pl body{overflow-x:clip}
 html.pl #modes.mb-stack .modegrid{display:flex;flex-direction:column;gap:14px;overflow:visible}
 html.pl #modes.mb-stack .modegrid::after{display:none}
 html.pl #modes.mb-stack .mode{position:sticky;top:calc(84px + var(--mb-i,0)*12px);padding:22px 20px 22px;border:1px solid transparent;border-radius:14px;background:linear-gradient(var(--mb-card),var(--mb-card)) padding-box,var(--mb-rim) border-box;box-shadow:var(--mb-shadow);transform-origin:50% 0;scale:var(--mb-s,1)}
 html.pl #modes.mb-stack .mode::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:#070606;opacity:var(--mb-d,0);pointer-events:none}
}

/* ---------- 4. Szew sekcji (B .seam): zlota linia wlosowa na wejsciu sekcji ---------- */
html.pl main>section.mb-sec{position:relative}
html.pl .mb-seam{position:absolute;top:0;left:50%;width:min(1100px,92%);height:1px;translate:-50% 0;background:linear-gradient(90deg,transparent,rgba(212,168,83,.42) 50%,transparent);transform:scaleX(0);transition:transform 1.4s var(--ease);pointer-events:none}
html.pl .mb-seam.is-in{transform:scaleX(1)}

/* ---------- 5. Mikrointerakcje: CTA sheen, plus w szufladach, fokus w palecie ---------- */
html.pl .cta:not(.ghost){background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;background-repeat:no-repeat;transition:background-color .25s var(--ease),background-position .8s var(--ease),border-color .25s var(--ease),color .25s var(--ease),translate .15s var(--ease)}
@media(hover:hover){html.pl .cta:not(.ghost):hover{background-position:-30% 0;translate:0 -2px}}
html.pl .cta:not(.ghost):active{translate:0 1px}
html.pl :is(.faq summary,.evidence-drawer>summary,.wdd__raw>summary)::after{content:"";width:26px;height:26px;box-sizing:border-box;flex:none;border:1px solid var(--line-2);border-radius:50%;font-size:0;background:linear-gradient(var(--gold-hi),var(--gold-hi)) center/10px 1.5px no-repeat,linear-gradient(var(--gold-hi),var(--gold-hi)) center/1.5px 10px no-repeat;transition:background-size .3s var(--ease),border-color .25s var(--ease)}
html.pl :is(.faq[open] summary,.evidence-drawer[open]>summary,.wdd__raw[open]>summary)::after{background-size:10px 1.5px,1.5px 0;border-color:rgba(212,168,83,.5)}
html.pl .faq summary::after{align-self:center}
html.pl .wdd__raw>summary::after{top:50%;margin-top:-13px}
@media(hover:hover){html.pl :is(.faq summary,.evidence-drawer>summary,.wdd__raw>summary):hover::after{border-color:rgba(212,168,83,.6)}}
html.pl details.faq{interpolate-size:allow-keywords}
html.pl details.faq::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
html.pl details.faq[open]::details-content{block-size:auto}
html.pl :is(.bpt__tabs button,.wdd__raw>summary,.wdd .wdd__nav button,.wdd .wdd__tabs button,.wdd .wdd__next,.pj__detail>summary,.pq__more>summary,.compare>summary,.evidence-drawer>summary,.plan-selector button):focus-visible{outline:2px solid var(--gold-hi)}

@media(prefers-reduced-motion:reduce){
 html.pl .mb-inst *,html.pl .mb-ind,html.pl .mb-seam,html.pl .cta,html.pl :is(.faq summary,.evidence-drawer>summary,.wdd__raw>summary)::after{transition:none!important}
 html.pl .mb-wk{stroke-dashoffset:0}
 html.pl .mb-seam{transform:scaleX(1)}
 html.pl details.faq::details-content{transition:none}
 html.pl .cta:not(.ghost):hover{translate:none}
}