/* ============================================================
   platforma-wl — wspólny arkusz stylów podstron prawnych.
   JASNY MOTYW „ciepły papier" — spójny ze stroną główną
   (niedzwiecki.ai/index.html). Wąska kolumna dokumentu,
   typografia: Geist (H1/H2 + treść — klimat SaaS/Vercel),
   IBM Plex Mono (numeracja §, daty, spis treści).
   Limonka = TYLKO tło/marker/kropka. Zieleń (ciemna) = akcent tekstu.
   Footer = grafitowa kontra.
   ============================================================ */
:root{
    /* powierzchnie — ciepły papier */
    --bg:#EBE6DA;            /* kanwa strony */
    --bg-elev:#F2EEE5;       /* podniesiona powierzchnia */
    --surface:#FBFAF5;       /* biała karta */
    --surface-2:#F4EFE6;
    --glass:#FBFAF5;         /* karty: toc, note, entity, feature */
    --glass-strong:#F1EDE3;  /* mocniejsza powierzchnia / nagłówki tabel */
    --paper:#F1EDE3;

    --border:rgba(23,23,18,.12);
    --border-strong:rgba(23,23,18,.22);

    /* tekst — atrament na papierze */
    --text:#33302A;          /* treść (długi tekst prawniczy) */
    --text-strong:#171712;   /* atrament — nagłówki, bold */
    --text-muted:#5C594E;    /* etykiety/hinty (AA na papierze) */
    --text-faint:#77746A;    /* najsłabsze etykiety mono */

    /* akcenty */
    --signal:#C6F24E;        /* limonka — TYLKO tło/marker/kropka */
    --accent:#4D6B12;        /* ciemna zieleń — TEKST/link/akcent (AA) */
    --accent-2:#3E580E;      /* zieleń hover (ciemniejsza) */
    --accent-soft:rgba(198,242,78,.34);  /* limonkowe tło ikon/markerów */
    --accent-dim:rgba(77,107,18,.07);    /* subtelny zielony tint tła */
    --accent-ink:#171712;

    --serif:'Geist', ui-sans-serif, system-ui, sans-serif; /* nagłówki = Geist (SaaS), nazwa zachowana */
    --sans:'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ease:cubic-bezier(.16,1,.3,1);
    --doc-max:760px; --page-pad:clamp(18px,5vw,40px);
    --header-h:64px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
    font-family:var(--sans); background:var(--bg); color:var(--text);
    line-height:1.68; font-size:16.5px; letter-spacing:.001em;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    overflow-x:hidden; min-height:100vh;
    display:flex; flex-direction:column;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--accent-2);text-decoration:underline}
::selection{background:var(--signal);color:#171712}
:focus-visible{outline:2px solid rgba(77,107,18,.6);outline-offset:3px;border-radius:6px}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* atmosfera papieru — ciepła poświata + ziarno (jak na stronie głównej) */
body::before{
    content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
        radial-gradient(70vw 50vw at 0% -12%, rgba(198,242,78,.13), transparent 55%),
        radial-gradient(56vw 46vw at 102% 2%, rgba(77,107,18,.05), transparent 55%),
        radial-gradient(80vw 60vw at 50% 122%, rgba(77,107,18,.03), transparent 60%);
}
body::after{ /* ziarno papieru */
    content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================ HEADER */
.site-header{
    position:sticky;top:0;z-index:50;height:var(--header-h);
    background:rgba(240,236,227,.74);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
    border-bottom:1px solid var(--border);
}
.site-header__in{
    max-width:var(--doc-max);margin:0 auto;height:100%;padding:0 var(--page-pad);
    display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.015em;color:var(--text-strong)}
.brand:hover{color:var(--text-strong);text-decoration:none;opacity:.82}
.brand__dot{
    width:9px;height:9px;border-radius:3px;background:var(--signal);flex-shrink:0;
    box-shadow:0 0 0 1px rgba(77,107,18,.4), 0 4px 10px -4px rgba(77,107,18,.5);
}
.back-link{
    display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
    color:var(--text-muted);padding:7px 14px;border:1px solid var(--border-strong);border-radius:999px;
    transition:.25s var(--ease);background:transparent;
}
.back-link:hover{color:var(--accent);border-color:var(--accent);text-decoration:none;background:var(--accent-dim)}
.back-link svg{width:14px;height:14px;stroke:currentColor;fill:none}

/* ============================================================ DOC LAYOUT */
.doc{
    flex:1 0 auto;width:100%;max-width:var(--doc-max);margin:0 auto;
    padding:clamp(40px,7vw,72px) var(--page-pad) 96px;
}
.doc__eyebrow{
    display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;line-height:1.5;
}
.doc__eyebrow::before{content:'';width:26px;height:1px;background:currentColor;opacity:.6}
.doc h1{
    font-family:var(--serif);
    font-size:clamp(32px,6vw,50px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
    color:var(--text-strong);margin-bottom:18px;text-wrap:balance;
}
.doc h1 em{
    font-style:normal;font-weight:700;color:var(--accent);
    background-image:linear-gradient(rgba(198,242,78,.5), rgba(198,242,78,.5));
    background-repeat:no-repeat;background-position:0 92%;background-size:100% .24em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .02em;
}
.doc__meta{
    display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;
    color:var(--text-faint);padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--border);
}
.doc__meta b{color:var(--text-muted);font-weight:600}
.doc__intro{font-size:17px;color:var(--text-muted);line-height:1.72;margin-bottom:38px;max-width:64ch}
.doc__intro b{color:var(--text-strong);font-weight:600}

/* nagłówki sekcji */
.doc h2{
    font-family:var(--serif);
    font-size:clamp(21px,3.2vw,29px);font-weight:600;letter-spacing:-.022em;line-height:1.22;
    color:var(--text-strong);margin:54px 0 16px;scroll-margin-top:calc(var(--header-h) + 20px);
    padding-top:22px;border-top:1px solid var(--border);
    display:flex;align-items:baseline;gap:.55em;flex-wrap:wrap;
}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc h2 .s{
    font-family:var(--mono);font-size:.56em;font-weight:600;color:var(--accent);
    font-variant-numeric:tabular-nums;letter-spacing:0;flex:none;
    padding:.35em .5em;border-radius:7px;background:var(--accent-dim);line-height:1;
    align-self:center;
}
.doc h3{
    font-size:17px;font-weight:700;letter-spacing:-.012em;color:var(--text-strong);
    margin:30px 0 12px;scroll-margin-top:calc(var(--header-h) + 20px);
}
.doc p{margin:0 0 15px;color:var(--text)}
.doc p.muted{color:var(--text-muted)}

/* listy */
.doc ul,.doc ol{margin:0 0 18px;padding-left:0;list-style:none;counter-reset:pl}
.doc ol{counter-reset:ol}
.doc li{position:relative;padding-left:30px;margin-bottom:10px;color:var(--text);line-height:1.62}
.doc ul>li::before{
    content:'';position:absolute;left:8px;top:.62em;width:6px;height:6px;border-radius:50%;
    background:var(--accent);opacity:.9;
}
.doc ol>li{counter-increment:ol}
.doc ol>li::before{
    content:counter(ol) ".";position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;
    font-weight:600;color:var(--accent);width:24px;
}
/* numeracja literowa dla zagnieżdżonych ust. */
.doc ol.lettered{counter-reset:la}
.doc ol.lettered>li{counter-increment:la}
.doc ol.lettered>li::before{content:counter(la, lower-latin) ")";}
.doc li b{color:var(--text-strong);font-weight:600}
.doc li ul,.doc li ol{margin-top:10px;margin-bottom:4px}

.doc strong,.doc b{color:var(--text-strong);font-weight:600}

/* ============================================================ SPIS TREŚCI */
.toc{
    background:var(--surface);border:1px solid var(--border);border-radius:16px;
    padding:24px clamp(20px,4vw,30px);margin-bottom:44px;
    box-shadow:0 1px 2px rgba(23,23,18,.05), 0 18px 40px -30px rgba(23,23,18,.3);
}
.toc__title{
    font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text-faint);margin-bottom:16px;
}
.toc ol{list-style:none;counter-reset:toc;margin:0;padding:0;
    columns:2;column-gap:34px;
}
.toc ol>li{counter-increment:toc;padding-left:0;margin-bottom:9px;break-inside:avoid}
.toc ol>li::before{display:none}
.toc a{
    display:flex;gap:11px;color:var(--text-muted);font-size:14px;line-height:1.4;font-weight:500;
}
.toc a::before{content:counter(toc, decimal-leading-zero);font-family:var(--mono);font-size:11.5px;color:var(--accent);flex-shrink:0;padding-top:2px;font-weight:600}
.toc a:hover{color:var(--text-strong);text-decoration:none}
@media (max-width:620px){.toc ol{columns:1}}

/* ============================================================ CALLOUT / BOX */
.callout{
    position:relative;background:var(--accent-dim);border:1px solid rgba(77,107,18,.22);
    border-radius:14px;padding:18px 22px 18px 26px;margin:22px 0;color:var(--text);
}
.callout::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--accent)}
.callout p{margin:0;color:var(--text)}
.callout p+p{margin-top:10px}
.callout strong{color:var(--text-strong)}
.callout--warn{background:rgba(214,74,52,.06);border-color:rgba(214,74,52,.24)}
.callout--warn::before{background:#c2451f}

.note{
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:16px 20px;margin:18px 0;font-size:14.5px;color:var(--text-muted);
    box-shadow:0 1px 2px rgba(23,23,18,.04);
}
.note b{color:var(--text-strong)}

/* dane firmy — blok */
.entity{
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:20px 24px;margin:20px 0;font-size:15px;line-height:1.85;
    box-shadow:0 1px 2px rgba(23,23,18,.04);
}
.entity b{color:var(--text-strong)}
.entity .row{display:flex;gap:10px;flex-wrap:wrap}
.entity .row+.row{border-top:1px solid var(--border);padding-top:6px;margin-top:2px}
.entity .row .k{color:var(--text-faint);min-width:118px;flex-shrink:0;font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;padding-top:3px}
.entity .row .v{color:var(--text)}

/* ============================================================ TABELA */
.table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 1px 2px rgba(23,23,18,.04)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
thead th{
    background:var(--surface-2);color:var(--text-strong);font-weight:700;text-align:left;
    padding:13px 16px;border-bottom:1px solid var(--border-strong);font-size:13px;letter-spacing:-.005em;
}
tbody td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--text-muted);vertical-align:top;line-height:1.55}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{color:var(--text-strong);font-weight:600}

/* ============================================================ PAYMENTS PAGE bits */
.pay-hero-strip{
    display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:26px 0 8px;
}
.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:22px 0}
.method-card{
    display:flex;align-items:center;gap:15px;padding:18px 20px;border:1px solid var(--border);
    border-radius:14px;background:var(--surface);transition:.3s var(--ease);
    box-shadow:0 1px 2px rgba(23,23,18,.04);
}
.method-card:hover{border-color:rgba(77,107,18,.4);transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(23,23,18,.3)}
.method-card img{width:78px;height:48px;flex-shrink:0;border-radius:9px;background:#ffffff;border:1px solid rgba(23,23,18,.08);padding:8px 10px;object-fit:contain}
.method-card b{display:block;font-size:15px;color:var(--text-strong);font-weight:700;letter-spacing:-.01em}
.method-card span{font-size:13px;color:var(--text-muted);line-height:1.4}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:24px 0}
.feature{padding:22px 22px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 1px 2px rgba(23,23,18,.04);transition:.3s var(--ease)}
.feature:hover{border-color:rgba(77,107,18,.28);transform:translateY(-2px);box-shadow:0 12px 30px -20px rgba(23,23,18,.3)}
.feature__ic{
    width:42px;height:42px;border-radius:11px;background:var(--accent-soft);border:1px solid rgba(77,107,18,.22);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.feature__ic svg{width:20px;height:20px;stroke:var(--accent);fill:none}
.feature b{display:block;font-size:16px;color:var(--text-strong);font-weight:700;letter-spacing:-.015em;margin-bottom:7px}
.feature p{font-size:14px;color:var(--text-muted);line-height:1.6;margin:0}

/* ============================================================ PAYMENT BADGES STRIP */
.pay-strip{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.pay-strip--boxed{
    padding:22px 24px;border:1px solid var(--border);border-radius:16px;background:var(--surface);
    margin:26px 0 8px;box-shadow:0 1px 2px rgba(23,23,18,.05), 0 18px 40px -30px rgba(23,23,18,.28);
}
/* Visa / Mastercard / Autopay — jasny kafel z delikatnym borderem */
.pay-badge{
    height:44px;width:auto;border-radius:10px;display:block;
    background:#ffffff;padding:8px 14px;object-fit:contain;
    border:1px solid rgba(23,23,18,.1);
    box-shadow:0 2px 8px -4px rgba(23,23,18,.18);
}
/* BLIK — logo jest samodzielne (ciemny kafel wbudowany w SVG) */
.pay-badge--blik{background:transparent;border:0;padding:0;box-shadow:none;height:48px;border-radius:0}
.pay-strip__label{
    width:100%;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--text-faint);margin-bottom:6px;
}

/* ============================================================ FOOTER (grafitowa kontra) */
.site-footer{
    flex-shrink:0;margin-top:80px;background:#0C0D10;color:#ECEEF1;
    border-top:1px solid rgba(255,255,255,.08);
    /* re-override tokenów na ciemne — dzieci footera dziedziczą kontrę */
    --text:#ECEEF1; --text-strong:#ffffff; --text-muted:#B7BCC4; --text-faint:#7E858F;
    --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.14);
    --accent:#A6D62E; --accent-2:#C6F24E;
}
.site-footer__in{
    max-width:var(--doc-max);margin:0 auto;padding:52px var(--page-pad) 40px;
    display:grid;gap:34px;
}
.site-footer .brand{color:#fff}
.site-footer .brand:hover{color:#fff}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr;gap:34px}
.footer-brand .brand{margin-bottom:14px}
.footer-company{font-size:13.5px;line-height:1.85;color:var(--text-muted)}
.footer-company b{color:#fff;font-weight:600}
.footer-company a{color:var(--text-muted)}
.footer-company a:hover{color:var(--accent)}
.footer-links__title,.footer-pay__title{
    font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text-faint);margin-bottom:14px;
}
.footer-links ul{list-style:none;margin:0;padding:0}
.footer-links li{padding:0;margin-bottom:10px}
.footer-links li::before{display:none}
.footer-links a{color:var(--text-muted);font-size:14px;font-weight:500}
.footer-links a:hover{color:var(--accent);text-decoration:none}
.footer-pay{padding-top:28px;border-top:1px solid var(--border)}
.footer-pay .pay-strip{gap:10px}
/* kafle płatności w stopce */
.footer-pay .pay-badge{
    height:38px;background:#FBFAF5;border:1px solid rgba(23,23,18,.06);
    padding:7px 12px;border-radius:9px;box-shadow:0 2px 10px -4px rgba(0,0,0,.5);
}
.footer-pay .pay-badge--blik{height:40px;background:transparent;border:0;padding:0;box-shadow:none;border-radius:0}
.footer-autopay-note{margin-top:14px;font-size:12.5px;color:var(--text-faint);line-height:1.6;max-width:60ch}
.footer-bottom{
    padding-top:24px;border-top:1px solid var(--border);
    display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;
    font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--text-faint);
}
.footer-bottom a{color:var(--text-faint)}
.footer-bottom a:hover{color:var(--accent)}
@media (max-width:640px){
    .footer-top{grid-template-columns:1fr;gap:30px}
}

/* ============================================================ FORMULARZ ODSTĄPIENIA (załącznik) */
.form-box{
    background:var(--surface);border:1px dashed var(--border-strong);border-radius:16px;
    padding:26px clamp(20px,4vw,30px);margin:22px 0;font-size:14.5px;line-height:1.9;color:var(--text-muted);
    box-shadow:0 1px 2px rgba(23,23,18,.04);
}
.form-box p{margin:0 0 12px;color:var(--text-muted)}
.form-box p b{color:var(--text-strong)}
.form-box .fill{color:var(--text-faint);font-style:italic}
.form-box hr{border:0;border-top:1px solid var(--border);margin:18px 0}

/* linki „powrót do spisu" */
.back-to-toc{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--text-faint);margin-top:6px}
.back-to-toc:hover{color:var(--accent);text-decoration:none}

/* utilities */
.lead-accent{color:var(--accent)}
hr.rule{border:0;border-top:1px solid var(--border);margin:44px 0}

@media (max-width:400px){
    body{font-size:16px}
    .doc{padding-left:16px;padding-right:16px}
    .site-header__in{padding:0 16px}
    .brand{font-size:16px}
    .back-link{padding:6px 11px;font-size:12.5px}
}