/* ulotka.css — ulotka A6 „Twój pakiet” (strona ulotka/). Karta = obszar 525×740 px (.mock) skalowany do 105×148 mm zmienną --s (zoom, nie transform: przy druku transform nie zmienia układu i Chrome ucina kartę);
   reguły kart skopiowane 1:1 z makiety _tools/raporty/build-makiety.py + build-ulotka-pakiet.py (zaakceptowanej przez klienta). */
/* ---------- makiety ---------- */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/BarlowCondensed-ExtraBold.ttf) format("truetype")}
.mock{--font:"Figtree",system-ui,sans-serif;--num:"Unbounded","Figtree",sans-serif;
  position:absolute;left:0;top:0;zoom:var(--s);overflow:hidden;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.25}
.mock *{box-sizing:border-box;margin:0}
.mock h1,.mock h2,.mock h3,.mock h4,.mock p{border:0;padding:0;font-size:inherit}
.mock[data-theme="light"]{--bg:#FFFFFF;--bg-2:#F2F4F7;--ink:#24282D;--muted:#5F6063;--line:#D5D9E0;--accent:#008DD2;--accent-btn:#0077B3;--accent-ink:#FFFFFF;
  --accent-text:#00659B;--accent-2:#2F6690;--skyline:#2C3440;--sky1:#BFE2F5;--sky2:#E3F1FA;--sky3:#F2F4F7;--horizon:rgba(0,141,210,.32);
  --au-b1:#008DD2;--au-b2:#5CC8FF;--au-b3:#8FA3B5;--au-b4:#2F6690;--au-ray:#FFFFFF;--pk-panel:#FFFFFF;--pk-edge:#B9C0CA;--pk-recess:#ECEFF3;--paper:#FFFFFF;
  --ok:#1E8A4C;--dial-c1:#8FD4F5;--dial-c2:#008DD2;--dial-c3:#3E5A70;--glass:rgba(255,255,255,.74)}
.mock[data-theme="dark"]{--bg:#14181C;--bg-2:#1C2126;--ink:#E8ECF0;--muted:#B9C0CA;--line:#2E353C;--accent:#2FA8E8;--accent-btn:#2FA8E8;--accent-ink:#04141E;
  --accent-text:#5CC8FF;--accent-2:#8FA3B5;--skyline:#07090B;--sky1:#06090C;--sky2:#0E1A24;--sky3:#16283A;--horizon:rgba(0,141,210,.35);
  --au-b1:#008DD2;--au-b2:#5CC8FF;--au-b3:#8FA3B5;--au-b4:#2F6690;--au-ray:#9FD8FF;--pk-panel:#171B1F;--pk-edge:#353C43;--pk-recess:#0B0E10;--paper:#1B2024;
  --ok:#3FCF7A;--dial-c1:#8FD4F5;--dial-c2:#2FA8E8;--dial-c3:#8FA3B5;--glass:rgba(20,24,28,.6)}
.mock .sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky1),var(--sky2) 55%,var(--sky3))}
.mock .horizon{position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to bottom,transparent,var(--horizon))}
.mock .aurora{position:absolute;left:0;top:0;width:100%;height:55%}
.mock .au-rays rect{fill:var(--au-ray)}
.mock .au-b1{stroke:var(--au-b1)}.mock .au-b2{stroke:var(--au-b2)}.mock .au-b3{stroke:var(--au-b3)}.mock .au-b4{stroke:var(--au-b4)}
.mock .stars{position:absolute;left:0;top:0;width:100%;height:62%}
.mock .au-stars circle{fill:#fff}.mock[data-theme="light"] .au-stars{display:none}
.mock[data-theme="light"] .aurora path{opacity:.42}
.mock[data-theme="light"] .au-rays{opacity:.55}
.mock .skyline{position:absolute;left:0;bottom:0;width:100%;height:var(--sky-h,30%);fill:var(--skyline);overflow:visible;z-index:2}
.mock .sky-far{opacity:.5}
.mock .skyline .mast{fill:none;stroke:var(--skyline);stroke-width:2.2;stroke-linejoin:round}
.mock .skyline .wire,.mock .skyline .fiber,.mock .skyline .drop,.mock .skyline .pole-arm,.mock .skyline .ring{fill:none;stroke:var(--skyline);stroke-linecap:round}
.mock .skyline .wire{stroke-width:1.4}.mock .skyline .fiber,.mock .skyline .drop{stroke-width:1.1}.mock .skyline .pole-arm{stroke-width:2.6}.mock .skyline .ring{stroke-width:1.3}
.mock .skyline .win{fill:#FFD27A;opacity:0}.mock .skyline .win--lit,.mock .skyline .win--tw{opacity:.9}
.mock .skyline .blink{fill:#E0362E}
.mock .logo{display:block;height:48px;width:auto}
.mock .grad{background:linear-gradient(90deg,var(--accent-text),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.mock .num{font-family:var(--num);font-weight:900;background:linear-gradient(160deg,var(--dial-c1),var(--dial-c2) 55%,var(--dial-c3));-webkit-background-clip:text;background-clip:text;color:transparent}
.mock .zl{font-family:var(--num);font-weight:700;color:var(--accent-text)}
.mock .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:var(--accent-btn);color:var(--accent-ink);font-weight:700;white-space:nowrap;letter-spacing:-.01em}
.mock .tk{display:flex;align-items:center;gap:10px;border:2px solid transparent;border-radius:12px;
  background:linear-gradient(var(--pk-panel),var(--pk-panel)) padding-box,linear-gradient(160deg,var(--dial-c1),var(--dial-c2) 55%,var(--dial-c3)) border-box}
.mock .tk .ico{color:var(--accent-text);flex:none;width:26px;height:26px}
.mock .tk b{display:block;font-weight:800;line-height:1.1}
.mock .tk span{display:block;color:var(--muted);line-height:1.2}
.mock .panel{--scr:radial-gradient(circle,var(--pk-edge) 0 2.2px,transparent 2.9px);position:relative;border:1.5px solid transparent;border-radius:14px;
  background:var(--scr) 9px 9px/8px 8px no-repeat padding-box,var(--scr) calc(100% - 9px) 9px/8px 8px no-repeat padding-box,var(--scr) 9px calc(100% - 9px)/8px 8px no-repeat padding-box,var(--scr) calc(100% - 9px) calc(100% - 9px)/8px 8px no-repeat padding-box,
  linear-gradient(var(--pk-panel),var(--pk-panel)) padding-box,linear-gradient(160deg,var(--dial-c1),var(--dial-c2) 55%,var(--dial-c3)) border-box}
.mock .sum{--sc:6px;border-radius:6px 6px 0 0;background:var(--paper);padding:12px 16px calc(12px + var(--sc));
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--sc) + 1px) no-repeat,radial-gradient(circle var(--sc) at 50% 100%,#0000 96%,#000) 0 100%/calc(2*var(--sc)) var(--sc) repeat-x;
  mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--sc) + 1px) no-repeat,radial-gradient(circle var(--sc) at 50% 100%,#0000 96%,#000) 0 100%/calc(2*var(--sc)) var(--sc) repeat-x}
.mock .ticket{position:relative;background:var(--paper);border-radius:10px;
  -webkit-mask:radial-gradient(circle 8px at 0 55%,#0000 97%,#000),radial-gradient(circle 8px at 100% 55%,#0000 97%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle 8px at 0 55%,#0000 97%,#000),radial-gradient(circle 8px at 100% 55%,#0000 97%,#000);mask-composite:intersect}
.mock .fine{color:var(--muted)}
.mock .tagline{color:var(--muted);font-weight:600}
.mock .chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:3px 10px 3px 4px;font-weight:600;background:var(--pk-panel)}
.mock .chip i{font-style:normal;font-weight:800;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;background:var(--bg-2);color:var(--ink)}
.mock .chip b{font-weight:800}
.mock .chip.is-on{border-color:var(--accent);background:var(--accent-btn);color:var(--accent-ink)}
.mock .chip.is-on i{background:var(--accent-ink);color:var(--accent-btn)}

/* ulotka */
.ul-f{--sky-h:180px}
.uf{position:relative;z-index:3;padding:26px 28px 0;height:100%;display:flex;flex-direction:column}
.uf__top{display:flex;justify-content:space-between;align-items:flex-start}
.uf .logo{height:50px}
.uf .tagline{font-size:12px;margin-top:5px}
.uf .chip-new{font-size:12px;font-weight:700;color:var(--accent-text);border:1.5px solid var(--accent);border-radius:999px;padding:5px 11px;background:var(--glass)}
.uf h1{font-size:54px;line-height:1.02;letter-spacing:-.03em;font-weight:800;margin-top:30px}
.uf .lead{font-size:19px;margin-top:12px;font-weight:600}
.uf__mid{display:grid;grid-template-columns:minmax(0,1fr) 214px;gap:10px;align-items:center;margin-top:16px}
.uf .price{display:flex;flex-direction:column;gap:4px;min-width:0}
.uf .price>div{display:flex;align-items:baseline;gap:5px}
.uf .price .zl{font-size:40px;line-height:1}
.uf .price small{font-size:14px;color:var(--muted);line-height:1.2;font-weight:600;padding-left:6px}
.uf .tiles{display:grid;gap:8px}
.uf .tk{padding:8px 10px;font-size:11.5px}
.uf .tk b{font-size:17px}
.uf__cta{display:flex;align-items:center;gap:16px;margin-top:18px}
.uf .btn{height:54px;padding:0 22px;font-size:21px}
.uf .www{font-weight:800;font-size:19px;color:var(--accent-text)}
.uf .fine{font-size:10.5px;margin-top:10px}
.ul-b{background:var(--bg-2)}
.ub{position:relative;padding:22px 28px 20px;height:100%;display:flex;flex-direction:column;gap:11px}
.ub__head{display:flex;align-items:center;justify-content:space-between}
.ub .logo{height:32px}
.ub h2{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1}
.ub .sum{font-size:12.5px}
.ub .sum .row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:4px 0;border-bottom:1px dashed var(--line)}
.ub .sum .row small{display:block;color:var(--muted);font-size:10.5px}
.ub .sum .row b{font-weight:800;white-space:nowrap}
.ub .sum .row.sub{font-weight:700;border-bottom:1px solid var(--line)}
.ub .sum .row.minus b{color:var(--ok)}
.ub .sum .total{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;font-size:14px;font-weight:700}
.ub .sum .total .num{font-size:26px}
.ub .sum .sv{color:var(--accent-text);font-weight:700;font-size:12px;margin-top:2px}
.ub .sim h3{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:-.01em}
.ub .sim h3 .ico{width:22px;height:22px;color:var(--accent-text)}
.ub .sim ul{padding-left:18px;font-size:12px;line-height:1.35;margin-top:5px}
.ub .sim li{margin:1px 0}
.ub .plans{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px;font-size:11.5px}
.ub .plans small{flex-basis:100%;font-size:10px;color:var(--muted)}
.ub .contact{display:grid;grid-template-columns:1fr 1.25fr;gap:10px 16px;padding:12px 18px;font-size:11.5px;line-height:1.25}
.ub .contact .c1{display:flex;flex-direction:column;gap:3px}
.ub .contact .c1 b{font-size:13px}
.ub .contact .c2{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}
.ub .contact .c2 span{display:flex;flex-direction:column}
.ub .contact small{font-size:9.5px;color:var(--muted)}
.ub .contact .c2 b{font-weight:700;white-space:nowrap}
.ub .fine{font-size:9.5px;line-height:1.3;margin-top:auto}

/* wizytówka, ulotka, baner: tło jak na zatwierdzonym bilbordzie (bez zorzy): jasno ciemne domki bez poświaty, nocą kolory hero + granatowa obwódka;
   ujemny bottom zsuwa pusty grunt spod domków poza krawędź (25% wysokości sylwetki, bo te pola są ograniczone wysokością) */
.mock.nb[data-theme="light"]{--skyline:#171B20}
.mock.nb[data-theme="light"] .sky-far{opacity:.62}
.mock.nb[data-theme="light"] .horizon{display:none}
.mock.nb .skyline{bottom:calc(var(--sky-h) * -.25);overflow:visible}
.mock.nb[data-theme="dark"] .sky-near rect:not([class]),.mock.nb[data-theme="dark"] .sky-near polygon:not([class]),.mock.nb[data-theme="dark"] .sky-near circle:not([class]),
.mock.nb[data-theme="dark"] .sky-near .pole,.mock.nb[data-theme="dark"] .sky-near .pole-box{stroke:#3D6E9E;stroke-width:2.8;stroke-linejoin:round;paint-order:stroke fill}
.mock.nb[data-theme="dark"] .skyline .wire,.mock.nb[data-theme="dark"] .skyline .fiber,.mock.nb[data-theme="dark"] .skyline .drop,.mock.nb[data-theme="dark"] .skyline .pole-arm,
.mock.nb[data-theme="dark"] .skyline .ring,.mock.nb[data-theme="dark"] .skyline .mast{stroke:#3D6E9E;opacity:.9}
/* cena na ulotce jak na bilbordzie: 99 + małe 99 i „zł” w indeksie górnym, Barlow Condensed, ciemniejszy gradient */
.mock.ul-f[data-theme="light"]{--price-1:#0A6FA8;--price-2:#004F7A;--price-3:#1C3A52}
.mock.ul-f[data-theme="dark"]{--price-1:#FFFFFF;--price-2:#9FDDFF;--price-3:#5CC8FF}
.uf .price .num{font-family:"Barlow Condensed","Figtree",sans-serif;font-weight:800;font-size:122px;line-height:.8;letter-spacing:-.01em;display:inline-flex;align-items:flex-start;
  background-image:linear-gradient(160deg,var(--price-1),var(--price-2) 60%,var(--price-3));--gr-pad:.0438em}
.uf .price .num .big{line-height:.8}
.uf .price .num .gr{display:flex;flex-direction:column;align-self:stretch;margin-left:.06em;line-height:.8;padding-top:var(--gr-pad);background:inherit;-webkit-background-clip:text;background-clip:text}
.uf .price .num .gr b{font-size:.5em;font-weight:800;line-height:.8}
.uf .price .num .gr i{font-style:normal;font-size:.3em;font-weight:800;line-height:.85;margin-top:auto}

/* układ ulotki „Twój pakiet” */
.mock.up .uf h1{margin-top:34px}
.mock.up .uf .cfg{font-size:14.5px;font-weight:700;margin-top:10px;white-space:nowrap}
.mock.up .uf__mid{margin-top:28px;align-items:start}
.mock.up .uf .price{position:relative;padding-top:34px}
.mock.up .uf .price .num{font-size:128px}
.mock.up .uf .tk{padding:9px 10px}
.mock.up .uf .tk b{font-size:16px}
.mock.up .sticker{position:absolute;left:2px;top:0;transform:rotate(-4deg);background:var(--ok);color:#FFFFFF;font-weight:800;font-size:15px;padding:6px 14px;border-radius:999px;white-space:nowrap}
.mock.up .uf__cta{flex-direction:column;align-items:flex-start;gap:6px;position:absolute;left:28px;bottom:128px;margin:0}
.mock.up .uf .www{font-size:17px;padding-left:4px}
.mock.up .qrb{position:absolute;right:26px;bottom:104px;width:124px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.mock.up .qrb__c{background:#FFFFFF;padding:6px;border-radius:8px;width:100px;height:100px}
.mock.up .qrb__c svg{display:block;width:100%;height:100%}
.mock.up .qrb span{font-size:10.5px;font-weight:700;line-height:1.2;color:var(--ink);background:var(--glass);border-radius:6px;padding:2px 4px}
.ubp .ub{gap:9px}
.ubp.ul-b .ub{gap:9px}
.ubp .sum .row{align-items:baseline}
.ubp .sum .row span{white-space:nowrap;min-width:0}
.ubp .sum .row .n{font-weight:700}
.ubp .sum .row small{display:inline;font-size:10.5px}
.ubp .sum .row s{color:var(--muted);font-weight:500;margin-right:7px}
.ubp .sum .sv{margin-top:6px}
.ubp .sum.once{padding-top:9px}
.ubp .sum.once h3{font-size:14px;font-weight:800;margin-bottom:2px}
.ubp .sum.once .total{font-size:13px}
.ubp .sum.once .total b{font-weight:800;font-size:16px}
.ubp .contact .c2{grid-template-columns:1fr 1fr}
.ubp .contact .c2 span:last-child{grid-column:1/-1}
.ubp .fine{font-size:9.5px;line-height:1.3;margin-top:auto}

/* gęstsze układy: wiele usług na przodzie, długi paragon na tyle (włączane z ulotka.js, gdy treść nie mieści się w karcie) */
.mock.up .tiles--many{gap:6px}
.mock.up .tiles--many .tk{padding:6px 10px}
.mock.up .tiles--many2{gap:4px}
.mock.up .tiles--many2 .tk{padding:4px 8px;gap:8px}
.mock.up .tiles--many2 .tk .ico{width:20px;height:20px}
.mock.up .tiles--many2 .tk b{font-size:13.5px}
.mock.up .tiles--many2 .tk span{font-size:9.5px;line-height:1.15}
.ubp .ub--t1{gap:6px}
.ubp .ub--t1 .sum .row{padding:2px 0}
.ubp .ub--t1 .sum.once{padding-top:6px}
.ubp .ub--t2 .sum{font-size:11.5px}
.ubp .ub--t2 .sum .row small{font-size:9.5px}
.ubp .ub--t2 .contact{padding:8px 14px;font-size:10.5px}
.ubp .ub--t3 .fine{font-size:8.5px;line-height:1.2}
.ubp .ub--t3 .sum .total .num{font-size:22px}
.ubp .sum .row.minus b{color:var(--ok)}

/* strona: karty A6 (.karta = 105 × 148 mm), na ekranie skalowane do okna, do druku 1:1 */
:root{--c-bg:#14181C;--c-ink:#E8ECF0;--c-muted:#B9C0CA;--c-line:#2E353C;--c-acc:#5CC8FF;color-scheme:dark}
:root[data-theme="light"]{--c-bg:#E9EDF2;--c-ink:#24282D;--c-muted:#5F6063;--c-line:#C5CBD3;--c-acc:#00659B;color-scheme:light}
@page{size:A6;margin:0}
html,body{margin:0;background:var(--c-bg);color:var(--c-ink);font:400 1rem/1.5 "Figtree",system-ui,sans-serif}
.ul-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:16px 16px 4px}
.ul-bar button,.ul-bar a{font:inherit;font-weight:700;padding:10px 18px;border-radius:10px;border:1.5px solid var(--c-line);background:transparent;color:var(--c-ink);cursor:pointer;text-decoration:none}
.ul-bar .is-main{background:#0077B3;border-color:#0077B3;color:#fff}
.ul-bar .is-main:hover{background:#00659B}
.ul-info{text-align:center;color:var(--c-muted);font-size:.9rem;margin:6px 16px 0}
.ul-strony{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding:20px 16px 40px}
.karta{--s:.75;position:relative;overflow:hidden;flex:none;width:calc(525px * var(--s));height:calc(740px * var(--s));outline:1px solid var(--c-line);background:#777;page-break-after:always;break-after:page}
.ul-noscript{max-width:40rem;margin:2rem auto;padding:0 1rem;text-align:center}
@media print{
  html,body{background:none}
  .ul-bar,.ul-info,.ul-noscript{display:none !important}
  .ul-strony{display:block;padding:0;gap:0}
  .karta{--s:.7559055118 !important;width:105mm;height:148mm;outline:0;display:block;page-break-after:always;break-after:page;overflow:hidden;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .karta:last-child{page-break-after:auto;break-after:auto}
  /* gradient w tekście (background-clip:text) eksportuje się do PDF z cienkimi liniami wokół pól (widoczne w niektórych czytnikach): w druku kolor jednolity */
  .mock .grad{background:none !important;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent-text)}
  .mock .num,.mock .num .gr,.mock .num .cm{background:none !important;-webkit-background-clip:border-box;background-clip:border-box;color:var(--dial-c2)}
  .mock.ul-f .num,.mock.ul-f .num .gr{color:var(--price-2)}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}