/* Nabór · surgical polish 2026-09-24 · warstwa na 927 (live 8476866).
   Zero zmian treści, palety, fotografii i commercial truth. Tylko układ, rytm, stany i 4 momenty ruchu.
   Wszystko pod html.pl, żeby nie ruszyć 927 bez tej klasy. */

/* 1 · Nagłówki sekcji na desktopie: tytuł po lewej, lead po prawej przy linii bazowej (koniec pustej prawej połowy) */
@media(min-width:1100px){
  html.pl :is(#proof-early,#who,#tydzien,#modes,#price)>.wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px}
  html.pl :is(#proof-early,#who,#tydzien,#modes,#price)>.wrap>*{grid-column:1/-1}
  html.pl :is(#proof-early,#who,#tydzien,#modes,#price)>.wrap>h2.h{grid-column:1;margin-bottom:56px}
  html.pl :is(#proof-early,#who,#tydzien,#modes,#price)>.wrap>h2.h+.lead{grid-column:2;grid-row:2;align-self:end;margin:0 0 62px;max-width:44ch;font-size:1rem;line-height:1.7}
  html.pl #tydzien>.wrap>h2.h+.lead+*{margin-top:0}
}

/* 2 · Dowody: na desktopie 4 w rzędzie (bez sieroty), na hover reszta cichnie */
@media(min-width:1100px){
  html.pl .vids--early{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
  html.pl .vids--early .ecase .vcard .cap b{font-size:1.05rem}
  html.pl .vids--early .ecase__num{font-size:.94rem}
}
@media(hover:hover) and (min-width:1100px) and (prefers-reduced-motion:no-preference){
  html.pl .vids--early .ecase{transition:opacity .45s var(--ease)}
  html.pl .vids--early:has(.ecase:hover) .ecase:not(:hover){opacity:.5}
  html.pl .vids--early .ecase .vcard{transition:border-color .35s var(--ease),translate .45s var(--ease)}
  html.pl .vids--early .ecase:hover .vcard{translate:0 -4px;border-color:rgba(212,168,83,.45)}
  html.pl .vids--early .ecase .play{transition:scale .35s var(--ease)}
  html.pl .vids--early .ecase:hover .play{scale:1.08}
}
/* mobile rail: aktywna karta pełna, reszta w cieniu */
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
  html.pl .vids--snap.pl-rail .ecase{transition:opacity .4s var(--ease)}
  html.pl .vids--snap.pl-rail .ecase:not(.is-act){opacity:.42}
  html.pl .vids--snap.pl-rail .ecase .vcard{transition:scale .45s var(--ease)}
  html.pl .vids--snap.pl-rail .ecase:not(.is-act) .vcard{scale:.965}
}
html.pl .pl-dots{display:none}
@media(max-width:767px){
  html.pl .pl-dots{display:flex;gap:6px;margin:14px 0 0}
  html.pl .pl-dots i{width:18px;height:2px;background:var(--line-2);transition:background .3s var(--ease),width .3s var(--ease)}
  html.pl .pl-dots i.is-on{width:34px;background:var(--gold)}
}

/* 3 · Punkt pęknięcia: kroki cofają się w czasie 21:00 → rano, dopiero potem zapala się decyzja */
@media(min-width:1024px){
  html.pl .bpt__line--reverse>li{align-content:start}
  html.pl .bpt__line--reverse .bpt__moment{min-height:2.2em;display:flex;align-items:flex-end}
}
@media(prefers-reduced-motion:no-preference){
  html.pl .bpt.pl-step #bpt-glod>li{transition:opacity .5s var(--ease)}
  html.pl .bpt.pl-step #bpt-glod>li:not(.is-lit){opacity:.3}
  html.pl .bpt.pl-step #bpt-glod>li:not(.is-lit)::before{background:var(--bg);border-color:var(--line-2);box-shadow:none}
}
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
  html.pl .bpt.pl-step #bpt-glod::after{content:"";position:absolute;left:0;top:6px;height:1px;width:calc(var(--pl-p,0) * 100%);background:var(--gold);transition:width .55s var(--ease)}
}

/* 4 · Jeden tydzień: przejście między krokami zamiast twardego skoku, decyzja w kroku 04 dostaje akcent */
@keyframes plIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  html.pl .wdd.is-ready .wdd__panel.is-on{animation:plIn .42s var(--ease) both}
}
html.pl .wdd.is-ready #wdd-4 .wdd__t--big{color:var(--gold-hi)}
html.pl .wdd.is-ready .wdd__tabs button{transition:color .25s var(--ease),background-color .25s var(--ease)}
@media(hover:hover){html.pl .wdd.is-ready .wdd__tabs button:not([aria-selected="true"]):hover{color:var(--ink);background:rgba(241,235,223,.03)}}
html.pl .wdd__nav button{transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease)}
@media(hover:hover){html.pl .wdd__nav button:not(:disabled):hover{border-color:var(--gold);color:var(--gold-hi)}}

/* 5 · Cennik: wyrównane nagłówki i ceny w jednej linii, spokojny hover, zero wstążek */
@media(min-width:1024px){
  html.pl .plans--v5 .plan:not(.hp)::before{content:"\00a0";display:block;margin-bottom:12px;font:500 .55rem/1 var(--fm);visibility:hidden}
  html.pl .plans--v5 .plan>b{min-height:2.02em;display:flex;align-items:flex-end}
  html.pl .plans--v5 .plan>i{min-height:1.6em}
  html.pl .plans--v5 .plan .payment{min-height:3.4em}
  html.pl .plans--v5 .plan{transition:border-color .3s var(--ease)}
  html.pl .plans--v5 .plan:hover{border-color:rgba(212,168,83,.42)}
}
html.pl .plans--v5 .plan:focus-within{border-color:rgba(212,168,83,.42)}

/* 6 · CTA: mikro-interakcja strzałki i stan wciśnięcia (bez glow) */
html.pl .cta,html.pl .toplink{transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),translate .15s var(--ease)}
html.pl .cta:active,html.pl .toplink:active{translate:0 1px}
html.pl :is(.cta,.toplink) .pl-arr{display:inline-block;transition:translate .3s var(--ease)}
@media(hover:hover){html.pl .cta:hover .pl-arr,html.pl .toplink:hover .pl-arr{translate:4px 0}}
html.pl .cta:focus-visible,html.pl .toplink:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* 7 · Hero desktop: krótsza miara leada, CTA bliżej leada, dowód jako osobna linia z oddechem */
@media(min-width:1024px){
  html.pl .hero .lead{max-width:52ch;line-height:1.72}
  html.pl .hero .ctarow--hero{margin-top:30px}
  html.pl .hero .hero-proof{padding-top:18px;border-top:1px solid var(--line);max-width:52ch}
}

/* 8 · FAQ i finał: więcej powietrza, spokojny hover */
html.pl #objections details>summary{transition:color .25s var(--ease)}
@media(hover:hover){html.pl #objections details>summary:hover{color:var(--gold-hi)}}
@media(min-width:1024px){
  html.pl #objections>.wrap{max-width:860px}
}

@media(prefers-reduced-motion:reduce){
  html.pl .wdd.is-ready .wdd__panel.is-on{animation:none}
  html.pl .bpt.pl-step #bpt-glod>li{opacity:1}
}
