/* ==========================================================================
   Dobrze Działa · wspólny arkusz wzoru strony
   Tokeny w :root odpowiadają paletze i czcionkom z Kadence na dobrzedziala.pl.
   Nic nowego w marce: te same kolory i kroje, lepsza hierarchia i rytm.
   ========================================================================== */

:root{
  /* --- Kolory (Kadence: Global Palette 1–9 + akcent) --- */
  --c-brand:#234D3C;      /* paleta 1 · zieleń marki: przyciski, logo, eyebrow */
  --c-brand-2:#3F7D63;    /* paleta 2 · zieleń druga: hover, ikony */
  --c-ink:#252927;        /* paleta 3 · nagłówki */
  --c-text:#3B403D;       /* paleta 4 · tekst */
  --c-muted:#626964;      /* paleta 5 · tekst pomocniczy (na jasnych tłach) */
  --c-muted-2:#858C87;    /* paleta 6 · tylko ozdobniki i duże cyfry, nie tekst */
  --c-mint:#E8F0EB;       /* paleta 7 · tło sekcji jasnozielonej */
  --c-paper:#F7F5F0;      /* paleta 8 · tło strony (papier) */
  --c-white:#FFFFFF;      /* paleta 9 · karty */
  --c-line:#D6E2DA;       /* linie, obramowania */
  --c-gold:#D9A441;       /* akcent: krótkie podkreślenia, kropka w logo, favicon */
  --c-ink-on-dark:#F7F5F0;/* tekst na ciemnej zieleni */
  --c-mint-on-dark:rgba(247,245,240,.78);

  /* --- Typografia --- */
  --f-head:"Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* skala: wartość mobile → desktop przez clamp() */
  --fs-h1:clamp(2.25rem, 1.45rem + 3.2vw, 3.5rem);     /* 36 → 56 px */
  --fs-h2:clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);      /* 28 → 40 px */
  --fs-h3:clamp(1.3125rem, 1.15rem + .65vw, 1.5rem);   /* 21 → 24 px */
  --fs-h4:1.125rem;                                     /* 18 px, Inter 600 */
  --fs-lead:clamp(1.125rem, 1.05rem + .4vw, 1.25rem);   /* 18 → 20 px */
  --fs-body:clamp(1rem, .97rem + .15vw, 1.0625rem);     /* 16 → 17 px */
  --fs-small:.9375rem;                                  /* 15 px */
  --fs-eyebrow:.8125rem;                                /* 13 px, wersaliki */
  --fs-num:clamp(2.5rem, 2rem + 2vw, 3.5rem);           /* duże numery kroków */

  --lh-tight:1.1; --lh-head:1.2; --lh-body:1.6;

  /* --- Odstępy (siatka 8 px) --- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:2.5rem; --s-8:3rem; --s-9:4rem; --s-10:5rem;
  --sec-y:clamp(3.5rem, 4rem + 4vw, 7rem);   /* pion sekcji: 56 → 112 px */
  --sec-gap:clamp(2rem, 1.5rem + 2vw, 3.5rem);/* nagłówek sekcji → treść */
  --gutter:clamp(1rem, 2.5vw, 1.5rem);        /* margines boczny: 16 → 24 px */

  /* --- Szerokości --- */
  --w-content:1290px;  /* jak w Kadence */
  --w-narrow:842px;    /* jak w Kadence: artykuły, formularze */
  --w-text:66ch;       /* maksymalna szerokość akapitu */

  /* --- Promienie, cienie, ruch --- */
  --r-btn:6px; --r-card:12px; --r-pill:999px;
  --sh-card:0 15px 15px -10px rgba(0,0,0,.05);
  --sh-hover:0 15px 25px -7px rgba(0,0,0,.10);
  --t-fast:160ms; --t-base:240ms; --ease:cubic-bezier(.2,.7,.2,1);
}

/* ==========================================================================
   Reset i podstawy
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--c-paper);color:var(--c-text);
  font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;color:var(--c-ink);text-wrap:balance}
h1{font:500 var(--fs-h1)/var(--lh-tight) var(--f-head);letter-spacing:-.01em}
h2{font:500 var(--fs-h2)/var(--lh-head) var(--f-head);letter-spacing:-.005em}
h3{font:500 var(--fs-h3)/var(--lh-head) var(--f-head)}
h4{font:600 var(--fs-h4)/1.35 var(--f-body)}
p{margin:0}
p+p{margin-top:var(--s-4)}
ul,ol{margin:0;padding-left:1.25rem}
a{color:var(--c-brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--c-brand-2)}
strong,b{font-weight:600;color:var(--c-ink)}
em{font-style:italic}
hr{border:0;border-top:1px solid var(--c-line);margin:var(--s-6) 0}
:focus-visible{outline:3px solid var(--c-gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--c-mint);color:var(--c-ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   Układ
   ========================================================================== */
.wrap{width:100%;max-width:var(--w-content);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--w-narrow)}
.prose-w{max-width:var(--w-text)}
.center{text-align:center}
.center .prose-w{margin-inline:auto}
.grid{display:grid;gap:var(--s-5)}
.grid>*,.split>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.split--even{grid-template-columns:1fr 1fr}
.split--rev>*:first-child{order:2}
.split--contact{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
@media (max-width:1023px){
  .grid-4,.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:minmax(0,1fr)}
  .grid-5.keep-2,.grid-4.keep-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split--even,.split--contact{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
  .split--rev>*:first-child{order:0}
}

/* Sekcje */
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:calc(var(--sec-y)*.6)}
.section--mint{background:var(--c-mint)}
.section--white{background:var(--c-white)}
.section--dark{background:var(--c-brand);color:var(--c-ink-on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,.section--dark strong{color:var(--c-white)}
.section--dark .muted,.section--dark .lead{color:var(--c-mint-on-dark)}
.section--dark .eyebrow{color:var(--c-gold)}
.section--dark a{color:var(--c-white)}
.section--dark a:hover{color:var(--c-gold)}
.section:not(.section--mint):not(.section--dark):not(.section--white)+.section:not(.section--mint):not(.section--dark):not(.section--white){padding-top:0}
.sec-head{display:grid;gap:var(--s-4);margin-bottom:var(--sec-gap);max-width:var(--w-text)}
.sec-head.center{margin-inline:auto;justify-items:center}
.sec-head .lead{margin-top:var(--s-1)}

/* ==========================================================================
   Typografia pomocnicza
   ========================================================================== */
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-muted)}
.muted{color:var(--c-muted)}
.small{font-size:var(--fs-small)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font:500 var(--fs-eyebrow)/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--c-brand);
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-brand-2);flex:none}
.section--dark .eyebrow::before{background:var(--c-gold)}
/* krótkie złote podkreślenie nagłówka: podkreśla, a nie dekoruje */
.rule{position:relative;padding-bottom:var(--s-4)}
.rule::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:2px;background:var(--c-gold);border-radius:1px}
.center .rule::after,.rule.rule--center::after{left:50%;transform:translateX(-50%)}
.u-gold{text-decoration:underline;text-decoration-color:var(--c-gold);text-decoration-thickness:2px;text-underline-offset:.22em}
.num{font:500 var(--fs-num)/1 var(--f-head);color:var(--c-brand-2);font-variant-numeric:lining-nums tabular-nums}
.kicker{font:600 .8125rem/1.3 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}

/* Listy w treści */
.list{list-style:none;padding:0;display:grid;gap:var(--s-3)}
.list li{position:relative;padding-left:1.4rem}
.list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--c-brand-2)}
.list--check li::before{top:.3em;width:1.05em;height:1.05em;border-radius:0;background:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7D63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:contain}

/* ==========================================================================
   Pasek „WZÓR STRONY” (tylko w prototypie, nie przenosić do WordPressa)
   ========================================================================== */
.proto{
  background:#2A2D2B;color:#E9E7E2;font:500 .75rem/1.4 var(--f-body);letter-spacing:.06em;text-transform:uppercase;
  border-bottom:3px solid var(--c-gold);
}
.proto .wrap{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center;min-height:2.25rem;padding-block:.4rem}
.proto b{color:var(--c-gold);font-weight:700}
.proto a{color:#fff;text-transform:none;letter-spacing:0}
.proto a:hover{color:var(--c-gold)}

/* ==========================================================================
   Nagłówek i nawigacja
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--c-line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:4.5rem}
.logo{display:inline-flex;align-items:baseline;gap:.08em;font:600 1.5rem/1 var(--f-head);color:var(--c-brand);text-decoration:none;letter-spacing:-.01em}
.logo::after{content:"";width:.42em;height:.42em;border-radius:50%;background:var(--c-gold);transform:translateY(-.02em)}
.logo:hover{color:var(--c-brand)}
.nav{display:flex;align-items:center;gap:var(--s-2)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s-1)}
.nav a:not(.btn){display:inline-block;padding:.5rem .75rem;border-radius:var(--r-btn);color:var(--c-ink);text-decoration:none;font-weight:500;font-size:var(--fs-small)}
.nav a:not(.btn):hover{background:var(--c-mint);color:var(--c-brand)}
.nav a[aria-current="page"]:not(.btn){color:var(--c-brand);box-shadow:inset 0 -2px 0 var(--c-gold)}
.nav .btn{margin-left:var(--s-3)}
.nav-toggle{display:none;background:none;border:1px solid var(--c-line);border-radius:var(--r-btn);width:2.75rem;height:2.75rem;color:var(--c-ink);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .ic-close{display:none}
.nav-toggle[aria-expanded="true"] .ic-menu{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--c-paper);border-bottom:1px solid var(--c-line);padding:var(--s-4) var(--gutter) var(--s-5);box-shadow:var(--sh-hover)}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a:not(.btn){display:block;padding:.85rem .5rem;font-size:1.0625rem;border-bottom:1px solid var(--c-line);border-radius:0}
  .nav a[aria-current="page"]:not(.btn){box-shadow:none;border-left:3px solid var(--c-gold);padding-left:.75rem}
  .nav .btn{margin:var(--s-4) 0 0;width:100%}
}

/* ==========================================================================
   Przyciski
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:3rem;padding:.8rem 1.4rem;border-radius:var(--r-btn);border:1.5px solid transparent;
  font:500 1rem/1.2 var(--f-body);text-decoration:none;cursor:pointer;white-space:normal;text-align:center;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-fast) var(--ease);
}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-primary{background:var(--c-brand);color:var(--c-white);border-color:var(--c-brand)}
.btn-primary:hover{background:var(--c-brand-2);border-color:var(--c-brand-2);color:var(--c-white);box-shadow:var(--sh-hover)}
.btn-secondary{background:transparent;color:var(--c-brand);border-color:var(--c-brand)}
.btn-secondary:hover{background:var(--c-mint);color:var(--c-brand)}
:is(.section--dark,.on-dark) .btn-primary{background:var(--c-white);color:var(--c-brand);border-color:var(--c-white)}
:is(.section--dark,.on-dark) .btn-primary:hover{background:var(--c-mint);border-color:var(--c-mint);color:var(--c-brand)}
:is(.section--dark,.on-dark) .btn-secondary{color:var(--c-white);border-color:rgba(255,255,255,.55)}
:is(.section--dark,.on-dark) .btn-secondary:hover{background:rgba(255,255,255,.1);color:var(--c-white)}
.btn-link{display:inline-flex;align-items:center;gap:.4em;font-weight:500;color:var(--c-brand);text-decoration:none;border-bottom:2px solid var(--c-gold);padding-bottom:.1em}
.btn-link svg{width:1em;height:1em;transition:transform var(--t-fast) var(--ease)}
.btn-link:hover{color:var(--c-brand-2)}
.btn-link:hover svg{transform:translateX(3px)}
.btn-sm{min-height:2.5rem;padding:.55rem 1rem;font-size:var(--fs-small)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:center}
.btn-note{font-size:var(--fs-small);color:var(--c-muted)}
@media (max-width:480px){.btn-row .btn{width:100%}}

/* ==========================================================================
   Karty
   ========================================================================== */
.card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);padding:clamp(1.25rem,2vw,1.75rem);display:grid;gap:var(--s-3);align-content:start}
.card--mint{background:var(--c-mint);border-color:transparent}
.card--plain{background:transparent;border-color:var(--c-line)}
.card h3,.card h4{margin:0}
.card .num{line-height:.9}
.card .ico{width:44px;height:44px;border-radius:50%;background:var(--c-mint);display:grid;place-items:center;color:var(--c-brand)}
.card--mint .ico{background:var(--c-white)}
.card .ico svg{width:22px;height:22px}
a.card{text-decoration:none;color:inherit;transition:box-shadow var(--t-base) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-base) var(--ease)}
a.card:hover{box-shadow:var(--sh-hover);border-color:var(--c-brand-2)}
.card-link{display:flex;flex-direction:column;align-items:stretch}
.card-link>.btn-link{margin-top:auto;align-self:flex-start}
.card-link>.illu-box{flex:none}
.card .btn-link{justify-self:start;margin-top:auto}
/* Pasek „Dodatkowo” pod kartami usług (komponent DodatekWsparcie) */
.dodatek{margin-top:var(--s-5);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-5)}
.dodatek .illu--card{margin-bottom:0}
.dodatek .btn-link{margin-top:0}
.dodatek-tekst{margin-top:.35rem;color:var(--c-ink)}
@media (max-width:720px){.dodatek{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}}

/* Objawy (lista z kropką w karcie) */
.symptom{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);padding:1.1rem 1.25rem;font-weight:500;color:var(--c-ink)}
.symptom::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--c-brand-2);margin-top:.55em}

/* Pięć obszarów KTO/CO/JAK/GDZIE/KONTROLA */
.areas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-white);overflow:hidden}
.area{padding:1.25rem 1.1rem;display:grid;gap:.35rem;border-right:1px solid var(--c-line)}
.area:last-child{border-right:0}
.area b{font:500 1.25rem/1.2 var(--f-head);color:var(--c-brand);letter-spacing:.02em}
.area span{font-size:var(--fs-small);color:var(--c-muted)}
@media (max-width:1023px){.areas{grid-template-columns:repeat(3,minmax(0,1fr))}.area{border-bottom:1px solid var(--c-line)}.area:nth-child(3n){border-right:0}.area:nth-child(n+4){border-bottom:0}}
@media (max-width:640px){.areas{grid-template-columns:1fr 1fr}.area{border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}.area:nth-child(2n){border-right:0}.area:nth-child(3n){border-right:1px solid var(--c-line)}.area:nth-child(4){border-right:0;border-bottom:1px solid var(--c-line)}.area:last-child{grid-column:1/-1;border-right:0;border-bottom:0}}

/* ==========================================================================
   Kroki współpracy (oś z numerami)
   ========================================================================== */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:0;counter-reset:step}
.step{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:var(--s-5);padding:var(--s-6) 0;border-top:1px solid var(--c-line);position:relative}
.step:last-child{border-bottom:1px solid var(--c-line)}
.step .num{font-size:2.25rem}
.step-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-5) var(--s-7)}
.step-body h3{grid-column:1/-1}
.step-meta{font-size:var(--fs-small);color:var(--c-muted);margin-top:var(--s-1)}
.step-get{background:var(--c-mint);border-radius:var(--r-card);padding:1rem 1.25rem;display:grid;gap:var(--s-2)}
.step-get .kicker{color:var(--c-brand)}
.step-get ul{margin:0}
@media (max-width:767px){
  .step{grid-template-columns:3rem minmax(0,1fr);gap:var(--s-4)}
  .step .num{font-size:1.75rem}
  .step-body{grid-template-columns:minmax(0,1fr)}
}
/* wersja zwarta (4–5 kroków w rzędzie) */
.steps-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-5);counter-reset:s}
.steps-row>li{list-style:none;position:relative;padding-top:var(--s-4);border-top:2px solid var(--c-line);display:grid;gap:var(--s-2);align-content:start}
.steps-row>li::before{counter-increment:s;content:"0" counter(s);font:500 1.375rem/1 var(--f-head);font-variant-numeric:lining-nums;color:var(--c-brand-2);position:absolute;top:-.7rem;left:0;background:var(--c-paper);padding-right:.5rem}
.section--mint .steps-row>li::before{background:var(--c-mint)}
.section--white .steps-row>li::before{background:var(--c-white)}
.steps-row h4{margin-top:.25rem}
.steps-row p{font-size:var(--fs-small);color:var(--c-muted)}
.steps-row.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.steps-row,.steps-row.steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps-row,.steps-row.steps-4{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   Przykład realizacji (Sytuacja → Problem → Co zrobiłam → Efekt)
   ========================================================================== */
.case{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);padding:clamp(1.25rem,2.5vw,2rem);display:grid;gap:var(--s-5)}
.case-head{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;justify-content:space-between}
.case-head h3{flex:1 1 240px}
.case-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.case-grid>div{display:grid;gap:var(--s-2);align-content:start;padding-top:var(--s-3);border-top:2px solid var(--c-line)}
.case-grid>div:last-child{border-top-color:var(--c-gold)}
.case-grid .kicker{color:var(--c-brand)}
.case-grid p{font-size:var(--fs-small)}
.case-grid .effect{font:500 1.0625rem/1.4 var(--f-body);color:var(--c-ink)}
@media (max-width:900px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.case-grid{grid-template-columns:minmax(0,1fr)}}

/* Etykieta „przykład do podmiany” */
.swap{display:inline-flex;align-items:center;gap:.4em;font:500 .72rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:#7A5A12;background:#F7EDD9;border:1px dashed #D9A441;border-radius:4px;padding:.3em .6em;max-width:100%}
.swap::before{content:"";flex:none;width:.8em;height:.8em;border-radius:50%;border:1.5px solid currentColor}
.fill{background:#F7EDD9;color:#7A5A12;border-radius:3px;padding:0 .3em;font-weight:500}
.section--dark .fill{background:rgba(217,164,65,.25);color:#F3D9A2}

/* ==========================================================================
   Opinie
   ========================================================================== */
.quote{margin:0;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);padding:clamp(1.25rem,2vw,1.75rem);display:grid;gap:var(--s-4);grid-template-rows:auto 1fr auto}
.quote blockquote{margin:0;font:500 1.0625rem/1.55 var(--f-body);color:var(--c-ink)}
.quote blockquote::before{content:"\201E";display:block;font:500 3rem/0.6 var(--f-head);color:var(--c-gold);margin-bottom:.6rem}
.quote footer{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-small);color:var(--c-muted)}
.quote footer b{display:block;color:var(--c-ink);font-weight:600}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--c-mint);display:grid;place-items:center;color:var(--c-brand);font:600 .95rem var(--f-body);flex:none}

/* ==========================================================================
   FAQ (details/summary)
   ========================================================================== */
.faq{display:grid;gap:0;border-top:1px solid var(--c-line)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:1.1rem 0;font:600 1.0625rem/1.4 var(--f-body);color:var(--c-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--c-brand)}
.faq summary .plus{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--c-line);display:grid;place-items:center;color:var(--c-brand);transition:transform var(--t-base) var(--ease),background var(--t-fast) var(--ease)}
.faq summary .plus svg{width:14px;height:14px}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--c-mint)}
.faq .faq-a{overflow:hidden}
.faq .faq-a>div{padding:0 0 1.25rem;max-width:var(--w-text);color:var(--c-text)}
.faq .faq-a p+p{margin-top:var(--s-3)}

/* ==========================================================================
   Formularz
   ========================================================================== */
.form{display:grid;gap:var(--s-4)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem;align-content:start}
.field label{font-weight:500;color:var(--c-ink);font-size:var(--fs-small)}
.field label .req{color:#A8342A}
.field .hint{font-size:.8125rem;color:var(--c-muted)}
.field input,.field select,.field textarea{
  width:100%;font:400 1rem/1.4 var(--f-body);color:var(--c-ink);background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-btn);padding:.8rem .9rem;min-height:3rem;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field textarea{min-height:8rem;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234D3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:18px;padding-right:2.6rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c-brand-2);box-shadow:0 0 0 3px rgba(63,125,99,.18)}
.field input::placeholder,.field textarea::placeholder{color:var(--c-muted-2)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-small);color:var(--c-text)}
.check input{flex:none;width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--c-brand)}
.form .btn{justify-self:start}

/* ==========================================================================
   Placeholder zdjęcia
   ========================================================================== */
.ph{
  position:relative;width:100%;border-radius:var(--r-card);overflow:hidden;
  background-color:var(--c-mint);
  background-image:repeating-linear-gradient(135deg,rgba(63,125,99,.07) 0 10px,transparent 10px 22px);
  border:1.5px dashed var(--c-brand-2);
  display:grid;place-items:center;text-align:center;padding:1.25rem;color:var(--c-brand)
}
.ph--4x5{aspect-ratio:4/5}.ph--3x4{aspect-ratio:3/4}.ph--1x1{aspect-ratio:1/1}.ph--3x2{aspect-ratio:3/2}.ph--16x9{aspect-ratio:16/9}.ph--21x9{aspect-ratio:21/9}
.ph--round{border-radius:50%}
.ph>div{display:grid;gap:.5rem;justify-items:center;max-width:36ch}
.ph svg{width:36px;height:36px;stroke-width:1.5}
.ph b{font:600 .8rem/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
.ph p{font-size:.8125rem;line-height:1.45;color:var(--c-text)}
.ph small{font-size:.75rem;color:var(--c-muted)}
.ph--sm{padding:.75rem}
.ph--sm svg{width:24px;height:24px}
.ph--sm p,.ph--sm small{font-size:.7rem}
.ph--sm b{font-size:.68rem}
.ph--dark{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:var(--c-white);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 10px,transparent 10px 22px)}
.ph--dark p{color:var(--c-mint-on-dark)}.ph--dark small{color:var(--c-mint-on-dark)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding-block:clamp(3rem,3rem + 3vw,5.5rem) clamp(3.5rem,3rem + 4vw,6.5rem)}
.hero .split{align-items:center}
.hero-copy{display:grid;gap:var(--s-5)}
.hero-copy .lead{max-width:34rem}
.hero-media{position:relative;max-width:460px;margin-left:auto;width:100%}
@media (max-width:767px){.hero-media{max-width:420px;margin-inline:auto}}
.hero-media .ph{box-shadow:var(--sh-card)}
.hero-media::before{content:"";position:absolute;inset:auto -1rem -1rem auto;width:56%;height:56%;border-radius:var(--r-card);background:var(--c-mint);z-index:-1}
.trust{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);font-size:var(--fs-small);color:var(--c-muted);padding-top:var(--s-2);border-top:1px solid var(--c-line)}
.trust span{display:inline-flex;gap:.45em;align-items:center}
.trust svg{width:16px;height:16px;color:var(--c-brand-2)}
/* hero podstrony (bez zdjęcia, węższy) */
.hero--page{padding-block:clamp(2.5rem,2rem + 3vw,4.5rem) clamp(2.5rem,2rem + 3vw,4.5rem)}
.hero--page .hero-copy{max-width:46rem}

/* ==========================================================================
   Pasek z cytatem (zielony)
   ========================================================================== */
.band{padding-block:clamp(2.5rem,2rem + 3vw,4.5rem)}
.band .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s-7);align-items:center}
.band p.big{font:500 clamp(1.375rem,1.1rem + 1.4vw,2rem)/1.3 var(--f-head);color:var(--c-white);text-wrap:balance}
.band .kicker{color:var(--c-gold)}
@media (max-width:767px){.band .wrap{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   Artykuł (blog)
   ========================================================================== */
.article{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(2rem,4vw,4rem);align-items:start}
.article .prose{max-width:var(--w-text)}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--fs-small);color:var(--c-muted);align-items:center}
.article-meta .avatar{width:32px;height:32px;font-size:.75rem}
.toc{position:sticky;top:5.5rem;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);padding:1.25rem;display:grid;gap:var(--s-3)}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:.3rem;counter-reset:toc}
.toc li{counter-increment:toc;display:flex;gap:.6em;font-size:var(--fs-small)}
.toc li::before{content:counter(toc) ".";color:var(--c-brand-2);font-weight:600;min-width:1.4em}
.toc a{text-decoration:none;color:var(--c-text)}
.toc a:hover{color:var(--c-brand)}
@media (max-width:900px){.article{grid-template-columns:minmax(0,1fr)}.toc{position:static;order:-1}}
.prose{display:grid;gap:var(--s-4)}
.prose h2{margin-top:var(--s-6);scroll-margin-top:6rem}
.prose h3{margin-top:var(--s-4);font-size:1.25rem}
.prose ul,.prose ol{display:grid;gap:.4rem;padding-left:1.25rem}
.prose li::marker{color:var(--c-brand-2);font-weight:600}
.prose .callout{background:var(--c-mint);border-left:3px solid var(--c-brand-2);border-radius:0 var(--r-card) var(--r-card) 0;padding:1rem 1.25rem;font-size:var(--fs-small)}
.prose .callout b{color:var(--c-brand)}
.prose figure{margin:var(--s-4) 0}
.prose figcaption{font-size:.8125rem;color:var(--c-muted);margin-top:.5rem}
.prose table{border-collapse:collapse;width:100%;font-size:var(--fs-small);background:var(--c-white)}
.prose th,.prose td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--c-line);vertical-align:top}
.prose th{font-weight:600;color:var(--c-ink);background:var(--c-mint)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--r-card)}
.download{background:var(--c-brand);color:var(--c-ink-on-dark);border-radius:var(--r-card);padding:clamp(1.25rem,2.5vw,2rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-5);align-items:center;margin:var(--s-6) 0}
.download h3{color:var(--c-white)}
.download p{color:var(--c-mint-on-dark);font-size:var(--fs-small)}
.download .form{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-3)}
.download .form .btn{background:var(--c-white);color:var(--c-brand);border-color:var(--c-white);white-space:nowrap}
.download .form .btn:hover{background:var(--c-mint);border-color:var(--c-mint)}
.download .field label{color:var(--c-white)}
.download .swap{align-self:start}
@media (max-width:767px){.download{grid-template-columns:minmax(0,1fr)}.download .form{grid-template-columns:minmax(0,1fr)}}
.author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-5);align-items:center;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);padding:1.5rem;margin-top:var(--s-7)}
.author .ph{width:96px}
@media (max-width:480px){.author{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   Kontakt: dane
   ========================================================================== */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.contact-list li{display:flex;gap:.75rem;align-items:center}
.contact-list svg{width:20px;height:20px;color:var(--c-brand-2);flex:none}
.contact-list a{text-decoration:none;font-weight:500;color:var(--c-ink)}
.contact-list a:hover{color:var(--c-brand)}
.contact-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);align-items:center}
.contact-card h3{margin-bottom:.35rem}
.contact-card p{line-height:1.45}
@media (max-width:420px){.contact-card{grid-template-columns:72px minmax(0,1fr);gap:var(--s-3)}}

/* ==========================================================================
   Stopka
   ========================================================================== */
.site-footer{background:var(--c-brand);color:var(--c-mint-on-dark);padding-block:var(--s-9) var(--s-6);font-size:var(--fs-small)}
.site-footer a{color:var(--c-white);text-decoration:none}
.footer-grid li a{display:inline-block;padding:.25rem 0}
.site-footer a:hover{color:var(--c-gold)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s-7) var(--s-6)}
.footer-grid h4{color:var(--c-white);font:600 .8125rem/1.3 var(--f-body);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s-3)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer-brand{display:grid;gap:var(--s-3);align-content:start}
.footer-brand .logo{color:var(--c-white);font-size:1.6rem}
.footer-brand .logo::after{background:var(--c-gold)}
.footer-brand p{max-width:30ch}
.sigil{width:44px;height:44px;border:1.5px solid rgba(255,255,255,.4);border-radius:8px;display:grid;place-items:center;font:600 1rem var(--f-head);color:var(--c-white);letter-spacing:.02em}
.footer-bottom{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);justify-content:space-between;font-size:.8125rem}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   Ruch: subtelne wejście sekcji, wyłączone przy reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .reveal.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Druk */
@media print{.proto,.site-header,.nav-toggle{display:none!important}.section{padding-block:1.5rem}}

.download .dl-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.download .dl-form .dl-check,.download .dl-form .btn{grid-column:1/-1}
.download .dl-check{color:var(--c-mint-on-dark)}
.download .dl-check a{color:var(--c-white)}
.download .dl-form .btn{justify-self:start}
@media (max-width:767px){.download .dl-form{grid-template-columns:minmax(0,1fr)}}
.download-stack{grid-template-columns:minmax(0,1fr)}
.download .dl-check span{color:var(--c-mint-on-dark)}
.download .dl-form input[type=text],.download .dl-form input[type=email]{width:100%}
.proto a.proto-back{background:var(--c-gold);color:var(--c-ink,#252927);padding:.2rem .7rem;border-radius:999px;font-weight:600;text-decoration:none}
.proto a.proto-back:hover{background:#fff;color:var(--c-brand)}
/* poprawki po recenzji 2 */
.is-sticky{position:sticky;top:calc(4.5rem + var(--s-5));align-self:start}
@media (max-width:767px){.is-sticky{position:static}}
.article>aside{align-self:stretch}
.article .prose{max-width:none}
.toc .btn-primary,.toc .btn-primary:hover{color:var(--c-white)}
/* ilustracje odręczne */
.illu{display:block;height:auto;max-width:100%;pointer-events:none;user-select:none}
.sec-head-illu{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-7);align-items:center;margin-bottom:var(--sec-gap)}
.sec-head-illu .sec-head{margin-bottom:0}
.illu--side{width:clamp(200px,24vw,320px)}
.illu--narrow{width:clamp(130px,14vw,190px)}
.illu--wide{width:min(560px,100%);margin:calc(var(--sec-gap)*-.35) 0 var(--sec-gap)}
.illu--top{width:clamp(96px,10vw,132px);margin-bottom:var(--s-2)}
@media (max-width:767px){
  .sec-head-illu{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .sec-head-illu .illu{order:-1;width:170px}
  .sec-head-illu .illu--narrow{width:110px}
}
/* nowe warianty ilustracji (odchudzenie 2026-10-02) */
.illu--card{width:auto;height:clamp(72px,8vw,92px);max-width:140px;object-fit:contain;object-position:left bottom;margin-bottom:var(--s-1)}
.illu--hero{width:clamp(200px,22vw,300px)}
.hero-illu{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-7);align-items:center}
.illu-box{aspect-ratio:16/9;background:var(--c-mint);border-radius:var(--r-card);display:grid;place-items:center;overflow:hidden}
.illu-box .illu{width:44%;height:auto}
.illu-box--wide{aspect-ratio:21/9}
.illu-box--wide .illu{width:26%}
.section--dark .illu-box{background:rgba(255,255,255,.08)}
@media (max-width:767px){
  .hero-illu{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .hero-illu .illu{order:-1;width:150px}
  .illu-box--wide{aspect-ratio:16/9}.illu-box--wide .illu{width:40%}
}
/* zastępnik brakującej ilustracji: ta sama skala, nazwa pliku (podmienia site.js) */
.illu-missing{display:grid;place-items:center;aspect-ratio:1/1;border:1.5px dashed var(--c-brand-2);border-radius:var(--r-card);background:rgba(232,240,235,.55);color:var(--c-brand);padding:.5rem;text-align:center;pointer-events:auto}
.illu-missing span{font:500 .68rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;overflow-wrap:anywhere}
.illu-missing.illu--card span{font-size:.56rem}
.section--dark .illu-missing,.download .illu-missing{border-color:rgba(247,245,240,.55);background:rgba(255,255,255,.07);color:var(--c-mint-on-dark)}
/* lista z kreską: lżejsza forma zamiast siatki kart */
.lined{list-style:none;padding:0;margin:0;display:grid;gap:0}
.lined>li{padding:var(--s-5) 0;border-top:1px solid var(--c-line);display:grid;gap:var(--s-2);align-content:start}
.lined>li p{color:var(--c-muted)}
.lined>li .btn-link{justify-self:start;margin-top:var(--s-1)}
.lined--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}
@media (max-width:767px){.lined--2{grid-template-columns:minmax(0,1fr)}}
/* zdjęcia (w miejsce placeholderów .ph) */
img.photo{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--r-card);background:var(--c-mint)}
img.photo.ph--round{border-radius:50%}
.hero-media img.photo{box-shadow:var(--sh-card)}
.author img.photo{width:96px}
img.avatar--photo{object-fit:cover;padding:0}
/* ilustracje: rozmiar w ramce (szerokość i wysokość), żeby pionowe i poziome grafiki miały podobną skalę */
.illu--side,.illu--side.illu--narrow{width:auto;height:auto;max-width:min(320px,26vw);max-height:min(290px,24vw)}
.illu--hero{width:auto;height:auto;max-width:min(300px,24vw);max-height:min(290px,24vw)}
.illu--top{width:auto;height:auto;max-width:132px;max-height:112px}
@media (max-width:767px){
  .sec-head-illu .illu,.sec-head-illu .illu--narrow{width:auto;max-width:200px;max-height:170px}
  .illu--hero{max-width:220px;max-height:200px}
}
/* ilustracje wpisów w ramce: mieszczą się w szerokości i wysokości ramki */
.illu-box .illu{width:auto;height:auto;max-width:44%;max-height:78%}
.illu-box--wide .illu{max-width:30%;max-height:80%}

/* ===========================================================
   Dodatki strony na Astro (formularze, wpisy w Markdown, dostępność)
   =========================================================== */
.skip-link{position:absolute;left:-9999px;top:.5rem;z-index:100;background:var(--c-brand);color:#fff;padding:.5rem 1rem;border-radius:var(--r-card)}
.skip-link:focus{left:.5rem}
.link-button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.15em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile{min-height:65px}
.form-blad{background:#FBEAEA;color:#7A1F1F;border-left:3px solid #B33A3A;padding:.75rem 1rem;border-radius:0 var(--r-card) var(--r-card) 0;font-size:var(--fs-small)}
.download .form-blad{grid-column:1/-1}
.download .dl-info{grid-column:1/-1;color:var(--c-mint-on-dark)}
.download .dl-info a{color:var(--c-white)}
.download .turnstile{grid-column:1/-1}
/* treść wpisu z Markdown */
.wpis-tresc{display:contents}
.wpis-tresc > p:first-child{font-size:var(--fs-lead);line-height:1.5;color:var(--c-text)}
.prose blockquote{background:var(--c-mint);border-left:3px solid var(--c-brand-2);border-radius:0 var(--r-card) var(--r-card) 0;padding:1rem 1.25rem;font-size:var(--fs-small);margin:0}
.prose blockquote strong{color:var(--c-brand)}
.prose table{display:block;overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--r-card)}
.prose td:first-child{width:34%}
/* zdjęcia z <Picture>: element picture nie zmienia układu */
picture{display:contents}
picture>source{display:none}