/* ============================================================
   PODSTRONA: SANKCJA KREDYTU DARMOWEGO — landing sprzedażowy
   Reużywa global.css (utilities, .card, .krok-badge, .pill) oraz
   kontakt.css (formularz: .pole, .zgoda). Tu tylko układ
   specyficzny dla tej strony.
   ============================================================ */

/* Nagłówek sekcji na tej stronie. */
.skd-head{display:grid;gap:.9rem;max-width:62ch;margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.skd-head .u-lede{max-width:60ch}

/* ---- „Czym jest SKD" — tekst po lewej, zdjęcie po prawej ------ */
.skd-czym{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:stretch;
}
.skd-czym__text{align-self:center;display:grid;gap:clamp(1.4rem,3vw,2rem)}
.skd-czym__text .skd-head{margin-bottom:0}
.skd-czym__akapity{display:grid;gap:1.1rem}
.skd-czym__akapity .u-lede{max-width:56ch}
.skd-czym__foto{margin:0;min-height:0}
.skd-czym__foto img{
  display:block;width:100%;height:100%;min-height:360px;
  object-fit:cover;object-position:50% 28%;background:var(--bone);
}
/* Zdjęcia pionowe (polisolokaty, franki): przytnij do proporcji jak na SKD,
   ucinając górę — tak, żeby kobieta pozostała widoczna. */
.skd-czym .skd-czym__foto--kadr img{
  height:auto;min-height:0;aspect-ratio:11/8;object-position:50% 22%;
}
@media (max-width:900px){
  .skd-czym{grid-template-columns:1fr;gap:clamp(1.6rem,5vw,2.4rem)}
  .skd-czym__foto img{height:auto;min-height:0;aspect-ratio:3/2}
  .skd-czym .skd-czym__foto--kadr img{aspect-ratio:3/2}
}

/* ---- HERO: intro po lewej, formularz po prawej (u góry) ------- */
.skd-hero{padding-top:clamp(6.5rem,8vw,8rem)}
.skd-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}
@media (max-width:960px){ .skd-hero__grid{grid-template-columns:1fr} }

.skd-hero__intro{display:grid;gap:1.5rem;align-content:start}
/* Nadtytuł z pomarańczową kreską-akcentem (echo kreski z logo). */
.skd-hero__intro > .u-meta{display:inline-flex;align-items:center;gap:.7rem}
.skd-hero__intro > .u-meta::before{
  content:"";width:1.7rem;height:2px;background:var(--orange);flex:none;
}
.skd-hero__title{
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;
  font-weight:700;letter-spacing:-.03em;text-wrap:balance;
}
.skd-hero__title em{font-style:normal;color:var(--orange)}
.skd-hero__intro .u-lede{max-width:54ch}

/* Argumenty hero: każda pozycja z pomarańczową kreską (rośnie na hover),
   hairline ociepla się na hover — żywiej, ale spójnie z resztą. */
.skd-facts{display:grid;gap:0;margin-top:.3rem}
.skd-facts li{
  position:relative;
  padding:1.05rem 0 1.05rem 2.5rem;
  border-top:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.skd-facts li::before{
  content:"";position:absolute;left:0;top:1.6rem;
  width:1.7rem;height:2px;background:var(--orange);
  transition:width .35s var(--ease);
}
.skd-facts li:hover{border-color:rgba(244,81,30,.55)}
.skd-facts li:hover::before{width:2.3rem}
.skd-facts b{display:block;font-weight:650;font-size:1.05rem;letter-spacing:-.01em;margin-bottom:.15rem}
.skd-facts span{display:block;color:var(--ink-soft);font-size:.95rem;line-height:1.5}

.skd-hero__call{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem}
.skd-hero__note{font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* Karta formularza — beżowe tło + ramka, żeby wyróżnić się w hero. */
.skd-form{
  background:var(--bone);border:1px solid var(--line);
  padding:clamp(1.6rem,3vw,2.5rem);
  display:grid;gap:1.6rem;
}
.skd-form__head{display:grid;gap:.55rem}
.skd-form__title{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.skd-form__sub{font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.skd-form .zgloszenie__form{gap:1.35rem}

/* ---- Checklisty (przesłanki, dokumenty) ---------------------- */
.skd-list{display:grid;gap:0}
.skd-list--cols{grid-template-columns:1fr 1fr;gap:0 2.5rem}
@media (max-width:640px){ .skd-list--cols{grid-template-columns:1fr} }
.skd-list li{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  padding-block:.8rem;border-top:1px solid var(--line);line-height:1.5;
}
.skd-list li::before{
  content:"";width:1.35rem;height:1.35rem;margin-top:.1rem;
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.7 9 10 3.4' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;
  border-radius:50%;
}

/* ---- „Co sprawdzamy" — trójka z hairline'ami ------------------ */
.skd-trio{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (max-width:760px){ .skd-trio{grid-template-columns:1fr} }
.skd-trio__item{background:var(--bone);padding:clamp(1.6rem,2.6vw,2.3rem);display:grid;gap:.7rem;align-content:start}
.skd-trio__n{font-size:var(--fs-meta);letter-spacing:.16em;color:var(--ink-soft);font-weight:700}
.skd-trio__item h3{font-size:var(--fs-h3);font-weight:600}
.skd-trio__item p{color:var(--ink-soft);font-size:.95rem;line-height:1.55}

/* ---- Kroki procedury (używają .krok-badge z global.css) ------- */
.skd-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (max-width:900px){ .skd-steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .skd-steps{grid-template-columns:1fr} }
.skd-step{
  background:var(--paper);padding:clamp(1.6rem,2.5vw,2.3rem);
  display:flex;flex-direction:column;gap:1.1rem;min-height:14rem;
}
.skd-step__title{font-size:var(--fs-h3);font-weight:600;margin-top:auto}
.skd-step__text{font-size:.94rem;color:var(--ink-soft);line-height:1.55}

/* ---- Dokumenty: dwie kolumny --------------------------------- */
.skd-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
@media (max-width:760px){ .skd-cols{grid-template-columns:1fr} }
.skd-cols__title{font-size:var(--fs-h3);font-weight:600;margin-bottom:.6rem}
.skd-cols__note{font-size:.95rem;color:var(--ink-soft);line-height:1.55;margin-bottom:.4rem}

/* ---- FAQ — natywne <details>, minimalistycznie --------------- */
.faq{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,4vw,4rem);
  border-top:1px solid var(--line);align-items:start;
}
@media (max-width:760px){ .faq{grid-template-columns:1fr;max-width:74ch} }
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:clamp(1.05rem,2vw,1.55rem) 0;
  font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:600;letter-spacing:-.01em;line-height:1.3;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";font-weight:400;font-size:1.5rem;line-height:1;flex:none;transition:transform .35s var(--ease)}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__a{padding:0 0 1.5rem;max-width:70ch;color:var(--ink-soft);line-height:1.6}

/* ---- CTA końcowe --------------------------------------------- */
.skd-final{display:grid;gap:1.5rem;max-width:60ch;justify-items:start}
.skd-final__cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ---- Zastrzeżenie prawne ------------------------------------- */
.skd-disclaimer{font-size:.82rem;line-height:1.55;color:var(--ink-soft);max-width:54rem}

/* ---- Kroki „Jak prowadzimy sprawę" w wariancie miętowym --------
   Sekcja dostaje band--mint (jak „Jak to działa" na stronie głównej):
   pas mięty, komórki przezroczyste, ciemne hairline'y i tekst,
   czarne kółka .krok-badge. */
.band--mint .skd-steps{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.18)}
.band--mint .skd-step{background:transparent}

/* ---- „Zakres analizy / Co sprawdzamy" w wariancie pomarańczowym -----
   Sekcja dostaje band--orange (jak Aktualności): pas pomarańczu, biały
   tekst, przezroczyste kafle trio z ciemnymi hairline'ami. */
.band--orange .u-statement{color:var(--paper)}
.band--orange .skd-head .u-lede{color:var(--paper);opacity:.92}
.band--orange .skd-trio{background:rgba(0,0,0,.2);border-color:rgba(0,0,0,.2)}
.band--orange .skd-trio__item{background:transparent}
.band--orange .skd-trio__n{color:var(--paper);opacity:.85}
.band--orange .skd-trio__item h3{color:var(--paper)}
.band--orange .skd-trio__item p{color:var(--paper);opacity:.92}

/* ---- Orzecznictwo: karty konkretnych orzeczeń na ciemnym pasie (band--night) ---- */
.band--night .skd-head .u-lede{color:var(--paper);opacity:.9;max-width:70ch}
.orzeczenia{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem);
  margin:clamp(1.8rem,3.5vw,2.6rem) 0 clamp(1.4rem,2.5vw,2rem);
}
@media (max-width:760px){ .orzeczenia{grid-template-columns:1fr} }
.orzeczenie{
  display:grid;gap:.95rem;align-content:start;
  padding:clamp(1.5rem,2.6vw,2.1rem);
  border:1px solid rgba(255,255,255,.16);
  border-radius:clamp(.8rem,1.4vw,1.15rem);
  background:rgba(255,255,255,.035);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.orzeczenie:hover{border-color:rgba(244,81,30,.5);background:rgba(255,255,255,.055)}
.orzeczenie__head{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem}
.orzeczenie__sygn{
  display:inline-block;padding:.36em .8em;border-radius:999px;
  background:var(--orange);color:var(--paper);
  font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;font-weight:700;line-height:1;
}
.orzeczenie__data{
  font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.62);
}
.orzeczenie__teza{font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--paper)}
.orzeczenie__opis{font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.82)}
.orzeczenia__nota{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.66);max-width:82ch}