/* ============================================================================
   WYDANIE — nowy wyglad landingow Charyzmy. Wersja 2.

   Zero zmian w tresci. To jest sama warstwa wygladu, doklejana za oryginalnym
   arkuszem, wiec kazde slowo, kazdy przycisk i caly lejek zostaja jak byly.

   Zasada: strona ma czytac sie jak zlozony tekst, nie jak zestaw kolorowych
   pudelek. Duza szeryfowa typografia, waskie lamy, cienkie kreski zamiast ramek,
   zdjecia na calej szerokosci i JEDEN kolor zarezerwowany na akcje.

   Kolory marki (--cta, --accent, --bg-dark) zostaja z oryginalu, wiec wersja
   damska dalej jest rozowa, a meska miedziana. Tu zmienia sie tylko sposob,
   w jaki sa uzyte.
   ========================================================================== */

:root {
  --font-heading: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Inter', system-ui, -apple-system, sans-serif;

  --papier: #FBF9F5;
  --ink: #17130E;
  --ink-mut: #6F665B;
  --kreska: rgba(23, 19, 14, 0.14);
  --kreska-mocna: rgba(23, 19, 14, 0.30);

  /* papier z odrobina koloru marki: sam sie dostraja do wersji M i K */
  --papier-alt: color-mix(in srgb, var(--cta) 7%, #FBF9F5);
  --papier-cta: color-mix(in srgb, var(--cta) 12%, #FBF9F5);

  --lama: 660px;          /* szerokosc lamy tekstu */
  --lama-szer: 1040px;    /* szerokosc dla siatek i zdjec */

  --odstep: 104px;        /* pion miedzy sekcjami */
  --odstep-m: 68px;
}

/* --------------------------------------------------------------- podstawy */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--papier);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.72;
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { font-size: 18px; line-height: 1.72; color: var(--ink); }

strong, b { font-weight: 650; color: var(--ink); }

em, i { font-style: italic; }

a { color: inherit; }

::selection { background: var(--cta); color: #fff; }

/* naglowki: szeryf, ciasny interlinia, lekko ujemny odstep miedzy literami */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-variation-settings: 'opsz' 128, 'SOFT' 0, 'WONK' 0;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: clamp(29px, 4.3vw, 45px); line-height: 1.09; }
h1, h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.eb-hero-section h1 { max-width: 24ch; }
h2 { font-size: clamp(26px, 3.5vw, 37px); line-height: 1.12; }
h3 { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.22; letter-spacing: -0.016em; }
h4 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; letter-spacing: -0.012em; }

/* ------------------------------------------------------ lamy i rytm sekcji */

.eb-container, .eb-container-narrow { max-width: var(--lama); padding: 0 22px; }
.eb-container-wide { max-width: var(--lama-szer); padding: 0 22px; }

.eb-section-white, .eb-section-alt, .eb-section-warm, .eb-section-dark {
  padding: var(--odstep) 0;
  position: relative;
}

.eb-section-white { background: var(--papier); }
.eb-section-alt   { background: var(--papier-alt); }
.eb-section-warm  { background: var(--papier-cta); }

.eb-section-dark { background: var(--bg-dark); color: #F3EEE7; }
.eb-section-dark p,
.eb-section-dark li,
.eb-section-dark h1, .eb-section-dark h2,
.eb-section-dark h3, .eb-section-dark h4 { color: #F6F1EA; }
.eb-section-dark strong { color: #fff; }

/* cienka kreska zamiast zmiany tla tam, gdzie dwie jasne sekcje stoja obok siebie */
.eb-section-white + .eb-section-white::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--lama), calc(100% - 44px)); height: 1px; background: var(--kreska);
}

/* ------------------------------------------------------------ nadnaglowek */

.eb-eyebrow {
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cta);
  margin-bottom: 18px;
  display: block;
}

.eb-section-dark .eb-eyebrow { color: color-mix(in srgb, var(--cta) 55%, #fff); }

/* kolorowy fragment naglowka: plaski kolor, bez gradientu */
.eb-gradient-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--cta);
  display: inline;
}
.eb-section-dark .eb-gradient-text { color: color-mix(in srgb, var(--cta) 45%, #fff); }

.eb-hero-accent { color: var(--cta); }

/* ------------------------------------------------------------ pasek u gory */

.eb-top-bar {
  background: var(--ink);
  color: #EDE7DE;
  padding: 9px 16px;
  gap: 14px;
  border-bottom: none;
  font-family: var(--font-accent);
}

.eb-top-bar__label {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(237, 231, 222, 0.62);
}

.eb-top-bar__timer { gap: 3px; }

.eb-top-bar .eb-top-bar__timer .t-box, .eb-top-bar .t-box {
  background: transparent; border: none; padding: 0 2px;
  font-family: var(--font-heading); font-variation-settings: 'opsz' 20;
  font-size: 17px; font-weight: 600; color: #fff; box-shadow: none;
  border-radius: 0 !important; background: transparent !important; min-width: 0 !important;
}

.eb-top-bar__cta {
  background: var(--cta); color: #fff;
  font-family: var(--font-accent); font-size: 11.5px; font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 3px; box-shadow: none; animation: none;
}

/* ------------------------------------------------------------------- hero */

.eb-hero-section { padding-top: 46px; padding-bottom: 0; }

.eb-hero-section h1 { margin-bottom: 22px; }

.eb-author-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 9px !important;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-mut);
  margin-bottom: 26px !important;
}
.eb-author-block img { width: 26px !important; height: 26px !important; }

/* pasek z badaniami: kreska u gory i u dolu zamiast zaokraglonego pudelka */
.eb-social-proof {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--kreska);
  border-bottom: 1px solid var(--kreska);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  max-width: var(--lama);
  margin-left: auto; margin-right: auto;
  font-size: 14px;
  color: var(--ink-mut);
}

/* ------------------------------------------------------------------ obrazy */

img { border-radius: 0; }

.eb-mood-photo {
  max-width: none !important;
  width: 100%;
  border-radius: 2px !important;
  box-shadow: none !important;
  display: block;
  margin: 8px auto 0;
}

/* zdjecia nastroju wychodza poza lame, na pelna szerokosc czytelnej kolumny */
.eb-container-narrow .eb-mood-photo,
.eb-container .eb-mood-photo { max-width: var(--lama-szer) !important; }

figure, .eb-mood-figure { margin: 0; }

/* --------------------------------------------------------------- przyciski */

.eb-cta-btn,
.eb-top-bar__cta,
.eb-popup-cta {
  font-family: var(--font-accent);
  font-weight: 650;
  border-radius: 3px;
  box-shadow: none;
  animation: none;
  transition: background-color .18s ease, transform .12s ease;
}

.eb-cta-btn {
  background: var(--cta);
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.05em;
  padding: 21px 44px;
  border: none;
  display: inline-block;
  max-width: 100%;
}

.eb-cta-btn:hover { background: var(--cta-hover); transform: translateY(-1px); }

.eb-cta-trust {
  font-family: var(--font-accent);
  font-size: 12.5px;
  color: var(--ink-mut);
  letter-spacing: 0.01em;
  margin-top: 14px;
}
.eb-section-dark .eb-cta-trust { color: rgba(243, 238, 231, 0.6); }

/* ------------------------------------------------------------- pudelko ofery */

.eb-offer-box,
.eb-offer-box-dark {
  background: var(--papier) !important;
  border: 1px solid var(--kreska-mocna) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  padding: 44px 34px !important;
}

.eb-offer-box-dark {
  background: var(--ink) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #F6F1EA;
}
.eb-offer-box-dark p, .eb-offer-box-dark h2, .eb-offer-box-dark h3 { color: #F6F1EA; }

.eb-price-old {
  font-family: var(--font-accent); font-size: 17px; font-weight: 400;
  color: var(--ink-mut); text-decoration: line-through;
}

.eb-price-new {
  font-family: var(--font-heading);
  font-variation-settings: 'opsz' 60;
  font-size: clamp(46px, 8vw, 68px); font-weight: 700;
  color: var(--ink); letter-spacing: -0.03em; line-height: 1;
}
.eb-offer-box-dark .eb-price-new { color: #fff; }

.eb-badge-save,
.eb-bonus-badge,
.eb-pl-tag,
.eb-split-badge {
  background: transparent !important;
  color: var(--cta) !important;
  border: 1px solid currentColor !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--font-accent);
  font-size: 10.5px; font-weight: 650;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px !important;
  animation: none !important;
}

.eb-bonus-ribbon {
  background: var(--cta) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  animation: none !important;
  font-family: var(--font-accent);
  letter-spacing: 0.12em;
}

/* --------------------------------------------------- listy zamiast pudelek */

.eb-benefit-list,
.eb-preview-list,
.eb-guarantee-line,
.eb-comp-item,
.eb-tool-item,
.eb-preview-list-item {
  font-size: 17px;
  line-height: 1.62;
}

.eb-comp-item,
.eb-preview-list-item,
.eb-tool-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--kreska) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 15px 0 !important;
  text-align: left;
}

.eb-comp-highlight {
  border-bottom-color: var(--cta) !important;
  background: transparent !important;
}

.eb-tools-grid,
.eb-results-grid,
.eb-process-grid { gap: 0 !important; }

/* karty: zostaje sama tresc i kreska, znika ramka i cien */
.eb-result-card,
.eb-consequence-card,
.eb-discovery-card,
.eb-process-card,
.eb-id-card,
.eb-highlight-box,
.eb-objection-box,
.eb-comparison-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.eb-result-card,
.eb-consequence-card,
.eb-discovery-card,
.eb-process-card,
.eb-id-card {
  border-top: 1px solid var(--kreska) !important;
  padding: 26px 0 !important;
}

.eb-highlight-box,
.eb-objection-box,
.eb-comparison-box {
  border-left: 2px solid var(--cta) !important;
  padding: 4px 0 4px 24px !important;
  margin: 30px 0 !important;
}

/* duze cyfry jako kotwice, w szeryfie */
.eb-disc-number,
.eb-step-number,
.eb-chapter-number,
.eb-gb-number,
.eb-ch-num {
  font-family: var(--font-heading) !important;
  font-variation-settings: 'opsz' 96;
  font-weight: 600 !important;
  color: var(--cta) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important; height: auto !important;
  font-size: 40px !important;
  line-height: 1 !important;
  padding: 0 !important;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------- rozdzialy */

.eb-chapter {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--kreska) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 34px 0 !important;
}

.eb-chapter-header { gap: 20px !important; align-items: baseline !important; }

.eb-chapter-subtitle {
  font-family: var(--font-accent);
  font-size: 13px; color: var(--ink-mut);
  letter-spacing: 0.02em;
}

.eb-chapter-closing {
  background: transparent !important;
  border-left: 2px solid var(--cta) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 22px !important;
  font-style: normal;
  color: var(--ink-mut);
  font-size: 16.5px;
}

.eb-chapter-bonus { border-top-color: var(--cta) !important; }

.eb-bonus-value {
  background: transparent !important;
  color: var(--cta) !important;
  font-family: var(--font-accent);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0 !important;
}

/* zdjecie-plakietka rozdzialu znika, zostaje sama cyfra */
.eb-ch-badge {
  width: auto !important; min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.eb-ch-photo { display: none !important; }
.eb-ch-overlay {
  position: static !important;
  background: none !important;
  padding: 0 !important;
}
.eb-ch-num { text-shadow: none !important; }

/* ---------------------------------------------------------- karty ze zdjeciem */

.eb-split-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.eb-split-photo { border-radius: 2px !important; filter: saturate(0.92); }
.eb-split-name { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.015em; }
.eb-split-sub, .eb-split-info { font-size: 16px; color: var(--ink-mut); }

/* -------------------------------------------------------------------- licznik */

.eb-timer-wrap, .eb-timer {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--kreska);
  border-bottom: 1px solid var(--kreska);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 0 !important;
  gap: 26px !important;
}

.eb-timer-label {
  font-family: var(--font-accent); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mut);
}

.eb-timer-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.eb-timer-number {
  font-family: var(--font-heading) !important;
  font-variation-settings: 'opsz' 72;
  font-size: 40px !important; font-weight: 600 !important;
  color: var(--ink) !important; letter-spacing: -0.03em; line-height: 1;
}
.eb-section-dark .eb-timer-number { color: #F6F1EA !important; }

.eb-timer-unit {
  font-family: var(--font-accent); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mut);
}

/* ------------------------------------------------------------------ pytania */

.eb-faq-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--kreska) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.eb-faq-question {
  font-family: var(--font-heading);
  font-variation-settings: 'opsz' 40;
  font-size: 19px; font-weight: 600; letter-spacing: -0.012em;
  padding: 24px 34px 24px 0 !important;
  background: transparent !important;
}

.eb-faq-toggle {
  background: transparent !important;
  border: none !important;
  color: var(--cta) !important;
  font-size: 22px; font-weight: 300;
  width: auto !important; height: auto !important;
}

.eb-faq-answer-inner {
  padding: 0 0 24px !important;
  font-size: 17px; color: var(--ink-mut);
}

/* ------------------------------------------------------------------ gwarancja */

.eb-guarantee-badge, .eb-guarantee-badge-sm { filter: saturate(0.9); }

.eb-guarantee-line {
  border-bottom: 1px solid var(--kreska);
  padding: 13px 0;
  text-align: left;
}

/* -------------------------------------------------------------------- p.s. */

.eb-ps-section {
  border-top: 1px solid var(--kreska-mocna);
  padding-top: 44px;
}

.eb-ps-label {
  font-family: var(--font-heading);
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
}

.eb-ps-link {
  color: var(--cta);
  text-decoration: none;
  border-bottom: 1.5px solid var(--cta);
  padding-bottom: 1px;
  font-weight: 500;
}

/* ------------------------------------------------------------------- popup */

.eb-popup-overlay { background: rgba(23, 19, 14, 0.72); backdrop-filter: blur(3px); }

.eb-popup-box {
  background: var(--papier) !important;
  border: 1px solid var(--kreska-mocna) !important;
  border-radius: 3px !important;
  box-shadow: 0 30px 80px rgba(23, 19, 14, 0.28) !important;
  padding: 40px 30px !important;
}

.eb-popup-framing {
  font-family: var(--font-accent);
  font-size: 12px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--cta);
}

.eb-popup-headline {
  font-family: var(--font-heading);
  font-variation-settings: 'opsz' 96;
  font-size: clamp(26px, 5vw, 36px); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.022em; color: var(--ink);
  margin: 12px 0 6px;
}

.eb-popup-oldprice { font-family: var(--font-accent); font-size: 14px; color: var(--ink-mut); }

.eb-popup-body { font-size: 16.5px; line-height: 1.66; color: var(--ink); }

.eb-popup-urgency {
  background: transparent !important;
  border-left: 2px solid var(--cta) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px 18px !important;
  font-size: 16px;
}

.eb-popup-img img { border-radius: 2px; }

.eb-popup-cta {
  background: var(--cta) !important;
  color: #fff !important;
  font-size: 15px; letter-spacing: 0.04em;
  padding: 19px 30px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  animation: none !important;
}

.eb-popup-decline {
  color: var(--ink-mut) !important;
  font-family: var(--font-accent);
  font-size: 13.5px; font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent !important;
}

.eb-popup-close {
  color: var(--ink-mut) !important;
  background: transparent !important;
  border: none !important;
  font-weight: 300;
}

/* ------------------------------------------------------------------ drobiazgi */

.eb-payment-icons { opacity: 0.75; gap: 12px !important; }
.eb-pay-badge, .eb-pay-label {
  font-family: var(--font-accent); font-size: 11.5px;
  letter-spacing: 0.06em; color: var(--ink-mut);
}

.eb-rating-text, .eb-offer-rating { font-family: var(--font-accent); font-size: 13.5px; color: var(--ink-mut); }

.eb-vision-text { font-size: 19px; line-height: 1.78; }

/* wejscia w kadr: delikatniejsze niz w oryginale */
.eb-fade-in { transition: opacity .5s ease, transform .5s ease; }

/* --------------------------------------------------------------- na telefonie */

@media (max-width: 767px) {
  :root { --odstep: var(--odstep-m); }

  body { font-size: 17px; }
  p { font-size: 17px; line-height: 1.68; }

  .eb-container, .eb-container-narrow, .eb-container-wide { padding: 0 20px; }

  .eb-cta-btn { display: block; width: 100%; padding: 20px 18px; font-size: 14.5px; }

  .eb-offer-box, .eb-offer-box-dark { padding: 32px 20px !important; }

  .eb-chapter-header { gap: 14px !important; }
  .eb-disc-number, .eb-step-number, .eb-chapter-number,
  .eb-gb-number, .eb-ch-num { font-size: 32px !important; }

  .eb-timer-wrap, .eb-timer { gap: 18px !important; }
  .eb-timer-number { font-size: 32px !important; }

  .eb-popup-box { padding: 30px 20px !important; }

  /* zdjecia od krawedzi do krawedzi */
  .eb-mood-photo { width: calc(100% + 40px); max-width: none !important; margin-left: -20px; border-radius: 0 !important; }
}

/* ===========================================================================
   Poprawki po obejrzeniu strony na zywo
   ========================================================================= */

/* Pulsujaca obwodka wokol przyciskow. W ciemnej sekcji wygladala jak druga,
   jasniejsza ramka doklejona do guzika. */
.eb-cta-btn::before,
.eb-popup-cta::before,
.eb-top-bar__cta::before { content: none !important; display: none !important; animation: none !important; }

.eb-cta-btn:hover { box-shadow: none !important; transform: translateY(-1px); }

/* Numer rozdzialu byl dwa razy: raz jako cyfra na plakietce, raz w napisie
   "ROZDZIAL 2". Zostaje napis, plakietka znika. */
.eb-ch-badge { display: none !important; }

/* Mala karta produktu: bez ramki wyglada na zgubiona, wiec srodkujemy tresc
   i dajemy jej wiecej miejsca. */
.eb-split-card { width: 250px !important; text-align: center; }
.eb-split-card .eb-split-info { text-align: center; }
.eb-split-name { font-size: 19px; margin-top: 14px; margin-bottom: 4px; }
.eb-split-sub { margin-bottom: 2px; }
.eb-split-badge { margin-bottom: 12px; display: inline-block; }

/* Cytat/zastrzezenie na dlugosc kilku akapitow: kreska ma prowadzic, nie ciagnac
   sie przez pol ekranu. */
.eb-objection-box { padding-left: 26px !important; }
.eb-objection-box > *:last-child { margin-bottom: 0; }

/* Siatka narzedzi w rozdzialach: rowne kolumny, wspolna linia u dolu */
.eb-tools-grid { column-gap: 28px !important; }
.eb-tool-item { align-items: start; }

/* Pieczec gwarancji: mniejsza, bez cienia, zeby nie krzyczala */
.eb-guarantee-badge { max-width: 190px; }
.eb-guarantee-badge-sm { max-width: 120px; }

@media (max-width: 767px) {
  .eb-split-card { width: 100% !important; }
  .eb-objection-box, .eb-highlight-box, .eb-comparison-box,
  .eb-chapter-closing, .eb-popup-urgency { padding-left: 18px !important; }
}

/* ===========================================================================
   Czytelnosc na ciemnych sekcjach + pieczec gwarancji
   ========================================================================= */

/* Na ciemnym tle czesc tekstu zostawala w oryginalnym, prawie czarnym kolorze
   i po prostu znikala. Zamiast lapac to element po elemencie, ciemne sekcje
   narzucaja swoj kolor wszystkiemu w srodku, a wyjatki wypisujemy nizej. */
.eb-section-dark,
.eb-offer-box-dark { color: #F2EDE6; }

.eb-section-dark *,
.eb-offer-box-dark * { color: inherit; }

.eb-section-dark strong,
.eb-offer-box-dark strong,
.eb-section-dark h1, .eb-section-dark h2, .eb-section-dark h3, .eb-section-dark h4,
.eb-offer-box-dark h2, .eb-offer-box-dark h3,
.eb-offer-box-dark .eb-price-new,
.eb-section-dark .eb-split-name { color: #FFFFFF; }

.eb-section-dark .eb-eyebrow,
.eb-offer-box-dark .eb-eyebrow,
.eb-section-dark .eb-gradient-text,
.eb-offer-box-dark .eb-gradient-text,
.eb-section-dark .eb-hero-accent,
.eb-section-dark .eb-faq-toggle,
.eb-section-dark .eb-disc-number, .eb-section-dark .eb-step-number,
.eb-section-dark .eb-chapter-number, .eb-section-dark .eb-gb-number,
.eb-offer-box-dark .eb-badge-save, .eb-offer-box-dark .eb-split-badge {
  color: color-mix(in srgb, var(--cta) 62%, #FFFFFF) !important;
}

.eb-section-dark .eb-cta-btn,
.eb-offer-box-dark .eb-cta-btn,
.eb-section-dark .eb-cta-btn * { color: #FFFFFF !important; }

.eb-section-dark .eb-price-old,
.eb-offer-box-dark .eb-price-old,
.eb-section-dark .eb-cta-trust,
.eb-offer-box-dark .eb-cta-trust,
.eb-section-dark .eb-chapter-subtitle,
.eb-section-dark .eb-timer-unit,
.eb-section-dark .eb-timer-label,
.eb-section-dark .eb-split-sub { color: rgba(242, 237, 230, 0.62) !important; }

.eb-section-dark .eb-faq-item,
.eb-section-dark .eb-tool-item,
.eb-section-dark .eb-comp-item,
.eb-section-dark .eb-preview-list-item,
.eb-section-dark .eb-chapter,
.eb-section-dark .eb-result-card,
.eb-section-dark .eb-consequence-card,
.eb-section-dark .eb-discovery-card,
.eb-section-dark .eb-process-card,
.eb-section-dark .eb-id-card,
.eb-section-dark .eb-timer-wrap,
.eb-section-dark .eb-timer,
.eb-section-dark .eb-social-proof {
  border-color: rgba(242, 237, 230, 0.18) !important;
}

/* Pieczec gwarancji: kolo obrysowane kreska zamiast zlotego gradientu */
.eb-guarantee-badge,
.eb-guarantee-badge-sm {
  background: transparent !important;
  border: 1px solid var(--cta) !important;
  color: var(--cta) !important;
  filter: none;
  max-width: none;
  box-shadow: none !important;
}
.eb-guarantee-badge .eb-gb-top,
.eb-guarantee-badge .eb-gb-bottom {
  font-family: var(--font-accent);
  font-weight: 600; letter-spacing: 0.16em;
  color: var(--cta) !important;
}
.eb-guarantee-badge .eb-gb-number {
  font-family: var(--font-heading) !important;
  font-variation-settings: 'opsz' 72;
  color: var(--cta) !important;
}
.eb-section-dark .eb-guarantee-badge,
.eb-section-dark .eb-guarantee-badge-sm,
.eb-section-dark .eb-guarantee-badge * {
  border-color: color-mix(in srgb, var(--cta) 62%, #FFFFFF) !important;
  color: color-mix(in srgb, var(--cta) 62%, #FFFFFF) !important;
}

/* Male napisy w kolorze marki na jasnym papierze byly na granicy czytelnosci
   (ten sam problem ma obecna strona). Duze naglowki zostaja w pelnym kolorze,
   drobne etykiety dostaja ciemniejszy odcien tego samego koloru. */
.eb-eyebrow,
.eb-pl-tag,
.eb-bonus-value,
.eb-badge-save,
.eb-split-badge,
.eb-guarantee-badge .eb-gb-top,
.eb-guarantee-badge .eb-gb-bottom,
.eb-popup-framing { color: color-mix(in srgb, var(--cta) 74%, #2A1B08) !important; }

.eb-badge-save, .eb-split-badge, .eb-bonus-badge, .eb-pl-tag {
  border-color: color-mix(in srgb, var(--cta) 55%, transparent) !important;
}

/* Zielona cena obok pomaranczowego przycisku i czerwonej przekreslonej kwoty to
   trzy kolory naraz. Cena wraca do koloru tekstu, akcent zostaje na przycisku. */
.eb-offer-box .eb-price-new,
.eb-price-new, .eb-price-new * { color: var(--ink) !important; }
.eb-offer-box-dark .eb-price-new,
.eb-offer-box-dark .eb-price-new *,
.eb-section-dark .eb-price-new,
.eb-section-dark .eb-price-new * { color: #FFFFFF !important; }
.eb-price-old, .eb-price-old * { color: var(--ink-mut) !important; }

/* ===========================================================================
   Ozdobniki, ktore wisialy na rogach usunietych kart
   ========================================================================= */

/* Rozdzial bonusowy byl karta z gradientowym paskiem u gory, a dwie plakietki
   siedzialy przyklejone do jej gornej krawedzi. Po usunieciu karty pasek
   zostawal w powietrzu, a plakietki nachodzily na siebie. */
.eb-chapter-bonus::before { content: none !important; display: none !important; }

.eb-chapter-bonus .eb-bonus-badge,
.eb-chapter-bonus .eb-bonus-ribbon {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  display: inline-block;
  margin: 0 8px 16px 0 !important;
  vertical-align: middle;
}

.eb-chapter-bonus .eb-bonus-ribbon {
  background: var(--cta) !important;
  color: #fff !important;
  border: 1px solid var(--cta) !important;
  font-family: var(--font-accent);
  font-size: 10.5px; font-weight: 650;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 11px !important;
}
.eb-chapter-bonus .eb-bonus-ribbon * { color: #fff !important; }

.eb-chapter-bonus { padding-top: 30px !important; }

/* Rozmyta poswiata na ciemnych sekcjach: w plaskim ukladzie tylko brudzi tlo */
.eb-section-dark::before { content: none !important; display: none !important; }

/* Napis "ROZDZIAL X" wielkimi literami w szeryfie byl za ciezki obok tytulu.
   Ma byc etykieta, nie drugi naglowek. */
.eb-chapter-number {
  font-family: var(--font-accent) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.2em !important;
  color: color-mix(in srgb, var(--cta) 74%, #2A1B08) !important;
  margin-bottom: 6px;
  display: block;
}

/* ===========================================================================
   Rytm strony i pierwszy ekran
   Pomiar przed poprawka: hero nie miescil sie na laptopie 1280x800 o 204 px,
   a przerwy miedzy sekcjami mialy po 156 px na telefonie i 208-228 px na duzym
   ekranie, wszystkie co do jednej takie same.
   ========================================================================= */

:root { --odstep: 84px; --odstep-m: 46px; }

/* Przerwy przestaja byc rowne. Sekcja po sekcji tego samego koloru dostaje
   mniej powietrza (to ciag dalszy tej samej mysli), ciemna dostaje wiecej
   (to przystanek). Rowne odstepy wszedzie sprawiaja, ze strona wyglada,
   jakby nie wiedziala, co jest wazne. */
.eb-section-white + .eb-section-white,
.eb-section-alt + .eb-section-alt,
.eb-section-warm + .eb-section-warm { padding-top: calc(var(--odstep) * 0.55); }

.eb-section-dark { padding: calc(var(--odstep) * 1.2) 0; }

.eb-ps-section { padding-top: calc(var(--odstep) * 0.7); padding-bottom: calc(var(--odstep) * 0.7); }

/* ---- pierwszy ekran ---- */

.eb-hero-section { padding-top: 28px !important; padding-bottom: 28px !important; }

.eb-hero-section h1 {
  font-size: clamp(27px, 3.4vw, 37px);
  line-height: 1.1;
  max-width: 27ch;
  margin-bottom: 16px;
}

.eb-hero-section p { font-size: 17px; line-height: 1.62; }

.eb-author-block { margin-bottom: 14px !important; }
.eb-hero-section .eb-eyebrow { margin-bottom: 12px; }

/* Obrazek w hero: ma byc widoczny, nie ma zjadac calego ekranu */
.eb-hero-section .eb-mood-photo,
.eb-hero-section img:not(.eb-author-block img) { max-height: 132px; width: auto; margin: 18px auto 0; }

.eb-hero-section .eb-social-proof { padding: 11px 0 !important; margin-top: 18px; font-size: 13.5px; }

@media (max-width: 767px) {
  .eb-hero-section { padding-top: 18px !important; padding-bottom: 20px !important; }
  .eb-hero-section h1 { font-size: 25px; line-height: 1.14; max-width: none; margin-bottom: 12px; }
  .eb-hero-section p { font-size: 16px; line-height: 1.56; }
  .eb-author-block { margin-bottom: 10px !important; font-size: 11.5px; }
  .eb-hero-section .eb-eyebrow { margin-bottom: 10px; font-size: 10px; letter-spacing: 0.16em; }
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) {
    max-height: 112px; width: auto; margin: 14px auto 0;
    max-width: 100% !important; margin-left: auto !important; border-radius: 2px !important;
  }
  .eb-hero-section .eb-social-proof { padding: 9px 0 !important; margin-top: 14px; font-size: 12.5px; }
}

/* ===========================================================================
   SKALA — obowiazuje nad wszystkim powyzej
   ---------------------------------------------------------------------------
   Pomiar przed poprawka wykazal balagan: same akapity mialy osiem roznych
   rozmiarow (18 / 17 / 16,5 / 16 / 14 / 13 / 12,5 / 10 px), etykiety siedem,
   najmniejszy widoczny napis mial 9 px, a naglowek glowny na telefonie byl
   MNIEJSZY (21 px) od naglowkow sekcji (26 px). Przerwy miedzy sekcjami
   siegaly 205 px. Ponizej jedna skala na cala strone.
   ========================================================================= */

:root {
  --lead:      20px;   /* akapit prowadzacy */
  --tekst:     18px;   /* zwykly akapit */
  --lista:     17px;   /* punkty i wyliczenia */
  --drobne:  13.5px;   /* podpisy, zaufanie, jednostki licznika */
  --etykieta: 11.5px;  /* nadnaglowki wersalikami */
  --guzik:     15px;

  --odstep: 76px;
}

/* ---- naglowki ---- */
h1 { font-size: 34px !important; line-height: 1.09 !important; }
h2 { font-size: 30px !important; line-height: 1.14 !important; }
h3 { font-size: 21px !important; line-height: 1.28 !important; }
h4 { font-size: 18px !important; line-height: 1.34 !important; }
h1, h2 { max-width: 28ch; }
h1, h2, h3, h4 { margin-bottom: 14px; }

/* ---- tekst ciagly: jeden rozmiar zamiast osmiu ---- */
section p,
section li,
.eb-popup-body,
.eb-popup-body p,
.eb-result-card p, .eb-consequence-card p, .eb-discovery-card p,
.eb-process-card p, .eb-id-card p, .eb-highlight-box p,
.eb-objection-box p, .eb-comparison-box p, .eb-chapter p {
  font-size: var(--tekst) !important;
  line-height: 1.7 !important;
}

.eb-vision-text, .eb-vision-text p { font-size: var(--lead) !important; line-height: 1.66 !important; }

.eb-benefit-list li, .eb-preview-list-item, .eb-comp-item, .eb-tool-item,
.eb-guarantee-line, .eb-faq-answer-inner, .eb-faq-answer-inner p {
  font-size: var(--lista) !important;
  line-height: 1.62 !important;
}

/* ---- drobiazgi: nic ponizej 11 px, bo tego sie nie da przeczytac ---- */
.eb-cta-trust, .eb-timer-label, .eb-timer-unit, .eb-chapter-subtitle,
.eb-split-sub, .eb-split-info, .eb-pay-label, .eb-pay-badge,
.eb-rating-text, .eb-offer-rating, .eb-popup-oldprice, .eb-price-old,
.eb-social-proof, .eb-author-block {
  font-size: var(--drobne) !important;
  line-height: 1.5 !important;
}

.eb-eyebrow, .eb-chapter-number, .eb-pl-tag, .eb-bonus-value,
.eb-badge-save, .eb-split-badge, .eb-bonus-badge, .eb-bonus-ribbon,
.eb-popup-framing, .eb-top-bar__label {
  font-size: var(--etykieta) !important;
  line-height: 1.45 !important;
}

.eb-guarantee-badge .eb-gb-top,
.eb-guarantee-badge .eb-gb-bottom { font-size: 11px !important; }

.eb-cta-btn, .eb-popup-cta { font-size: var(--guzik) !important; line-height: 1.25 !important; }
.eb-top-bar__cta { font-size: 12px !important; }

/* ---- przerwy miedzy sekcjami ---- */
.eb-section-white, .eb-section-alt, .eb-section-warm { padding: var(--odstep) 0; }
.eb-section-dark { padding: calc(var(--odstep) * 1.15) 0; }
.eb-section-white + .eb-section-white,
.eb-section-alt + .eb-section-alt,
.eb-section-warm + .eb-section-warm { padding-top: calc(var(--odstep) * 0.5); }

/* ---- pierwszy ekran: ma sie zmiescic na laptopie 1280x800 ---- */
.eb-hero-section { padding: 26px 0 22px !important; }
.eb-hero-section h1 { font-size: 34px !important; line-height: 1.08 !important; max-width: 30ch; margin-bottom: 14px; }
.eb-hero-section p { font-size: 17px !important; line-height: 1.6 !important; }
.eb-author-block { margin-bottom: 12px !important; }
.eb-hero-section .eb-eyebrow { margin-bottom: 10px; }
.eb-hero-section .eb-mood-photo,
.eb-hero-section img:not(.eb-author-block img) { max-height: 118px !important; margin: 16px auto 0 !important; }
.eb-hero-section .eb-social-proof { padding: 9px 0 !important; margin-top: 14px; }

/* ---- popup: ma sie miescic w oknie razem z paskiem przegladarki ---- */
.eb-popup-box { padding: 26px 26px 24px !important; max-height: 92vh; overflow-y: auto; }
.eb-popup-headline { font-size: 26px !important; line-height: 1.14 !important; margin: 8px 0 4px !important; }
.eb-popup-framing { margin-bottom: 2px !important; }
.eb-popup-oldprice { margin-bottom: 8px !important; }
.eb-popup-img { margin-bottom: 8px !important; }
.eb-popup-img img { max-height: 92px !important; width: auto; }
.eb-popup-body, .eb-popup-body p { font-size: 15.5px !important; line-height: 1.55 !important; margin-bottom: 6px !important; }
.eb-popup-urgency { font-size: 15px !important; line-height: 1.5 !important; margin: 8px 0 !important; padding: 2px 0 2px 14px !important; }
.eb-popup-actions { margin-top: 10px !important; }
.eb-popup-cta { padding: 15px 22px !important; }
.eb-popup-decline { font-size: 13px !important; line-height: 1.4 !important; }

/* =========================== TELEFON ==================================== */
@media (max-width: 767px) {
  :root {
    --lead:    17.5px;
    --tekst:   16.5px;
    --lista:     16px;
    --drobne:  12.5px;
    --etykieta: 10.5px;
    --guzik:   14.5px;
    --odstep:    44px;
  }

  h1 { font-size: 25px !important; line-height: 1.15 !important; }
  h2 { font-size: 21px !important; line-height: 1.2 !important; }
  h3 { font-size: 18px !important; line-height: 1.32 !important; }
  h4 { font-size: 16.5px !important; line-height: 1.36 !important; }
  h1, h2 { max-width: none; }
  h1, h2, h3, h4 { margin-bottom: 11px; }

  section p, section li, .eb-popup-body, .eb-popup-body p,
  .eb-result-card p, .eb-consequence-card p, .eb-discovery-card p,
  .eb-process-card p, .eb-id-card p, .eb-highlight-box p,
  .eb-objection-box p, .eb-comparison-box p, .eb-chapter p { line-height: 1.62 !important; }

  .eb-hero-section { padding: 14px 0 16px !important; }
  .eb-hero-section h1 { font-size: 24px !important; line-height: 1.16 !important; margin-bottom: 10px; }
  .eb-hero-section p { font-size: 15.5px !important; line-height: 1.52 !important; }
  .eb-author-block { margin-bottom: 8px !important; font-size: 11.5px !important; }
  .eb-hero-section .eb-eyebrow { margin-bottom: 8px; font-size: 10px !important; letter-spacing: 0.15em; }
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) {
    max-height: 96px !important; margin: 12px auto 0 !important;
    width: auto !important; max-width: 100% !important; margin-left: auto !important;
    border-radius: 2px !important;
  }
  .eb-hero-section .eb-social-proof { padding: 8px 0 !important; margin-top: 12px; }

  .eb-popup-box { padding: 22px 18px 20px !important; max-height: 88vh; }
  .eb-popup-headline { font-size: 21px !important; }
  .eb-popup-img img { max-height: 72px !important; }
  .eb-popup-body, .eb-popup-body p { font-size: 14.5px !important; line-height: 1.5 !important; }
  .eb-popup-urgency { font-size: 14px !important; }
  .eb-popup-cta { padding: 14px 16px !important; }
  .eb-popup-decline { font-size: 12.5px !important; }
}

/* ===========================================================================
   Domkniecie: etykiety, pierwszy ekran, ciasniejsze przerwy
   ========================================================================= */

/* Napis "ROZDZIAL 1" siedzi w akapicie wewnatrz .eb-chapter, wiec regula
   `.eb-chapter p` byla scislejsza niz `.eb-chapter-number` i przykrywala
   rozmiar etykiety. Podnosimy scislosc etykiet ponad tekst ciagly. */
section .eb-eyebrow,
.eb-chapter .eb-chapter-number,
section .eb-pl-tag,
section .eb-bonus-value,
section .eb-badge-save,
section .eb-split-badge {
  font-size: var(--etykieta) !important;
  line-height: 1.45 !important;
}

.eb-chapter .eb-chapter-subtitle,
section .eb-cta-trust,
section .eb-split-sub {
  font-size: var(--drobne) !important;
  line-height: 1.5 !important;
}

/* Nic ponizej 11 px na calej stronie */
.eb-hero-section .eb-eyebrow { font-size: 11px !important; }

/* ---- przerwy: jeszcze o oczko ciasniej na duzym ekranie ---- */
:root { --odstep: 66px; }

/* ---- pierwszy ekran: domiar do laptopa 1280x800 ---- */
.eb-hero-section { padding: 18px 0 14px !important; }
.eb-hero-section h1 { font-size: 31px !important; line-height: 1.08 !important; margin-bottom: 12px !important; }
.eb-hero-section p { font-size: 16.5px !important; line-height: 1.56 !important; }
.eb-author-block { margin-bottom: 8px !important; }
.eb-hero-section .eb-eyebrow { margin-bottom: 8px !important; }
.eb-hero-section .eb-mood-photo,
.eb-hero-section img:not(.eb-author-block img) { max-height: 92px !important; margin: 14px auto 0 !important; }
.eb-hero-section .eb-social-proof { padding: 8px 0 !important; margin-top: 12px !important; }

@media (max-width: 767px) {
  :root { --odstep: 42px; }

  .eb-hero-section { padding: 8px 0 12px !important; }
  .eb-hero-section h1 { font-size: 22px !important; line-height: 1.16 !important; margin-bottom: 9px !important; }
  .eb-hero-section p { font-size: 15px !important; line-height: 1.46 !important; }
  .eb-hero-section .eb-eyebrow { font-size: 10.5px !important; margin-bottom: 7px !important; }
  .eb-author-block { margin-bottom: 6px !important; }
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) { max-height: 74px !important; margin: 10px auto 0 !important; }
  .eb-hero-section .eb-social-proof { padding: 7px 0 !important; margin-top: 10px !important; font-size: 12px !important; }
}

/* Ostatnie kilka pikseli, zeby pierwszy ekran zmiescil sie takze na malym
   telefonie (375x667), i minimum 11 px na najdrobniejszym napisie. */
@media (max-width: 767px) {
  .eb-hero-section .eb-eyebrow { font-size: 11px !important; }
  .eb-hero-section .eb-social-proof { margin-top: 6px !important; padding: 6px 0 !important; }
  .eb-hero-section { padding-bottom: 8px !important; }
}

/* Na malym telefonie popup mial jeszcze centymetr za duzo i przewijal sie
   w srodku. Ma byc widoczny w calosci, bo to moment decyzji o zakupie. */
@media (max-height: 700px) {
  .eb-popup-box { padding: 16px 16px 14px !important; max-height: 94vh; }
  .eb-popup-headline { font-size: 19px !important; margin: 5px 0 3px !important; }
  .eb-popup-img img { max-height: 56px !important; }
  .eb-popup-img { margin-bottom: 5px !important; }
  .eb-popup-body, .eb-popup-body p { font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 4px !important; }
  .eb-popup-urgency { font-size: 13px !important; margin: 6px 0 !important; }
  .eb-popup-oldprice { margin-bottom: 5px !important; }
  .eb-popup-actions { margin-top: 7px !important; }
  .eb-popup-cta { padding: 12px 14px !important; font-size: 14px !important; }
  .eb-popup-decline { font-size: 12px !important; }
}

/* Krzyzyk zamykajacy wchodzil na pierwsza linijke tekstu, a blok pilnosci byl
   czerwony obok pomaranczowego przycisku, czyli dwa gorace kolory naraz. */
.eb-popup-framing { margin-left: 32px !important; margin-right: 32px !important; }
.eb-popup-close { width: 30px !important; height: 30px !important; top: 8px !important; right: 8px !important; }

.eb-popup-urgency,
.eb-popup-urgency * {
  color: var(--ink) !important;
  font-style: normal !important;
}
.eb-popup-urgency strong, .eb-popup-urgency b {
  color: color-mix(in srgb, var(--cta) 74%, #2A1B08) !important;
}

/* Przekreslona cena w popupie zostawala czerwona: trzeci kolor w jednym oknie */
.eb-popup-oldprice, .eb-popup-oldprice * { color: var(--ink-mut) !important; }

/* ===========================================================================
   Obrazek w hero: proporcje
   Mial naraz narzucona szerokosc (100%) i maksymalna wysokosc, wiec przegladarka
   go SPLASZCZALA zamiast przeskalowac: gif 444x250 wychodzil jako 280x92, czyli
   71% odchylenia od oryginalu. Wysokosc pilnuje kadru, szerokosc dolicza sie sama.
   ========================================================================= */
.eb-hero-section .eb-mood-photo,
.eb-hero-section img:not(.eb-author-block img) {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 110px !important;
  object-fit: contain !important;
  margin: 14px auto 0 !important;
}

@media (max-width: 767px) {
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 84px !important;
    margin: 10px auto 0 !important;
  }
}

/* najniższe ekrany: kadr jeszcze niższy, żeby hero dalej mieścił się w całości */
@media (max-height: 700px) {
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) { max-height: 68px !important; }
}

/* ===========================================================================
   Trzy drobiazgi zgloszone po obejrzeniu obu stron
   ========================================================================= */

/* 1. BLOK CENY
   Cena szla bezszeryfowa (oryginalna regula .eb-offer-box .eb-price-new byla
   scislejsza niz nasza), miala 56 px, czyli wiecej niz najwiekszy naglowek
   strony, a plakietka "OSZCZEDZASZ" wskakiwala obok niej w tej samej linii
   i siadala na jej dolnej krawedzi. */
/* Cena idzie grubym bezszeryfowym, tak jak w ciemnym pudelku oferty, ktore
   Marek wskazal jako wzor. Szeryf zostaje na naglowkach, liczby maja bic. */
.eb-offer-box .eb-price-new, .eb-offer-box-dark .eb-price-new,
.eb-section-dark .eb-price-new, .eb-price-new {
  font-family: var(--font-body) !important;
  font-variation-settings: normal !important;
  font-size: 50px !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}

.eb-offer-box .eb-price-old, .eb-offer-box-dark .eb-price-old, .eb-price-old {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

.eb-offer-box .eb-price-old, .eb-price-old { font-size: var(--drobne) !important; }

.eb-badge-save {
  display: block !important;
  width: fit-content;
  margin: 12px auto 0 !important;
}

/* 2. KARTA PRODUKTU
   Karta miala 250 px, wiec podpisy lamaly sie na sierotki ("Cie sluchac",
   "Cornell"). Szersza karta i wywazone lamanie wierszy. */
.eb-split-card { width: 340px !important; max-width: 100%; }
.eb-split-name, .eb-split-sub { text-wrap: balance; }
.eb-split-sub { margin-top: 2px; }
.eb-split-sub + .eb-split-sub { margin-top: 6px; opacity: 0.8; }

/* 3. PIECZEC GWARANCJI
   Napis "GWARANCJA" mial 88 px przy koleczku 90 px, wiec dotykal obrysu
   i wygladal, jakby z niego wychodzil. Kolo wieksze, litery ciasniej. */
.eb-guarantee-badge {
  width: 132px !important; height: 132px !important;
  border-width: 1px !important;
}
.eb-guarantee-badge-sm {
  width: 116px !important; height: 116px !important;
  border-width: 1px !important;
}
.eb-guarantee-badge .eb-gb-top,
.eb-guarantee-badge .eb-gb-bottom {
  letter-spacing: 0.1em !important;
  white-space: nowrap;
}
.eb-guarantee-badge .eb-gb-number {
  font-size: 40px !important;
  line-height: 1.05 !important;
  margin: 2px 0;
}
.eb-guarantee-badge-sm .eb-gb-number { font-size: 34px !important; }

@media (max-width: 767px) {
  .eb-offer-box .eb-price-new, .eb-price-new { font-size: 40px !important; }
  .eb-split-card { width: 100% !important; }
  .eb-guarantee-badge { width: 120px !important; height: 120px !important; }
  .eb-guarantee-badge-sm { width: 108px !important; height: 108px !important; }
  .eb-guarantee-badge .eb-gb-number { font-size: 34px !important; }
  .eb-guarantee-badge-sm .eb-gb-number { font-size: 30px !important; }
}

/* ===========================================================================
   Obrazki: rozmiar w hero, gorna granica szerokosci, oddech pod spodem
   Pomiar przed poprawka: gif w hero mial na telefonie 147x84 (za maly),
   gif na ciemnej sekcji rozlazil sie do 996 px szerokosci, a KAZDY obrazek
   mial zerowy margines dolny, wiec tekst zaczynal sie tuz pod kadrem
   (w jednym miejscu odstep wynosil dokladnie 0 px).
   ========================================================================= */

/* Zaden kadr w tekscie nie jest szerszy niz lama plus zapas */
.eb-mood-photo {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Oddech pod kazdym obrazkiem */
.eb-mood-photo,
.eb-split-photo,
figure img { margin-bottom: 26px !important; }

.eb-split-photo { margin-bottom: 16px !important; }

/* Podpis pod zdjeciem trzyma sie zdjecia, nie odjezdza z reszta */
.eb-mood-photo + p,
.eb-mood-photo + div { margin-top: 0; }

/* Gif w hero byl za maly. Wiekszy kadr, dalej w proporcjach. */
.eb-hero-section .eb-mood-photo,
.eb-hero-section img:not(.eb-author-block img) {
  max-height: 132px !important;
  margin: 16px auto 0 !important;
}
.eb-hero-section .eb-social-proof { margin-top: 10px !important; }
.eb-hero-section { padding-bottom: 10px !important; }

@media (max-width: 767px) {
  .eb-mood-photo { max-width: 100% !important; margin-bottom: 20px !important; }
  .eb-split-photo { margin-bottom: 14px !important; }

  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) {
    max-height: 130px !important;
    margin: 12px auto 0 !important;
  }
}

/* Na najniższych ekranach kadr w hero zostaje mały, żeby pierwszy ekran
   dalej mieścił się w całości. */
@media (max-height: 700px) {
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) { max-height: 84px !important; }
}

/* Najniższe ekrany (iPhone SE i podobne): kilkanaście pikseli z odstępów w hero,
   żeby pierwszy ekran mieścił się w całości także tam. */
@media (max-height: 700px) {
  .eb-hero-section { padding-top: 6px !important; padding-bottom: 6px !important; }
  .eb-hero-section h1 { font-size: 21px !important; margin-bottom: 8px !important; }
  .eb-hero-section p { font-size: 14.5px !important; line-height: 1.44 !important; }
  .eb-author-block { margin-bottom: 5px !important; }
  .eb-hero-section .eb-eyebrow { margin-bottom: 6px !important; }
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) { margin: 8px auto 0 !important; }
  .eb-hero-section .eb-social-proof { margin-top: 8px !important; padding: 5px 0 !important; }
}

/* ===========================================================================
   HERO — porzadek na pierwszym ekranie
   Problem: szesc wysrodkowanych klockow o roznych szerokosciach, bez wspolnej
   osi. Wiersz z okladka rozciagal sie na cale 350 px z ptaszkiem odrzuconym
   na sam brzeg, pasek z badaniami lamal ikone do osobnej linijki, a gif
   (228 px) plywal w kolumnie 350 px z pustka po obu stronach.
   ========================================================================= */

/* Wiersz z okladka i zrodlem: zwarty znaczek, nie pas na cala szerokosc */
.eb-author-block {
  width: auto !important;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 9px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}
.eb-author-block img { flex-shrink: 0; }
.eb-author-block span { text-align: left; }

/* Pasek z badaniami: ikona w jednej linii z tekstem, nie nad nim */
.eb-social-proof {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  text-align: left;
}
.eb-social-proof i, .eb-social-proof img { flex-shrink: 0; }

/* Nadnaglowek: ciasniej, zeby dwie linijki wersalikow nie krzyczaly */
.eb-hero-section .eb-eyebrow { letter-spacing: 0.11em !important; line-height: 1.5 !important; }

/* Gif w hero na calej szerokosci kolumny: daje ekranowi punkt oparcia
   zamiast plywac w srodku */
.eb-hero-section .eb-mood-photo,
.eb-hero-section img:not(.eb-author-block img) {
  width: 100% !important;
  max-width: 300px !important;
  max-height: none !important;
  height: auto !important;
  margin: 16px auto 0 !important;
}

@media (max-width: 767px) {
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) {
    max-width: 100% !important;
    margin: 14px auto 0 !important;
  }
}

/* Najnizsze ekrany: kadr wraca do niskiego, inaczej hero nie wchodzi w calosci */
@media (max-height: 700px) {
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) {
    width: auto !important;
    max-width: 100% !important;
    max-height: 84px !important;
  }
}

/* Kilkanaście pikseli na laptopie 1280x800, żeby hero mieścił się i tam */
@media (min-width: 768px) {
  .eb-hero-section { padding-top: 14px !important; padding-bottom: 2px !important; }
  .eb-hero-section .eb-mood-photo,
  .eb-hero-section img:not(.eb-author-block img) { margin-top: 12px !important; }
  .eb-hero-section .eb-social-proof { margin-top: 8px !important; padding: 7px 0 !important; }
}

/* Akcentowana linia w naglowku hero miala z oryginalu przezroczysty tekst
   (-webkit-text-fill-color) i gradient w tle, wiec pokazywala STARY kolor spod
   spodu zamiast koloru marki. Przy Charyzmie wygladalo to dobrze przez przypadek,
   bo gradient i akcent byly w tym samym kolorze. Przy innej palecie od razu widac. */
.eb-hero-accent,
.eb-gradient-text,
.eb-hero-accent *,
.eb-gradient-text * {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}