/* Punkty lamania. Kolejnosc ma znaczenie - nie przestawiac.

   PROGI:
   1260px  nawigacja w pasku zwezona (mniejszy font, ciasniejszy padding)
   1100px  --
   1080px  uklady dwukolumnowe (.split) spadaja do jednej kolumny,
           karty zespolu jedna pod druga, znikaja wielkie numery w tle
    940px  nawigacja w pasku znika, pojawia sie przycisk .gridbtn
           i menu pelnoekranowe (tam realnie przestaje sie miescic)
    760px  MOBILE: formularz jednokolumnowy, ciasniejsze marginesy ekranow,
           pojawia sie dolny pasek CTA (.dock),
           hero przelacza sie na wariant mobilny:
           .pricecard znika, .cred (paski zaufania) sie pojawia
   wysokosc 780px  komplet zmniejszonych rozmiarow dla niskich okien,
           hint znika, przy waskim oknie znika tez karta z cennikiem
*/
@media(max-width:1260px){
    .nav a{padding:8px 10px;font-size:11.5px;letter-spacing:.05em;}
  }
  @media(max-width:940px){
    .nav{display:none;}
    .gridbtn{display:block;}
  }
  @media(max-width:1080px){
    .scr{padding:calc(var(--bar) + 40px) 40px 48px;}
    .steps{grid-template-columns:1fr 1fr;}
    .steps .step:nth-child(2n){border-right:0;}
    .steps .step:nth-child(-n+2){border-bottom:3px solid var(--ink);}
    .scope{grid-template-columns:1fr;gap:16px;}
    .plans{grid-template-columns:1fr;}
    .plans .plan{border-right:0;border-bottom:3px solid var(--ink);}
    .plans .plan:last-child{border-bottom:0;}
    .split,.split.tight{grid-template-columns:1fr;gap:38px;}
    .cards{grid-template-columns:1fr;gap:34px;}
    .num{display:none;}
    .hint{left:40px;}
  }
  @media(max-width:760px){
    .bar{padding:0 18px;}
    form{grid-template-columns:1fr;}
    .scr{padding:calc(var(--bar) + 28px) 22px 36px;}
  }
  @media(max-height:780px) and (max-width:1080px){
    /* za ciasno na karte cennika - pokazujemy kompaktowy wariant hero */
    .pricecard{display:none;}
    .cred{display:flex;margin-top:16px;gap:7px;}
    .cred span{font-size:10.5px;padding:6px 9px;border-width:2px;}
  }
  @media(max-height:780px){
    .hint{display:none;}
    .scr{padding-top:calc(var(--bar) + 30px);padding-bottom:40px;}
    h1.big{font-size:clamp(34px,4.2vw,58px);}
    h2.big{font-size:clamp(30px,3.4vw,50px);}
    .lead{font-size:16px;}
    .rule{margin:16px 0;}
    .actions{margin-top:22px;}
    .btn{padding:14px 20px;font-size:13px;}
    .pricecard{padding:26px;box-shadow:10px 10px 0 var(--ink);}
    .pricecard .row{padding:14px 0;}
    .price{font-size:clamp(26px,2.6vw,40px);}
    .card{padding:24px;}
    .avatar{width:76px;height:76px;}
    .bul{gap:11px;}
    .bul li{font-size:16px;}
    .foot{margin-top:26px;padding-top:14px;}
    .strip .tr span{font-size:16px;padding:7px 20px;}
  }

/* ---- MOBILE ---- */
@media(max-width:760px){
  /* dolny pasek CTA - widoczny tylko na mobile */
  .dock{display:flex;}
  /* miejsce na dock, zeby tresc nie chowala sie pod nim */
  .scr{padding-bottom:84px;}
  .dots{display:none;}
  .bar{gap:14px;}
  .bar .brand{font-size:19px;}
  .barcta{display:none;}
  h1.big{font-size:clamp(32px,9vw,46px);}
  h2.big{font-size:clamp(28px,8vw,40px);}
  .lead{font-size:16px;}
  .btn{padding:14px 18px;font-size:12.5px;}
  .actions{gap:10px;}
  .actions .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;}
  /* hero w wariancie mobilnym: karta cennika ustepuje miejsca paskom zaufania */
  .pricecard{display:none;}
  .cred{display:flex;margin-top:24px;gap:8px;}
  .cred span{font-size:11px;padding:8px 11px;}
  .card{padding:20px;box-shadow:8px 8px 0 var(--ink);}
  .card.dark{box-shadow:8px 8px 0 var(--orange);}
  .avatar{width:64px;height:64px;font-size:11px;}
  .cards{gap:24px;}
  .bul li{font-size:15px;}
  .forwho{font-size:14px;margin-top:20px;}
  .strip .tr span{font-size:14px;padding:6px 16px;}
  .steps{grid-template-columns:1fr;}
  .steps .step{border-right:0;border-bottom:3px solid var(--ink);padding:22px 18px;}
  .steps .step:last-child{border-bottom:0;}
  .scope .item{padding:18px;box-shadow:6px 6px 0 var(--ink);}
  .plans .plan{padding:22px 18px;}
  .faq summary{padding:16px 0;font-size:16px;}
  .faq .a{font-size:15px;padding-bottom:18px;}
  .bigq{font-size:clamp(22px,7vw,32px);}
  .foot{flex-direction:column;align-items:flex-start;gap:10px;font-size:11px;}
  .foot nav{gap:6px 14px;}
  .menu{padding:calc(var(--bar) + 24px) 22px 30px;}
  .menu a{font-size:clamp(24px,7.5vw,34px);padding:9px 0;}
}
@media(max-width:420px){
  .actions{flex-direction:column;}
  .actions .btn{width:100%;}
}