/* krocej.css — etap 4 (03.10): krótsza strona i sekcja „Branże”. Ładowany po sytuacje.css (PL i DE).
   Mobile first. Nadpisuje odstępy, skraca karty cen, kanały jako plakietki, ankieta od razu otwarta. */

/* ───────── rytm: ciaśniej na telefonie ───────── */
@media (max-width:767px){
  .sekcja{padding-block:60px 52px}
  .glowa{margin-bottom:26px}
  h2{margin-bottom:14px}
  .sub{font-size:17px}
  .etykieta{margin-bottom:14px}
}
@media (min-width:768px) and (max-width:1023px){.sekcja{padding-block:88px 76px}}
@media (min-width:1024px){.sekcja{padding-block:clamp(96px,8.5vw,140px) clamp(72px,7vw,104px)}}

/* taśma między hero (na końcu pinu jasne) a papierem „Branż”: całość na papierze; w reduced hero ciemne, taśma i tak je przecina */
.tasma-na-papier{background:var(--papier)}

/* ───────── Branże (#na-miare) ───────── */
.branze-teza{max-width:26ch;font-size:clamp(1.2rem,1rem + .9vw,1.6rem);font-weight:800;line-height:1.3;letter-spacing:-.012em;color:var(--tusz);text-wrap:balance}
.branze-zal{margin-top:24px;padding-top:18px;border-top:1px solid var(--linia)}
.branze-zal p{max-width:46ch;font-size:16px;line-height:1.55;color:var(--tusz2)}
.branze-zal figcaption{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:14.5px;line-height:1.35;color:var(--tusz2)}
.branze-zal strong{color:var(--tusz);font-weight:800}
.branze-zal .zal-inicjaly{width:40px;height:40px;border-radius:11px;font-size:16px}
.branze-prawa{margin-top:30px}
.branze-lista{border-top:2px solid var(--tusz)}
.branza{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;padding:13px 0 14px;border-bottom:1px solid var(--linia)}
.branza-ik{grid-row:span 3;width:22px;height:22px;margin-top:5px;color:var(--tusz)}
.branza h3{font:600 1.55rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.branza p{grid-column:2;margin-top:3px;font-size:15px;line-height:1.4;color:var(--tusz2)}
.branza-plak{grid-column:2;justify-self:start;margin-bottom:8px;padding:5px 8px;border-radius:999px;background:var(--zolty);color:var(--tusz);font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
/* budowa: rodowód, czarny z żółtym */
.branza-dom{margin:12px 0 4px;padding:16px 16px 17px;border:0;border-radius:16px;background:var(--tusz);color:var(--noc-tekst)}
.branza-dom .branza-ik{color:var(--zolty)}
.branza-dom h3{color:#fff}
.branza-dom p{color:var(--noc-mute)}
/* „Twoja firma?” = link do kontaktu */
.branza-ty{padding:0}
.branza-ty a{grid-column:1/-1;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;padding:13px 0 14px;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.branza-ty h3{justify-self:start;text-decoration:underline;text-decoration-color:var(--zolty);text-decoration-thickness:3px;text-underline-offset:5px}
.branza-ty .branza-ik{transition:transform .3s var(--ease)}
.branza-ty a:hover .branza-ik{transform:translateX(4px)}
.branza-ty a:focus-visible{outline:3px solid var(--tusz);outline-offset:2px;border-radius:10px}
.branze-dop{margin-top:18px}
@media (min-width:640px){
  .branze-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .branza-dom{grid-column:1/-1}
}
@media (min-width:1024px){
  .branze-siatka{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
  .branze-prawa{margin-top:0;padding-top:6px}
  .branza h3{font-size:1.85rem}
  .branza-dom{padding:22px 24px}
}

/* ───────── #rozmowa: krócej ───────── */
@media (max-width:1023px){
  .rozmowa-siatka{gap:18px}
  .rozmowa .orb{width:min(30vw,120px)}
  .rozmowa .demo{margin-top:20px}
}

/* ───────── #jak-dziala: kanały jako plakietki ───────── */
.kanaly-krotko{margin-top:clamp(32px,5vw,64px)}
.kanaly-plak{display:flex;flex-wrap:wrap;gap:8px}
.kanaly-plak li{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 14px;border-radius:14px;background:var(--tusz);color:var(--noc-tekst);font-size:15px;font-weight:700;line-height:1.3}
.kanaly-plak .ik{width:18px;height:18px;color:var(--zolty)}
.kanaly-plak small{padding:4px 7px;border:1px solid var(--noc-linia);border-radius:999px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--noc-mute)}

/* ───────── #przyklad: plakietka zamiast przypisu ───────── */
.plak-dane{display:inline-block;margin-top:14px;padding:6px 10px;border:1px solid var(--noc-linia);border-radius:999px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--noc-mute)}

/* ───────── #koszt: ankieta od razu otwarta ───────── */
.ankieta-otwarta{margin-top:0}
.ankieta-otwarta .ankieta-pola{margin-top:0}
.ankieta-h{display:block;margin-bottom:2px;font:600 clamp(1.7rem,1.3rem + 2vw,3rem)/1.08 var(--f-display);text-transform:uppercase;text-wrap:balance}
.ankieta-otwarta .ankieta-opis{margin:4px 0 8px}
@media (max-width:767px){
  .ankieta-otwarta{padding:20px 16px 18px}
  .ankieta-otwarta .przel{min-height:54px;margin-top:7px;padding:10px 12px}
  .ankieta-otwarta .przel-t{font-size:16px}
  .ankieta-otwarta .ankieta-wa{margin-top:14px}
}

/* ───────── #cena: kompakt ───────── */
.cena-krotka .kotwica{margin-bottom:20px;padding:16px 16px 16px}
.cena-krotka .kotwica-tor li{grid-template-columns:7.4rem minmax(0,1fr);align-items:baseline;gap:12px;padding:8px 0}
.cena-krotka .kotwica-tor li{display:grid}
.cena-krotka .kotwica-k,.cena-krotka .kotwica-a .kotwica-k{font-size:1.75rem}
.cena-krotka .kotwica-o{font-size:14px;line-height:1.35}
.cena-krotka .kotwica-wniosek{padding-top:12px;font-size:1.05rem}
.cena-krotka .plan-kto{margin-top:6px;font-size:15px}
.cena-krotka .plan-cena{margin:16px 0 6px;padding-top:14px}
.cena-krotka .plan-lista{margin:12px 0 6px}
.cena-krotka .plan-lista li{padding:8px 0 8px 30px;font-size:15px;line-height:1.4}
.cena-krotka .plan-lista li::before{top:9px}
.plan-wiecej{margin:0 0 16px}
.plan-wiecej>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.plan-wiecej>summary::-webkit-details-marker{display:none}
.plan-wiecej>summary::after{content:"+";display:grid;place-items:center;width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%;font:700 14px/1 var(--f-tekst)}
.plan-wiecej[open]>summary::after{content:"−"}
.plan-wiecej>summary:hover{text-decoration:underline;text-underline-offset:4px}
.plan-wiecej .plan-lista{margin:0 0 4px}
.plan-wyrozniony .plan-wiecej>summary{color:var(--noc-tekst)}
.cena-krotka .plan-miara .plan-kto{margin:4px 0 18px}
.cena-krotka .decyzja{margin-top:18px}
.cena-krotka .cena-pewnosc{margin-top:20px}
.cena-krotka .gwarancja h3{margin-bottom:12px;font-size:clamp(1.55rem,1.3rem + 1.2vw,2.2rem)}
.cena-krotka .gwar-dni{margin-bottom:12px}
.cena-krotka .gwar-dni p{padding:10px 12px 12px}
.cena-krotka .gwar-dni b{font-size:1.9rem}
.cena-krotka .gwarancja>p{font-size:15px;line-height:1.5}
.zmiana-h{margin-bottom:12px;font:500 12px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tusz2)}
.zmiana-plak{display:flex;flex-wrap:wrap;gap:8px}
.zmiana-plak li{display:inline-flex;align-items:center;gap:7px;padding:8px 12px 8px 9px;border:1px solid var(--linia);border-radius:999px;background:var(--papier2);font-size:14.5px;font-weight:700;line-height:1.3}
.zmiana-plak li::before{content:"";flex:none;width:17px;height:17px;background:var(--ik-ok) center/contain no-repeat}
.cena-krotka .cena-dodatki{grid-template-columns:minmax(0,1fr);margin-top:14px}
.cena-krotka .cena-dodatki .ak-tresc p{max-width:72ch;font-size:15px;line-height:1.55}
.cena-krotka .cena-dodatki .ak-tresc a{color:var(--tusz);font-weight:700;text-underline-offset:3px}
.cena-krotka .kotwica-glowa{flex-direction:row;align-items:center;margin-bottom:2px}
.cena-krotka .plan:not(.plan-miara) .plan-cta .btn-linia{min-height:44px;padding-block:8px;border-color:transparent;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.cena-krotka .plan-miara .plan-cena{margin-top:10px;padding-top:12px}
.cena-krotka .plan-miara .plan-wycena{font-size:1.45rem}
@media (max-width:767px){
  .cena-krotka .plan{padding:24px 18px 18px;border-radius:22px}
  .cena-krotka .plan-cta{gap:4px}
  .cena-krotka .plan-miara{padding:20px 18px 18px}
  .cena-krotka .plan-miara .plan-nazwa{font-size:1.75rem}
  .cena-krotka .zmiana{padding:4px 0 0;border:0;background:transparent}
  .cena-krotka .gwarancja .etykieta{margin-bottom:8px}
  .cena-krotka .gwar-dni{gap:8px}
  .cena-krotka .gwar-dni p{flex-basis:120px;gap:2px;padding:8px 12px 10px}
  .cena-krotka .gwar-dni b{font-size:1.7rem}
  .cena-krotka .plan-nazwa{font-size:1.85rem}
  .cena-krotka .plan-cena{margin:12px 0 2px;padding-top:12px}
  .cena-krotka .plan-dzien{margin:0 0 4px}
  .cena-krotka .plan-lista li{padding:6px 0 6px 30px}
  .cena-krotka .plan-lista li::before{top:7px}
  .cena-krotka .plan-lista{margin:10px 0 2px}
  .plan-wiecej{margin-bottom:8px}
  .cena-krotka .kotwica-tor li{padding:6px 0}
  .cena-krotka .plan-miara .plan-cena{margin-top:6px;padding-top:8px}
  .cena-krotka .plan-miara .plan-kto{margin:2px 0 12px}
  .zmiana-plak{gap:6px}
  .zmiana-plak li{padding:6px 11px 6px 8px;font-size:14px}
  .cena-krotka .gwarancja h3{margin-bottom:10px}
  .cena-krotka .glowa{margin-bottom:18px}
  .cena-krotka .plany{gap:10px}
  .cena-krotka .plan-miara .plan-cena{border-top:0;padding-top:0}
  .cena-krotka .plan-miara .plan-cta .btn{min-height:44px;padding-block:8px}
  .cena-krotka .cena-pewnosc{margin-top:14px;gap:10px}
  .cena-krotka .cena-dodatki{margin-top:10px}
  .zmiana-h{margin-bottom:8px}
  .cena-krotka .plan-badge{top:22px;right:18px}
  .cena-krotka .plan-kwota{font-size:3.1rem}
  .cena-krotka .gwarancja,.cena-krotka .zmiana{padding:18px 16px 16px}
  .cena-krotka .plany{gap:12px}
}
@media (min-width:768px){
  .cena-krotka .kotwica{padding:22px 28px 24px}
  .cena-krotka .kotwica-tor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:6px 0 14px}
  .cena-krotka .kotwica-tor li{grid-template-columns:minmax(0,1fr);align-content:start;gap:4px;padding:6px 20px}
  .cena-krotka .kotwica-tor li:first-child{padding-left:0}
  .cena-krotka .kotwica-tor li+li{border-top:0;border-left:1px solid var(--linia)}
  .cena-krotka .kotwica-k,.cena-krotka .kotwica-a .kotwica-k{font-size:clamp(2rem,1.4rem + 1.4vw,2.8rem)}
  .cena-krotka .kotwica-wniosek{font-size:1.2rem}
  .cena-krotka .cena-pewnosc{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .cena-krotka .gwarancja,.cena-krotka .zmiana{padding:26px 28px 24px}
}

/* ───────── #faq: ciaśniej ───────── */
.faq .ak-tresc .ticks{margin:6px 0 10px}
.faq .ak-tresc .ticks li{font-size:15.5px}
.faq .ak-tresc a{color:var(--tusz);font-weight:700;text-underline-offset:3px}
@media (max-width:767px){
  .faq .glowa{margin-bottom:18px}
  .faq .ak>summary{min-height:58px;padding:12px 0}
  .faq .ak-t{font-size:17px}
  .obawy{margin-bottom:22px;padding:20px 16px 6px}
  .obawy h3{font-size:1.7rem}
  .obawy .ak>summary{min-height:56px;padding:11px 0}
  .obawy .ak-t{font-size:16.5px}
}

/* ───────── #kontakt: ciaśniej ───────── */
@media (max-width:767px){
  .kontakt .h-ogromny{margin-bottom:18px}
  .kontakt .kontakt-karty{gap:10px;margin-top:28px}
  .kontakt .kontakt-karta{padding:18px 18px 20px}
  .kontakt .kontakt-link{margin:10px 0 6px}
  .kontakt .kontakt-zasady{margin-top:22px}
}

/* ───────── poprawki r1 (03.10) ───────── */
/* taśma: kropki z CSS, nie z tekstu */
.tasma-kawalek i{font-style:normal}
.tasma-kawalek i::after{content:" · "}
/* plakietka „dane przykładowe” na papierze */
.papier .plak-dane{border-color:var(--linia);color:var(--tusz2)}
/* hero: lead nie wchodzi pod karteczki chaosu */
@media (max-width:767px){.hero .lead{max-width:30ch;text-wrap:balance}}
/* branże: bez czarnej linii nad czarnym kaflem, ikona w linii nazwy */
.branze-lista{border-top:0}
.branza-dom{margin-top:0}
.branza-dom .branza-ik{grid-column:1;grid-row:2;align-self:center;margin-top:0}
/* #koszt na nocy: karta ankiety jak kartka */
.koszt.noc .ankieta{color:var(--tusz);border-color:var(--karta)}
.koszt.noc .zakreslacz{color:var(--tusz)}
/* #koszt desktop: nagłówek z lewej, ankieta z prawej, bez pustej ramki */
@media (min-width:1024px){
  .koszt .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
  .koszt h2{font-size:clamp(2.6rem,1.2rem + 2.6vw,3.7rem)}
  .koszt .glowa{position:sticky;top:96px;margin-bottom:0}
  .ankieta-otwarta .ankieta-cialo{display:block}
  .ankieta-otwarta .ankieta-wynik{margin-top:16px}
  .ankieta-otwarta:not(.ma) .ankieta-wynik{display:none}
}

/* ───────── #cena: płatność roczna przy planie + pilotaż (04.10) ───────── */
.plan-rok{display:grid;gap:5px;margin:14px 0 4px;padding:12px 14px 10px;border:1.5px solid var(--linia);border-radius:14px;background:var(--papier2);color:var(--tusz);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background-color .2s}
.plan-rok:hover{border-color:var(--zolty)}
.plan-rok-cena{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.plan-rok-tag{align-self:center;padding:5px 7px 4px;border-radius:6px;background:var(--zolty);color:var(--tusz);font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.plan-rok-cena b{font:600 1.65rem/1 var(--f-display);letter-spacing:.005em;white-space:nowrap;font-variant-numeric:tabular-nums}
.plan-rok-cena small{font-size:14px;color:var(--tusz2)}
.plan-rok-opis{font-size:14.5px;line-height:1.4;color:var(--tusz2)}
.plan-rok-opis b{color:var(--tusz);white-space:nowrap}
.plan-rok-link{justify-self:start;font-size:15px;font-weight:800;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.plan-rok:hover .plan-rok-link{text-decoration-color:var(--zolty)}
.plan-wyrozniony .plan-rok{border-color:var(--noc-linia);background:var(--noc3);color:var(--noc-tekst)}
.plan-wyrozniony .plan-rok:hover{border-color:var(--zolty)}
.plan-wyrozniony .plan-rok-cena small,.plan-wyrozniony .plan-rok-opis{color:var(--noc-mute)}
.plan-wyrozniony .plan-rok-opis b{color:var(--noc-tekst)}
.pilotaz{position:relative;display:grid;gap:14px;max-width:1140px;margin:20px auto 0;padding:24px 18px 18px;border:1px solid var(--linia);border-radius:22px;background:var(--karta);overflow:hidden}
.pilotaz::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(-45deg,var(--zolty) 0 10px,var(--tusz) 10px 20px)}
.pilotaz-tag{margin-bottom:8px;font:500 12px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tusz)}
.pilotaz-tekst{max-width:64ch;font-size:15.5px;line-height:1.5;color:var(--tusz2)}
.pilotaz-tekst b{color:var(--tusz);white-space:nowrap}
.pilotaz-btn{font-size:15px}
@media (min-width:768px){.pilotaz{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:28px 28px 24px}}
@media (max-width:767px){.cena-krotka .pilotaz{margin-top:14px}}