/* BWS Newsletter LP — mobile first.
   Paleta i promienie z żywego motywu bws.net.pl (#000 / #1A1A1A / #FEC311 / 13px).
   Sygnatura strony: listwa danych (.nl-strip) i arkusz briefu (.nl-sheet) —
   strona czyta się jak dokument produkcyjny, bo tak czyta jej odbiorca. */

.nl-scope{
  --ink:#000; --panel:#141414; --panel-2:#1a1a1a;
  --accent:#FEC311; --accent-d:#D7A60B;
  --head:#fff; --text:#adadad; --muted:#8e8e8e;
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.26);
  --r:13px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --pad:20px;
}
@media(min-width:700px){ .nl-scope{ --pad:36px; } }

.nl-scope *,.nl-scope *::before,.nl-scope *::after{box-sizing:border-box;}
.nl-scope{margin:0;background:var(--ink);color:var(--text);
  font-family:'Poppins',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
.nl-scope img{max-width:100%;height:auto;display:block;}
.nl-scope a{color:inherit;}
.nl-scope :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.nl-skiplink{position:absolute;left:-9999px;}
.nl-skiplink:focus{left:var(--pad);top:10px;z-index:9;background:var(--accent);color:#000;
  padding:9px 14px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none;}

/* ---------- pasek górny ---------- */
.nl-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--pad);border-bottom:1px solid var(--line);}
.nl-logo{display:block;flex:0 0 auto;}
.nl-logo img{width:88px;height:auto;}
.nl-langs{display:flex;gap:3px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;}
.nl-langs a{padding:6px 9px;border-radius:6px;color:var(--muted);text-decoration:none;
  transition:color .15s,background .15s;}
.nl-langs a:hover{color:var(--head);background:rgba(255,255,255,.06);}
.nl-langs a[aria-current]{color:#000;background:var(--accent);font-weight:600;}

/* ---------- listwa danych (sygnatura) ---------- */
.nl-strip{display:flex;align-items:center;gap:9px;margin:0 0 11px;
  font-family:var(--mono);font-size:10.5px;line-height:1.4;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.nl-micro{white-space:nowrap;}
@media(max-width:374px){
  .nl-strip,.nl-micro,.nl-countries{font-size:9.5px;letter-spacing:.08em;}
}
.nl-strip__mark{flex:0 0 auto;width:7px;height:7px;background:var(--accent);border-radius:1px;}

/* ---------- zdjęcie hero ----------
   Pionowe kadry nie znoszą cięcia w pasek, więc na desktopie zdjęcie
   dostaje własną kolumnę na pełną wysokość, a poziomy wariant zostaje
   tylko na telefonie. */
.nl-shot{display:block;}
.nl-shot img{width:100%;object-fit:cover;object-position:center 45%;display:block;}

/* ---------- pas ze zdjęciem ekipy ---------- */
.nl-band{margin:0;position:relative;}
.nl-band img{width:100%;height:104px;object-fit:cover;object-position:center 45%;display:block;}
.nl-band--tall img{height:auto;aspect-ratio:2.5/1;object-position:center 50%;}
.nl-band figcaption{padding:11px var(--pad) 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
@media(min-width:700px){ .nl-band img{height:190px;} }
@media(min-width:1100px){ .nl-band img{height:230px;} }
@media(min-width:900px){
  /* Pas przy sekcji szablonu trzyma się szyny treści, zamiast rozlewać się
     na całą szerokość monitora. */
  .nl-band--tall{max-width:1180px;margin-left:auto;margin-right:auto;padding:0 40px;}
  .nl-band--tall img{height:auto;aspect-ratio:2.5/1;border-radius:var(--r);}
}

/* ---------- hero ---------- */
/* Na telefonie kolejność DOM (nagłówek → zdjęcie → statystyki → formularz)
   spychała pole e-mail na 73-77% ekranu, a przycisk pod zgięcie. Zdjęcie
   (126 px) schodzi więc POD formularz: pole ląduje wysoko, a zdjęcie i tak
   zostaje widoczne na wysokim telefonie. Lead znika, bo powtarza to, co
   mówią już pasek danych i zdjęcie.
   Na desktopie nic z tego nie obowiązuje — tam zdjęcie jest prawą kolumną. */
.nl-hero{padding:16px var(--pad) 26px;display:flex;flex-direction:column;}
.nl-hero__head{order:1;}
.nl-proof{order:2;}
.nl-hero .nl-form{order:3;}
.nl-shot{order:4;}
.nl-hero__f{order:5;}
.nl-lead{display:none;}
.nl-h1{font-size:clamp(27px,6.8vw,58px);}
.nl-shot{margin:20px 0 0;}
.nl-shot img{height:124px;}
.nl-h1{margin:0 0 14px;color:var(--head);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(30px,8.4vw,58px);line-height:.99;letter-spacing:-.015em;text-wrap:balance;}
.nl-h1__hl{display:block;color:var(--accent);font-size:.63em;line-height:1.08;margin-top:.3em;}
.nl-lead{margin:0 0 16px;font-size:16px;line-height:1.5;max-width:46ch;}

.nl-micro{margin:16px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.nl-scroll{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:13px;
  font-weight:500;color:var(--muted);text-decoration:none;transition:color .15s;}
.nl-scroll:hover{color:var(--accent);}
.nl-scroll svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

/* dowód dostarczalności: nad formularzem, bo to on przekonuje do zostawienia maila */
.nl-proof{list-style:none;display:flex;gap:22px;margin:14px 0 0;padding:11px 0 0;
  border-top:1px solid var(--line);}
.nl-proof li{min-width:0;}
.nl-proof b{display:block;color:var(--accent);font-weight:700;font-style:italic;
  font-size:clamp(24px,6.4vw,30px);line-height:1;letter-spacing:-.02em;}
.nl-proof span{display:block;margin-top:4px;font-size:11.5px;line-height:1.3;color:var(--muted);
  max-width:19ch;}

/* ---------- formularz ---------- */
.nl-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;}
.nl-hero .nl-form{margin-top:18px;}   /* na desktopie zeruje to row-gap siatki */
.nl-field__label{display:block;margin-bottom:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.nl-field__input{width:100%;background:#000;border:1px solid var(--line-2);border-radius:9px;
  padding:14px 15px;color:var(--head);font:inherit;font-size:16px;transition:border-color .15s;}
.nl-field__input::placeholder{color:#5f5f5f;}
.nl-field__input:focus{border-color:var(--accent);outline:none;}
.nl-field__input[aria-invalid="true"]{border-color:#e0564c;}

.nl-scope .nl-btn{color:#000;}
.nl-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;margin-top:14px;
  background:var(--accent);color:#000;border:0;border-radius:9px;padding:16px 20px;
  font:inherit;font-weight:700;font-size:15.5px;letter-spacing:.01em;cursor:pointer;
  text-decoration:none;transition:background .15s,transform .08s;}
.nl-btn:hover{background:var(--accent-d);}
.nl-btn:active{transform:translateY(1px);}
.nl-btn[disabled]{opacity:.6;cursor:default;}
.nl-btn__i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.nl-scope .nl-btn--ghost{color:var(--head);}
.nl-btn--ghost{width:auto;margin-top:0;background:transparent;
  border:1px solid var(--line-2);padding:14px 20px;font-size:14.5px;}
.nl-btn--ghost:hover{background:rgba(255,255,255,.07);}
.nl-btn--dl{margin-top:2px;}

/* załącznik: wygląda jak plik doczepiony do zapisu */

/* plakietka z magnesem: lekka, bo nagłówek już go sprzedał */
.nl-badge{display:flex;align-items:center;gap:11px;margin:11px 0 0;padding:9px 12px;
  border:1px dashed var(--line-2);border-radius:9px;background:rgba(254,195,17,.05);}
.nl-badge__i{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.nl-badge b{display:block;color:var(--head);font-weight:600;font-size:13.5px;line-height:1.3;}
.nl-badge em{display:block;margin-top:2px;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

@media(max-height:700px){ .nl-badge{padding:8px 11px;margin-top:10px;} }

/* zgoda */
.nl-consent{display:flex;align-items:flex-start;gap:10px;margin-top:12px;cursor:pointer;
  font-size:12.5px;line-height:1.5;color:var(--muted);}
.nl-consent input{position:absolute;opacity:0;width:0;height:0;}
.nl-consent__box{flex:0 0 auto;width:19px;height:19px;margin-top:1px;border:1px solid var(--line-2);
  border-radius:5px;display:grid;place-items:center;transition:background .15s,border-color .15s;}
.nl-consent__box svg{width:12px;height:12px;fill:none;stroke:#000;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .12s;}
.nl-consent input:checked + .nl-consent__box{background:var(--accent);border-color:var(--accent);}
.nl-consent input:checked + .nl-consent__box svg{opacity:1;}
.nl-consent input:focus-visible + .nl-consent__box{outline:2px solid var(--accent);outline-offset:2px;}
.nl-consent__t a{color:var(--text);text-underline-offset:2px;}
.nl-consent__t a:hover{color:var(--accent);}

.nl-err{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:rgba(224,86,76,.12);
  border:1px solid rgba(224,86,76,.4);color:#f0a29b;font-size:13px;line-height:1.45;}
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* stan po zapisie */
.nl-done__h:focus{outline:none;}
.nl-done__h{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--head);
  font-weight:700;font-style:italic;text-transform:uppercase;font-size:20px;letter-spacing:-.01em;}
.nl-done__tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;}
.nl-done__tick svg{width:14px;height:14px;fill:none;stroke:#000;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;}
.nl-done__note{margin:10px 0 0;font-size:12.5px;color:var(--muted);}
.nl-phone{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line);}
.nl-phone__row{display:flex;gap:9px;}
.nl-phone__row .nl-field__input{flex:1 1 auto;min-width:0;}
.nl-phone__hint{margin:9px 0 0;font-size:12.5px;color:var(--muted);}
.nl-skip{margin-top:12px;background:none;border:0;padding:0;color:var(--muted);
  font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.nl-skip:hover{color:var(--head);}
.nl-done__bye{margin:14px 0 0;color:var(--accent);font-size:14px;font-weight:600;}

/* ---------- sekcje ---------- */
.nl-sec{padding:44px var(--pad);border-top:1px solid var(--line);}
.nl-h2{margin:0 0 18px;color:var(--head);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(23px,5.6vw,36px);line-height:1.04;letter-spacing:-.012em;text-wrap:balance;}
.nl-body{margin:0;font-size:15.5px;line-height:1.65;max-width:60ch;}
.nl-body--lg{font-size:17px;color:var(--head);max-width:46ch;}
.nl-note{margin:18px 0 0;font-size:13px;color:var(--muted);}

/* lista wydań: czyta się jak run list z produkcji */
.nl-run{list-style:none;margin:0;padding:0;}
.nl-run__i{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line);}
.nl-run__i:first-child{border-top:0;padding-top:4px;}
.nl-run__d{flex:0 0 auto;width:76px;padding-top:3px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;color:var(--accent);}
.nl-run__b{min-width:0;}
.nl-run__s{display:block;color:var(--head);font-weight:600;font-size:15.5px;line-height:1.35;}
.nl-run__g{display:block;margin-top:6px;font-size:14px;line-height:1.55;color:var(--muted);}

/* arkusz briefu */
.nl-sheet{margin:22px 0 0;padding:4px 0 0;border-top:1px solid var(--line-2);}
.nl-sheet__r{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);}
.nl-sheet__r dt{flex:0 0 92px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);padding-top:2px;}
.nl-sheet__r dd{margin:0;min-width:0;font-size:14.5px;line-height:1.5;color:var(--text);}

/* dowody */
.nl-sec--proof{background:var(--panel-2);}
.nl-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.nl-stats li{background:var(--panel-2);padding:20px 16px;}
.nl-stats b{display:block;color:var(--accent);font-weight:700;font-style:italic;
  font-size:clamp(28px,7.5vw,40px);line-height:1;letter-spacing:-.02em;}
.nl-stats span{display:block;margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--muted);}
.nl-countries{margin:18px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  line-height:1.8;color:var(--muted);text-transform:uppercase;}

/* archiwum */
.nl-arch{list-style:none;margin:0;padding:0;}
.nl-arch li{border-top:1px solid var(--line);}
.nl-arch li:first-child{border-top:0;}
.nl-arch a{display:flex;align-items:flex-start;gap:14px;padding:16px 0;text-decoration:none;
  transition:padding-left .18s;}
.nl-arch a:hover{padding-left:6px;}
.nl-arch__b{flex:1 1 auto;min-width:0;}
.nl-arch__t{display:block;color:var(--head);font-weight:600;font-size:15px;line-height:1.35;}
.nl-arch__g{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--muted);}
.nl-arch__i{flex:0 0 auto;margin-top:3px;width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s;}
.nl-arch a:hover .nl-arch__i{stroke:var(--accent);}

/* drugie CTA */
.nl-sec--cta{background:var(--panel-2);}
.nl-h2--cta{margin-bottom:12px;}
.nl-sec--cta .nl-body{margin-bottom:22px;}
.nl-sec--cta .nl-form{background:var(--ink);}

/* ---------- stopka ---------- */
.nl-foot{padding:26px var(--pad) 34px;border-top:1px solid var(--line);}
.nl-foot__l{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;font-size:12.5px;color:var(--muted);}
.nl-foot__l a{text-decoration:none;transition:color .15s;}
.nl-foot__l a:hover{color:var(--accent);}
.nl-foot__c{margin:16px 0 0;font-size:12.5px;color:var(--muted);}
.nl-foot__c a{color:var(--accent);text-underline-offset:3px;}

/* Szyna jest szeroka, ale miara wiersza zostaje czytelna. */
@media(min-width:900px){
  .nl-body{max-width:62ch;}
  .nl-run__g{max-width:72ch;}
  .nl-sheet__r dd{max-width:64ch;}
  .nl-band figcaption{max-width:1100px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;}
}

/* ---------- desktop ---------- */
@media(min-width:900px){
  .nl-top{padding:20px 40px;}
  .nl-logo img{width:110px;}
  .nl-lead{display:block;}
  .nl-h1{font-size:clamp(30px,3.6vw,48px);}
  .nl-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    grid-template-rows:auto auto auto auto;
    column-gap:52px;row-gap:26px;align-content:start;
    padding:38px 40px 52px;max-width:1180px;margin:0 auto;}
  .nl-h1{font-size:clamp(30px,3.6vw,48px);}
  .nl-hero__head{grid-column:1;grid-row:1;order:0;}
  .nl-hero__head,.nl-proof,.nl-hero .nl-form,.nl-shot,.nl-hero__f{order:0;}
  .nl-proof{grid-column:1;grid-row:2;}
  .nl-hero .nl-form{grid-column:1;grid-row:3;max-width:470px;padding:22px;margin-top:0;}
  .nl-hero__f{grid-column:1;grid-row:4;}
  .nl-shot{grid-column:2;grid-row:1 / span 4;align-self:stretch;position:relative;min-height:0;}
  .nl-shot img{position:absolute;inset:0;width:100%;height:100%;min-height:0;
    border-radius:var(--r);object-position:center 30%;}
  .nl-hero__head{align-self:start;}
  .nl-shot{margin:0;}
  .nl-lead{margin-bottom:0;}
  .nl-h1{margin-bottom:20px;}
  .nl-lead{margin-bottom:0;font-size:17px;}
  .nl-proof{margin-top:24px;padding-top:12px;}
  .nl-micro{margin-top:0;}
  .nl-scroll{margin-top:10px;}
  .nl-sec{padding:74px 40px;}
  .nl-sec > *{max-width:1100px;margin-left:auto;margin-right:auto;}
  .nl-stats{grid-template-columns:repeat(4,1fr);}
  .nl-run__d{width:96px;}
  .nl-sheet__r dt{flex-basis:130px;}
  .nl-foot{padding:30px 40px 44px;}
  .nl-foot__l,.nl-foot__c{max-width:1100px;margin-left:auto;margin-right:auto;}
}

/* Zapas pod formularzem, żeby po podniesieniu klawiatury dało się
   doscrollować pole i przycisk ponad nią. */
.nl-hero{scroll-padding-top:12px;}
.nl-form{scroll-margin-top:12px;}

/* ---------- laptop: szeroko, ale nisko ----------
   1440x900 daje ok. 729 px widoku. Bez tego przycisk i zgoda wypadają
   pod zgięcie, czyli dokładnie tam, gdzie nie powinny na płatnym ruchu. */
@media(min-width:1000px) and (max-height:820px){
  .nl-hero{padding-top:22px;padding-bottom:34px;row-gap:22px;}
  .nl-h1{font-size:clamp(28px,3.1vw,40px);}
  .nl-lead{font-size:15.5px;}
  .nl-proof{margin-top:18px;padding-top:10px;}
  .nl-proof b{font-size:26px;}
  .nl-badge{margin-top:10px;padding:9px 12px;}
  .nl-hero .nl-form{padding:18px;}
}

/* ---------- ruch ---------- */
@media(prefers-reduced-motion:no-preference){
  .nl-rise{opacity:0;transform:translateY(14px);}
  .nl-rise.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);}
  .nl-hero > *{animation:nlUp .55s cubic-bezier(.2,.7,.3,1) backwards;}
  .nl-hero__l > *{animation:nlUp .55s cubic-bezier(.2,.7,.3,1) backwards;}
  .nl-hero__l > *:nth-child(1){animation-delay:.04s;}
  .nl-hero__l > *:nth-child(2){animation-delay:.10s;}
  .nl-hero__l > *:nth-child(3){animation-delay:.16s;}
  .nl-hero > *:nth-child(1){animation-delay:.04s;}
  .nl-hero > *:nth-child(2){animation-delay:.10s;}
  .nl-hero > *:nth-child(3){animation-delay:.16s;}
  .nl-hero > *:nth-child(4){animation-delay:.22s;}
  .nl-hero > *:nth-child(5){animation-delay:.28s;}
  .nl-hero > *:nth-child(6){animation-delay:.34s;}
  @keyframes nlUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
}
@media(prefers-reduced-motion:reduce){
  .nl-scope *{animation:none!important;transition:none!important;}
  .nl-rise{opacity:1;transform:none;}
}

/* ---------- niskie ekrany (iPhone SE i podobne) ----------
   Cały formularz razem ze zgodą musi zmieścić się nad zgięciem.
   Inaczej człowiek klika „Zapisz się", dostaje błąd o niezaznaczonej zgodzie
   i nie widzi ani zgody, ani błędu, bo są poniżej ekranu. */
@media(max-height:700px){
  .nl-shot{margin-top:14px;}
  .nl-shot img{height:104px;object-position:center 40%;}
  .nl-hero{padding-top:14px;padding-bottom:20px;}
  .nl-h1{font-size:clamp(21px,5.5vw,44px);line-height:1.01;margin-bottom:8px;}
  /* Lead znika: nagłówek plus zdjęcie plus załącznik mówią już wszystko,
     a zgoda musi zostać nad zgięciem. */
  .nl-lead{display:none;}
  .nl-proof{margin-top:14px;padding-top:10px;gap:18px;}
  .nl-hero .nl-form{margin-top:14px;}
  .nl-proof b{font-size:21px;}
  .nl-proof span{font-size:10.5px;margin-top:2px;line-height:1.3;}
  .nl-strip{margin-bottom:11px;}
  .nl-form{padding:14px;}
  .nl-field__label{margin-bottom:4px;}
  .nl-field__input{padding:12px 14px;}
  .nl-btn{margin-top:9px;padding:14px 18px;}
          .nl-consent{margin-top:11px;}
  .nl-micro{margin-top:11px;}
  .nl-scroll{margin-top:14px;}
}