/* =========================================================================
   NS33 · ścieżka zakupu – style (system Glass Duo)
   Biel + niebieskie szkło. Tekst var(--color-navy), akcent royal var(--color-primary) (hover var(--color-primary-hover)), tekst pomocniczy #4A5878.
   Font: Onest. Zieleń i czerwień wyłącznie dla statusów (potwierdzenie / błąd).
   ========================================================================= */
:root{
  /* PALETA NS33 — ta sama co na stronie (nowyswiat33-strona/assets/ns33.css). Jedyne źródło kolorów. */
  --color-navy:#0A1B3D; --color-primary:#2563FF; --color-primary-hover:#1D4FE0; --color-primary-soft:#EEF3FF;
  --color-background:#F6F8FB; --color-surface:#FFFFFF; --color-text:#0A1B3D; --color-text-secondary:#4A5878; --color-border:#D7DEEA;
  --color-success:#0F6B45; --color-success-soft:#E8F6EE; --color-gold:#F4C95D; --color-gold-strong:#B7791F; --color-gold-soft:#FFF9E8;
  --color-error:#B42318; --color-error-soft:#FDECEA;
  --color-gold-card:#FFFDF6; --color-gold-line:rgba(183,121,31,.35); --color-border-strong:#7E8BA5; --color-primary-line:#C9D7FF;
  --color-primary-busy:#5F84E8; --color-success-line:rgba(15,107,69,.24); --color-error-text:#7A1A12; --color-error-line:#F3C1BC;
  --color-on-dark:#FFFFFF; --color-on-dark-muted:#E6EEFF; --color-on-dark-line:rgba(169,195,255,.45);
  /* zmienne komponentów → paleta */
  --ink:var(--color-navy); --navy:var(--color-navy); --blue:var(--color-primary); --blue-h:var(--color-primary-hover); --blue-ink:var(--color-primary-hover);
  --blue-50:var(--color-primary-soft); --blue-100:var(--color-primary-line);
  --bg:var(--color-background); --card:var(--color-surface); --muted:var(--color-text-secondary); --muted-inv:var(--color-on-dark-muted);
  --line:var(--color-border); --line-2:var(--color-border-strong); --control:var(--color-border-strong);
  --ok:var(--color-success); --ok-50:var(--color-success-soft); --err:var(--color-error); --err-50:var(--color-error-soft);
  --glass-w:rgba(255,255,255,.74);
  /* granatowe „szkło” (podsumowanie, pasek wyboru) — niebieski zostaje dla przycisków i stanów aktywnych */
  --glass-b:linear-gradient(155deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 34%),linear-gradient(135deg,#132B5E,var(--color-navy));
  --sh-w:inset 0 1px 0 #FFFFFF,0 18px 40px -24px rgba(10,27,61,.24);
  --sh-b:inset 0 1px 1px rgba(255,255,255,.65),inset 0 -1px 1px rgba(255,255,255,.18),inset 0 0 36px rgba(255,255,255,.07),0 30px 70px -30px rgba(10,27,61,.55);
  --font:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:16px; --r-sm:10px; --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1200px; --gut:32px; color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums lining-nums;
  background:var(--bg)}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
a{color:var(--blue-ink)}
h1,h2,h3{font-family:var(--font);color:var(--ink);letter-spacing:-.03em;line-height:1.12;text-wrap:balance;font-weight:700}
p{text-wrap:pretty}
[hidden]{display:none!important}
.nw{white-space:nowrap}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
h1:focus{outline:none}

/* ---------- materiały ---------- */
.glass,.site .wrap,.progress .wrap,.card,.choice,.ua-box,.start,.scan,.sum2,.after,.paybox,.gw,.next-steps,details.sum-m{
  background:var(--glass-w);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);box-shadow:var(--sh-w)}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border:1px solid transparent;border-radius:var(--r-sm);background:var(--blue);color:#fff;font-weight:600;font-size:16px;line-height:1.2;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--color-primary) 55%,transparent);transition:background-color .16s ease-out,transform .16s ease-out}
.btn:hover{background:var(--blue-h);transform:translateY(-1px)}
.btn[disabled],.btn[aria-busy="true"]{background:var(--color-primary-busy);cursor:progress;transform:none}
.btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 20px;border:1.5px solid var(--color-border-strong);border-radius:var(--r-sm);background:var(--color-surface);color:var(--color-navy);font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;transition:border-color .16s,transform .16s}
.btn-sec:hover{border-color:var(--color-navy);background:var(--color-background);transform:translateY(-1px)}
.btn-sec svg,.btn svg{width:18px;height:18px}
.link{background:none;border:0;padding:0;color:var(--blue-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:pointer;font-size:inherit}
.spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{transform:translateY(10px)}to{transform:none}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.screen:not([hidden]){animation:fadeUp .28s var(--ease)}

/* ---------- pasek demo ---------- */
.demo{background:var(--color-primary-soft);border-bottom:1px solid var(--color-primary-line);color:var(--ink);font-size:14.5px}
.demo .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;min-height:44px;padding-block:6px}
.demo b{font-weight:700}
.demo label{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%;min-width:0}
.demo select{border:1px solid var(--color-border-strong);border-radius:8px;background:var(--color-surface);padding:3px 6px;font-size:14px;max-width:100%;min-width:0}
.demo button{border:1px solid var(--color-border-strong);border-radius:8px;background:var(--color-surface);padding:3px 10px;font-size:14px;cursor:pointer}
.evlog{background:var(--ink);color:var(--color-on-dark-muted);font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;max-height:180px;overflow:auto;padding:8px 16px}
.evlog li{list-style:none;white-space:pre-wrap;word-break:break-all}

/* ---------- nagłówek (pływający pasek ze szkła) i postęp ---------- */
.site{position:relative;z-index:31;padding-top:14px}
.site .wrap{display:flex;align-items:center;gap:16px;min-height:64px;border-radius:16px;padding-inline:20px 16px;max-width:calc(var(--wrap) - 2*var(--gut) + 40px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink);text-decoration:none;white-space:nowrap;min-height:44px}
.brand i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-style:normal;font-size:14px;font-weight:700;letter-spacing:-.02em}

.progress{position:sticky;top:0;z-index:30;padding-top:10px}
.progress .wrap{display:flex;align-items:center;gap:24px;min-height:64px;padding-block:8px;border-radius:16px;padding-inline:20px 10px;max-width:calc(var(--wrap) - 2*var(--gut) + 40px);background:rgba(255,255,255,.82)}
.steps{list-style:none;display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0}
.steps li{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;font-size:15px;color:var(--color-text-secondary)}
.steps li:not(:last-child)::after{content:"";flex:1 1 auto;height:2px;border-radius:2px;background:var(--color-border);margin:0 12px;min-width:12px}
.steps li.done:not(:last-child)::after{background:var(--blue)}
.steps .n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;border:1.5px solid var(--color-border-strong);font-weight:700;font-size:14px;color:var(--color-text-secondary);background:var(--color-surface)}
.steps .n svg{width:16px;height:16px}
.steps li.current .n{border-color:transparent;background:var(--color-primary);color:var(--color-on-dark);box-shadow:0 0 0 4px var(--color-primary-line)}
.steps li.done .n{border-color:var(--blue);color:var(--blue-ink);background:var(--blue-50)}
.steps li.done{color:var(--ink)}
.steps li.current{color:var(--ink);font-weight:700}
.steps li.current .lbl{font-size:16px}
.steps .lbl{white-space:nowrap}
.steps button{display:flex;align-items:center;gap:10px;border:0;background:none;cursor:pointer;padding:4px 2px;border-radius:8px;color:inherit;font:inherit}
.steps button:hover .lbl{text-decoration:underline}
.step-meta{display:none}

/* ---------- ekrany ---------- */
main{padding-block:44px 0}
.screen h1{font-size:clamp(28px,2.6vw,32px)}
.screen .lead{font-size:16px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:64ch}
.screen-head{margin-bottom:36px}
.center{text-align:center;margin-inline:auto}

/* przełącznik okresu: szklany tor, wybrana opcja = niebieskie szkło */
.period-q{margin-top:28px;text-align:center;font-weight:700;font-size:17px;color:var(--ink)}
.period-note{max-width:640px;margin:12px auto 0;text-align:center;font-size:14.5px;line-height:1.5;color:var(--muted)}
.period{border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:640px;margin:10px auto 0;padding:6px;border-radius:16px;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--sh-w)}
.period label{position:relative;display:grid;justify-items:center;align-content:start;gap:2px;padding:12px 6px;border-radius:12px;border:2px solid transparent;cursor:pointer;text-align:center;transition:background-color .18s}
.period label:hover{background:var(--color-background)}
.period input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.period .t{font-weight:700;font-size:17px;color:var(--ink)}
.period .s{font-size:14px;color:var(--muted);line-height:1.3}
.period .sv{font-size:14px;font-weight:700;color:var(--color-success);line-height:1.3}
.period label:has(input:checked){background:var(--color-primary-soft);border-color:var(--color-primary);box-shadow:0 12px 26px -20px color-mix(in srgb,var(--color-primary) 55%,transparent)}
.period label:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}

/* karty pakietów (cała karta = radio); wybrana karta = niebieskie szkło */
.plans{border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);column-gap:20px;margin-top:32px}
.card{grid-row:span 7;display:grid;grid-template-rows:subgrid;row-gap:0}
.card{position:relative;border-radius:20px;padding:26px 24px 22px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;min-width:0}
.card:hover{transform:translateY(-4px);border-color:var(--color-border-strong);box-shadow:inset 0 1px 0 #fff,0 30px 60px -28px rgba(10,27,61,.38)}
.card.rec{background:var(--color-gold-card);border:2px solid var(--color-gold-strong)}
.card.rec:hover{border-color:var(--color-gold-strong)}
.card input{position:absolute;opacity:0;width:1px;height:1px}
.card:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.card.sel{box-shadow:0 0 0 3px var(--color-primary),0 26px 52px -28px rgba(10,27,61,.38)}
.card.sel:hover{transform:translateY(-2px)}
.c-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:32px}
.c-nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.c-name{font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.c-badge{display:inline-block;font-size:13px;font-weight:700;letter-spacing:0;color:var(--color-navy);background:var(--color-gold);border:1px solid var(--color-gold-strong);border-radius:10px;padding:5px 10px;line-height:1.3}
.c-check{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--color-surface);color:transparent;transition:background-color .18s}
.c-check svg{width:16px;height:16px}
.c-tag{font-weight:600;color:var(--ink);margin-top:12px;font-size:16px;line-height:1.4}
.c-lead{font-size:15px;color:var(--muted);margin-top:6px;line-height:1.5}
.c-price{margin-top:18px}
.c-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.c-big strong{font-weight:700;font-size:46px;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.c-big span{font-size:15px;font-weight:600;color:var(--muted)}
.c-gross{font-size:16px;font-weight:600;color:var(--ink);margin-top:8px}
.c-bill{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:14px;font-weight:600;color:var(--ink);background:var(--color-primary-soft);border:1px solid transparent;border-radius:999px;padding:4px 11px}
.c-save{margin-top:10px;line-height:1.35}
.c-save b{display:block;font-size:15px;color:var(--color-success)}
.c-save span{display:block;font-size:14px;color:var(--muted)}
.c-up{margin-top:12px;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink);background:var(--color-gold-soft);border:1px solid var(--color-gold-line);border-radius:10px;padding:8px 10px}
.c-extra .c-lead{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.c-feat{list-style:none;display:grid;gap:9px;margin-top:16px;font-size:15px;line-height:1.45;align-content:start}
.c-feat li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px}
.c-feat svg{width:18px;height:18px;margin-top:2px;color:var(--color-success)}
.c-pay{margin-top:auto;padding-top:18px}
.c-pay dl{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:4px}
.c-pay dl div{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.c-pay dt{color:var(--muted);min-width:0}
.c-pay dd{font-weight:600;color:var(--ink);white-space:nowrap}
.c-pay .t{margin-top:4px;padding-top:8px;border-top:1px dashed var(--line-2)}
.c-pay .t dt{color:var(--ink);font-weight:700}
.c-pay .t dd{font-size:18px;font-weight:700}
/* wybrana karta: treść bez zmian kolorów; znacznik wyboru wypełniony niebieskim */
.card.sel .c-check{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-dark)}

.assure{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px;margin-top:32px}
.assure li{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.4;color:var(--ink);font-weight:500}
.assure svg{flex:none;width:40px;height:40px;padding:10px;border-radius:10px;background:var(--ink);color:#fff}
details.rules{margin-top:20px;border-top:1px solid var(--line)}
details.rules summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:14px 0;font-weight:600;color:var(--ink);min-height:48px}
details summary::-webkit-details-marker{display:none}
.chev{width:16px;height:16px;transition:transform .2s}
details[open]>summary .chev{transform:rotate(180deg)}
.rules-body{display:grid;gap:8px;padding-bottom:14px;font-size:15px;color:var(--muted);max-width:80ch;animation:fadeIn .2s ease}
.rules-body b{color:var(--ink)}
.note-tbc{font-size:14px;color:var(--ink);background:var(--color-primary-soft);border:1px dashed var(--color-border-strong);border-radius:10px;padding:6px 10px}

/* pasek akcji: siedzi pod treścią, przykleja się do dołu ekranu podczas przewijania */
.actionbar{position:sticky;bottom:0;z-index:20;margin-top:48px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-top:1px solid var(--line);box-shadow:0 -14px 30px -24px rgba(10,27,61,.35);padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
.actionbar .wrap{display:flex;align-items:center;gap:16px 24px}
.ab-info{flex:1 1 auto;min-width:0;line-height:1.4}
.ab-info b{display:block;color:var(--ink);font-size:16px;font-weight:700}
.ab-info span{font-size:15px;color:var(--muted)}
.ab-info strong{color:var(--ink)}
.ab-next{font-size:14px;color:var(--muted);text-align:right}
.actionbar .btn{min-width:260px}
.ab-acts{display:flex;align-items:center;gap:20px}
.ab-cta{display:grid;justify-items:center;gap:6px}
.btn-go{min-height:56px;padding:14px 28px;font-size:17.5px;min-width:300px}
.btn-go svg{width:20px;height:20px}
.btn-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 8px;border:0;background:none;color:var(--muted);font-weight:600;font-size:15.5px;cursor:pointer;border-radius:8px}
.btn-back svg{width:18px;height:18px}
.btn-back:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ===================== ekran 2: dla kogo + start (wersja z 16.10, 14:00) =====================
   Zasada: pewność wyboru > kompaktowość. Jeden wzorzec wyboru na całym ekranie:
   neutralnie szkło białe + jasna ramka; hover: bardzo jasny błękit; wybrany: jasny błękit + ramka 2 px + ✓ w prawym górnym rogu.
   Natywne radio zostaje w DOM (klawiatura, czytniki), ale jest niewidoczne – fokus to obrys całego pola. */
.choices{border:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.choice{position:relative;grid-column:span 2;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;row-gap:6px;align-items:start;
  padding:20px;border-radius:14px;cursor:pointer;transition:border-color .16s,background-color .16s,transform .16s}
.choice.primary{grid-column:span 3;grid-template-columns:44px minmax(0,1fr);grid-template-rows:none;column-gap:18px;row-gap:0;min-height:188px;padding:30px}
.choice:hover,.start:hover,.scan:hover,.uav:hover{background:var(--color-background);border-color:var(--color-border-strong)}
.choice:hover{transform:translateY(-1px)}
.choice input,.start input,.scan input,.uav input{position:absolute;opacity:0;width:1px;height:1px}
.choice:has(input:focus-visible),.start:has(input:focus-visible),.scan:has(input:focus-visible),.uav:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.choice .ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--blue-50);color:var(--blue-ink)}
.choice .ic svg{width:18px;height:18px}
.choice.primary .ic{width:44px;height:44px;border-radius:12px}
.choice.primary .ic svg{width:24px;height:24px}
.choice .ic-ukraine{background:#fff;border:1px solid var(--line)}
.choice .ic-ukraine svg{width:20px;height:20px}
.choice b{display:block;font-weight:600;font-size:16px;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.choice.primary b{font-size:17px}
.choice span.d{display:block;font-size:14px;line-height:1.6;color:var(--muted)}
.choice .tag{display:inline-block;justify-self:start;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--ink);background:var(--color-background);border:1px solid var(--color-border);border-radius:999px;padding:3px 10px}
/* rząd 2: ikona obok tytułu, opis pod spodem, etykieta zawsze na dole */
.choice:not(.primary) .txt{display:contents}
.choice:not(.primary) b{align-self:center;padding-right:24px}
.choice:not(.primary) span.d{grid-column:1/-1}
.choice:not(.primary) .tag{grid-column:1/-1;align-self:end;margin-top:4px}
/* rząd 1: ikona po lewej, kolumna tekstu, etykieta na dole */
.choice.primary .txt{display:flex;flex-direction:column;align-self:stretch;min-width:0;padding-right:32px}
.choice.primary span.d{margin:6px 0 18px}
.choice.primary .tag{align-self:flex-start;margin-top:auto}
/* znacznik wyboru: tylko przy wybranym polu */
.choice .c-check,.start .c-check,.scan .c-check,.uav .c-check{position:absolute;top:14px;right:14px;width:24px;height:24px;border:0;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .16s,transform .16s}
.choice .c-check svg,.start .c-check svg,.scan .c-check svg,.uav .c-check svg{width:14px;height:14px}
.choice.primary .c-check{top:18px;right:18px}
.choice.sel,.start.sel,.scan.sel,.uav.sel{background:var(--blue-50);border:2px solid var(--blue)}
.choice.sel{padding:19px}
.choice.primary.sel{padding:29px}
.choice.sel:hover{transform:none}
.choice.sel .c-check,.start.sel .c-check,.scan.sel .c-check,.uav.sel .c-check{opacity:1;transform:none}
.choice.sel .tag{background:#fff}
@media (max-width:1023px){
  /* telefon/tablet: główne kafelki w tym samym układzie co pozostałe (bez wcięcia pod ikoną) */
  .choice.primary{grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:8px;min-height:0;padding:22px}
  .choice.primary.sel{padding:21px}
  .choice.primary .ic{width:40px;height:40px;border-radius:11px}
  .choice.primary .ic svg{width:22px;height:22px}
  .choice.primary .txt{display:contents}
  .choice.primary b{align-self:center;padding-right:30px}
  .choice.primary span.d{grid-column:1/-1;margin:0}
  .choice.primary .tag{grid-column:1/-1;justify-self:start;align-self:end;margin-top:6px}
  .choice.primary .c-check{top:16px;right:16px}
}
/* Ukraina: doprecyzowanie sytuacji */
.ua-box{margin-top:20px;border-radius:14px;padding:22px 24px}
.ua-vars{border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ua-vars legend{font-weight:700;font-size:18px;color:var(--ink);margin-bottom:12px;padding:0}
.ua-vars legend .uk{font-weight:500;font-size:15px;color:var(--muted)}
.uav{position:relative;display:block;border:1px solid var(--line);border-radius:12px;padding:14px 44px 14px 16px;cursor:pointer;background:#fff;transition:border-color .16s,background-color .16s}
.uav.sel{padding:13px 43px 13px 15px}
.uav .c-check{top:12px;right:12px;width:22px;height:22px}
.uav b{display:block;font-weight:600;color:var(--ink);font-size:15.5px;line-height:1.3}
.uav span[lang]{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.ua-box .note{margin-top:16px}
.note svg[viewBox]{flex:none}
.note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.5}
.note svg{flex:none;width:20px;height:20px;margin-top:1px}
.note.info{background:var(--color-primary-soft);border:1px solid var(--color-primary-line);color:var(--ink)}
.note.info svg{color:var(--blue-ink)}
.note.ok{background:var(--ok-50);border:1px solid var(--color-success-line);color:var(--color-success)}
.note.ok svg{color:var(--ok)}
.note.warn{background:#fff;border:1px solid color-mix(in srgb,var(--color-primary) 35%,transparent);border-left:4px solid var(--blue);color:var(--ink)}
.note.warn svg{color:var(--blue-ink)}
/* sekcja „Kiedy chcesz rozpocząć…” */
.sec-head{margin-top:56px}
.sec-h{font-size:24px}
.sec-lead{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.starts,
.scans{border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}
.start,
.scan{position:relative;display:block;padding:22px 56px 22px 24px;border-radius:14px;cursor:pointer;transition:border-color .16s,background-color .16s}
.start.sel,
.scan.sel{padding:21px 55px 21px 23px}
.start .st-t,
.scan .st-t{display:block}
.start b,
.scan b{display:block;font-weight:600;font-size:17px;line-height:1.3;color:var(--ink)}
.start .st-d,
.scan .st-d{display:block;margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.start .c-check,
.scan .c-check{top:20px;right:20px}
.date-wrap{margin-top:14px;margin-left:calc(50% + 10px)}
/* podsumowanie terminu i ceny */
.sum2{margin-top:28px;border-radius:14px;padding:24px 28px}
.sum2 h3{font-size:17px;font-weight:700;margin-bottom:16px}
.sum2 dl{display:grid;align-items:stretch}
.sum2 dl.c3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr)}
.sum2 dl.c4{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.2fr)}
.sum2 dl>div{min-width:0;padding:2px 24px;border-left:1px solid var(--line)}
.sum2 dl>div:first-child{padding-left:0;border-left:0}
.sum2 dt{font-size:14px;line-height:1.4;color:var(--muted)}
.sum2 dd{margin-top:6px;font-size:16.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.sum2 .pay{text-align:right;padding-right:0}
.sum2 .pay dt{font-weight:600;color:var(--ink)}
.sum2 .pay strong{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.sum2 .pay small{display:block;margin-top:6px;font-size:13.5px;font-weight:400;color:var(--muted)}
.sum2 .ex{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--muted)}
.sum2 h3+.ex{margin-top:0;padding-top:0;border-top:0}
@media (max-width:1023px){
  .sum2{padding:20px}
  .sum2 dl.c3,.sum2 dl.c4{grid-template-columns:minmax(0,1fr);gap:10px}
  .sum2 dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0;border:0}
  .sum2 dd{margin:0;text-align:right}
  .sum2 .pay{margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
  .sum2 .pay strong{font-size:26px}
}
@media (max-width:767px){
  .sum2 dl.c3,.sum2 dl.c4{gap:14px}
  .sum2 dl>div{display:block}
  .sum2 dd{margin-top:2px;text-align:left}
  .sum2 .pay{text-align:left;padding-top:16px}
  .sum2 .pay dd{margin-top:4px}
  .sum2 .pay strong{font-size:28px}
}

/* ---------- pola formularza ---------- */
.field{display:grid;gap:7px}
.field label,.f-lbl{font-weight:600;font-size:15px;color:var(--ink)}
.field .hint{font-size:14px;color:var(--muted);margin-top:-2px}
.field input,.field select{width:100%;min-height:52px;padding:11px 16px;border:1px solid var(--control);border-radius:var(--r-sm);background:#fff;font-size:16px;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.field input::placeholder{color:var(--color-text-secondary)}
.field input:hover,.field select:hover{border-color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--color-primary-line)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.f-err{display:flex;gap:6px;align-items:flex-start;font-size:14.5px;color:var(--err);font-weight:600}
.f-err svg{flex:none;width:16px;height:16px;margin-top:2px}
.f-ok{font-size:14px;color:var(--ok);font-weight:600}
fieldset.grp{border:0;display:grid;gap:14px;margin-top:28px}
fieldset.grp legend{font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px;padding:0}
.grp .gnote{font-size:14.5px;color:var(--muted);margin-top:-6px}
.row2{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px}
.nip-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.nip-row .btn-sec{min-height:52px}
.lookup-msg{font-size:14.5px}
.reg-badge{display:inline-flex;gap:6px;align-items:center;font-size:14px;font-weight:600;color:var(--color-success);background:var(--ok-50);border:1px solid var(--color-success-line);border-radius:999px;padding:4px 10px}
.reg-badge svg{width:16px;height:16px}

/* ---------- ekran 3: dwie kolumny ---------- */
.co{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start}
.co-side{position:sticky;top:104px}
.err-sum{border:1px solid var(--color-error-line);border-left:4px solid var(--err);background:var(--err-50);border-radius:12px;padding:14px 16px;margin-top:20px}
.err-sum h2{font-size:17px;color:var(--err);letter-spacing:0}
.err-sum ul{margin:8px 0 0 18px;display:grid;gap:4px;font-size:15px}
.err-sum a{color:var(--color-error-text);font-weight:600}
.after{margin-top:32px;border-radius:16px;padding:22px 24px}
/* przed płatnością: warunki umowy na widoku */
.after h2{font-size:21px}
.after ol{list-style:none;counter-reset:a;display:grid;gap:12px;margin-top:14px}
.after li{counter-increment:a;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;font-size:15.5px;line-height:1.45;color:var(--muted)}
.after li::before{content:counter(a,decimal-leading-zero);display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;font-weight:700;font-size:13px}
.after li b{color:var(--ink)}
.after .more{margin-top:14px;font-size:15px}
.consent{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;margin-top:24px;font-size:15.5px;line-height:1.5}
.consent input{width:22px;height:22px;margin-top:2px;accent-color:var(--blue)}
.proxy-wrap .consent{margin-top:20px}
.proxy-wrap .note{margin:10px 0 0 36px}
@media (max-width:600px){ .proxy-wrap .note{margin-left:0} }
.paybox{margin-top:22px;border-radius:16px;padding:20px 22px;display:grid;gap:12px}
.paybox .due{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.paybox .due span{font-weight:600;color:var(--ink)}
.paybox .due strong{font-size:32px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.paybox .btn{width:100%;min-height:58px;font-size:18px}
.paybox small{font-size:14px;color:var(--muted);text-align:center}
.form-err{font-size:15px;color:var(--err);font-weight:600}
.backlink{margin-top:18px;font-size:15.5px}
.backlink button{display:inline-flex;align-items:center;gap:6px}

/* podsumowanie: panel z niebieskiego szkła */
.sum{background:var(--glass-b);-webkit-backdrop-filter:blur(20px) saturate(190%);backdrop-filter:blur(20px) saturate(190%);border:1px solid rgba(255,255,255,.42);box-shadow:var(--sh-b);border-radius:20px;padding:22px 24px;color:#fff}
.sum h2{font-size:21px;color:#fff}
.sum-pkg{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px}
.sum-pkg b{font-size:18px;color:#fff;font-weight:700}
.sum dl{display:grid;gap:8px;margin-top:12px}
.sum dl div{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.sum dt{color:var(--muted-inv);min-width:0}
.sum dd{color:#fff;font-weight:600;text-align:right;white-space:nowrap}
.sum .money{border-top:1px solid rgba(255,255,255,.26);padding-top:12px;margin-top:14px}
.sum .dep dt small{display:block;font-size:13.5px;color:var(--muted-inv)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid rgba(255,255,255,.55);margin-top:14px;padding-top:14px}
.sum-total span{font-weight:700;color:#fff}
.sum-total strong{font-size:34px;font-weight:700;color:#fff;letter-spacing:-.03em;white-space:nowrap}
.sum-next{font-size:14.5px;color:var(--muted-inv);margin-top:8px}
.sum .link{color:#fff}
.sum .chg{font-size:14.5px}
.sum :focus-visible{outline-color:#fff}
details.sum-m{display:none}

/* ---------- dialog umowy ---------- */
dialog.dlg{border:1px solid var(--line);border-radius:20px;padding:0;width:min(720px,calc(100% - 24px));max-height:calc(100% - 24px);margin:auto;color:var(--ink);background:rgba(255,255,255,.96);box-shadow:0 40px 90px -30px rgba(10,27,61,.55)}
dialog.dlg[open]{animation:fadeUp .22s var(--ease)}
dialog.dlg::backdrop{background:rgba(10,27,61,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dlg-in{padding:26px 28px}
.dlg-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.dlg-top h2{font-size:24px}
.x{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center}
.x:hover{border-color:var(--ink)}
.x svg{width:18px;height:18px}
.terms{display:grid;margin-top:16px}
.terms div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.terms dt{color:var(--muted)}
.terms dd{color:var(--ink)}

/* ---------- bramka (demo) i statusy ---------- */
.gw{max-width:580px;margin:0 auto;border:1px dashed var(--color-border-strong);border-radius:20px;padding:30px}
.gw .lbl{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--color-primary-soft);border:1px solid var(--color-primary-line);border-radius:999px;padding:5px 11px}
.gw h1{font-size:28px;margin-top:14px}
.gw dl{display:grid;gap:6px;margin-top:16px}
.gw dl div{display:flex;justify-content:space-between;gap:12px}
.gw dt{color:var(--muted)}
.gw dd{font-weight:700;color:var(--ink)}
.gw .acts{display:grid;gap:10px;margin-top:22px}
.status{max-width:680px;margin:0 auto;text-align:left}
.st-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:16px}
.st-ic svg{width:32px;height:32px}
.st-ic.ok{background:var(--ok-50);color:var(--ok);border:1px solid var(--color-success-line)}
.st-ic.err{background:var(--err-50);color:var(--err);border:1px solid var(--color-error-line)}
.st-ic.wait{background:var(--glass-b);color:#fff;box-shadow:var(--sh-b)}
.st-ic.wait svg{animation:spin 1.2s linear infinite}
.status h1{margin-top:18px}
.status .lead{margin-top:8px}
.status .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.next-steps{list-style:none;display:grid;gap:0;margin-top:24px;border-radius:16px;padding:8px 22px}
.next-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:15.5px}
.next-steps li:first-child{border-top:0}
.next-steps .dot{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line-2);font-size:13px;font-weight:700;color:var(--muted);background:#fff}
.next-steps .dot svg{width:15px;height:15px}
.next-steps li.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.next-steps li.now .dot{background:var(--blue);border-color:var(--blue);color:#fff}
.next-steps b{color:var(--ink)}
.next-steps span{display:block;color:var(--muted);font-size:14.5px}

footer.f{margin-top:64px;background:var(--ink);color:var(--color-on-dark-muted);padding:28px 0 40px;font-size:14.5px}
footer.f .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
footer.f a{color:#fff;text-underline-offset:3px}

/* ---------- responsywność ---------- */
@supports not (grid-template-rows:subgrid){ .card{display:flex;flex-direction:column} }
@media (max-width:1023px){
  :root{--gut:24px}
  .plans{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:16px;max-width:560px;margin-inline:auto}
  .card{grid-row:auto;display:flex;flex-direction:column}
  /* kolejność pakietów zawsze Standard → Gold → Platinum (bez przestawiania Gold) */
  .assure{grid-template-columns:repeat(2,minmax(0,1fr))}
  .choices{grid-template-columns:minmax(0,1fr);gap:14px}
  .choice,.choice.primary{grid-column:auto;min-height:0}
  .ua-vars{grid-template-columns:minmax(0,1fr)}
  .co{grid-template-columns:minmax(0,1fr)}
  .co-side{display:none}
  details.sum-m{display:block;margin-top:18px;border-radius:14px;overflow:hidden}
  details.sum-m>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-weight:600;color:var(--ink);min-height:52px}
  details.sum-m>summary strong{margin-left:auto;white-space:nowrap}
  details.sum-m .sum{border:0;border-radius:0;box-shadow:none}
}
@media (max-width:767px){
  :root{--gut:16px}
  main{padding-top:24px}
  .screen .lead{font-size:15.5px}
  .site{padding-top:8px}
  .site .wrap,.progress .wrap{margin-inline:10px;padding-inline:14px 10px}
  .progress{position:static;padding-top:8px}
  .steps{flex:0 0 auto}
  .steps li{flex:0 0 auto}
  .steps .lbl{display:none}
  .steps li:not(:last-child)::after{width:20px;flex:0 0 20px;margin:0 6px}
  .step-meta{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
  .progress .wrap{gap:12px;min-height:56px}
  .progress nav{flex:0 0 auto!important}
  .period{margin-top:20px}
  .period .t{font-size:16px}
  .period .s,.period .sv{font-size:13px}
  .card{padding:22px 18px 18px}
  .card:hover,.choice:hover{transform:none}
  .c-big strong{font-size:40px}
  .assure{grid-template-columns:minmax(0,1fr)}
  .actionbar .wrap{flex-wrap:wrap;gap:10px}
  .actionbar .btn{flex:1 1 auto;min-width:0;width:100%}
  .ab-acts{display:contents}
  .actionbar .ab-info{order:1;flex:1 1 0}
  .btn-back{order:2;flex:none;padding-inline:4px}
  .ab-cta{order:3;flex:1 1 100%;min-width:0}
  .btn-go{padding-inline:16px;font-size:16.5px}
  .ab-next{display:none}
  .sec-head{margin-top:44px}
  .sec-h{font-size:22px}
  .starts,
  .scans{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:18px}
  .start,
  .scan{padding:18px 52px 18px 18px}
  .start.sel,
  .scan.sel{padding:17px 51px 17px 17px}
  .start .c-check,
  .scan .c-check{top:16px;right:16px}
  .date-wrap{margin-left:0}
  .row2{grid-template-columns:minmax(0,1fr)}
  .nip-row{grid-template-columns:minmax(0,1fr)}
  .terms div{grid-template-columns:minmax(0,1fr);gap:2px}
  .paybox .due strong{font-size:27px}
  .gw{padding:22px}
  .dlg-in{padding:20px}
}
@media (max-width:440px){
  .brand{font-size:17px}
}
@media (max-width:379px){
  .brand span{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce){
  .site .wrap,.progress .wrap,.card,.choice,.ua-box,.start,.scan,.sum2,.after,.paybox,.gw,.next-steps,details.sum-m,.period,.actionbar{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .choice.sel,.start.sel,.scan.sel,.uav.sel{background:var(--blue-50)!important}
  .sum{background:var(--color-surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .card.rec{background:var(--color-gold-card)!important}
  .period label:has(input:checked){background:var(--color-primary-soft)!important}
}

/* 19.10.2026 (od 23.10: darmowy okres startowy): notka okresu startowego, notka Standard, metody płatności */
.note.free-start{max-width:760px;margin:14px auto 0}
.note.free-start b{font-weight:700}
.c-note{font-size:14px;line-height:1.5;color:var(--muted);background:var(--color-background);border-radius:10px;padding:8px 10px;margin-top:6px}
.c-pay [hidden]{display:none}
.paybox .pay-methods b{display:block;margin-bottom:2px;color:var(--ink);font-weight:600}

/* ===================== FORMULARZ ZAMÓWIENIA — brief 19.10 (12:11) =====================
   Typografia SaaS, czytelny postęp, wyraźne stany wyboru (ramka 2 px + znacznik ✓, nie tylko kolor),
   jasne podsumowanie z największą kwotą, zwarty pasek akcji. Logika, ceny, daty i walidacja bez zmian. */
.screen h1{font-size:28px;letter-spacing:-.03em;line-height:1.15}
.screen .lead{font-size:16px;line-height:1.55;margin-top:10px}
.sec-h{font-size:22px;letter-spacing:-.02em}
.sec-lead{font-size:15.5px}
.req-note{margin-top:8px;font-size:14px;line-height:1.45;color:var(--color-text-secondary)}

/* pasek demo: oddzielony, neutralny, jedna linia; opcje drugorzędne */
.demo{background:var(--color-surface);border-bottom:1px dashed var(--color-border-strong);color:var(--color-text-secondary);font-size:13.5px}
.demo .wrap{min-height:40px;padding-block:6px;gap:6px 14px;align-items:center}
.demo-t{display:flex;align-items:center;gap:10px;min-width:0;line-height:1.35}
.demo-tag{flex:none;padding:2px 8px;border:1px solid var(--color-navy);border-radius:6px;color:var(--color-navy);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.demo-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-left:auto}
.demo-opts label{font-size:13.5px}
.demo select,.demo button{min-height:32px;font-size:13px;color:var(--color-navy)}
.demo-short{display:none}
.demo-tg{display:none;margin-left:auto;min-height:32px;padding:3px 10px;border:1px solid var(--color-border-strong);border-radius:8px;background:var(--color-surface);font-size:13px;font-weight:600;cursor:pointer}

/* nagłówek: „Nowy Świat 33 · Pakiet Gold · 12 mies. z góry” */
.site-order{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;min-width:0;margin-left:2px;padding-left:16px;border-left:1px solid var(--color-border);font-size:15.5px;line-height:1.3;color:var(--color-navy)}
.so-pkg b{font-weight:700}
.so-per{color:var(--color-text-secondary)}
.so-chg{font-size:14.5px}

/* pasek postępu: większe kroki, ukończone = zielony ✓, aktywny = niebieski, przyszłe = neutralne */
.progress .wrap{min-height:76px;padding-block:12px}
.steps-nav{flex:1 1 auto;min-width:0}
.steps li{font-size:16px;color:var(--color-text-secondary);gap:12px}
.steps .n{width:38px;height:38px;border-radius:50%;border:2px solid var(--color-border-strong);font-size:15px;color:var(--color-text-secondary)}
.steps .n svg{width:18px;height:18px}
.steps .lbl{display:flex;flex-direction:column;line-height:1.25}
.lbl-k{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--color-text-secondary)}
.steps li:not(:last-child)::after{height:3px;background:var(--color-border);margin:0 16px}
.steps li.done{color:var(--color-navy)}
.steps li.done .n{background:var(--color-success-soft);border-color:var(--color-success);color:var(--color-success)}
.steps li.done:not(:last-child)::after{background:var(--color-success)}
.steps li.current{color:var(--color-navy);font-weight:700}
.steps li.current .n{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-dark);box-shadow:0 0 0 4px var(--color-primary-line)}
.steps li.current .lbl-k{color:var(--color-primary-hover)}
.steps li.current .lbl{font-size:17px}
.steps button{padding:4px 6px}
.step-meta span{display:block;font-size:12.5px;font-weight:600;color:var(--color-primary-hover);letter-spacing:.02em}

/* karty wyboru (rodzaj klienta, sytuacja UA, termin): kółko wyboru zawsze widoczne → wypełnione z ✓ po wybraniu */
.choice,.start,.scan,.uav{background:var(--color-surface);border:1px solid var(--color-border)}
.choice:hover,.start:hover,.scan:hover,.uav:hover{background:var(--color-surface);border-color:var(--color-border-strong);box-shadow:0 12px 26px -22px rgba(10,27,61,.45)}
.choice .c-check,.start .c-check,.scan .c-check,.uav .c-check{opacity:1;transform:none;width:26px;height:26px;background:var(--color-surface);border:2px solid var(--color-border-strong);color:transparent}
.choice.sel .c-check,.start.sel .c-check,.scan.sel .c-check,.uav.sel .c-check{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-dark)}
.choice.sel,.start.sel,.scan.sel,.uav.sel{background:var(--color-primary-soft);border:2px solid var(--color-primary);box-shadow:0 12px 28px -22px color-mix(in srgb,var(--color-primary) 60%,transparent)}
.choice .ic{background:var(--color-background);color:var(--color-navy)}
.choice.sel .ic{background:var(--color-surface);color:var(--color-primary)}
.choice .ic-ukraine,.choice.sel .ic-ukraine{background:var(--color-surface);border:1px solid var(--color-border)}
.choice b{font-size:16.5px;font-weight:600;line-height:1.3}
.choice.primary b{font-size:18px}
.choice span.d{font-size:14px;line-height:1.5}
.choice.primary span.d{font-size:15px}
.choice .tag{font-size:12.5px;padding:3px 10px}
.choice.sel .tag{background:var(--color-surface);border-color:var(--color-primary-line)}
.start b,
.scan b{font-size:17.5px}
.start .st-d,
.scan .st-d{font-size:15px}
.uav b{font-size:16px}
/* pole daty pod wybraną opcją */
.date-wrap{margin-top:12px;padding:16px 18px;border-radius:14px;background:var(--color-surface);border:1px solid var(--color-border)}
.date-wrap input{max-width:280px}

/* podsumowanie: od kiedy · za jaki okres · do kiedy · ile (kwota największa) */
.sum2{margin-top:32px;padding:26px 28px;border-radius:16px;background:var(--color-surface);border:1px solid var(--color-border)}
.sum2 h2{font-size:21px;letter-spacing:-.02em;margin-bottom:18px}
.sum2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:24px;align-items:stretch}
.sum2 .sum2-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;align-content:start}
.sum2 .sum2-facts>div{display:block;padding:0;border:0}
.sum2 .sum2-facts dt{font-size:14px;line-height:1.4;color:var(--color-text-secondary)}
.sum2 .sum2-facts dd{margin-top:4px;font-size:17px;font-weight:600;line-height:1.35;color:var(--color-navy);text-align:left}
.sum2 .fx{display:block;margin-top:2px;font-size:14.5px;font-weight:500;color:var(--color-text-secondary)}
.sum2-pay{display:flex;flex-direction:column;justify-content:center;padding:20px 22px;border-radius:14px;background:var(--color-background);border:1px solid var(--color-border)}
.sp-l{font-size:15.5px;font-weight:700;color:var(--color-navy)}
.sp-v strong{display:block;margin-top:4px;font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.025em;color:var(--color-navy);white-space:nowrap}
.sp-s{margin-top:6px;font-size:14px;line-height:1.45;color:var(--color-text-secondary)}
.sum2 .ex{margin-top:20px;padding-top:16px;border-top:1px solid var(--color-border);font-size:15px;line-height:1.6;color:var(--color-text-secondary)}
.sum2 .ex-wait{margin-top:0;padding-top:0;border-top:0}

/* pasek akcji: pakiet + kwota po lewej, „Wstecz” i jeden główny przycisk po prawej */
.actionbar{background:rgba(255,255,255,.96)}
.ab-info b{font-size:16px}
.ab-info span{font-size:15.5px;color:var(--color-text-secondary)}
.ab-info strong{font-size:18px;color:var(--color-navy)}
.btn-back{min-height:48px;padding:10px 12px;color:var(--color-navy);font-size:16px}
.btn-back:hover{color:var(--color-primary-hover)}
.btn-go{font-size:17px}

/* krok 3: jasne podsumowanie (ten sam system co krok 2), kwota w wyróżnionym polu */
.sum{background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--sh-w);color:var(--color-navy);-webkit-backdrop-filter:none;backdrop-filter:none}
.sum h2{font-size:20px;color:var(--color-navy)}
.sum-pkg b{color:var(--color-navy)}
.sum dt{color:var(--color-text-secondary)}
.sum dd{color:var(--color-navy)}
.sum .money{border-top-color:var(--color-border)}
.sum .dep dt small{color:var(--color-text-secondary)}
.sum-total{display:block;margin-top:16px;padding:16px 18px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-background)}
.sum-total span{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:15.5px}
.sum-total span small{display:inline!important}
.sum-total strong{display:block;margin-top:4px}
.sum-total span{color:var(--color-navy)}
.sum-total span small{display:block;font-size:13.5px;font-weight:500;color:var(--color-text-secondary)}
.sum-total strong{font-size:30px;color:var(--color-navy)}
.sum-next{color:var(--color-text-secondary)}
.sum .link{color:var(--color-primary-hover)}
.sum :focus-visible{outline-color:var(--color-primary)}
.paybox .due span{font-size:16px}
.due-s{margin-top:-6px;font-size:14px;line-height:1.45;color:var(--color-text-secondary)}
.backlink .btn-back{padding-inline:4px}

@media (max-width:1023px){
  .sum2-grid{grid-template-columns:minmax(0,1fr)}
  .sum2 .sum2-facts>div{display:block}
  .sum2 .sum2-facts dd{text-align:left;margin-top:4px}
}
@media (max-width:767px){
  .screen h1{font-size:24px}
  .sec-h{font-size:20px}
  .screen .lead{font-size:15.5px}
  /* demo: jedna linia + „Opcje demo” */
  .demo .wrap{flex-wrap:wrap;gap:6px 10px}
  .demo .wrap{flex-wrap:wrap}
  .demo-long{display:none}
  .demo-short{display:inline}
  .demo-tg{display:inline-flex}
  .demo-opts{display:none;flex:1 1 100%;margin-left:0;padding-bottom:4px}
  .demo.is-open .demo-opts{display:flex}
  /* nagłówek: logo 33 + pakiet */
  .site .wrap{min-height:58px}
  .brand span{display:none}
  .site-order{padding-left:12px;font-size:15px;gap:4px 10px}
  /* postęp */
  .progress .wrap{min-height:64px;padding-block:8px}
  .steps .n{width:34px;height:34px;font-size:14px}
  .steps .lbl{display:none}
  .steps li:not(:last-child)::after{width:18px;flex:0 0 18px;margin:0 6px}
  .step-meta{font-size:16px;font-weight:700}
  /* karty */
  .choice.primary b{font-size:17px}
  .choice.primary span.d{font-size:14px}
  .start b,
  .scan b{font-size:17px}
  .start .st-d,
  .scan .st-d{font-size:14.5px}
  .date-wrap{padding:14px 16px}
  .date-wrap input{max-width:none}
  /* podsumowanie pionowo, kwota nadal największa */
  .sum2{padding:20px 18px}
  .sum2 h2{font-size:19px;margin-bottom:14px}
  .sum2 .sum2-facts{grid-template-columns:minmax(0,1fr);gap:14px}
  .sum2 .sum2-facts dd{font-size:16.5px}
  .sum2-pay{padding:16px 18px}
  .sp-v strong{font-size:30px}
  .sum2 .ex{font-size:14.5px}
  /* pasek akcji: 1 linia informacji + [Wstecz] [główny przycisk]; niski, nie zasłania treści */
  .actionbar{padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
  .actionbar .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"info info" "back cta";gap:8px 10px}
  .actionbar .ab-info{grid-area:info;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px}
  .ab-info b{font-size:14.5px}
  .ab-info span{font-size:14.5px;white-space:nowrap}
  .ab-info strong{font-size:16px}
  .actionbar .btn-back{grid-area:back;min-height:52px;padding:0 14px;border:1.5px solid var(--color-border-strong);border-radius:10px;background:var(--color-surface)}
  .actionbar .ab-cta{grid-area:cta;min-width:0}
  #s1 .actionbar .ab-cta{grid-column:1/-1}
  .actionbar .btn-go{width:100%;min-width:0;min-height:52px;padding:12px 14px;font-size:16px}
  .ab-pk{display:none}
  body.kb .actionbar{position:static}      /* klawiatura ekranowa: pasek nie przykleja się nad polami */
  .sum-total strong{font-size:27px}
}
@media (max-width:430px){
  /* wąski telefon: „Wstecz” jako przycisk z samą strzałką (nazwa dostępna dla czytników), żeby główny przycisk mieścił się w jednej linii */
  .actionbar .btn-back{width:52px;padding:0;justify-content:center}
  .actionbar .btn-back span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .actionbar .btn-back svg{width:20px;height:20px}
}
@media (max-width:380px){
  .so-per{display:none}                       /* sposób rozliczenia widać w pasku akcji */
  .actionbar .btn-go{font-size:15.5px;padding:12px 10px}
}
footer.f a{display:inline-flex;align-items:center;min-height:28px}   /* cel dotyku ≥ 24 px (WCAG 2.5.8) */
.so-chg{display:inline-flex;align-items:center;min-height:32px}          /* cel dotyku ≥ 24 px */
.sum .chg{display:inline-flex;align-items:center;min-height:28px}
/* podsumowanie boczne: daty jako „etykieta nad wartością” (bez ściskania etykiet w wąskiej kolumnie) */
.sum dl:not(.money){gap:12px}
.sum dl:not(.money) div{display:block}
.sum dl:not(.money) dt{font-size:14px}
.sum dl:not(.money) dd{margin-top:2px;text-align:left;white-space:normal;font-size:15.5px}

/* ===================== Brief wdrożeniowy 19.10 (14:11) ===================== */
.st-help{margin-top:22px;font-size:14.5px;color:var(--muted)}
.st-help a{color:var(--acc);font-weight:600;text-underline-offset:3px}
.prov-logo{display:inline-block;height:24px;width:auto;max-width:140px;padding:10px 12px;background:#FFFFFF;border:1px solid var(--line);border-radius:10px;box-sizing:content-box;object-fit:contain;vertical-align:middle}
.pay-methods .prov-logo{display:block;margin:0 0 8px}

/* ===================== Brief regulamin / opłaty 19.10 (18:35) ===================== */
.after-lead{margin:6px 0 10px;font-size:15px;line-height:1.5;font-weight:600;color:var(--ink)}
.sim-tag{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 10px;border-radius:999px;background:#FFF6DB;border:1px solid #E7C66B;color:#6B4A00;font-size:13px;font-weight:700;letter-spacing:0}

/* ===================== Brief checkout 19.10 (20:36) – CH-008…CH-022 ===================== */
/* CH-010: okres płatności ≠ długość umowy; link do zasad wcześniejszego zakończenia (12/24) */
.period-note a{color:var(--color-primary-hover);font-weight:600;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:28px}
#rules-early:focus{outline:3px solid var(--blue);outline-offset:4px;border-radius:6px}
/* CH-008: pomoc w wyborze – 3 kolumny nad kartami (desktop), 3 wiersze (telefon), bez CTA */
.pick-help{margin-top:16px;padding:14px 20px;border-radius:14px;background:var(--color-surface);border:1px solid var(--color-border)}
.ph-h{font-size:15px;font-weight:700;color:var(--ink)}
.pick-help ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 20px;margin-top:6px}
.pick-help li{font-size:14.5px;line-height:1.45;color:var(--color-text-secondary)}
.pick-help li b{font-weight:700;color:var(--ink)}
/* CH-009 / CH-011: karta – rozliczenie, nagłówek „Kwoty brutto”, mocniejsze „Łącznie do zapłaty” */
.c-bill{border-radius:10px;line-height:1.35}
.c-pay-h{border-top:1px solid var(--line);padding-top:10px;margin-bottom:4px;font-size:13.5px;font-weight:700;color:var(--color-text-secondary)}
.c-pay .c-pay-h+dl{border-top:0;padding-top:0}
.c-pay .t{margin-top:6px;padding-top:10px}
.c-pay .t dt{font-size:16px;line-height:1.25}
.c-pay .t-s{display:block;font-size:13px;font-weight:500;color:var(--color-text-secondary)}
.c-pay .t dd{font-size:21px;letter-spacing:-.01em;align-self:center}
.c-feat b{font-weight:600;color:var(--ink)}
/* CH-013: dwie główne ścieżki, pozostałe trzy jako „Inna sytuacja” */
.ch-more{grid-column:1/-1;margin:6px 0 -8px;font-size:15px;font-weight:600;color:var(--color-text-secondary)}
.tbc-in{display:block;margin-top:10px;font-size:13.5px}
/* CH-016: trzy etapy + szczegółowy przebieg */
.after .after-steps li::before{content:counter(a)}
.after-steps b{color:var(--ink);font-weight:700}
.after-more{margin-top:12px;border-top:1px solid var(--color-border)}
.after-more>summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:48px;cursor:pointer;font-weight:600;color:var(--color-primary-hover)}
.after-more>summary::-webkit-details-marker{display:none}
.after-more .chev{width:18px;height:18px;transition:transform .2s}
.after-more[open] .chev{transform:rotate(180deg)}
.after-more .after-lead{margin-top:0}
/* CH-002 / CH-018: dokumenty przed zgodą i płatnością */
.docs{margin-top:22px;padding:20px 22px;border-radius:16px;background:var(--color-surface);border:1px solid var(--color-border)}
.docs h2{font-size:21px}
.docs-list{list-style:none;display:grid;gap:8px;margin-top:12px}
.doc-link{display:flex;gap:12px;align-items:center;width:100%;min-height:56px;padding:10px 14px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface);font:inherit;text-align:left;color:var(--ink);text-decoration:none;cursor:pointer}
.doc-link:hover{border-color:var(--color-border-strong);background:var(--color-background)}
.doc-link svg{flex:none;width:22px;height:22px;color:var(--color-primary-hover)}
.doc-link b{display:block;font-weight:600;color:var(--color-primary-hover);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.doc-link small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--color-text-secondary)}
/* CH-017 / CH-022: NIP */
.nip-alt{font-size:14.5px;line-height:1.5;color:var(--color-text-secondary)}
.nip-alt .link{text-align:left;color:var(--color-primary-hover);display:inline;line-height:inherit}
/* CH-020: skrócony koszyk tuż przed przyciskiem */
.pb-cart{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15.5px;color:var(--ink)}
.pb-cart b{font-weight:700}
.pb-cart .chg{flex:none;display:inline-flex;align-items:center;min-height:32px;font-size:14.5px;color:var(--color-primary-hover)}
.pb-lines{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px dashed var(--line-2)}
.pb-lines div{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;line-height:1.4}
.pb-lines dt{min-width:0;color:var(--color-text-secondary)}
.pb-lines dd{font-weight:600;color:var(--ink);white-space:nowrap}
.paybox .due{align-items:center}
.paybox .due small{display:block;font-size:13px;font-weight:500;color:var(--color-text-secondary);text-align:left}
.c-tag{font-weight:400;color:var(--color-text-secondary);font-size:15.5px}
.c-tag b{font-weight:700;color:var(--ink)}
/* CH-006: data preferowana minęła / start „jak najszybciej” */
.start-note{margin-top:16px}
/* CH-003: lista integracji wymaganych przed publikacją (tylko demo) */
.demo-req{background:var(--color-primary-soft);border-top:1px dashed var(--color-border-strong);color:var(--ink);font-size:13.5px;line-height:1.5}
.demo-req .wrap{padding-block:10px}
.demo-req ul{margin:4px 0 0 18px}
@media (max-width:1023px){
  .pick-help{max-width:560px;margin-inline:auto}
  .pick-help ul{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (max-width:767px){
  .pick-help{padding:12px 14px}
  .pick-help li{font-size:14px}
  .docs{padding:18px 16px}
  .docs h2{font-size:19px}
}
/* CH-015: pełna etykieta „Dalej: dane do umowy i płatność”; na wąskich ekranach „Dalej: dane i płatność” (jedna linia, nazwa dostępna = widoczny tekst) */
@media (max-width:409px){ .cta-x{display:none} }
@media (max-width:409px){ .paybox .due{flex-direction:column;align-items:flex-start;gap:2px} }
/* CH-021: przewijanie do pól i komunikatów z uwzględnieniem przyklejonego paska akcji */
html{scroll-padding-bottom:110px}
.f-err-top{margin:0 0 14px}
@media (max-width:767px){ html{scroll-padding-bottom:150px} }
@media (min-width:768px){ .demo-opts{gap:6px 10px} }

/* ===================== Kolejne płatności 19.10 (21:44) ===================== */
.next-pay{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--color-primary-soft);border:1px solid var(--color-primary-line);text-align:left}
.next-pay>svg{width:20px;height:20px;margin-top:1px;color:var(--color-primary-hover)}
.np-h{font-size:14.5px;font-weight:700;line-height:1.4;color:var(--ink)}
.np-t{margin-top:2px;font-size:14px;line-height:1.5;color:var(--color-text-secondary)}
.np-amt{font-weight:700;color:var(--ink)}
.c-next .next-pay{margin-top:10px}
.sum2 .next-pay{margin-top:18px}
.sum2 .next-pay+.ex{margin-top:16px}
.sum .next-pay{margin-top:12px}
.pb-next .next-pay{margin-top:-2px}
@media (min-width:1024px){ .pb-next{display:none} }   /* na komputerze ten sam komunikat stoi w panelu podsumowania obok */
@media (max-width:767px){ .np-h{font-size:15px} .np-t{font-size:14.5px} }

/* ===== Brief 20.10.2026: podsumowanie w nagłówku na każdym kroku, „Dzisiaj zapłacisz” przed przyciskiem ===== */
.so-x{display:inline-flex;flex-wrap:wrap;gap:2px 10px;font-size:14px;color:var(--color-text-secondary)}
.so-x > span + span::before{content:"·";margin-right:10px;color:var(--color-border-strong)}
.pb-in{margin:-4px 0 -6px;font-size:13.5px;font-weight:600;color:var(--color-text-secondary)}
.pb-after{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:10px;background:var(--color-primary-soft);font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink)}
.pb-after svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--color-primary)}
.pay-note{display:block;font-size:13.5px;line-height:1.5;color:var(--color-text-secondary);text-align:center}
@media (max-width:767px){ .so-x{flex-basis:100%;order:3;gap:0 12px;font-size:13.5px} .so-x > span + span::before{content:none} }


/* Ikony treści: kafelki iOS w kolorach strony (21.10.2026) – Framework7 Icons (MIT) */
[data-k="shield"]{--c1:#16A34A}[data-k="check"]{--c1:#16A34A}[data-k="phone"]{--c1:#16A34A}[data-k="save"]{--c1:#16A34A}[data-k="calendar"]{--c1:#F0444B}[data-k="pin"]{--c1:#F0444B}[data-k="bell"]{--c1:#F0444B}[data-k="ret"]{--c1:#0EA5E9}[data-k="tram"]{--c1:#0EA5E9}[data-k="globe"]{--c1:#0EA5E9}[data-k="tag"]{--c1:#F5A524}[data-k="award"]{--c1:#F5A524}[data-k="star"]{--c1:#F5A524}[data-k="card"]{--c1:#F5A524}[data-k="idea"]{--c1:#F5A524}[data-k="doc"]{--c1:var(--color-primary)}[data-k="mail"]{--c1:var(--color-primary)}[data-k="home"]{--c1:var(--color-primary)}[data-k="users"]{--c1:#6D5DF5}[data-k="clock"]{--c1:#6D5DF5}[data-k="person"]{--c1:#6D5DF5}[data-k="car"]{--c1:#6D5DF5}[data-k="building"]{--c1:#13295A}
span.ios.ios{--s:32px;display:inline-grid;place-items:center;flex:none;flex-direction:row;gap:0;width:var(--s);height:var(--s);margin-top:0;padding:0;border-radius:calc(var(--s) * .24);background:var(--c1,var(--color-primary));background:linear-gradient(180deg,color-mix(in srgb,var(--c1,var(--color-primary)) 80%,#FFFFFF),var(--c1,var(--color-primary)));color:#FFFFFF;box-shadow:0 1px 2px rgba(10,27,61,.12)}
span.ios.ios svg{display:block;width:calc(var(--s) * .58);height:calc(var(--s) * .58);padding:0;margin:0;border:0;border-radius:0;background:none;color:#FFFFFF;fill:currentColor}
.assure span.ios.ios{--s:40px}
.choice .ic:has(.ios){width:auto;height:auto;background:none;border:0}
.choice .ic span.ios.ios{--s:32px}
.choice.primary .ic span.ios.ios{--s:44px}
.next-pay:has(> .ios){grid-template-columns:26px minmax(0,1fr)}
.next-pay > span.ios.ios{--s:26px}
.doc-link span.ios.ios{--s:32px}
.pb-after span.ios.ios{--s:24px;margin-top:-1px}

/* ===== 23.10.2026 (instrukcja wdrożeniowa, pkt 17): 6 etapów, zasady w podsumowaniu, tryb DEMO ===== */
/* Etapy 4–6 (podpis, weryfikacja, aktywacja) to statusy po płatności – mniejsze wyróżnienie, dopóki nie trwają */
.steps li.post.todo .lbl{font-weight:500}
.steps li:not(:last-child)::after{margin:0 10px}
@media (max-width:1279px){ .steps li:not(.current) .lbl{display:none} .steps li{flex:0 0 auto} .steps li.current{flex:1 1 auto} }
.sum-rules{list-style:none;display:grid;gap:8px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--color-border)}
.sum-rules li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:14px;line-height:1.45;color:var(--color-text-secondary)}
.sum-rules b{color:var(--ink);font-weight:700}
.sum-rules svg{width:18px;height:18px;margin-top:1px;color:var(--color-primary)}
/* telefon: 6 etapów w jednym rzędzie bez przewijania – mniejsze kółka i łączniki, opis etapu pod spodem */
@media (max-width:767px){
  .progress .wrap{flex-wrap:wrap;row-gap:6px}
  .steps .n{width:28px;height:28px;font-size:13px;border-width:1.5px}
  .steps .n svg{width:14px;height:14px}
  .steps li{gap:0}
  .steps li:not(:last-child)::after{width:10px;flex:0 0 10px;margin:0 4px;height:2px}
  .step-meta{flex-basis:100%;font-size:14.5px}
}
.demo-proc b{font-weight:700}

/* 23.10.2026 (instrukcja CRO, pkt 6): wybór sposobu skanowania – te same karty co „Kiedy chcesz rozpocząć” */
.scan-box{margin-top:30px}
.scans legend.sec-h{display:block;margin:0 0 4px;padding:0;font-size:20px;line-height:1.3;font-weight:700;color:var(--ink)}
.scan-note{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--color-text-secondary)}
.after-lead2{margin:6px 0 12px;font-size:15px;line-height:1.55;color:var(--ink)}

/* =====================================================================
   Instrukcja checkoutu 23.10.2026 (11:50): krok 1 „Pakiet i obsługa”, krok 2 „Dane i termin”, nowe podsumowanie
   ===================================================================== */
/* krok 1: przełącznik rozliczenia – kompaktowy, nazwa + realna oszczędność */
.period{margin-top:0;max-width:600px}
.period label{padding:10px 6px;gap:0}
.period .t{font-size:16px}
.period .sv{font-size:13.5px}
.period-note{margin-top:10px;font-size:14.5px;color:var(--color-text-secondary)}
.free-strip{display:flex;align-items:center;justify-content:center;gap:8px;max-width:760px;margin:14px auto 0;font-size:15px;line-height:1.45;color:var(--color-navy);text-align:center}
.free-strip svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--color-success);color:#fff}
.free-strip b{color:var(--color-success)}
/* karty: nazwa → przeznaczenie → cena → brutto → oszczędność → usługi → do zapłaty */
.plans{grid-template-rows:repeat(6,auto);margin-top:26px}
.card{grid-row:span 6}
.c-tag{margin-top:8px;font-size:15px;font-weight:500;line-height:1.45;color:var(--color-text-secondary)}
.c-price{margin-top:16px}
.c-gross{margin-top:6px}
.c-save{margin-top:6px;font-size:14.5px;font-weight:700;line-height:1.35;color:var(--color-success)}
.c-feat{margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border)}
.c-fee{color:var(--color-text-secondary);font-weight:400}
.c-up{margin-top:12px;padding:0;background:none;border:0;font-size:14px;font-weight:500;color:var(--color-text-secondary)}
.c-pay{padding-top:16px}
.c-pay dl{padding-top:12px}
.c-pay .t dd{font-size:19px}
.c-next{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--color-text-secondary)}
/* wybrana karta: niebieska ramka, subtelne tło, widoczny znacznik */
.card{border:1.5px solid var(--color-border)}
.card.rec{border:1.5px solid var(--color-gold-line)}
.card.sel{border:2px solid var(--color-primary);background:#F7F9FF;box-shadow:0 22px 46px -30px color-mix(in srgb,var(--color-primary) 55%,transparent)}
.card.rec.sel{background:var(--color-gold-card)}
/* krok 1: sposób skanowania pod kartami (Gold, Platinum) */
.scan-box{max-width:880px;margin:32px auto 0}
.scan-box .sec-h{font-size:21px;text-align:center}
.scans{margin-top:14px;gap:14px}
.scan{padding:16px 52px 16px 18px;background:#fff;box-shadow:none}
.scan.sel{padding:15px 51px 15px 17px;background:var(--color-primary-soft)}
.scan b{font-size:16.5px}
.scan .st-d{margin-top:4px;font-size:14.5px}
.scan .c-check{top:16px;right:16px}
.scan-note{margin-top:10px;text-align:center}
.scan-box .f-err{justify-content:center;margin-top:8px}
/* krok 1: „Twój wybór” w pasku akcji */
.ab-s1 .ab-info{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.yc-h{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-secondary)}
.yc{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:0;padding:0}
.yc li{display:flex;align-items:baseline;gap:6px;font-size:14.5px;line-height:1.35}
.ab-info .yc li span{font-size:14px;color:var(--color-text-secondary)}
.ab-info .yc li b{display:inline;font-size:15px;font-weight:700;color:var(--color-navy)}
.ab-info .yc .yc-free b{color:var(--color-success)}
.ab-info .yc .yc-tot b{font-size:19px}
.yc small{font-size:13px;color:var(--color-text-secondary)}
@media (max-width:1023px){
  .ab-s1 .wrap{flex-wrap:wrap}
  .ab-s1 .ab-info{flex:1 1 100%}
}
@media (max-width:767px){
  /* telefon: zwarty pasek – pakiet i kwota, przycisk na całą szerokość; reszta wyboru jest na stronie */
  .ab-s1 .yc-h,.ab-s1 .yc li:not(:first-child):not(.yc-tot),.ab-s1 .yc small{display:none}
  .ab-s1 .yc{gap:2px 14px}
  .ab-s1 .ab-cta,.ab-s1 .btn{width:100%;min-width:0}
  .free-strip{justify-content:flex-start;text-align:left}
  .scans{grid-template-columns:minmax(0,1fr)}
  .period{max-width:none}
}
/* krok 2: dla kogo umowa – mniej ramek, krótsze opisy */
.choice.primary{min-height:0;padding:24px}
.choice.primary.sel{padding:23px}
.choice.primary span.d{margin:6px 0 0}
.choice{box-shadow:none;background:#fff}
.choice.sel{background:var(--color-primary-soft)}
.ua-note,.type-note{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--color-navy)}
.type-note{padding-left:12px;border-left:3px solid var(--color-primary)}
.ua-box .ua-note{margin-top:12px;color:var(--color-text-secondary)}
/* krok 2: termin – karta „Jak najszybciej” z panelem darmowego okresu */
.sec-head{margin-top:44px}
.starts{margin-top:18px;align-items:stretch}
.start{background:#fff;box-shadow:none}
.start.sel{background:var(--color-primary-soft)}
.free-panel:not([hidden]){display:grid;gap:2px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--color-success-soft);border:1px solid var(--color-success-line)}
.free-panel b{font-size:16px;font-weight:700;color:var(--color-success)}
.free-panel span{font-size:14.5px;line-height:1.45;color:var(--color-navy)}
.free-panel .fp-d{margin-top:4px;font-weight:600}
.fp-date:not([hidden]){display:block;margin-top:12px;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--color-success)}
.sla{margin-top:12px;font-size:14px;line-height:1.5;color:var(--color-text-secondary)}
/* krok 2: podsumowanie – oferta (lewa) | płatność (prawa) */
.sum2{margin-top:36px;padding:26px 28px;background:#fff;box-shadow:none}
.sum2 h2{font-size:20px;margin-bottom:18px}
.s2-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.s2-offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.s2-blk{min-width:0}
.s2-blk:first-child{grid-column:1/-1}
.s2-k{display:flex;align-items:baseline;gap:10px;font-size:13.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--color-text-secondary)}
.s2-k .chg{font-size:14px;letter-spacing:0;text-transform:none}
.s2-v{margin-top:4px;font-size:17px;font-weight:700;line-height:1.35;color:var(--color-navy)}
.s2-s{margin-top:2px;font-size:14px;line-height:1.45;color:var(--color-text-secondary)}
.s2-free .s2-s b{color:var(--color-success)}
.s2-dl{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:6px}
.s2-dl div{display:flex;gap:6px;align-items:baseline}
.s2-dl dt{font-size:14.5px;color:var(--color-text-secondary)}
.s2-dl dt::after{content:":"}
.s2-dl dd{font-size:16.5px;font-weight:700;color:var(--color-navy)}
.s2-pay{padding:20px 22px;border-radius:14px;background:var(--color-background);border:1px solid var(--color-border)}
.s2-pay .sp-v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.s2-pay .sp-v strong{font-size:34px}
.s2-pay .sp-v span{font-size:14px;color:var(--color-text-secondary)}
.s2-lines{display:grid;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--color-border)}
.s2-lines div{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.s2-lines dt{color:var(--color-text-secondary)}
.s2-lines dd{font-weight:600;color:var(--color-navy);white-space:nowrap}
.s2-rng{display:block;margin-top:1px;font-size:13px;font-weight:500;color:var(--color-text-secondary);white-space:nowrap}
.s2-lines .s2-sum{margin-top:4px;padding-top:8px;border-top:1px dashed var(--color-border-strong)}
.s2-lines .s2-sum dt,.s2-lines .s2-sum dd{font-weight:700;color:var(--color-navy)}
.s2-dep{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--color-text-secondary)}
.s2-pay .next-pay{margin-top:14px;background:#fff}
@media (max-width:1023px){ .s2-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:767px){
  .sum2{padding:20px 18px}
  .s2-offer{grid-template-columns:minmax(0,1fr);gap:14px}
  .s2-pay{padding:16px}
  .s2-pay .sp-v strong{font-size:30px}
}
.sum .free dd{color:var(--color-success)}
.sum .fx{display:block;font-size:13px;font-weight:500;color:var(--color-success)}
.period .ps{display:none}
@media (max-width:479px){ .period .pl{display:none} .period .ps{display:inline} .period .t{font-size:15px} }
.free-strip{width:fit-content;max-width:100%;padding:9px 16px;border-radius:999px;background:var(--color-success-soft);border:1px solid var(--color-success-line)}
@media (max-width:767px){ .free-strip{border-radius:14px;align-items:flex-start} .free-strip svg{margin-top:1px} }
/* nowe podsumowanie: neutralizacja starszych reguł .sum2 dl (kolumny z liniami) */
.sum2 .s2-dl{display:flex}
.sum2 .s2-dl>div,.sum2 .s2-lines>div{padding:0;border-left:0}
.sum2 .s2-dl>div{display:flex}
.sum2 .s2-lines>div{display:flex;justify-content:space-between;align-items:baseline}
.sum2 .s2-dl dd,.sum2 .s2-lines dd{margin:0;text-align:right}
.sum2 .s2-dl dt,.sum2 .s2-lines dt{font-size:14.5px}
.sum2 .s2-lines dd{font-size:15px;font-weight:600}
.sum2 .s2-lines .s2-sum dd{font-size:16px;font-weight:700}
.sum2 .s2-dl dd{font-size:16.5px;font-weight:700}
@media (min-width:768px) and (max-width:1023px){
  /* tablet: zwarty pasek „Twój wybór” (pakiet, skanowanie, kwota) w jednym rzędzie z przyciskiem */
  .ab-s1 .wrap{flex-wrap:nowrap}
  .ab-s1 .ab-info{flex:1 1 auto}
  .ab-s1 .yc-h,.ab-s1 .yc small,.ab-s1 .yc li:nth-child(2),.ab-s1 .yc .yc-free{display:none}
}
@media (max-width:479px){ .period .zg{display:block} }
/* 24.10.2026 (audyt CRO P1.4): wybór skanowania w kroku 2 – gdy klient przyszedł z cennika i ominął krok 1. Te same karty co w kroku 1. */
.scan2{margin-top:36px}
.scan2 .scans{margin-top:16px}
/* =====================================================================
   25.10.2026 – zamówienie dla osób fizycznych (audience: consumer)
   ===================================================================== */
.todo-doc{display:inline-block;padding:0 6px;border:1px dashed #B45309;border-radius:6px;background:#FFF7ED;color:#7C2D12;font-size:12.5px;font-weight:700;line-height:1.5}
.doc-todo{cursor:default}
.doc-todo small.todo-doc{display:inline-block;margin-top:3px}
details.precon{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
details.precon summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:12px 16px;font-weight:700;color:var(--ink)}
details.precon summary::-webkit-details-marker{display:none}
details.precon summary .chev{width:18px;height:18px;flex:none;transition:transform .18s ease}
details.precon[open] summary .chev{transform:rotate(180deg)}
.precon-body{padding:0 16px 14px}
.precon-dl{display:grid;gap:10px;margin:0}
.precon-dl > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 14px;padding-top:10px;border-top:1px solid var(--line)}
.precon-dl dt{font-size:13.5px;font-weight:700;color:var(--ink)}
.precon-dl dd{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.precon-dl a{font-weight:600}
.consent-hint{margin:-4px 0 0 32px;font-size:13.5px;line-height:1.45;color:var(--muted)}
#early-wrap{display:grid;gap:8px}
#early-wrap[hidden]{display:none}
.money .vat-in dt,.money .vat-in dd{font-size:13.5px;color:var(--muted)}
@media (max-width:600px){ .precon-dl > div{grid-template-columns:minmax(0,1fr)} .consent-hint{margin-left:0} }
/* dwa pakiety dla osób fizycznych – wyśrodkowane, ta sama siatka wierszy co karty firmowe */
body.cons .plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-inline:auto}
@media (max-width:860px){ body.cons .plans{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:16px;max-width:560px} }
.doc-todo b{color:var(--ink);text-decoration:none}

/* ---------- 25.10.2026: przełącznik języka PL / УКР (ścieżka dla firm), podgląd wiadomości e-mail (demo) ---------- */
/* 26.10.2026: przełącznik 4 języków (PL / UA / EN / DE) – przycisk z globusem i lista; język zmienia się tylko po świadomym wyborze */
.lang-sw{position:relative;margin-left:auto;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--color-border);border-radius:999px;background:#fff;color:var(--color-navy);font:600 14px/1 Onest,system-ui,sans-serif;letter-spacing:.02em;cursor:pointer}
.lang-btn svg{width:18px;height:18px;flex:none}
.lang-btn .lang-fl{display:inline-flex;width:20px;height:14px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(10,27,61,.12)}
.lang-btn .lang-fl svg{width:20px;height:14px}
.lang-btn .lang-car{width:14px;height:14px;transition:transform .15s}
.lang-btn[aria-expanded="true"] .lang-car{transform:rotate(180deg)}
.lang-btn:hover{background:var(--color-primary-soft)}
.lang-btn:focus-visible,.lang-list a:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}
.lang-list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:200px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--color-border);border-radius:14px;box-shadow:0 12px 32px rgba(10,27,61,.14)}
.lang-list[hidden]{display:none}
.lang-list a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:10px;color:var(--color-navy);text-decoration:none;font:500 15px/1.2 Onest,system-ui,sans-serif}
.lang-list a:hover{background:var(--color-primary-soft)}
.lang-list a[aria-current]{font-weight:700}
.lang-list a svg{width:18px;height:18px;margin-left:auto;color:var(--color-primary)}
.lang-list .lang-fl{display:inline-flex;width:20px;height:14px;border-radius:2px;overflow:hidden;flex:none}
.lang-list .lang-fl svg{width:20px;height:14px;margin:0}
@media (max-width:640px){ .lang-btn{padding:0 10px;font-size:13px} }
.doc-note-pl .doc-link{cursor:default}
.st-lang b{font-weight:600}
details.mail-prev{margin-top:18px;border:1px solid var(--color-border);border-radius:14px;background:#fff;padding:0 16px}
details.mail-prev summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--color-navy)}
.mail-prev-b{display:grid;gap:12px;padding-bottom:16px}
.mail-prev .mail{border-top:1px solid var(--color-border);padding-top:12px}
.mail-prev .mail-s{margin:0 0 6px;color:var(--color-navy)}
.mail-prev .mail-t{margin:0;white-space:pre-wrap;font:15px/1.5 Onest,system-ui,sans-serif;color:var(--color-text-secondary)}
.brand .sr{display:block!important}   /* 25.10.2026: dostępna nazwa logo także wtedy, gdy napis jest ukryty (telefon) */
.st-help-l{margin-top:16px;font-size:14.5px;color:var(--muted)}
/* 26.10.2026 (14:16): nowe logo Nowy Świat 33 – wersja jasna pozioma (plik od firmy) */
.brand-logo{display:block;width:auto;height:46px}
.brand-znak{display:none;width:auto;height:36px}
@media (max-width:640px){ .brand-logo{display:none} .brand-znak{display:block} }   /* telefon: sam znak (obok skrót zamówienia) */
.brand{flex:none}
.brand-logo,.brand-znak{max-width:none}
/* 28.10.2026: pasek kroków na całą szerokość – łączniki wypełniają przestrzeń, ostatni krok bez pustego miejsca po prawej; równe marginesy */
.progress .steps-nav{flex:1 1 100%}
.steps li:last-child{flex:0 0 auto}
.progress .wrap{padding-inline:24px}
@media (max-width:767px){
  .progress .wrap{flex-wrap:wrap;justify-content:center;padding-inline:16px;row-gap:6px}
  .progress nav.steps-nav{flex:1 1 100%!important}
  .progress .steps li{flex:1 1 0}
  .progress .steps li:last-child{flex:0 0 auto}
  .progress .steps li:not(:last-child)::after{width:auto;flex:1 1 auto;margin:0 8px}
  .progress .step-meta{flex:1 1 100%;text-align:center}
}