/* 06 Sprawy cywilne i gospodarcze — C2 145 06 Sprawy cywilne + Zaufanie C2 144-03 (wartości 1:1).
   Warianty prototypu jak w ustawieniach domyślnych: otwarcie A, drugie CTA otwarcia „B” (stonowany odnośnik),
   moduł „Twoja sytuacja” po Zaufaniu, przerywnik z hasłem 3, moduł publikacji ukryty (pub = „ukryty”).
   Margines poziomy całej strony (L.px prototypu): komputer max(76 px, (szerokość − 1288) / 2) — moduły o stałej
   szerokości treści 1136 px (bez zmian wg decyzji właściciela 2026-11-05), telefon 20 px (16 px poniżej 370 px). Odstęp sekcji: 112 px od 1280 px, 96 px 1024–1279, 52 px telefon.
   Telefon w niskim oknie (< 720 px wysokości) — niższy pas akwareli otwarcia i mniejsze hasło (jak prototyp).
   Akordeony (przykłady, opisy etapów, pytania): akordeon.js; zakładki „Twoja sytuacja” (telefon): sytuacje.js. */
.c2-sp6 { --sp6-px: 20px; --sp6-y: 52px; }
@media (width < 23.125em) { .c2-sp6 { --sp6-px: 16px; } }
/* komputer: wcięcie modułów prototypu max(76 px, (w − 1288) / 2) — stała szerokość treści 1136 px (bez zmian wg decyzji 2026-11-05) */
@media (min-width: 64em) { .c2-sp6 { --sp6-px: max(76px, round(calc((100cqi - 1288px) / 2), 1px)); --sp6-y: 96px; } }
@media (min-width: 80em) { .c2-sp6 { --sp6-y: 112px; } }

/* etykieta (600 13 px, .12em) i H2 sekcji (M 29 px, D 40 / 46 px) */
.c2-sp6-label { font: 600 .8125rem var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-petrol); }
.c2-sp6-label, .c2-sp6-side__lab { text-wrap: wrap; }   /* jak w prototypie (etykiety nie są tam akapitami) */
.c2-sp6-h2 { font: 500 1.8125rem/1.08 var(--f-serif); letter-spacing: -.01em; color: var(--c-ink); }
@media (min-width: 64em) { .c2-sp6-h2 { font-size: 2.5rem; } }
@media (min-width: 80em) { .c2-sp6-h2 { font-size: 2.875rem; } }

/* ===================================================================== 01 OTWARCIE (wariant A)
   Telefon: pas akwareli (200 px; 180 px < 370 px; 150 px w oknie < 720 px) pod paskiem, treść nachodzi na pas.
   Komputer: akwarela przy prawej krawędzi (szer. min(1060, .5w) / .52w od 1280, wys. ×1,3 / ×0,87),
   kolumna tekstu zwężona o 80% szerokości obrazu; sekcja co najmniej clamp(680, .48w, 800). */
.c2-sp6-hero { position: relative; isolation: isolate; overflow: hidden; padding: 64px var(--sp6-px) 32px; background: var(--c-surface); }
.c2-sp6-hero__img {
  height: 200px;
  margin: 0 calc(-1 * var(--sp6-px));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
.c2-sp6-hero__img picture { display: contents; }
.c2 .c2-sp6-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 32%; }
.c2-sp6-hero__text { position: relative; margin-top: -34px; display: flex; flex-direction: column; }
.c2-sp6-hero .c2-sp-crumbs { display: none; }
.c2-sp6-hero__main { display: flex; flex-direction: column; }
.c2-sp6-hero__kicker { font: 600 .75rem var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-petrol); }
.c2-sp6-hero__h1 { margin-top: 8px; font: 500 2.25rem/1.06 var(--f-serif); letter-spacing: -.01em; color: var(--c-ink); }
.c2-sp6-hero__hook { margin-top: 10px; font: 500 1.3125rem/1.3 var(--f-serif); color: var(--c-petrol); text-wrap: balance; }
.c2-sp6-hero__lead { margin-top: 12px; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp6-hero__aud { margin-top: 8px; font: 400 .875rem/1.5 var(--f-sans); color: var(--c-muted); }
.c2-sp6-hero__cta { display: flex; flex-direction: column; }
.c2 .c2-sp6-btn {
  min-height: 54px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c-petrol);
  color: #FFFFFF;
  font: 600 1.0625rem var(--f-sans);
  text-decoration: none;
  border-radius: 0 10px 0 0;
}
@media (hover: hover) { .c2 .c2-sp6-btn:hover { background: var(--c-petrol-hover); color: #FFFFFF; } }
.c2 .c2-sp6-btn:focus-visible { outline-color: var(--c-ink); }
.c2-sp6-hero__cta .c2-sp6-btn { margin-top: 18px; }
.c2-sp6-hero__row { margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.c2 .c2-sp6-hero__k {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font: 400 .875rem var(--f-sans);
  color: var(--c-muted);
  text-decoration: underline;
  text-decoration-color: #AEBDBA;
  text-underline-offset: 5px;
}
@media (hover: hover) { .c2 .c2-sp6-hero__k:hover { color: var(--c-petrol); } }
.c2 .c2-sp6-tel { min-height: 44px; display: inline-flex; align-items: center; font: 600 .9375rem var(--f-sans); color: var(--c-ink); text-decoration: none; }
.c2-sp6-tel svg { flex: none; width: 20px; height: 20px; margin-right: 9px; }
.c2-sp6-hero__sit { position: relative; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.c2-sp6-hero__sitl { font: 600 .6875rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
/* jak grid 1fr 1fr prototypu (szerokości wg treści), a gdy treść się nie mieści (powiększony tekst, odstępy WCAG) —
   jeden pod drugim. Siatka prototypu przy 320 px wychodzi 6 px poza kolumnę tekstu; tu rząd może zająć do 8 px prawego
   marginesu poniżej 328 px, żeby oba przyciski zostały w jednym rzędzie jak w prototypie. */
.c2-sp6-hero__sitg { display: flex; flex-wrap: wrap; gap: 8px; margin-right: clamp(-8px, calc(100cqi - 328px), 0px); }
.c2 .c2-sp6-sit {
  min-height: 56px;
  padding: 8px 10px 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #AEBDBA;
  background: var(--c-on-hero);
  border-radius: 0 10px 0 0;
  font: 500 .9375rem/1.25 var(--f-sans);
  color: var(--c-ink);
  text-decoration: none;
  flex: 1 1 0;
  transition: border-color 200ms, background-color 200ms;
}
.c2-sp6-sit span {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-petrol);
  border-radius: 0 7px 0 0;
  color: var(--c-petrol);
  font-size: .875rem;
}
@media (hover: hover) { .c2 .c2-sp6-sit:hover { border-color: var(--c-petrol); background: var(--c-mint); color: var(--c-dark); } }
@media (width < 23.125em) {
  .c2-sp6-hero__img { height: 180px; }
  .c2-sp6-hero__h1 { font-size: 2.0625rem; }
}
@media (max-width: 63.99em) and (height < 45em) {
  .c2-sp6-hero__img { height: 150px; -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 78%); mask-image: linear-gradient(180deg, #000 56%, transparent 78%); }
  .c2 .c2-sp6-hero__img img { object-position: 62% 19%; }
  .c2-sp6-hero__text { margin-top: -50px; }
  .c2-sp6-hero__hook { font-size: 1.125rem; }
}
@media (min-width: 64em) {
  /* Duże ekrany (korekta 2026-11-10): prototyp (1440 px) liczy kolumnę tekstu od szerokości okna, a ilustrację
     przykleja do prawej krawędzi okna — powyżej 1440 px kolumna się zwężała (H1 689 → 440 px), „Twoja sytuacja”
     łamała się, a ilustracja odjeżdżała od tekstu. Ilustracja trzyma się ramy 1920 px (jak hero Specjalizacji),
     prawe wcięcie kolumny tekstu jest stałe (76 px jak przy 1440), więc kolumna nie maleje. Do 1440 px bez zmian. */
  .c2-sp6-hero { --img-w: min(1060px, round(50cqi, 1px)); --hero-off: max(0px, calc((100cqi - 1920px) / 2)); padding: 0; min-height: clamp(680px, round(48cqi, 1px), 800px); }
  .c2-sp6-hero__img {
    position: absolute;
    z-index: -1;
    top: 60px;
    right: var(--hero-off);
    width: var(--img-w);
    height: round(calc(var(--img-w) * 1.3), 1px);
    margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 58%, transparent 97%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 58%, transparent 97%);
    mask-composite: intersect;
  }
  .c2 .c2-sp6-hero__img img { object-position: 60% 38%; }
  .c2-sp6-hero__text { position: static; margin-top: 0; padding: calc(120px + var(--n87-top-extra, 0px)) 76px 76px var(--sp6-px); max-width: calc(100% - var(--hero-off) - round(var(--img-w) * .8, 1px)); }
  .c2-sp6-hero .c2-sp-crumbs { display: block; position: static; }
  .c2-sp6-hero .c2-sp-crumbs__sep, .c2-sp6-hero .c2-sp-crumbs__cur { display: list-item; }
  .c2-sp6-hero__main { margin-top: 28px; }
  .c2-sp6-hero__kicker { font-size: .8125rem; }
  .c2-sp6-hero__h1 { margin-top: 12px; font-size: 3.375rem; line-height: 1.04; letter-spacing: -.015em; }
  .c2-sp6-hero__hook { margin-top: 18px; max-width: 580px; font-size: 1.5rem; line-height: 1.25; }
  .c2-sp6-hero__lead { margin-top: 20px; max-width: 35rem; font-size: 1.125rem; }
  .c2-sp6-hero__aud { margin-top: 10px; font-size: .9375rem; line-height: 1.55; }
  .c2-sp6-hero__cta { margin-top: 28px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
  .c2-sp6-hero__cta .c2-sp6-btn { margin-top: 0; min-height: 58px; display: inline-flex; border-radius: 0 12px 0 0; }
  .c2-sp6-hero__row { display: contents; }
  .c2 .c2-sp6-hero__k { font-size: .9375rem; }
  .c2 .c2-sp6-hero__row .c2-sp6-tel { display: none; }
  .c2-sp6-hero__sit { position: static; margin-top: 28px; padding-top: 18px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; border-top: 1px solid var(--c-line-light); container: sp6sit / inline-size; }
  .c2-sp6-hero__sitl { margin-right: 6px; font-size: .75rem; }
  /* etykieta i oba przyciski w jednym rzędzie, gdy się mieszczą (≈ 652 px); węziej — etykieta nad przyciskami,
     przyciski obok siebie, a dopiero gdy i one się nie mieszczą — jeden pod drugim */
  @container sp6sit (width < 41rem) { .c2-sp6-hero__sitl { flex-basis: 100%; margin-right: 0; } }
  .c2-sp6-hero__sitg { display: contents; }
  .c2 .c2-sp6-sit { flex: none; min-height: 52px; padding: 0 10px 0 20px; display: inline-flex; gap: 14px; border-radius: 0 12px 0 0; font-size: 1rem; line-height: normal; }
  .c2-sp6-sit span { width: 32px; height: 32px; border-radius: 0 8px 0 0; font-size: .9375rem; }
}
@media (min-width: 73.75em) { .c2-sp6-hero__img { top: 74px; } }
@media (min-width: 80em) {
  .c2-sp6-hero { --img-w: min(1060px, round(52cqi, 1px)); }
  .c2-sp6-hero__img { height: round(calc(var(--img-w) * .87), 1px); }
  .c2-sp6-hero__h1 { font-size: 4rem; }
  .c2-sp6-hero__hook { font-size: 1.75rem; }
}

/* ===================================================================== 02 ZAUFANIE (Zaufanie C2 144-03: kolumna 360 px od 1024 px) */
@media (min-width: 64em) {
  .c2-sp-k3--kolumna .c2-sp-k3__grid { grid-template-columns: 360px minmax(0, 1fr); gap: 0 64px; }
  .c2-sp-k3--kolumna .c2-sp-k3__aside { flex-direction: column; align-items: stretch; gap: 0; }
  .c2-sp-k3--kolumna .c2-sp-k3__portrait { width: 100%; border-radius: 0 80px 0 0; }
  .c2-sp-k3--kolumna .c2-sp-k3__who { padding-top: 20px; }
}

/* ===================================================================== 03 TWOJA SYTUACJA (dwie grupy; telefon: zakładki)
   Grupa (strona sporu): nagłówek, opis i przykładowe sytuacje. Telefon: widoczna grupa wybranej zakładki
   (sytuacje.js); bez JS obie grupy, bez zakładek.
   Stage 147 — każda sytuacja jest kartą (glebia.css: --c2-r-card, linia, cienie, akcent): numer, krótki tytuł
   i zwięzły opis; akordeon — na start wszystkie opisy zwinięte (decyzja właściciela), rozwijany pojedynczo albo
   wszystkie naraz („Rozwiń opisy”). Od 1280 px karty po dwie w grupie (numer nad tytułem), poniżej — jedna kolumna.
   Akcent górny (petrol / ciemny — kolor grupy) ma karta z widocznym opisem. */
.c2-sp6-syt { padding: var(--sp6-y) var(--sp6-px); background: var(--c-bg); }
.c2-sp6-syt__head { display: grid; grid-template-columns: 1fr; gap: 12px 24px; align-items: end; }
.c2-sp6-syt__title { display: flex; flex-direction: column; gap: 12px; }
.c2-sp6-syt__intro { max-width: 600px; font: 400 1.0625rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp6-tabs { display: none; }
.c2-js .c2-sp6-tabs { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.5px solid var(--c-petrol); }
.c2 .c2-sp6-tab {
  min-height: 52px;
  padding: 8px 6px;
  border: 0;
  background: #FFFFFF;
  color: var(--c-petrol);
  font: 600 .9375rem/1.25 var(--f-sans);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.c2 .c2-sp6-tab[aria-selected="true"] { background: var(--c-petrol); color: #FFFFFF; }
.c2-sp6-syt__cards { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 63.99em) { .c2-js .c2-sp6-side:not([data-wybrana]) { display: none; } }
.c2-sp6-side { display: flex; flex-direction: column; }
.c2-sp6-side--b { --acc: var(--c-dark); }
.c2-sp6-side__h { font: 500 1.375rem/1.15 var(--f-serif); color: var(--c-ink); outline: none; }
.c2-sp6-side__p { margin-top: 12px; font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp6-side__bar { margin-top: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.c2-sp6-side__lab { min-width: 0; overflow-wrap: anywhere; font: 600 .75rem var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.c2 .c2-sp6-side__all {
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 600 .8125rem var(--f-sans);
  color: var(--c-petrol);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.c2-sp6-ex { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--c2-card-gap); }
.c2-sp6-ex > li {
  --fx: 14px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--c2-card-line);
  border-radius: var(--c2-r-card);
  box-shadow: var(--c2-sh-rest);
  transition: border-color var(--c2-t) ease, box-shadow 320ms var(--c2-ease);
}
.c2-sp6-ex > li[data-open] { border-color: var(--c2-card-line-on); border-top-color: var(--acc, var(--c-petrol)); box-shadow: inset 0 1px 0 var(--acc, var(--c-petrol)), var(--c2-sh-rest); }
@media (hover: hover) and (pointer: fine) { .c2-sp6-ex > li:hover { border-color: var(--c2-card-line-on); box-shadow: var(--c2-sh-hover); } .c2-sp6-ex > li[data-open]:hover { border-top-color: var(--acc, var(--c-petrol)); box-shadow: inset 0 1px 0 var(--acc, var(--c-petrol)), var(--c2-sh-hover); } }
.c2 .c2-sp6-ex__btn {
  width: 100%;
  min-height: 54px;
  padding: 10px calc(var(--fx) - 4px) 10px var(--fx);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  column-gap: 6px;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--c2-r-card);
  text-align: left;
  cursor: pointer;
  color: var(--c-ink);
}
.c2 .c2-sp6-ex__btn:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .c2 .c2-sp6-ex__btn:hover { color: var(--c-petrol); } }
.c2-sp6-ex__n { font: 500 1.0625rem/1.3 var(--f-serif); color: var(--acc, var(--c-petrol)); }
.c2-sp6-ex__t { font: 600 1rem/1.35 var(--f-sans); }
.c2-sp6-ic { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font: 400 1.25rem var(--f-sans); color: var(--c-petrol); }
.c2-sp6-acc { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease), visibility .3s; }
.c2-sp6-acc > div { overflow: hidden; min-height: 0; }
.c2-js [data-akordeon-el]:not([data-open]) > .c2-sp6-acc { grid-template-rows: 0fr; visibility: hidden; }
.c2-sp6-ex__d { padding: 0 var(--fx) 14px calc(40px + var(--fx)); font: 400 .9375rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp6-strip {
  margin-top: 24px;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  background: #FFFFFF;
  border: 1px solid var(--c2-card-line);
  border-radius: var(--c2-r-card);
  box-shadow: var(--c2-sh-rest);
}
.c2-sp6-strip__t { font: 500 1.1875rem/1.3 var(--f-serif); color: var(--c-ink); text-wrap: wrap; }
.c2-sp6-strip__act { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.c2 .c2-sp6-strip__btn { flex: 1 1 auto; min-height: 50px; padding: 0 24px; font-size: 1rem; }
.c2 .c2-sp6-strip__act .c2-sp6-tel { font-size: 1rem; }
.c2-sp6-strip__act .c2-sp6-tel svg { width: 21px; height: 21px; }
@media (min-width: 64em) {
  .c2-sp6-syt__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .c2-js .c2-sp6-tabs { display: none; }
  .c2-sp6-syt__cards { margin-top: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .c2-sp6-side__h { font-size: 1.625rem; }
  .c2-sp6-ex > li { --fx: 16px; }
  .c2-sp6-strip { padding: 20px 24px; }
  .c2-sp6-strip__t { font-size: 1.375rem; }
  .c2-sp6-strip__act { width: auto; }
  .c2 .c2-sp6-strip__btn { flex: none; display: inline-flex; }
}

@media (min-width: 80em) {
  .c2-sp6-syt__cards { column-gap: 48px; }
  .c2-sp6-ex { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .c2-sp6-ex > li { --fx: 18px; }
  .c2 .c2-sp6-ex__btn { min-height: 0; padding: 16px calc(var(--fx) - 6px) 8px var(--fx); grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "n ic" "t t"; row-gap: 6px; align-items: start; transition: padding-bottom .3s var(--ease); }
  .c2-js .c2-sp6-ex > li:not([data-open]) .c2-sp6-ex__btn { padding-bottom: 16px; }   /* zwinięta karta: tytuł w równym odstępie od dołu */
  .c2-sp6-ex__n { grid-area: n; font-size: 1rem; line-height: 28px; }
  .c2-sp6-ex__t { grid-area: t; font-size: 1.0625rem; text-wrap: pretty; }
  .c2-sp6-ex__btn > .c2-sp6-ic { grid-area: ic; }
  .c2-sp6-ex__d { padding: 0 var(--fx) 18px; }
}

/* ===================================================================== 04 PRZERYWNIK (akwarela w odcieniach szarości + nakładka) */
.c2-sp6-pas { position: relative; overflow: hidden; height: 230px; background: var(--c-dark); }
.c2-sp6-pas__img { position: absolute; inset: 0; }
.c2-sp6-pas__img picture { display: contents; }
.c2 .c2-sp6-pas__img img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 20%; filter: grayscale(.2); }
.c2-sp6-pas__ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 40, 42, .55) 0, rgba(18, 40, 42, .92) 100%); }
.c2-sp6-pas__in { position: relative; height: 100%; padding: 0 var(--sp6-px); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.c2-sp6-pas__haslo { font: 500 1.625rem/1.18 var(--f-serif); letter-spacing: -.01em; color: #FFFFFF; text-wrap: balance; }
@media (min-width: 64em) {
  .c2-sp6-pas { height: 320px; }
  .c2 .c2-sp6-pas__img img { object-position: 50% 22%; }
  .c2-sp6-pas__ov { background: linear-gradient(90deg, rgba(18, 40, 42, .94) 0, rgba(18, 40, 42, .82) 44%, rgba(30, 86, 80, .38) 100%); }
  .c2-sp6-pas__in { gap: 18px; }
  .c2-sp6-pas__haslo { max-width: 760px; font-size: 2.5rem; }
}
@media (min-width: 80em) {
  .c2-sp6-pas { height: 360px; }
  .c2-sp6-pas__haslo { font-size: 2.875rem; }
}

/* ===================================================================== 05 PRZEBIEG SPORU (oś etapów; „Pełny opis etapu”) */
.c2-sp6-przebieg { padding: var(--sp6-y) var(--sp6-px); background: var(--c-surface); }
.c2-sp6-przebieg__head { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.c2-sp6-przebieg__intro { margin-top: 4px; max-width: 680px; font: 400 1.0625rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp6-tl { position: relative; margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.c2-sp6-tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--c-axis); }
.c2-sp6-tl > li { position: relative; padding: 0 0 26px 38px; display: flex; flex-direction: column; gap: 12px; }
.c2-sp6-tl > li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: #FFFFFF; border: 4px solid var(--c-petrol); }
.c2-sp6-tl__lab { font: 600 .75rem var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-petrol); }
.c2-sp6-tl__h { font: 500 1.375rem/1.15 var(--f-serif); color: var(--c-ink); }
.c2-sp6-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.c2-sp6-tags li { overflow-wrap: anywhere; padding: 5px 10px; background: var(--c-bg); border-radius: 0 8px 0 0; font: 500 .8125rem/1.3 var(--f-sans); color: var(--c-petrol); }
.c2-sp6-tl__d { font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
.c2 .c2-sp6-tl__btn {
  align-self: flex-start;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 600 .875rem var(--f-sans);
  color: var(--c-petrol);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (min-width: 64em) {
  .c2-sp6-tl { margin-top: 48px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .c2-sp6-tl::before { left: 0; right: 0; top: 8px; bottom: auto; width: auto; height: 2px; }
  .c2-sp6-tl > li { padding: 44px 0 0; }
  .c2-sp6-tl > li::before { top: 0; }
  .c2-sp6-tl__h { font-size: 1.625rem; }
}

/* ===================================================================== 06 WSPÓŁPRACA (kroki | dokumenty, konsultacja 450 zł) */
.c2-sp6-wsp { padding: var(--sp6-y) var(--sp6-px); background: var(--c-bg); }
.c2-sp6-wsp__in { display: grid; grid-template-columns: 1fr; gap: 32px 0; align-items: start; }
.c2-sp6-wsp__main { display: flex; flex-direction: column; min-width: 0; }
.c2-sp6-wsp .c2-sp6-h2 { margin-top: 12px; }
.c2-sp6-steps { margin-top: 28px; border-top: 1px solid var(--c-ink); }
.c2-sp6-steps > li { padding: 16px 0 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 16px; align-items: baseline; border-bottom: 1px solid var(--c-line); }
.c2-sp6-steps__n { font: 500 1.625rem/1 var(--f-serif); color: var(--c-petrol); }
.c2-sp6-steps__b { display: flex; flex-direction: column; gap: 6px; }
.c2-sp6-steps__t { font: 500 1.375rem/1.2 var(--f-serif); color: var(--c-ink); }
.c2-sp6-steps__d { font: 400 1rem/1.6 var(--f-sans); color: var(--c-body); }
.c2-sp6-wsp__cta { margin-top: 26px; display: flex; }
.c2-sp6-wsp__cta .c2-sp6-btn { width: 100%; padding: 0 30px; border-radius: 0 12px 0 0; }
.c2-sp6-wsp__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.c2-sp6-docs { padding: 18px 16px 8px; background: #FFFFFF; border-radius: 0 32px 0 0; }
.c2-sp6-docs__h { font: 500 1.5rem/1.2 var(--f-serif); color: var(--c-ink); }
.c2-sp6-docs__i { margin-top: 8px; font: 400 .9375rem/1.55 var(--f-sans); color: var(--c-muted); }
.c2-sp6-docs ul { margin-top: 14px; display: flex; flex-direction: column; border-top: 1px solid var(--c-line-light); }
.c2-sp6-docs li { padding: 10px 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; border-bottom: 1px solid var(--c-line-light); font: 400 .9375rem/1.5 var(--f-sans); color: var(--c-body); }
.c2-sp6-docs li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; background: var(--c-petrol); }
.c2-sp6-docs__n { margin-top: 12px; font: 400 .875rem/1.55 var(--f-sans); color: var(--c-muted); }
.c2-sp6-wsp .c2-sp-cena { background: var(--c-dark); }
@media (min-width: 64em) {
  .c2-sp6-wsp__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 24px; }
  .c2-sp6-steps > li { padding: 20px 0 22px; grid-template-columns: 64px minmax(0, 1fr); }
  .c2-sp6-steps__n { font-size: 2.125rem; }
  .c2-sp6-wsp__cta .c2-sp6-btn { width: auto; min-height: 58px; display: inline-flex; }
  .c2-sp6-docs { padding: 28px 30px 18px; }
}

/* ===================================================================== 07 WARTO WIEDZIEĆ (pytania; najwyżej jedna odpowiedź naraz — akordeon.js „jeden”, 01 otwarte od 768 px)
   Karta pytania (tło, linia, R1, cienie, akcent otwartej odpowiedzi): Głębia [data-c2-faq], Stage 147.
   Ilustracja: kadr z cienką linią i cieniem opakowania (.c2-kadr). */
.c2-sp6-faq { padding: var(--sp6-y) var(--sp6-px); background: var(--c-surface); }
.c2-sp6-faq__in { display: grid; grid-template-columns: 1fr; gap: 22px 0; align-items: start; }
.c2-sp6-faq__left { display: flex; flex-direction: column; gap: 20px; }
.c2-sp6-faq__head { display: flex; flex-direction: column; gap: 12px; }
.c2-sp6-faq__ill { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 0 28px 0 0; background: var(--c-bg); }
.c2-sp6-faq__ill picture { display: contents; }
.c2 .c2-sp6-faq__ill img { width: 100%; height: 100%; object-fit: cover; }
.c2-sp6-faq__list { display: flex; flex-direction: column; gap: var(--c2-card-gap); }
.c2-sp6-faq__item { --fx: 12px; }
.c2-sp6-faq__h { font: inherit; }
.c2 .c2-sp6-faq__btn {
  width: 100%;
  min-height: 72px;
  padding: 16px var(--fx);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--c-ink);
}
.c2-sp6-faq__n { font: 500 1.0625rem var(--f-serif); color: var(--c-petrol); }
.c2-sp6-faq__q { font: 600 1.125rem/1.35 var(--f-sans); text-wrap: pretty; }
.c2-sp6-faq__ic { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-ink); font: 400 1.375rem var(--f-sans); }
.c2-js .c2-sp6-faq__item:not([data-open]) .c2-sp6-faq__q { font-weight: 500; }
.c2-js .c2-sp6-faq__item:not([data-open]) .c2-sp6-faq__ic { border-color: var(--c-line); }
.c2-sp6-faq__item > .c2-sp6-acc { transition-duration: .32s; }
.c2-sp6-faq__a { padding: 0 var(--fx) 22px calc(40px + var(--fx)); display: flex; flex-direction: column; gap: 12px; }
.c2-sp6-faq__a p { font: 400 1rem/1.65 var(--f-sans); color: var(--c-body); }
@media (min-width: 64em) {
  .c2-sp6-faq__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px 24px; }
  .c2-sp6-faq__left { gap: 28px; }
  .c2-sp6-faq__kadr { max-width: 470px; }
  .c2-sp6-faq__ill { border-radius: 0 64px 0 0; }
  .c2-sp6-faq__item { --fx: 20px; }
  .c2 .c2-sp6-faq__btn { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 14px; }
  .c2-sp6-faq__q { font-size: 1.3125rem; }
  .c2-sp6-faq__a { padding: 0 calc(54px + var(--fx)) 22px; }
}

/* ===================================================================== 08 POWIĄZANE (karty z miniaturą) */
.c2-sp6-rel { padding: 48px var(--sp6-px); background: var(--c-bg); }
.c2-sp6-rel__h2 { font: 500 1.625rem/1.1 var(--f-serif); color: var(--c-ink); }
.c2-sp6-rel__grid { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 16px; }
.c2 .c2-sp6-rel__card {
  padding: 14px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  gap: 14px;   /* prototyp (wyrenderowany): na telefonie odstęp wierszy też 14 px */
  align-items: center;
  background: #FFFFFF;
  border-radius: 0 24px 0 0;
  color: var(--c-ink);
  text-decoration: none;
}
@media (hover: hover) { .c2 .c2-sp6-rel__card:hover { color: var(--c-petrol); } }
.c2-sp6-rel__img { grid-column: 1; grid-row: 1; }
.c2-sp6-rel__img picture { display: contents; }
.c2 .c2-sp6-rel__img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0 14px 0 0; }
.c2-sp6-rel__t { grid-column: 2; grid-row: 1; font: 500 1.1875rem/1.2 var(--f-serif); }
.c2-sp6-rel__arrow { grid-column: 3; grid-row: 1; font: 400 1.25rem var(--f-sans); color: var(--c-petrol); }
.c2-sp6-rel__d { grid-column: 1 / -1; grid-row: 2; font: 400 .9375rem/1.5 var(--f-sans); color: var(--c-body); text-wrap: pretty; }
@media (min-width: 64em) {
  .c2-sp6-rel { padding: 72px var(--sp6-px); }
  .c2-sp6-rel__h2 { font-size: 2rem; }
  .c2-sp6-rel__grid { grid-template-columns: 1fr 1fr; }
  .c2 .c2-sp6-rel__card { padding: 16px; grid-template-columns: 112px minmax(0, 1fr) 24px; gap: 8px 18px; }
  .c2-sp6-rel__img, .c2-sp6-rel__arrow { grid-row: 1 / span 2; }
  .c2-sp6-rel__t { font-size: 1.3125rem; }
  .c2-sp6-rel__d { grid-column: 2; }
}

/* ===================================================================== 09 KONTAKT (wspólny moduł; tu tło białe, margines strony, H2 29 / 40 / 46, odstęp kolumn 24 px) */
.c2-sp6.c2-sp-cta { padding: var(--sp6-y) var(--sp6-px); background: var(--c-surface); }
.c2-sp6 .c2-sp-cta__h2 { font-size: 1.8125rem; }
@media (min-width: 64em) {
  .c2-sp6 .c2-sp-cta__in { column-gap: 24px; }
  .c2-sp6 .c2-sp-cta__h2 { font-size: 2.5rem; }
}
@media (min-width: 80em) { .c2-sp6 .c2-sp-cta__h2 { font-size: 2.875rem; } }