/* ==========================================================================
   ETAT PLUS: wspólny system designu (ep.css)
   Jeden plik dla v1, v2, v3. Specyfikacja: site/DESIGN.md. Logika: ep.js.
   Wzorcowe użycie wszystkich klocków: site/v2/index.html.

   ZASADY DLA AUTORÓW
   - Nie zmieniaj tokenów ani istniejących reguł. Nowe rzeczy dopisuj na końcu
     pliku albo w <style> wariantu (maks. 60 linii).
   - Ikony: inline SVG przez sprite (skopiuj blok <svg class="ep-sprite"> z v2).
     Każda ikona: <svg class="ep-ico" aria-hidden="true"><use href="#i-check"/></svg>
   - Zdjęcia zawsze w <figure class="ep-photo">, img z width, height, alt, srcset, sizes.
   - Haki JS (id i atrybuty data-*) opisane są na górze ep.js.
   - Czcionki są lokalne (assets/fonts/, sekcja 0). Nie dodawaj linków do Google Fonts.

   INDEKS KOMPONENTÓW (z przykładem markup)

   Układ
     ep-container        <div class="ep-container"> ... </div>          (max 1200 px)
     ep-container--narrow                                                (max 760 px, tekst czytany)
     ep-section          <section class="ep-section ep-section--paper2"> (także --ink, --tight)
     ep-section-head     <div class="ep-section-head"><span class="ep-eyebrow">..</span><h2 class="ep-h2">..</h2><p class="ep-lead">..</p></div>
     ep-grid             <div class="ep-grid ep-grid--3"> karty </div>   (--2, --3, --4; równe wysokości)
     ep-card             <div class="ep-card"><svg class="ep-ico">..</svg><h3 class="ep-h3">..</h3><p>..</p></div>
     ep-split            <div class="ep-split ep-split--reverse"><div class="ep-split-media">figure</div><div class="ep-split-body">tekst</div></div>
                         (kolejność w HTML = kolejność na telefonie; --reverse przenosi media na prawo na desktopie,
                          --top wyrównuje do góry, --sticky przykleja kolumnę media)
     ep-overlap          <div class="ep-split-media ep-overlap"><figure class="ep-photo">..</figure><div class="ep-stmt">..</div></div> (karta nachodzi na zdjęcie)

   Typografia
     ep-eyebrow, ep-h1 (+ ep-h1--long, ep-h1-kicker), ep-h2, ep-h3, ep-lead, ep-muted, ep-small
     ep-hl               <span class="ep-hl">fraza</span> w nagłówku (jedno wyróżnienie; --stroke = podkreślenie)
     ep-prose            <div class="ep-prose"><p>..</p><p>..</p></div>  (akapity z odstępami, max 680 px)
     ep-punch            <p class="ep-punch">Zdanie puenta.</p>
     ep-num              <b class="ep-num">22 520 zł</b>                 (liczba Fraunces, tabular)

   Nawigacja i akcje
     ep-header           <header class="ep-header"><div class="ep-container ep-header-inner"><a class="ep-logo">..</a><div class="ep-header-actions"><a class="ep-header-tel">..</a><a class="ep-btn ep-btn--ink ep-btn--sm">..</a></div></div></header>
     ep-logo             <a class="ep-logo" href="#top"><svg class="ep-logo-mark">..</svg><span class="ep-logo-text">Etat <b>Plus</b></span></a>
     ep-btn              <a class="ep-btn ep-btn--primary ep-btn--lg" href="#formularz">Tekst <svg class="ep-ico"><use href="#i-arrow"/></svg></a>
                         (--primary, --ink, --ghost, --lg, --sm, --block)
     ep-cta-row          <div class="ep-cta-row"><a class="ep-btn ep-btn--primary ep-btn--lg">..</a><p class="ep-small ep-muted">..</p></div>
     ep-outro            <div class="ep-outro"><div class="ep-prose">puenta</div><div class="ep-cta-row">przycisk</div></div>
     ep-block            odstęp nad blokiem w sekcji: ep-block (duży), ep-block-sm, ep-block-xs
     ep-hide-phone       element ukryty poniżej 560 px (np. zdanie pod tytułem karty formularza)
     ep-sticky           <div class="ep-sticky" id="sticky"><a class="ep-btn ep-btn--primary ep-btn--block" href="#formularz">..</a></div>

   Hero
     ep-hero--form       <section class="ep-hero ep-hero--form"><div class="ep-container ep-hero-grid"><div class="ep-hero-copy">..</div><div class="ep-hero-form">karta ep-form</div><div class="ep-hero-media">figure ep-photo--band</div></div></section>
                         (ep-hero-media = szerokie zdjęcie pod spodem; + ep-hero--overlap: formularz nachodzi na prawą część zdjęcia;
                          + ep-hero--media-col: zdjęcie albo kolaż w lewej kolumnie pod treścią; ep-hero-points = rząd pod zdjęciem)
     ep-hero--split      <section class="ep-hero ep-hero--split"><div class="ep-container ep-hero-grid"><div class="ep-hero-copy">..</div><div class="ep-hero-media">figure</div></div></section>
     ep-hero--cover      <section class="ep-hero ep-hero--cover"><div class="ep-hero-bg"><img ..></div><div class="ep-container ep-hero-grid"><div class="ep-hero-copy">..</div></div></section>
     ep-collage          <div class="ep-collage"><figure class="ep-photo ep-photo--portrait">..</figure> x3</div> (kolaż 3 portretów)

   Zdjęcia
     ep-photo            <figure class="ep-photo ep-photo--wide"><img src=".." srcset=".." sizes=".." width="1536" height="1024" alt=".." loading="lazy" decoding="async"></figure>
                         (--wide 3:2, --classic 4:3, --portrait 4:5, --square 1:1, --band 2:1 na desktopie,
                          --xl promień 32, --shadow cień 3,
                          kadrowanie: --focus-left, --focus-right, --focus-top)
     ep-photo-cap        <figcaption class="ep-photo-cap">Podpis roli</figcaption>
     ep-chip             <span class="ep-chip ep-chip--tr"><svg class="ep-ico">..</svg>Kandydat w 7 dni</span> (w figure; --tl --tr --bl --br)
     ep-note-foto        <p class="ep-note-foto">Zdjęcia poglądowe. Kandydatów poznasz na etapie wyboru.</p>
                         (tylko w sekcji kart ról i w stopce)

   Treść
     ep-trust            <section class="ep-trust"><div class="ep-container"><p class="ep-trust-label">..</p><ul class="ep-trust-list"><li><b>9 lat</b><span>na rynku</span></li>..</ul></div></section>
     ep-roles            <div class="ep-roles ep-roles--rail"> karty ep-rolecard </div> (--rail: na telefonie przewijany rząd;
                         nad nim <p class="ep-rail-hint">Przesuń, żeby zobaczyć wszystkie role</p>, widoczne tylko na telefonie)
     ep-rolecard         <article class="ep-rolecard"><figure class="ep-photo ep-photo--portrait">..</figure><div class="ep-rolecard-body"><h3 class="ep-rolecard-title">..</h3><dl class="ep-rolecard-list"><div><dt>Co przejmuje</dt><dd>..</dd></div><div><dt>Co zyskujesz</dt><dd>..</dd></div></dl><p class="ep-rolecard-for"><b>Najczęściej dla:</b> ..</p><a class="ep-btn ep-btn--ghost ep-btn--block" href="#formularz" data-rola="excel_analiza">Chcę takiego pracownika</a></div></article>
     ep-compare          <div class="ep-compare"><div class="ep-compare-card"><p class="ep-compare-tag">Dziś</p><p class="ep-compare-amount">22 520 zł <small>co miesiąc</small></p><ul class="ep-compare-flow"><li>..</li></ul><p class="ep-compare-result"><b>0 pracowników</b><span>..</span></p></div><div class="ep-compare-card ep-compare-card--plus">..</div></div>
     ep-steps            <ol class="ep-steps"><li><h3 class="ep-h3">..</h3><p>..</p></li> x4</ol> (--stack: jeden pod drugim)
     ep-checklist        (--row: 3 kolumny na desktopie, --lg: z liniami)
                         <ul class="ep-checklist"><li><svg class="ep-ico"><use href="#i-check"/></svg><span>..</span></li><li class="is-no"><svg class="ep-ico"><use href="#i-x"/></svg><span>..</span></li></ul>
     ep-faq              <div class="ep-faq"><details><summary>Pytanie</summary><div class="ep-faq-body"><p>..</p></div></details>..</div>
     ep-table            <div class="ep-table-wrap"><table class="ep-table"><thead>..</thead><tbody><tr class="is-highlight"><td>..</td><td class="is-num">..</td></tr></tbody></table></div>
     ep-stmt             wyciąg bankowy w CSS: ep-stmt > ep-stmt-head, ep-stmt-row (date, desc, amt), ep-stmt-foot
     ep-note             <div class="ep-note"><p>..</p></div>              (wyróżnienie na bursztynowym tle)
     ep-total            <div class="ep-total"><div class="ep-total-text"><p class="ep-total-label">..</p><p>..</p></div><p class="ep-total-value">0 zł</p><div class="ep-total-action">przycisk</div></div>
     ep-examples         <div class="ep-examples"><div class="ep-example"><p class="ep-example-in">Wpłata<b>15 000 zł/mies.</b></p><p class="ep-example-out"><b>do <span data-osoby-dla="15000">2</span></b><span data-osoby-etykieta="15000">darmowych pracowników</span></p></div>..</div>
     ep-partner          <div class="ep-partner"><div class="ep-partner-main"><span class="ep-partner-logo"><img ..></span>..<p class="ep-partner-addr">..</p></div><ul class="ep-partner-stats"><li><b>9 lat</b><span>..</span></li>..</ul></div>
     ep-more             <details class="ep-more"><summary>Pokaż pełny rachunek</summary> treść </details> (rozwijany blok)
     ep-sources          <p class="ep-sources"><svg class="ep-ico"><use href="#i-doc"/></svg><span>Podstawa prawna: .. <a href=".." target="_blank" rel="noopener">..</a></span></p>
     ep-urgency          <p class="ep-urgency"><svg class="ep-ico"><use href="#i-calendar"/></svg><span>..</span></p> (zdanie pilności w ep-cta-band)
     ep-logos            <section class="ep-logos"><div class="ep-container"><p class="ep-logos-label">..</p><ul class="ep-logos-list"><li><img ..></li> x4-6</ul></div></section>
                         (pasek logotypów w skali szarości, równe wysokości; w HTML zakomentowany do czasu zgody klientów)
     ep-quotes           <div class="ep-quotes"><figure class="ep-quote"><p class="ep-quote-num"><b>liczba</b><span>opis</span></p><blockquote class="ep-quote-text">cytat</blockquote><figcaption class="ep-quote-who"><b>Imię Nazwisko</b><span>stanowisko, firma</span></figcaption></figure> x1-3</div>
                         (ep-quote--form: jedna krótka opinia w karcie formularza; w HTML zakomentowane do czasu zgody klientów)
     ep-cta-band         <section class="ep-cta-band"><div class="ep-container ep-cta-band-grid"><div>h2, lead, <div class="ep-cta-actions">przyciski</div></div><aside class="ep-ps">..</aside></div></section>
     ep-footer           <footer class="ep-footer"><div class="ep-container"><div class="ep-footer-grid">4 kolumny</div><div class="ep-footer-bottom">..</div></div></footer>

   Formularz (pełny markup: v2/index.html, sekcja hero)
     ep-form             karta: <div class="ep-form" id="formularz"><form id="lead-form" novalidate> .. </form><div class="ep-thanks" id="thanks" hidden>..</div></div>
     ep-form-head        <div class="ep-form-head"><h2 class="ep-form-title">..</h2><p>..</p></div>
     ep-form-proof       <p class="ep-form-proof"><svg class="ep-ico">..</svg><span>..</span></p> (linijka dowodu w ep-form-head, pod tytułem)
     ep-progress         <div class="ep-progress" aria-hidden="true"><span></span> x3</div><p class="ep-progress-label"><span>Krok <b data-step-now>1</b> z <span data-step-total>3</span></span><span data-step-title></span></p>
     ep-step             <div class="ep-step is-active" data-step="liczby" data-title="Liczby"><h3 class="ep-step-title">..</h3> pola <p class="ep-error" data-step-error aria-live="polite"></p></div>
     ep-field            <div class="ep-field"><label for="f-nip">NIP firmy</label><input id="f-nip" ..><p class="ep-hint">..</p><p class="ep-error" aria-live="polite"></p></div>
     ep-group            <div class="ep-group" role="group" aria-labelledby="g-rola"><p class="ep-group-title" id="g-rola">..</p><p class="ep-step-hint">..</p> kafle ep-choices <p class="ep-error" data-step-error></p></div> (grupa kafli wśród pól)
     ep-input            <div class="ep-input ep-input--suffix"><input ..><span class="ep-suffix">zł</span></div>
     ep-field-row        <div class="ep-field-row"> dwa ep-field </div>   (--2-3: węższe pierwsze pole)
     ep-fields           <div class="ep-fields"> pola i rzędy pól z równym odstępem </div>
     ep-choices          <div class="ep-choices ep-choices--2"><label class="ep-choice"><input type="checkbox" name="zadania" value=".."><span class="ep-choice-mark"><svg class="ep-ico"><use href="#i-check"/></svg></span><span class="ep-choice-text">..</span></label></div> (radio: ep-choice--radio)
     ep-check            <label class="ep-check"><input type="checkbox" id="f-rodo"><span>..</span></label>
     ep-result           <div class="ep-result" hidden aria-live="polite"><div data-result-ok><p class="ep-result-top">..</p><p class="ep-result-big"><span class="ep-result-n">do <span data-result-n>0</span></span> <span data-result-label>..</span></p></div><p class="ep-result-zero" data-result-zero hidden>..</p><p class="ep-result-year">..</p></div>
     ep-form-nav         <div class="ep-form-nav"><button type="button" class="ep-btn ep-btn--ghost" id="btn-back" hidden>Wstecz</button><button type="button" class="ep-btn ep-btn--primary" id="btn-next">Dalej</button><button type="submit" class="ep-btn ep-btn--primary" id="btn-submit" hidden>..</button></div>
     ep-form-assure      <p class="ep-form-assure">Bez zobowiązań. Analiza jest bezpłatna.</p> (zdanie tuż pod przyciskami)
     ep-form-trust       <p class="ep-form-trust"><svg class="ep-ico">..</svg><span>..</span></p> (linijka zaufania pod przyciskami;
                         + ep-form-call: druga ścieżka "Wolisz rozmowę? Zadzwoń")
     ep-thanks           <div class="ep-thanks" id="thanks" hidden> ikona, h2, <p id="thanks-summary"></p>, <div class="ep-thanks-next"><p class="ep-thanks-next-title">Co teraz</p><ol><li>..</li> x3</ol></div> </div>

   Zgoda na cookies (markup tworzy ep.js, tylko gdy ustawiono TRACKING)
     ep-consent          <div class="ep-consent"><div class="ep-consent-inner"><p class="ep-consent-text">..</p><div class="ep-consent-actions">2 przyciski</div></div></div>

   Stany dodawane przez JS: is-scrolled (header), is-active (krok), is-checked (kafel),
   is-on (sticky), is-loading (przycisk), ep-reveal + is-in (data-reveal).
   ========================================================================== */

/* ---------- 0. Czcionki lokalne (assets/fonts/) ----------
   Pliki zmienne pobrane z Google Fonts: Fraunces (opsz 9-144, wagi 500-700) i Plus Jakarta Sans (wagi 400-800),
   podzbiory latin i latin-ext, unicode-range jak w oryginalnym CSS Google.
   Wariant C (v3) nadpisuje --ep-font-serif i nie pobiera Fraunces. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-latin-ext-pl.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-latin-pl.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-ext-pl.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-pl.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1. Tokeny ---------- */
:root{
  --ep-ink:#0B1F3A;
  --ep-ink-2:#12305B;
  --ep-text:#1F2A3D;
  --ep-muted:#5A6577;
  --ep-paper:#FAF7F2;
  --ep-paper-2:#F3EEE6;
  --ep-surface:#FFFFFF;
  --ep-line:#E4DDD1;
  --ep-line-2:#D8DFEA;
  --ep-amber:#F0932B;
  --ep-amber-ink:#B86A10;
  --ep-amber-soft:#FDF1E0;
  --ep-green:#1E7A4F;
  --ep-red:#B3261E;
  --ep-radius-s:10px;--ep-radius-m:16px;--ep-radius-l:24px;--ep-radius-xl:32px;
  --ep-shadow-1:0 1px 2px rgba(11,31,58,.06),0 1px 1px rgba(11,31,58,.04);
  --ep-shadow-2:0 12px 32px -12px rgba(11,31,58,.18);
  --ep-shadow-3:0 32px 64px -24px rgba(11,31,58,.28);
  --ep-ease:cubic-bezier(.2,.7,.2,1);

  /* Tokeny pomocnicze (pochodne, nie zmieniaj palety powyżej) */
  --ep-amber-text:#96540A;            /* bursztyn do drobnego tekstu, kontrast 5:1 na papierze */
  --ep-amber-hover:#E58519;
  --ep-on-ink:#FFFFFF;
  --ep-on-ink-2:#C9D4E5;              /* tekst drugorzędny na granacie */
  --ep-line-ink:rgba(255,255,255,.14);
  --ep-green-soft:#E7F3EC;
  --ep-red-soft:#FBECEA;
  --ep-font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --ep-font-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ep-container:1200px;
  --ep-gutter:16px;
  --ep-header-h:64px;
  --ep-section-y:clamp(64px,8vw,112px);
}
@media(min-width:768px){:root{--ep-gutter:24px;--ep-header-h:72px}}

/* ---------- 2. Baza ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--ep-header-h) + 16px)}
body{margin:0;font-family:var(--ep-font-sans);font-size:clamp(16px,15px + .15vw,17px);line-height:1.6;color:var(--ep-text);background:var(--ep-paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
img,svg{max-width:100%}
img{height:auto}
[hidden]{display:none!important}
a{color:var(--ep-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
b,strong{font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ep-ink-2);outline-offset:3px;border-radius:4px}
::selection{background:var(--ep-amber);color:var(--ep-ink)}

.ep-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ep-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ep-nowrap{white-space:nowrap}
.ep-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3. Układ ---------- */
.ep-container{width:100%;max-width:calc(var(--ep-container) + 2 * var(--ep-gutter));margin-inline:auto;padding-inline:var(--ep-gutter)}
.ep-container--narrow{max-width:calc(760px + 2 * var(--ep-gutter))}
.ep-section{padding-block:var(--ep-section-y);scroll-margin-top:var(--ep-header-h)}
.ep-section--tight{padding-block:clamp(48px,6vw,80px)}
.ep-section--paper2{background:var(--ep-paper-2)}
.ep-section--ink{background:var(--ep-ink);color:var(--ep-on-ink-2)}
.ep-section--ink .ep-h2,.ep-section--ink .ep-h3,.ep-section--ink b,.ep-section--ink strong{color:var(--ep-on-ink)}
.ep-section--ink .ep-lead,.ep-section--ink .ep-muted{color:var(--ep-on-ink-2)}
.ep-section--ink .ep-eyebrow{color:var(--ep-amber)}
.ep-section--ink a:not(.ep-btn){color:var(--ep-on-ink)}
.ep-section--ink :focus-visible,.ep-cta-band :focus-visible{outline-color:var(--ep-amber)}
.ep-section-head{max-width:720px;margin-bottom:clamp(32px,4.5vw,56px)}
.ep-section-head .ep-lead{margin-top:16px}
.ep-section-head--center{margin-inline:auto;text-align:center}

.ep-grid{display:grid;gap:16px}
@media(min-width:640px){.ep-grid--2,.ep-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.ep-grid{gap:24px}}
@media(min-width:900px){.ep-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.ep-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ep-card{display:flex;flex-direction:column;gap:12px;height:100%;padding:clamp(20px,2.4vw,32px);background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:var(--ep-radius-l);box-shadow:var(--ep-shadow-1)}
.ep-card>.ep-ico{width:28px;height:28px;color:var(--ep-amber-ink);margin-bottom:4px}
.ep-card p{color:var(--ep-text)}

.ep-split{display:grid;gap:32px;align-items:center}
@media(min-width:900px){
  .ep-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,6vw,88px)}
  .ep-split--reverse .ep-split-media{order:2}
  .ep-split--top{align-items:start}
  .ep-split--sticky .ep-split-media{position:sticky;top:calc(var(--ep-header-h) + 24px)}
}
.ep-split-body>*+*,.ep-split-media>*+*{margin-top:20px}
.ep-split-body>.ep-eyebrow+*,.ep-split-media>.ep-eyebrow+*{margin-top:0}
.ep-split-body>.ep-h2+*,.ep-split-media>.ep-h2+*{margin-top:24px}
.ep-split-media>*+.ep-photo{margin-top:32px}
.ep-split-media>.ep-photo+.ep-note-foto{margin-top:16px}
/* Odstępy między blokami w sekcji */
.ep-block{margin-top:clamp(40px,5vw,72px)}
.ep-block-sm{margin-top:clamp(24px,3vw,40px)}
.ep-block-xs{margin-top:16px}

/* ---------- 4. Typografia ---------- */
.ep-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--ep-amber-text)}
.ep-eyebrow::before{content:"";flex:none;width:24px;height:2px;border-radius:2px;background:var(--ep-amber)}
.ep-h1,.ep-h2,.ep-h3{font-family:var(--ep-font-serif);font-optical-sizing:auto;color:var(--ep-ink);letter-spacing:-.02em;text-wrap:balance}
.ep-h1{font-size:clamp(40px,5.6vw,72px);font-weight:600;line-height:1.05}
.ep-h1--long{font-size:clamp(36px,4.3vw,58px);line-height:1.08}
.ep-h1-kicker{display:block;margin-bottom:.6em;font-size:max(.48em,20px);font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--ep-ink-2)}
.ep-h2{font-size:clamp(30px,3.6vw,48px);font-weight:600;line-height:1.1}
.ep-h3{font-size:clamp(20px,1.8vw,24px);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.ep-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ep-text)}
.ep-lead strong,.ep-lead b{color:var(--ep-ink)}
.ep-muted{color:var(--ep-muted)}
.ep-small{font-size:14px;line-height:1.5}
.ep-hl{color:var(--ep-amber-ink)}
.ep-hl--stroke{color:inherit;background:linear-gradient(var(--ep-amber),var(--ep-amber)) 0 94%/100% .11em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.04em}
.ep-num{font-family:var(--ep-font-serif);font-weight:600;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em;color:var(--ep-ink)}
.ep-prose{max-width:680px}
.ep-prose>*+*{margin-top:1em}
.ep-prose strong,.ep-prose b{color:var(--ep-ink)}
.ep-punch{font-family:var(--ep-font-serif);font-size:clamp(21px,2vw,26px);font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--ep-ink)}
.ep-section--ink .ep-punch{color:var(--ep-on-ink)}

/* ---------- 5. Przyciski ---------- */
.ep-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border:1.5px solid transparent;border-radius:14px;font-family:var(--ep-font-sans);font-size:16px;font-weight:700;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s var(--ep-ease),border-color .2s var(--ep-ease),color .2s var(--ep-ease),box-shadow .2s var(--ep-ease),transform .2s var(--ep-ease)}
.ep-btn:hover{text-decoration:none}
.ep-btn:active{transform:scale(.98)}
.ep-btn:focus-visible{outline:3px solid var(--ep-ink-2);outline-offset:3px;border-radius:14px}
.ep-btn .ep-ico{transition:transform .2s var(--ep-ease)}
.ep-btn:hover .ep-ico--move{transform:translateX(3px)}
/* Kolor tekstu z podwójną klasą: wygrywa z ogólną regułą linków także w ciemnych sekcjach. */
.ep-btn.ep-btn--primary{background:var(--ep-amber);color:var(--ep-ink);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -12px rgba(184,106,16,.7)}
.ep-btn.ep-btn--primary:hover{background:var(--ep-amber-hover);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 28px -12px rgba(184,106,16,.85)}
.ep-btn.ep-btn--ink{background:var(--ep-ink);color:#fff}
.ep-btn.ep-btn--ink:hover{background:var(--ep-ink-2)}
.ep-btn.ep-btn--ghost{background:transparent;color:var(--ep-ink);border-color:rgba(11,31,58,.28)}
.ep-btn.ep-btn--ghost:hover{border-color:var(--ep-ink);background:rgba(11,31,58,.04)}
.ep-section--ink .ep-btn.ep-btn--ghost,.ep-cta-band .ep-btn.ep-btn--ghost,.ep-total .ep-btn.ep-btn--ghost,.ep-hero--cover .ep-btn.ep-btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.ep-section--ink .ep-btn.ep-btn--ghost:hover,.ep-cta-band .ep-btn.ep-btn--ghost:hover,.ep-total .ep-btn.ep-btn--ghost:hover,.ep-hero--cover .ep-btn.ep-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.ep-section--ink .ep-btn:focus-visible,.ep-cta-band .ep-btn:focus-visible,.ep-total .ep-btn:focus-visible{outline-color:var(--ep-amber)}
.ep-btn--lg{min-height:60px;padding:14px 32px;font-size:17px}
.ep-btn--sm{min-height:44px;padding:8px 18px;font-size:15px;border-radius:12px}
.ep-btn--block{display:flex;width:100%}
.ep-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.ep-btn.is-loading{cursor:progress}
.ep-btn.is-loading::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;border:2px solid rgba(11,31,58,.25);border-top-color:var(--ep-ink);animation:ep-spin .8s linear infinite}
@keyframes ep-spin{to{transform:rotate(360deg)}}

.ep-cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:clamp(32px,4vw,48px)}
.ep-cta-row--center{align-items:center;text-align:center}
/* Zamknięcie sekcji: puenta po lewej, przycisk po prawej */
.ep-outro{display:grid;gap:24px;align-items:center}
.ep-outro>.ep-cta-row{margin-top:0}
@media(min-width:900px){
  .ep-outro{grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,96px)}
  .ep-outro>.ep-cta-row{align-items:flex-end;text-align:right}
}
@media(max-width:559px){.ep-cta-row .ep-btn{width:100%}}

/* ---------- 6. Nagłówek i logo ---------- */
.ep-header{position:sticky;top:0;z-index:50;height:var(--ep-header-h);background:var(--ep-paper);border-bottom:1px solid transparent;transition:background-color .2s var(--ep-ease),border-color .2s var(--ep-ease),box-shadow .2s var(--ep-ease)}
.ep-header.is-scrolled{background:rgba(250,247,242,.93);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom-color:var(--ep-line)}
.ep-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%}
.ep-header-actions{display:flex;align-items:center;gap:20px}
.ep-header-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:700;color:var(--ep-ink);text-decoration:none;white-space:nowrap}
.ep-header-tel .ep-ico{color:var(--ep-amber-ink)}
.ep-header-tel:hover{text-decoration:underline}
.ep-header .ep-btn{display:none}
@media(max-width:767px){
  .ep-header-tel{justify-content:center;width:44px;height:44px;border:1.5px solid rgba(11,31,58,.2);border-radius:12px}
  .ep-header-tel>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(min-width:768px){.ep-header .ep-btn{display:inline-flex}}

.ep-logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ep-ink);text-decoration:none}
.ep-logo-mark{width:34px;height:34px;flex:none}
.ep-logo-text{font-family:var(--ep-font-sans);font-size:21px;font-weight:800;line-height:1;letter-spacing:-.02em}
.ep-logo-text b{font-weight:800;color:var(--ep-amber-ink)}

/* ---------- 7. Hero ---------- */
.ep-hero{position:relative;padding-block:clamp(24px,3.5vw,48px) clamp(56px,7vw,96px)}
.ep-hero-grid{display:grid;gap:32px}
.ep-hero-copy>.ep-lead{margin-top:clamp(20px,2vw,28px);max-width:34em}
.ep-hero-copy>.ep-checklist{margin-top:clamp(24px,2.4vw,32px)}
.ep-hero-copy>.ep-cta-row{margin-top:32px}
.ep-hero-media .ep-note-foto{margin-top:20px}
/* --form: treść + karta formularza, pod spodem szerokie zdjęcie (ep-hero-media, opcjonalne).
   Z klasą ep-hero--overlap karta formularza nachodzi na prawą część zdjęcia
   (dla zdjęć z wolną przestrzenią po prawej, np. hero-biurko). */
.ep-hero--form .ep-hero-form{width:100%}
@media(min-width:1024px){
  .ep-hero--form .ep-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-rows:auto auto;column-gap:clamp(40px,5vw,72px);row-gap:clamp(40px,4vw,56px);align-items:start}
  .ep-hero--form .ep-hero-copy{grid-column:1;grid-row:1;padding-top:clamp(8px,1.5vw,24px)}
  .ep-hero--form .ep-hero-form{grid-column:2;grid-row:1;position:relative;z-index:2}
  .ep-hero--form .ep-hero-media{grid-column:1 / -1;grid-row:2}
  .ep-hero--form .ep-hero-points{grid-column:1 / -1}
  .ep-hero--form.ep-hero--overlap .ep-hero-grid{grid-template-rows:auto 1fr}
  .ep-hero--form.ep-hero--overlap .ep-hero-form{grid-row:1 / span 2}
  .ep-hero--form.ep-hero--overlap .ep-form{box-shadow:var(--ep-shadow-3)}
  /* --media-col: zdjęcie albo kolaż w lewej kolumnie pod treścią, formularz po prawej na całą wysokość */
  .ep-hero--form.ep-hero--media-col .ep-hero-grid{grid-template-rows:auto 1fr}
  .ep-hero--form.ep-hero--media-col .ep-hero-form{grid-row:1 / span 2}
  .ep-hero--form.ep-hero--media-col .ep-hero-media{grid-column:1}
}
/* --split: treść obok zdjęcia */
@media(min-width:900px){
  .ep-hero--split .ep-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px);align-items:center}
}
/* --cover: zdjęcie pełnej szerokości, treść na nim */
.ep-hero--cover{display:grid;align-items:end;min-height:min(760px,86vh);padding-block:clamp(96px,14vw,200px) clamp(48px,6vw,88px);color:var(--ep-on-ink-2);isolation:isolate;overflow:hidden}
.ep-hero--cover .ep-hero-bg{position:absolute;inset:0;z-index:-1;background:var(--ep-ink)}
.ep-hero--cover .ep-hero-bg img{display:block;width:100%;height:100%;object-fit:cover}
.ep-hero--cover .ep-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,31,58,.9) 0%,rgba(11,31,58,.68) 48%,rgba(11,31,58,.2) 100%)}
.ep-hero--cover .ep-hero-copy{max-width:680px}
.ep-hero--cover .ep-h1,.ep-hero--cover .ep-lead,.ep-hero--cover .ep-lead strong,.ep-hero--cover .ep-h1-kicker{color:#fff}
.ep-hero--cover .ep-eyebrow,.ep-hero--cover .ep-hl{color:var(--ep-amber)}
.ep-hero--cover a:not(.ep-btn){color:#fff}

.ep-collage{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:center}
.ep-collage>:first-child{grid-row:1 / span 2}
@media(min-width:768px){.ep-collage{gap:24px}}

/* ---------- 8. Zdjęcia, żetony ---------- */
.ep-photo{position:relative;margin:0}
.ep-photo>img{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--ep-radius-l);background:var(--ep-paper-2);color:var(--ep-muted);font-size:14px}
.ep-section--paper2 .ep-photo>img{background:var(--ep-line)}
.ep-photo--wide>img{aspect-ratio:3/2}
.ep-photo--portrait>img{aspect-ratio:4/5}
.ep-photo--classic>img{aspect-ratio:4/3}
.ep-photo--square>img{aspect-ratio:1/1}
.ep-photo--band>img{aspect-ratio:3/2}
@media(min-width:1024px){.ep-photo--band>img{aspect-ratio:2.2/1;object-position:50% 42%}}
.ep-photo--xl>img{border-radius:var(--ep-radius-xl)}
.ep-photo--shadow>img{box-shadow:var(--ep-shadow-3)}
.ep-photo--focus-left>img{object-position:22% 50%}
.ep-photo--focus-right>img{object-position:78% 50%}
.ep-photo--focus-top>img{object-position:50% 18%}
.ep-photo-cap{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ep-muted)}
.ep-note-foto{margin-top:16px;font-size:14px;line-height:1.5;color:var(--ep-muted)}
.ep-section--ink .ep-note-foto,.ep-cta-band .ep-note-foto{color:var(--ep-on-ink-2)}

.ep-chip{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px 8px 10px;background:var(--ep-surface);border-radius:12px;box-shadow:var(--ep-shadow-2);font-size:14px;font-weight:700;line-height:1.3;color:var(--ep-ink);white-space:nowrap}
.ep-chip .ep-ico{color:var(--ep-amber-ink)}
.ep-chip--tl{top:16px;left:16px}
.ep-chip--tr{top:16px;right:16px}
.ep-chip--bl{bottom:16px;left:16px}
.ep-chip--br{bottom:16px;right:16px}
@media(min-width:1200px){
  .ep-chip{min-height:48px;padding:10px 18px 10px 14px;font-size:15px;border-radius:14px}
  .ep-chip--tl{top:28px;left:-20px}
  .ep-chip--tr{top:28px;right:-20px}
  .ep-chip--bl{bottom:28px;left:-20px}
  .ep-chip--br{bottom:28px;right:-20px}
}

/* ---------- 9. Pasek zaufania ---------- */
.ep-trust{padding-block:clamp(28px,3.5vw,40px);border-block:1px solid var(--ep-line)}
.ep-trust-label{margin-bottom:20px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ep-muted)}
.ep-trust-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.ep-trust-list b{display:block;font-family:var(--ep-font-serif);font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ep-ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.ep-trust-list span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--ep-muted)}
@media(min-width:768px){
  .ep-trust-list{display:flex;gap:0}
  .ep-trust-list li{flex:1 1 0;padding-inline:clamp(16px,2.4vw,32px);border-left:1px solid var(--ep-line)}
  .ep-trust-list li:first-child{padding-left:0;border-left:0}
  .ep-trust-list li:last-child{padding-right:0}
}
.ep-section--ink .ep-trust-list b{color:#fff}
.ep-section--ink .ep-trust-list span{color:var(--ep-on-ink-2)}

/* ---------- 10. Karty ról ---------- */
.ep-roles{display:grid;gap:24px}
@media(min-width:640px){.ep-roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ep-roles{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.ep-rolecard{display:flex;flex-direction:column;min-width:0;background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:var(--ep-radius-l);box-shadow:var(--ep-shadow-1);overflow:hidden;transition:box-shadow .3s var(--ep-ease),transform .3s var(--ep-ease)}
@media(hover:hover){.ep-rolecard:hover{box-shadow:var(--ep-shadow-2);transform:translateY(-2px)}}
.ep-rolecard>.ep-photo>img{border-radius:0}
.ep-rolecard-body{display:flex;flex:1;flex-direction:column;gap:16px;padding:24px}
.ep-rolecard-title{font-family:var(--ep-font-serif);font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--ep-ink)}
.ep-rolecard-list{display:grid;gap:14px}
.ep-rolecard-list dt{margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ep-muted)}
.ep-rolecard-list dd{font-size:16px;line-height:1.5;color:var(--ep-text)}
.ep-rolecard-text{font-size:16px;line-height:1.55}
.ep-rolecard-for{margin-top:auto;padding-top:16px;border-top:1px solid var(--ep-line);font-size:14px;line-height:1.5;color:var(--ep-muted)}
.ep-rolecard-for b{color:var(--ep-ink);font-weight:600}
.ep-rolecard-body>.ep-btn{margin-top:auto}
.ep-rolecard-body>.ep-rolecard-for+.ep-btn{margin-top:0}
/* --rail: na telefonie karty w przewijanym rzędzie (bez przewijania całej strony) */
@media(max-width:639px){
  .ep-roles--rail{display:flex;gap:16px;margin-inline:calc(-1 * var(--ep-gutter));padding:4px var(--ep-gutter) 20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ep-gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ep-roles--rail::-webkit-scrollbar{display:none}
  .ep-roles--rail>.ep-rolecard{flex:0 0 82%;scroll-snap-align:start}
}
@media(max-width:639px){.ep-roles--rail .ep-reveal{opacity:1;transform:none}}
.ep-rail-hint{display:none}
@media(max-width:639px){.ep-rail-hint{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:14px;color:var(--ep-muted)}}

/* ---------- 11. Porównanie "Dziś" i "Z Etat Plus" ---------- */
.ep-compare{display:grid;gap:16px}
@media(min-width:768px){.ep-compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.ep-compare-card{display:flex;flex-direction:column;padding:clamp(24px,3vw,40px);background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:var(--ep-radius-l)}
.ep-compare-tag{align-self:flex-start;margin-bottom:20px;padding:6px 12px;border-radius:99px;background:var(--ep-paper-2);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ep-muted)}
.ep-compare-amount{font-family:var(--ep-font-serif);font-size:clamp(36px,4vw,52px);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ep-ink);font-variant-numeric:tabular-nums lining-nums}
.ep-compare-amount small{display:block;margin-top:8px;font-family:var(--ep-font-sans);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ep-muted)}
.ep-compare-flow{list-style:none;display:grid;gap:12px;margin-block:24px;padding-block:24px;border-block:1px solid var(--ep-line)}
.ep-compare-flow li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;line-height:1.5}
.ep-compare-flow .ep-ico{margin-top:3px;color:var(--ep-muted)}
.ep-compare-result{margin-top:auto}
.ep-compare-result b{display:block;font-family:var(--ep-font-serif);font-size:clamp(24px,2.4vw,30px);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--ep-red)}
.ep-compare-result span{display:block;margin-top:6px;font-size:15px;color:var(--ep-muted)}
.ep-compare-card--plus{background:var(--ep-ink);border-color:var(--ep-ink);color:var(--ep-on-ink-2);box-shadow:var(--ep-shadow-3)}
.ep-compare-card--plus .ep-compare-tag{background:var(--ep-amber);color:var(--ep-ink)}
.ep-compare-card--plus .ep-compare-amount{color:#fff}
.ep-compare-card--plus .ep-compare-amount small,.ep-compare-card--plus .ep-compare-result span{color:var(--ep-on-ink-2)}
.ep-compare-card--plus .ep-compare-flow{border-color:var(--ep-line-ink)}
.ep-compare-card--plus .ep-compare-flow .ep-ico{color:var(--ep-amber)}
.ep-compare-card--plus .ep-compare-flow b{color:#fff}
.ep-compare-card--plus .ep-compare-result b{color:var(--ep-amber)}

/* ---------- 12. Kroki ---------- */
.ep-steps{list-style:none;counter-reset:ep-steps;display:grid;gap:32px}
.ep-steps>li{counter-increment:ep-steps;padding-top:20px;border-top:1px solid var(--ep-line)}
.ep-steps>li::before{content:counter(ep-steps);display:block;margin-bottom:16px;font-family:var(--ep-font-serif);font-size:clamp(44px,4.4vw,60px);font-weight:500;line-height:1;color:var(--ep-amber-ink);font-variant-numeric:lining-nums}
.ep-steps>li>*+*{margin-top:8px}
@media(min-width:640px){.ep-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ep-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ep-steps.ep-steps--stack{grid-template-columns:minmax(0,1fr);gap:0}
.ep-steps--stack>li{display:grid;grid-template-columns:clamp(48px,6vw,72px) minmax(0,1fr);column-gap:clamp(16px,2vw,24px);padding-block:24px}
.ep-steps--stack>li::before{grid-row:1 / span 3;margin:0;line-height:.95}
.ep-steps--stack>li>*{grid-column:2}
.ep-steps--stack>li:last-child{border-bottom:1px solid var(--ep-line)}
.ep-section--ink .ep-steps>li{border-color:var(--ep-line-ink)}
.ep-section--ink .ep-steps>li::before{color:var(--ep-amber)}

/* ---------- 13. Lista z ptaszkami ---------- */
.ep-checklist{list-style:none;display:grid;gap:14px}
.ep-checklist li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.ep-checklist .ep-ico{width:24px;height:24px;margin-top:1px;color:var(--ep-green)}
.ep-checklist li.is-no .ep-ico{color:var(--ep-red)}
.ep-checklist b,.ep-checklist strong{color:var(--ep-ink)}
@media(min-width:900px){.ep-checklist--row{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}}
.ep-checklist--lg{gap:0}
.ep-checklist--lg li{padding-block:18px;border-top:1px solid var(--ep-line)}
.ep-checklist--lg li:last-child{border-bottom:1px solid var(--ep-line)}
.ep-section--ink .ep-checklist .ep-ico{color:var(--ep-amber)}
.ep-section--ink .ep-checklist b{color:#fff}

/* ---------- 14. FAQ ---------- */
.ep-faq{border-top:1px solid var(--ep-line)}
.ep-faq details{border-bottom:1px solid var(--ep-line)}
.ep-faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-block:22px;font-family:var(--ep-font-serif);font-size:clamp(19px,1.7vw,22px);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ep-ink);cursor:pointer;list-style:none}
.ep-faq summary::-webkit-details-marker{display:none}
.ep-faq summary::after{content:"";flex:none;width:24px;height:24px;margin-top:3px;background:linear-gradient(currentColor,currentColor) center/16px 1.75px no-repeat,linear-gradient(currentColor,currentColor) center/1.75px 16px no-repeat;transition:transform .25s var(--ep-ease)}
.ep-faq details[open]>summary::after{transform:rotate(45deg)}
.ep-faq summary:hover{color:var(--ep-ink-2)}
.ep-faq summary:focus-visible{outline-offset:0;border-radius:8px}
.ep-faq-body{max-width:64ch;padding:0 48px 24px 0}
.ep-faq-body>*+*{margin-top:12px}

/* ---------- 15. Tabela ---------- */
.ep-table-wrap{overflow-x:auto;background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:var(--ep-radius-m);box-shadow:var(--ep-shadow-1)}
.ep-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums lining-nums}
.ep-table th,.ep-table td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ep-line)}
.ep-table thead th{background:var(--ep-paper);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ep-muted);white-space:nowrap}
.ep-table tbody th{font-weight:600;color:var(--ep-ink)}
.ep-table tbody tr:last-child>*{border-bottom:0}
.ep-table .is-num{text-align:right;white-space:nowrap}
.ep-table tr.is-highlight>*{background:var(--ep-amber-soft);color:var(--ep-ink);font-weight:600}

/* ---------- 16. Wyciąg bankowy, wyróżnienie, suma, przykłady ---------- */
.ep-stmt{background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:var(--ep-radius-m);box-shadow:var(--ep-shadow-2);overflow:hidden;font-size:15px;line-height:1.4}
.ep-stmt-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding:14px 20px;border-bottom:1px solid var(--ep-line);font-weight:700;color:var(--ep-ink)}
.ep-stmt-head>span{display:inline-flex;align-items:center;gap:8px}
.ep-stmt-head>span+span{font-size:14px;font-weight:500;color:var(--ep-muted)}
.ep-stmt-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--ep-line)}
.ep-stmt-date{font-weight:600;color:var(--ep-muted);font-variant-numeric:tabular-nums}
.ep-stmt-desc b{display:block;color:var(--ep-ink)}
.ep-stmt-desc span{display:block;font-size:14px;color:var(--ep-muted)}
.ep-stmt-amt{font-weight:700;color:var(--ep-red);white-space:nowrap;font-variant-numeric:tabular-nums}
.ep-stmt-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:14px 20px;background:var(--ep-paper);font-weight:600;color:var(--ep-ink)}
.ep-stmt-foot b{color:var(--ep-red)}
@media(max-width:419px){.ep-stmt-row{grid-template-columns:auto minmax(0,1fr);row-gap:4px}.ep-stmt-amt{grid-column:2}}
/* Zdjęcie z nachodzącą kartą (np. wyciąg na zdjęciu księgowej) */
.ep-overlap>.ep-photo+*{position:relative;margin:-56px 12px 0}
@media(min-width:900px){.ep-overlap>.ep-photo+*{margin:-56px 24px 0 -24px}}
@media(min-width:1200px){.ep-overlap>.ep-photo+*{margin:-88px 40px 0 -40px}}

.ep-note{padding:clamp(20px,2.4vw,28px);background:var(--ep-amber-soft);border-radius:var(--ep-radius-m);color:var(--ep-text)}
.ep-note>*+*{margin-top:10px}
.ep-note b,.ep-note strong{color:var(--ep-ink)}
.ep-section--ink .ep-note{background:var(--ep-ink-2);color:var(--ep-on-ink-2)}
.ep-section--ink .ep-note b{color:#fff}

.ep-total{display:grid;gap:24px;align-items:center;padding:clamp(24px,4vw,48px);background:var(--ep-ink);border-radius:var(--ep-radius-l);box-shadow:var(--ep-shadow-3);color:var(--ep-on-ink-2)}
.ep-total-label{font-family:var(--ep-font-serif);font-size:clamp(22px,2.2vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:#fff}
.ep-total-text>*+*{margin-top:10px}
.ep-total-value{font-family:var(--ep-font-serif);font-size:clamp(64px,8vw,104px);font-weight:600;line-height:.95;letter-spacing:-.03em;color:var(--ep-amber);white-space:nowrap;font-variant-numeric:lining-nums}
@media(min-width:900px){.ep-total{grid-template-columns:minmax(0,1fr) auto auto;column-gap:clamp(32px,4vw,64px)}}
@media(max-width:559px){.ep-total-action .ep-btn{width:100%}}

.ep-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:560px){.ep-examples{gap:16px}}
@media(min-width:1000px){.ep-examples{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.ep-example{display:flex;flex-direction:column;height:100%;padding:clamp(16px,2.4vw,24px);background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:var(--ep-radius-l);box-shadow:var(--ep-shadow-1)}
.ep-example-in{padding-bottom:clamp(14px,2vw,20px);border-bottom:1px solid var(--ep-line);font-size:14px;color:var(--ep-muted)}
.ep-example-in b{display:block;margin-top:4px;font-size:clamp(16px,1.6vw,19px);font-weight:700;color:var(--ep-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ep-example-out{padding-top:clamp(14px,2vw,20px);font-size:15px;font-weight:600;line-height:1.4;color:var(--ep-ink)}
.ep-example-out b{display:block;margin-bottom:4px;font-family:var(--ep-font-serif);font-size:clamp(44px,4.6vw,60px);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ep-amber-ink);font-variant-numeric:lining-nums}

/* ---------- 17. Partner ---------- */
.ep-partner{display:grid;gap:32px;padding:clamp(24px,4vw,56px);background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:var(--ep-radius-l);box-shadow:var(--ep-shadow-2)}
@media(min-width:900px){.ep-partner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(48px,6vw,88px);align-items:center}}
.ep-partner-main>*+*{margin-top:16px}
.ep-partner-logo{display:inline-flex;padding:10px 18px;background:#fff;border:1px solid var(--ep-line);border-radius:var(--ep-radius-m)}
.ep-partner-logo img{display:block;width:140px;height:70px;object-fit:contain}
.ep-partner-main>.ep-partner-logo+*{margin-top:24px}
.ep-partner-addr{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding-top:20px;margin-top:24px;border-top:1px solid var(--ep-line);font-size:14px;line-height:1.5;color:var(--ep-muted)}
.ep-partner-addr .ep-ico{margin-top:1px;color:var(--ep-ink)}
.ep-partner-stats{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,3vw,40px)}
.ep-partner-stats li{padding-block:20px;border-top:1px solid var(--ep-line)}
.ep-partner-stats li:nth-child(-n+2){border-top:0;padding-top:0}
.ep-partner-stats b{display:block;font-family:var(--ep-font-serif);font-size:clamp(30px,3.2vw,44px);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ep-ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.ep-partner-stats span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--ep-muted)}

/* ---------- 18. Pas CTA ---------- */
.ep-cta-band{padding-block:var(--ep-section-y);background:var(--ep-ink);color:var(--ep-on-ink-2);scroll-margin-top:var(--ep-header-h)}
.ep-cta-band-grid{display:grid;gap:40px}
@media(min-width:900px){.ep-cta-band-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(48px,6vw,96px);align-items:center}}
.ep-cta-band .ep-eyebrow{color:var(--ep-amber)}
.ep-cta-band .ep-h2{color:#fff}
.ep-cta-band .ep-lead{margin-top:20px;max-width:34em;color:var(--ep-on-ink-2)}
.ep-cta-band a:not(.ep-btn){color:#fff}
.ep-cta-actions{display:inline-grid;gap:12px;margin-top:32px}
@media(min-width:1100px){.ep-cta-actions--row{display:flex;flex-wrap:wrap;gap:12px 16px}}
.ep-cta-sla{margin-top:20px;font-size:15px;color:var(--ep-on-ink-2)}
@media(max-width:559px){.ep-cta-actions{display:grid}}
.ep-ps{padding:clamp(24px,3vw,36px);background:var(--ep-ink-2);border-radius:var(--ep-radius-l);font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:#fff}
.ep-ps b{display:block;margin-bottom:10px;font-family:var(--ep-font-serif);font-size:28px;font-weight:600;line-height:1;color:var(--ep-amber)}

/* ---------- 19. Stopka ---------- */
.ep-footer{padding-block:clamp(48px,6vw,72px) 32px;background:var(--ep-paper-2);border-top:1px solid var(--ep-line);font-size:14px;line-height:1.6;color:var(--ep-muted)}
.ep-footer-grid{display:grid;gap:32px}
@media(min-width:640px){.ep-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ep-footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}}
.ep-footer-title{margin-bottom:12px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ep-ink)}
.ep-footer p+p{margin-top:8px}
.ep-footer .ep-logo{margin-bottom:12px}
.ep-footer a:not(.ep-logo){display:inline-block;padding-block:2px;color:var(--ep-ink)}
.ep-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--ep-line)}
@media(max-width:767px){.ep-footer{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}}
@media(pointer:coarse){.ep-footer a:not(.ep-logo){display:inline-flex;align-items:center;min-height:44px}}

/* ---------- 20. Dolny pasek CTA (telefon) ---------- */
.ep-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--ep-gutter) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--ep-line);box-shadow:0 -12px 32px -16px rgba(11,31,58,.25);transform:translateY(110%);visibility:hidden;transition:transform .25s var(--ep-ease),visibility .25s}
.ep-sticky.is-on{transform:none;visibility:visible}
.ep-sticky .ep-btn{font-size:15px;padding-inline:12px}
@media(min-width:768px){.ep-sticky{display:none}}

/* ---------- 21. Formularz ---------- */
.ep-form{position:relative;padding:20px;background:var(--ep-surface);border:1px solid rgba(11,31,58,.06);border-radius:var(--ep-radius-l);box-shadow:var(--ep-shadow-2),0 1px 0 rgba(255,255,255,.8) inset;scroll-margin-top:calc(var(--ep-header-h) + 16px);font-size:16px;line-height:1.5}
@media(min-width:560px){.ep-form{padding:32px}}
.ep-form-title{font-family:var(--ep-font-serif);font-size:clamp(22px,2vw,26px);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ep-ink);text-wrap:balance}
.ep-form-head p{margin-top:6px;font-size:15px;color:var(--ep-muted)}
.ep-progress{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin-top:20px}
.ep-progress span{height:6px;border-radius:99px;background:var(--ep-line);transition:background-color .3s var(--ep-ease)}
.ep-progress span.is-done{background:var(--ep-ink)}
.ep-progress span.is-current{background:var(--ep-amber)}
.ep-progress-label{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px;font-weight:600;color:var(--ep-muted)}
.ep-progress-label b{color:var(--ep-ink)}
.ep-form-rolenote{margin-top:12px;padding:10px 12px;border-radius:var(--ep-radius-s);background:var(--ep-green-soft);font-size:14px;font-weight:600;color:var(--ep-green)}

.ep-step{display:none;margin-top:24px}
.ep-step.is-active{display:block;animation:ep-step-in .35s var(--ep-ease)}
@keyframes ep-step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ep-step-title{margin-bottom:16px;font-family:var(--ep-font-sans);font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ep-ink)}
.ep-step-title+.ep-step-hint{margin:-10px 0 16px}
.ep-step-hint{font-size:14px;color:var(--ep-muted)}

.ep-fields{display:grid;gap:16px}
/* Rząd pól: etykiety jednoliniowe nad polem, podpowiedzi pod polem, align-items:start.
   Dzięki temu pola w rzędzie zawsze stoją na tej samej wysokości. */
.ep-field-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media(min-width:480px){
  .ep-field-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ep-field-row--2-3{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
}
.ep-field{display:flex;flex-direction:column;min-width:0}
.ep-field>label{display:block;height:20px;margin-bottom:8px;font-size:14px;font-weight:600;line-height:20px;color:var(--ep-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-field>label em,.ep-check em{font-style:normal;color:var(--ep-red)}
.ep-field input,.ep-field select,.ep-field textarea{display:block;width:100%;height:56px;margin:0;padding:0 16px;background:var(--ep-surface);border:1.5px solid var(--ep-line-2);border-radius:12px;font-size:17px;line-height:1.3;color:var(--ep-ink);-webkit-appearance:none;appearance:none;transition:border-color .2s var(--ep-ease),box-shadow .2s var(--ep-ease)}
.ep-field textarea{height:auto;min-height:112px;padding-block:14px;resize:vertical}
.ep-field select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230B1F3A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.ep-field select:invalid,.ep-field select.is-empty{color:var(--ep-muted)}
.ep-field ::placeholder{color:#6B7688;opacity:1}
.ep-field input:hover,.ep-field select:hover,.ep-field textarea:hover{border-color:#B9C3D3}
.ep-field input:focus,.ep-field select:focus,.ep-field textarea:focus{outline:none;border-color:var(--ep-ink);box-shadow:0 0 0 4px rgba(11,31,58,.12)}
.ep-field [aria-invalid="true"]{border-color:var(--ep-red)}
.ep-field [aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(179,38,30,.14)}
.ep-input{position:relative}
.ep-input--suffix input{padding-right:48px}
.ep-suffix{position:absolute;top:0;right:16px;display:flex;align-items:center;height:56px;font-size:16px;font-weight:600;color:var(--ep-muted);pointer-events:none}
.ep-hint{margin-top:8px;font-size:14px;line-height:1.45;color:var(--ep-muted)}
.ep-error{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;align-items:start;margin-top:8px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ep-red)}
.ep-error::before{content:"";width:18px;height:18px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16v.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ep-error:empty{display:none}
.ep-step>.ep-error{margin-top:12px}

.ep-choices{display:grid;gap:10px}
@media(min-width:400px){.ep-choices--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ep-choice{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 14px;background:var(--ep-surface);border:1.5px solid var(--ep-line-2);border-radius:12px;font-size:15px;font-weight:600;line-height:1.3;color:var(--ep-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s var(--ep-ease),background-color .2s var(--ep-ease),box-shadow .2s var(--ep-ease)}
.ep-choice:hover{border-color:#B9C3D3}
.ep-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ep-choice-mark{display:grid;place-items:center;flex:none;width:22px;height:22px;background:var(--ep-surface);border:1.5px solid #B9C3D3;border-radius:6px;color:#fff;transition:background-color .2s var(--ep-ease),border-color .2s var(--ep-ease)}
.ep-choice--radio .ep-choice-mark{border-radius:50%}
.ep-choice-mark .ep-ico{width:14px;height:14px;stroke-width:2.5;opacity:0}
.ep-choice-text{min-width:0}
.ep-choice.is-checked,.ep-choice:has(input:checked){border-color:var(--ep-ink);background:var(--ep-amber-soft)}
.ep-choice.is-checked .ep-choice-mark,.ep-choice:has(input:checked) .ep-choice-mark{background:var(--ep-ink);border-color:var(--ep-ink)}
.ep-choice.is-checked .ep-choice-mark .ep-ico,.ep-choice:has(input:checked) .ep-choice-mark .ep-ico{opacity:1}
.ep-choice input:focus-visible+.ep-choice-mark{box-shadow:0 0 0 3px rgba(11,31,58,.28)}
.ep-choice:has(input:focus-visible){box-shadow:0 0 0 4px rgba(11,31,58,.14);border-color:var(--ep-ink)}
.ep-inny{margin-top:16px}

.ep-check{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;min-height:44px;padding-block:4px;font-size:14px;line-height:1.5;color:var(--ep-muted);cursor:pointer}
.ep-check input{width:24px;height:24px;margin:0;accent-color:var(--ep-ink);cursor:pointer}
.ep-check a{color:var(--ep-ink)}

.ep-result{margin-top:16px;padding:20px;background:var(--ep-amber-soft);border-radius:var(--ep-radius-m);animation:ep-step-in .35s var(--ep-ease)}
.ep-result-top{font-size:15px;color:var(--ep-text)}
.ep-result-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:4px;font-family:var(--ep-font-serif);font-size:clamp(21px,2vw,24px);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--ep-ink)}
.ep-result-n{font-size:2em;line-height:1;letter-spacing:-.02em;color:var(--ep-amber-ink);font-variant-numeric:lining-nums;white-space:nowrap}
.ep-result-note{margin-top:8px;font-size:14px;color:var(--ep-text)}
.ep-result-zero{font-size:15px;color:var(--ep-text)}
.ep-result-zero b{color:var(--ep-ink)}
.ep-result-year{margin-top:14px;padding-top:14px;border-top:1px solid rgba(184,106,16,.25);font-size:15px;color:var(--ep-text)}
.ep-result-year b{color:var(--ep-ink);font-variant-numeric:tabular-nums}

.ep-form-nav{display:flex;gap:12px;margin-top:24px}
.ep-form-nav .ep-btn--ghost{flex:0 0 auto}
.ep-form-nav .ep-btn--primary{flex:1 1 auto}
@media(max-width:479px){.ep-form-nav{flex-direction:column-reverse}.ep-form-nav .ep-btn{width:100%}}
.ep-form-error{display:block;margin-top:12px;padding:12px 14px;border-radius:var(--ep-radius-s);background:var(--ep-red-soft);font-size:14px;font-weight:600;color:var(--ep-red)}
.ep-form-trust{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--ep-line);font-size:14px;line-height:1.5;color:var(--ep-muted)}
.ep-form-trust+.ep-form-trust{margin-top:10px;padding-top:0;border-top:0}
.ep-form-trust .ep-ico{margin-top:1px;color:var(--ep-ink)}

.ep-thanks{padding-block:8px;text-align:center}
.ep-thanks-ico{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 20px;border-radius:50%;background:var(--ep-green-soft);color:var(--ep-green)}
.ep-thanks-ico .ep-ico{width:36px;height:36px;stroke-width:2}
.ep-thanks>*+*{margin-top:16px}
.ep-thanks-sla{display:inline-block;text-wrap:balance;padding:12px 16px;border-radius:var(--ep-radius-s);background:var(--ep-amber-soft);font-weight:700;color:var(--ep-ink)}

/* ---------- 22. Pojawianie się sekcji (data-reveal) ---------- */
.ep-reveal{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ep-ease),transform .4s var(--ep-ease)}
.ep-reveal.is-in{opacity:1;transform:none}

/* ---------- 23. Ruch ograniczony, druk ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ep-reveal{opacity:1;transform:none}
  .ep-rolecard:hover{transform:none}
}
@media print{
  .ep-header,.ep-sticky{display:none}
  .ep-reveal{opacity:1;transform:none}
}

/* ---------- Pomocnicze ---------- */
.ep-nowrap{white-space:nowrap}

/* ==========================================================================
   24. WDROŻENIE AUDYTU CRO (30.09.2026). Specyfikacja: site/ZMIANY-CRO.md
   ========================================================================== */

/* ---------- 24.1 Karta formularza: dowód, zdanie pod przyciskiem, druga ścieżka ---------- */
.ep-form-head .ep-form-proof{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;margin-top:12px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ep-ink)}
.ep-form-proof .ep-ico{margin-top:0;color:var(--ep-amber-ink)}
/* Kolejne kroki formularza: tytuł i zdanie pod nim znikają, zostaje linijka dowodu. */
.is-later .ep-form-head .ep-form-title,.is-later .ep-form-head>p:not(.ep-form-proof){display:none}
.is-later .ep-form-head .ep-form-proof{margin-top:0}
/* Kafle ról w ostatnim kroku (w grupie) są niższe na szerszych ekranach, żeby przycisk wysyłki był widoczny bez przewijania. */
@media(min-width:768px){.ep-group .ep-choice{min-height:48px;padding-block:8px}}
.ep-form-assure{margin-top:12px;font-size:14px;line-height:1.45;text-align:center;color:var(--ep-muted)}
.ep-form-call a{font-weight:700;color:var(--ep-ink);white-space:nowrap}
@media(pointer:coarse){.ep-form-call a{display:inline-block;padding-block:10px;margin-block:-10px}}
/* Grupa kafli wśród pól (wybór roli w ostatnim kroku v1 i v2) */
.ep-group{min-width:0}
.ep-group-title{font-size:14px;font-weight:600;line-height:20px;color:var(--ep-ink)}
.ep-group>.ep-step-hint{margin:2px 0 10px}
.ep-group>.ep-error{margin-top:10px}
/* Stan "Dziękujemy": lista "Co teraz" */
.ep-thanks-next{padding:16px 20px 18px;border:1px solid var(--ep-line);border-radius:var(--ep-radius-m);text-align:left}
.ep-thanks-next-title{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ep-muted)}
.ep-thanks-next ol{list-style:none;counter-reset:ep-next;display:grid;gap:12px;margin-top:12px}
.ep-thanks-next li{counter-increment:ep-next;position:relative;padding-left:32px;font-size:15px;line-height:1.45;color:var(--ep-text)}
.ep-thanks-next li::before{content:counter(ep-next);position:absolute;left:0;top:0;font-family:var(--ep-font-serif);font-size:22px;font-weight:600;line-height:1;color:var(--ep-amber-text);font-variant-numeric:lining-nums}

/* ---------- 24.2 Rozwijany blok (np. pełny rachunek w v1) ---------- */
.ep-more>summary{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 22px 12px 18px;background:var(--ep-surface);border:1.5px solid rgba(11,31,58,.28);border-radius:14px;font-size:16px;font-weight:700;line-height:1.25;color:var(--ep-ink);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s var(--ep-ease),background-color .2s var(--ep-ease)}
.ep-more>summary::-webkit-details-marker{display:none}
.ep-more>summary::before{content:"";flex:none;width:20px;height:20px;background:linear-gradient(currentColor,currentColor) center/14px 1.75px no-repeat,linear-gradient(currentColor,currentColor) center/1.75px 14px no-repeat;transition:transform .25s var(--ep-ease)}
.ep-more[open]>summary::before{transform:rotate(45deg)}
.ep-more>summary:hover{border-color:var(--ep-ink)}
.ep-more>summary:focus-visible{border-radius:14px}
.ep-more>summary~*{margin-top:16px}
@media(max-width:559px){.ep-more>summary{display:flex;justify-content:center}}

/* ---------- 24.3 Źródła i zdanie pilności ---------- */
.ep-sources{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;line-height:1.55;color:var(--ep-muted)}
.ep-sources .ep-ico{margin-top:1px;color:var(--ep-ink)}
.ep-sources a{font-weight:600;color:var(--ep-ink)}
.ep-section--ink .ep-sources{color:var(--ep-on-ink-2)}
.ep-section--ink .ep-sources .ep-ico{color:var(--ep-amber)}
.ep-urgency{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;max-width:34em;margin-top:24px;font-weight:700;line-height:1.45;color:#fff}
.ep-urgency .ep-ico{margin-top:2px;color:var(--ep-amber)}
.ep-urgency+.ep-cta-actions{margin-top:24px}

/* ---------- 24.4 Logotypy i opinie (w HTML zakomentowane do czasu zgody klientów) ---------- */
.ep-logos{padding-block:clamp(24px,3vw,36px);border-bottom:1px solid var(--ep-line)}
.ep-logos-label{margin-bottom:16px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ep-muted)}
.ep-logos-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;align-items:center}
@media(min-width:560px){.ep-logos-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.ep-logos-list{display:flex;justify-content:space-between;gap:clamp(24px,4vw,56px)}}
.ep-logos-list li{display:flex;align-items:center;justify-content:center;min-width:0}
.ep-logos-list img{display:block;width:auto;max-width:100%;height:36px;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s var(--ep-ease),opacity .2s var(--ep-ease)}
@media(min-width:768px){.ep-logos-list img{height:40px}}
@media(hover:hover){.ep-logos-list li:hover img{filter:none;opacity:1}}

.ep-quotes{display:grid;gap:16px}
@media(min-width:640px){.ep-quotes{gap:24px}}
@media(min-width:900px){.ep-quotes{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
.ep-quote{display:flex;flex-direction:column;gap:16px;height:100%;margin:0;padding:clamp(20px,2.4vw,32px);background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:var(--ep-radius-l);box-shadow:var(--ep-shadow-1)}
.ep-quote-num b{display:block;font-family:var(--ep-font-serif);font-size:clamp(36px,3.6vw,48px);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ep-amber-ink);font-variant-numeric:lining-nums}
.ep-quote-num>span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--ep-muted)}
.ep-quote-text{margin:0;font-family:var(--ep-font-serif);font-size:clamp(18px,1.6vw,21px);font-weight:500;line-height:1.45;letter-spacing:-.005em;color:var(--ep-ink)}
.ep-quote-text::before{content:"\201E"}
.ep-quote-text::after{content:"\201D"}
.ep-quote-who{margin-top:auto;padding-top:16px;border-top:1px solid var(--ep-line);font-size:14px;line-height:1.45;color:var(--ep-muted)}
.ep-quote-who b{display:block;font-size:15px;font-weight:700;color:var(--ep-ink)}
.ep-quote-who>span{display:block}
.ep-quote-who>.ep-demo-tag{display:inline-block}
/* Jedna krótka opinia w karcie formularza */
.ep-quote--form{gap:10px;height:auto;margin-top:20px;padding:16px;background:var(--ep-paper);border-radius:var(--ep-radius-m);box-shadow:none}
.ep-quote--form .ep-quote-text{font-family:var(--ep-font-sans);font-size:15px;font-weight:500;letter-spacing:0}
.ep-quote--form .ep-quote-who{margin-top:0;padding-top:10px}

/* ---------- 24.5 Pasek zgody na cookies (tworzy go ep.js, gdy ustawiono TRACKING) ---------- */
.ep-consent{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:14px var(--ep-gutter) calc(14px + env(safe-area-inset-bottom,0px));background:var(--ep-ink);box-shadow:0 -12px 32px -16px rgba(11,31,58,.45);font-size:14px;line-height:1.5;color:var(--ep-on-ink-2)}
.ep-consent-inner{display:grid;gap:12px;align-items:center;max-width:var(--ep-container);margin-inline:auto}
@media(min-width:900px){.ep-consent-inner{grid-template-columns:minmax(0,1fr) auto;gap:32px}}
.ep-consent-text a{color:#fff;white-space:nowrap}
.ep-consent-actions{display:flex;gap:10px}
.ep-consent-actions .ep-btn{flex:1 1 0;white-space:nowrap}
.ep-consent .ep-btn.ep-btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.ep-consent .ep-btn.ep-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.ep-consent :focus-visible{outline-color:var(--ep-amber)}
/* Na telefonie pasek zgody stoi nad dolnym paskiem CTA (wysokość paska ustawia ep.js). */
@media(max-width:767px){body:has(.ep-sticky.is-on) .ep-consent{bottom:var(--ep-sticky-h,73px);padding-bottom:14px}}
@media print{.ep-consent{display:none}}

/* ---------- 24.6 Telefon: pierwszy ekran i minimalny tekst 14 px ---------- */
@media(max-width:767px){
  /* Napisy i etykiety: na telefonie nic poniżej 14 px. Desktop bez zmian. */
  .ep-eyebrow,.ep-trust-label,.ep-compare-tag,.ep-table thead th,.ep-footer-title,.ep-rolecard-list dt{font-size:14px}
  /* Dolny pasek: dłuższy tekst przycisku łamie się na dwie równe linie. */
  .ep-sticky .ep-btn{text-wrap:balance}
}
@media(max-width:559px){
  /* Pierwsze pole i przycisk formularza wyżej: mniejszy odstęp między leadem a kartą, ciaśniejsza głowa karty.
     ep-hide-phone chowa na telefonie elementy, które powtarzają tytuł karty (zdanie pod tytułem, tytuł kroku z liczbami). */
  .ep-hide-phone{display:none}
  .ep-hero--form .ep-hero-grid{gap:16px}
  .ep-form-head .ep-form-proof{margin-top:10px}
  .ep-progress{margin-top:16px}
  .ep-progress-label{margin-top:8px}
  .ep-step{margin-top:16px}
  .ep-field-row{gap:12px}
  .ep-form-nav{margin-top:20px}
}


/* ==========================================================================
   25. DOSTĘPNOŚĆ WCAG 2.2 AA (30.09.2026). Ustalenia: kampania-etat-plus/audyty/dostepnosc.md
   ========================================================================== */
:root{--ep-line-field:#7E899C}  /* obramowanie pól i znaczników: 3,53:1 na białym */
/* Pola i kwadraty wyboru widoczne dla osób słabowidzących (1.4.11). */
.ep-field input,.ep-field select,.ep-field textarea{border-color:var(--ep-line-field)}
.ep-choice-mark{border-color:var(--ep-line-field)}
.ep-field input:hover,.ep-field select:hover,.ep-field textarea:hover,.ep-choice:hover{border-color:var(--ep-muted)}
.ep-field input:focus,.ep-field select:focus,.ep-field textarea:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--ep-ink)}
.ep-field input[aria-invalid="true"],.ep-field select[aria-invalid="true"],.ep-field textarea[aria-invalid="true"]{border-color:var(--ep-red)}
.ep-choice.is-checked .ep-choice-mark,.ep-choice:has(input:checked) .ep-choice-mark{border-color:var(--ep-ink)}
/* Fokus na kaflach wyboru: prawdziwy obrys zamiast poświaty (2.4.7). */
.ep-choice:has(input:focus-visible){outline:3px solid var(--ep-ink-2);outline-offset:2px;box-shadow:none}
.ep-choice input:focus-visible+.ep-choice-mark{box-shadow:none}
@supports not selector(:has(*)){.ep-choice input:focus-visible+.ep-choice-mark{outline:3px solid var(--ep-ink-2);outline-offset:2px}}
/* Krok formularza dostaje fokus programowo (dotyk), bez obrysu. */
.ep-step:focus{outline:none}
.ep-thanks h2:focus,.ep-thanks h3:focus{outline:none}
/* Dolny pasek i pasek zgody nie zakrywają elementu z fokusem (2.4.11). */
html{scroll-padding-bottom:calc(var(--ep-sticky-h,0px) + var(--ep-consent-h,0px) + 16px)}
/* Notka o wybranej roli: stały region role="status", pusty nie zajmuje miejsca. */
.ep-form-rolenote:empty{margin:0;padding:0;background:none}
/* Reflow przy 320 px i przy większych odstępach tekstu (1.4.10, 1.4.12). */
.ep-chip{max-width:calc(100% - 32px)}
@media(max-width:559px){.ep-chip{white-space:normal}}
.ep-split>*{min-width:0}
@media(max-width:359px){.ep-example-in b{white-space:normal}}
/* Duże powiększenie: stałe paski nie zabierają ekranu, karuzela ról ma pasek przewijania. */
@media(max-height:480px){.ep-header{position:static}.ep-sticky{display:none}}
@media(max-width:639px) and (hover:hover) and (pointer:fine){
  .ep-roles--rail{scrollbar-width:thin}
  .ep-roles--rail::-webkit-scrollbar{display:block;height:8px}
}
/* Link "Przejdź do formularza" dla klawiatury. */
.ep-skip{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 16px;border-radius:12px;background:var(--ep-ink);color:#fff;font-weight:700;text-decoration:none}
.ep-skip:focus{top:12px}
/* Linki telefonu w tekście: większy cel dotyku. */
@media(pointer:coarse){a[data-tel-href]:not(.ep-btn):not(.ep-header-tel){display:inline-block;padding-block:12px;margin-block:-12px}}
/* Telefon: jeden przyklejony pasek naraz i krótszy tekst zgody (pasek zgody ma pierwszeństwo). */
@media(max-width:767px){
  body:has(.ep-consent) .ep-sticky{display:none}
  .ep-consent-more{display:none}
}
/* "Nie znam kwoty" pod polami kroku z liczbami. */
.ep-check--nieznam{margin-top:6px;color:var(--ep-text);font-weight:600}
.ep-field.is-off input{background:var(--ep-paper-2);color:var(--ep-muted);cursor:not-allowed}
.ep-field.is-off label,.ep-field.is-off .ep-hint,.ep-field.is-off .ep-suffix{opacity:.55}
.ep-result-est{margin-top:8px;font-size:14px;line-height:1.45;color:var(--ep-muted)}
/* Opinie przykładowe (do prezentacji): plakietka "wzór" i miejsca na logotypy. Usunąć razem z opiniami przykładowymi. */
.ep-demo-tag{display:inline-block;margin-top:8px;padding:3px 10px;border:1px dashed var(--ep-line-field);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ep-muted);background:var(--ep-surface)}
.ep-quote--form .ep-demo-tag{margin-top:6px}
.ep-logo-ph{display:grid;place-items:center;flex:none;width:156px;max-width:100%;height:44px;white-space:nowrap;border:1.5px dashed var(--ep-line-field);border-radius:10px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ep-muted)}

/* 26. Pasek referencji: nazwy firm zamiast logotypów (listy referencyjne dla BPO Network, 5.10.2026) */
.ep-logo-txt{display:block;font-weight:700;font-size:15px;line-height:1.25;letter-spacing:.01em;color:var(--ep-ink-2);text-align:center;opacity:.8}
@media(min-width:768px){.ep-logo-txt{font-size:17px}}