/* ==========================================================================
   Optima Cardio — „Przyszłe Ja". Formularz konkursowy (form-start … form-8).

   Mobile first, pełna responsywność. Dwa układy z dwóch ramek projektu: mobilny
   (< 1280 px, wartości z ramki 390) i desktopowy (>= 1280 px, ramka 1920, cała
   skalowana jednostką --u). Kompozycja hero jest pozycjonowana w cqw swojej sceny,
   więc ten sam zapis działa w obu układach.

   Interlinie Poppinsa: „normal” w Figmie = 1.5.
   ========================================================================== */

@font-face{font-family:"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:"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:"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:"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:"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:"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:"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:"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:"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:"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}

/* --- Baza --------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box }

:root{
  --ink:        #195640;   /* tekst formularza */
  --line:       #9cc43b;   /* linie, obrysy pól */
  --panel:      #e7edc1;   /* tło panelu i headera */
  --green:      #649b41;   /* zielony przycisk, pill, zaznaczony checkbox */
  --red:        #db0632;   /* czerwony przycisk */
  --red-start:  #e2142c;   /* panel startowy, linki w zgodach */
  --red-copy:   #d10e18;   /* nagłówki w dolnym pasku */
  --green-step: #004b25;
  --nav:        #065540;
  --on-btn:     #f6f9f4;

  /* Kolumna mobilna zatrzymuje się na 600 px i staje na środku (jak w LP);
     % liczy się od rodzica danego bloku, więc jedna definicja działa wszędzie. */
  --center:     max(0px, calc((100% - 600px) / 2));
}

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

.f-body{
  margin:0;
  background:var(--panel);
  color:var(--ink);
  font:500 16px/1.5 "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Ekrany są przepisane z Figmy co do piksela, więc napis powiększony ustawieniem
     czcionki w systemie potrafi wyjść poza swoją kolumnę. Sam napis to drobiazg, ale
     strona zaczyna wtedy jeździć w bok na każdym kroku. `clip` ucina to bez robienia
     z body kontenera przewijania, więc kotwice i pozycja przy powrocie działają dalej. */
  overflow-x:clip;
}

/* :where() — zerowa specyficzność, żeby marginesy komponentów niżej wygrywały. */
.f-body :where(h1,h2,p,ol,ul,hr,figure){ margin:0; padding:0 }
.f-body :where(ol,ul){ list-style:none }
.f-body :where(img){ display:block; max-width:100% }
.f-body :where(a){ color:inherit }

/* Łamania wierszy z Figmy: <br class="f-m"> tylko mobile (< 1024), <br class="f-s"> tylko
   wąski telefon (< 600), <br class="f-d"> tylko desktop. Tam, gdzie Figma łamie „naturalnie”,
   zamiast <br> dajemy max-width równy szerokości pola tekstu z projektu. */
.f-d{ display:none }
@media (min-width: 600px){ .f-s{ display:none } }

/* --- Header --------------------------------------------------------------- */
.f-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:70px;
  padding:0 16px;
  background:var(--panel);
}

.f-top__logo img{ width:108px; height:40px }

/* Menu rozwijane spod headera. Zamknięte jest schowane dla czytnika też (display:none),
   stan trzyma .is-open na headerze — patrz form.js. */
.f-top__nav{
  display:none;
  position:absolute;
  left:0; right:0; top:100%;
  flex-direction:column;
  padding:8px 16px 16px;
  background:var(--panel);
  box-shadow:0 12px 24px rgb(25 86 64 / 0.12);
}
.f-top.is-open .f-top__nav{ display:flex }

.f-top__link{
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-weight:500;
  font-size:16px; line-height:1.4;
  letter-spacing:0.05em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--nav);
}
.f-top__link:last-child{ border-bottom:0 }
.f-top__link--hot{ color:#ba182d }

.f-top__burger{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;   /* pole dotykowe; same kreski mają 36×18 jak w projekcie */
  margin-right:-4px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}

.f-top__burger-lines{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:36px; height:18px;
}
.f-top__burger-lines span{ display:block; height:2px; background:var(--nav); transition:translate .15s, rotate .15s, opacity .15s }

/* Otwarte — kreski składają się w „×”. */
.f-top.is-open .f-top__burger-lines span:nth-child(1){ translate:0 8px; rotate:45deg }
.f-top.is-open .f-top__burger-lines span:nth-child(2){ opacity:0 }
.f-top.is-open .f-top__burger-lines span:nth-child(3){ translate:0 -8px; rotate:-45deg }

@media (prefers-reduced-motion: reduce){
  .f-top__burger-lines span{ transition:none }
}

/* --- Modal (regulamin) ---------------------------------------------------- */
.f-modal{
  width:100%; max-width:none; height:100%; max-height:none;
  margin:0;
  padding:16px;
  border:0;
  background:none;
  overflow:hidden;
}
.f-modal::backdrop{ background:rgb(25 86 64 / 0.55) }

.f-modal__box{
  display:flex;
  flex-direction:column;
  width:100%; max-width:720px; max-height:100%;
  margin-inline:auto;
  border-radius:12px;
  background:var(--panel);
  color:var(--ink);
}

.f-modal__head{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 20px 12px;
  border-bottom:1px solid var(--line);
}

.f-modal__title{ font-weight:700; font-size:24px; line-height:1.2 }

.f-modal__close{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  margin:-10px -10px 0 auto;
  padding:0;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--ink);
  cursor:pointer;
}
.f-modal__close svg{ fill:none; stroke:currentColor; stroke-width:2 }
.f-modal__close:hover{ background:rgb(25 86 64 / 0.08) }

.f-modal__body{
  overflow-y:auto;
  padding:16px 20px 24px;
  font-size:15px; line-height:1.6;
}
/* Nagłówki paragrafów to <p class="f-legal__h"> (w modalu) albo <h2> (na /regulamin), patrz bin/regulamin-z-docx.php. */
.f-legal .f-legal__h{
  margin-top:20px;
  font-weight:700;
  font-size:17px; line-height:1.3;
}
.f-modal__body p{ margin-top:10px }

/* Regulamin w modalu. Trzy poziomy numeracji jak w .docx od legal: ust. → pkt → podpunkt.
   Klasy stawia bin/regulamin-z-docx.php, więc nie zmieniaj ich nazw bez zmiany generatora. */
/* Nazwa konkursu nad §1. */
.f-legal__lead{ font-weight:700 }
.f-legal ol{ margin-top:10px; padding-left:24px }
.f-legal li{ margin-top:8px }
.f-legal li > p{ margin-top:8px }
.f-legal__ol{ list-style:decimal }
.f-legal__ol--a{ list-style:lower-alpha }
.f-legal__ol--i{ list-style:lower-roman }
.f-legal a{ color:var(--red-start); font-weight:700 }
/* Miejsce, którego legal jeszcze nie uzupełnił — ma kłuć w oczy, a nie udawać treść. */
.f-legal__luka{
  padding:1px 6px;
  border-radius:4px;
  background:rgb(219 6 50 / 0.12);
  color:var(--red);
  font-weight:700;
}

@media (min-width: 700px){
  .f-modal{ padding:40px }
  .f-modal__head{ padding:28px 28px 16px }
  .f-modal__title{ font-size:32px }
  .f-modal__body{ padding:20px 28px 32px; font-size:16px }
  .f-legal ol{ padding-left:28px }
}

/* Tekst tylko dla czytników ekranu. */
.f-sr{
  position:absolute;
  width:1px; height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* --- Hero (kolumna ze zdjęciem) ------------------------------------------ */
.f-hero{
  display:flex;
  justify-content:center;
  /* Tło poza sceną (mobile > 600 px, desktop przy wysokim panelu) — kolory połówek. */
  background:linear-gradient(90deg, #14603a 50%, #a41421 50%);
  overflow:hidden;
}

/* Scena: kwadrat 390×390 na telefonie, od 600 px pas 1045×633 jak w ramce desktopowej.
   Wszystkie pozycje w cqw sceny, więc ten sam zapis działa w obu kompozycjach. */
.f-hero__stage{
  container-type:inline-size;
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
  color:var(--panel);
}

.f-hero__half{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  overflow:hidden;
}
.f-hero__half--l{ left:0; background:#14603a }
.f-hero__half--r{ right:0; background:radial-gradient(30.26cqw 50cqw at 50% 50%, #ca252e, #a41421) }

.f-hero__img{ position:absolute; max-width:none; object-fit:cover }
.f-hero__half picture{ display:contents }

.f-hero--men .f-hero__half--l .f-hero__img{ left:-62.821cqw; top:16.923cqw; width:131.538cqw; height:90.256cqw }
.f-hero--men .f-hero__half--r .f-hero__img{ left:-87.179cqw; top:15.385cqw; width:177.288cqw; height:122.051cqw }
.f-hero--women .f-hero__half--l .f-hero__img{ left:-17.436cqw; top:-3.333cqw; width:275.897cqw; height:130.769cqw }
.f-hero--women .f-hero__half--r .f-hero__img{ left:-82.308cqw; top:-3.333cqw; width:275.897cqw; height:130.769cqw }

/* Na starcie H1 strony (hero.php), na krokach div. Bez własnego pudełka: linie stoją absolutnie w scenie. */
.f-hero__h1{ display:contents; font:inherit }
.f-hero__stage :is(.f-hero__eyebrow,.f-hero__ty,.f-hero__sub){ position:absolute; left:calc(50% - 1.026cqw); translate:-50% 0 }
.f-hero__eyebrow{ top:5.128cqw; font-size:8.205cqw; line-height:1.5; text-transform:uppercase }
.f-hero__ty{ top:11.026cqw; font-size:15.385cqw; line-height:1.5; color:#fff; text-transform:uppercase }
.f-hero__sub{ top:30cqw; left:calc(50% - 1.154cqw); font-size:5.128cqw; line-height:1.2 }

.f-hero__pack{
  position:absolute;
  left:50%; bottom:-0.513cqw;
  width:54.615cqw; height:26.154cqw;
  translate:-50% 0;
  object-fit:cover;
}

/* --- Hero w kompozycji desktopowej (od 600 px) -----------------------------
   Na tablecie kwadrat 390×390 rozciągnięty do 600–1279 px wyglądał jak wycinek
   z pustymi pasami po bokach. Od 600 px bierzemy kadr z ramki 1920: pas 1045×633
   na całą szerokość, treść zostaje w kolumnie 600 px. -------------------------- */
@media (min-width: 600px){
  .f-hero__stage{ aspect-ratio:1045/633 }

  .f-hero__half--l{ background:#006236 }
  .f-hero__half--r{ background:radial-gradient(circle 30.287cqw at 50% 50%, #ca252e, #a41421) }

  .f-hero--men .f-hero__half--l .f-hero__img{ left:-31.005cqw; top:4.019cqw; width:84.306cqw; height:57.799cqw }
  .f-hero--men .f-hero__half--r .f-hero__img{ left:-51.292cqw; top:3.828cqw; width:117.799cqw; height:81.053cqw }

  /* Panie w tym kadrze to jedna bitmapa 1920×910 — lewa „połówka” na całą scenę. */
  .f-hero--women .f-hero__half--l{ width:100%; background:none }
  .f-hero--women .f-hero__half--r{ display:none }
  .f-hero--women .f-hero__half--l .f-hero__img{ left:0.191cqw; top:-9.761cqw; width:183.732cqw; height:87.081cqw }

  .f-hero__stage :is(.f-hero__eyebrow,.f-hero__ty,.f-hero__sub){ left:50% }
  .f-hero__eyebrow{ top:5.742cqw; font-size:5.837cqw }
  .f-hero__ty{ top:9.856cqw; font-size:11.483cqw }
  .f-hero__sub{ top:23.062cqw; left:50%; font-size:3.828cqw; line-height:1.5 }

  .f-hero__pack{ bottom:-0.287cqw; width:34.545cqw; height:16.555cqw }
}

/* --- Panel kroku ---------------------------------------------------------- */
.f-panel{
  position:relative;   /* kontekst dla packshotu leżącego za treścią na ekranach błędu */
  display:flex;
  flex-direction:column;
  padding:24px 16px 52px;
  background:var(--panel);
  /* Pierścienie kroku 5-2 wychodzą 33 px poza ramkę mobilną, dokładnie jak w Figmie, która
     je przycina. `overflow-x` na body nie wystarcza: przeglądarka przenosi je z body na
     widok i strona i tak jeździ w bok. `clip`, nie `hidden` — pionowo nic nie przycinamy. */
  overflow-x:clip;
}

.f-form{ display:contents }

.f-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.f-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;
  padding:8px 10px 9px;
  border-radius:8px;
  background:var(--green);
  font-weight:700;
  font-size:15px; line-height:1.4;
}

/* max-width = szerokość pola tekstu z ramki mobilnej: „Rejestracja dowodu zakupu”
   łamie się tam na dwa wiersze wyrównane do prawej, krótsze etykiety zostają w jednym. */
.f-panel__label{ max-width:125px; font-size:13px; line-height:1.2; text-align:right }

.f-line{
  height:1px;
  margin-top:24px;
  border:0;
  background:var(--line);
}

/* Interlinie w px tam, gdzie Figma zaokrągla wysokość wiersza (18×1.4 = 25, nie 25.2).
   Tytuł: 36 px od 390 px, mniejszy na węższych telefonach (przy 320 łamałby się na 3 wiersze). */
.f-title{
  margin-top:24px;
  font-weight:700;
  font-size:clamp(30px, 9.25vw, 36px); line-height:1.2;
}

.f-lead{ margin-top:28px; font-size:18px; line-height:25px }

.f-cta{ padding-top:40px }

/* Przycisk: 16/32/19, radius 12; mobile na całą szerokość. */
.f-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:16px 32px 19px;
  border:0;
  border-radius:12px;
  background:var(--green);
  color:var(--on-btn);
  font-family:inherit;
  font-weight:700;
  font-size:16px; line-height:1.2;
  text-decoration:none;
  cursor:pointer;
}
.f-btn--red{ background:var(--red) }
/* Obrysowany (krok 8): 1 px w ramce mobilnej, 2 px w desktopowej — tak jest w projekcie. */
.f-btn--ghost{ border:1px solid var(--line); background:var(--panel); color:var(--ink) }
.f-arrow{ flex:none; fill:none; stroke:currentColor; stroke-width:2 }

/* Checkbox 38×38: pusty = obrys, zaznaczony = zielony z ptaszkiem. */
.f-checks{ display:flex; flex-direction:column; gap:18px; margin-top:24px }
.f-checks__note{ font-weight:400; font-size:15px; line-height:19px }

.f-check{
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
  cursor:pointer;
}
.f-check > input{ position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none }

.f-check__box{
  flex:none;
  width:38px; height:38px;
  border:2px solid var(--line);
  border-radius:8px;
}
.f-check__box svg{ display:none; width:100%; height:100%; fill:none; stroke:#185640; stroke-width:3 }
.f-check > input:checked + .f-check__box{ border-color:var(--green); background:var(--green) }
.f-check > input:checked + .f-check__box svg{ display:block }
.f-check > input:focus-visible + .f-check__box{ outline:2px solid var(--ink); outline-offset:2px }

.f-check__text{ font-weight:400; font-size:15px; line-height:19px }

/* Szerokość pola tekstu z Figmy (--w w jednostkach projektu). Na mobile nie ogranicza,
   bo kolumna jest węższa niż projekt; na desktopie łamie wiersze dokładnie jak w ramce. */
.f-w{ max-width:none }
.f-check__text :is(a,b){ font-weight:700; color:var(--red-start) }
.f-check__text a{ text-decoration:underline; text-underline-position:from-font }

/* Pole tekstowe: tło jak panel, obrys 2 px, radius 12; wpis Poppins 600 18. */
.f-input{
  width:100%;
  padding:14px 16px 15px;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:inherit;
  font-family:inherit;
  font-weight:600;
  font-size:16px; line-height:22px;
}

/* Podpowiedź w polu: kolor tekstu, ale przygaszona — w Figmie jest w kolorze wpisu,
   co myli z wypełnionym polem. */
.f-input::placeholder{ color:var(--ink); opacity:.6 }

/* Koło z ptaszkiem (krok 8); to samo pudełko obsłuży „!” i „X” z ekranów błędów. */
.f-tick{ width:148px; margin-top:24px }
.f-tick svg{ display:block; width:100%; height:auto }

/* --- Kroki plikowe: 2 (dowód zakupu), 2-blad, 4 (selfie), 4-blad -----------
   Wspólne: biała ramka z kreskowanym obrysem, wskazówki z ptaszkiem, koło ze
   statusem (współdzielone z krokiem 8) i packshot leżący za treścią na ekranach
   błędu. Wartości z ramek 2092:244797 / 244929 / 246296 / 246424 (desktop)
   i 2092:247593 / 247715 / 248957 / 249076 (mobile).
   -------------------------------------------------------------------------- */

/* Pole na zdjęcie dowodu zakupu. Klik w całą ramkę otwiera wybór pliku, bo input
   siedzi wewnątrz etykiety — działa więc też z klawiatury (focus rysujemy na ramce). */
.f-drop{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:320px;
  margin-top:24px;
  padding:16px;
  border:1px dashed #000;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
}

/* Input tylko wizualnie schowany — zostaje w kolejności tabulacji i niesie etykietę.
   Bez pointer-events: dotknięcie środka ramki trafiałoby w sam input i omijało form.js (23.09). */
.f-file{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.f-drop:has(.f-file:focus-visible){ outline:2px solid var(--ink); outline-offset:2px }
/* W trakcie wysyłki input jest wyłączony, więc klik w ramkę nic nie otwiera —
   kursor ma o tym mówić, zanim człowiek kliknie drugi raz. */
.f-drop:has(.f-file:disabled){ cursor:progress }

.f-drop__icon{ flex:none; width:70px; height:58px }
/* Podgląd wybranego pliku — stanu nie ma w Figmie (plan §8.8), składamy go ze stylu
   pozostałych komponentów: miniatura w kadrze ramki + nazwa i rozmiar pod spodem. */
.f-drop__img{ display:none; flex:1 1 auto; min-height:0; width:100%; object-fit:contain; border-radius:6px }
.f-drop__name{ flex:none; font-weight:600; font-size:15px; line-height:18px; text-align:center; overflow-wrap:anywhere }
.f-drop__name:empty{ display:none }
.f-drop.is-filled .f-drop__img{ display:block }
.f-drop.is-filled .f-drop__icon{ display:none }
/* Podgląd tylnego aparatu w ramce (22.09): zajmuje miejsce miniatury, póki nie ma zdjęcia. */
.f-drop__cam{ display:none; flex:1 1 auto; min-height:0; width:100%; object-fit:contain; border-radius:6px; background:#000 }
.f-drop.is-live .f-drop__cam{ display:block }
.f-drop.is-live .f-drop__icon,
.f-drop.is-live .f-drop__img{ display:none }

/* Wskazówki „co ma być na zdjęciu”: ptaszek 22×15.5 + tekst. */
.f-hints{ display:flex; flex-direction:column; row-gap:24px }
.f-hints--drop{ margin-top:28px }
/* Numer dowodu zakupu nad ramką (23.09, spoza Figmy): odstęp jak między ramką a leadem. */
.f-field--receipt{ margin-top:24px }
.f-hints--selfie{ row-gap:24px; margin-top:24px }

.f-hint{
  display:grid;
  grid-template-columns:22px auto;
  column-gap:16px;
  align-items:start;
  font-weight:400;
  font-size:15px; line-height:18px;
}
/* 1.25 = wyśrodkowanie ptaszka w pierwszym wierszu (18 − 15.5) / 2; przy dwóch
   wierszach zostaje przy górnym, tak jak w projekcie. */
.f-hint svg{ width:22px; height:15.5px; margin-top:1.25px; fill:none; stroke:#185640; stroke-width:3 }

/* --- Krok 4: kadr selfie ---------------------------------------------------
   Okrągły obrys 330 z Figmy, w środku podgląd z kamery albo wyzwolona klatka
   (oba absolutnie, inset 14 — zdjęcie stoi dokładnie w świetle obrysu).
   -------------------------------------------------------------------------- */
.f-selfie{ margin-top:24px }
.f-photo{
  position:relative;
  width:min(330px, 100%);
  aspect-ratio:1;
  margin-inline:auto;
  border:1px dashed #000;
  border-radius:50%;
  overflow:hidden;
}
.f-photo{ --photo-inset:14px }
/* <video> i <canvas> to elementy zastępowane: przy width:auto samo `inset` ich nie
   rozciąga, zostają w rozmiarze naturalnym (640×480 z kamery, 600×600 klatki) i kółko
   pokazywało tylko ich lewy górny róg. Stąd jawna szerokość i wysokość. */
.f-photo__view{
  display:none;
  position:absolute;
  inset:var(--photo-inset);
  width:calc(100% - 2 * var(--photo-inset));
  height:calc(100% - 2 * var(--photo-inset));
  border-radius:50%;
  background:#fff;
  object-fit:cover;
}
/* Przednia kamera daje obraz nieodbity, a aparat w telefonie pokazuje lustro: bez tego
   ruch w lewo idzie na podglądzie w prawo. Odbijamy tylko to, co widać; do wysyłki idzie
   klatka tak, jak ją widzi kamera (napisy w tle czytelne). */
.f-photo__cam,
.f-photo__shot{ transform:scaleX(-1) }
.f-photo.is-live .f-photo__cam,
.f-photo.is-shot .f-photo__shot{ display:block }
.f-photo__icon{
  position:absolute;
  left:50%; top:50%;
  width:70px; height:58px;
  translate:-50% -50%;
}
.f-photo.is-live .f-photo__icon,
.f-photo.is-shot .f-photo__icon{ display:none }

/* Ścieżka awaryjna, gdy przeglądarka nie da kamery — bez niej zostaje martwy kadr.
   Pusty akapit znika, więc ekran bez błędu mierzy się jak w Figmie. */
.f-photo__fallback{ margin-top:16px; font-weight:600; font-size:15px; line-height:18px; color:var(--red) }
.f-photo__fallback:empty{ display:none }
.f-selfie__note{ margin-top:40px; font-weight:400; font-size:15px; line-height:18px }

/* Niski ekran telefonu (iPhone SE, starsze Androidy): kadr, wskazówki i przyciski nie
   mieszczą się naraz, a w chwili naciskania „Zrób zdjęcie” trzeba widzieć swoją twarz
   w podglądzie — inaczej człowiek strzela w ciemno. Kadr idzie za wysokością widoku,
   odstępy się ściskają. Na typowym telefonie (800 px wzwyż) nic się nie zmienia. */
@media (max-width: 1279px) and (max-height: 740px){
  .f-photo{ width:min(330px, 40vh, 100%) }
  .f-hints--selfie{ row-gap:14px; margin-top:16px }
  .f-selfie__note{ margin-top:16px }
}

/* Przyciski kroków plikowych stoją parą: na telefonie jeden pod drugim. */
.f-btns{ display:flex; flex-direction:column; gap:16px }
/* „(max 5 MB)” — na telefonie pod parą przycisków, na desktopie pod prawym. */
.f-cta__note{ margin-top:8px; font-weight:400; font-size:15px; line-height:18px; text-align:center }

/* --- Ekrany błędu (2-blad, 4-blad) ----------------------------------------- */

/* Koło ze statusem w wariancie „!” / „X”: ten sam blok co ptaszek z kroku 8, tylko
   symbol jest tekstem, nie wektorem (w Figmie to też tekst, Poppins 700 55). */
.f-tick--error{
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  color:var(--red);
  font-weight:700;
  font-size:55px; line-height:1.2;
}

.f-red{ color:var(--red) }
.f-brand{ font-weight:600 }
.f-lead--bold{ font-weight:600 }

.f-conds{
  display:flex;
  flex-direction:column;
  row-gap:16px;
  margin-top:24px;
  font-weight:400;
  font-size:15px; line-height:18px;
}

/* Packshot leży za treścią. Na telefonie jest w przepływie (ujemny dolny margines
   wsuwa pod niego przycisk, jak w projekcie), na desktopie pozycjonowany absolutnie. */
/* W ramce 390 packshot dochodzi do prawej krawędzi strony (28 + 346 = kolumna 358 + 16 paddingu),
   więc na węższym telefonie musi się skurczyć — inaczej strona przewija się w poziomie.
   min(346, 100% − 12) daje przy 390 dokładnie 346 z Figmy, a niżej tyle, ile zostaje. */
.f-packshot{ display:block; width:min(346px, calc(100% - 12px)); max-width:none; margin-left:28px }
/* -41 = o tyle przycisk wjeżdża na packshot w ramce mobilnej (packshot 1070+275, przycisk 1304). */
.f-packshot--ocr{ margin-top:28px; margin-bottom:-41px }
/* -22 tą samą drogą na 4-blad: packshot 1001+275 = 1276, przycisk 1254. */
.f-packshot--photo{ margin-top:9px; margin-bottom:-22px }
.f-cta--fail{ padding-top:0 }

/* --- Stany, których Figma nie projektuje (plan §8.8) ------------------------
   Przycisk nieaktywny (brak zgód albo trwająca wysyłka) i komunikat błędu z serwera.
   Składane ze stylu istniejących komponentów, bez nowych kolorów.
   -------------------------------------------------------------------------- */

.f-btn:disabled{ opacity:.45; cursor:not-allowed }
.f-btn[aria-busy="true"]{ cursor:progress }

/* Komunikat serwera. Pusty znika, więc pomiar vs Figma widzi ekran bez niego. */
.f-alert{
  margin-top:20px;
  font-weight:600;
  font-size:15px; line-height:19px;
  color:var(--red);
}
.f-alert:empty{ display:none }

/* Błąd pojedynczego pola (krok 3). Metryczka powtarza się na dziewięciu podekranach,
   więc komunikat musi stać przy swoim polu, nie w zbiorczym alercie na dole. Akapit
   wstawia form.js dopiero po odrzucie, więc ekran bez błędu mierzy się jak w Figmie. */
.f-err{ margin-top:6px; font-weight:600; font-size:14px; line-height:18px; color:var(--red) }
.f-input[aria-invalid="true"]{ border-color:var(--red) }

/* --- Krok 3: metryczka + pytanie / kafeteria -------------------------------
   Mobile: jedna kolumna, wszystko po kolei (odstęp 20 między polami, 6 pod etykietą).
   Desktop: siatka 3 pól w rzędzie + e-mail pod switchem — patrz blok >= 1280.
   -------------------------------------------------------------------------- */
.f-fields{ display:flex; flex-direction:column; gap:20px; margin-top:28px }
.f-field{ display:flex; flex-direction:column }

.f-field__label{
  margin-bottom:6px;
  font-weight:600;
  font-size:18px; line-height:25px;
  letter-spacing:-0.02em;
}

.f-field__area{ height:240px; resize:none }
.f-fields__note{ margin-top:4px; font-size:13px; line-height:18px; letter-spacing:-0.02em }

/* Switch „Forma”: dwie równe połówki, wybrana to ciemna pigułka (Figma: 179 z 358). */
.f-switch{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  border:2px solid var(--line);
  border-radius:12px;
}
.f-switch__opt{ position:relative; display:flex; cursor:pointer }
.f-switch__opt input{ position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none }
.f-switch__opt span{
  flex:1;
  padding:14px 16px 15px;
  border-radius:10px;
  text-align:center;
  white-space:nowrap;
  font-weight:600;
  font-size:16px; line-height:22px;
}
.f-switch__opt input:checked + span{ background:var(--ink); color:#fff }
.f-switch__opt input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:-4px }

/* Kafeteria — jedna odpowiedź z listy, więc radio w pudełku checkboxa z projektu.
   Pytania są opcjonalne: „Dalej” bez zaznaczenia = pominięcie (plan §8.5).
   ponytail: raz zaznaczonej opcji nie można odznaczyć — Figma nie przewiduje „wyczyść”. */
.f-cafe{ display:grid; gap:12px; margin-top:-8px }   /* -8: pod pytaniem odstęp to 12, nie 20 */
.f-cafe .f-check{ gap:11px }
.f-cafe__q{ font-weight:600; font-size:18px; line-height:25px; letter-spacing:-0.02em }

/* Na podekranach 2–9 form.js przewija widok do pytania; odstęp od góry jak padding panelu. */
.f-field--q,
.f-cafe__q{ scroll-margin-top:24px }

/* „Inna:” — wpis na linii 35 px od góry wiersza; etykieta zostaje przy górnej krawędzi. */
/* Zgoda marketingowa: tekst ma kilka wierszy, więc ptaszek trzyma się pierwszego. */
.f-check--marketing{ align-items:flex-start }
.f-check__nowrap{ white-space:nowrap }

.f-check--other{ align-items:flex-start }
.f-check--other .f-check__text{ display:flex; flex-direction:column }
/* Wpis ma w projekcie 16 px wysokości, czyli samą linię — jako cel dotyku trzy razy za
   mało, palcem trafia się w sąsiedni wiersz kafeterii. Pole dostaje 44 px, a ujemne
   marginesy oddają layoutowi te same 16 px co wcześniej, więc wiersze się nie rozjeżdżają.
   Linia jedzie tłem, bo border-bottom zszedłby razem z dolną krawędzią pola. */
.f-other{
  width:276px; height:44px;
  margin-block:-14px;
  padding:0;
  border:0;
  background:linear-gradient(var(--line), var(--line)) 0 29px / 100% 1px no-repeat;
  color:inherit;
  font-family:inherit;
  font-weight:600;
  font-size:15px; line-height:1;
}

/* --- Krok 5: wybór horyzontu -----------------------------------------------
   Karta 322×116 (mobile na całą szerokość panelu), tekst od 27 px lewej krawędzi.
   Zaznaczenie: ciemna zieleń i biały tekst, tak jak przełącznik formy na kroku 3 —
   Figma stanu wybranego nie rysuje, więc bierzemy wzór z jedynego, który rysuje.
   -------------------------------------------------------------------------- */
.f-lead--horizon{ letter-spacing:-0.02em }

.f-horizons{ display:flex; flex-direction:column; gap:20px; margin-top:24px }

.f-horizon{ position:relative; display:flex; cursor:pointer }
.f-horizon input{ position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none }
.f-horizon__box{
  flex:1;
  height:116px;
  /* 2 px obrysu + 12 px = pudełko liczby na 14 od góry, + 25 px = na 27 od lewej (Figma). */
  padding:12px 0 0 25px;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--panel);
}
.f-horizon input:checked + .f-horizon__box{ border-color:var(--ink); background:var(--ink); color:#fff }
.f-horizon input:focus-visible + .f-horizon__box{ outline:2px solid var(--ink); outline-offset:2px }

.f-horizon__years{ display:block; font-weight:600; font-size:50px; line-height:1.2 }
.f-horizon__years span{ font-weight:400 }
/* -1: w Figmie wiersz z rokiem zachodzi o piksel na pudełko liczby. */
.f-horizon__meta{ display:block; margin-top:-1px; font-weight:600; font-size:18px; line-height:1.2 }

/* --- Krok 5-2: generowanie -------------------------------------------------
   Cztery współśrodkowe koła (456 / 358 / 302 obrysy, 272 wypełnione) zachodzą na tytuł
   i wychodzą poza kolumnę panelu, więc blok jest pozycjonowany od dolnej krawędzi tytułu.
   Liczby to wprost odległości z Figmy.
   -------------------------------------------------------------------------- */
/* Odstępstwo od Figmy (Rafał, 22.09): w projekcie koła zaczynają się 36 px nad dolną krawędzią
   tytułu i przecinają go, a zewnętrzny pierścień zahacza o listę. Blok zaczyna się pod tytułem,
   lista i notka stoją pod kołami. Oczekiwania pomiaru: figma-expected/form-5-2-*.json. */
.f-gen{ position:relative; height:636px }

.f-gen__rings,
.f-gen__ring2,
.f-gen__ring3,
.f-gen__year{
  border-radius:50%;
  box-sizing:border-box;
}
.f-gen__rings{
  position:absolute;
  /* Środek kół na środku kolumny, a nie stałe -49: to jest ten sam punkt tylko przy
     kolumnie 358 (telefon 390). Na 360 stałe przesunięcie spychało koła o 15 px w prawo. */
  top:0; left:calc(50% - 228px);
  width:456px; height:456px;
  border:3px solid #d9e6a9;
}
/* inset + margin:auto środkuje pudełko o stałym rozmiarze w rodzicu, bez transformów. */
.f-gen__ring2,
.f-gen__ring3,
.f-gen__year{ position:absolute; inset:0; margin:auto }
.f-gen__ring2{ width:358px; height:358px; border:3px solid #cadd8e }
.f-gen__ring3{ width:302px; height:302px; border:3px solid #9cc43b }
.f-gen__year{
  display:flex;
  align-items:center;
  justify-content:center;
  width:272px; height:272px;
  background:var(--green);
  font-weight:700;
  font-size:70px; line-height:1.2;
}

/* nowrap: w Figmie wszystkie trzy wiersze są jednoliniowe, a w desktopowej kolumnie
   (274 px od ptaszka do krawędzi panelu) najdłuższy z nich sam by się złamał. */
.f-hints--gen{ position:absolute; top:476px; left:0; row-gap:24px; white-space:nowrap }
.f-gen__note{ position:absolute; top:618px; left:0; font-weight:400; font-size:15px; line-height:18px }

/* Ruch ekranu 5-2: fale z koła z rokiem, oddech koła, wejście ptaszków (rok liczy form.js).
   Tylko transform i opacity, więc układ stoi tam, gdzie mówi Figma; fale siedzą
   w pseudoelementach, żeby żaden mierzony węzeł nie zmieniał rozmiaru. Pomiar biegnie
   z reduced motion i widzi stan spoczynkowy. */
@media (prefers-reduced-motion: no-preference){
  .f-gen__rings::before,
  .f-gen__rings::after{
    content:"";
    position:absolute; inset:0; margin:auto;
    width:66.2%; height:66.2%;   /* 302 / 456: start fali na jasnozielonym obrysie */
    border:2px solid #9cc43b;
    border-radius:50%;
    opacity:0;
    animation:f-gen-wave 3.2s cubic-bezier(.2,.6,.3,1) infinite;
  }
  .f-gen__rings::after{ animation-delay:1.6s }

  .f-gen__year{ animation:f-gen-breathe 3.2s ease-in-out infinite }

  .f-hints--gen .f-hint{ animation:f-gen-in .5s ease-out both }
  .f-hints--gen .f-hint:nth-child(2){ animation-delay:.6s }
  .f-hints--gen .f-hint:nth-child(3){ animation-delay:1.2s }
  .f-hints--gen .f-hint path{ stroke-dasharray:40; animation:f-gen-tick .5s ease-out both }
  .f-hints--gen .f-hint:nth-child(1) path{ animation-delay:.25s }
  .f-hints--gen .f-hint:nth-child(2) path{ animation-delay:.85s }
  .f-hints--gen .f-hint:nth-child(3) path{ animation-delay:1.45s }
}
@keyframes f-gen-wave{
  0%  { transform:scale(1);    opacity:.9 }
  100%{ transform:scale(1.45); opacity:0 }   /* 302 × 1,45 = 438, w obrębie pierścienia 456 */
}
@keyframes f-gen-breathe{
  50%{ transform:scale(1.035) }
}
@keyframes f-gen-in{
  from{ opacity:0; transform:translateY(8px) }
}
@keyframes f-gen-tick{
  from{ stroke-dashoffset:40 }
  to  { stroke-dashoffset:0 }
}

/* --- Krok 6: wynik ---------------------------------------------------------
   Ten sam blok obsługuje /krok/6 i /wynik/{token}. Mobile to jedna kolumna, desktop
   dwie: zdjęcie 390 po lewej, list i przyciski 260 po prawej.
   -------------------------------------------------------------------------- */
.f-result{ position:relative }

/* Strzałka wstecz stoi przy tytule, ale nie w jego wierszu — w obu ramkach ma własne
   miejsce, więc pozycjonujemy ją zamiast wciskać w przepływ nagłówka. */
.f-result__back{
  position:absolute;
  top:34px; left:0;
  display:flex;
  color:var(--ink);
}
.f-result__back .f-arrow{ transform:rotate(180deg) }

.f-title--result{ padding-left:33px }
.f-result__status{ margin-top:16px; font-weight:600; font-size:15px; line-height:1.2; letter-spacing:-0.02em }
.f-result__status b{ color:var(--line) }

.f-result__cols{ margin-top:40px }

.f-result__photo{
  position:relative;
  height:442px;
  margin:0;
  border-radius:12px;
  background:var(--line);
  overflow:clip;
}
.f-result__photo img{ width:100%; height:100%; object-fit:cover }
.f-result__age{
  position:absolute;
  top:16px; left:16px;
  padding:10px 33px;
  border-radius:1000px;
  background:var(--red);
  color:#fff;
  font-weight:600;
  font-size:15px; line-height:1.2;
}

.f-result__message{
  margin-top:24px;
  padding:16px 20px;
  border-radius:12px;
  background:#a2cc88;
}
/* 25 px, nie 1.65: Figma zaokrągla wiersz listu w górę (15 × 1,65 = 24,75), a po pięciu
   wierszach różnica robi się widoczna w wysokości dymka. */
.f-result__message p{ font-weight:400; font-size:15px; line-height:25px }

.f-result__btns{ display:flex; flex-direction:column; gap:16px; margin-top:40px }

/* --- Krok 7: zadanie konkursowe ------------------------------------------- */
.f-task__intro{ margin-top:28px; font-size:18px; line-height:25px; letter-spacing:-0.02em }
.f-task__q{ display:block; margin-top:24px; font-size:18px; line-height:25px; letter-spacing:-0.02em }
/* resize:none — uchwyt w narożniku jest widocznym odstępstwem od projektu, a pole
   (218–240 px) mieści cały limit 1000 znaków. */
.f-task__field{ margin-top:24px; height:240px; resize:none }

/* --- Krok 8: finał -------------------------------------------------------- */
.f-title--final{ margin-top:24px }
.f-final__lead{ margin-top:28px; font-weight:600; font-size:18px; line-height:22px }

/* --- Panel startowy (form-start): czerwony, bez pill ----------------------- */
.f-panel--start{
  padding-top:36px;
  background:var(--red-start);
  color:var(--panel);
  text-transform:uppercase;
}
.f-panel--start .f-line{ margin-top:0 }
.f-start__lead{ margin-top:36px; font-size:20px; line-height:24px; text-transform:none }
/* Jeden wiersz jak w Figmie: przy 390 napis (334 px) mieści się w kolumnie 358, na 360 już nie
   (kolumna 328), więc poniżej 390 krój maleje z szerokością kolumny zamiast łamać „WEŹ UDZIAŁ”. */
.f-start__big{ margin-top:40px; font-weight:700; font-size:min(56px, (100vw - 32px) * 0.1676); line-height:1.5; white-space:nowrap }
.f-start__small{ margin-top:-18px; font-weight:700; font-size:min(44px, (100vw - 32px) * 0.1349); line-height:1.5; white-space:nowrap }
.f-panel--start .f-cta{ padding-top:40px; text-transform:none }

/* --- Dolny pasek: kroki + nagrody ----------------------------------------- */
.f-banner{ display:grid }

/* Kompozycja paska jest absolutna dla 390 px, napisy bez zawijania („...i już wygrywasz!”,
   „Dodatkowo do wygrania:”), więc węższe telefony dostają ją pomniejszoną w całości.
   `zoom` chce liczby, a 100vw / 390px (dzielenie długości przez długość) zna dopiero
   Chrome 140+; tan(atan2()) starsze Chromium liczy źle. Skalę --banner-k ustawia form.js. */
@media (max-width: 389px){ .f-banner{ zoom:var(--banner-k, 1) } }

/* Blok kroków 390×612 — kompozycja absolutna z Figmy. */
.f-banner__steps{
  position:relative;
  height:612px;
  overflow:hidden;
  background:#b1dd4d;
  white-space:nowrap;
}

.f-bullet{ position:absolute; left:16px; width:calc(100% - 16px); height:48px }
.f-bullet:nth-child(1){ top:32px }
.f-bullet:nth-child(2){ top:104px }
.f-bullet:nth-child(3){ top:211px }

.f-bullet__badge{ position:absolute; left:0; top:0; width:42px; height:48px }
.f-bullet__no{
  position:absolute;
  left:0; top:8px;
  width:42px;
  text-align:center;
  font-weight:700;
  font-size:26px; line-height:1.05;
  color:#d0fc63;
}

.f-bullet__title{
  position:absolute;
  left:55px;
  font-weight:800;
  font-size:27px; line-height:1.05;
  color:var(--red-copy);
  text-transform:uppercase;
}
.f-bullet:nth-child(1) .f-bullet__title{ top:6px }
.f-bullet:nth-child(2) .f-bullet__title{ top:3px }
.f-bullet:nth-child(3) .f-bullet__title{ top:4px }
.f-bullet__title--brand{ color:var(--ink); text-transform:none }
.f-bullet__title--brand span{ color:#004b24 }

.f-bullet__desc{
  position:absolute;
  left:55px;
  font-size:19px; line-height:1.2;
  letter-spacing:-0.01em;
}
.f-bullet:nth-child(2) .f-bullet__desc{ top:37px }
.f-bullet:nth-child(3) .f-bullet__desc{ top:38px }

.f-banner__phone{
  position:absolute;
  left:50%; top:335px;
  width:291px; height:424px;
  translate:-50% 0;
  object-fit:cover;
}

/* Blok nagród 390×476. */
.f-banner__prizes{
  position:relative;
  height:476px;
  background:#bdf940;
  white-space:nowrap;
}
.f-banner__prizes > *{ position:absolute }

.f-prizes__title{
  left:16px; top:32px;
  font-weight:800;
  font-size:28px; line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--red-copy);
}

.f-prizes__icon{ left:16px; width:52px; height:52px }
.f-prizes__icon--exam{ top:85px }
.f-prizes__icon--passion{ top:222px }

/* Kwota to lockup: człony pozycjonowane osobno, jak w Figmie. */
.f-prizes__sum{ height:31px; font-weight:800; color:var(--red-copy) }
.f-prizes__sum > span{ position:absolute; top:0; font-size:30px; line-height:1.05; letter-spacing:0.01em }
.f-prizes__count{ left:0; letter-spacing:-0.02em }
.f-prizes__times{ top:6px !important; font-size:23px !important }

.f-prizes__sum--exam{ left:80px; top:96px }
.f-prizes__sum--exam .f-prizes__times{ left:24px }
.f-prizes__sum--exam .f-prizes__value{ left:44px }
.f-prizes__sum--exam .f-prizes__unit{ left:130px }

.f-prizes__sum--passion{ left:86px; top:235px }
.f-prizes__sum--passion .f-prizes__times{ left:45px }
.f-prizes__sum--passion .f-prizes__value{ left:65px }
.f-prizes__sum--passion .f-prizes__unit{ left:142px }

.f-prizes__label{
  font-weight:800;
  line-height:1.05;
  letter-spacing:0.01em;
  color:var(--green-step);
  text-transform:uppercase;
}
.f-prizes__label--exam{ left:80px; top:133px; font-size:30px }
.f-prizes__label--clinic{ left:80px; top:170px; font-size:24px }
.f-prizes__label--passion{ left:90px; top:274px; font-size:21px }

.f-prizes__note{
  left:50%; top:348px;
  translate:-50% 0;
  text-align:center;
  font-size:16px; line-height:1.5;
  color:#000;
}

/* Kolumna mobilna: powyżej 600 px treść zatrzymuje się na 600 i staje na środku.
   Bloki w przepływie przesuwa padding, ale kompozycje paska mają dzieci absolutne,
   a te liczą pozycję od padding boxa — padding ich nie rusza, więc idą marginesem.
   Telefon i stopka paska zostają na środku bloku, bo tam są też w projekcie. */
@media (max-width: 1279px){
  .f-top,
  .f-panel{ padding-inline:calc(16px + var(--center)) }

  .f-bullet,
  .f-banner__prizes > *:not(.f-prizes__note){ margin-left:var(--center) }
}

/* Od ~700 px obok punktów starcza miejsca na telefon — idzie po prawej zamiast pod spód
   (w ramce mobilnej stoi pod nimi tylko dlatego, że przy 390 px nie ma innego wyjścia).
   Dolną krawędzią jest przycięty, tak jak w ramce desktopowej. */
@media (min-width: 700px) and (max-width: 1279px){
  .f-banner__steps{ height:auto; min-height:300px; padding:32px 0; white-space:normal }
  .f-banner__phone{ left:auto; right:var(--center); top:16px; width:260px; height:379px; translate:none }

  /* Punkty w przepływie — zawinięty tytuł rozpycha punkt zamiast wchodzić na opis.
     Kolumna tekstu kończy się przed telefonem (260 szerokości + 16 odstępu). */
  .f-bullets{ display:flex; flex-direction:column; gap:24px }
  .f-bullet{
    position:relative;
    left:auto;
    width:calc(min(100%, 600px) - 276px);
    height:auto;
    min-height:48px;
    margin-left:calc(var(--center) + 16px);
    padding-left:55px;
  }
  .f-bullet:nth-child(n){ top:auto }
  .f-bullet__badge{ left:0; top:0 }
  .f-bullet__no{ left:0; top:8px }
  .f-bullet__title{ position:static; display:block }
  .f-bullet__desc{ position:static; display:block; margin-top:6px }
}

/* ==========================================================================
   Desktop — ramka 1920: header 99 · [hero 1045 | panel 875] 633 · pasek 178

   Cała ramka skaluje się jedną jednostką: --u = 1 px projektu. Przy 1920 wynosi
   dokładnie 1px (układ 1:1 z Figmą), niżej maleje razem z typografią, więc kolumny
   nie zmieniają proporcji i nic się nie łamie inaczej niż w projekcie. Podłoga 0.8
   pilnuje czytelności: poniżej ~1536 px okna panel zostaje przy 700 px, a różnicę
   zjada kolumna zdjęcia (kadr).
   ========================================================================== */
@media (min-width: 1280px){
  .f-m{ display:none }
  .f-d{ display:inline }

  :root{
    --u:       clamp(0.8px, 100vw / 1920, 1px);
    --panel-w: calc(875 * var(--u));
    --pad:     calc(100 * var(--u));
  }

  /* Header: nawigacja kończy się na prawej krawędzi kolumny 1170 (jak LP), czyli 375 px
     od prawej przy 1920; w węższym oknie nie bliżej niż margines panelu. */
  .f-top{
    height:calc(99 * var(--u));
    padding:0 max(var(--pad), calc((100vw - 1170 * var(--u)) / 2)) 0 calc(43 * var(--u));
  }
  .f-top__logo img{ width:calc(162 * var(--u)); height:calc(60 * var(--u)) }

  /* Pasek nawigacji z projektu; burger zostaje i otwiera to samo menu (patrz form.js).
     Odstępy 32 / 27 z Figmy minus 1.4 px — przeglądarka dolicza letter-spacing za ostatnią literą. */
  .f-top__nav{
    display:flex;
    position:static;
    flex-direction:row;
    align-items:center;
    gap:calc(30.6 * var(--u));
    margin-left:auto;
    margin-right:calc(26.3 * var(--u));
    padding:0;
    background:none;
    box-shadow:none;
    font-weight:400;
    font-size:calc(14 * var(--u)); line-height:1.05;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }
  .f-top__link{ padding:0; border:0; font:inherit; letter-spacing:inherit }

  /* Burger tylko tam, gdzie ma co otwierać. W Figmie jest też na desktopie, ale to fragment
     zrzutu z optymalnewybory.pl — u nas wszystkie pozycje stoją w pasku, więc byłby martwy.
     Odstęp 63 = 27 (do burgera) + 36 (burger), żeby linki zostały na pozycjach z projektu. */
  .f-top__burger{ display:none }
  .f-top__nav{ margin-right:calc(62.3 * var(--u)) }

  /* Siatka: zdjęcie | panel */
  .f-main{ display:grid; grid-template-columns:1fr var(--panel-w) }

  /* Scena ma stałe 1045×633 jednostek i stoi przy dolnej krawędzi (packshot styka się
     z paskiem, jak w projekcie). W węższej kolumnie wystaje symetrycznie i jest przycinana,
     w szerszej zostaje na środku, a boki dopełnia tło w kolorach połówek. */
  .f-hero{
    display:grid;
    justify-items:center;
    align-items:end;
    background:linear-gradient(90deg, #006236 50%, #a41421 50%);
  }

  .f-hero__stage{
    width:calc(1045 * var(--u));
    height:calc(633 * var(--u));
    aspect-ratio:auto;
  }

  /* Panel */
  .f-panel{ min-height:calc(633 * var(--u)); padding:0 var(--pad) calc(36 * var(--u)) }

  .f-pill{
    width:calc(150 * var(--u));
    padding:calc(8 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u));
    border-radius:calc(8 * var(--u));
    font-size:calc(15 * var(--u)); line-height:1.4;
  }
  .f-panel__label{ max-width:none; font-size:calc(15 * var(--u)); line-height:1.4 }

  .f-line{ margin-top:calc(18 * var(--u)) }
  .f-title{ margin-top:calc(8 * var(--u)); font-size:calc(50 * var(--u)); line-height:1.2 }
  .f-lead{ margin-top:calc(28 * var(--u)); font-size:calc(18 * var(--u)); line-height:1.4 }

  /* Przycisk stoi przy dolnej krawędzi panelu (margin-top:auto), a padding to minimalny
     odstęp od treści. Krok 7 wypełnia panel prawie w całości — tam odstęp z Figmy to 22,
     przy 40 panel rósłby ponad 633 i zsuwał w dół scenę hero (jest wyrównana do dołu). */
  .f-cta{ margin-top:auto; padding-top:calc(40 * var(--u)) }
  .f-cta--tight{ padding-top:calc(22 * var(--u)) }

  .f-btn{
    gap:calc(14 * var(--u));
    width:calc(280 * var(--u));
    padding:calc(16 * var(--u)) calc(32 * var(--u)) calc(19 * var(--u));
    border-radius:calc(12 * var(--u));
    font-size:calc(19.5 * var(--u)); line-height:1.2;
  }
  .f-btn--w320{ width:calc(320 * var(--u)) }
  .f-btn--w565{ width:calc(565 * var(--u)) }
  .f-btn--ghost{
    border-width:calc(2 * var(--u));
    padding:calc(16 * var(--u)) calc(24 * var(--u)) calc(15 * var(--u));
  }
  .f-arrow{ width:calc(22 * var(--u)); height:calc(18 * var(--u)) }

  .f-checks{ margin-top:calc(30 * var(--u)); gap:calc(18 * var(--u)) }
  .f-check{ gap:calc(20 * var(--u)) }
  .f-check__box{
    width:calc(38 * var(--u)); height:calc(38 * var(--u));
    border-width:calc(2 * var(--u));
    border-radius:calc(8 * var(--u));
  }
  .f-check__text,
  .f-checks__note{ font-size:calc(15 * var(--u)); line-height:calc(19 * var(--u)) }

  .f-input{
    padding:calc(14 * var(--u)) calc(16 * var(--u)) calc(15 * var(--u));
    border-width:calc(2 * var(--u));
    border-radius:calc(12 * var(--u));
    font-size:calc(18 * var(--u)); line-height:calc(25 * var(--u));
  }

  /* Krok 3. Siatka z ramki 1920: kolumny 220 | 24 | 140 | 26 | 265 (100 → 775).
     Rząd 1 to metryczka, e-mail siedzi pod switchem, a pytanie (lub kafeteria) zajmuje
     lewe trzy kolumny. Kafeterie mają metryczkę o 28 wyżej i ciaśniejsze etykiety — stąd
     drugi wariant siatki (.f-fields--cafe). Etykiety w drugim rzędzie są wyrównane dolną
     krawędzią, żeby pola stanęły w jednej linii niezależnie od liczby wierszy etykiety. */
  .f-fields{
    display:grid;
    grid-template-columns:calc(220 * var(--u)) calc(24 * var(--u)) calc(140 * var(--u)) calc(26 * var(--u)) calc(265 * var(--u));
    gap:0;
    margin-top:calc(28 * var(--u));
  }
  .f-fields--cafe{ margin-top:0 }

  .f-field--name{ grid-area:1 / 1 }
  .f-field--year{ grid-area:1 / 3 }
  .f-field--sex { grid-area:1 / 5 }
  .f-field--mail{ grid-area:2 / 5; padding-left:calc(2 * var(--u)) }   /* Figma: 512, nie 510 */
  .f-field--q   { grid-area:2 / 1 / auto / 4 }
  /* Zgoda marketingowa (D15) — własny wiersz na całą szerokość panelu. Pod polem e-mail
     (kolumna 5) się nie mieści: zostaje tam 98 px, a tekst w kolumnie 265 px łamie się
     na siedem wierszy i wchodzi na pole. Na pełnej szerokości to dwa wiersze. */
  .f-check--marketing{ grid-area:3 / 1 / auto / 6 }
  .f-cafe__q    { grid-area:2 / 1 / auto / 4; max-width:calc(384 * var(--u)) }
  .f-cafe       { grid-area:3 / 1 / auto / 6 }

  .f-field__label{ margin-bottom:calc(8.8 * var(--u)); font-size:calc(18 * var(--u)); line-height:calc(25 * var(--u)) }
  .f-fields > .f-field--q,
  .f-fields > .f-field--mail{ margin-top:calc(22 * var(--u)) }
  .f-field--q .f-field__label,
  .f-field--mail .f-field__label{
    display:grid;
    align-content:end;
    height:calc(50 * var(--u));
    margin-bottom:calc(8.6 * var(--u));
  }
  .f-field__area{ width:calc(382 * var(--u)); height:calc(156 * var(--u)) }
  .f-fields__note{ margin-top:calc(4 * var(--u)); font-size:calc(13 * var(--u)); line-height:calc(18 * var(--u)) }

  .f-switch{ border-width:calc(2 * var(--u)); border-radius:calc(12 * var(--u)) }
  /* Odstęp boczny mniejszy niż w Figmie (16): przy równych połówkach 130.5 tekst z 16
     nie mieści się i łamał wiersz. Napis jest wyśrodkowany, więc nie widać różnicy. */
  .f-switch__opt span{
    padding:calc(14 * var(--u)) calc(8 * var(--u)) calc(15 * var(--u));
    border-radius:calc(10 * var(--u));
    font-size:calc(18 * var(--u)); line-height:calc(25 * var(--u));
  }

  .f-fields--cafe .f-field__label{ margin-bottom:calc(2.8 * var(--u)) }
  .f-fields--cafe > .f-field--mail{ margin-top:calc(11 * var(--u)) }
  .f-fields--cafe .f-field--mail .f-field__label{ display:block; height:auto; margin-bottom:calc(0.8 * var(--u)) }

  /* Pytanie kafeterii: pudełko kończy się na stałej wysokości (Figma 311), tekst przy dolnej
     krawędzi — dzięki temu lista opcji zawsze startuje na 334, czy etykieta ma 1, czy 3 wiersze. */
  .f-cafe__q{
    display:grid;
    align-content:end;
    height:calc(89 * var(--u));
    margin-top:calc(11 * var(--u));
    font-size:calc(18 * var(--u)); line-height:calc(25 * var(--u));
  }

  /* Opcje kolumnami: 3 wiersze po 38, kolumny 228 | 224 | resztę (0 / 228 / 452 z Figmy). */
  .f-cafe{
    grid-template-columns:calc(228 * var(--u)) calc(224 * var(--u)) auto;
    grid-template-rows:repeat(3, calc(38 * var(--u)));
    grid-auto-flow:column;
    row-gap:calc(11.5 * var(--u));
    column-gap:0;
    margin-top:calc(23 * var(--u));
  }
  .f-cafe .f-check{ gap:calc(11 * var(--u)) }
  /* Na desktopie celem jest kursor, nie palec — wracamy do linii 1:1 z Figmy. */
  .f-other{
    width:calc(144 * var(--u)); height:calc(16 * var(--u));
    margin-block:0;
    border-bottom:calc(1 * var(--u)) solid var(--line);
    background:none;
    font-size:calc(15 * var(--u));
  }

  /* Krok 5: dwie kolumny po 322 z przerwą 32, układ 2+1. Przy jednej dostępnej karcie
     (rocznik powyżej siedemdziesiątki) `auto-fit` zwija siatkę do jednej kolumny, zamiast
     zostawiać po prawej pustą połowę panelu. */
  .f-horizons{
    display:grid;
    grid-template-columns:repeat(auto-fit, calc(322 * var(--u)));
    gap:calc(32 * var(--u));
    /* 676, nie 675: w Figmie druga karta kończy się piksel za kolumną panelu. Bez tego
       `auto-fit` nie mieści drugiego toru i wszystkie karty wpadają w jedną kolumnę. */
    width:calc(676 * var(--u));
    margin-top:calc(22 * var(--u));
  }
  .f-lead--horizon{ margin-top:calc(30 * var(--u)); line-height:1.2; letter-spacing:normal }
  .f-horizon__box{
    height:calc(116 * var(--u));
    padding:calc(12 * var(--u)) 0 0 calc(25 * var(--u));
    border-width:calc(2 * var(--u));
    border-radius:calc(12 * var(--u));
  }
  .f-horizon__years{ font-size:calc(50 * var(--u)) }
  .f-horizon__meta{ margin-top:calc(-1 * var(--u)); font-size:calc(18 * var(--u)) }

  /* Krok 5-2: w ramce desktopowej koła stoją po lewej (środek 152 od krawędzi kolumny),
     a ptaszki w drugiej kolumnie. Odstęp 27,5 między wierszami to średnia z Figmy, która
     ma tam 46 i 45 — nudge projektanta, nie reguła. */
  /* Desktop zostaje przy Figmie: zejście kół pod tytuł wydłużyłoby panel ponad ramkę 910. */
  .f-gen{ height:calc(401 * var(--u)) }
  .f-gen__rings{
    top:calc(-46 * var(--u)); left:calc(-76 * var(--u));
    width:calc(456 * var(--u)); height:calc(456 * var(--u));
    border-width:calc(3 * var(--u));
  }
  .f-gen__ring2{ width:calc(358 * var(--u)); height:calc(358 * var(--u)); border-width:calc(3 * var(--u)) }
  .f-gen__ring3{ width:calc(302 * var(--u)); height:calc(302 * var(--u)); border-width:calc(3 * var(--u)) }
  .f-gen__year{
    width:calc(272 * var(--u)); height:calc(272 * var(--u));
    font-size:calc(70 * var(--u));
  }
  /* left = pozycja ptaszka, nie tekstu: tekst dokłada 22 px wektora i 28 px przerwy. */
  .f-hints--gen{ top:calc(127 * var(--u)); left:calc(351 * var(--u)); row-gap:calc(27.5 * var(--u)) }
  .f-gen__note{
    top:calc(383 * var(--u)); left:calc(1 * var(--u));
    font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u));
  }

  /* Krok 6. Zdjęcie dochodzi w Figmie do samej dolnej krawędzi panelu, czyli wchodzi w jego
     36 px dolnego marginesu — stąd ujemny margines bloku zamiast wyjątku w paddingu panelu.
     Bez tego panel urósłby z 633 do 669 i zsunął w dół scenę hero. */
  .f-result{ margin-bottom:calc(-36 * var(--u)) }
  .f-result__back{ top:calc(48 * var(--u)); left:calc(27 * var(--u)) }
  .f-title--result{ padding-left:calc(64 * var(--u)) }
  .f-result__status{
    margin-top:calc(10 * var(--u));
    padding-left:calc(69 * var(--u));
    font-size:calc(15 * var(--u));
    letter-spacing:normal;
  }
  .f-result__cols{
    display:grid;
    grid-template-columns:calc(390 * var(--u)) calc(260 * var(--u));
    gap:calc(26 * var(--u));
    /* -1: w Figmie zdjęcie zaczyna się piksel przed kolumną panelu. */
    margin-top:calc(38 * var(--u));
    margin-left:calc(-1 * var(--u));
  }
  .f-result__photo{ height:calc(442 * var(--u)); border-radius:calc(12 * var(--u)) }
  /* 156 z Figmy mieści atrapę na pięć wierszy; prawdziwy list jest kilka razy dłuższy
     i wylewał się na przyciski. Wysokość zostaje (układ kolumny i pomiar), list przewija się
     w dymku. */
  .f-result__message{
    margin-top:0;
    height:calc(156 * var(--u));
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--ink) transparent;
    padding:calc(12 * var(--u)) calc(18 * var(--u));
    border-radius:calc(12 * var(--u));
  }
  .f-result__message p{ font-size:calc(15 * var(--u)); line-height:calc(25 * var(--u)) }
  .f-result__btns{ gap:calc(20 * var(--u)); margin-top:calc(47 * var(--u)) }
  .f-btn--w260{ width:calc(260 * var(--u)) }

  /* Krok 7: w ramce desktopowej akapit jest wciągnięty pod tytuł (-5), nie odsunięty o 28
     jak na pozostałych ekranach. Tracking -0.36 px jest tylko w ramce mobilnej. */
  .f-task__intro{ margin-top:calc(-5 * var(--u)); letter-spacing:normal }
  .f-task__q{ margin-top:calc(22 * var(--u)); letter-spacing:normal }
  .f-task__intro,
  .f-task__q{ font-size:calc(18 * var(--u)); line-height:calc(25 * var(--u)) }
  .f-task__field{
    margin-top:calc(6 * var(--u));
    width:calc(536 * var(--u));
    height:calc(218 * var(--u));
  }

  /* Krok 8. Figma stawia koło na x=96, tytuł na 108, akapit na 111, a przycisk 10 px nad
     linią pozostałych ekranów — to nudge’e projektanta (ramka mobilna ma wszystko przy
     krawędzi kolumny), więc trzymamy kolumnę i dolne wyrównanie przycisku. */
  .f-tick{ width:calc(178 * var(--u)); margin-top:calc(37 * var(--u)) }
  .f-title--final{ margin-top:calc(28 * var(--u)) }
  .f-final__lead{ margin-top:calc(10 * var(--u)); font-size:calc(18 * var(--u)); line-height:calc(22 * var(--u)) }

  /* --- Krok 2: dowód zakupu (2, 2-blad) ------------------------------------ */
  .f-drop{
    width:calc(510 * var(--u)); height:calc(170 * var(--u));
    margin-top:calc(24 * var(--u));
    padding:calc(16 * var(--u));
    border-radius:calc(10 * var(--u));
  }
  .f-drop__icon{ width:calc(70 * var(--u)); height:calc(58 * var(--u)) }
  .f-field--receipt{ width:calc(510 * var(--u)); margin-top:calc(24 * var(--u)) }
  .f-drop__name{ font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u)) }

  /* Przyciski tego ekranu są w Figmie dopasowane do napisu, z węższym odstępem
     od lewej (24 zamiast 32) — stąd dwa modyfikatory zamiast stałej szerokości. */
  /* fit-content, nie auto: poza .f-btns przycisk jest blokiem i `auto` rozciągnęłoby go
     na całą kolumnę (675 zamiast 274 z Figmy). */
  .f-btn--auto{ width:fit-content; padding-inline:calc(24 * var(--u)) }
  .f-btn--narrow{ padding-left:calc(24 * var(--u)); padding-right:calc(32 * var(--u)) }
  .f-btns{ flex-direction:row; gap:calc(20 * var(--u)) }

  .f-hints--drop{
    display:grid;
    grid-template-columns:calc(351 * var(--u)) auto;
    column-gap:0;
    row-gap:calc(20 * var(--u));
    margin-top:calc(30 * var(--u));
    padding-left:calc(8 * var(--u));
  }
  .f-hint{
    grid-template-columns:calc(22 * var(--u)) auto;
    column-gap:calc(28 * var(--u));
    font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u));
  }
  .f-hint svg{ width:calc(22 * var(--u)); height:calc(15.5 * var(--u)); margin-top:calc(1.25 * var(--u)) }

  /* Krok 4: kadr po lewej, wskazówki w drugiej kolumnie siatki (351 + reszta).
     max-content, nie auto: w Figmie najdłuższa wskazówka (310) wychodzi 36 px poza
     kolumnę panelu i zostaje w jednym wierszu. Przy `auto` siatka ścina ją do 274
     i wskazówki łamią się na dwa wiersze, co zsuwa w dół cały ekran. */
  .f-selfie{
    display:grid;
    grid-template-columns:calc(351 * var(--u)) max-content;
    margin-top:calc(17 * var(--u));
  }
  .f-hints--selfie{ row-gap:calc(27.5 * var(--u)); margin-top:calc(104 * var(--u)) }
  /* Obrys kadru wychodzi 14 px poza kolumnę — samo zdjęcie stoi wtedy na jej krawędzi. */
  .f-photo{ width:calc(330 * var(--u)); margin-left:calc(-14 * var(--u)); margin-right:auto }
  .f-photo{ --photo-inset:calc(14 * var(--u)) }
  .f-photo__icon{ width:calc(70 * var(--u)); height:calc(58 * var(--u)) }
  .f-photo__fallback,
  .f-selfie__note{ font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u)) }
  .f-photo__fallback{ margin-top:calc(16 * var(--u)) }
  .f-selfie__note{ margin-top:calc(16 * var(--u)) }

  /* „(max 5 MB)” stoi pod prawym przyciskiem, a nie w kolumnie — jak w projekcie. */
  .f-cta__note{
    margin-top:calc(5 * var(--u));
    margin-left:calc(339 * var(--u));
    font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u));
    text-align:left;
  }
  /* Krok 4 jako jedyny schodzi pod linię przycisku (nota o rozmiarze), więc dolny
     margines panelu jest tam mniejszy — panel nadal ma równo 633. */
  .f-panel:has(.f-cta__note){ padding-bottom:calc(13 * var(--u)) }

  /* Ekrany błędu: koło i tytuł obok siebie (96 | 56 | 300). */
  .f-fail{
    display:flex;
    align-items:flex-start;   /* bez tego tytuł rozciąga się do wysokości koła (129 zamiast 120) */
    gap:calc(56 * var(--u));
    margin-top:calc(37 * var(--u));
    margin-left:calc(-4 * var(--u));
  }
  .f-fail .f-tick{ margin-top:0 }
  .f-fail .f-title{ margin-top:calc(19 * var(--u)) }
  .f-tick--error{ width:calc(148 * var(--u)); font-size:calc(55 * var(--u)) }

  /* Odstępy nad akapitem i listą Figma liczy od koła, nie od tytułu — wartość wchodzi
     zmienną z widoku, tak jak szerokość pola tekstu w --w. */
  .f-lead--bold{ margin-top:calc(var(--mt, 28) * var(--u)) }
  .f-conds{
    row-gap:calc(18.5 * var(--u));
    margin-top:calc(var(--ct, 24) * var(--u));
    font-size:calc(15 * var(--u)); line-height:calc(18 * var(--u));
  }

  .f-packshot{ position:absolute; z-index:-1; margin:0; width:auto }
  .f-packshot--ocr{
    left:calc(511 * var(--u)); top:calc(324 * var(--u));
    width:calc(317 * var(--u)); height:calc(252 * var(--u));
  }
  .f-packshot--photo{
    left:calc(487 * var(--u)); top:calc(285 * var(--u));
    width:calc(388 * var(--u)); height:calc(308 * var(--u));
  }
  .f-cta--fail{ padding-top:calc(40 * var(--u)) }

  .f-alert{ margin-top:calc(20 * var(--u)); font-size:calc(15 * var(--u)); line-height:calc(19 * var(--u)) }
  .f-err{ margin-top:calc(6 * var(--u)); font-size:calc(14 * var(--u)); line-height:calc(18 * var(--u)) }

  .f-w{ max-width:calc(var(--w) * var(--u)) }

  .f-panel--start{ padding-top:calc(56 * var(--u)) }
  .f-start__lead{ margin-top:calc(62 * var(--u)); font-size:calc(22 * var(--u)); line-height:calc(26 * var(--u)) }
  .f-start__big{ margin-top:calc(63 * var(--u)); font-size:calc(87 * var(--u)) }
  .f-start__small{ margin-top:calc(-34 * var(--u)); font-size:calc(70 * var(--u)) }
  .f-panel--start .f-cta{ margin-top:0; padding-top:calc(11 * var(--u)) }

  /* Dolny pasek: 1045 | 875, wysokość 178 */
  .f-banner{ grid-template-columns:1fr var(--panel-w) }

  /* Kroki w przepływie, nie absolutnie: gdy kolumna jest ciasna (1280–1500 px), opis zawija
     się pod tytuł zamiast wypychać telefon, a pasek rośnie o tyle, ile trzeba. Odstępy
     wyliczone z pozycji w Figmie: 11 / 66 / 122 przy blokach po 43. */
  .f-banner__steps{
    height:auto;
    min-height:calc(178 * var(--u));
    padding:calc(11 * var(--u)) calc(220 * var(--u)) calc(11 * var(--u)) calc(31 * var(--u));
    background:#b1dc4e;
    white-space:normal;
  }

  .f-bullets{ display:flex; flex-direction:column; gap:calc(12 * var(--u)) }

  /* relative, nie static — badge i numer zostają absolutne względem swojego punktu. */
  .f-bullet{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:calc(8 * var(--u));
    left:auto; top:auto;
    width:auto;
    height:auto;
    min-height:calc(43 * var(--u));
    padding:calc(3 * var(--u)) 0 0 calc(49 * var(--u));
  }

  /* Kasuje mobilne top: 32/104/211 — tam bullety są absolutne, tu stoją w przepływie. */
  .f-bullet:nth-child(n){ top:auto }
  .f-bullet:nth-child(1){ padding-top:calc(5 * var(--u)) }
  .f-bullet:nth-child(3){ padding-top:calc(4 * var(--u)) }

  .f-bullet__badge{ left:0; top:0; width:calc(37 * var(--u)); height:calc(43 * var(--u)) }
  .f-bullet__no{ left:0; top:calc(7 * var(--u)); width:calc(37 * var(--u)); font-size:calc(24 * var(--u)) }

  /* Opis stoi obok tytułu z odstępem 8 (Figma: 223 = 49 + 166 + 8 — przeglądarka renderuje
     „...i już wygrywasz!” o 9 px szerzej niż projekt, więc odstęp zamiast sztywnego x).
     Gdy kolumna jest ciasna, opis przechodzi do drugiego wiersza zamiast wypychać telefon. */
  .f-bullet__title{ position:static; top:auto; font-size:calc(24 * var(--u)); white-space:nowrap }
  .f-bullet__desc{
    position:static;
    font-size:calc(17 * var(--u)); line-height:1.5;
    white-space:normal;
  }

  .f-banner__phone{
    left:auto; right:calc(24 * var(--u)); top:calc(15 * var(--u));
    width:calc(172 * var(--u)); height:calc(250 * var(--u));
    translate:none;
  }

  .f-banner__prizes{ height:auto; min-height:calc(178 * var(--u)); background:#caf663 }

  .f-prizes__title{ left:calc(32 * var(--u)); top:calc(16 * var(--u)); font-size:calc(27 * var(--u)); letter-spacing:normal }

  .f-prizes__icon{ left:calc(33 * var(--u)); width:calc(52 * var(--u)); height:calc(52 * var(--u)) }
  .f-prizes__icon--exam{ top:calc(49 * var(--u)) }
  .f-prizes__icon--passion{ top:calc(113 * var(--u)) }

  .f-prizes__sum{ height:calc(31 * var(--u)) }
  .f-prizes__sum > span{ font-size:calc(30 * var(--u)) }
  .f-prizes__times{ top:calc(6 * var(--u)) !important; font-size:calc(23 * var(--u)) !important }

  .f-prizes__sum--exam{ left:calc(102 * var(--u)); top:calc(59 * var(--u)) }
  .f-prizes__sum--exam .f-prizes__times{ left:calc(24 * var(--u)) }
  .f-prizes__sum--exam .f-prizes__value{ left:calc(44 * var(--u)) }
  .f-prizes__sum--exam .f-prizes__unit{ left:calc(130 * var(--u)) }

  .f-prizes__sum--passion{ left:calc(102 * var(--u)); top:calc(125 * var(--u)) }
  .f-prizes__sum--passion .f-prizes__times{ left:calc(45 * var(--u)) }
  .f-prizes__sum--passion .f-prizes__value{ left:calc(65 * var(--u)) }
  .f-prizes__sum--passion .f-prizes__unit{ left:calc(142 * var(--u)) }

  .f-prizes__label--exam{ left:calc(265 * var(--u)); top:calc(59 * var(--u)); font-size:calc(30 * var(--u)) }
  .f-prizes__label--clinic{ left:calc(550 * var(--u)); top:calc(64 * var(--u)); font-size:calc(24 * var(--u)) }
  .f-prizes__label--passion{ left:calc(277 * var(--u)); top:calc(133 * var(--u)); font-size:calc(21 * var(--u)) }

  .f-prizes__note{
    left:auto; right:calc(13 * var(--u)); top:calc(141 * var(--u));
    translate:none;
    text-align:right;
    font-size:calc(10 * var(--u)); line-height:1.25;
    letter-spacing:0.01em;
  }
}

/* --- Opis konkursu pod paskiem (poza Figmą, specyfikacja SEO pkt 4.2) -------
   Tylko ekran startowy. Mobile: jedna kolumna 600 px na środku, jak reszta strony.
   Desktop: wstęp na środku, trzy pytania obok siebie, na końcu hasło i przycisk. */
.f-about{ padding:40px max(16px, var(--center)) 48px; background:var(--panel) }
.f-about__title{ font-weight:700; font-size:24px; line-height:1.25; color:var(--green-step); text-wrap:balance }
.f-about__lead{ margin-top:12px; font-size:17px; line-height:1.55; text-wrap:pretty }
.f-about__cols{ display:grid; gap:28px; margin-top:32px }
.f-about__col{ padding-top:16px; border-top:2px solid var(--line) }
.f-about__h{ margin:0; font-weight:700; font-size:19px; line-height:1.3; color:var(--red-copy) }
.f-about__col p{ margin-top:10px; font-weight:400; line-height:1.6; text-wrap:pretty }
.f-about__col b{ font-weight:600 }
.f-about__end{ margin-top:36px; font-weight:700; font-size:19px; line-height:1.35; color:var(--green-step) }
.f-about__btn{ margin-top:20px }

@media (min-width: 1280px){
  .f-about{ padding:calc(72 * var(--u)) var(--pad) calc(80 * var(--u)) }
  .f-about__in{ max-width:calc(1170 * var(--u)); margin:0 auto }
  .f-about__title, .f-about__lead, .f-about__end{ max-width:calc(820 * var(--u)); margin-inline:auto; text-align:center }
  .f-about__title{ font-size:calc(36 * var(--u)) }
  .f-about__lead{ margin-top:calc(16 * var(--u)); font-size:calc(19 * var(--u)) }
  .f-about__cols{ grid-template-columns:1.5fr 1fr 1fr; gap:calc(48 * var(--u)); margin-top:calc(48 * var(--u)) }
  .f-about__col{ padding-top:calc(20 * var(--u)) }
  .f-about__h{ font-size:calc(21 * var(--u)) }
  .f-about__col p{ margin-top:calc(12 * var(--u)); font-size:calc(16 * var(--u)) }
  .f-about__end{ margin-top:calc(52 * var(--u)); font-size:calc(22 * var(--u)) }
  .f-about__btn{ width:calc(280 * var(--u)); margin:calc(24 * var(--u)) auto 0; padding:calc(16 * var(--u)) calc(32 * var(--u)) calc(19 * var(--u)); font-size:calc(16 * var(--u)) }
}

/* --- Oznaczenie „Ilustracja SI” (poza Figmą, wymóg klienta 05.10) -----------
   Prawy dolny róg każdej grafiki z postarzonym wizerunkiem: hero, zdjęcie wyniku, makieta
   telefonu. Biały z cieniem, bo tło bywa zdjęciem, czerwienią albo limonką. */
.f-hero, .f-banner__steps{ position:relative }
.f-ai{
  position:absolute;
  right:10px; bottom:8px;
  z-index:1;
  font-weight:500;
  font-size:12px; line-height:1.2;
  color:#fff;
  text-shadow:0 0 3px rgb(0 0 0 / .65);
  pointer-events:none;
}
/* Na makiecie telefonu napis wchodzi na pismo z ekranu, więc dostaje ciemne tło. */
.f-banner__steps .f-ai{ padding:2px 6px; border-radius:4px; background:rgb(0 0 0 / .5); text-shadow:none }
@media (min-width: 1280px){
  .f-ai{ right:calc(14 * var(--u)); bottom:calc(10 * var(--u)); font-size:calc(14 * var(--u)) }
}

/* --- Stopka serwisu (poza Figmą, specyfikacja SEO pkt 3.6) ------------------ */
.f-foot{
  padding:24px 16px 28px;
  background:var(--nav);
  color:var(--panel);
  font-size:14px; line-height:1.5;
  text-align:center;
}
.f-foot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px }
.f-foot a{ color:inherit; text-underline-offset:3px }
.f-foot__copy{ margin-top:12px; font-size:12px; opacity:.85 }

/* --- Strona /regulamin --------------------------------------------------------- */
.f-terms-page{ max-width:860px; margin:0 auto; padding:32px 16px 48px; font-size:16px; line-height:1.6 }
.f-terms-page h1{ margin-bottom:24px; font-weight:700; font-size:28px; line-height:1.2; color:var(--nav) }
.f-terms-page p{ margin-top:10px }


/* --- Ruch na całej ścieżce -----------------------------------------------------
   Tylko przy prefers-reduced-motion: no-preference; pomiar Figmy biegnie z „reduce”
   i widzi stan spoczynkowy. Animujemy wyłącznie opacity, translate, scale i obrys,
   więc żaden element nie zmienia miejsca w układzie. Hero, packshot i telefon w pasku
   mają już własne `translate`, dlatego tam ruch idzie przez `scale`, nie przesunięcie.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  /* Wejście treści kroku: kaskada od góry panelu. */
  .f-panel > *,
  :is(.f-checks, .f-fields, .f-horizons, .f-cafe, .f-btns) > *{
    animation:f-rise .45s cubic-bezier(.2,.7,.3,1) both;
  }
  :is(.f-panel, .f-checks, .f-fields, .f-horizons, .f-cafe, .f-btns) > :nth-child(2){ animation-delay:.07s }
  :is(.f-panel, .f-checks, .f-fields, .f-horizons, .f-cafe, .f-btns) > :nth-child(3){ animation-delay:.14s }
  :is(.f-panel, .f-checks, .f-fields, .f-horizons, .f-cafe, .f-btns) > :nth-child(4){ animation-delay:.21s }
  :is(.f-panel, .f-checks, .f-fields, .f-horizons, .f-cafe, .f-btns) > :nth-child(5){ animation-delay:.28s }
  :is(.f-panel, .f-checks, .f-fields, .f-horizons, .f-cafe, .f-btns) > :nth-child(6){ animation-delay:.35s }
  :is(.f-panel, .f-checks, .f-fields, .f-horizons, .f-cafe, .f-btns) > :nth-child(n+7){ animation-delay:.42s }

  /* Hero ożywa tylko na starcie: na kolejnych krokach byłoby to samo przedstawienie
     dziewięć razy (na desktopie hero stoi obok panelu i widać je cały czas). */
  .f-main:has(.f-panel--start) .f-hero__img{ animation:f-settle 1.4s cubic-bezier(.2,.7,.3,1) both }
  .f-main:has(.f-panel--start) .f-hero__stage :is(.f-hero__eyebrow,.f-hero__ty,.f-hero__sub){ animation:f-pop .6s cubic-bezier(.2,.8,.3,1.2) both }
  .f-main:has(.f-panel--start) .f-hero__eyebrow{ animation-delay:.2s }
  .f-main:has(.f-panel--start) .f-hero__ty{ animation-delay:.35s }
  .f-main:has(.f-panel--start) .f-hero__sub{ animation-delay:.5s }
  .f-main:has(.f-panel--start) .f-hero__pack{ animation:f-pop .7s cubic-bezier(.2,.8,.3,1.2) .65s both }

  /* Przyciski: dotknięcie wciska, strzałka rusza w stronę następnego kroku. */
  .f-btn{ transition:scale .15s ease-out, filter .2s }
  .f-btn:active:not(:disabled){ scale:.97 }
  .f-btn .f-arrow{ transition:translate .2s ease-out }
  @media (hover: hover){
    .f-btn:hover:not(:disabled){ filter:brightness(1.08) }
    .f-btn:hover:not(:disabled) .f-arrow{ translate:4px 0 }
  }

  /* Zaznaczenie: pole wypełnia się kolorem, ptaszek się dorysowuje. */
  .f-check__box,
  .f-horizon__box,
  .f-input{ transition:background-color .2s, border-color .2s, color .2s }
  .f-check > input:checked + .f-check__box path{ stroke-dasharray:100; animation:f-draw .3s ease-out both }
  .f-horizon:active .f-horizon__box{ scale:.98 }
  .f-horizon__box{ transition:background-color .2s, border-color .2s, color .2s, scale .15s }

  /* Wynik: zdjęcie wyłania się z tła, pigułka „+N lat” wskakuje, potem list i przyciski. */
  .f-result__photo img{ animation:f-reveal 1s cubic-bezier(.2,.7,.3,1) .2s both }
  .f-result__age{ animation:f-pop .5s cubic-bezier(.2,.8,.3,1.4) .8s both }
  .f-result__message{ animation:f-rise .5s cubic-bezier(.2,.7,.3,1) .5s both }
  .f-result__btns{ animation:f-rise .5s cubic-bezier(.2,.7,.3,1) .65s both }

  /* Finał: koło wskakuje, ptaszek się dorysowuje. */
  .f-tick svg{ animation:f-pop .55s cubic-bezier(.2,.8,.3,1.4) .1s both }
  .f-tick path{ stroke-dasharray:100; animation:f-draw .5s ease-out .5s both }

  /* Pasek kroków i nagród pokazuje się przy przewijaniu. Tam, gdzie przeglądarka nie zna
     animacji sterowanej przewijaniem, zostaje po prostu widoczny. */
  @supports (animation-timeline: view()){
    :is(.f-bullet, .f-banner__phone, .f-prizes__title, .f-prizes__icon, .f-prizes__sum){
      animation:f-fade-scale linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 70%;
    }
  }
}
@keyframes f-rise{ from{ opacity:0; translate:0 14px } }
@keyframes f-pop{ from{ opacity:0; scale:.85 } }
@keyframes f-settle{ from{ scale:1.08 } }
@keyframes f-reveal{ from{ opacity:0; scale:1.08 } }
@keyframes f-fade-scale{ from{ opacity:0; scale:.92 } }
@keyframes f-draw{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }