/* Przewodnik DogInvoice i DogAnswer: styl tuKamil (papier, tusz, rdza, pikselowe kroje), jedna kolumna na telefonie,
   scena obok tekstu od 820 px. Bez gradientów, rozmyć i pasków z lewej; przyciski kwadratowe z twardym cieniem. */
:root { --papier: #f6f0e4; --kafel: #efe4cf; --tusz: #2b2420; --szary: #6f655b; --rdza: #c4483a; --zielen: #2f7d5a; --linia: #d9cbb2;
  --post: #dfe5f3; --post-linia: #aebbd8; --temat: #23306e; --gt: #4a6810; --biel: #fffdf8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papier); color: var(--tusz); font: 16px/1.6 Inter, system-ui, sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%232b2420' fill-opacity='.045'/%3E%3C/svg%3E"); }
a { color: var(--temat); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--rdza); }
h1, h2, h3, .logo { font-family: "Jersey 10", ui-monospace, monospace; font-weight: 400; font-variant-ligatures: none; }
.tablica, .przyklad-nr, .menu, button, h4, .ms-od, .mm-pasek, .cena-plan, .przycisk, .wstep-pdf, .produkt-dalej, .cta-drugi { font-family: VT323, ui-monospace, monospace; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
[hidden] { display: none !important; }

/* nagłówek */
.glowka { border-bottom: 2px dashed var(--post-linia); background: var(--papier); }
.glowka-w { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding-top: 4px; padding-bottom: 4px; }
.logo { font-size: 32px; line-height: 1; text-decoration: none; color: var(--tusz); min-height: 44px; display: inline-flex; align-items: center; }
.logo span { color: var(--rdza); }
.menu { display: flex; flex-wrap: wrap; font-size: 21px; }
.menu a { text-decoration: none; padding: 0 8px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.menu a:hover { text-decoration: underline; }

/* wstęp i przełącznik */
.wstep { padding: 22px 0 8px; }
.tablica { margin: 0; font-size: 21px; color: var(--temat); }
h1 { font-size: clamp(42px, 9vw, 72px); line-height: .95; margin: 6px 0 12px; }
.lead { font-size: 19px; line-height: 1.45; max-width: 36em; margin: 0 0 18px; }
.przelacznik { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.przelacznik button { font-size: 24px; min-height: 48px; padding: 0 18px; border: 2px solid var(--tusz); background: var(--biel); color: var(--tusz); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.przelacznik button[aria-selected="true"] { background: var(--tusz); color: var(--papier); }
.przelacznik button:hover, .przelacznik button:focus-visible { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rdza); outline: none; }
.wstep-pdf { margin: 6px 0 0; font-size: 21px; }
.wstep-pdf a, .produkt-dalej a, .cta-drugi a { display: inline-flex; align-items: center; min-height: 44px; }

/* sekcja produktu */
.produkt { padding: 26px 0 10px; scroll-margin-top: 8px; }
.produkt:focus { outline: none; }
h2 { font-size: 46px; line-height: 1; margin: 0 0 8px; }
.produkt-zdanie { margin: 0 0 8px; max-width: 40em; font-size: 17px; }
.produkt-maile { margin: 0 0 18px; max-width: 40em; color: var(--szary); }
.produkt-dalej { font-size: 22px; margin: 0 0 10px; }

/* karta przykładu */
.przyklad { display: grid; gap: 14px 24px; background: var(--kafel); padding: 14px; margin: 0 0 18px; scroll-margin-top: 8px;
  box-shadow: 0 -3px 0 0 var(--tusz), 0 3px 0 0 var(--tusz), -3px 0 0 0 var(--tusz), 3px 0 0 0 var(--tusz); margin-left: 3px; margin-right: 3px; }
@media (min-width: 820px) { .przyklad { grid-template-columns: 384px 1fr; align-items: start; padding: 18px; } }
.przyklad-scena { background: var(--biel); border: 2px solid var(--tusz); padding: 0; min-width: 0; }
.przyklad-scena canvas { width: 100%; aspect-ratio: 192 / 120; background: var(--biel); touch-action: pan-y; }
.przyklad-tresc { min-width: 0; }
.scena-ruch { display: block; justify-self: start; margin: 0; min-height: 44px; padding: 0 16px; border: 2px solid var(--tusz); background: var(--biel); color: var(--tusz); font: 20px VT323, ui-monospace, monospace; cursor: pointer; }
.przyklad-nr { margin: 0; font-size: 19px; color: var(--szary); }
h3 { font-size: 34px; line-height: 1; margin: 2px 0 8px; color: var(--rdza); }
h4 { font-size: 19px; font-weight: 400; line-height: 1.1; margin: 10px 0 0; color: var(--temat); }
.przyklad-tresc p { margin: 0; }

/* makiety powiadomień w HTML: skrzynka maila, SMS, WhatsApp */
.mm { margin: 8px 0 2px; background: var(--biel); border: 2px solid var(--tusz); max-width: 460px; box-shadow: 3px 3px 0 var(--tusz); }
.mm-pasek { display: flex; justify-content: space-between; gap: 8px; background: var(--linia); padding: 2px 8px; font-size: 18px; line-height: 1.2; }
.mm-od::before { content: ""; display: inline-block; width: 22px; height: 14px; margin-right: 6px; vertical-align: -2px; image-rendering: pixelated; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' shape-rendering='crispEdges'%3E%3Cpath fill='%232b2420' d='M0 0h11v7H0z'/%3E%3Cpath fill='%23fffdf8' d='M1 1h9v5H1z'/%3E%3Cpath fill='%232b2420' d='M1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 4h1v1H6zM7 3h1v1H7zM8 2h1v1H8zM9 1h1v1H9z'/%3E%3C/svg%3E") center / 22px 14px no-repeat; }
.mm-czas { color: var(--szary); }
.mm-do { padding: 4px 10px 0; font-size: 14px; color: var(--szary); }
.mm-temat { padding: 4px 10px 0; font-weight: 700; }
.mm-tresc { padding: 0 10px 8px; font-size: 15px; color: var(--szary); }
.ms { margin: 8px 0 2px; max-width: 360px; }
.ms-od { margin: 0; font-size: 18px; color: var(--szary); }
.ms-dymek { margin: 2px 0 0; padding: 8px 12px; background: var(--post); border: 2px solid var(--post-linia); font-size: 15px; }
.ms-whatsapp .ms-dymek { background: #dcefe3; border-color: #9cc9ac; }

/* ceny i przycisk */
.ceny-sekcja { padding: 26px 0 30px; border-top: 2px dashed var(--post-linia); margin-top: 10px; }
.ceny-sekcja h3 { color: var(--tusz); margin-top: 14px; }
.ceny { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 720px) { .ceny { grid-template-columns: 1fr 1fr; } }
.ceny li { display: grid; gap: 2px; background: var(--post); border: 2px solid var(--post-linia); padding: 10px 12px; }
.cena-plan { font-size: 21px; line-height: 1.1; color: var(--temat); }
.cena-kwota { font-weight: 700; }
.cena-co { font-size: 14px; color: var(--szary); }
.cta { margin: 20px 0 6px; }
.przycisk { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; font-size: 26px; text-decoration: none;
  background: var(--rdza); color: #fff; border: 2px solid var(--tusz); box-shadow: 4px 4px 0 var(--tusz); transition: transform .12s, box-shadow .12s; }
.przycisk:hover, .przycisk:focus-visible { color: #fff; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tusz); outline: none; }
.cta-drugi { margin: 4px 0 10px; font-size: 21px; }
.mala { font-size: 13px; color: var(--szary); max-width: 40em; }
@media (prefers-reduced-motion: reduce) { .przycisk, .przelacznik button { transition: none; } .przycisk:hover, .przelacznik button:hover { transform: none; } }

footer { padding: 0 0 32px; color: var(--szary); font-size: 13px; }
footer .wrap p { margin: 4px 0 0; }
/* stopka „Sieć tuKamil”: wspólny standard (/siec/siec.css), paleta strony przez zmienne */
.siec-tk { --siec-tusz: var(--temat); --siec-szary: var(--szary); --siec-akcent: var(--rdza); --siec-linia: var(--post-linia); --siec-szer: 980px; }

/* dymki jak na tukamil.com (dymki.js): pikselowa chmurka z ogonkiem przy słowie z kropkowanym podkreśleniem */
.term { position: relative; border-bottom: 2px dotted var(--rdza); outline: none; cursor: help; }
.term:focus-visible { background: var(--kafel); }
.tip { position: absolute; left: 0; top: calc(100% + 10px); z-index: 20; width: max-content; max-width: min(300px, calc(100vw - 40px)); padding: 8px 12px; background: var(--papier); color: var(--tusz);
  font: 400 19px/1.15 VT323, ui-monospace, monospace; text-align: left; white-space: normal;
  box-shadow: 0 -3px 0 0 var(--tusz), 0 3px 0 0 var(--tusz), -3px 0 0 0 var(--tusz), 3px 0 0 0 var(--tusz), 6px 6px 0 0 var(--rdza); }
.tip::before { content: ''; position: absolute; left: var(--ogon, 14px); top: -9px; width: 6px; height: 6px; background: var(--papier); box-shadow: -3px 0 0 0 var(--tusz), 3px 0 0 0 var(--tusz), 0 -3px 0 0 var(--tusz); }
.tip[hidden] { display: none; }
@media (pointer: coarse) { .term::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; } }