/* PROPOZYCJA B – układ mobilny „aplikacja": okładka na górze, przesuwane karty, mniej przewijania.
   Nakładka na style.css, działa tylko na telefonach (≤760px). Nie wpływa na komputer. */
@media (max-width:760px){
  html{scroll-padding-top:64px}
  body{font-size:16.5px}
  .wrap{padding-inline:18px}
  .section{padding:40px 0}
  .title{font-size:25px;line-height:1.18}
  .lead{font-size:17px}

  /* nagłówek niższy */
  .top__in{height:60px}
  .logo__brand{height:50px}
  .menu{top:60px}

  /* HERO: okładka najpierw, potem hasło i jeden duży przycisk */
  .hero{padding:18px 0 34px}
  .hero__in{display:flex;flex-direction:column;gap:18px}
  .desk-wrap{order:-1;width:min(100%,330px);max-width:330px;margin:0 auto;align-self:center}
  /* bez zależności od jednostek cqw (starsze telefony): rozmiar sceny liczony z szerokości ekranu */
  .desk{font-size:calc(min(100vw - 36px,330px)/100)}
  .hero__text{text-align:center}
  .eyebrow{font-size:12px;letter-spacing:.08em}
  .hero h1{font-size:27px;line-height:1.15;margin:8px 0 10px}
  .hero__lead{font-size:16.5px;margin:0 0 16px}
  .hero__cta{display:flex;flex-direction:column;gap:10px}
  .hero__cta .btn--ghost{padding:12px;font-size:15px;opacity:.9}
  /* fakty w siatce 2x2 */
  .hero__facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 12px;padding:0;list-style:none}
  .hero__facts li{background:rgba(255,255,255,.08);border-radius:14px;padding:10px 6px;text-align:center;font-size:14px}
  .hero__facts b{display:block;font-size:22px;color:var(--gold)}
  .hero__pay{font-size:13.5px;opacity:.85}

  /* wszystko pionowo, bez przewijania w bok, ale zwarciej */
  .quotes,.cast,.toc{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0;overflow:visible}
  .quote:nth-child(n){transform:none}
  .quote{padding:18px 18px 16px;min-height:0}
  .quote p,.quote blockquote{font-size:18px}
  .cast>*{margin:0}
  .toc li{min-height:0;padding:14px 16px}
  .toc h3{font-size:18px}
  .toc p{font-size:15px}
  .gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;margin:0;padding:0}
  .ill{display:grid;grid-template-columns:1fr;gap:12px;overflow:visible;margin:0;padding:0}
  .quotes{margin-top:22px}
  .cast{margin-top:20px}
  .toc{margin-top:22px}
  .gallery{margin-top:22px}
  .ill{margin-top:22px}

  .heroes{display:block}
  .heroes>*{min-width:0;max-width:100%}
  .heroes img{max-width:100%;height:auto}
  .quote{min-height:0}

  /* rodzice i zakup: kompaktowo */
  .parents{gap:20px}
  .buy__cover img{max-width:200px}
  .buy__price{font-size:48px}
  .faq details{padding:2px 0}

  /* przyklejony pasek zakupu wyższy i wyraźniejszy */
  .sticky-buy{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .sticky-buy .btn{padding:13px 22px;font-size:17px}
  body{padding-bottom:78px}
}