/* ==========================================================================
   Optima Cardio — „Przyszłe Ja". Landing page kampanii.

   PIXEL PERFECT względem finalnej Figmy (V2, 11.09.2026). Dwie ramki projektu:
   mobile 390 px i desktop z kolumną 1170 px.

   Jednostka --u = jeden piksel projektu. Na szerokości ramki wynosi dokładnie
   1px, więc każda wartość w arkuszu to liczba wprost z Figmy: calc(22*var(--u))
   znaczy „22 px z projektu". Na węższych ekranach --u maleje i cały układ
   skaluje się proporcjonalnie — zero przewijania w poziomie, zero przeskoków.
   Szersze ekrany: kolumna zatrzymuje się na 1170 px (mobile: 600 px),
   po bokach biel — dokładnie tak jak w projekcie desktop.

   Interlinie: Figma zaokrągla wysokość wiersza do pełnego piksela
   (30 px × 1.05 = 31, nie 31.5), więc podajemy je wprost w --u, a nie mnożnikiem.
   ========================================================================== */

/* --- Poppins, self-hosted. Google Fonts odpada: RODO (IP użytkownika leci
       do Google) i dodatkowy handshake do obcego hosta psuje LCP. ---------- */
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"OC Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Osadzanie ---------------------------------------------------------------
   Arkusz jest samowystarczalny: nic nie wychodzi poza .oc-lp, a style strony
   nadrzędnej (Gatsby na optymalnewybory.pl) nie wchodzą do środka.
   - wszystkie klasy z prefiksem oc-,
   - reset przez :where() — specyficzność jednej klasy, więc przebija globalne
     reguły na tagach (h1{font-family:Poppins}, html{font:112.5%/1.45em georgia}),
     a nasze reguły komponentów i tak wygrywają kolejnością,
   - font pod własną nazwą: strona Optimy ma swój @font-face „Poppins” (tylko 700,
     TTF) i przy tej samej nazwie przeglądarka mieszałaby pliki,
   - układ zależy od szerokości kontenera .oc-lp, nie okna (container queries).
   -------------------------------------------------------------------------- */
.oc-lp{
  container:oc-lp / inline-size;

  --ink:        #195640;
  --green-deep: #003618;
  --green-dark: #00431b;
  --green-step: #004b25;
  --red-deep:   #b60015;
  --red:        #c31d30;
  --red-bright: #d10e18;
  --gold:       #b58f44;
  --sand:       #fae580;
  --pale-green: #e7edc1;

  background:#fff;
  color:var(--ink);
  font-family:"OC Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  letter-spacing:normal;
  text-align:left;
  text-transform:none;
  text-rendering:auto;
  overflow-wrap:normal;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Reset wszystkiego w środku — strona nadrzędna może mieć reguły na dowolnym tagu
   (section{padding}, div{line-height}, span{letter-spacing}, img{margin-bottom}…). */
.oc-lp :where(*, *::before, *::after){ box-sizing:border-box }
.oc-lp :where(*){
  margin:0; padding:0; border:0;
  font:inherit; letter-spacing:inherit; text-transform:inherit; text-rendering:inherit;
  color:inherit; background:none; list-style:none;
}
.oc-lp :where(img){ display:block; max-width:none; height:auto }

@container oc-lp (width < 1024px){ .oc-d{ display:none } }

/* cqi, nie vw: 100vw wlicza pasek przewijania (17 px przewijania w poziomie),
   a cqi to realna szerokość .oc-lp — także gdy Gatsby wstawi LP w węższy kontener.
   Elipsa nad hero jest szersza niż kontener — przycinamy ją tutaj, u źródła. */
.oc-lp__stage{
  --u: min(100cqi / 390, 600px / 390);
  --col: 390;
  position:relative;
  overflow:clip;
}

.oc-lp__col,
.oc-footer{
  position:relative;
  width:calc(var(--col) * var(--u));
  margin-inline:auto;
}

/* --- Hero: dwa slajdy z przenikaniem ---------------------------------------
   Slajd 1 to layout z ramki V2, slajd 2 to KV z V1 („PRZYSZŁY TY”). Oba leżą
   w jednej komórce siatki, a przenikanie robi animacja opacity przesunięta
   o pół cyklu. Gdy wpięty jest lp.js, przejmuje on sterowanie (klasa .is-swipe)
   i dokłada przewijanie palcem.

   Wysokość ramy jest stała (mobile 775, desktop 493), żeby slider nie przesuwał
   treści pod sobą. Na mobile oba slajdy mają ten sam podział: czerwony blok 392
   + pas ze zdjęciem 383 (feedback Verde 16.09 — „wyrównajmy czerwony prostokąt
   i zdjęcia”; z bloku V2 znika przy okazji serduszko, żeby bloki się zgadzały).
   Desktop zostaje 1:1 z ramkami: napis KV wraca na zdjęcia.

   Swipe obsługuje public/assets/lp.js. Bez skryptu zostaje samo przenikanie
   z @keyframes, więc slider działa też tam, gdzie Gatsby nie wpuści JS.
   -------------------------------------------------------------------------- */
.oc-hero{ display:grid; height:calc(775*var(--u)); overflow:hidden }

.oc-hero__slide{
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  animation:oc-hero-fade 14s infinite;
}
.oc-hero__slide--kv{ animation-delay:-7s }

@keyframes oc-hero-fade{
  0%, 42%  { opacity:1 }
  50%, 92% { opacity:0 }
  100%     { opacity:1 }
}

/* Ze skryptem slajdami steruje klasa .is-active — @keyframes wtedy milczy. */
.oc-hero.is-swipe{ touch-action:pan-y; user-select:none; -webkit-user-select:none }
.oc-hero.is-swipe .oc-hero__slide{ animation:none; opacity:0; transition:opacity .8s ease }
.oc-hero.is-swipe .oc-hero__slide.is-active{ opacity:1 }

/* Bez ruchu: sam layout V2 (gdy nie ma skryptu, oba slajdy leżałyby na sobie),
   a ze skryptem przełączanie palcem zostaje, tylko bez przenikania i bez zegara. */
@media (prefers-reduced-motion: reduce){
  .oc-hero__slide{ animation:none }
  .oc-hero:not(.is-swipe) .oc-hero__slide--kv{ display:none }
  .oc-hero.is-swipe .oc-hero__slide{ transition:none }
}

/* KV: dwie połówki ze zdjęciami, napis „PRZYSZŁY TY” i packshot. Wszystko liczone
   od dolnej krawędzi, więc ta sama kompozycja siedzi i w ramce 390, i w 775. */
.oc-kv{
  position:relative;
  flex:1;
  overflow:hidden;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
  color:var(--pale-green);
}

.oc-kv__half{ position:absolute; top:0; bottom:0; width:50%; overflow:hidden }
.oc-kv__half--l{ left:0; background:#14603a }
.oc-kv__half--r{ right:0; background:radial-gradient(calc(118.23*var(--u)) calc(195*var(--u)) at 50% 50%, #ca252e, #a41421) }

.oc-kv__half img{ position:absolute; max-width:none; object-fit:cover }
/* Kadr z ramki 390 przeskalowany 1.19× — dzięki temu głowy stoją na tej samej wysokości
   co bohater na slajdzie V2 (feedback Verde: „wyrównajmy zdjęcia”). */
.oc-kv__half--l img{ left:calc(-310*var(--u)); bottom:calc(-33*var(--u)); width:calc(610*var(--u)); height:calc(419*var(--u)) }
.oc-kv__half--r img{ left:calc(-423*var(--u)); bottom:calc(-174*var(--u)); width:calc(823*var(--u)); height:calc(566*var(--u)) }

.oc-kv__pack{
  position:absolute;
  left:calc(50% - 0.5*var(--u)); bottom:calc(-2*var(--u));
  width:calc(213*var(--u)); height:calc(102*var(--u));
  translate:-50% 0;
  object-fit:cover;
}

.oc-hero__copy{
  height:calc(392*var(--u));
  /* Oś tekstu w mobilnej ramce Figmy leży na 194.5, nie na 195. */
  padding:calc(32*var(--u)) calc(1*var(--u)) 0 0;
  background:var(--red-deep);
  color:#fff;
  text-align:center;
}

.oc-hero__title{ font-weight:700; text-transform:uppercase }
.oc-hero__title > span{ display:block }

.oc-hero__eyebrow{ font-size:calc(40*var(--u)); line-height:calc(60*var(--u)); color:var(--pale-green) }
.oc-hero__name{ font-size:calc(80*var(--u)); line-height:calc(120*var(--u)); margin-top:calc(-32*var(--u)) }
.oc-hero__sub{
  font-size:calc(32*var(--u)); line-height:calc(48*var(--u)); margin-top:calc(-27*var(--u));
  color:var(--pale-green);
  text-transform:none;
}

.oc-hero__buy{ font-size:calc(24*var(--u)); line-height:calc(36*var(--u)); margin-top:calc(20*var(--u)) }

.oc-hero__brand{ font-weight:800; font-size:calc(24*var(--u)); line-height:calc(36*var(--u)); margin-top:calc(-4*var(--u)) }
.oc-hero__brand span{ font-weight:500; font-size:calc(18*var(--u)); line-height:1; color:var(--sand) }

.oc-hero__small{ font-size:calc(18*var(--u)); line-height:calc(24*var(--u)); margin-top:calc(-1*var(--u)); color:var(--sand) }

.oc-hero__heart{ width:calc(46*var(--u)); height:calc(51*var(--u)); margin:calc(32*var(--u)) auto 0 }
/* Serduszko zostaje tylko pod krótkim napisem KV — pod długim copy V2 rozpychało blok. */
.oc-hero__slide--copy .oc-hero__heart{ display:none }

/* Blok KV jest krótszy od copy V2, więc napis stoi w pionie na środku. */
.oc-hero__copy--kv{ display:flex; flex-direction:column; justify-content:center; padding-top:0 }

.oc-hero__photo{
  position:relative;
  height:calc(383*var(--u));
  overflow:hidden;
  background:#14603a;
}

/* Kadr z pokryciem — pas jest wyższy niż w ramce (300 → 383), a głowa ma stanąć na tej
   samej wysokości co bohaterowie w KV. */
.oc-hero__photo img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* 91%: bohater siedzi w prawej części kadru (środek postaci na 62% szerokości pliku),
     więc dopiero takie przesunięcie okna stawia go na środku pasa. */
  object-position:91% 8%;
}

/* Oznaczenie grafik generowanych przez SI — wymóg po stronie klienta. */
.oc-ai-note{
  position:absolute;
  left:calc(8*var(--u)); bottom:calc(6*var(--u));
  font-weight:400;
  font-size:calc(13*var(--u)); line-height:calc(18*var(--u));
  color:#fff;
}
.oc-ai-note--right{ left:auto; right:calc(8*var(--u)) }

/* --- Sekcja 1: zobacz siebie w przyszłości -------------------------------- */
.oc-showcase{
  min-height:calc(736*var(--u));
  padding:calc(52*var(--u)) calc(16*var(--u)) 0;
  overflow:hidden;
  background:#fbf1e6;
}

.oc-showcase__title{
  font-weight:700;
  font-size:calc(40*var(--u)); line-height:calc(48*var(--u));
  color:var(--red);
  text-transform:uppercase;
}

.oc-showcase__lead{ font-size:calc(20*var(--u)); line-height:calc(28*var(--u)); margin-top:calc(20*var(--u)) }
.oc-showcase__body{ font-size:calc(16*var(--u)); line-height:calc(24*var(--u)); margin-top:calc(16*var(--u)) }

/* Figma kadruje telefon w ramce: obraz 98.83% szerokości, przesunięty o 2.57%
   w dół i ucięty dolną krawędzią sekcji. */
.oc-showcase__phone{
  position:relative;
  height:calc(360*var(--u));
  margin-top:calc(40*var(--u));
  overflow:hidden;
}

.oc-showcase__phone img{ position:absolute; left:0; top:2.57%; width:98.83%; height:103.48% }

/* --- CTA „Weź udział” -----------------------------------------------------
   Dodane poza projektem (decyzja Rafała 14.09.2026) — Figma nie ma na LP żadnego
   przycisku, a landing ma prowadzić do formularza. Owalny, w czerwieni nagłówków (--red).
   -------------------------------------------------------------------------- */
.oc-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:calc(24*var(--u));
  padding:calc(14*var(--u)) calc(40*var(--u)) calc(16*var(--u));
  border-radius:500px;
  background:var(--red);
  color:#fff;
  font-weight:700;
  font-size:calc(18*var(--u)); line-height:calc(26*var(--u));
  text-decoration:none;
}
.oc-cta:hover{ background:var(--red-deep) }
.oc-cta:focus-visible{ outline:calc(3*var(--u)) solid var(--ink); outline-offset:calc(2*var(--u)) }

/* --- Sekcje nagród (1. i 2. stopnia) -------------------------------------- */
.oc-prize{
  padding:calc(52*var(--u)) calc(16*var(--u));
  overflow:hidden;
  background:#edf0e5;
}

.oc-prize--passion{ background:#fceded }

.oc-prize__pill{
  width:fit-content;
  padding:calc(2*var(--u)) calc(16*var(--u));
  border-radius:500px;
  background:var(--green-dark);
  color:#fff;
  font-size:calc(16*var(--u)); line-height:calc(24*var(--u));
  text-transform:uppercase;
}

.oc-prize--passion .oc-prize__pill{ background:var(--red) }

/* Kwota to lockup jak logo: człony w różnych rozmiarach, z pozycjami wprost
   z Figmy (wspólna linia bazowa wychodzi z samych współrzędnych). */
.oc-amount{
  position:relative;
  height:calc(88*var(--u));
  margin-top:calc(16*var(--u));
  color:var(--gold);
  white-space:nowrap;
}

.oc-amount > span{ position:absolute; top:calc(23*var(--u)); font-weight:700; font-size:calc(49*var(--u)); line-height:calc(59*var(--u)) }
.oc-amount .oc-amount__count{ left:0; top:0; font-weight:800; font-size:calc(73*var(--u)); line-height:calc(88*var(--u)) }
.oc-amount .oc-amount__value{ top:calc(7*var(--u)); font-weight:800; font-size:calc(66*var(--u)); line-height:calc(79*var(--u)) }

.oc-prize--exam .oc-amount__times{ left:calc(49*var(--u)) }
.oc-prize--exam .oc-amount__value{ left:calc(82*var(--u)) }
.oc-prize--exam .oc-amount__unit{ left:calc(258*var(--u)) }
.oc-prize--passion .oc-amount__times{ left:calc(100*var(--u)) }
.oc-prize--passion .oc-amount__value{ left:calc(133*var(--u)) }
.oc-prize--passion .oc-amount__unit{ left:calc(292*var(--u)) }

.oc-prize__title{
  font-weight:700;
  font-size:calc(28*var(--u)); line-height:calc(29*var(--u));
  color:var(--green-dark);
  text-transform:uppercase;
}

.oc-prize--passion .oc-prize__title{ color:var(--red) }

.oc-prize__lead{ font-size:calc(20*var(--u)); line-height:calc(28*var(--u)); margin-top:calc(20*var(--u)) }
.oc-prize__body{ font-size:calc(16*var(--u)); line-height:calc(24*var(--u)); margin-top:calc(16*var(--u)) }

.oc-checklist{
  display:flex;
  flex-direction:column;
  gap:calc(7*var(--u));
  margin-top:calc(16*var(--u));
}

.oc-checklist li{
  display:flex;
  align-items:center;
  gap:calc(20*var(--u));
  height:calc(30*var(--u));
  font-size:calc(16*var(--u)); line-height:calc(24*var(--u));
  white-space:nowrap;
}

/* Tak jest w projekcie: pierwszy punkt wyrównany do dołu, reszta do środka. */
.oc-checklist li:first-child{ align-items:flex-end }

.oc-checklist img{ width:calc(30*var(--u)); height:calc(30*var(--u)) }

.oc-checklist--hearts{ gap:calc(10*var(--u)) }

.oc-checklist--hearts li,
.oc-checklist--hearts li:first-child{
  align-items:center;
  gap:calc(18*var(--u));
  height:calc(28*var(--u));
  line-height:calc(19*var(--u));
}

.oc-checklist--hearts img{ width:calc(24*var(--u)); height:calc(28*var(--u)) }

.oc-prize__outro{ font-size:calc(18*var(--u)); line-height:calc(29*var(--u)) }
.oc-prize--exam .oc-prize__outro{ margin-top:calc(34*var(--u)) }
.oc-prize--passion .oc-prize__outro{ margin-top:calc(32*var(--u)) }

.oc-prize__media{ margin-top:calc(40*var(--u)) }

.oc-prize__polaroid{
  width:calc(374*var(--u)); height:calc(285*var(--u));
  object-fit:cover;
}

/* Kolaż — w Figmie warstwy leżą absolutnie; przenosimy współrzędne 1:1. */
.oc-collage{
  position:relative;
  height:calc(488*var(--u));
  margin:calc(40*var(--u)) calc(-16*var(--u)) 0;
}

.oc-collage > *{ position:absolute }

.oc-collage__p3{ left:calc(27*var(--u)); top:calc(145*var(--u)); width:calc(244*var(--u)); height:calc(304*var(--u)) }
.oc-collage__p2{ left:calc(106*var(--u)); top:calc(20*var(--u)); width:calc(275*var(--u)); height:calc(215*var(--u)) }
.oc-collage__camera{ left:calc(73*var(--u)); top:calc(289*var(--u)); width:calc(331*var(--u)); height:calc(221*var(--u)) }
.oc-collage__hearts{ left:calc(16*var(--u)); top:0; width:calc(88*var(--u)); height:calc(68*var(--u)); object-fit:cover }

.oc-collage__p2,
.oc-collage__camera{ overflow:hidden }

.oc-collage__p3 img{ width:100%; height:100%; object-fit:cover }
.oc-collage__p2 img{ position:absolute; left:-0.09%; top:0; width:100.91%; height:100% }
.oc-collage__camera img{ position:absolute; left:2.23%; top:-0.1%; width:100%; height:100.21% }

.oc-collage__note{
  left:calc(282*var(--u)); top:calc(221*var(--u));
  font-weight:400;
  font-size:calc(13*var(--u)); line-height:calc(18*var(--u));
  white-space:nowrap;
}

/* --- Sekcja 4: proste kroki do wygranej ----------------------------------- */
.oc-steps__bar{
  padding:calc(20*var(--u)) calc(10*var(--u)) calc(21*var(--u));
  background:var(--green-deep);
  color:#fff;
  text-align:center;
  font-weight:600;
  font-size:calc(24*var(--u)); line-height:calc(25*var(--u));
  text-transform:uppercase;
  white-space:nowrap;
}

.oc-steps__how{
  display:flow-root;   /* margines pierwszego kroku nie może przeciec nad panel */
  height:calc(327*var(--u));
  padding-left:calc(16*var(--u));
  background:#b1dd4d;
}

.oc-step{
  display:grid;
  grid-template-columns:calc(42*var(--u)) 1fr;
  column-gap:calc(13*var(--u));
  align-items:start;
}

/* Odstępy nieregularne, bo takie są w projekcie — liczone z pozycji kropli
   i tytułów w Figmie, nie z siatki. */
.oc-step:nth-child(1){ margin-top:calc(32*var(--u)) }
.oc-step:nth-child(2){ margin-top:calc(24*var(--u)) }
.oc-step:nth-child(3){ margin-top:calc(24*var(--u)) }
.oc-step:nth-child(1) .oc-step__text{ padding-top:calc(6*var(--u)) }
.oc-step:nth-child(2) .oc-step__text{ padding-top:calc(3*var(--u)) }
.oc-step:nth-child(3) .oc-step__text{ padding-top:calc(4*var(--u)) }

.oc-step__badge{
  position:relative;
  width:calc(42*var(--u)); height:calc(48*var(--u));
}

.oc-step__badge img{ width:100%; height:100% }

.oc-step__badge span{
  position:absolute;
  inset-inline:0;
  top:calc(8*var(--u));
  text-align:center;
  font-weight:700;
  font-size:calc(26*var(--u)); line-height:calc(27*var(--u));
  color:#d0fc63;
}

.oc-step__title{
  display:block;
  font-weight:800;
  font-size:calc(27*var(--u)); line-height:calc(28*var(--u));
  color:var(--red-bright);
  text-transform:uppercase;
  white-space:nowrap;
}

.oc-step__title--brand,
.oc-step__lower{ text-transform:none }
.oc-step__title--brand span{ color:#004b24 }

.oc-step__desc{
  display:block;
  margin-top:calc(6*var(--u));
  font-size:calc(19*var(--u)); line-height:calc(23*var(--u));
  letter-spacing:-0.01em;
  white-space:nowrap;
}

/* Panel nagród dodatkowych: w obu ramkach Figmy to kompozycja absolutna
   o różnym układzie, więc przenosimy współrzędne 1:1. */
.oc-extras{
  position:relative;
  height:calc(328*var(--u));
  background:#bdf940;
  white-space:nowrap;
}

.oc-extras > *{ position:absolute }

.oc-extras__title{
  left:calc(16*var(--u)); top:calc(32*var(--u));
  font-weight:800;
  font-size:calc(28*var(--u)); line-height:calc(29*var(--u));
  letter-spacing:-0.02em;
  color:var(--red-bright);
}

.oc-extras__icon{ width:calc(52*var(--u)); height:calc(52*var(--u)); left:calc(16*var(--u)) }
.oc-extras__icon--exam{ top:calc(85*var(--u)) }
.oc-extras__icon--passion{ top:calc(222*var(--u)) }

.oc-extras__sum{
  height:calc(31*var(--u));
  font-weight:800;
  color:var(--red-bright);
}

.oc-extras__sum > span{
  position:absolute;
  top:0;
  font-size:calc(30*var(--u)); line-height:calc(31*var(--u));
  letter-spacing:0.01em;
}

.oc-extras__sum .oc-extras__count{ left:0; letter-spacing:-0.02em }
.oc-extras__sum .oc-extras__times{ top:calc(6*var(--u)); font-size:calc(23*var(--u)); line-height:calc(24*var(--u)) }

.oc-extras__sum--exam{ left:calc(80*var(--u)); top:calc(96*var(--u)) }
.oc-extras__sum--exam .oc-extras__times{ left:calc(24*var(--u)) }
.oc-extras__sum--exam .oc-extras__value{ left:calc(44*var(--u)) }
.oc-extras__sum--exam .oc-extras__unit{ left:calc(130*var(--u)) }

.oc-extras__sum--passion{ left:calc(86*var(--u)); top:calc(235*var(--u)) }
.oc-extras__sum--passion .oc-extras__times{ left:calc(45*var(--u)) }
.oc-extras__sum--passion .oc-extras__value{ left:calc(65*var(--u)) }
.oc-extras__sum--passion .oc-extras__unit{ left:calc(142*var(--u)) }

.oc-extras__label{
  font-weight:800;
  letter-spacing:0.01em;
  color:var(--green-step);
  text-transform:uppercase;
}

.oc-extras__label--exam{ left:calc(80*var(--u)); top:calc(133*var(--u)); font-size:calc(30*var(--u)); line-height:calc(31*var(--u)) }
.oc-extras__label--clinic{ left:calc(80*var(--u)); top:calc(170*var(--u)); font-size:calc(24*var(--u)); line-height:calc(25*var(--u)) }
.oc-extras__label--passion{ left:calc(90*var(--u)); top:calc(274*var(--u)); font-size:calc(21*var(--u)); line-height:calc(22*var(--u)) }

.oc-steps__outro{
  display:flex;
  align-items:center;
  justify-content:center;
  height:calc(85*var(--u));
  padding:calc(20*var(--u)) calc(10*var(--u)) calc(21*var(--u));
  background:#edf0e5;
  text-align:center;
  font-weight:600;
  font-size:calc(20*var(--u)); line-height:calc(21*var(--u));
  white-space:nowrap;
}

/* --- Stopka --------------------------------------------------------------- */
.oc-footer{
  height:calc(128*var(--u));
  padding-top:calc(16*var(--u));
  background:var(--green-deep);
  color:#fff;
  text-align:center;
  font-size:calc(16*var(--u)); line-height:calc(24*var(--u));
  white-space:nowrap;
}

/* W Figmie adres wygląda jak zwykły tekst — podkreślenie dopiero przy interakcji.
   Stan :hover/:focus podany wprost, bo globalne a:hover strony nadrzędnej
   miałoby tę samą specyficzność co .oc-footer a. */
.oc-footer a{ color:inherit; text-decoration:none }
.oc-footer a:is(:hover, :focus-visible){ color:inherit; text-decoration:underline; text-underline-offset:0.15em }

/* ==========================================================================
   Desktop — ramka 1920 px z kolumną 1170 px
   ========================================================================== */
@container oc-lp (width >= 1024px){
  .oc-lp__stage{
    --u: min(100cqi / 1170, 1px);
    --col: 1170;
  }

  .oc-m{ display:none }

  /* Elipsa w kolorze paska marki: 4728×1091, dolna krawędź 351 px poniżej
     górnej krawędzi hero. Widoczna tylko w bocznych marginesach. */
  .oc-lp__stage::before{
    content:"";
    position:absolute;
    left:50%;
    top:calc(-740*var(--u));
    width:calc(4728*var(--u));
    height:calc(1091*var(--u));
    translate:-50% 0;
    border-radius:50%;
    background:#e4f0c9;
  }

  /* Hero — obie ramki mają tu 493, więc slajdy przenikają się bez zmiany wysokości. */
  .oc-hero{ height:calc(493*var(--u)) }
  .oc-hero__slide--copy{ display:grid; grid-template-columns:1fr 1fr }
  .oc-hero__slide--kv{ position:relative }

  /* Na desktopie napis KV wraca na zdjęcia, w wielkościach z ramki V1 (56 / 108 / 36). */
  /* Selektor z rodzicem, bo .oc-hero__copy niżej w tym bloku ustawia padding i wysokość. */
  .oc-hero__slide--kv .oc-hero__copy{
    position:absolute; inset:0;
    z-index:1;
    height:auto;
    justify-content:flex-start;
    padding:calc(50*var(--u)) 0 0;
    background:none;
  }
  .oc-hero__copy--kv .oc-hero__eyebrow{ font-size:calc(56*var(--u)); line-height:calc(84*var(--u)) }
  .oc-hero__copy--kv .oc-hero__name{ font-size:calc(108*var(--u)); line-height:calc(162*var(--u)); margin-top:calc(-41*var(--u)) }
  .oc-hero__copy--kv .oc-hero__sub{ font-size:calc(36*var(--u)); line-height:calc(54*var(--u)); margin-top:calc(-37*var(--u)) }

  /* Serduszko: w ramce V2 jest, w V1 go nie ma. */
  .oc-hero__slide--copy .oc-hero__heart{ display:block }
  .oc-hero__slide--kv .oc-hero__heart{ display:none }

  /* KV z ramki desktopowej V1: prawa połówka jest płaska (#b60015), nie gradientowa. */
  .oc-kv__half--l{ background:#006236 }
  .oc-kv__half--r{ background:var(--red-deep) }
  .oc-kv__half--l img{ left:calc(-257*var(--u)); bottom:calc(-70*var(--u)); width:calc(821*var(--u)); height:calc(563*var(--u)) }
  .oc-kv__half--r img{ left:calc(-469*var(--u)); bottom:calc(-290*var(--u)); width:calc(1136*var(--u)); height:calc(783*var(--u)) }

  .oc-kv > p{ left:calc(50% + 0.5*var(--u)) }
  .oc-kv__eyebrow{ bottom:calc(359*var(--u)); font-size:calc(56*var(--u)) }
  .oc-kv__ty{ bottom:calc(238*var(--u)); font-size:calc(108*var(--u)) }
  .oc-kv__sub{ bottom:calc(221*var(--u)); font-size:calc(36*var(--u)); line-height:1.5 }
  .oc-kv__pack{ bottom:calc(-3*var(--u)); width:calc(379*var(--u)); height:calc(181*var(--u)) }

  .oc-hero__copy{ height:calc(493*var(--u)); padding:calc(23*var(--u)) 0 0 }

  .oc-hero__eyebrow{ font-size:calc(44*var(--u)); line-height:calc(66*var(--u)) }
  .oc-hero__name{ font-size:calc(96*var(--u)); line-height:calc(144*var(--u)); margin-top:calc(-35*var(--u)) }
  .oc-hero__sub{ font-size:calc(34*var(--u)); line-height:calc(51*var(--u)); margin-top:calc(-27*var(--u)) }
  .oc-hero__buy{ font-size:calc(30*var(--u)); line-height:calc(45*var(--u)); margin-top:calc(13*var(--u)) }
  .oc-hero__brand{ font-size:calc(30*var(--u)); line-height:calc(45*var(--u)); margin-top:calc(-5*var(--u)) }
  .oc-hero__brand span{ font-size:calc(24*var(--u)) }
  .oc-hero__small{ font-size:calc(24*var(--u)); line-height:calc(32*var(--u)); margin-top:calc(-4*var(--u)) }
  .oc-hero__heart{ margin-top:calc(7*var(--u)) }

  .oc-hero__photo{ order:-1; height:calc(493*var(--u)); background:#006236 }
  .oc-hero__photo img{ left:calc(-223*var(--u)); top:0; width:calc(821*var(--u)); height:calc(563*var(--u)) }

  /* Sekcja 1 */
  .oc-showcase{
    display:grid;
    grid-template-columns:calc(570*var(--u)) calc(600*var(--u));
    min-height:calc(604*var(--u));
    padding:0;
  }

  .oc-showcase__text{ padding:calc(51*var(--u)) 0 calc(40*var(--u)) calc(70*var(--u)) }
  .oc-showcase__title{ font-size:calc(55*var(--u)); line-height:calc(66*var(--u)) }
  .oc-showcase__lead{ font-size:calc(30*var(--u)); line-height:calc(42*var(--u)); margin-top:calc(22*var(--u)) }
  .oc-showcase__body{ font-size:calc(22*var(--u)); line-height:calc(33*var(--u)); margin-top:calc(31*var(--u)) }
  /* Sekcja urosła o przycisk, a telefon ma zostać przycięty dolną krawędzią jak w Figmie. */
  .oc-showcase__phone{ align-self:end; height:calc(604*var(--u)); margin:0 }

  .oc-cta{
    margin-top:calc(34*var(--u));
    padding:calc(16*var(--u)) calc(48*var(--u)) calc(18*var(--u));
    font-size:calc(24*var(--u)); line-height:calc(34*var(--u));
  }

  /* Sekcje nagród */
  .oc-prize{
    display:grid;
    align-items:start;
    padding:0;
  }

  .oc-prize--exam{ grid-template-columns:calc(581*var(--u)) calc(537*var(--u)); min-height:calc(662*var(--u)) }
  .oc-prize--passion{ grid-template-columns:calc(529*var(--u)) calc(641*var(--u)); min-height:calc(661*var(--u)) }

  /* Na desktopie Figma łamie wiersze wyłącznie ręcznie (<br class="d">). */
  .oc-showcase__text,
  .oc-prize{ white-space:nowrap }

  .oc-prize__text{ padding-left:calc(68*var(--u)) }
  .oc-prize--exam .oc-prize__text{ padding-top:calc(22*var(--u)) }
  .oc-prize--passion .oc-prize__text{ padding-top:calc(20*var(--u)); padding-bottom:calc(40*var(--u)) }
  /* Wszystko w kolumnie tekstu stoi na x=70, tylko kwota na x=68. */
  .oc-prize__text > :not(.oc-amount){ margin-left:calc(2*var(--u)) }

  .oc-prize__pill{
    padding:calc(2*var(--u)) calc(29*var(--u)) calc(1*var(--u));
    font-size:calc(24*var(--u)); line-height:calc(36*var(--u));
  }

  .oc-prize--exam .oc-amount{ margin-top:calc(9*var(--u)) }
  .oc-prize--passion .oc-amount{ margin-top:calc(6*var(--u)) }

  .oc-prize__title{ font-size:calc(42*var(--u)); line-height:calc(44*var(--u)); margin-top:calc(-9*var(--u)) }

  .oc-prize__lead{ font-size:calc(30*var(--u)); line-height:calc(42*var(--u)) }
  .oc-prize--exam .oc-prize__lead{ margin-top:calc(17*var(--u)) }
  .oc-prize--passion .oc-prize__lead{ margin-top:calc(40*var(--u)) }

  .oc-prize__body{ font-size:calc(22*var(--u)); line-height:calc(33*var(--u)); margin-top:calc(13*var(--u)) }

  .oc-checklist{ margin-top:calc(14*var(--u)) }
  .oc-checklist li{ height:calc(33*var(--u)); font-size:calc(22*var(--u)); line-height:calc(33*var(--u)) }

  .oc-checklist--hearts{ margin-top:calc(54*var(--u)) }
  .oc-checklist--hearts li,
  .oc-checklist--hearts li:first-child{
    align-items:flex-end;
    gap:calc(17*var(--u));
    height:calc(34*var(--u));
    line-height:calc(33*var(--u));
  }
  .oc-checklist--hearts img{ width:calc(29*var(--u)); height:calc(34*var(--u)) }

  .oc-prize__outro{ font-size:calc(30*var(--u)); line-height:calc(48*var(--u)) }
  .oc-prize--exam .oc-prize__outro{ margin:calc(30*var(--u)) 0 0 calc(24*var(--u)) }
  .oc-prize--passion .oc-prize__outro{ margin-top:calc(69*var(--u)) }

  .oc-prize__media{ margin-top:calc(46*var(--u)) }
  .oc-prize__polaroid{ width:calc(537*var(--u)); height:calc(410*var(--u)) }

  .oc-collage{ height:calc(601*var(--u)); margin:calc(28*var(--u)) 0 0 }
  .oc-collage__p3{ left:calc(12*var(--u)); top:calc(119*var(--u)); width:calc(319*var(--u)); height:calc(398*var(--u)) }
  .oc-collage__p2{ left:calc(235*var(--u)); top:calc(69*var(--u)); width:calc(406*var(--u)); height:calc(318*var(--u)) }
  .oc-collage__camera{ left:calc(215*var(--u)); top:calc(342*var(--u)); width:calc(426*var(--u)); height:calc(284*var(--u)) }
  .oc-collage__hearts{ left:calc(65*var(--u)); width:calc(176*var(--u)); height:calc(136*var(--u)) }
  .oc-collage__note{ left:calc(215*var(--u)); top:calc(545*var(--u)) }

  /* Sekcja 4 */
  .oc-steps__bar{ font-size:calc(42*var(--u)); line-height:calc(44*var(--u)) }

  .oc-steps__panels{ display:grid; grid-template-columns:calc(580*var(--u)) calc(590*var(--u)) }

  .oc-steps__how{ height:calc(256*var(--u)); padding-left:calc(21*var(--u)) }

  .oc-step:nth-child(1){ margin-top:calc(24*var(--u)) }
  .oc-step:nth-child(2){ margin-top:calc(22*var(--u)) }
  .oc-step:nth-child(3){ margin-top:calc(14*var(--u)) }

  .oc-step__desc{ margin-top:calc(3*var(--u)); line-height:calc(29*var(--u)) }

  .oc-extras{ height:calc(256*var(--u)) }
  .oc-extras__title{ left:calc(19*var(--u)); top:calc(18*var(--u)) }
  .oc-extras__icon{ left:calc(21*var(--u)) }
  .oc-extras__icon--exam{ top:calc(57*var(--u)) }
  .oc-extras__icon--passion{ top:calc(153*var(--u)) }
  .oc-extras__sum--exam{ left:calc(85*var(--u)); top:calc(68*var(--u)) }
  .oc-extras__sum--passion{ left:calc(91*var(--u)); top:calc(166*var(--u)) }
  .oc-extras__label--exam{ left:calc(249*var(--u)); top:calc(68*var(--u)) }
  .oc-extras__label--clinic{ left:calc(85*var(--u)); top:calc(105*var(--u)); font-size:calc(28*var(--u)); line-height:calc(29*var(--u)) }
  .oc-extras__label--passion{ left:calc(266*var(--u)); top:calc(174*var(--u)) }

  .oc-steps__outro{
    font-weight:700;
    font-size:calc(36*var(--u)); line-height:calc(38*var(--u));
    color:var(--red-bright);
  }

  .oc-footer{ height:calc(85*var(--u)) }
}