/* Instrukcja „Nadaj dostęp do konta reklamowego" (/dostepy). Arkusz WŁASNY, nie wspólny.
   nowy plik = nowy token ?v=, więc nie trzeba ruszać żadnej z pięciu rodzin tokenów opisanych
   w KICKOFF_STRONA_PB.md §1. Paleta i krój marki PB (limonka #B0E600, Archivo w nagłówkach). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/archivo-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/archivo-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --acc:#B0E600;
  --acc-deep:#4B6100;      /* limonka czytelna na bieli (WCAG AA) */
  --ink:#0E0F12;
  --mute:#585F6B;
  --line:#E2E5E9;
  --paper:#F6F7F8;
  --wrap:min(760px, calc(100% - 36px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-width:320px;overflow-x:hidden;background:#fff;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,sans-serif;
  font-size:17px;line-height:1.6;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--acc-deep)}
h1,h2,h3,.nr{font-family:'Archivo',sans-serif;letter-spacing:-.02em}
.wrap{width:var(--wrap);margin-inline:auto}

.top{border-bottom:1px solid var(--line);background:#fff}
.top .wrap{display:flex;align-items:center;min-height:72px}
.top img{width:180px;height:auto}

/* Hero na czerni, ten sam zabieg co na stronach ofertowych PB. */
.hero{background:var(--ink);color:#fff;padding:56px 0 52px}
.hero .eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
.hero h1{margin:0;font-size:clamp(1.9rem,5.2vw,3rem);line-height:1.08;font-weight:800}
.hero h1 .acc{color:var(--acc)}
.hero p{margin:18px 0 0;font-size:1.05rem;color:rgba(255,255,255,.82);max-width:60ch}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.meta span{border:1px solid rgba(255,255,255,.28);padding:7px 13px;font-size:.86rem;color:rgba(255,255,255,.9)}

main{padding:44px 0 12px}

/* Powietrze między krokami (Rafał 11.09.2026: „od piątego punktu to ściana tekstu"). Odstęp robi
   linia plus padding kroku, nie margines zdjęcia, więc działa tak samo, gdy między krokami wchodzi
   blok „Pamiętaj" albo czarny „Nie klikaj jeszcze". Pierwszy krok bez linii, bo stoi tuż pod hero. */
.krok{margin:0 0 18px;padding-top:46px;border-top:1px solid var(--line)}
.krok:first-of-type{padding-top:8px;border-top:0}
.krok .nr{display:inline-block;min-width:34px;height:34px;line-height:34px;text-align:center;
  background:var(--acc);color:var(--ink);font-weight:800;font-size:1.05rem;margin-bottom:14px}
.krok .gdzie{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.krok h2{margin:0 0 12px;font-size:clamp(1.25rem,3.2vw,1.55rem);font-weight:800;line-height:1.2}
.krok p{margin:0 0 10px;max-width:62ch}
.krok+.foto{margin-top:20px}

.foto{margin:0 0 12px;border:1px solid var(--line);background:var(--paper);padding:14px}
.foto img{margin-inline:auto}
.foto figcaption{margin-top:10px;font-size:.87rem;color:var(--mute);text-align:center}
.dwa{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 12px}
.dwa .foto{margin:0}

/* Numer ID do wklejenia. Sedno całej instrukcji, dlatego ma własny blok i przycisk kopiowania. */
.kod{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0 0;
  border:2px solid var(--ink);padding:14px 16px;background:var(--paper)}
.kod code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.28rem;font-weight:700;letter-spacing:.04em}
.kod button{margin-left:auto;border:0;background:var(--ink);color:#fff;font:inherit;font-weight:700;
  padding:10px 16px;cursor:pointer}
.kod button:hover{background:var(--acc);color:var(--ink)}

.uwaga{border-left:4px solid var(--acc);background:var(--paper);padding:16px 20px;margin:28px 0 8px}
.uwaga b{display:block;margin-bottom:4px}
.stop{background:var(--ink);color:#fff;padding:24px 26px;margin:28px 0 8px}
.stop b{display:block;color:var(--acc);font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.05rem;margin-bottom:8px}
.stop p{margin:0 0 10px}
.stop p:last-child{margin-bottom:0}
.ok{border:2px solid var(--acc);padding:18px 22px;margin:34px 0 8px}
.ok b{display:block;margin-bottom:4px}

.koniec{background:var(--paper);border-top:1px solid var(--line);margin-top:8px;padding:44px 0}
.koniec h2{margin:0 0 10px;font-size:clamp(1.4rem,3.6vw,1.9rem);font-weight:800}
.koniec p{margin:0 0 14px;max-width:58ch}
.mail{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;padding:14px 22px}
.mail:hover{background:var(--acc);color:var(--ink)}

.stopka{padding:26px 0 40px;font-size:.9rem;color:var(--mute)}

@media (max-width:640px){
  .dwa{grid-template-columns:1fr;gap:20px}
  .krok{padding-top:36px}
  .hero{padding:40px 0 38px}
  .kod button{margin-left:0}
}

/* Trzy szerokości zrzutów zamiast inline style na każdym obrazku, bo inline nie da się cofnąć
   w media query (mina z ZASADY_STRON_WWW). Figura się zwęża, obraz zawsze wypełnia figurę. */
.foto--waska{max-width:340px;margin-inline:auto}
.foto--srednia{max-width:480px;margin-inline:auto}
.foto--szeroka{max-width:660px;margin-inline:auto}
.foto img{width:100%}