/* ══ TREŚCI (podstrony usługowe, poradnik, artykuły) ══
   Arkusz dodatkowy do pakietu SEO (MALINSKI.AI, 2026-10).
   Ładować PO sections.css i PRZED motion.css. Korzysta wyłącznie z tokenów
   z tokens.css - żadnych nowych kolorów, fontów ani promieni. */

/* ── NAWIGACJA: grupa "Oferta" z podmenu (desktop) ── */

.nav__grupa { position: relative; }

.nav__pod {
  position: absolute;
  top: 100%;
  left: calc(var(--s-4) * -1);
  z-index: var(--z-header);
  min-width: 15rem;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  background: color-mix(in oklab, var(--c-bg) 94%, transparent);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out),
              visibility 0s linear var(--d-fast);
}

.nav__grupa:focus-within .nav__pod,
.nav__grupa.is-open .nav__pod { /* is-open: dotyk (podmenu.js) */
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* :hover tylko dla urządzeń z myszką - na dotyku stuknięcie obsługuje podmenu.js */
@media (hover: hover) {
  .nav__grupa:hover .nav__pod {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}

/* Esc: zamknięcie wymuszone mimo :hover / :focus-within (WCAG 1.4.13) */
.nav__grupa.is-zamkniete .nav__pod {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.nav__pod a {
  display: block;
  padding: var(--s-2) var(--s-3);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  border-radius: var(--r-sm);
  transition: color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.nav__pod a:hover,
.nav__pod a[aria-current='page'] { color: var(--c-text); background: var(--c-surface); }

/* strzałka przy "Oferta" */
.nav__link--pod::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: var(--s-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
/* aktywna pozycja z podmenu - kreska jak w .nav__link[aria-current] */
.nav__link--pod[aria-current='page']::after { position: static; height: 5px; background: none; }

/* menu mobilne: podstrony oferty mniejszym stopniem */
.menu__pod {
  display: grid;
  justify-items: end;
  gap: var(--s-3);
  margin-top: calc(var(--s-6) * -1);
}
.menu__pod a {
  color: var(--c-text-2);
  font-size: var(--t-body-lg);
}
.menu__pod a[aria-current='page'] { color: var(--c-text); }

/* ── OKRUSZKI ── */

.okruszki ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  color: var(--c-text-muted);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.okruszki li + li::before {
  content: '/';
  margin-right: var(--s-2);
  color: var(--c-border-hover);
}

.okruszki a { transition: color var(--d-fast) var(--ease-out); }
.okruszki a:hover { color: var(--c-text); }
.okruszki [aria-current='page'] { color: var(--c-text-2); }

/* okruszki w hero ze zdjęciem */
.hero__tresc .okruszki ol { justify-content: center; }
@media (min-width: 940px) {
  .hero__tresc .okruszki ol { justify-content: flex-start; }
}

/* ── HERO: nagłówek SEO dłuższy niż hasło ── */

.hero__nadtytul {
  color: var(--c-brand);
  font-family: var(--f-display);
  font-size: var(--t-body-lg);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* poniżej 940 mniejszy i szerszy: przy 2.5rem / 16ch nagłówek szedł w 4-5 wierszach, na tablecie z pustymi bokami */
.hero__title--seo {
  font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.75rem);
  max-width: 22ch;
}
@media (min-width: 940px) {
  .hero__title--seo { font-size: var(--t-display-lg); max-width: 18ch; }
}

/* ── NAGŁÓWEK STRONY BEZ ZDJĘCIA (poradnik, artykuły, strony wstrzymane) ── */

.glowa {
  padding-block: clamp(var(--s-12), 8vw, var(--s-20)) var(--gap-glowa);
}

.glowa__uklad {
  display: grid;
  gap: var(--s-6);
}

.glowa__tytul {
  font-size: var(--t-h1);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  max-width: 22ch;
}

.glowa__lead {
  max-width: var(--w-text);
  color: var(--c-text-2);
  font-size: var(--t-body-lg);
  line-height: 1.55;
}

/* hub poradnika: tytuł z lewej, lead z prawej przy linii bazowej tytułu - bez pustej prawej połowy */
@media (min-width: 940px) {
  .glowa:not(.glowa--artykul) .glowa__uklad {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: var(--gap-kol);
    align-items: end;
  }
  .glowa:not(.glowa--artykul) .okruszki { grid-column: 1 / -1; }
}

.glowa__meta {
  color: var(--c-text-muted);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* artykuł: nagłówek w kolumnie tekstu, tytuł bez wersalików (długie frazy) */
.glowa--artykul .glowa__tytul {
  font-size: var(--t-h1);
  font-weight: var(--w-semi);
  line-height: var(--lh-head);
  text-transform: none;
  max-width: none;
}

/* ── PROZA TREŚCI ── */

.tresc {
  max-width: var(--w-text);
  color: var(--c-text-2);
}

.tresc > * + *,
.tresc section > * + * { margin-top: var(--s-4); }

/* sekcje artykułu - odstęp i kreska jak przy .proza h2 */
.tresc > section + section,
.tresc > section + aside,
.tresc > aside + section { margin-top: clamp(var(--s-12), 6vw, var(--s-16)); }

.tresc h2 {
  color: var(--c-text);
  font-size: var(--t-h2);
}
.tresc h3 {
  margin-top: var(--s-8);
  color: var(--c-text);
  font-size: var(--t-h3);
  font-weight: var(--w-medium);
}
.tresc h2 + * { margin-top: var(--gap-h2); }
.tresc h3 + * { margin-top: var(--gap-h3); }

.tresc strong, .tresc dt, .tresc th { color: var(--c-text); }

.tresc a:not(.btn) {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: var(--c-border-hover);
  text-underline-offset: 0.2em;
  transition: color var(--d-fast) var(--ease-out), text-decoration-color var(--d-fast) var(--ease-out);
}
.tresc a:not(.btn):hover { color: var(--c-brand); text-decoration-color: var(--c-brand); }

/* odwołanie do źródła [1] - bez podkreślenia, cyfry równe */
.tresc a[href='#zrodla'] {
  text-decoration: none;
  color: var(--c-brand);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.15em;
}

.tresc cite { font-style: italic; }

/* listy: kwadrat marki jak .lista-punkty */
.tresc ul { display: grid; gap: var(--s-3); }
.tresc ul > li { position: relative; padding-left: var(--s-6); }
.tresc ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.5em * var(--lh-body));
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--c-brand);
}

/* listy numerowane: cyfra marki */
.tresc ol { display: grid; gap: var(--s-3); counter-reset: nr; }
.tresc ol > li { position: relative; padding-left: var(--s-10); counter-increment: nr; }
.tresc ol > li::before {
  content: counter(nr, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-brand);
  font-family: var(--f-display);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}

/* lista definicji jako tabela dwukolumnowa */
.tresc dl {
  display: grid;
  border-top: 1px solid var(--c-border);
}
.tresc dt {
  padding-top: var(--s-4);
  font-family: var(--f-display);
  font-size: var(--t-body-lg);
  font-weight: var(--w-medium);
}
.tresc dd {
  margin: 0;
  padding: var(--gap-etykieta) 0 var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
@media (min-width: 760px) {
  .tresc dl { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); column-gap: var(--s-8); }
  .tresc dt { padding-block: var(--s-4); border-bottom: 1px solid var(--c-border); }
  .tresc dd { padding-block: var(--s-4); }
}

.tresc blockquote {
  padding-left: var(--s-6);
  border-left: 2px solid var(--c-brand);
  color: var(--c-text);
  font-size: var(--t-body-lg);
}

.tresc .note,
.tresc .lead {
  color: var(--c-text);
  font-size: var(--t-body-lg);
}

/* ── TABELE ── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}

.tresc table,
.table-wrap table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.tresc caption {
  padding: var(--s-4);
  color: var(--c-text-muted);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-align: left;
  text-transform: uppercase;
  caption-side: top;
}

.tresc th,
.tresc td {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}

.tresc thead th {
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: var(--w-medium);
}

/* ── W SKRÓCIE, SPIS TREŚCI ── */

.tldr,
.toc {
  padding: var(--pad-card);
  background-color: var(--c-szklo);
  background-image: var(--grad-szklo);
  border: 1px solid var(--c-szklo-krawedz);
  border-radius: var(--r-lg);
}

/* kreska marki u góry, wewnątrz promienia - boczny pasek na zaokrąglonej karcie gnął się na rogach */
.tldr { box-shadow: inset 0 2px 0 var(--c-brand), var(--cien-szklo); }

.tldr h2,
.toc h2 {
  color: var(--c-text-muted);
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tldr ul,
.toc ol { margin-top: var(--s-4); }

.toc ol { gap: var(--s-2); }
.toc a { text-decoration: none !important; }

/* ── CHECKLISTA ── */

/* sam znak "check" w kolorze marki (jak kwadraty list), środek na osi pierwszej linii */
.tresc .checklist > li { padding-left: var(--s-8); }
.tresc .checklist > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.5em * var(--lh-body));
  width: 1.125em;
  height: 1.125em;
  transform: translateY(-50%);
  background: var(--c-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='square'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='square'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── KORZYŚCI / W ZESTAWIE (wariant listy .wzestawie z oferta.html) ── */

.lista-kreska { list-style: none; }
.lista-kreska > li { position: relative; padding-left: var(--pad-card); color: var(--c-text-2); }
.lista-kreska > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--kreska, var(--c-brand));
}
.lista-kreska strong {
  display: block;
  margin-bottom: var(--gap-etykieta);
  color: var(--c-text);
  font-weight: var(--w-medium);
}
.tor--oferta .lista-kreska { --kreska: var(--neon-oferta); }
.tor--onas .lista-kreska   { --kreska: var(--neon-onas); }

/* ── KROKI WSPÓŁPRACY: oś procesu ── */
/* węzeł = kwadrat jak piksel / kaseta; oś przechodzi z czerwieni marki w neon oferty (kierunek czerwień -> niebieski) */

.tresc .kroki {
  --wezel: 14px;                                  /* bok kwadratu na osi */
  --numer: clamp(2.5rem, 4vw, 3.5rem);            /* stopień numeru kroku */
  display: grid;
  gap: var(--s-12);
  counter-reset: krok;
  list-style: none;
}

.tresc .kroki > li {
  --k:  var(--c-brand);
  --k2: color-mix(in oklab, var(--c-brand), var(--neon-oferta));
  position: relative;
  padding-left: calc(var(--wezel) + var(--s-8));
  counter-increment: krok;
}
.tresc .kroki > li:nth-child(2) { --k: color-mix(in oklab, var(--c-brand), var(--neon-oferta)); --k2: var(--neon-oferta); }
.tresc .kroki > li:nth-child(n+3) { --k: var(--neon-oferta); --k2: var(--neon-oferta); }

/* węzeł - środek na osi numeru */
.tresc .kroki > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--numer) / 2);
  width: var(--wezel);
  height: var(--wezel);
  transform: translateY(-50%);
  background: var(--c-bg);
  border: 2px solid var(--k);
  box-shadow: 0 0 14px 0 color-mix(in oklab, var(--k) 55%, transparent);
}

/* odcinek osi do następnego węzła (mobile: w dół) */
.tresc .kroki > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--wezel) / 2 - 1px);
  top: calc(var(--numer) / 2 + var(--wezel) / 2);
  height: calc(100% + var(--s-12) - var(--wezel));
  width: 2px;
  background: linear-gradient(to bottom, var(--k), var(--k2));
  opacity: 0.8;
}

/* numer kroku z licznika - markup zostaje: h3 + p */
.tresc .kroki h3::before {
  content: counter(krok, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s-4);
  color: var(--k);
  font-size: var(--numer);
  font-weight: var(--w-semi);
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tresc .kroki h3 { margin-top: 0; font-size: var(--t-h3); font-weight: var(--w-medium); }   /* bez s-8 z .tresc h3 - numer musi siedzieć na osi węzła */
.tresc .kroki p  { margin-top: var(--gap-h3); max-width: 32ch; color: var(--c-text-2); }

/* od 940 px oś poziomo nad krokami */
@media (min-width: 940px) {
  .tresc .kroki {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--gap-kol);
  }
  .tresc .kroki > li { padding-left: 0; padding-top: calc(var(--wezel) + var(--s-8)); }
  .tresc .kroki > li::before { top: 0; transform: none; }
  .tresc .kroki > li:not(:last-child)::after {
    left: calc(var(--wezel) + var(--s-2));
    top: calc(var(--wezel) / 2 - 1px);
    width: calc(100% + var(--gap-kol) - var(--wezel) - var(--s-4));
    height: 2px;
    background: linear-gradient(to right, var(--k), var(--k2));
  }
}

/* ── WARIANTY (kafle z renderem) ── */

.warianty {
  display: grid;
  gap: var(--gap-siatka);
}
@media (min-width: 800px) {
  .warianty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wariant { gap: var(--s-4); padding: 0; overflow: hidden; }

.wariant__kadr {
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--c-surface);
  overflow: hidden;
}
.wariant__kadr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--d-normal) var(--ease-out);
}
@media (hover: hover) {
  .wariant:hover .wariant__kadr img { transform: scale(1.04); }
}

.wariant__tresc { display: grid; gap: var(--s-3); padding: 0 var(--pad-card) var(--pad-card); }
.wariant__tresc h3 { font-size: var(--t-h3); }
.wariant__tresc p { color: var(--c-text-2); }
.wariant__tresc a { text-decoration: underline; text-decoration-color: var(--c-border-hover); text-underline-offset: 0.2em; }
.wariant__tresc a:hover { color: var(--c-brand); }
.wariant .note { color: var(--c-text-muted); font-size: var(--t-sm); }
/* adnotacja o cenach pod kartami wariantów */
.warianty__cennik { margin-top: var(--s-6); color: var(--c-text-muted); font-size: var(--t-sm); max-width: 70ch; }

/* specyfikacja wariantu: etykieta wersalikami + wartość */
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.specs > div { display: grid; gap: var(--s-1); }
.specs dt {
  color: var(--c-text-muted);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.specs dd { margin: 0; color: var(--c-text); }

/* ── KARTY POWIĄZANYCH TREŚCI (hub poradnika, "Czytaj też") ── */

.karty {
  display: grid;
  gap: var(--gap-siatka);
}
@media (min-width: 640px)  { .karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .karty--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.karta {
  position: relative;
  gap: var(--s-3);
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.karta:hover { border-color: var(--c-border-kontrolka-hover); transform: translateY(var(--lift)); }

.karta h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-medium);
  line-height: var(--lh-head);
}
.karta h3 a::after { content: ''; position: absolute; inset: 0; }   /* cała karta klikalna */
.karta h3 a:focus-visible { outline: none; }
.karta:has(a:focus-visible) { outline: 2px solid var(--c-brand); outline-offset: 3px; }
.karta p { color: var(--c-text-2); font-size: var(--t-sm); }

.karta--wyrozniona { box-shadow: inset 0 2px 0 var(--c-brand), var(--cien-szklo); }
@media (min-width: 640px) { .karta--wyrozniona { grid-column: 1 / -1; } }
.karta--wyrozniona h3 { font-size: var(--t-h2); }

/* "Czytaj też" w kolumnie artykułu - prosta lista linków ze strzałką */
.czytaj ul { gap: 0; border-top: 1px solid var(--c-border); }
.czytaj ul > li { padding: 0; border-bottom: 1px solid var(--c-border); }
.czytaj ul > li::before { display: none; }
.czytaj a {
  display: flex !important;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-family: var(--f-display);
  font-size: var(--t-body-lg);
  text-decoration: none !important;
}
.czytaj a::after {
  content: '';
  flex: none;
  align-self: center;
  width: 1.125em;
  height: 1.125em;
  background: var(--c-brand);
  -webkit-mask: var(--ik-ukos) center / contain no-repeat;
          mask: var(--ik-ukos) center / contain no-repeat;
  transition: transform var(--d-fast) var(--ease-out);
}
.czytaj a:hover::after { transform: translate(2px, -2px); }

/* ── ŹRÓDŁA ── */

.zrodla h2 { font-size: var(--t-h3); }
.zrodla ol { font-size: var(--t-sm); gap: var(--s-2); }
.zrodla ol > li { padding-left: var(--s-8); }
.zrodla ol > li::before { content: '[' counter(nr) ']'; font-family: var(--f-body); font-size: var(--t-xs); top: 0.15em; }
.zrodla a { word-break: break-word; }

/* ── FAQ w treści (pytanie jest h3 wewnątrz summary) ── */

.faq__q h3 {
  font: inherit;
  letter-spacing: inherit;
  text-wrap: balance;
}
.faq__a > * + * { margin-top: var(--s-3); }
.tresc .faq__lista { margin-top: var(--s-6); }
.tresc .faq__q { color: var(--c-text); font-size: var(--t-body-lg); padding-block: var(--s-4); }
.tresc .faq__q:hover { color: var(--c-brand); }
.tresc .faq__a { padding-bottom: var(--s-4); }

/* ── CTA: dłuższe hasło i zdanie pod nim ── */

.cta__tytul--dlugi { font-size: var(--t-h1); line-height: var(--lh-head); }

.cta__opis {
  margin-top: var(--s-6);
  max-width: 44ch;
  color: #fff;   /* 86% bieli na czerwieni dawało 3,8:1 */
  font-size: var(--t-body-lg);
}

/* ── DANE FIRMY, REALIZACJE, POBRANIA ── */

.tresc .dane dl { border-top: 0; }

.tresc .case-card {
  padding: var(--pad-card);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.tresc .downloads > li::before {
  width: 1em;
  height: 1em;
  -webkit-mask: var(--ik-dol) center / contain no-repeat;
          mask: var(--ik-dol) center / contain no-repeat;
}

/* ── PLACEHOLDERY DLA DEVELOPERA (do usunięcia przed publikacją) ── */

mark.todo {
  padding: 0 0.3em;
  background: oklch(0.85 0.15 90);
  color: var(--c-bg);
  border-radius: var(--r-sm);
}

/* ── SEKCJA Z TREŚCIĄ OBOK KADRU (wariant .wstep__uklad) ── */
.wstep__uklad .tresc { max-width: none; }

/* ── HERO: dłuższy lead pakietu SEO ── */
.hero__opis--dlugi { max-width: 52ch; font-size: var(--t-body); }
@media (min-width: 940px) { .hero__opis--dlugi { font-size: var(--t-body-lg); } }

/* ── ZASTOSOWANIA: pozycja z linkiem do podstrony ── */
.zast__link { transition: color var(--d-fast) var(--ease-out); }
.zast__link:hover { color: var(--c-brand); }
.zast__link .zast__dodatkowe { text-decoration: underline; text-decoration-color: var(--c-border-hover); text-underline-offset: 0.2em; }

/* ── STOPKA: czwarta kolumna (usługi) i adres ── */
.footer__adres { font-style: normal; }
.footer__adres li { color: var(--c-text-2); font-size: var(--t-sm); }
@media (min-width: 560px) and (max-width: 759px) {
  .footer__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .footer__grid--4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-12); }
}

/* ── siatki wewnątrz prozy: wracają do układu z layout.css ── */
.tresc:has(> .siatka-2, > .siatka-4, > .karty, > .kroki) { max-width: none; }
.tresc .siatka-2,
.tresc .siatka-4 { display: flex; }
.tresc .lista-kreska > li { padding-left: var(--pad-card); }
.tresc .lista-kreska > li::before {
  top: 0;
  width: 2px;
  height: auto;
  transform: none;
  background: var(--kreska, var(--c-brand));
}

/* ── poprawki po przeglądzie wizualnym ── */
.tresc > * + section,
.tresc > * + aside { margin-top: clamp(var(--s-12), 6vw, var(--s-16)); }
.tldr ul { display: grid; gap: var(--s-3); color: var(--c-text-2); }
.tldr li { position: relative; padding-left: var(--s-6); }
.tldr li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.5em * var(--lh-body));
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--c-brand);
}
.glowa--artykul + .artykul { padding-top: 0; }
/* dłuższe etykiety CTA z pakietu SEO - zawijają się zamiast rozpychać stronę */
.cta__btn { white-space: normal; text-align: center; line-height: 1.3; }

/* ── ODSTĘP DO PRZYCISKU W PROZIE (token --gap-akcja) ── */
.tresc > p:has(> .btn) { margin-top: var(--gap-akcja); }

/* ── ADNOTACJA: warunki pod listą/tabelą - osobny blok z lekkim tłem marki, nie kolejny akapit ── */
.tresc > .adnotacja {
  margin-top: var(--gap-akcja);
  max-width: var(--w-text);
  padding: var(--s-4) var(--s-6);
  background: color-mix(in oklab, var(--c-brand) 9%, var(--c-bg));
  border: 1px solid color-mix(in oklab, var(--c-brand) 28%, transparent);
  border-radius: var(--r);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: 1.6;
}