/* ZAMÓWIENIE (/zamowienie/, 13.10.2026): ekran po przycisku „Kup dostęp”. Powstał na żądanie Przelewy24 (weryfikator: „nie ma możliwości zakupu kursu”,
   bo oba przyciski miały href="#"). Do aktywacji konta P24 zamówienie idzie mailem do Kuby (formularz.hvmbak.pl/zamowienie), a on odsyła link do płatności;
   po aktywacji przycisk ma prowadzić prosto do płatności P24 (opis w README).
   Wygląd: szare tło z winietą jak na hubie hvmbak.pl (blok TLO skopiowany 1:1 z HVMBAK-KASETA/assets/formularz.css), reszta językiem landingu:
   etykiety Inter z ukośnikiem baby blue, tekst Archivo 75 %, tytuł HVMBAK Pro, ostre rogi, przycisk czarny, po najechaniu pomarańcz.
   Blok zakupu ma te same wiersze warunków co oferta na landingu (src/oferta.css), tylko ciemne na jasnym.
   14.10.2026: pole wyboru akceptacji regulaminu (.zm-check; żądanie Przelewy24 z trzeciej rundy weryfikacji, zdanie bez pola nie przeszło),
   przycisk prowadzi na stronę płatności P24; podstrona dziekuje/ (powrót z P24) używa tego samego pliku. */
@font-face{font-family:'HVMBAK Pro';font-style:normal;font-weight:900;font-display:block;src:url(../fonts/HVMBAK-Pro.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-0103,U+0108-0117,U+011A-0140,U+0145-0159,U+015C-0178,U+017D-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:400 900;font-stretch:62% 125%;font-display:block;src:url(../fonts/archivo-pl.woff2) format('woff2');unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:block;src:url(../fonts/archivo-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:block;src:url(../fonts/inter-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:'Inter';font-style:normal;font-weight:400 700;font-display:block;src:url(../fonts/inter-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* TLO:START tło jak na stronie z kasetami (stage.js: gradient + winieta); blok wstawia tools/tlo.mjs, nie poprawiać ręcznie */
  :root { --tlo-u: 1vh; --tlo: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) calc(var(--tlo-u)*35), rgba(0,0,0,.0039) calc(var(--tlo-u)*41.25), rgba(0,0,0,.0118) calc(var(--tlo-u)*47.5), rgba(0,0,0,.0235) calc(var(--tlo-u)*53.75), rgba(0,0,0,.0431) calc(var(--tlo-u)*60), rgba(0,0,0,.0588) calc(var(--tlo-u)*66.25), rgba(0,0,0,.0784) calc(var(--tlo-u)*72.5), rgba(0,0,0,.098) calc(var(--tlo-u)*78.75), rgba(0,0,0,.1176) calc(var(--tlo-u)*85), rgba(0,0,0,.1333) calc(var(--tlo-u)*91.25), rgba(0,0,0,.149) calc(var(--tlo-u)*97.5), rgba(0,0,0,.1569) calc(var(--tlo-u)*103.75), rgba(0,0,0,.1608) calc(var(--tlo-u)*110)),
    radial-gradient(circle at 50% 44%, #ecedee 0, #ecedee calc(var(--tlo-u)*6.17), #ebeced calc(var(--tlo-u)*12.35), #eaeced calc(var(--tlo-u)*18.52), #e9ebec calc(var(--tlo-u)*24.69), #e8e9eb calc(var(--tlo-u)*30.86), #e6e8ea calc(var(--tlo-u)*37.04), #e4e7e9 calc(var(--tlo-u)*43.21), #e2e5e7 calc(var(--tlo-u)*49.38), #e1e3e6 calc(var(--tlo-u)*55.56), #dfe2e5 calc(var(--tlo-u)*61.73), #dee1e4 calc(var(--tlo-u)*67.9), #dee1e4 calc(var(--tlo-u)*74.07)); }
  @supports (height: 1svh) { :root { --tlo-u: 1svh; } }
  /* TLO:KONIEC */

:root{color-scheme:light;--black:#0d0d0d;--orange:#C2410C;--baby:#8CC7EE;--cichy:rgba(13,13,13,.6);--kreska:rgba(13,13,13,.2);--blad:#b42318;
  --f-etyk:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;--f-tekst:'Archivo',sans-serif;--wdth:75%}
*{box-sizing:border-box}
html{background:#e0e2e5}
html,body{margin:0;min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;font-family:var(--f-tekst);font-stretch:var(--wdth);color:var(--black);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
/* tło przypięte do okna osobną warstwą (background-attachment: fixed nie działa w Safari na iOS) */
body::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--tlo)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--black);outline-offset:3px}

/* góra: logo na środku (jak na hubie), powrót z lewej */
.zm-gora{position:absolute;top:0;left:0;right:0;display:flex;justify-content:center;padding:32px 0;pointer-events:none}
.zm-gora a{pointer-events:auto;display:block;line-height:0}
.zm-gora img{height:20.7px;width:auto;display:block}
.zm-wroc{position:absolute;top:32px;left:44px;line-height:20.7px;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--cichy);transition:color .18s}
.zm-wroc:hover{color:var(--black)}

/* treść: wąska kolumna 470 px (szerokość bloku zakupu z oferty) w środku okna, tam gdzie tło jest najjaśniejsze */
main{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:112px 24px 48px}
.zm{width:min(470px,100%)}
.zm[hidden]{display:none}
.zm-etyk{display:flex;align-items:baseline;gap:.5em;margin:0 0 18px;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;line-height:1;color:var(--cichy)}
.zm-etyk i{flex:none;font-style:normal;font-weight:700;color:var(--baby)}
h1{margin:0 0 0 -.05em;font-family:'HVMBAK Pro','Archivo',sans-serif;font-stretch:normal;font-weight:900;font-synthesis:none;text-transform:uppercase;
  font-size:clamp(30px,3.3vw,44px);line-height:1.02;letter-spacing:0}
.zm-spec{list-style:none;margin:34px 0 0;padding:0}
.zm-spec li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0 9px;border-top:1px solid var(--kreska);font-weight:400;font-size:16.5px;line-height:1.3}
.zm-spec li:last-child{border-bottom:1px solid var(--kreska)}
.zm-spec b{font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cichy);white-space:nowrap}
.zm-spec span{text-align:right}
.zm-spec .zm-suma span{font-weight:600;white-space:nowrap}

/* pole adresu: jasna ramka z ostrymi rogami (16.10.2026). Do 16.10 była sama kreska pod spodem jak w formularzu na hubie, ale tu nad polem stoi
   tabela z kreskami i pole czytało się jak jej kolejna linia: kolega Kuby zaznaczył zgodę i kliknął „Zamawiam”, nie wiedząc, że ma wpisać adres.
   Ramka ma kolor obwódki pola wyboru niżej, środek trochę jaśniejszy od tła; bez podpowiedzi w środku, bo szary przykład wygląda jak już wpisany adres. */
.zm-pole{display:block;margin:30px 0 0}
.zm-pole b{display:block;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cichy)}
.zm-pole input{display:block;width:100%;height:56px;margin:11px 0 0;padding:0 17px;border:1px solid rgba(13,13,13,.45);border-radius:0;background:rgba(255,255,255,.5);color:var(--black);
  font:400 19px/1.35 'Archivo',sans-serif;font-stretch:var(--wdth);-webkit-appearance:none;appearance:none;outline:none;box-shadow:none;transition:border-color .18s,background-color .18s}
.zm-pole input::placeholder{color:rgba(13,13,13,.34)}
@media(hover:hover){.zm-pole input:hover{border-color:rgba(13,13,13,.7)}}
.zm-pole input:focus{border-color:var(--black);background-color:rgba(255,255,255,.8)}
.zm-pole input[aria-invalid="true"],.zm-pole input[aria-invalid="true"]:focus{border-color:var(--blad)}
.zm-pole input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #f5f6f6 inset;-webkit-text-fill-color:var(--black)}
.zm-blad,.zm-stan{display:block;margin:9px 0 0;font-size:13.5px;line-height:1.4;color:var(--blad)}
.zm-blad:empty,.zm-stan:empty{display:none}
.zm-pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* akceptacja regulaminu: pole wyboru (wymóg Przelewy24, 14.10.2026). Kwadrat bez zaokrągleń jak reszta strony; własne pole, bo systemowe ma rogi i kolor przeglądarki.
   Prawdziwy <input> zostaje w drzewie (klawiatura, czytniki, wymagane pole), tylko schowany; rysujemy <i>. */
.zm-akcept{margin:24px 0 0}
.zm-check{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-weight:400;font-size:15px;line-height:1.45;color:rgba(13,13,13,.84);text-wrap:pretty}
.zm-check input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.zm-check i{flex:none;width:18px;height:18px;margin-top:2px;border:1px solid rgba(13,13,13,.45);border-radius:0;background:transparent no-repeat center/12px 12px;transition:border-color .18s,background-color .18s}
@media(hover:hover){.zm-check:hover i{border-color:var(--black)}}
.zm-check input:checked+i{background-color:var(--black);border-color:var(--black);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E")}
.zm-check input:focus-visible+i{outline:2px solid var(--black);outline-offset:3px}
.zm-check input[aria-invalid="true"]+i{border-color:var(--blad)}
.zm-check a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .18s}
.zm-check a:hover{color:var(--black)}
.zm-akcept .zm-blad{margin-top:8px}

.zm-btn{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;margin:22px 0 0;padding:23px 26px 22px;border:0;border-radius:0;cursor:pointer;
  background:var(--black);color:#fff;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:14px;line-height:normal;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;-webkit-appearance:none;appearance:none;transition:background .18s,transform .18s}
.zm-btn i{font-style:normal;transition:transform .18s}
/* pomarańcz tylko tam, gdzie jest myszka: na telefonie :hover zostaje po dotknięciu i przycisk stałby pomarańczowy w trakcie wysyłki */
@media(hover:hover){.zm-btn:hover{background:var(--orange);transform:translateY(-1px)}
  .zm-btn:hover i{transform:translateX(4px)}}
.zm-btn[disabled]{opacity:.5;cursor:default;transform:none;background:var(--black)}
.zm-zgoda{margin:14px 0 0;font-weight:400;font-size:13.5px;line-height:1.45;color:var(--cichy);text-wrap:pretty}
.zm-zgoda a{color:rgba(13,13,13,.84);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .18s}
.zm-zgoda a:hover{color:var(--black)}
/* pożegnanie „Widzimy się w środku” (16.10.2026, słowa Kuby): poza blokiem zamówienia, na środku strony w poziomie i w pionie dokładnie w połowie drogi
   między drobnym drukiem o P24 a stopką; krój i wielkość jak linki stopki, kolor jaśniejszy od nich („bardzo szare, ledwo widoczne… taki dodateczek”).
   Jak to stoi: <main class="zm-z-dopiskiem"> ma nad blokiem pusty ::before i pod nim akapit .zm-dosr; oba rosną po równo, a akapit ma podstawę 48 px
   (telefon 36 px) w miejsce dawnego dolnego dopełnienia main, więc blok zamówienia stoi tam, gdzie stał, a napis jest na środku wolnego miejsca pod nim.
   padding-left = odstęp liter za ostatnią literą, więc na środku stoją same litery. top: wyrównuje środek wersalików do połowy między linią pisma drobnego druku a górą wersalików stopki (zmierzone w przeglądarce, zależy tylko od krojów). */
main.zm-z-dopiskiem{justify-content:flex-start;padding-bottom:0}
main.zm-z-dopiskiem::before{content:'';flex:1 1 0}
main.zm-z-dopiskiem>.zm{flex:none}
.zm-dosr{flex:1 1 48px;display:flex;align-items:center;justify-content:center;margin:0;padding-left:.08em;position:relative;top:2.2px;
  font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;line-height:1;text-transform:uppercase;color:rgba(13,13,13,.36)}

/* po wysłaniu */
.zm-ok p:not(.zm-etyk){margin:26px 0 0;font-weight:400;font-size:19px;line-height:1.4;text-wrap:pretty}
.zm-ok p:not(.zm-etyk) b{font-weight:600;overflow-wrap:anywhere}
.zm-ok .zm-wroc2{display:inline-block;margin-top:30px;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--cichy);transition:color .18s}
.zm-ok .zm-wroc2:hover{color:var(--black)}

footer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;padding:0 24px calc(26px + env(safe-area-inset-bottom)*.25);
  font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cichy)}
footer a{padding:9px 0;margin:-9px 0;text-decoration:none;white-space:nowrap;transition:color .18s}
footer a:hover{color:var(--black)}
@media(prefers-reduced-motion:reduce){.zm-btn,.zm-btn i,.zm-wroc,.zm-zgoda a,.zm-check i,.zm-check a,footer a{transition:none}}

@media(max-width:820px){
  .zm-gora{padding:18px 0}
  .zm-gora img{height:17px}
  .zm-wroc{top:18px;left:18px;line-height:17px;font-size:9.5px;letter-spacing:.06em}
  main{padding:76px 18px 36px}
  .zm-etyk{margin-bottom:14px;font-size:9.5px;letter-spacing:.06em}
  h1{font-size:30px}
  .zm-spec{margin-top:26px}
  .zm-spec li{padding:9px 0 8px;font-size:15px}
  .zm-spec b,.zm-pole b{font-size:9.5px}
  .zm-pole{margin-top:24px}
  .zm-pole input{height:52px;margin-top:10px;padding:0 15px;font-size:18px}   /* 16 px i więcej: iOS nie przybliża strony po wejściu w pole */
  .zm-btn{margin-top:18px;padding:19px 18px 18px;font-size:12.5px;letter-spacing:.08em}
  .zm-akcept{margin-top:20px}
  .zm-check{font-size:14px}
  .zm-zgoda{margin-top:12px;font-size:12.5px}
  .zm-dosr{flex-basis:36px;padding-left:.06em;top:2px;font-size:9.5px;letter-spacing:.06em}
  .zm-ok p:not(.zm-etyk){font-size:17px}
  footer{font-size:9.5px;letter-spacing:.06em;gap:10px 20px}
}