/* Restyled components on design tokens. Loaded after main.css. */

/* Button system */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: 1;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}

/* Gradient (light) / solid-accent (dark) border, keeping rounded corners */
.btn--outline {
  color: var(--color-text);
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--kok-gradient-brand) border-box;
}
body.high-contrast .btn--outline {
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--kok-yellow) border-box;
}

/* Header */
.header {
  background: var(--color-bg);
}
.header .inner {
  border-bottom-color: var(--color-border);
  height: 8rem;
}

.header__nav--link {
  color: var(--color-text);
}
.header__nav--link:hover {
  color: var(--color-accent);
}

/* Login button -> solid primary pill (override legacy outline: white inner span) */
.header .login-button {
  background: var(--btn-primary-bg);
}
.header .login-button:hover {
  background: var(--btn-primary-bg-hover);
}
.header .login-button span {
  background: transparent;
  color: var(--btn-primary-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
}
/* On hover keep the inner span transparent (legacy .secondary_button:hover made it
   #f2f2f2 → white text on grey = unreadable). The pill just darkens via the button
   bg above; the label stays readable. */
.header .login-button:hover span {
  background: transparent;
  color: var(--btn-primary-text);
}
/* Dark: solid yellow pill w/ black label (beats high-contrast.css outline). */
body.high-contrast .header .login-button {
  background: var(--kok-yellow) !important;
  border: 2px solid var(--kok-yellow) !important;
}
body.high-contrast .header .login-button span {
  background: transparent !important;
  color: var(--kok-black) !important;
  -webkit-text-fill-color: var(--kok-black) !important;
}
body.high-contrast .header .login-button:hover {
  background: #e6e600 !important;
  border-color: #e6e600 !important;
}
/* Desktop nav links: dark text in light, yellow in dark (Figma) */
body.high-contrast .header__nav--link {
  color: var(--kok-yellow) !important;
}

/* Phone -> outline pill */
.header__phone--value {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.6rem 1.3rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--kok-gradient-brand) border-box;
  text-decoration: none;
}
body.high-contrast .header__phone--value {
  color: var(--color-text);
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--kok-yellow) border-box;
}
.header__phone--icon {
  color: var(--color-text);
}
/* Phone number: plain dark text in light mode (was gradient-clipped in main.css).
   Dark mode keeps yellow via high-contrast.css (higher specificity). */
.header__phone--text {
  background: none;
  -webkit-text-fill-color: var(--color-text);
  color: var(--color-text);
}

/* Drawer phone pill exists only in the mobile menu (shown ≤719 below) */
.header__nav--phone { display: none; }

/* ============================================
   Mobile menu drawer (≤719px) — Figma node 5032-32021.
   Full-width rows with hairline dividers, title-case, left-aligned.
   ============================================ */
@media (max-width: 719px) {
  .header__nav {
    box-sizing: border-box !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0.8rem 2rem 2.4rem !important;
    background: var(--color-bg) !important;
    overflow-y: auto;
  }
  /* Top-bar phone moves into the drawer bottom (Figma) */
  .nav-right .header__phone { display: none !important; }
  .header__nav--phone {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: auto;
    padding: 1.4rem 2rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: 1.7rem;
    font-weight: var(--fw-semibold);
    text-decoration: none;
    background:
      linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
      var(--kok-gradient-brand) border-box;
  }
  .header__nav--phone-icon { color: var(--color-accent); flex: none; }
  body.high-contrast .header__nav--phone {
    color: var(--kok-yellow);
    background:
      linear-gradient(#141618, #141618) padding-box,
      var(--kok-yellow) border-box;
  }
  body.high-contrast .header__nav--phone-icon { color: var(--kok-yellow); }
  body.high-contrast .header .header__nav {
    background: #141618 !important;
    border: 0 !important;
  }
  .header__nav--list {
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .header__nav--item {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--color-border);
  }
  body.high-contrast .header__nav--item {
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }
  .header__nav--item .header__nav--link {
    box-sizing: border-box !important;
    display: block !important;
    padding: 1.9rem 0 !important;
    margin: 0 !important;
    font-size: 1.7rem !important;
    line-height: 1.3 !important;
    font-weight: var(--fw-medium) !important;
    text-transform: none !important;
    color: var(--color-text) !important;
  }
  /* „Strona główna" home link is not in the Figma mobile menu (logo is home).
     Hide the whole <li> (so its divider goes too); target it via :has because the
     link-level rule above would otherwise out-specify a plain home-link hide. */
  .header__nav--item:has(> .header__nav--home-link) { display: none !important; }
  /* Submenu parent („Pożyczka online") — right chevron */
  .header__nav .menu-item-has-children > .header__nav--link {
    position: relative;
    padding-right: 3rem !important;
  }
  .header__nav .menu-item-has-children > .header__nav--link::after {
    content: "";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 0.9rem; height: 0.9rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-60%) rotate(-45deg);
    transition: transform 0.2s ease;
  }
  .header__nav .menu-item-has-children.open > .header__nav--link::after {
    transform: translateY(-30%) rotate(45deg);
  }
  /* Nested sub-menu (accordion) — indented, no dividers, smaller */
  .header__nav .sub-menu {
    margin: 0 0 0 1.2rem !important;
  }
  .header__nav .sub-menu .header__nav--item { border-bottom: 0; }
  .header__nav .sub-menu .header__nav--link {
    font-size: 1.5rem !important;
    padding: 1.2rem 0 !important;
    opacity: 0.85;
  }
  .header__nav .sub-menu .header__nav--link::after { display: none !important; }
  .header .inner {
    padding-bottom: 0;
    height: auto;
  }
}

/* Mobile menu icon uses accent instead of the legacy red */
.header__menu-icon--row {
  background: var(--color-accent);
}

/* Footer link columns */
.bottom-navs {
  background: var(--kok-dark-surface); /* Figma #141618 — bylo --kok-black (#1e1e1e) */
  color: var(--kok-white);
}
.bottom-navs__title {
  color: var(--kok-white);
}
.bottom-navs a {
  color: rgba(255, 255, 255, 0.8);
}
.bottom-navs a:hover {
  color: var(--color-accent);
}

/* Content typography */
.standard__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.standard__desc,
.standard__desc p,
.standard__desc li {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

/* Process steps — matches "3 proste kroki" makieta */
.process__wrapper {
  counter-reset: kok-step;
}
@media (min-width: 720px) {
  .process__wrapper {
    display: flex;
    gap: var(--space-2xl);
    align-items: flex-start;
  }
  .process__wrapper .process__item {
    flex: 1;
  }
}
.process__item {
  counter-increment: kok-step;
  position: relative;
  text-align: left;
  align-items: flex-start;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  min-width: 30rem;
  max-width: none;
}
.process__item:first-child {
  margin-left: 0;
}
.process__item:last-child {
  margin-right: 0;
}
.process .standard__title {
  padding-bottom: 0;
}
.process .standard__title::after {
  display: none;
}
.process__item:last-child {
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--kok-gradient-brand) border-box;
}
.process__item--image-wrapper {
  -webkit-mask: none !important;
  mask: none !important;
  width: 48px;
  height: 48px;
  margin: 0 0 var(--margin-md) !important;
  border-radius: 50%;
  background: var(--color-text) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.process__item--image-wrapper::before {
  content: counter(kok-step);
  color: var(--color-bg);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  line-height: 1;
}
/* connector arrow between steps (single SVG, adapts to theme via mask) */
.process__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 39px;
  left: 76px;
  right: 0;
  height: 12px;
  background: var(--color-text);
  -webkit-mask: url("assets/images/process-arrow.svg") no-repeat center / 100%
    100%;
  mask: url("assets/images/process-arrow.svg") no-repeat center / 100% 100%;
}
/* section decorative graphics */
.process {
  position: relative;
}
.process .process__bg {
  display: none !important;
}
/* graphics anchored to the 3rd step (last .process__item) */
.process__illustration {
  position: absolute;
  top: -150px;
  right: -70px;
  width: 169px;
  height: auto;
  pointer-events: none;
  z-index: -1;
}
.process__accent {
  position: absolute;
  bottom: -60px;
  right: -70px;
  width: 65px;
  height: auto;
  pointer-events: none;
}
/* Hand illustration is a light-theme decoration only — hidden in dark mode.
   Higher specificity than the mobile display:block rule, so it wins on every breakpoint. */
body.high-contrast .process__illustration {
  display: none;
}
.process__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--margin-3xl);
}
.process__item--title {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-left: 0;
  margin-bottom: 0;
  margin-top: 1rem;
}
.process__item--desc {
  text-align: left;
  color: var(--color-text-muted);
}
.process__subtitle {
  text-align: center;
  color: var(--color-text);
  font-size: var(--fs-base);
  margin: var(--space-md) 0 0;
}
.process__disclaimer {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  margin: var(--space-sm) 0 var(--space-2xl);
}

/* Process steps — mobile layout, matched to the Figma 390px frame (node 4959-18736).
   Scoped to mobile so the desktop horizontal variant stays untouched. */
@media (max-width: 719px) {
  /* Section heading shrinks on mobile: H1 34/41 -> 29/35 */
  .process .standard__title {
    font-size: 29px;
    line-height: 35px;
  }

  /* Subtitle: H5 Medium 19/27, subtext-400 (theme-aware) */
  .process .process__subtitle {
    font-size: var(--fs-lg);
    line-height: 27px;
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
  }
  /* Disclaimer: Caption Regular 12/18, subtext-200 — one step lighter than the subtitle */
  .process .process__disclaimer {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--kok-border-200);
  }

  /* Steps stack full-width (override main.css centering) with room for the connector */
  .process__wrapper {
    display: flex;
    flex-direction: column;
    gap: 44px;
    align-items: center;
  }

  /* Two-column step, matching the makieta: [badge + connector gutter] [text].
     The text column clears the vertical arrow instead of sitting under the badge. */
  .process .process__item {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: var(--space-md); /* 16px between the gutter and the text */
    row-gap: var(--space-sm); /* 8px between title and description */
    align-items: start;
    margin: 0;

    &:last-child {
      margin-top: var(--margin-lg);
    }
  }
  .process .process__item--image-wrapper {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
  }
  /* Title sits beside the badge, vertically centred against it: H5 Medium 19/27 */
  .process .process__item--title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 27px;
    font-weight: var(--fw-medium);
  }
  /* Description flows in the text column, below the title: Body-small 14/21, subtext-600 */
  .process .process__item--desc {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }
  .process .process__item--desc,
  .process .process__item--desc p {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--color-text-subtle);
  }
  .process .process__item--desc p {
    margin: 0;
  }

  .calc__slider + .calc__title {
    margin-top: var(--space-sm) !important;
  }

  /* Connector: vertical down-arrow in the left gutter, under the badge — clear of the text */
  .process__item:not(:last-child)::after {
    top: 76px; /* below the badge: 20 padding + 48 badge + 8 */
    bottom: -44px; /* bridge the 44px stack gap down toward the next badge */
    left: 38px; /* badge centre (44px) minus half the connector width */
    right: auto;
    width: 12px;
    height: auto;
    -webkit-mask-image: url("assets/images/process-arrow-down.svg");
    mask-image: url("assets/images/process-arrow-down.svg");
  }

  /* Hand illustration bleeds in from the screen's left edge onto card 3.
     Cards fill the inner (left edge = 15px inner margin), so -15px reaches the viewport edge. */
  .process__illustration {
    display: block;
    top: auto;
    right: auto;
    top: 80px;
    left: -35px;
    width: 104px;
    z-index: 2;
  }
}

/* ============================================
   Opinions slider — restyled from the static grid into the Figma carousel.
   New card: quote icon + centred text + gradient name + "Zweryfikowany klient".
   Slick centre-mode shows one card with faded peeks either side.
   ============================================ */
/* Drop the process section's bottom divider — it would otherwise sit above this section */
.process .inner::after {
  display: none;
}

.opinions-section {
  padding: var(--margin-5xl) 0;
  background: var(--color-surface);
} /* light grey, so white cards pop */
.opinions-section .opinions-section__title {
  color: var(--color-text);
  padding-bottom: 0;
  margin-bottom: var(--space-md);
}
.opinions-section .opinions-section__title::after {
  display: none;
} /* no underline in the makieta */
.opinions-section .opinions-section__description {
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  line-height: 27px;
  font-weight: var(--fw-medium); /* H5 Medium 19/27 */
  margin: 0 0 var(--margin-md);
}

/* Swiper container — full content width. Swiper's own overflow is hidden, so the
   vertical padding must clear the centre card's soft shadow (~70px downward);
   otherwise the shadow gets clipped into a hard grey edge under the card. */
.opinions-swiper {
  position: relative;
  width: 100%;
}
.opinions-swiper .swiper-wrapper {
  align-items: center;
}

/* Each slide sizes to its card; the "creative" effect handles depth, scale & opacity */
.opinions-swiper .swiper-slide {
  width: 560px;
  max-width: 82%;
  height: auto;
  padding: 4rem;
}

/* Card — roomy, uniform height so content breathes like the makieta */
.opinions-swiper .opinion-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.12);
  padding: 10px 44px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-md);
}
.opinions-swiper .opinion-card::before {
  content: none;
}
.opinions-swiper .swiper-slide:not(.swiper-slide-active) .opinion-card {
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.10);
}
/* The carousel card must not inherit the grid layout's hover (translateY + a
   harder double shadow) — on the centred card that lift detaches the shadow into
   a visible grey blob. Keep hover inert. */
.opinions-swiper .opinion-card:hover {
  transform: none;
}

/* Quote icon */
.opinion-card__quote {
  display: block;
  line-height: 0;
}
.opinion-card__quote img {
  width: 48px;
  height: 48px;
}
/* Light/dark icon swap — olive quote in high-contrast (Figma 4904-42131). */
.opinion-card__quote-img--dark {
  display: none;
}
body.high-contrast .opinion-card__quote-img--light {
  display: none;
}
body.high-contrast .opinion-card__quote-img--dark {
  display: block;
}

/* Opinion text */
.opinions-swiper .opinion-card__text {
  display: block;
  flex: none; /* don't grow — keep the content grouped (overrides legacy flex:1) */
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-subtle);
}
.opinions-swiper .opinion-card__text::before {
  content: none;
}
.opinions-swiper .opinion-card__text p {
  margin: 0;
  padding: 0;
  text-align: center;
  font-style: normal;
  font-size: var(--fs-sm);
}

/* Author */
.opinions-swiper .opinion-card__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  padding: 0;
  margin: 0;
}
.opinion-card__author-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  background: var(--kok-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--kok-pink); /* fallback if background-clip unsupported */
}
.opinion-card__author-role {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* Dark mode: gradient name -> solid accent, hairline instead of shadow */
/* Dark / high-contrast: black cards with a yellow outline + readable yellow text.
   Higher specificity + !important beats the legacy main.css high-contrast opinion rules. */
body.high-contrast .opinions-swiper .opinion-card__text,
body.high-contrast .opinions-swiper .opinion-card__text p,
body.high-contrast .opinions-swiper .opinion-card__author-role {
  color: var(--kok-subtext-300) !important; /* Figma Subtext-400 (#919395) — grey review copy in dark, not the yellow accent */
}
body.high-contrast .opinions-swiper .opinion-card__author-name {
  background: none !important;
  color: var(--kok-white) !important;
  -webkit-text-fill-color: var(--kok-white) !important;
}
body.high-contrast .opinions-swiper .swiper-pagination-bullet-active {
  background: var(--color-accent) !important;
}
body.high-contrast .opinions-swiper__prev,
body.high-contrast .opinions-swiper__next {
  background-color: var(--color-accent) !important;
}
body.high-contrast .reliable-company__subtitle {
  color: var(--kok-subtext-300);
}

/* ---- Controls: arrows flank the pagination in one centred row ---- */
.opinions-swiper__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
}
.opinions-swiper__prev,
.opinions-swiper__next {
  width: 28px;
  height: 16px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: var(--color-text);
  -webkit-mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
  mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
}
.opinions-swiper__prev {
  transform: scaleX(-1);
}
.opinions-swiper__prev.swiper-button-disabled,
.opinions-swiper__next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

.opinions-swiper .swiper-pagination {
  position: static;
  width: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.opinions-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0;
  background: var(--color-border);
  opacity: 1;
  transition: background 0.3s ease;
}
.opinions-swiper .swiper-pagination-bullet-active {
  background: var(--color-accent);
}

/* Mobile */
@media (max-width: 719px) {
  .opinions-section .opinions-section__description {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }
  .opinions-swiper .swiper-slide {
    width: 90%;
    max-width: 440px;
  }
  .opinions-swiper .opinion-card {
    padding: 32px 24px;
    min-height: 300px;
  }
  .opinions-swiper .opinion-card__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }
}

/* ============================================
   Product offer cards ("oferty") — 3-up on desktop, stacked on mobile.
   Grey cards on a white section; each card has a gradient-outline tag pill.
   ============================================ */
.offers {
  padding: var(--margin-5xl) 0;
  background: var(--color-bg);
}
.offers .offers__title {
  color: var(--color-text);
  padding-bottom: 0;
  margin-bottom: var(--space-md);
}
.offers .offers__title::after {
  display: none;
}
.offers__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  line-height: 27px;
  margin: 0 0 var(--margin-5xl);
}

.offers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  max-width: 1200px; /* Figma: content 1200 (3×384 cards + 2×24 gaps), centred */
  margin: 0 auto;
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kok-gray-50); /* Figma #f5f6f6 — bylo --kok-gray-100 (#f2f2f2) */
  border-radius: var(--radius-lg);
  padding: 16px; /* Figma: 16px inset (media/text start 16px from the card edge) */
  margin-top: 18px; /* room for the tag pill overhang */
}

/* Tag pill — top-RIGHT of the card, 8px radius, white fill, gradient border AND gradient text
   (three background layers clipped to text / padding-box / border-box) */
.offer-card__tag {
  /* UWAGA: `absolute` musi zostac — tag wisi nad karta (top/right). Dodanie tu
     `position: relative` rozwalalo pozycjonowanie i tag rozciagal sie na cala karte.
     Absolute i tak tworzy kontekst dla ::before, wiec `relative` nie jest potrzebne. */
  position: absolute;
  top: -56px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  padding: 12px 11px;
  border: 0; /* ramka na ::before */
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0; /* 8px, not a full pill */
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  /* FIREFOX: `background-clip` z LISTA warstw (text, padding-box, border-box) jest
     przez FF raportowany jako wspierany (CSS.supports = true), ale renderowany zle —
     tekst zostaje przezroczysty i widac sama gradientowa pigulke. Dlatego gradient
     tekstu robimy JEDNOWARSTWOWO, a ramke pseudo-elementem z maska (jak w
     .product-hero__badge). Zweryfikowane w Firefox 152. */
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--kok-orange), var(--kok-pink));
  -webkit-background-clip: text;
  background-clip: text;
}
.offer-card__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--kok-orange), var(--kok-pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
body.high-contrast .offer-card__tag {
  color: var(--kok-white);
  -webkit-text-fill-color: var(--kok-white);
  background-image: none; /* w dark tekst jest jednolicie bialy, bez gradientu */
}
body.high-contrast .offer-card__tag::before {
  background: var(--kok-white);
}

/* Illustration area — Figma media box ~352×198 (16:9-ish) */
.offer-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--margin-md);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.offer-card__illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.offer-card__icon {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 44px;
  height: 44px;
  z-index: 1;
}
.offer-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Text */
.offer-card__title {
  font-size: 22px; /* H4 Semibold 22/29 */
  line-height: 29px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 4px 0 var(--margin-sm); /* 12px below title */
}
.offer-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-subtle);
  margin-bottom: var(--margin-lg); /* 20px */
}
.offer-card__list {
  list-style: none;
  margin: 0 0 28px; /* extra breathing room before the link */
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Figma: pozycje co 21px (sama interlinia, bez odstepu). Bylo 10px + lh 1.4
     => 29,6px, przez co karta rosla o ok. 33px. */
  gap: 0;
}
.offer-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm); /* 21px wg Figmy (bylo 1.4 => 19,6px) */
  color: var(--color-text);
}
.offer-card__list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-muted);
}
.offer-card__link {
  margin-top: auto;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
}
.offer-card__link::after {
  content: "";
  width: 20px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
  mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
}
.offer-card__link:hover {
  color: var(--color-accent);
}

/* Figma 4938-26353: ilustracja 16px od krawedzi karty, tekst 28px */
.offer-card__title,
.offer-card__desc,
.offer-card__list,
.offer-card__link {
  padding-left: 12px;
  padding-right: 12px;
}

/* Dark mode (high-contrast) — Figma node 4923-6332: dark cards, grey body text,
   yellow „więcej…" link. Tag pill already handled above. */
body.high-contrast .offers__subtitle {
  color: #919395;
}
body.high-contrast .offer-card {
  background: #141618;
}
/* Illustration swap — dark variant (black bg, olive blob, white line art) */
.offer-card__illustration--dark {
  display: none;
}
body.high-contrast .offer-card__illustration--light {
  display: none;
}
body.high-contrast .offer-card__illustration--dark {
  display: block;
}
body.high-contrast .offer-card__desc {
  color: #b4b6b7;
}
body.high-contrast .offer-card__list li {
  color: #d4d5d6;
}
body.high-contrast .offer-card__list li::before {
  background: #919395;
}
body.high-contrast .offer-card__link {
  color: var(--kok-yellow);
}
body.high-contrast .offer-card__link:hover {
  color: #e6e600;
}

/* Stack on tablet / mobile */
@media (max-width: 1024px) {
  .offers__grid {
    grid-template-columns: 1fr;
    gap: 60px;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ============================================
   "Wiarygodna firma pożyczkowa" — slider removed, logos shown as a static centred row,
   new H1 + subtitle below it.
   ============================================ */
.reliable-company {
  padding: 0 0 var(--margin-5xl) 0;
}
.reliable-company .reliable-company__title {
  color: var(--color-text);
  padding-bottom: 0;
  margin-bottom: var(--space-sm);
}
.reliable-company .standard__title::after {
  display: none;
} /* no underline in the makieta */
.reliable-company__subtitle {
  text-align: center;
  color: var(--color-black);
  font-size: var(--fs-lg); /* H5 Medium 19/27 */
  line-height: 27px;
  font-weight: var(--fw-medium);
  margin: 0 0 var(--margin-5xl);
}
.reliable-company__companies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 72px;
  max-width: 1040px;
  margin: 0 auto;
  position: static;
}
.reliable-company__companies--item {
  margin: 0;
}
/* Slider logotypow — na desktopie Swiper jest wylaczony (breakpoint 720 w main.js),
   wiec .swiper-wrapper musi zachowywac sie jak dotychczasowy flex-row. */
.reliable-swiper {
  width: 100%;
}
.reliable-swiper .swiper-wrapper {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 72px;
}
.reliable-swiper .swiper-slide {
  height: auto;
}
/* Swiper zostawia na slajdach INLINE `width` i `margin-right` (ze spaceBetween)
   nawet po wylaczeniu instancji breakpointem — inline bije zwykle reguly, wiec
   na desktopie trzeba je zdjac, inaczej logotypy ida jeden pod drugim. */
@media (min-width: 720px) {
  .reliable-swiper .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
  }
}
.reliable-swiper__nav {
  display: none; /* tylko mobile */
}

/* Logo moze byc linkiem (podpole „Link" w repeaterze) — link nie moze zmieniac
   ukladu ani rozmiaru grafiki, dodaje tylko kursor i widoczny focus. */
.reliable-company__companies--link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.reliable-company__companies--link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}
.reliable-company__companies--image {
  max-height: 80px;
  max-width: 260px;
  width: auto;
  height: auto;
}
/* High-contrast: the dark-on-white partner logos need a white plate. Make every
   item a uniform white box so the differently-shaped logos line up at one size. */
body.high-contrast .reliable-company__companies--item {
  width: 264px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 28px;
  box-sizing: border-box;
  background: var(--kok-white);
}
body.high-contrast .reliable-company__companies--link {
  width: 100%;
  height: 100%;
  justify-content: center;
}
body.high-contrast .reliable-company__companies--image {
  max-width: 100%;
  max-height: 100%;
  /* Zapas na wypadek, gdyby procent znów nie miał się do czego odnieść:
     120px wysokości kafelka minus 2×18px paddingu. */
  max-height: min(100%, 84px);
  width: auto;
  height: auto;
}

/* Decorative gradient swooshes (Figma "Logotypy": Vector 8 left / Vector 7 right)
   hanging off the section's left and right edges. */
.reliable-company {
  position: relative;
  overflow: hidden;
}
.reliable-company .inner {
  position: relative;
  z-index: 1;
}
.reliable-company__bg {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: auto;
  height: auto;
}
.reliable-company__bg--left {
  left: -7rem;
  top: 50%;
  transform: translateY(-50%);
  height: 22rem;
}
.reliable-company__bg--right {
  right: -8rem;
  top: 2rem;
  height: 18rem;
}
@media screen and (max-width: 720px) {
  .reliable-company__bg--left {
    left: -6rem;
    top: 38%;
    height: 12rem;
  }
  .reliable-company__bg--right {
    right: -5rem;
    top: auto;
    bottom: -2rem;
    height: 11rem;
  }
}

/* Big decorative gradient ribbon (Figma node 4259-3968 "Vector") that threads
   down the right side across the representative-examples, product-types and
   SEO-description sections. It sits behind the content and shows through the
   empty right-hand gutter. */
.home-ribbon-wrap {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
/* Ribbon sits on z-index 0 (not a negative layer) so the description cards'
   backdrop-filter can actually capture and blur it; the sections above are
   lifted to z-index 1 to keep it behind the content. */
.home-ribbon-wrap__decor {
  position: absolute;
  z-index: 0;
  top: 90px;
  right: -732px;
  width: 1455.91px;
  height: auto;
  pointer-events: none;
}
.home-ribbon-wrap > .owu,
.home-ribbon-wrap > .seo-types,
.home-ribbon-wrap > .seo-description {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  .home-ribbon-wrap__decor {
    display: none;
  }
}
/* Mobile: the same ribbon slides far right so only its left loop-tips peek in
   from the right edge behind the accordion cards (Figma 4956-11526). */
@media screen and (max-width: 720px) {
  .home-ribbon-wrap__decor {
    display: block;
    top: 908px;
    right: -1257px;
    left: auto;
    width: 1455.91px;
  }
  .seo-types {
    padding-top: var(--margin-md) !important;
  }
  .seo-description {
    padding-top: var(--margin-md) !important;
  }
}

/* ============================================
   "Kim jesteśmy" (text + phone) + "Nasza misja" (4 feature columns).
   Replaces the old experience-company / o-nas section.
   ============================================ */
.kim-jestesmy {
  padding: var(--margin-5xl) 0;
  background: var(--color-surface);
}
/* „Kim jesteśmy" i „Nasza misja" to w makiecie jeden ciagly blok na szarym tle —
   miedzy nimi jest 48px, a nie 2x64px paddingu sekcji (dawalo +80px). */
.page-template-template-homepage .kim-jestesmy {
  padding-bottom: var(--space-lg);
}
.page-template-template-homepage .kim-jestesmy + .misja {
  padding-top: var(--space-lg);
}
.kim-jestesmy__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.kim-jestesmy .kim-jestesmy__title {
  text-align: left;
  padding-bottom: 0;
  margin-bottom: var(--space-lg);
}
.kim-jestesmy .standard__title::after {
  display: none;
}
.kim-jestesmy__desc p {
  margin: 0 0 var(--margin-md);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}
.kim-jestesmy__desc p:last-child {
  margin-bottom: 0;
}
.kim-jestesmy__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
}
.kim-jestesmy__link::after {
  content: "";
  width: 20px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
  mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
}
.kim-jestesmy__link:hover {
  color: var(--color-accent);
}
.kim-jestesmy__img {
  width: 100%;
  height: auto;
  display: block;
}
/* High-contrast: swap to the variant whose decorative lines are white (Figma 4938-27767). */
.kim-jestesmy__img--dark {
  display: none;
}
body.high-contrast .kim-jestesmy__img--light {
  display: none;
}
body.high-contrast .kim-jestesmy__img--dark {
  display: block;
}

.misja {
  padding: var(--margin-5xl) 0 var(--margin-5xl);
  background: var(--color-surface);
  text-align: center;
}
.misja .misja__title {
  font-size: 25px;
  line-height: 31px; /* H3 Semibold */
  padding-bottom: 0;
  margin-bottom: var(--space-sm);
}
.misja .standard__title::after {
  display: none;
}
.misja__subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 660px;
  margin: 0 auto var(--margin-5xl);
}
.misja__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.misja__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.misja__icon {
  width: 96px;
  height: 96px;
  margin-bottom: var(--margin-md);
  flex: none;
}
.misja__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 719px) {
  .misja__icon {
    width: 64px;
    height: 64px;
  }
}
/* High-contrast: olive icon variants (Figma 4938-27767). */
.misja__icon-img--dark {
  display: none;
}
body.high-contrast .misja__icon-img--light {
  display: none;
}
body.high-contrast .misja__icon-img--dark {
  display: block;
}
.misja__item-title {
  font-size: var(--fs-lg);
  line-height: 25px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}
.misja__item-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Mobile: phone on top, text below; features stacked as icon + text rows */
@media (max-width: 719px) {
  .kim-jestesmy__wrapper {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .kim-jestesmy__media {
    order: -1;
  }
  .kim-jestesmy .kim-jestesmy__title {
    font-size: 29px;
    line-height: 35px;
  }

  .misja .misja__title {
    font-size: 22px;
    line-height: 28px;
  }
  .misja__subtitle {
    margin-bottom: var(--margin-3xl);
  }
  .misja__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 430px;
    margin: 0 auto;
  }
  /* icon | (title over description): icon spans both rows, top-aligned */
  .misja__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-lg);
    text-align: left;
    align-items: start;
  }
  .misja__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-bottom: 0;
  }
  .misja__item-title {
    grid-column: 2;
    grid-row: 1;
  }
  .misja__item-desc {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ============================================
   "Wiedza, która się opłaca!" — blog articles: 3 cards on desktop, slider on mobile.
   ============================================ */
.latest-articles .inner::after {
  display: none;
} /* drop the legacy divider line */
.latest-articles__title-main {
  color: var(--color-text);
  padding-bottom: 0;
  margin-bottom: var(--space-sm);
}
.latest-articles .standard__title::after {
  display: none;
}
/* Sekcja "Powiazane artykuly" w slowniku pojec: tytul wyrownany do lewej
   (bazowe .standard__title jest wysrodkowane). */
.glossary-articles .standard__title {
  text-align: left;
}
.latest-articles__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  line-height: 27px;
  margin: 0 0 var(--margin-5xl);
}

.articles-swiper {
  position: relative;
}
.articles-swiper .swiper-wrapper {
  align-items: stretch;
}
.articles-swiper .swiper-slide {
  height: auto;
  /* To samo zabezpieczenie co przy .blog-grid--3, tyle że po stronie flexa:
     automatyczne minimum (`min-width: auto`) potrafi podnieść slajd do
     min-content obrazka mimo `flex-shrink: 0` i szerokości ze Swipera. */
  min-width: 0;
}

.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Karta jest elementem siatki/flexa — bez tego jej automatyczne minimum
     przenosi naturalną szerokość obrazka na tor. */
  min-width: 0;
}
.article-card__image {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: var(--margin-md);
  background: var(--color-surface);
}
.article-card__image img {
  width: 100%;
  /* Zapasowy bezpiecznik: gdyby `width: 100%` nie zdążyło zadziałać, max-width
     i tak nie pozwoli obrazkowi wyjść poza kartę. */
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
/* Hover na całej karcie: lekki zoom obrazka + podświetlenie „Czytaj więcej" (Figma: Article-card/Hover) */
.article-card:hover .article-card__image img {
  transform: scale(1.05);
}
.article-card:hover .article-card__link {
  color: var(--color-accent);
}
.article-card__meta {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}
.article-card__dot {
  margin: 0 4px;
}
.article-card__title {
  font-size: var(--fs-lg);
  line-height: 25px;
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-sm);
}
.article-card__title a {
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.1 !important;
}
.article-card__title a:hover {
  color: var(--color-accent);
}
.article-card__excerpt {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--margin-md);
}
.article-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
}
.article-card__link::after {
  content: "";
  width: 20px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
  mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
}
.article-card__link:hover {
  color: var(--color-accent);
}

/* "Zobacz wszystkie artykuły" — gradient-outline pill with gradient text */
.latest-articles__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--margin-5xl);
}
.latest-articles__all {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  text-decoration: none;
  /* Firefox: patrz komentarz przy .offer-card__tag — lista warstw w background-clip
     gubi tekst. Gradient tekstu jednowarstwowo, ramka pseudo-elementem z maska. */
  position: relative;
  border: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--kok-orange), var(--kok-pink));
  -webkit-background-clip: text;
  background-clip: text;
}
.latest-articles__all::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px; /* 2px wg Figmy */
  background: linear-gradient(135deg, var(--kok-orange), var(--kok-pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@media (max-width: 719px) {
  .latest-articles__cta,
  .latest-articles__all {
    width: 100%;
  }
  .latest-articles__all {
    justify-content: center;
  }
}
body.high-contrast .latest-articles__all {
  color: var(--color-accent);
  -webkit-text-fill-color: var(--color-accent);
  background-image: none; /* w dark tekst jednolicie w kolorze akcentu */
}
body.high-contrast .latest-articles__all::before {
  background: var(--color-accent);
}
/* Article title stays white in dark (it's a link → high-contrast.css would make it
   yellow); only „Czytaj więcej" keeps the yellow accent. */
body.high-contrast .article-card__title a {
  color: var(--kok-white) !important;
  -webkit-text-fill-color: var(--kok-white) !important;
}

/* Nav (arrows + dots) — mobile only */
.articles-swiper__nav {
  display: none;
}
@media (max-width: 719px) {
  .latest-articles__subtitle {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    margin-bottom: var(--margin-3xl);
  }
  .articles-swiper__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
  }
  .articles-swiper__prev,
  .articles-swiper__next {
    width: 28px;
    height: 16px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: var(--color-text);
    -webkit-mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
    mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
  }
  .articles-swiper__prev {
    transform: scaleX(-1);
  }
  .articles-swiper .swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .articles-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    background: var(--color-border);
    opacity: 1;
  }
  .articles-swiper .swiper-pagination-bullet-active {
    background: var(--color-accent);
  }
}

/* ============================================
   FAQ — "Masz pytania? Odpowiadamy." : white accordion cards on a grey section.
   Overrides the legacy .faq-section rules in main.css (loaded earlier).
   ============================================ */
.faq-section {
  margin: 0;
  padding: var(--margin-5xl) 0;
  background: var(--color-surface);
}
.faq-section .faq-section__wrapper {
  display: block;
}
.faq-section .faq-section__list {
  width: 100%;
}

/* Header (heading + subtitle come from the faq_text WYSIWYG field) */
.faq-section .faq-section__list .standard__title {
  text-align: center;
  margin: 0 0 var(--space-2xl);
}
.faq-section .standard__title::after {
  display: none;
}
.faq-section .standard__title h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  padding: 0;
}
.faq-section .standard__title p {
  font-size: var(--fs-lg);
  line-height: 27px;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  margin: 0;
}

/* List + cards */
.faq-section .faq-list {
  max-width: 792px;
  margin: 0 auto;
  gap: var(--space-sm);
}
.faq-section .faq-item {
  background: var(--color-bg);
  /* Transparent border reserved in both states so opening adds no layout shift.
     14px vertical + 2px border keeps the collapsed card at the Figma 56px. */
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 14px var(--margin-lg);
  box-shadow: none;
}
/* Expanded item: brand gradient border (orange → pink), white interior */
.faq-section .faq-item.open {
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(135deg, var(--kok-orange), var(--kok-pink)) border-box;
}
body.high-contrast .faq-section .faq-item.open {
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--kok-yellow) border-box !important; /* beat high-contrast.css .faq-item flat black */
}

.faq-section .faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  cursor: pointer;
}
.faq-section .faq-item.open .faq-item__question {
  color: var(--color-text);
}

/* Chevron (single SVG, adapts to theme via mask; rotates when open) */
.faq-section .faq-item__question::after {
  content: "";
  position: static;
  top: auto;
  right: auto;
  flex: none;
  width: 20px;
  height: 20px;
  font-size: 0;
  background-color: var(--color-text);
  color: initial;
  -webkit-mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
  mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
  transition: transform var(--transition);
  transform: none;
}
.faq-section .faq-item.open .faq-item__question::after {
  content: "";
  top: auto;
  transform: rotate(180deg);
}

/* Answer — smooth grid-rows reveal (animates the real content height, both ways).
   Overrides the legacy max-height mechanism in main.css. */
.faq-section .faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  transition:
    grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease;
}
/* overflow:hidden + min-height:0 lets the grid track collapse fully to 0.
   The question/answer gap is a margin on the first child (clipped content,
   not padding on the wrapper — padding would leave a ~16px floor when closed). */
.faq-section .faq-item__answer-inner {
  min-height: 0;
  overflow: hidden;
}
.faq-section .faq-item__answer-inner > :first-child {
  margin-top: var(--margin-md);
}
.faq-section .faq-item.open .faq-item__answer {
  grid-template-rows: 1fr;
  max-height: none;
  padding: 0;
  opacity: 1;
}
.faq-section .faq-item__answer p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  margin: 0 0 var(--space-sm);
}
.faq-section .faq-item__answer p:last-child {
  margin-bottom: 0;
}

/* "Zobacz wszystkie pytania" — gradient-outline pill with gradient text */
.faq-section__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}
.faq-section__all {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  text-decoration: none;
  /* Firefox: patrz komentarz przy .offer-card__tag. */
  position: relative;
  border: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--kok-orange), var(--kok-pink));
  -webkit-background-clip: text;
  background-clip: text;
}
.faq-section__all::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px; /* 2px wg Figmy */
  background: linear-gradient(135deg, var(--kok-orange), var(--kok-pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
body.high-contrast .faq-section__all {
  color: var(--color-accent);
  -webkit-text-fill-color: var(--color-accent);
  background-image: none; /* w dark tekst jednolicie w kolorze akcentu */
}
body.high-contrast .faq-section__all::before {
  background: var(--color-accent);
}

@media (max-width: 719px) {
  .faq-section .standard__title h2 {
    font-size: 29px;
    line-height: 35px;
  }
  .faq-section .standard__title p {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }
  .faq-section .faq-item {
    padding: 14px var(--margin-lg);
  }
  .faq-section__all {
    width: 100%;
    max-width: 358px;
    justify-content: center;
  }
}

/* ============================================
   FAQ page (template-faq.php) — breadcrumb + H1 + intro on white, then all
   groups on a grey band. Content sits in a centred 792px column; the accordion
   cards reuse the .faq-section item styling above.
   ============================================ */
.faq-page__col {
  box-sizing: border-box;
  max-width: 840px; /* 792px content + 2×24px gutter */
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero (white) */
.faq-page__hero {
  padding: var(--margin-2xl) 0 48px;
  background: var(--color-bg);
}
.faq-page__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
  padding: 0;
}
.faq-page__intro {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  max-width: 792px;
}
.faq-page__intro p {
  margin: 0 0 var(--space-md);
}
.faq-page__intro p:last-child {
  margin-bottom: 0;
}

/* Groups band (grey) — reuses .faq-section background + card styling */
.faq-page__groups {
  padding: 48px 0 var(--margin-5xl);
}
.faq-page__groups .faq-page__col {
  padding: 0 24px; /* keep the 792px column even though .faq-section resets list width */
}
.faq-group + .faq-group {
  margin-top: var(--margin-5xl);
}
.faq-group__title {
  font-size: 22px;
  line-height: 29px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
  padding: 0;
}
/* The list inside the page column is already 792px wide; no extra centring. */
.faq-page__groups .faq-list {
  max-width: none;
  margin: 0;
}

@media (max-width: 719px) {
  .faq-page__col {
    padding: 0 16px;
  }
  .faq-page__groups .faq-page__col {
    padding: 0 16px;
  }
  .faq-page__hero {
    padding: var(--margin-md) 0 40px;
  }
  .faq-page__title {
    font-size: 29px;
    line-height: 35px;
  }
  .faq-group + .faq-group {
    margin-top: var(--margin-3xl);
  }
  .faq-group__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
  }
}

/* ============================================
   "Przykłady reprezentatywne" — gradient-bordered card, two example blocks,
   each a two-column label/value grid; legal footnotes below.
   ============================================ */
.owu {
  position: relative;
  z-index: 10;
  margin: 0;
  padding: var(--margin-5xl) 0;
}
.repr-card {
  --repr-divider: var(--kok-gray-200);
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(135deg, var(--kok-orange), var(--kok-pink)) border-box;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 40px;
}
body.high-contrast .repr-card {
  background: #000;
  border-color: var(--kok-white);
}
/* Muted copy (note / subnote / legal) stays grey in dark — global maps muted→white */
body.high-contrast .repr-card__note,
body.high-contrast .repr-card__subnote,
body.high-contrast .repr-card__legal p {
  color: #919395;
}
.repr-card__title {
  font-size: 25px;
  line-height: 31px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}
.repr-card__subtitle {
  font-size: var(--fs-lg);
  line-height: 27px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0 0 var(--space-2xs, 4px);
}
.repr-card__note {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.repr-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.repr-card__col {
  display: flex;
  flex-direction: column;
}
.repr-card__col:first-child {
  padding-right: var(--space-lg);
}
.repr-card__col:last-child {
  padding-left: var(--space-lg);
  border-left: 1px solid var(--repr-divider);
}
.repr-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px 0;
  border-bottom: 1px solid var(--repr-divider);
}
.repr-card__col > .repr-card__row:last-child {
  border-bottom: 0;
}
.repr-card__row--note {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.repr-card__row-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
.repr-card__label {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text);
}
.repr-card__value {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  white-space: nowrap;
}
.repr-card__subnote {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--kok-subtext-400);
}
/* Gradient rule between the two examples */
.repr-card__divider {
  height: 0;
  border: 0;
  border-top: 1px solid;
  border-image: linear-gradient(90deg, var(--kok-orange), var(--kok-pink)) 1;
  margin: var(--space-lg) 0;
}
body.high-contrast .repr-card__divider {
  border-image: none;
  border-top-color: #3d3d00; /* subtle dim-olive rule, not a loud yellow (Figma) */
}
.repr-card__legal {
  margin-top: var(--space-lg);
}
.repr-card__legal p {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.repr-card__legal p:last-child {
  margin-bottom: 0;
}

@media (max-width: 719px) {
  .repr-card {
    padding: var(--space-lg);
  }
  .repr-card__title {
    font-size: 22px;
    line-height: 28px;
  }
  .repr-card__grid {
    grid-template-columns: 1fr;
  }
  .repr-card__col:first-child {
    padding-right: 0;
  }
  .repr-card__col:last-child {
    padding-left: 0;
    border-left: 0;
  }
  /* stacked: keep a divider after the left column's last row (right column follows) */
  .repr-card__col:first-child > .repr-card__row:last-child {
    border-bottom: 1px solid var(--repr-divider);
  }
}

/* ============================================
   "Rodzaje pożyczek" — interactive SEO section.
   Mobile-first: accordion (active item expands inline inside a gradient-border card).
   Desktop (>=720): vertical tabs — left list; the active item's panel is shown top-right.
   ============================================ */
.seo-types {
  padding: var(--margin-5xl) 0;
}
.seo-types__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.seo-types__item {
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.seo-types__item--active {
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(135deg, var(--kok-orange), var(--kok-pink)) border-box;
}
body.high-contrast .seo-types__item--active {
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--kok-yellow) border-box;
}
/* Mobile: the active card gets the same frosted-glass treatment as the desktop
   description panel (Figma 4956-11529) so the ribbon peek shows through faintly.
   Single translucent fill + masked gradient ring — see the desktop panel note. */
@media screen and (max-width: 719px) {
  .seo-types__item--active {
    position: relative;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
  }
  .seo-types__item--active::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-md);
    padding: 2px;
    background: linear-gradient(135deg, var(--kok-orange), var(--kok-pink));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  body.high-contrast .seo-types__item--active::before {
    display: none;
  }
}

.seo-types__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  /* Figma: wiersz 80px (16 + ikona 48 + 16). Bylo 18px => 84px. */
  padding: var(--space-md) var(--space-lg);
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.seo-types__icon {
  flex: none;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  transition: background var(--transition);
}
/* Fixed glyph size so every icon renders at the same footprint regardless of its
   SVG viewBox, and stays put whether or not the active circle is shown. */
.seo-types__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
/* Light/dark icon swap — dark icon shows only in high-contrast (dark) mode. */
.seo-types__icon-img--dark {
  display: none;
}
body.high-contrast .seo-types__icon-img--light {
  display: none;
}
body.high-contrast .seo-types__icon-img--dark {
  display: block;
}
.seo-types__label {
  flex: 1;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.seo-types__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  background-color: var(--color-text);
  -webkit-mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
  mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
  transition: transform var(--transition);
}
.seo-types__item--active .seo-types__chevron {
  transform: rotate(180deg);
}

/* Panel — smooth grid-rows reveal (accordion) */
.seo-types__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease;
}
.seo-types__panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 24px;
}
.seo-types__panel-inner > :last-child {
  margin-bottom: 24px;
}
.seo-types__item--active .seo-types__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.seo-types__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.seo-types__cta {
  display: inline-block;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.2;
}
a.seo-types__cta:hover {
  color: var(--color-accent);
}

@media (min-width: 720px) {
  .seo-types__wrapper {
    position: relative;
  }
  .seo-types__list {
    width: 48%;
  }
  .seo-types__item {
    border: 0;
    width: 100%;
    box-sizing: border-box;
    transition: background var(--transition), width var(--transition);
  }
  /* Active tab sticks out ~20px further right than the rest (Figma 4259-3967). */
  .seo-types__item--active {
    background: linear-gradient(135deg, var(--kok-orange), var(--kok-pink));
    width: calc(100% + 20px);
  }
  body.high-contrast .seo-types__item--active {
    background: #333300; /* dim olive fill (Figma 4904-42573), was loud #ffff00 */
  }
  .seo-types__item--active .seo-types__label {
    color: #fff;
  }
  body.high-contrast .seo-types__item--active .seo-types__label {
    color: var(--kok-white);
  }
  /* Only the background toggles — the 40px circle slot is reserved in both states,
     so the icon never resizes or shifts when a tab becomes active. */
  .seo-types__item--active .seo-types__icon {
    background: #fff;
  }
  /* chevron points right in the tab list; hidden on the active tab */
  .seo-types__chevron {
    transform: rotate(-90deg);
  }
  .seo-types__item--active .seo-types__chevron {
    display: none;
  }

  /* Active panel appears at the top-right, next to the tab list */
  .seo-types__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 48%;
    display: none;
    grid-template-rows: 1fr;
    opacity: 1;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    /* Frosted glass (Figma 4259-3978): 60% white fill over a 40px backdrop blur,
       so the ribbon underneath faintly shows through. NOTE: the fill must be a
       single translucent layer — an extra opaque border-box gradient underneath
       would sit behind the white and block the backdrop entirely. The gradient
       stroke is drawn by the masked ::before below instead. */
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
  }
  /* Gradient border ring with a fully transparent inside (mask keeps only the
     2px border area), so it doesn't block the glass. */
  .seo-types__panel::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-md);
    padding: 2px;
    background: linear-gradient(135deg, var(--kok-orange), var(--kok-pink));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  body.high-contrast .seo-types__panel::before {
    display: none;
  }
  body.high-contrast .seo-types__panel {
    background:
      linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
      var(--kok-white) border-box; /* white border in dark (Figma) */
  }
  .seo-types__item--active .seo-types__panel {
    display: block;
  }
  .seo-types__panel-inner {
    overflow: visible;
    padding: 28px 32px;
  }
  .seo-types__panel-inner > :last-child {
    margin-bottom: 0;
  }
  .seo-types__desc {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
  }
}

/* ============================================
   SEO description — dense text blocks (title + body + optional CTA link),
   single column, separated by hairline dividers. Overrides legacy card grid in main.css.
   ============================================ */
.seo-description {
  padding: var(--margin-5xl) 0;
  background: transparent;
}
/* Content sits in a centred rounded grey card (Figma 4813-21211 "Content box"),
   not a full-bleed grey band. Mirrors the dark-mode card below. */
.seo-description .inner {
  background: var(--color-surface);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 40px);
  box-sizing: border-box;
}
.seo-description .standard__title::after {
  display: none;
}
.seo-description .seo-description-text {
  margin: 0 0 var(--space-lg);
  padding: 0;
  text-align: left;
}
.seo-description .seo-description-text h2 {
  font-size: var(--fs-lg);
  line-height: 27px;
  font-weight: var(--fw-medium);
  color: var(--color-text-subtle);
  margin: 0;
  padding: 0;
}
.seo-description .seo-description-text h2 strong {
  font-weight: var(--fw-medium);
}

/* one column of blocks (kills the legacy 2-col card grid) */
.seo-description .seo-description__content {
  display: block;
  margin: 0;
}
.seo-description .seo-description__item {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  color: var(--color-text-muted);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
}
.seo-description .seo-description__item:first-child {
  padding-top: 0;
}
.seo-description .seo-description__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.seo-description .seo-description__item__title {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-subtle);
  margin: 0 0 var(--space-sm);
}
.seo-description .seo-description__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
}
.seo-description .seo-description__text p {
  margin: 0 0 var(--space-md);
  color: var(---color-muted);
  font-size: var(---fs-medium);
}
.seo-description .seo-description__text p:last-child {
  margin-bottom: 0;
}
.seo-description .seo-description__text strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.seo-description .seo-description__text a {
  color: var(--color-text);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.seo-description .seo-description__text a:hover {
  color: var(--color-accent);
}
/* Dark (Figma 4953-32674): content sits in a rounded #141618 card on a black
   section; the „Sprawdź…" bold CTA lines are the only yellow accent. */
body.high-contrast .seo-description .inner {
  background: #141618;
  border-radius: 24px;
  padding: clamp(24px, 4vw, 40px);
}
body.high-contrast .seo-description .seo-description__text strong {
  color: var(--kok-yellow) !important;
}

/* ============================================
   Hero visual — a single baked graphic per breakpoint x theme (orange band +
   headline + „decyzja"/RRSO copy + panda). The calculator card stays live HTML on
   top. Images come from ACF (group_hero_media) with theme defaults; the headline +
   legal RRSO also live in the DOM as visually-hidden text.
   ============================================ */
section.main {
  background-image: none !important;
  background-color: #e7e8e8;
}
body.high-contrast section.main {
  background-color: #141618;
}

/* Headline + legal copy: baked into the graphic, kept in the DOM for SEO, screen
   readers and RRSO compliance. */
.hero-visual__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-visual {
  position: relative;
}
.hero-media {
  display: block;
}
.hero-media img {
  display: block;
  width: 100%;
  height: auto;
}
/* Dark graphic shows only in high-contrast; the light one is hidden then. */
.hero-media--dark {
  display: none;
}
body.high-contrast .hero-media--light {
  display: none;
}
body.high-contrast .hero-media--dark {
  display: block;
}

/* Desktop (>=1025): graphic fills the row; the live calc card overlays its right
   side, where the graphic is intentionally left as flat background. */
@media (min-width: 1025px) {
  .page-template-template-homepage section.main .inner {
    display: grid !important;
    /* Override the legacy inline `grid-template-areas: ... !important` (5 rows:
       title/subtitle/years/list/slider) that otherwise leaves an empty phantom row
       — a grey bar — below the hero graphic. */
    grid-template-areas: none !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    position: static !important;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 !important;
  }
  .page-template-template-homepage section.main .info-years,
  .page-template-template-homepage section.main .main__characteristic {
    display: none !important;
  }
  .page-template-template-homepage section.main .info-container {
    grid-area: 1 / 1;
    align-self: start;
    width: 100%;
    margin: 0 !important;
  }
  .page-template-template-homepage section.main .loan-form {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: end;
    width: 486px;
    /* Bez dolnego marginesu: karta + 2x36px byla wyzsza (696px) niz grafika hero
       (673px) i rozpychala sekcje o 23px wzgledem makiety. W Figmie karta siega
       dolnej krawedzi hero, wiec o wysokosci sekcji decyduje grafika. */
    margin: 2.5% 8.5% 0 0;
    z-index: 2;
    /* The hero graphic scales with the viewport (width:100%); scale the calc card
       in step so it keeps its proportion on large screens instead of looking
       small. Factor is set by JS (main.js) and pinned to the card's top-right so
       it stays over the graphic's flat right area. */
    transform: scale(var(--hero-calc-scale, 1));
    transform-origin: top right;
  }
}

/* Tablet (720-1024) + mobile (<=719): stacked — graphic on top, calc card below. */
@media (max-width: 1024px) {
  .page-template-template-homepage section.main .inner {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .page-template-template-homepage section.main .info-years,
  .page-template-template-homepage section.main .main__characteristic {
    display: none !important;
  }
  .page-template-template-homepage section.main .info-container {
    order: 0;
    width: 100%;
    margin: 0;
  }
  .page-template-template-homepage section.main .loan-form {
    order: 1;
    width: auto;
    max-width: none;
    float: none;
    /* Bez odstepu od gory — karta kalkulatora ma przylegac do grafiki hero
       (bylo 20px przerwy). Boki i dol zostaja. */
    margin: 0 16px 28px;
  }
  .page-template-template-homepage section.main .loan-form .calc {
    max-width: 486px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   Hero calculator card (.calc) — standalone amount/period picker matching Figma.
   Replaces the old CF7 form on the homepage; the application form itself now
   lives on /wniosek. Rata/RRSO/Do spłaty are placeholders until the pricing
   formula (cennik z CRM) is wired.
   ============================================ */
/* Host <aside> is just a layout slot — the visible card is .calc */
.loan-form {
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.loan-form::before,
.loan-form::after {
  content: none;
  display: none;
}

.calc {
  box-sizing: border-box;
  background: #f5f6f6;
  border-radius: 16px;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  padding: 20px;
  max-width: 486px;
  margin: 0 auto;
}
.calc__title {
  text-align: center;
  margin: 0 0 var(--space-md);
  font-size: var(--fs-lg);
  line-height: 27px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.calc__periods + .calc__rata,
.calc__slider {
  margin-bottom: var(--space-lg);
}
.calc .calc__title + .calc__periods {
  margin-top: 0;
}
.calc__slider + .calc__title {
  margin-top: var(--space-lg);
}

/* Amount stepper */
/* Ramka gradientowa przez maske w ::before — wnetrze zostaje przezroczyste,
   wiec stepper przyjmuje tlo kontekstu (biala karta, szara sekcja, dark). */
.calc__stepper {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 233px;
  margin: 0 auto var(--space-md);
  padding: 10px 16px;
  border: 2px solid transparent;
  border-radius: 9px;
  background: none;
}
.calc__stepper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--kok-orange), var(--kok-pink));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.calc__amount {
  flex: 1;
  text-align: center;
  font-size: 22px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.calc__step {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.calc__step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
}
.calc__step--plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: var(--color-text);
}

/* Slider — gradient-filled track (webkit via --fill, Firefox via range-progress) */
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  display: block;
}
.calc__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, var(--kok-orange), var(--kok-pink)) 0 /
      var(--fill, 50%) 100% no-repeat,
    var(--kok-gray-200);
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -7px;
  width: 30px;
  height: 20px;
  border-radius: 10px;
  background: var(--kok-pink);
  box-shadow: 0 2px 6px rgba(255, 60, 90, 0.4);
  cursor: pointer;
}
.calc__range::-moz-range-track {
  height: 6px;
  border-radius: 6px;
  background: var(--kok-gray-200);
}
.calc__range::-moz-range-progress {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--kok-orange), var(--kok-pink));
}
.calc__range::-moz-range-thumb {
  width: 30px;
  height: 20px;
  border: 0;
  border-radius: 10px;
  background: var(--kok-pink);
  box-shadow: 0 2px 6px rgba(255, 60, 90, 0.4);
  cursor: pointer;
}
.calc__slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-sm);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* Period grid */
.calc__periods {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 13px;
  margin: 0 0 var(--space-lg);
}
.calc__period {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 4px;
  min-height: 50px;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}
.calc__period-num {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.1;
}
.calc__period-unit {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.calc__period--active {
  border-color: transparent;
  /* gradient brandowy (jak CTA) zamiast 135deg orange->pink, który wpadał za bardzo w pomarańcz */
  background: var(--kok-gradient-brand);
  /* Gradient MUSI sięgać krawędzi kafelka. Domyślnie jest skalowany do
     padding-boxa i powtarzany na 1px przezroczystej ramki, przez co po lewej
     wychodził różowy pasek, a po prawej pomarańczowy — końcówki gradientu
     z sąsiedniego „kafla” powtórzenia. */
  background-origin: border-box;
}
.calc__period--active .calc__period-num,
.calc__period--active .calc__period-unit {
  color: #fff;
}
.calc__period[data-badge]::before {
  content: attr(data-badge);
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
  background: var(--color-bg);
}
/* „61 dni" — wg Figmy gradient MA byc i na tekscie, i na ramce.
   FIREFOX: `background-clip: text` dziala tam WYLACZNIE jako pojedyncza wartosc —
   kazda lista (text, padding-box, ...) sprawia, ze tekst znika i zostaje sama
   pigulka. Do pseudo-elementu nie da sie dopiac kolejnego pseudo-elementu, wiec:
     ::before = gradientowy TEKST (jedna warstwa clip:text)
     ::after  = gradientowa RAMKA (ta sama tresc => ta sama szerokosc, maska
                padding-box wycina srodek i zostawia sam border)
   Zweryfikowane w Firefox 152 i Chrome. */
.calc__period[data-badge-type="dni"]::before {
  border: 1px solid transparent;
  background-color: transparent; /* biel rysuje ::after — tu tlo bylo by przyciete do glifow */
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--kok-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  z-index: 1; /* tekst nad wypelnieniem z ::after */
}
/* ::after = BIALE wypelnienie + gradientowa ramka. Lista `padding-box, border-box`
   (BEZ `text`) renderuje sie w Firefoksie poprawnie — psuje sie tylko lista z `text`.
   Ta sama tresc co ::before daje identyczna szerokosc pigulki. */
.calc__period[data-badge-type="dni"]::after {
  content: attr(data-badge);
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  z-index: 0;
  background-image:
    linear-gradient(var(--color-bg), var(--color-bg)),
    var(--kok-gradient-brand);
  background-clip: padding-box, border-box;
  -webkit-background-clip: padding-box, border-box;
  background-origin: border-box;
  pointer-events: none;
}
.calc__period[data-badge-type="rec"]::before {
  color: var(--kok-success);
  border: 1px solid var(--kok-success);
}

/* Rata summary + CTA */
.calc__rata {
  text-align: center;
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
}
.calc__rata span {
  color: var(--color-text-muted);
}
.calc__rata strong {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: 22px;
}
.calc__cta {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 16px 24px;
  line-height: 20px;
  border-radius: var(--radius-pill);
  background: var(--kok-gradient-brand);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-lg);
}
.calc__cta:hover {
  background: var(--btn-primary-bg-hover);
}

/* Stats + disclaimer */
.calc__stats {
  display: grid;
  /* Liczba kolumn = liczba pozycji. Na sztywno 4 kolumny zostawialy pusta czwarta
     kolumne tam, gdzie jest tylko 3 pozycje (chwilowka: bez „Rata") i podsumowanie
     wygladalo na przesuniete w lewo. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  text-align: center;
  margin: 0 0 var(--space-md);
}
.calc__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calc__stat-label {
  font-size: var(--fs-sm);
  margin-bottom: .8rem;
  color: var(--color-text-muted);
}
.calc__stat-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-wrap-mode: nowrap !important;
}
#calc-rata {
  margin-left: 1rem;
}
.calc__disclaimer {
  text-align: center;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-muted);
  margin: 0;
}

/* Dark mode (high-contrast) — dark card, brand gradient → flat yellow (Figma 4904-42111) */
body.high-contrast .calc {
  background: #141618;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.4);
}
body.high-contrast .calc__stepper::before {
  background: var(--kok-yellow);
}
/* Amount value + the +/− glyphs turn yellow */
body.high-contrast .calc__amount {
  color: var(--kok-yellow);
}
body.high-contrast .calc__step::before,
body.high-contrast .calc__step--plus::after {
  background: var(--kok-yellow);
}
/* Term buttons: dark tile, yellow number + unit; active = solid yellow on black */
body.high-contrast .calc__period {
  background: #141618;
}
body.high-contrast .calc__period-num,
body.high-contrast .calc__period-unit {
  color: var(--kok-yellow);
}
body.high-contrast .calc__period--active {
  background: var(--kok-yellow);
  border-color: transparent;
}
body.high-contrast .calc__period--active .calc__period-num,
body.high-contrast .calc__period--active .calc__period-unit {
  color: var(--kok-black);
}
/* Badges (61 dni / polecamy) → yellow outline + yellow text on the dark tile */
body.high-contrast .calc__period[data-badge]::before {
  background: #141618;
}
body.high-contrast .calc__period[data-badge-type="dni"]::before,
body.high-contrast .calc__period[data-badge-type="rec"]::before {
  color: var(--kok-white);
  /* reset gradientu z jasnego motywu — w dark badge jest bialy kontur + bialy tekst */
  -webkit-text-fill-color: var(--kok-white);
  background-image: none;
  border-color: var(--kok-white);
}
/* W dark ramke rysuje juz `border` na ::before — gradientowy pierscien z jasnego
   motywu trzeba zdjac, inaczej naklada sie na bialy kontur. */
body.high-contrast .calc__period[data-badge-type="dni"]::after {
  content: none;
}
body.high-contrast .calc__cta {
  background: var(--kok-yellow);
  color: var(--kok-black) !important; /* beat high-contrast.css link color */
}
/* Split webkit/moz — a grouped selector with ::-moz-range-thumb makes Chrome
   drop the whole rule, leaving the thumb pink. */
body.high-contrast .calc__range::-webkit-slider-thumb {
  background: var(--kok-yellow);
}
body.high-contrast .calc__range::-moz-range-thumb {
  background: var(--kok-yellow);
}
/* Kill the generic input outline high-contrast.css puts on every <input> —
   the range must show only its track, no yellow box around it. */
body.high-contrast .calc__range {
  border: 0 !important;
  background: transparent !important;
}
body.high-contrast .calc__range::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, var(--kok-yellow), var(--kok-yellow)) 0 /
      var(--fill, 50%) 100% no-repeat,
    #333;
}
body.high-contrast .calc__range::-moz-range-progress {
  background: var(--kok-yellow);
}
/* Muted labels stay grey in the calc (global dark maps muted→white) */
body.high-contrast .calc__slider-labels,
body.high-contrast .calc__rata span,
body.high-contrast .calc__stat-label,
body.high-contrast .calc__disclaimer {
  color: #919395;
}
body.high-contrast .calc__stats {
  border-top-color: #2b2d2f;
}

@media (max-width: 719px) {
  .calc {
    padding: 12px;
  }
  .calc__periods {
    gap: 8px;
    margin-bottom: var(--space-sm) !important;
  }
  .calc__stats {
    gap: 4px;
  }
  .calc__slider {
    margin-bottom: var(--space-sm) !important;
  }
  .calc__rata {
    margin-bottom: var(--space-sm) !important;
  }
  .calc__slider-labels {
    margin-top: var(--space-xs) !important;
  }
  .calc__period::before {
    font-size: 8px !important;
  }

  .page-template-template-homepage section.main .inner {
    padding-bottom: var(--margin-sm) !important;
  }
}

/* ============================================
   Footer — dark link columns + gradient info/legal band (Figma).
   ============================================ */
.bottom-navs {
  position: relative;
  margin: 0;
  border-top: 0;
  padding: 72px 0 100px;
  background: var(--kok-dark-surface); /* Figma #141618 */
  color: var(--kok-white);
}
.bottom-navs .inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.bottom-navs__nav {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 12px;
}
.bottom-navs__title {
  margin: 0 0 8px;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: default;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: 27px;
  font-weight: var(--fw-semibold);
  color: var(--kok-white);
  white-space: normal;
}
.bottom-navs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 240px;
}
.bottom-navs__item {
  margin: 0;
}
.bottom-navs a,
.bottom-navs__link {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
}
.bottom-navs a:hover,
.bottom-navs__link:hover {
  color: var(--color-accent) !important;
  text-decoration: none;
}

/* Scroll-to-top circle straddling the top edge */
.bottom-navs .footer__to-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kok-gradient-brand);
  box-shadow: 0 6px 18px rgba(255, 90, 30, 0.35);
  color: var(--kok-white) !important;
  z-index: 2;
}
body.high-contrast .footer__to-top {
  background: var(--kok-yellow);
  box-shadow: none;
}

/* Gradient info + legal band — big rounded top-right corner reveals the dark
   section behind it (footer overlaps the dark section's empty bottom padding). */
.footer {
  position: relative;
  z-index: 1;
  margin-top: -80px;
  padding: 56px 0 40px;
  border-top-right-radius: 80px;
  background: var(--kok-gradient-brand);
  color: var(--kok-white);
}
body.high-contrast .footer {
  background: #3d3d0c;
  color: var(--kok-white);
}
.footer .inner {
  padding-top: 0;
}
.footer .main-information {
  display: flex;
  align-items: flex-start;
  /* wrap + min-width:0 — bez tego 4 kolumny z gapem 48px nie mieszcza sie
     ponizej ~780px i wypychaly strone w poziomie (scroll przy 720px). */
  flex-wrap: wrap;
  gap: 48px;
  text-align: left;
  padding: 0 0 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.footer .main-information > * {
  min-width: 0;
}
@media (max-width: 1024px) {
  .footer .main-information {
    gap: 24px 32px;
  }
}
.footer .main-information__logo-wrapper {
  margin: 0;
}
.footer .main-information__logo {
  height: 50px;
  width: auto;
  margin: 0;
  display: block;
}
.footer .main-information__item {
  padding: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
}
.footer .main-information__item p {
  margin: 0 0 4px;
}
.footer .main-information__item a {
  color: var(--kok-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer .main-information__item a:hover {
  text-decoration: underline;
}
.footer .main-information__item--contact {
  --contact-icon: 24px;
  --contact-gap: 14px;
  margin-right: auto;
}
.footer .main-information__item--contact a {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin-bottom: 6px;
  gap: var(--contact-gap);
}
.main-information__icon {
  flex: none;
  width: var(--contact-icon, 24px);
  height: var(--contact-icon, 24px);
}
.main-information__hours {
  font-size: var(--fs-sm);
  opacity: 0.9;
  margin-top: 6px;
  padding-left: calc(var(--contact-icon) + var(--contact-gap));
}

.footer__legal-notice {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  font-size: var(--fs-caption);
  line-height: 18px;
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.9);
}
.footer__legal-notice {
  font-size: var(--fs-caption);
}
.footer__legal-notice,
.footer__legal-notice p,
.footer__legal-notice li,
.footer__legal-notice span {
  color: rgba(255, 255, 255, 0.9) !important;
}
.footer__legal-notice p {
  margin: 0 0 12px;
}
/* Kontener ma juz --fs-caption, ale `.standard__desc p` (components.css:275) celuje
   wprost w akapit i wymusza --fs-base, wiec 12px nie dziedziczylo sie do <p>.
   Figma: 12px/18px. */
.footer__legal-notice p,
.footer__legal-notice li,
.footer__legal-notice span {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.footer__legal-notice p:last-child {
  margin-bottom: 0;
}
.footer__legal-notice a {
  color: var(--kok-white);
  text-decoration: underline;
}

/* Mobile: link columns become an accordion; info band stacks */
@media (max-width: 719px) {
  .calc__cta {
    font-size: var(--fs-base);
  }
  .bottom-navs {
    padding: 40px 0 100px;
  }
  .bottom-navs .inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .bottom-navs__nav:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0;
  }
  .bottom-navs__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px 0;
    cursor: pointer;
    font-size: var(--fs-base);
  }
  .bottom-navs__title::after {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("assets/images/faq-chevron.svg") no-repeat center /
      contain;
    mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
    transition: transform var(--transition);
  }
  .bottom-navs__nav.open .bottom-navs__title::after {
    transform: rotate(180deg);
  }
  .bottom-navs__list {
    display: none;
    max-width: none;
    padding: 0 0 16px;
  }
  .bottom-navs__nav.open .bottom-navs__list {
    display: flex;
  }

  .footer .main-information {
    flex-direction: column;
    gap: 20px;
  }
  .footer .main-information__item--contact {
    margin-right: 0;
  }
}

/* =====================================================================
   PRODUCT LANDING PAGE (template-produkty.php)
   Sections use design tokens so dark mode mostly comes for free via the
   body.high-contrast variable overrides; only the divergent bits (accent
   labels, olive icons, gradient borders) get explicit dark rules.
   ===================================================================== */
.product-hero .inner,
.pben__inner,
.psteps .inner,
.preq .inner,
.pnaco .inner,
.owu--product .inner,
.pseo .inner,
.misja--product .inner {
  /* border-box, zeby padding miescil sie w 1200px z makiety — bez tego sekcja
     wychodzila na 1227px i lamala wyrownanie wzgledem pozostalych sekcji */
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* ---- Hero ---- */
.product-hero {
  background: var(--color-surface);
  padding: 36px 0 64px;
}
.product-hero__inner {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 486px);
  gap: 64px;
  align-items: start;
}
/* FIREFOX: `background-clip` z LISTA warstw zawierajaca `text` jest przez FF
   raportowany jako wspierany (CSS.supports = true), ale renderowany zle — tekst
   zostaje przezroczysty i widac sama gradientowa plamke. Rozbijamy to na dwa
   elementy, bo tlo przyciete do liter jest NAJNIZSZA warstwa malowania elementu:
   wypelnienie doklejone pseudo-elementem zakrywaloby napis, a z `z-index: -1`
   uciekaloby pod tlo calej sekcji (`.product-hero` nie tworzy kontekstu
   nakladania). Stad wypelnienie i ramka na elemencie zewnetrznym, a gradient
   liter na wewnetrznym spanie. */
.product-hero__badge {
  display: inline-block;
  /* 9px+1px ramki = 10px z makiety; wczesniej ramke rysowal ::before w `inset: 0`,
     wiec nie powiekszala pudelka. */
  padding: 9px 17px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 28px;
  /* Gradient siega krawedzi (border-box), biel wypelnia srodek (padding-box).
     Ta lista NIE zawiera `text`, wiec Firefox obsluguje ja poprawnie. */
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    var(--kok-gradient-brand) border-box;
}
.product-hero__badge-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--kok-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
}
.product-hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 20px;
}
.product-hero__desc p {
  margin: 0 0 16px;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
}
.product-hero__desc p:first-child {
  font-weight: var(--fw-semibold);
}
.product-hero__desc p:last-child {
  margin-bottom: 0;
}
.product-hero__desc a {
  color: var(--color-link);
  text-decoration: underline;
}
.product-hero__aside {
  width: 100%;
}
.product-hero__aside .calc {
  background: var(--color-bg);
  max-width: none;
}
/* Powiększenie karty kalkulatora na dużych ekranach — ten sam współczynnik co na
   stronie głównej (liczy go main.js), żeby oba widoki wyglądały tak samo powyżej
   1600px. Skalujemy transformem, a nie szerokością kolumny, bo tylko wtedy rosną
   też fonty i odstępy wewnątrz karty — inaczej karta byłaby szersza, ale z tym
   samym drobnym tekstem co wcześniej.

   Transform nie przesuwa sąsiadów, więc miejsce rezerwujemy jawnie: kolumna
   dostaje szerokość karty PO przeskalowaniu, a hero rośnie dokładnie o tę różnicę,
   dzięki czemu kolumna tekstu zachowuje swoje 623px z makiety. Wysokość podaje JS
   (gotową, już przemnożoną), żeby brak skryptu nie zwinął asideu do zera.

   Przy skali 1 (czyli do 1600px) wszystkie wyliczenia dają wartości wyjściowe:
   hero 1200px, kolumna 486px — układ jest wtedy identyczny jak przed zmianą. */
@media (min-width: 1025px) {
  .page-template-template-produkty .product-hero {
    --prod-calc-w: 486px;
  }
  .page-template-template-produkty .product-hero__inner {
    /* `.inner` ma w main.css jawne `width: var(--inner-width)`, więc sam max-width
       nic by nie dał. Doliczamy różnicę do tej wartości, zamiast ją zastępować —
       dzięki temu poniżej 1600px (skala 1) szerokość zostaje bez zmian, razem
       z płynnym zwężaniem przez drabinkę rem. */
    width: calc(var(--inner-width) + var(--prod-calc-w) * (var(--hero-calc-scale, 1) - 1));
    max-width: calc(1200px + var(--prod-calc-w) * (var(--hero-calc-scale, 1) - 1));
    grid-template-columns: 1fr calc(var(--prod-calc-w) * var(--hero-calc-scale, 1));
  }
  .page-template-template-produkty .product-hero__aside {
    height: var(--prod-calc-h, auto);
  }
  .page-template-template-produkty .product-hero__aside .calc {
    width: var(--prod-calc-w);
    max-width: var(--prod-calc-w);
    /* Karta musi stać przy PRAWEJ krawędzi kolumny, żeby powiększenie z narożnika
       top right wypełniło ją co do piksela i nie weszło na kolumnę z tekstem.
       Zerujemy prawy margines jawnie — reguła bazowa `.calc` ma `margin: 0 auto`,
       przez co karta byłaby wyśrodkowana i rosła w lewo, pod tekst. */
    margin: 0 0 0 auto;
    transform: scale(var(--hero-calc-scale, 1));
    transform-origin: top right;
  }
}
.calc__single {
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}
.calc__single strong {
  font-weight: var(--fw-semibold);
  font-size: 22px;
}
.product-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.product-hero__media-img {
  width: 100%;
  height: auto;
  display: block;
}
.product-hero__media-img--dark {
  display: none;
}
/* ---- Benefits accordion ---- */
.pben {
  background: var(--color-bg);
  padding: 64px 0;
}
.pben__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: center;
}
.pben__media {
  display: flex;
  justify-content: center;
}
.pben__illu {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}
.pben__illu--dark {
  display: none;
}
.pben__item {
  border-bottom: 1px solid var(--color-border);
}
.pben__head {
  width: 100%;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  text-align: left;
}
.pben__label {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.pben__chevron {
  width: 20px;
  height: 20px;
  flex: none;
  -webkit-mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
  mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
  background: var(--color-text);
  transition: transform 0.3s ease;
}
.pben__item--open .pben__chevron {
  transform: rotate(180deg);
}
.pben__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.pben__item--open .pben__panel {
  grid-template-rows: 1fr;
}
.pben__panel-inner {
  overflow: hidden;
  min-height: 0;
}
.pben__panel-inner p {
  margin: 0 0 22px;
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
/* ---- 3 proste kroki ---- */
/* overflow-x: clip stops the decorative hand (which pokes into the right margin)
   from creating a horizontal scrollbar on mid-width screens, while still letting it
   poke upward (vertical stays visible). */
.psteps {
  background: var(--color-bg);
  padding: 65px 0;
  text-align: center;
  overflow-x: clip;
}
.psteps__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 8px;
}
.psteps__subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  margin: 0 0 6px;
}
.psteps__disclaimer {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  margin: 0 0 48px;
}
.psteps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}
.psteps__item {
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 22px 0px;
}
.psteps__item:first-child {
  padding-left: 0;
}
/* Card 3 surface is drawn as a ::before layer so the hand (z-index:-1) can tuck
   behind it where they overlap, yet still poke out past the box. A negative
   z-index on the hand can't go behind the parent's own background, and the
   opaque section background would hide it — the pseudo-element sidesteps both. */
.psteps__item--last {
  background: transparent;
  isolation: isolate;
  padding: 22px 24px;
}
.psteps__item--last::before {
  content: "";
  position: absolute;
  inset: -2px;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: linear-gradient(var(--color-bg), var(--color-bg)) padding-box, var(--kok-gradient-brand) border-box;
  z-index: 0;
}
.psteps__item--last > .psteps__head,
.psteps__item--last > .psteps__step-title,
.psteps__item--last > .psteps__step-desc {
  position: relative;
  z-index: 1;
}
.psteps__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.psteps__num {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex: none;
  background: var(--color-text);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
}
/* Figma arrow — a single SVG (thin line + arrowhead) used as a mask so it inherits
   the theme text colour; stretched to fill the flexible gap between the step badges. */
.psteps__arrow {
  flex: 1;
  height: 14px;
  background: var(--color-text);
  -webkit-mask: url("assets/images/process-arrow.svg") no-repeat center / 100% 100%;
  mask: url("assets/images/process-arrow.svg") no-repeat center / 100% 100%;
}
.psteps__step-title {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0 0 12px;
}
.psteps__step-desc {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  margin: 0;
}
/* Hand + accent scribbles anchored to step 3 — same size/placement as the original
   homepage .process section (hand pokes out above the top-right corner of card 3;
   light-theme decoration only). z-index:-1 tucks it behind the card surface
   (.psteps__item--last::before) where they overlap; it still shows outside the box. */
.psteps__hand {
  position: absolute;
  top: -168px;
  right: -70px;
  width: 169px;
  height: auto;
  pointer-events: none;
  z-index: -1;
}
.psteps__accent {
  position: absolute;
  bottom: -60px;
  right: -70px;
  width: 65px;
  height: auto;
  pointer-events: none;
}
body.high-contrast .psteps__hand {
  display: none;
}
.psteps__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.psteps__cta .standard__button,
.misja__cta .standard__button,
.offer-cta__cta .standard__button {
  width: auto;
  max-width: none;
  height: auto;
  padding: 16px 34px;
  font-size: var(--fs-lg);
  letter-spacing: normal;
}
@media (max-width: 719px) {
  .psteps__cta,
  .psteps__cta .standard__button {
    width: 100%;
  }
}

/* ---- "Skorzystaj z naszej oferty" — CTA + tagi produktowe ---- */
.offer-cta {
  padding: var(--margin-5xl) 0 var(--margin-7xl);
  text-align: center;
  background: var(--color-bg);
}
.offer-cta__title {
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}
.offer-cta__subtitle {
  max-width: 600px;
  margin: 0 auto var(--margin-2xl);
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
}
/* Tagi przychodzą z WYSIWYG jako czysty <ul> — pigułki nadaje selektor potomny */
.offer-cta__tags {
  margin: 0 0 var(--margin-2xl);
}
.offer-cta__tags ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.offer-cta__tags li {
  padding: var(--space-xs) var(--margin-lg);
  border: 1px solid var(--kok-pink);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--kok-black);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}
.offer-cta__tags a {
  color: inherit;
}
body.high-contrast .offer-cta__tags li {
  border-color: var(--kok-yellow);
  color: var(--kok-yellow);
}
.offer-cta__cta {
  display: flex;
  justify-content: center;
}
/* ---- Kto może otrzymać (wymagania) ---- */
.preq {
  background: var(--color-surface);
  padding: 64px 0;
  text-align: center;
}
.preq__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 8px;
}
.preq__subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  margin: 0 0 48px;
}
.preq__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}
.preq__card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 20px 26px;
}
.preq__icon {
  width: 56px;
  height: 56px;
  flex: none;
}
.preq__icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.preq__icon-img--dark {
  display: none;
}
.preq__card-title {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 4px;
}
.preq__card-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
  margin: 0;
}
/* ---- Na co przeznaczyć ---- */
.pnaco {
  background: var(--color-bg);
  padding: 64px 0;
}
.pnaco__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 40px;
}
.pnaco__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 12px;
  text-align: left;
}
.pnaco__lead {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  margin: 0;
}
.pnaco__box {
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 24px 26px;
  background: linear-gradient(var(--color-bg), var(--color-bg)) padding-box, var(--kok-gradient-brand) border-box;
}
.pnaco__box p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.pnaco__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pnaco__card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 24px;
}
.pnaco__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pnaco__card-title {
  font-size: var(--fs-lg);
  line-height: 25px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0;
}
.pnaco__icon {
  width: 60px;
  height: 60px;
  flex: none;
  margin-top: -20px;
}
.pnaco__icon-img {
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  object-fit: contain;
}
.pnaco__icon-img--dark {
  display: none;
}
.pnaco__card-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
  margin: 0;
}
/* ---- Misja / repr / SEO on product pages ---- */
.misja--product {
  background: var(--color-bg);
}
.misja__cta {
  margin-top: 48px;
}
.owu--product {
  background: var(--color-bg);
  padding: 0 0 40px;
}
.pseo {
  background: var(--color-bg);
  padding: 8px 0 72px;
}
.pseo__card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 44px 48px;
}
.pseo__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 24px;
}
.pseo__text p {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  margin: 0 0 16px;
}
.pseo__text p:last-child {
  margin-bottom: 0;
}
/* ---- Dark mode divergences ---- */
body.high-contrast .product-hero__badge {
  background: none;
  border-color: var(--color-text);
}
body.high-contrast .product-hero__badge-text {
  background: none;
  -webkit-text-fill-color: var(--color-text);
  color: var(--color-text);
}
body.high-contrast .product-hero__media-img--light {
  display: none;
}
body.high-contrast .product-hero__media-img--dark {
  display: block;
}
body.high-contrast .pben__label {
  color: var(--color-accent);
}
body.high-contrast .pben__chevron {
  background: var(--color-accent);
}
body.high-contrast .pben__illu--light {
  display: none;
}
body.high-contrast .pben__illu--dark {
  display: block;
}
body.high-contrast .psteps__item--last::before {
  background: none;
  border-color: var(--color-text);
}
body.high-contrast .psteps__num {
  background: transparent;
  color: var(--color-text);
}
body.high-contrast .preq__card {
  border: 1px solid #2b2d2f;
}
body.high-contrast .preq__icon-img--light,
body.high-contrast .pnaco__icon-img--light {
  display: none;
}
body.high-contrast .preq__icon-img--dark,
body.high-contrast .pnaco__icon-img--dark {
  display: block;
}
body.high-contrast .pnaco__box {
  background: none;
  border-color: var(--color-text);
}
/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .product-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pben__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .preq__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pnaco__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pnaco__head {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 719px) {
  .product-hero {
    padding: 24px 0 40px;
  }
  .product-hero__title {
    font-size: 29px;
    line-height: 35px;
  }
  .preq__grid {
    grid-template-columns: 1fr;
  }
  .pnaco__grid {
    grid-template-columns: 1fr;
  }
  .preq__title,
  .psteps__title,
  .pnaco__title {
    font-size: 24px;
    line-height: 30px;
  }
  .pseo__card {
    padding: 28px 22px;
  }
  .pseo__title {
    font-size: 24px;
    line-height: 30px;
  }
    /* Two-column step matching the Figma mobile makieta (node 4959-18736):
     [badge + gutter] [title over description]. The text column is indented so the
     down-arrow connector and the hand illustration live in the left gutter, clear
     of the text. */
     .psteps__head {
      grid-column: 1;
      grid-row: 1;
      margin-bottom: 0;
    }
    /* Horizontal inline arrow is desktop-only. */
    .psteps__arrow {
      display: none;
    }
    .psteps__step-title {
      grid-column: 2;
      grid-row: 1;
      align-self: center;
    }
    .psteps__step-desc {
      grid-column: 2;
      grid-row: 2;
      margin-top: 12px;
    }
    /* Vertical connector in the left gutter — same Figma arrow as desktop, rotated
       down: thin 1.5px shaft (::before) + fixed-size chevron head (::after). */
    .psteps__item:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 25px;
      transform: translateX(-50%);
      /* Figma (4959:18736): strzalka ma STALA dlugosc 88px (trzonek 80 + grot 8)
         i jest zakotwiczona 26px pod okregiem. Wcześniej `bottom: -40px`
         rozciagalo trzonek do wysokosci kroku, wiec kazda strzalka byla inna
         (156px i 135px) i o wiele dluzsza niz w makiecie. */
      top: 74px;
      height: 80px;
      /* 1px, nie 1.5px — pol piksela rozmywa sie na ekranach o DPR 1 i linia
         wychodzi nierowna (ta sama pulapka co w gradientowych ramkach badge'y). */
      width: 1px;
      background: var(--color-text);
    }
    .psteps__item:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 25px;
      transform: translateX(-50%);
      top: 154px; /* koniec trzonka (74 + 80) — bylo bottom: -44px */
      width: 14px;
      height: 8px;
      -webkit-mask: url("assets/images/process-arrow-head-down.svg") no-repeat center / contain;
      mask: url("assets/images/process-arrow-head-down.svg") no-repeat center / contain;
      background: var(--color-text);
    }
    /* Hand bleeds in from the left gutter onto card 3 (Figma mobile); accent dropped.
       Stays in front here (z-index:2) — in the narrow gutter, tucking it behind the
       card surface would leave it almost invisible. */
    .psteps__hand {
      display: block;
      top: 78px;
      bottom: auto;
      right: auto;
      left: -30px;
      width: 104px;
      z-index: 2;
    }
    .psteps__accent {
      display: none;
    }
  .psteps__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .psteps__item {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 16px;
    align-items: start;
  }
}
/* Product section headings have no gradient underline (matches Figma). */
.psteps__title::after,
.preq__title::after,
.pnaco__title::after {
  display: none;
}

/* ==========================================================================
   Notice bar — site-wide announcement above the header (e.g. "Przerwa
   techniczna"). Content/visibility come from ACF (Opcje → Pasek komunikatu).
   The bar is dark in both themes, matching the Figma mockup.
   ========================================================================== */
.notice-bar {
  background: #141618;
  color: var(--kok-white);
  position: relative;
  z-index: 30;
}
/* The header is position:fixed from 720px up, so it would sit on top of the
   bar. Pin it under whatever part of the bar is still on screen — the offset
   is published by the inline script in the header and kept in sync on scroll
   by main.js. Below 720px the header is sticky and needs no help. */
@media screen and (min-width: 720px) {
  .header {
    top: var(--notice-offset, 0px);
  }
}
.notice-bar__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--margin-md) 0;
}
.notice-bar__icon {
  flex-shrink: 0;
  line-height: 0;
}
.notice-bar__icon img {
  display: block;
  width: 82px;
  height: 82px;
}
.notice-bar__body {
  flex: 1 1 auto;
  min-width: 0;
}
.notice-bar__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-base);
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  color: var(--kok-orange);
}
.notice-bar__text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--kok-white);
}
.notice-bar__text p {
  margin: 0 0 var(--space-xs);
}
.notice-bar__text > *:last-child {
  margin-bottom: 0;
}
.notice-bar__text strong {
  font-weight: var(--fw-semibold);
}
.notice-bar__text a {
  color: var(--kok-white);
  text-decoration: underline;
}
.notice-bar__close {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* ==========================================================================
   Blog (Blog OK) — listing (home.php), artykuł (single.php), autor (author.php)
   Korzysta z .article-card. Kolory idą z tokenów, więc tryb ciemny
   (body.high-contrast) dostosowuje się sam.
   ========================================================================== */

/* --- Wspólny szkielet stron --- */
.blog-listing,
.blog-single,
.author-archive {
  padding-top: var(--margin-2xl);
  padding-bottom: 2rem;
}
@media screen and (max-width: 719px) {
  .blog-listing,
  .blog-single,
  .author-archive {
    padding-top: var(--margin-md);
  }
}

.blog-listing__title {
  font-size: 3.4rem;
  line-height: 1.2;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0.8rem 0 3.2rem;
}

.most-read__title,
.related-articles__title {
  font-size: 3.4rem;
  line-height: 1.2;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0 0 3.2rem;
}

/* --- Rząd filtrów (dropdown kategorii + wyszukiwarka) --- */
.blog-filters {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: 4.8rem;
}
.dropdown-input {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 38.7rem;
  max-width: 100%;
}
.dropdown-input__label {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: var(--fw-medium);
  color: var(--color-text-subtle);
}
.dropdown-input__control {
  position: relative;
}
.dropdown-input__control::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  pointer-events: none;
  background-color: var(--color-text);
  -webkit-mask: url("assets/images/faq-chevron.svg") no-repeat center / 1.6rem;
  mask: url("assets/images/faq-chevron.svg") no-repeat center / 1.6rem;
}
.dropdown-input__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.2rem 4rem 1.2rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
}
/* Focus: pomarańczowa obwódka marki (nie różowy akcent — ten czyta się jak błąd).
   Pola formularzy są wyłączone z globalnego niebieskiego *:focus-visible,
   więc ustawiamy własną. */
.dropdown-input__select:focus-visible,
.blog-search__input:focus-visible {
  outline: none;
  border-color: var(--kok-orange);
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.18);
}
body.high-contrast .dropdown-input__select:focus-visible,
body.high-contrast .blog-search__input:focus-visible {
  border-color: var(--kok-yellow);
  box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.28);
}

.blog-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 38.7rem;
  max-width: 100%;
}
.blog-search__input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 1.2rem 1.6rem 1.2rem 4.8rem;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-text);
  background: transparent;
}
.blog-search__input::placeholder {
  color: var(--color-text-subtle);
}
.blog-search__submit {
  position: absolute;
  left: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.notice-bar__close::before,
.notice-bar__close::after {
  content: "";
  position: absolute;
  width: 1.6rem;
  height: 2px;
  background: var(--kok-white);
  border-radius: 2px;
}
.notice-bar__close {
  position: relative;
}
.notice-bar__close::before {
  transform: rotate(45deg);
}
.notice-bar__close::after {
  transform: rotate(-45deg);
}
.notice-bar__close:hover::before,
.notice-bar__close:hover::after {
  background: var(--kok-orange);
}
/* Dark theme keeps the same dark bar; accent follows the yellow scheme. */
body.high-contrast .notice-bar__title {
  color: var(--kok-yellow);
}
body.high-contrast .notice-bar__close:hover::before,
body.high-contrast .notice-bar__close:hover::after {
  background: var(--kok-yellow);
}

/* Mobile: icon + close on a top row, copy underneath (per the mobile mockup). */
@media (max-width: 719px) {
  .notice-bar__inner {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--margin-sm) 0;
  }
  .notice-bar__icon {
    order: 0;
  }
  .notice-bar__icon img {
    width: 64px;
    height: 64px;
  }
  .notice-bar__close {
    order: 1;
    margin-left: auto;
  }
  .notice-bar__body {
    order: 2;
    flex-basis: 100%;
  }
}

/* ============================================================ */
/* O nas (template-about.php)                                    */
/* ============================================================ */

/* ---- Hero ---- */
.onas-hero {
  background: var(--color-surface);
  padding: var(--margin-2xl) 0 0;
}
.onas-hero__crumbs-row {
  margin-bottom: 0;
}
.onas-hero__inner {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 592px);
  gap: 64px;
  align-items: center;
}
.onas-hero__title {
  font-size: clamp(38px, 4.2vw, 61px);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0;
  max-width: 560px;
}
.onas-hero__accent {
  background: linear-gradient(90deg, var(--kok-orange) 0%, var(--kok-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.onas-hero__subtitle {
  font-size: 21px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 24px 0 0;
  max-width: 560px;
}
.onas-hero__media {
  min-width: 0;
}
.onas-hero__img {
  display: block;
  width: 100%;
  height: auto;
}
.onas-hero__img--dark {
  display: none;
}

/* Gradient divider between the hero and the shared values grid. */
.onas-divider {
  display: block;
  width: 384px;
  max-width: 60%;
  height: 4px;
  border-radius: 2px;
  margin: 72px auto 0;
  background: linear-gradient(90deg, var(--kok-orange) 0%, var(--kok-pink) 100%);
}

/* Values grid variant on O nas — the hero already carries the heading. */
.misja--onas {
  padding: 56px 0 88px;
}

/* ---- Story sections (25 lat / Technologia) ---- */
.onas-story {
  background: var(--color-bg);
  padding: 72px 0 24px;
}
.onas-story--rev {
  padding: 48px 0 72px;
}
.onas-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 72px;
  align-items: center;
}
.onas-story--rev .onas-story__inner {
  grid-template-columns: 1fr minmax(0, 620px);
}
.onas-story--rev .onas-story__media {
  order: 2;
}
.onas-story__media {
  min-width: 0;
}
.onas-story__illu {
  display: block;
  width: 100%;
  height: auto;
}
.onas-story__illu--dark {
  display: none;
}
.onas-story__title {
  font-size: 29px;
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 24px;
}
.onas-story__desc p {
  margin: 0 0 16px;
}
.onas-story__desc p:last-child {
  margin-bottom: 0;
}

/* ---- Stats bar (24/7, od 1999, 100% online, CTA) ---- */
.onas-stats {
  background: var(--color-bg);
  padding: 64px 0 56px;
}
.onas-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.onas-stats__card {
  /* Motyw nie ma globalnego border-box, wiec min-height liczylo sie do TRESCI:
     185 + 52 paddingu + 2 ramki = 239px, zamiast 187px z Figmy. */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 187px;
  padding: 26px 28px;
  border: 1px solid #e7e8e8;
  border-radius: 24px;
  background: var(--color-bg);
}
.onas-stats__value {
  font-size: 40px;
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0;
}
.onas-stats__value small {
  font-size: 21px;
  font-weight: var(--fw-medium);
}
.onas-stats__label {
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}
.onas-stats__cta {
  box-sizing: border-box; /* jak w .onas-stats__card — 187px calkowitej wysokosci wg Figmy */
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 187px;
  padding: 26px 28px;
  border-radius: 24px;
  background: var(--btn-primary-bg);
  text-decoration: none;
}
.onas-stats__cta:hover {
  background: var(--btn-primary-bg-hover);
}
.onas-stats__cta-text {
  flex: 1;
  font-size: 29px;
  line-height: 1.25;
  font-weight: var(--fw-semibold);
  color: var(--kok-white);
}
.onas-stats__cta-arrow {
  width: 32px;
  height: 32px;
  flex: none;
  align-self: flex-end;
  margin-bottom: 6px;
  -webkit-mask: url("assets/images/btn-arrow.svg") no-repeat center / contain;
  mask: url("assets/images/btn-arrow.svg") no-repeat center / contain;
  background: var(--kok-white);
}

/* ---- O nas: dark mode (high-contrast) ---- */
body.high-contrast .onas-hero__accent {
  background: none;
  -webkit-text-fill-color: var(--kok-white);
  color: var(--kok-white);
}
body.high-contrast .onas-hero__img--light {
  display: none;
}
body.high-contrast .onas-hero__img--dark {
  display: block;
}
body.high-contrast .onas-divider {
  background: var(--kok-white);
}
body.high-contrast .onas-story__illu--light {
  display: none;
}
body.high-contrast .onas-story__illu--dark {
  display: block;
}
body.high-contrast .onas-stats__card {
  border-color: #b4b6b7;
}
body.high-contrast .onas-stats__cta {
  background: var(--kok-yellow);
}
body.high-contrast .onas-stats__cta .onas-stats__cta-text {
  color: var(--kok-black) !important;
}
body.high-contrast .onas-stats__cta-arrow {
  background: var(--kok-black);
}

/* ---- O nas: mobile ---- */
@media screen and (max-width: 719px) {
  .onas-hero {
    padding-top: var(--margin-md);
  }
  .onas-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .onas-hero__title {
    font-size: clamp(30px, 8.7vw, 34px);
    max-width: 280px;
  }
  .onas-hero__subtitle {
    font-size: 18px;
  }
  .onas-divider {
    width: 176px;
    margin-top: 48px;
  }
  .misja--onas {
    padding: 40px 0 56px;
  }
  .onas-story {
    padding: 48px 0 8px;
  }
  .onas-story--rev {
    padding: 32px 0 48px;
  }
  .onas-story__inner,
  .onas-story--rev .onas-story__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .onas-story--rev .onas-story__media {
    order: 0;
  }
  .onas-story__title {
    font-size: 25px;
  }
  .onas-stats {
    padding: 40px 0;
  }
  .onas-stats__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .onas-stats__card,
  .onas-stats__cta {
    min-height: 0;
  }
  .onas-stats__card {
    gap: 24px;
  }
  .onas-stats__value {
    font-size: 34px;
  }
  .onas-stats__cta-text {
    font-size: var(--fs-lg);
  }
}

/* ---- O nas: tablet ---- */
@media screen and (min-width: 720px) and (max-width: 1239px) {
  .onas-hero__inner {
    grid-template-columns: 1fr minmax(320px, 480px);
    gap: 40px;
  }
  /* Story sections stack like on mobile: image above text in both variants;
     the illustration is capped and centered instead of filling the column. */
  .onas-story__inner,
  .onas-story--rev .onas-story__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .onas-story--rev .onas-story__media {
    order: 0;
  }
  .onas-story__media {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .onas-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.blog-search__submit::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--color-text);
  -webkit-mask: url("assets/images/search.svg") no-repeat center / contain;
  mask: url("assets/images/search.svg") no-repeat center / contain;
}

/* --- Siatka kart --- */
.blog-grid {
  display: grid;
  gap: 4.8rem 2.4rem;
}
/* minmax(0, 1fr), nie samo 1fr. `1fr` znaczy `minmax(auto, 1fr)`, więc minimalną
   szerokością toru jest min-content karty. Gdy `width: 100%` na obrazku chwilowo
   nie obowiązuje (obrazki kart są leniwe — przy szybkim scrollu przeglądarka
   rozwiązuje kilkadziesiąt naraz), do rachunku wchodzi naturalna szerokość
   obrazka i tory puchną do 3000px: jedna karta zajmuje cały ekran, a jej pudełko
   16/10 rośnie proporcjonalnie. `html { overflow-x: hidden }` chowa wtedy pasek
   przewijania, więc zamiast niego widać „jedną wielką kolumnę".
   Zero 0 jako minimum odcina ten mechanizm; przy poprawnym stanie tory wychodzą
   co do piksela takie same jak wcześniej. */
.blog-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blog-grid .article-card__title {
  font-size: var(--fs-lg);
  line-height: 2.7rem;
}

/* --- Paginacja --- */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 4.8rem;
}
.blog-pagination__item,
.blog-pagination a.blog-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  height: 3.6rem;
  padding: 0 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-text);
  text-decoration: none;
}
.blog-pagination a.blog-pagination__item:hover {
  background: var(--color-surface);
}
.blog-pagination__item--active {
  background: #141618;
  color: var(--kok-white);
  font-weight: var(--fw-semibold);
}
.blog-pagination .blog-pagination__arrow {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background-color: var(--color-text);
  -webkit-mask: url("assets/images/nav-arrow.svg") no-repeat center / 2rem;
  mask: url("assets/images/nav-arrow.svg") no-repeat center / 2rem;
}
.blog-pagination__arrow--prev {
  transform: rotate(180deg);
}
.blog-pagination .dots {
  min-width: auto;
}

.blog-listing__empty {
  font-size: 1.6rem;
  color: var(--color-text-muted);
  padding: 2rem 0 4rem;
}

/* --- Odstępy między sekcjami --- */
.most-read {
  /* Dół większy niż góra: to ostatnia sekcja przed stopką, a przy 2rem karty
     kleiły się do ciemnego pasa (18px). 6rem = 54px, czyli rytm z reszty serwisu
     (wpis blogowy ma 48px, strona główna 60px przed stopką). */
  padding: 4rem 0 6rem;
}
.related-articles {
  padding: 2rem 0 4rem;
}

/* ==========================================================================
   Pojedynczy artykuł
   ========================================================================== */
.blog-single__head {
  margin-bottom: 2.4rem;
}
.blog-single__title {
  font-size: 3.4rem;
  line-height: 1.25;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0 0 1.2rem;
}
.blog-single__meta {
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}
.blog-single__hero {
  margin: 0 0 4rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.blog-single__hero img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Kolejność w DOM jest mobilna (wstęp → kolumna boczna → autor → reszta). Od 1024px
   w górę kolumna boczna jest podnoszona do własnej kolumny po prawej, a części
   artykułu układają się w lewej — dzięki temu desktop wygląda jak w projekcie
   bez drugiej kopii markupu. */
.blog-single__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38.4rem;
  /* Odstęp między wierszami zostaje 0 — pionowy rytm między częściami artykułu
     dają ich własne marginesy, tak jak zanim stały się elementami gridu. */
  column-gap: 4.8rem;
  row-gap: 0;
  /* Kolumna boczna musi rozciągnąć się na wysokość wiersza, żeby jej sticky
     dziecko miało gdzie się kleić podczas scrollowania artykułu
     (align-items:start zwinąłby kolumnę do wysokości treści i zepsuł sticky). */
  align-items: stretch;
}
.blog-single__layout > * {
  grid-column: 1;
  min-width: 0;
}
.blog-single__layout > .blog-single__sidebar {
  grid-column: 2;
  /* `1 / -1` tutaj NIE zadziała: -1 odnosi się do siatki jawnej, a te wiersze
     powstają automatycznie — kolumna boczna zajęłaby tylko pierwszy wiersz,
     a jej sticky dziecko straciłoby potrzebny zapas scrolla. Zamiast tego
     rozciągamy ponad realną liczbę wierszy (artykuł daje ich ok. 4);
     nadmiarowe wiersze są puste i mają zerową wysokość. */
  grid-row: 1 / span 50;
}

/* Typografia treści artykułu */
.blog-single__content {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-text);
}
.blog-single__content > *:first-child {
  margin-top: 0;
}
.blog-single__content > *:last-child {
  margin-bottom: 0;
}
.blog-single__content h2 {
  font-size: 2.4rem;
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  margin: 3.2rem 0 1.4rem;
  scroll-margin-top: 10rem;
}
.blog-single__content h3 {
  font-size: 2rem;
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  margin: 2.6rem 0 1.2rem;
  scroll-margin-top: 10rem;
}
.blog-single__content p {
  margin: 0 0 1.6rem;
}
.blog-single__content ul,
.blog-single__content ol {
  margin: 0 0 1.6rem;
  padding-left: 2.2rem;
}
.blog-single__content li {
  margin-bottom: 0.8rem;
}
.blog-single__content a {
  color: var(--color-link);
  text-decoration: underline;
}
.blog-single__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.blog-single__tags {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.blog-single__tags a {
  font-size: 1.3rem;
  padding: 0.4rem 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-decoration: none;
}

/* Box autora (wewnątrz treści artykułu) */
.author-byline {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--margin-lg);
  margin: 2.4rem 0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.author-byline__id {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
  flex: 1 1 auto;
}
.author-byline__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-border);
}
.author-byline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author-byline__name {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.author-byline__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--margin-sm) var(--margin-2xl);
  border-radius: var(--radius-pill);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.author-byline__btn:hover {
  background: var(--btn-primary-bg-hover);
}

/* Kolumna boczna */
.blog-single__sidebar-sticky {
  position: sticky;
  top: 10rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.blog-cta {
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  overflow: hidden; /* przycina grafikę na całą szerokość do zaokrąglonych rogów karty */
}
.blog-cta__media {
  line-height: 0;
}
.blog-cta__media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 344 / 192;
  object-fit: cover;
}
.blog-cta__title {
  font-size: 1.7rem;
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0;
  padding: 2rem 2rem 0;
}
.blog-cta__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin: 1.6rem 2rem 2rem;
  padding: 1.2rem 2.8rem;
  border-radius: var(--radius-pill);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--transition), filter var(--transition);
}
.blog-cta__btn:hover {
  background: var(--btn-primary-bg-hover);
}

/* Spis treści */
/* Spis treści — styl „lewej szyny" (bez karty). Każda pozycja ma lewą krawędź
   2px tworzącą ciągłą szynę; aktywny odcinek jest wyróżniony kolorem. */
.blog-toc {
  padding: 2rem 0;
}
.blog-toc__title {
  font-size: 1.9rem;
  line-height: 2.7rem;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0 0 1.6rem;
  padding: 0 1.6rem;
}
.blog-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.blog-toc__item {
  border-left: 2px solid #e7e8e8;
  padding-left: 2rem;
  padding-right: 0.4rem;
}
.blog-toc__item--h3 {
  padding-left: 3.6rem;
}
.blog-toc__item a {
  display: block;
  padding: 0.4rem 0;
  font-size: 1.4rem;
  line-height: 2.1rem;
  font-weight: var(--fw-regular);
  color: #222628;
  text-decoration: none;
}
.blog-toc__item a:hover {
  color: var(--color-text);
}
.blog-toc__item.is-active {
  border-left-color: var(--kok-pink);
}
.blog-toc__item.is-active a {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
body.high-contrast .blog-toc__item {
  border-left-color: var(--color-border);
}
body.high-contrast .blog-toc__item a {
  color: var(--kok-subtext-200);
}
body.high-contrast .blog-toc__item.is-active {
  border-left-color: var(--kok-yellow);
}
body.high-contrast .blog-toc__item a:hover,
body.high-contrast .blog-toc__item.is-active a {
  color: var(--kok-white);
}

/* ==========================================================================
   Archiwum autora
   ========================================================================== */
.author-hero {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin: 1.2rem 0 4.8rem;
}
.author-hero__avatar {
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface);
}
.author-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author-hero__name {
  font-size: 3.4rem;
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 0.8rem;
}
.author-hero__bio {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 78rem;
}

/* Moduł RRSO na wpisie blogowym — CIĄGŁY TEKST wg Figmy, nie dwukolumnowa karta
   (ta zostaje na stronie głównej i produktach, patrz .owu / .repr-card wyżej).
   Typografia wzięta z panelu sekcji SEO ze strony głównej, bo w makiecie oba
   bloki wyglądają tak samo: drobny, wygaszony tekst w jasnym pudełku. */
.blog-repr {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.blog-repr__box {
  box-sizing: border-box;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
}
.blog-repr__title {
  font-size: 25px;
  line-height: 31px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}
.blog-repr__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
}
/* Kreska rozdziela POLA z Opcji (ratalna / jednoratalna / nota prawna), a nie
   pojedyncze akapity. Każde pole to jeden `.blog-repr__part`; linię rysujemy jako
   `border-top` na każdym bloku poza pierwszym, więc nie zostaje wisząca kreska
   nad pierwszym ani pod ostatnim — także gdy któreś pole jest puste i blok
   w ogóle się nie renderuje. */
.blog-repr__part + .blog-repr__part {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
}
.blog-repr__text p {
  margin: 0 0 var(--space-sm);
}
.blog-repr__text p:last-child {
  margin-bottom: 0;
}
/* Nagłówki przykładów („Przykład reprezentatywny dla…”) redakcja wpisuje jako
   <strong> w edytorze — wyróżniamy je kolorem tekstu podstawowego. */
.blog-repr__text strong {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}
.blog-repr__text a {
  color: inherit;
  text-decoration: underline;
}
@media (max-width: 719px) {
  .blog-repr__box {
    padding: var(--space-lg);
  }
  .blog-repr__title {
    font-size: 20px;
    line-height: 26px;
  }
}

/* ==========================================================================
   Responsywność
   ========================================================================== */
@media (max-width: 1023px) {
  /* Jedna kolumna: wszystko wraca do zwykłej kolejności z DOM, która jest już
     mobilna — kolumna boczna ląduje między wstępem a boxem autora. */
  .blog-single__layout {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .blog-single__layout > .blog-single__sidebar {
    grid-column: 1;
    grid-row: auto;
    margin: 3.2rem 0;
  }
  .blog-single__sidebar-sticky {
    position: static;
  }
  .blog-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 719px) {
  /* MB-01: na mobile wyszukiwarka stoi NAD listą kategorii. Przestawiamy tylko
     wizualnie — kolejność w DOM zostaje desktopowa (kategoria z lewej, szukajka
     z prawej), żeby tam focus szedł zgodnie z układem lewo→prawo. */
  .blog-filters {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg); /* MB-02: było 16px, za ciasno */
  }
  .blog-filters .blog-search {
    order: -1;
  }
  .dropdown-input,
  .blog-search {
    width: 100%;
  }
  .blog-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-listing__title,
  .blog-single__title,
  .most-read__title,
  .related-articles__title,
  .author-hero__name {
    font-size: 2.8rem;
  }
  .author-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }
  .blog-single__hero {
    border-radius: var(--radius-md);
    margin-bottom: 3.2rem;
  }
}

/* --- Pasmo tabletowe: utrzymanie czytelnego tekstu artykułu ----------------
   Między 720px a 1260px motyw zjeżdża z :root z 10px aż do 5px, żeby sztywne
   `.inner` (136.4rem) zmieściło się w oknie — skaluje w ten sposób cały
   desktopowy layout. Razem z nim jadą wszystkie rozmiary w rem, przez co treść
   artykułu spada do ~9.6px, a spis treści do ~8.4px — nieczytelne.
   Layout dalej się skaluje (to mechanizm legacy, wspólny z resztą serwisu);
   wypinamy z niego tylko typografię bloga, podaną w px, żeby trzymała rozmiar
   projektowy. Wartości odpowiadają rozmiarom w rem przy roocie 10px,
   czyli rozmiarom z Figmy.
   -------------------------------------------------------------------------- */
@media (min-width: 720px) and (max-width: 1259px) {
  .blog-single__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }
  .blog-single__meta {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }
  .blog-single__content {
    font-size: var(--fs-base);
  }
  .blog-single__content h2 {
    font-size: 24px;
  }
  .blog-single__content h3 {
    font-size: 20px;
  }
  .blog-single__tags a {
    font-size: 13px;
  }
  .blog-toc__title {
    font-size: 19px;
    line-height: 27px;
  }
  .blog-toc__item a {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }
  .blog-cta__title {
    font-size: 17px;
  }
  .blog-cta__btn,
  .author-byline__btn {
    font-size: var(--fs-base);
  }
}

/* Logotypy na mobile = slider: jeden logotyp, pod nim strzalka ← kropki → (Figma
   5138:42197). Klasy nawigacji odwzorowuja wzorzec z .articles-swiper__nav. */
@media (max-width: 719px) {
  /* main.css dodaje tu `margin-top: 7.3rem` (73px), co sumowalo sie z 64px dolnego
     paddingu poprzedniej sekcji — nad tytulem wychodzilo 137px zamiast 70px z makiety. */
  .reliable-company {
    margin-top: 0;
  }
  .reliable-swiper .swiper-wrapper {
    flex-wrap: nowrap;
    gap: 0;
    /* KONIECZNE: `center` z reguly desktopowej centrowalby przepelniona belke
       slajdow i przesuwal ja w lewo (~188px), mimo translate=0 w Swiperze. */
    justify-content: flex-start;
  }
  .reliable-swiper .swiper-slide {
    width: 100%;
    justify-content: center;
    display: flex;
  }
  .reliable-swiper__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
  }
  .reliable-swiper__prev,
  .reliable-swiper__next {
    width: 28px;
    height: 16px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: var(--color-text);
    -webkit-mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
    mask: url("assets/images/nav-arrow.svg") no-repeat center / contain;
  }
  .reliable-swiper__prev {
    transform: scaleX(-1);
  }
  .reliable-swiper .swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .reliable-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    background: var(--color-border);
    opacity: 1;
  }
  .reliable-swiper .swiper-pagination-bullet-active {
    background: var(--color-accent);
  }
}

/* Box autora na mobile — Figma 4957-35855: awatar + nazwa w pierwszym rzedzie,
   przycisk „O autorze" w drugim, wyrownany do prawej. Bez tego `flex` bez
   zawijania wciskal oba elementy w jeden rzad i przycisk nachodzil na nazwe
   (na 390px o ~12px). */
@media (max-width: 719px) {
  .author-byline {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }
  .author-byline__btn {
    align-self: flex-end;
  }
}

/* --- Tryb ciemny (body.high-contrast): poprawki nieobjęte tokenami --- */
body.high-contrast .blog-pagination__item--active {
  background: var(--kok-yellow);
  color: var(--kok-black);
}
/* Kolory .blog-cta (tło surface + gradientowy/żółty przycisk) idą z tokenów. */
body.high-contrast .author-byline__btn {
  background: var(--kok-yellow);
  color: var(--kok-black);
}
body.high-contrast .blog-single__content a {
  color: var(--kok-yellow);
}

/* =====================================================================
   Jak pożyczać odpowiedzialnie (template-odpowiedzialnie.php)
   ===================================================================== */
.odp-hero .inner,
.odp-def .inner,
.odp-prep .inner,
.odp-list .inner,
.odp-wspiera .inner,
.odp-summary .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- Hero ---- */
.odp-hero {
  background: var(--color-surface);
  padding: 32px 0 64px;
}
.odp-hero__grid {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 592px);
  gap: 58px;
  align-items: center;
}
.odp-hero__title {
  font-size: clamp(32px, 3vw, 34px);
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.odp-hero__subtitle {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-body);
}

/* ---- Definicja ---- */
.odp-def {
  padding: 96px 0;
}
.odp-def__intro {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 486px);
  gap: 64px;
  align-items: start;
}
.odp-def__title {
  font-size: clamp(30px, 2.8vw, 34px);
  line-height: 1.2;
  text-align: left;
}
.odp-def__lead {
  margin-top: 20px;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--color-text-body);
}
.odp-def__box {
  border: 2px solid transparent;
  border-radius: var(--radius-md, 16px) 0 var(--radius-md, 16px) var(--radius-md, 16px);
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(135deg, var(--kok-orange), var(--kok-pink)) border-box;
  padding: 24px 28px;
}
.odp-def__box p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}
.odp-def__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.odp-card {
  background: var(--color-surface);
  border-radius: var(--radius-md, 16px);
  padding: 24px 20px;
}
.odp-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: default;
}
.odp-card__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}
.odp-card__icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.odp-card__icon-img--dark {
  display: none;
}
body.high-contrast .odp-card__icon-img--light {
  display: none;
}
body.high-contrast .odp-card__icon-img--dark {
  display: block;
}
.odp-card__title {
  flex: 1;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.odp-card__chevron {
  display: none;
}
.odp-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
}
@media screen and (min-width: 720px) {
  .odp-card__head {
    display: block;
    pointer-events: none;
  }
  .odp-card__icon {
    margin-bottom: 24px;
  }
  .odp-card__title {
    display: block;
  }
  .odp-card__panel {
    display: block;
  }
  .odp-card__panel-inner {
    margin-top: 12px;
  }
}
body.high-contrast .odp-card {
  background: var(--color-surface-alt);
}
body.high-contrast .odp-card__desc {
  color: var(--color-text-body);
}

/* ---- Jak przygotować się ---- */
.odp-prep {
  padding: 24px 0 96px;
}
.odp-prep__title {
  text-align: center;
  font-size: clamp(30px, 2.8vw, 34px);
  line-height: 1.2;
  margin-bottom: 48px;
}
.odp-prep__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.odp-prep__card {
  background: var(--color-bg);
  border: 1px solid var(--kok-gray-200);
  border-radius: var(--radius-md, 16px);
  padding: 24px 20px;
}
.odp-prep__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.odp-prep__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}
.odp-prep__icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.odp-prep__icon-img--dark {
  display: none;
}
body.high-contrast .odp-prep__icon-img--light {
  display: none;
}
body.high-contrast .odp-prep__icon-img--dark {
  display: block;
}
.odp-prep__num {
  font-size: 48px;
  line-height: 1;
  font-weight: var(--fw-semibold);
  color: var(--kok-gray-200);
}
.odp-prep__card-title {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: 12px;
}
.odp-prep__card-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
}
body.high-contrast .odp-prep__card {
  border-color: var(--kok-gray-800);
}
body.high-contrast .odp-prep__num {
  color: var(--kok-gray-800);
}
body.high-contrast .odp-prep__card-desc {
  color: var(--color-text-body);
}

/* ---- Listy: na co zwrócić uwagę / najczęstsze błędy ---- */
.odp-list {
  padding: 48px 0;
}
.odp-list--check {
  padding-top: 24px;
}
.odp-list--fail {
  padding-bottom: 96px;
}
.odp-list__inner {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 578px);
  gap: 52px;
  align-items: start;
}
.odp-list__title {
  font-size: clamp(30px, 2.8vw, 34px);
  line-height: 1.2;
  text-align: left;
}
.odp-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
}
.odp-list__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.odp-list__icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
.odp-list__icon-img {
  width: 24px;
  height: 24px;
}
.odp-list__icon-img--dark {
  display: none;
}
body.high-contrast .odp-list__icon-img--light {
  display: none;
}
body.high-contrast .odp-list__icon-img--dark {
  display: block;
}
.odp-list__item-title {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: 8px;
}
.odp-list__item-desc {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}
body.high-contrast .odp-list__item-desc {
  color: var(--color-text-body);
}

/* ---- Jak KredytOK wspiera ---- */
.odp-wspiera {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  padding: 96px 0;
}
/* The artwork scales with the viewport (vw units mirror the 1440px design:
   width 1683/1440, top offset 88/1440), so the composition looks exactly like
   Figma at 1440px and simply grows with wider screens; the section's
   overflow:hidden crops the bleed. */
.odp-wspiera__decor {
  position: absolute;
  top: 6.111vw;
  left: 50%;
  transform: translateX(-50%);
  width: 116.875vw;
  height: auto;
  max-width: none;
  pointer-events: none;
}
body.high-contrast .odp-wspiera__decor {
  display: none;
}
.odp-wspiera__inner {
  position: relative;
  z-index: 1;
}
.odp-wspiera__title {
  font-size: clamp(30px, 2.8vw, 34px);
  line-height: 1.2;
  margin-bottom: 32px;
  max-width: 640px;
  text-align: left;
}
.odp-wspiera__desc {
  max-width: 780px;
}
.odp-wspiera__desc p {
  color: var(--color-text-body);
}
.odp-wspiera__desc p + p {
  margin-top: 16px;
}
.odp-wspiera__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.odp-wspiera__card {
  background: var(--color-bg);
  border-radius: var(--radius-md, 16px);
  padding: 28px 36px;
}
.odp-wspiera__card-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: 10px;
}
.odp-wspiera__card-sub {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}
body.high-contrast .odp-wspiera__card {
  background: var(--color-surface-alt);
}
body.high-contrast .odp-wspiera__card-sub {
  color: var(--color-text-body);
}
.odp-wspiera__note {
  margin-top: 24px;
  box-sizing: border-box;
  max-width: 588px;
  border: 2px solid transparent;
  border-radius: var(--radius-md, 16px) 0 var(--radius-md, 16px) var(--radius-md, 16px);
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(135deg, var(--kok-orange), var(--kok-pink)) border-box;
  padding: 24px 28px;
}
.odp-wspiera__note-title {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: 8px;
}
.odp-wspiera__note-desc {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}
body.high-contrast .odp-def__box,
body.high-contrast .odp-wspiera__note {
  background:
    linear-gradient(var(--color-surface-alt), var(--color-surface-alt)) padding-box,
    linear-gradient(var(--kok-white), var(--kok-white)) border-box;
}
body.high-contrast .odp-def__box {
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--kok-white), var(--kok-white)) border-box;
}
body.high-contrast .odp-def__box p,
body.high-contrast .odp-wspiera__note-desc {
  color: var(--color-text-body);
}

/* ---- Podsumowanie ---- */
.odp-summary {
  background: var(--color-surface);
  padding: 96px 0;
  margin-top: 0;
}
.odp-summary__inner {
  max-width: 1000px;
  text-align: center;
}
.odp-summary__title {
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.2;
  margin-bottom: 24px;
}
.odp-summary__desc p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-body);
}
.odp-summary__desc p + p {
  margin-top: 16px;
}

/* ---- Odpowiedzialnie: tablet ---- */
@media screen and (min-width: 720px) and (max-width: 1239px) {
  .odp-hero__grid,
  .odp-def__intro,
  .odp-list__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .odp-def__cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .odp-prep__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Odpowiedzialnie: mobile ---- */
@media screen and (max-width: 719px) {
  .odp-hero {
    padding: 16px 0 48px;
  }
  .odp-hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .odp-def {
    padding: 64px 0;
  }
  .odp-def__intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .odp-def__cards {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 40px;
  }
  .odp-card {
    padding: 0;
  }
  .odp-card__head {
    padding: 16px 20px;
    cursor: pointer;
  }
  .odp-card__icon,
  .odp-card__icon-img {
    width: 40px;
    height: 40px;
  }
  .odp-card__chevron {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    -webkit-mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
    mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
    background-color: var(--color-text);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .odp-card.open .odp-card__chevron {
    transform: rotate(180deg);
  }
  .odp-card__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition:
      grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.28s;
    opacity: 0;
  }
  .odp-card.open .odp-card__panel {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .odp-card__panel-inner {
    overflow: hidden;
    min-height: 0;
  }
  .odp-card__desc {
    margin: 0 20px 20px;
  }
  .odp-prep {
    padding: 8px 0 64px;
  }
  .odp-prep__title {
    text-align: left;
    margin-bottom: 32px;
  }
  .odp-prep__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .odp-list {
    padding: 32px 0;
  }
  .odp-list--fail {
    padding-bottom: 64px;
  }
  .odp-list__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .odp-list__items {
    gap: 28px;
  }
  .odp-wspiera {
    padding: 64px 0;
  }
  .odp-wspiera__cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
  }
  .odp-wspiera__card {
    padding: 24px;
  }
  .odp-wspiera__note {
    margin-top: 16px;
  }
  .odp-wspiera__decor {
    top: auto;
    bottom: 40px;
    left: 0;
    transform: none;
    margin-left: -45px;
    width: 1200px;
    height: auto;
  }
  .odp-summary {
    padding: 64px 0;
  }
}

/* ============================================================ */
/* Członkostwo w ZPF (template-zpf.php)                          */
/* Figma: 4167-16312 (light), 4817-19343 (dark), 4969-16253 (mobile). */
/* ============================================================ */

.zpf-inner {
  box-sizing: border-box;
  max-width: 1248px; /* 1200 treści + 2×24 marginesu bocznego (Figma) */
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Hero ---- */
.zpf-hero {
  background: var(--color-surface);
  padding: 48px 0;
}
.zpf-hero__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 568px);
  column-gap: 40px;
  align-items: start;
}
.zpf-hero__title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
  color: var(--color-text);
}
.zpf-hero__lead {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-body);
}
.zpf-hero__logo {
  display: block;
  width: 269px;
  height: auto;
  margin-top: 36px;
}
.zpf-hero__logo--dark {
  display: none;
}

/* ---- "Czym jest ZPF?" — ramka gradientowa ---- */
.zpf-def {
  padding: 64px 0;
  background: var(--color-bg);
}
.zpf-def__box {
  box-sizing: border-box;
  max-width: 832px;
  margin: 0 auto;
  padding: 36px 32px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(135deg, var(--kok-orange), var(--kok-pink)) border-box;
  text-align: center;
}
.zpf-def__title {
  margin: 0 0 30px;
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
  color: var(--color-text);
}
.zpf-def__text p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-body);
}

/* ---- "Co to oznacza" + lista gwarancji ---- */
.zpf-member {
  padding: 62px 0 64px;
  background: var(--color-bg);
}
.zpf-member__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  align-items: start;
}
.zpf-member__title {
  margin: 0 0 32px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
  color: var(--color-text);
}
.zpf-member__desc p {
  margin: 0 0 24px;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-body);
}
.zpf-member__desc p:last-child {
  margin-bottom: 0;
}
.zpf-bullets {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zpf-bullet {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 20px;
  align-items: start;
}
.zpf-bullet__icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: url("assets/images/zpf-check.svg") no-repeat center / contain;
}
.zpf-bullet__title {
  margin: 0;
  font-size: 18px;
  line-height: var(--lh-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.zpf-bullet__desc {
  margin: 4px 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

/* ---- Odpowiedzialny rynek + kluczowe informacje (jedno szare pasmo) ---- */
.zpf-market {
  position: relative;
  overflow: hidden;
  padding: 60px 0 64px;
  background: var(--color-surface);
}
/* Dekoracyjne fale z Figmy — tylko jasny motyw, wykadrowane przez overflow sekcji */
.zpf-market__waves {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* Fale muszą zawsze wystawać poza kadr (w Figmie: 1685px przy oknie 1440),
     więc rosną razem z sekcją, z zachowaniem proporcji eksportu. Kotwiczymy je
     DOŁEM (translateY = 30,8% wysokości = wystawanie spod sekcji jak w Figmie),
     żeby przy powiększeniu nadmiar uciekał w górę, poza kadr, a nie zostawiał
     ucietego łuku nad pasem CTA. */
  width: calc(100% + 246px);
  min-width: 1685px;
  aspect-ratio: 1653.8 / 920.6;
  transform: translate(-50%, 30.8%);
  background: url("assets/images/zpf-fale.svg") no-repeat center top / 100% 100%;
  pointer-events: none;
}
.zpf-market .zpf-inner {
  position: relative;
  z-index: 1;
}
.zpf-market__title {
  margin: 0 0 24px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
  color: var(--color-text);
}
.zpf-market__desc p {
  margin: 0;
  max-width: 792px;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-body);
}
.zpf-market__subtitle {
  margin: 100px 0 48px;
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}
.zpf-market__boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.zpf-box {
  box-sizing: border-box;
  padding: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.zpf-box__title {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-text);
}
.zpf-box__desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
}

/* ---- CTA "Zaufaj sprawdzonemu partnerowi" ---- */
.zpf-cta {
  padding: 60px 0 64px;
  background: var(--kok-gradient-brand);
  text-align: center;
}
.zpf-cta__title {
  margin: 0 0 16px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
  color: var(--kok-white);
}
.zpf-cta__desc {
  max-width: 736px;
  margin: 0 auto;
  font-size: var(--fs-lg);
  line-height: 27px;
  color: var(--kok-white);
}
.zpf-cta__btn {
  display: inline-block;
  margin-top: 36px;
  padding: 12px 36px;
  border-radius: var(--radius-pill);
  background: var(--kok-white);
  color: var(--kok-black);
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-medium);
  transition: var(--transition);
}
.zpf-cta__btn:hover {
  background: var(--kok-gray-100);
}

/* ---- Zasady Dobrych Praktyk ---- */
.zpf-zdp {
  padding: 63px 0 120px;
  background: var(--color-bg);
}
.zpf-zdp__head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 484px);
  column-gap: 40px;
  align-items: start;
  margin-bottom: 49px;
}
.zpf-zdp__title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
  color: var(--color-text);
}
.zpf-zdp__subtitle {
  margin: 20px 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}
.zpf-zdp__note {
  box-sizing: border-box;
  margin: 0;
  padding: 17px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(135deg, var(--kok-orange), var(--kok-pink)) border-box;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-body);
}
.zpf-zdp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.zdp-card {
  box-sizing: border-box;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.zdp-card__head {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: default;
}
.zdp-card__icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
  background: var(--zdp-icon) no-repeat center / contain;
}
.zdp-card__title {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.zdp-card__chevron {
  display: none;
}
.zdp-card__desc {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
}
.zpf-zdp__source {
  margin: 48px 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.zpf-zdp__cta {
  margin-top: 48px;
  text-align: center;
}
.zpf-zdp__btn {
  display: inline-block;
  padding: 12px 36px;
  border-radius: var(--radius-pill);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: var(--fs-base);
  line-height: 23px;
  font-weight: var(--fw-medium);
  transition: var(--transition);
}
.zpf-zdp__btn:hover {
  background: var(--btn-primary-bg-hover);
}

/* ---- Dark mode (high-contrast) ---- */
body.high-contrast .zpf-hero__logo--light {
  display: none;
}
body.high-contrast .zpf-hero__logo--dark {
  display: block;
}
body.high-contrast .zpf-market__waves {
  display: none;
}
body.high-contrast .zpf-def__box,
body.high-contrast .zpf-zdp__note {
  border-color: #333300;
  background: var(--color-bg);
}
body.high-contrast .zpf-zdp__note {
  border-color: var(--kok-white);
}
body.high-contrast .zpf-bullet__icon {
  background-image: url("assets/images/zpf-check-dark.svg");
}
body.high-contrast .zdp-card__icon {
  background-image: var(--zdp-icon-dark);
}
body.high-contrast .zpf-cta {
  background: #333300;
}
/* Globalna reguła `body.high-contrast a` wymusza żółty kolor linków (!important),
   więc etykiety przycisków nadpisujemy jawnie — inaczej żółty tekst ginie na
   żółtym tle przycisku "Odwiedź stronę ZPF". */
body.high-contrast .zpf-cta__btn {
  background: #000; /* wg Figmy czysta czerń, nie --kok-black (#1e1e1e) */
  color: var(--kok-yellow) !important;
}
body.high-contrast .zpf-zdp__btn {
  color: var(--btn-primary-text) !important; /* czarny tekst na żółtym przycisku */
}
body.high-contrast .zpf-cta__btn:hover {
  background: #1a1a1a;
}

/* ---- Tablet ---- */
@media (max-width: 1023px) {
  .zpf-zdp__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .zpf-zdp__head {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .zpf-market__subtitle {
    margin-top: 96px;
  }
}

/* ---- Mobile (Figma 4969-16253) ---- */
@media (max-width: 719px) {
  .zpf-inner {
    padding: 0 16px; /* Figma mobile: treść 358px w oknie 390px */
  }
  .zpf-hero {
    padding: 28px 0 40px;
  }
  .zpf-hero__grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .zpf-hero__logo {
    width: 100%;
    max-width: 269px;
    margin-top: 24px;
  }

  .zpf-def {
    padding: 40px 0;
  }
  .zpf-def__box {
    padding: 24px;
    border-radius: var(--radius-md);
  }
  .zpf-def__title {
    margin-bottom: 24px;
    font-size: 24px; /* Figma mobile (szerokość linii 193px) */
    line-height: 32px;
  }

  .zpf-member {
    padding: 40px 0;
  }
  .zpf-member__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .zpf-member__title {
    margin-bottom: 24px;
  }

  .zpf-market {
    padding: 40px 0;
  }
  .zpf-market__waves {
    width: 900px;
    min-width: 0;
  }
  .zpf-market__subtitle {
    margin: 64px 0 24px;
    font-size: 24px; /* Figma mobile — mieści się w jednej linii (346px) */
    line-height: 32px;
  }
  .zpf-market__boxes {
    grid-template-columns: 1fr;
  }
  .zpf-box {
    padding: 24px;
  }

  .zpf-cta {
    padding: 40px 0;
  }
  .zpf-cta__btn {
    display: block;
    margin-top: 32px;
    font-size: var(--fs-base); /* Figma mobile: 16/24, przycisk 48px wysokości */
    line-height: var(--lh-base);
  }

  .zpf-zdp {
    padding: 40px 0 64px;
  }
  .zpf-zdp__head {
    margin-bottom: 32px;
  }
  .zpf-zdp__subtitle {
    font-size: var(--fs-lg); /* Figma mobile: 19/27 */
    line-height: 27px;
  }
  .zpf-zdp__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Karty stają się akordeonem: nagłówek (ikona + tytuł + chevron), opis w panelu */
  .zdp-card {
    padding: 20px 16px;
  }
  .zdp-card__head {
    display: grid;
    grid-template-columns: 44px 1fr 24px;
    column-gap: 16px;
    align-items: center;
    cursor: pointer;
  }
  .zdp-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
  }
  .zdp-card__chevron {
    display: block;
    width: 24px;
    height: 24px;
    -webkit-mask: url("assets/images/faq-chevron.svg") no-repeat center / 16px;
    mask: url("assets/images/faq-chevron.svg") no-repeat center / 16px;
    background: var(--color-text);
    transition: transform var(--transition);
  }
  .zdp-card.open .zdp-card__chevron {
    transform: rotate(180deg);
  }
  .zdp-card__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s;
  }
  .zdp-card.open .zdp-card__panel {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .zdp-card__panel-inner {
    overflow: hidden;
    min-height: 0;
  }
  .zdp-card__desc {
    margin: 16px 0 0;
  }

  .zpf-zdp__source {
    margin-top: 32px;
    text-align: left;
  }
  .zpf-zdp__cta {
    margin-top: 32px;
  }
  .zpf-zdp__btn {
    display: block;
  }
}

/* ==========================================================================
   Kalkulator przyklejony do dołu ekranu na widoku artykułu (.calc-dock)
   ========================================================================== */
.calc-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500; /* ponad przyklejonym headerem (444) */
  pointer-events: none;
}
.calc-dock__inner {
  display: flex;
  justify-content: flex-end;
  margin: 0 var(--inner-margin-x);
}
@media screen and (min-width: 720px) {
  .calc-dock__inner {
    width: var(--inner-width);
    margin: 0 auto;
  }
}
.calc-dock__card {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 407px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--btn-primary-bg);
  box-shadow: 0 -4px 30px 0 rgba(0, 0, 0, 0.15);
  transition: background var(--transition);
}
.calc-dock.is-open .calc-dock__card {
  background: var(--color-surface);
}

.calc-dock__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--space-md) 20px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-lg);
  line-height: 27px;
  font-weight: var(--fw-medium);
  color: var(--btn-primary-text);
  text-align: left;
  cursor: pointer;
}
.calc-dock.is-open .calc-dock__toggle {
  color: var(--color-text);
}
.calc-dock__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
  mask: url("assets/images/faq-chevron.svg") no-repeat center / contain;
  transform: rotate(180deg);
  transition: transform var(--transition);
}
.calc-dock.is-open .calc-dock__chevron {
  transform: none;
}
.calc-dock__handle {
  display: none;
}

.calc-dock__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.calc-dock.is-open .calc-dock__panel {
  grid-template-rows: 1fr;
}
.calc-dock__panel-inner {
  overflow: hidden;
  min-height: 0;
}
.calc-dock.is-open .calc-dock__panel-inner {
  overflow-y: auto;
  max-height: calc(100vh - 16rem);
}

.calc-dock .calc,
body.high-contrast .calc-dock .calc {
  max-width: none;
  margin: 0;
  padding: 0 20px 20px;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

@media screen and (max-width: 719px) {
  .calc-dock__card {
    max-width: none;
  }
  .calc-dock__toggle {
    position: relative;
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }
  .calc-dock__handle {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: currentColor;
    opacity: 0.35;
    transform: translateX(-50%);
  }
  .calc-dock .calc,
  body.high-contrast .calc-dock .calc {
    padding: 0 var(--space-md) var(--space-lg);
  }
}