/* Formularz kontaktu na /zdjecia/ bez tokenu (08.10.2026) — na bazie app.css strony zdjęć. */
.formularz { display: flex; flex-direction: column; gap: 14px; }
.pole-w { display: flex; flex-direction: column; gap: 6px; }
.pole-w > label, .pytanie { font-size: 14px; font-weight: 700; }
.opcjonalne { font-weight: 500; color: #4B5B6E; }
.blad-pola { margin: 0; font-size: 13px; font-weight: 700; color: #B91C1C; }
.tel { display: flex; gap: 8px; }
.kraj-tel { position: relative; flex: 0 0 auto; }
.kraj-widok { display: flex; align-items: center; height: 100%; min-height: 50px; padding: 0 12px; border-radius: 14px; border: 1.5px solid #D5DCE4; background: #fff; font-size: 16px; font-weight: 600; white-space: nowrap; }
.kraj-tel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.kraj-tel select:focus + .kraj-widok, .kraj-tel:focus-within .kraj-widok { outline: 2px solid #9FE3EE; border-color: #0891B2; }
.tel .pole { flex: 1; min-width: 0; }
.literowka { align-self: flex-start; border: 0; background: #FFF7E6; color: #7A4B00; border-radius: 10px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid #D5DCE4; background: #fff; border-radius: 999px; padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer; color: #1C4262; }
.chip[aria-pressed="true"] { background: #E6F8FB; border-color: #0891B2; color: #0E7490; }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.korzysci { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: #4B5B6E; }
.korzysci li { display: flex; gap: 8px; align-items: flex-start; }
.korzysci b { color: #15803D; }
.bez-spamu { margin: 0; text-align: center; font-size: 12px; color: #4B5B6E; }
.kolko-ladowania { width: 34px; height: 34px; border-radius: 999px; border: 3px solid #E6F8FB; border-top-color: #0891B2; animation: obrot 0.9s linear infinite; }
@keyframes obrot { to { transform: rotate(360deg); } }

/* Formularz konsultacji per zabieg (10.10.2026). Telefon i wąskie okno: jedna kolumna jak dotąd (sekcje „przezroczyste”).
   Komputer (≥ 1024 px, ten sam próg co strona zdjęć): wstęp z przykładami kadrów po lewej, formularz w karcie po prawej,
   przycisk pod kartą (bez przyklejonej stopki, która na dużym ekranie zasłaniała zgodę). */
.k-intro, .k-pola { display: contents; }
.tylko-komputer { display: none !important; }
@media (min-width: 1024px) {
  .tylko-komputer { display: flex !important; }
  .ekran.k-ekran { max-width: none; border: 0; display: grid; grid-template-columns: minmax(24px, 1fr) minmax(0, 560px) 440px minmax(24px, 1fr);
    grid-template-rows: auto auto 1fr; column-gap: 56px; align-content: start; }
  .k-ekran > .naglowek { grid-column: 1 / -1; }
  .k-ekran > .naglowek .naglowek-rzad { max-width: 1056px; width: 100%; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
  .k-ekran main.k-uklad { display: contents; }
  .k-ekran .k-intro { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; gap: 20px; padding: 56px 0 40px; }
  .k-ekran .k-intro h1 { font-size: 32px; }
  .k-ekran .k-pola { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; gap: 16px; margin-top: 48px; padding: 24px;
    background: #fff; border: 1px solid #E6EAEF; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .k-ekran .stopka { grid-column: 3; grid-row: 3; align-self: start; position: static; border: 1px solid #E6EAEF; border-top: 0;
    border-radius: 0 0 20px 20px; padding: 4px 24px 22px; margin-bottom: 40px; }
  .k-przyklady { flex-direction: column; gap: 10px; margin-top: 4px; }
  .k-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .k-siatka figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
  .k-siatka img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #fff; border: 1px solid #E6EAEF; }
  .k-siatka figcaption { font-size: 12.5px; font-weight: 600; color: #1C4262; }
}

/* ══ Wersja b — krokowa (11.10.2026) ══════════════════════════════════════════════════════════════════
   Telefon: jedna kolumna; panel „Co dostaniesz” tylko na ekranie startowym, na krokach skrót nad pytaniem.
   Komputer (≥ 1024 px): panel stały po lewej, karta z pytaniem po prawej (siatka .k-ekran wersji a). */
.b-uklad { gap: 18px; }
.b-demo { margin: 6px 0 -6px; padding: 5px 20px; background: #FEF3C7; color: #7A4B00; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-align: center; }
.b-panel { display: none; flex-direction: column; gap: 16px; }
.b-na-starcie .b-panel { display: flex; }
.b-tytul { display: flex; flex-direction: column; gap: 8px; }
.b-h1 { font-size: 25px; line-height: 1.22; }
.b-zyski { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4; }
.b-zyski li { display: flex; gap: 10px; align-items: flex-start; }
.b-zyski svg { flex-shrink: 0; margin-top: 1px; }
.b-zaufanie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; background: #fff; border: 1px solid #E6EAEF; border-radius: 14px; }
.b-metamorfozy { display: none; font-size: 14px; color: #4B5B6E; } .b-metamorfozy b { color: #1C4262; font-size: 16px; }
.b-zaufanie:not(:has(.mt-ocena)) { display: none; }
/* Telefon: „10 000+ metamorfoz” w prawym górnym rogu nagłówka (na komputerze w panelu po lewej). */
.b-znaczek { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: #E6F8FB; color: #0E7490; font-size: 12px; font-weight: 600; white-space: nowrap; }
.b-znaczek b { font-weight: 800; }
.b-poco { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #fff; border: 1px solid #E6EAEF; border-left: 4px solid #0891B2; border-radius: 14px; font-size: 14px; line-height: 1.5; color: #4B5B6E; }
.b-poco > b { color: #1C4262; font-size: 15px; } .b-poco p { margin: 0; } .b-poco p b { color: #1C4262; }
.b-rtg { margin: 0; padding: 10px 12px; border-radius: 12px; background: #F0FAFC; font-size: 13.5px; line-height: 1.5; color: #1C4262; }
.b-karta { display: flex; flex-direction: column; gap: 14px; }
.b-form { display: flex; flex-direction: column; gap: 14px; }
.b-skrot { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; font-weight: 600; color: #4B5B6E; }
.b-skrot span { display: inline-flex; align-items: center; gap: 4px; } .b-skrot svg { width: 15px; height: 15px; }
.b-postep { display: flex; flex-direction: column; gap: 8px; }
.b-postep-rzad { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.b-wstecz { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 6px 8px 6px 0; color: #0E7490; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.b-krok-nr { font-size: 13px; font-weight: 700; color: #4B5B6E; }
.b-pasek { height: 6px; border-radius: 999px; background: #E6EAEF; overflow: hidden; }
.b-pasek span { display: block; height: 100%; border-radius: 999px; background: #0891B2; transition: width .3s ease; }
.b-pytanie { font-size: 23px; line-height: 1.25; outline: none; }
.b-pytanie label { cursor: default; }
.b-dlaczego { margin: -4px 0 0; font-size: 14px; line-height: 1.5; color: #4B5B6E; }
.b-akcje { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.b-jak { display: flex; flex-direction: column; gap: 10px; }
.b-kroki-lista, .b-kadry { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.b-kroki-lista li, .b-kadry li { display: flex; gap: 12px; align-items: center; }
.b-kroki-lista b, .b-kadry b { flex: 0 0 30px; height: 30px; border-radius: 999px; background: #E6F8FB; color: #0E7490; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.b-kroki-lista span { display: flex; flex-direction: column; font-size: 13.5px; color: #4B5B6E; } .b-kroki-lista strong { font-size: 15px; color: #1C4262; }
.b-kadry { padding: 12px 14px; background: #fff; border: 1px solid #E6EAEF; border-radius: 14px; gap: 8px; font-size: 14.5px; font-weight: 600; }
.b-kadry b { flex-basis: 26px; height: 26px; font-size: 13px; }
.b-kadr-opc { color: #4B5B6E; font-weight: 500; }
.b-dzieki { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #15803D; }
.b-bezp { margin: 0; font-size: 13px; color: #4B5B6E; }
.b-opcje-pc { display: none; }
/* Ekran startowy na telefonie: przycisk w przyklejonej stopce (widoczny bez przewijania); na komputerze — w karcie. */
.b-akcje-start { display: none; }
.b-stopka-start .bez-spamu { display: none; }
/* Podgląd strony zdjęć na stronach testowych. */
.b-demo-kadr { width: 100%; max-height: 300px; object-fit: contain; border-radius: 14px; background: #fff; border: 1px solid #E6EAEF; }
.b-demo-opcje { display: grid; gap: 12px; } .b-demo-opcje > div { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #fff; border: 1px solid #E6EAEF; border-radius: 14px; font-size: 14px; color: #4B5B6E; }
.b-demo-opcje b { color: #1C4262; font-size: 16px; }
.b-demo-qr { width: 120px; height: 120px; border-radius: 8px; background: repeating-conic-gradient(#1C4262 0 25%, #fff 0 50%) 0 0 / 20px 20px; opacity: .85; }

@media (min-width: 1024px) {
  .ekran.b-ekran { grid-template-columns: minmax(24px, 1fr) minmax(0, 540px) 460px minmax(24px, 1fr); }
  .b-ekran main.b-uklad { display: contents; }
  .b-ekran .b-panel { display: flex; grid-column: 2; grid-row: 2 / span 2; padding: 56px 0 40px; gap: 22px; }
  .b-ekran .b-h1 { font-size: 32px; }
  .b-ekran .b-zyski { font-size: 16.5px; gap: 14px; }
  .b-ekran .b-karta { grid-column: 3; grid-row: 2; align-self: start; margin: 48px 0 40px; padding: 24px; background: #fff; border: 1px solid #E6EAEF; border-radius: 20px; }
  .b-ekran .b-skrot, .b-ekran .b-znaczek { display: none; }
  .b-ekran .b-metamorfozy { display: inline; } .b-ekran .b-zaufanie { display: flex; }
  .b-ekran .b-akcje-start { display: flex; }
  .b-ekran .b-stopka-start { display: none; }
  .b-ekran .b-opcje-pc { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #F7FAFC; border-radius: 14px; font-size: 14px; color: #4B5B6E; }
  .b-ekran .b-opcje-pc ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .b-opcje-pc li b { color: #1C4262; }
}

/* 11.10.2026 (Michał): wersja b na komputerze — wyśrodkowana i większa. Pasek trybu testowego na całą szerokość
   (wcześniej wpadał do pierwszej kolumny siatki i przesuwał treść w lewo). */
@media (min-width: 1024px) {
  .ekran.b-ekran { grid-template-columns: minmax(24px, 1fr) minmax(0, 620px) minmax(0, 500px) minmax(24px, 1fr);
    grid-template-rows: auto auto auto 1fr; column-gap: 72px; }
  .b-ekran > .naglowek .naglowek-rzad { max-width: 1240px; }
  .b-ekran .b-demo { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .b-ekran .b-panel { grid-row: 3 / span 2; padding: 64px 0 48px; gap: 26px; }
  .b-ekran .b-karta { grid-row: 3; margin: 64px 0 48px; padding: 32px; gap: 18px; border-radius: 24px; box-shadow: 0 12px 32px rgba(28, 66, 98, .07); }
  .b-ekran .b-h1 { font-size: 46px; line-height: 1.1; }
  .b-ekran .b-zyski { font-size: 19px; gap: 16px; }
  .b-ekran .b-poco { font-size: 16.5px; padding: 18px 20px; } .b-ekran .b-poco > b { font-size: 18px; }
  .b-ekran .b-rtg { font-size: 15.5px; }
  .b-ekran .b-zaufanie { padding: 14px 18px; font-size: 15px; }
  .b-ekran .b-pytanie { font-size: 30px; }
  .b-ekran .b-dlaczego { font-size: 16px; }
  .b-ekran .b-kroki-lista strong { font-size: 17px; } .b-ekran .b-kroki-lista span { font-size: 15px; }
  .b-ekran input:not([type="checkbox"]), .b-ekran .kraj-widok { font-size: 18px; min-height: 56px; } /* checkbox zgody bez 56 px — inaczej puste miejsce pod tekstem zgody (12.10) */
  .b-ekran .btn, .b-ekran button.btn-glowny { font-size: 18px; min-height: 58px; }
}
@media (min-width: 1440px) {
  .ekran.b-ekran { grid-template-columns: minmax(24px, 1fr) minmax(0, 680px) minmax(0, 540px) minmax(24px, 1fr); column-gap: 88px; }
  .b-ekran .b-h1 { font-size: 52px; }
}

/* 11.10.2026 (Michał, iPhone/Safari): ekran startowy wersji b krótszy i czytelniejszy na telefonie.
   Nagłówek nie przyklejony (w Safari pod paskiem adresu nachodził na treść), szczegóły „po co zdjęcia” i RTG zwinięte,
   „Jak to działa” bez drugich linijek. */
.tylko-telefon { display: block; }
.b-poco-wiecej { flex-direction: column; gap: 6px; }
.b-poco-det { margin-top: 2px; }
.b-poco-det summary { cursor: pointer; font-weight: 700; color: #0E7490; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.b-poco-det summary::-webkit-details-marker { display: none; }
.b-poco-det summary::after { content: '▾'; font-size: 12px; transition: transform .2s; }
.b-poco-det[open] summary::after { transform: rotate(180deg); }
.b-poco-det p { margin: 6px 0 0; }
@media (max-width: 1023px) {
  .b-ekran > .naglowek, .b-ekran .b-demo { position: static; }
  .b-ekran .b-h1 { font-size: 24px; }
  .b-ekran .b-zyski { gap: 8px; font-size: 15px; }
  .b-ekran .b-kroki-lista span { font-size: 0; } .b-ekran .b-kroki-lista strong { font-size: 15px; }
  .b-ekran .b-kroki-lista { gap: 8px; }
  .b-ekran .b-panel { padding-bottom: 4px; }
}
@media (min-width: 1024px) { .tylko-telefon { display: none !important; } }
/* Znaczek Google w rogu nagłówka (telefon). Na telefonie bez osobnej karty z oceną niżej (byłaby powtórzona). */
.b-znaczek-google { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #E6EAEF; color: #1C4262; padding: 5px 10px; }
.b-znaczek-google img { height: 16px; width: auto; }
.b-znaczek-google .gw { color: #F5B82E; font-size: 14px; }
.b-znaczek-op { color: #4B5B6E; font-weight: 600; }
@media (max-width: 1023px) { .b-ekran .b-zaufanie { display: none !important; } }
/* Skrót korzyści nad pytaniem (telefon): zawsze jedna równa linia, bez łamania na dwa wiersze. */
@media (max-width: 1023px) {
  .b-ekran .b-skrot { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 4px; white-space: nowrap; font-size: 11.5px; letter-spacing: -.1px; }
  .b-ekran .b-skrot span { gap: 3px; } .b-ekran .b-skrot svg { width: 13px; height: 13px; }
}
@media (max-width: 360px) { .b-ekran .b-skrot { flex-wrap: wrap; justify-content: flex-start; gap: 4px 12px; } }

/* 11.10.2026 (Michał): ekran startowy wersji b na komputerze — jedna wyśrodkowana kolumna, duży przycisk „Rozpocznij”
   zaraz pod korzyściami; „Jak to działa” w poziomie, „Po co zdjęcia?” i ocena niżej. Kroki 1–3 bez zmian (dwie kolumny). */
@media (min-width: 1024px) {
  .ekran.b-ekran.b-na-starcie { grid-template-columns: minmax(24px, 1fr) minmax(0, 920px) minmax(24px, 1fr); grid-template-rows: none; grid-auto-rows: auto; column-gap: 0; }
  .b-na-starcie .b-panel, .b-na-starcie .b-karta, .b-na-starcie .b-form, .b-na-starcie .b-karta > form { display: contents; }
  .b-na-starcie > .naglowek, .b-na-starcie .b-demo { grid-column: 1 / -1; }
  .b-na-starcie .b-tytul, .b-na-starcie .b-zyski, .b-na-starcie .b-akcje-start, .b-na-starcie .b-jak, .b-na-starcie .b-poco, .b-na-starcie .b-zaufanie { grid-column: 2; grid-row: auto; }
  .b-na-starcie .b-tytul { order: 1; text-align: center; align-items: center; padding-top: 56px; }
  .b-na-starcie .b-h1 { font-size: 54px; max-width: 880px; text-wrap: balance; }
  .b-na-starcie .b-zyski { order: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 22px; font-size: 18px; }
  .b-na-starcie .b-akcje-start { order: 3; align-items: center; margin: 34px 0 8px; }
  .b-na-starcie .b-akcje-start .btn { width: 460px; max-width: 100%; min-height: 72px; font-size: 22px; border-radius: 18px; box-shadow: 0 14px 30px rgba(8, 145, 178, .28); }
  .b-na-starcie .b-akcje-start .bez-spamu { font-size: 14px; }
  .b-na-starcie .b-jak { order: 5; margin-top: 40px; align-items: center; }
  .b-na-starcie .b-kroki-lista { flex-direction: row; gap: 18px; width: 100%; }
  .b-na-starcie .b-kroki-lista li { flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; background: #fff; border: 1px solid #E6EAEF; border-radius: 16px; }
  .b-na-starcie .b-kroki-lista span { font-size: 15px; } .b-na-starcie .b-kroki-lista strong { font-size: 17px; }
  .b-na-starcie .b-poco { order: 6; margin-top: 24px; }
  .b-na-starcie .b-zaufanie { order: 7; margin: 16px 0 56px; justify-content: center; }
}
@media (min-width: 1024px) { .b-na-starcie .b-kroki-lista b { flex: 0 0 auto; width: 32px; height: 32px; } }
/* Logo w nagłówku na komputerze (11.10.2026): większe; na ekranie startowym (jedna kolumna) wyśrodkowane, na krokach
   wyrównane do lewej krawędzi treści (szerokość jak siatka: 620 + 72 + 500 px). */
@media (min-width: 1024px) {
  .b-ekran > .naglowek { padding: 14px 0 12px; }
  .b-ekran > .naglowek .naglowek-rzad { max-width: 1192px; padding: 0; }
  .b-ekran > .naglowek .logo { height: 42px; width: auto; }
  .b-na-starcie > .naglowek .naglowek-rzad { justify-content: center; }
}
@media (min-width: 1440px) { .b-ekran > .naglowek .naglowek-rzad { max-width: 1308px; } }
/* 11.10.2026 (Michał): po „Zacznij” tylko pytania — bez panelu z nagłówkiem i opisami; jedna wyśrodkowana karta
   (komputer) i bez skrótu korzyści (telefon), żeby pacjent był „w środku” procesu. */
@media (min-width: 1024px) {
  .ekran.b-ekran:not(.b-na-starcie) { grid-template-columns: minmax(24px, 1fr) minmax(0, 600px) minmax(24px, 1fr); column-gap: 0; }
  .b-ekran:not(.b-na-starcie) .b-panel { display: none; }
  .b-ekran:not(.b-na-starcie) .b-karta { grid-column: 2; grid-row: 3; margin: 72px 0 48px; padding: 40px; }
  .b-ekran:not(.b-na-starcie) > .naglowek .naglowek-rzad { justify-content: center; }
}
.b-ekran:not(.b-na-starcie) .b-skrot { display: none; }

/* 12.10.2026 (Michał): telefon w 3D z przewijanym przykładowym planem (zęby, ekran startowy) — wzór: skaner uśmiechu v2.
   Obraz to 15 stron A4 jedna pod drugą (każda = 100%/15 wysokości), więc kroki animacji liczone są w stronach:
   okładka → schemat zębów (zbliżenie) → koszty → oszczędność → pakiet Premium + lot → koniec → powrót.
   Telefon: pod korzyściami. Komputer: zaraz pod przyciskiem „Zacznij” (przycisk zostaje nad zgięciem ekranu). */
.b-plan { --plan-w: 150px; --plan-h: 270px; margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; }
.b-plan-telefon { flex-shrink: 0; width: var(--plan-w); padding: 6px; border-radius: 22px; background: #1c1c1e;
  transform: perspective(1200px) rotateY(-12deg) rotateX(3deg); animation: planUnos 4.5s ease-in-out infinite; backface-visibility: hidden;
  box-shadow: 14px 18px 36px -10px rgba(0, 0, 0, .22), 4px 10px 20px rgba(0, 0, 0, .08); }
.b-plan-ekran { position: relative; height: var(--plan-h); overflow: hidden; border-radius: 16px; background: #fff; }
.b-plan-dok { position: absolute; inset: 0 0 auto 0; transform-origin: 50% 10%; animation: planPrzewijanie 20s linear infinite; }
.b-plan-dok img { display: block; width: 100%; height: auto; }
.b-plan-dymek { position: relative; flex: 0 1 158px; display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; background: #fff; border-radius: 16px; text-align: left;
  box-shadow: 0 14px 32px rgba(1, 181, 210, .22), 0 2px 8px rgba(23, 61, 91, .06), inset 0 0 0 1.5px #01B5D2; transform: rotate(-2deg); }
.b-plan-dymek::after { content: ''; position: absolute; right: -8px; top: calc(50% - 7px); width: 14px; height: 14px; background: #fff;
  border-top: 1.5px solid #01B5D2; border-right: 1.5px solid #01B5D2; transform: rotate(45deg); }
.b-plan-etykieta { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #0891B2; }
.b-plan-tekst { font-size: 13.5px; font-weight: 800; line-height: 1.3; color: #1C4262; }
.b-plan-pod { font-size: 11.5px; line-height: 1.4; color: #4B5B6E; }
.b-plan-podpis { flex-basis: 100%; text-align: center; font-size: 12px; color: #6B7C8E; }
@keyframes planUnos { 0%, 100% { transform: perspective(1200px) rotateY(-12deg) rotateX(3deg) translateY(0); } 50% { transform: perspective(1200px) rotateY(-12deg) rotateX(3deg) translateY(-5px); } }
@keyframes planPrzewijanie {
  0%   { transform: translateY(0) scale(1); animation-timing-function: linear; }
  4%   { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  14%  { transform: translateY(-6.667%) scale(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  20%  { transform: translateY(-6.667%) scale(1.15); animation-timing-function: linear; }
  30%  { transform: translateY(-6.667%) scale(1.15); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  38%  { transform: translateY(-20%) scale(1); animation-timing-function: linear; }
  46%  { transform: translateY(-20%) scale(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  54%  { transform: translateY(-40%) scale(1); animation-timing-function: linear; }
  60%  { transform: translateY(-40%) scale(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  68%  { transform: translateY(-53.333%) scale(1); animation-timing-function: linear; }
  76%  { transform: translateY(-53.333%) scale(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  86%  { transform: translateY(calc(-100% + var(--plan-h))) scale(1); animation-timing-function: linear; }
  92%  { transform: translateY(calc(-100% + var(--plan-h))) scale(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { transform: translateY(0) scale(1); }
}
@media (max-width: 340px) { .b-plan-dymek { flex-basis: 100%; transform: none; } .b-plan-dymek::after { display: none; } }
@media (min-width: 1024px) {
  .b-na-starcie .b-plan { --plan-w: 240px; --plan-h: 440px; grid-column: 2; order: 4; margin: 36px 0 0; gap: 18px 28px; }
  .b-na-starcie .b-plan-dymek { flex-basis: 220px; padding: 18px 20px; gap: 6px; }
  .b-na-starcie .b-plan-tekst { font-size: 17px; } .b-na-starcie .b-plan-pod { font-size: 13.5px; } .b-na-starcie .b-plan-etykieta { font-size: 11px; }
  .b-na-starcie .b-plan-telefon { padding: 9px; border-radius: 32px; } .b-na-starcie .b-plan-ekran { border-radius: 24px; }
  .b-na-starcie .b-plan-podpis { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .b-plan-telefon, .b-plan-dok { animation: none; } }
/* 12.10.2026 (Michał): start zębów na komputerze w dwóch kolumnach — tytuł, korzyści i „Zacznij” po lewej, telefon
   z planem po prawej (jak skaner uśmiechu v2). „Jak to działa”, „Po co zdjęcia?” i ocena pod spodem na całą szerokość. */
@media (min-width: 1024px) {
  .ekran.b-ekran.b-na-starcie:has(.b-plan) { grid-template-columns: minmax(24px, 1fr) minmax(0, 620px) minmax(0, 520px) minmax(24px, 1fr); }
  .b-na-starcie:has(.b-plan) > .naglowek { grid-row: 1; }
  .b-na-starcie:has(.b-plan) .b-tytul { grid-column: 2; grid-row: 2; text-align: left; align-items: flex-start; padding-top: 64px; }
  .b-na-starcie:has(.b-plan) .b-h1 { font-size: 48px; max-width: 600px; }
  .b-na-starcie:has(.b-plan) .b-zyski { grid-column: 2; grid-row: 3; flex-direction: column; justify-content: flex-start; gap: 12px; margin-top: 24px; }
  .b-na-starcie:has(.b-plan) .b-akcje-start { grid-column: 2; grid-row: 4; align-items: stretch; align-self: start; margin: 32px 0 0; max-width: 560px; }
  /* 12.10.2026 (Michał): na komputerze przycisk na szerokość kolumny (jak punkty nad nim), podpis wyśrodkowany pod przyciskiem. */
  .b-na-starcie:has(.b-plan) .b-akcje-start .btn { width: 100%; }
  .b-na-starcie:has(.b-plan) .b-akcje-start .bez-spamu { text-align: center; }
  .b-na-starcie:has(.b-plan) .b-plan { grid-column: 3; grid-row: 2 / 5; align-self: center; margin: 48px 0 0; flex-wrap: nowrap; }
  .b-na-starcie:has(.b-plan) .b-plan-podpis { display: none; }
  .b-na-starcie:has(.b-plan) .b-jak { grid-column: 2 / 4; grid-row: 5; margin-top: 56px; }
  .b-na-starcie:has(.b-plan) .b-poco { grid-column: 2 / 4; grid-row: 6; }
  .b-na-starcie:has(.b-plan) .b-zaufanie { grid-column: 2 / 4; grid-row: 7; }
  /* 12.10.2026 wieczór (Michał): bez dopisku „Plan na zdjęciu obok jest przykładowy…” pod przyciskiem Zacznij. */
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .b-na-starcie:has(.b-plan) .b-plan { --plan-w: 200px; --plan-h: 370px; }
  .b-na-starcie:has(.b-plan) .b-plan-dymek { flex-basis: 170px; }
  .b-na-starcie:has(.b-plan) .b-h1 { font-size: 40px; }
}

.b-prawne { margin: 4px 0 0; font-size: 11.5px; line-height: 1.6; color: #8A97A6; text-align: center; }
.b-prawne a { color: inherit; text-decoration: underline; }
@media (min-width: 1024px) {
  .b-na-starcie .b-prawne { grid-column: 2; order: 8; margin: -40px 0 32px; }
  .b-na-starcie:has(.b-plan) .b-prawne { grid-column: 2 / 4; grid-row: 8; }
  /* 12.10.2026 (Michał): ocena Google i „10 000 metamorfoz” nad tytułem jako nadtytuł (zamiast paska na dole). */
  /* 12.10.2026 wieczór (Michał): pasek w jednej linii — na szerokość obu kolumn, telefon z planem od wiersza tytułu. */
  .b-na-starcie:has(.b-plan) .b-zaufanie { grid-column: 2 / 4; grid-row: 2; flex-wrap: nowrap; white-space: nowrap; gap: 18px; justify-content: center; align-self: end; margin: 28px 0 0; padding: 0 0 22px; background: none; border: 0; border-bottom: 1px solid #E6EAEF; border-radius: 0; }
  .b-na-starcie:has(.b-plan) .b-tytul { grid-row: 3; padding-top: 40px; }
  .b-na-starcie:has(.b-plan) .b-zyski { grid-row: 4; }
  .b-na-starcie:has(.b-plan) .b-akcje-start { grid-row: 5; }
  .b-na-starcie:has(.b-plan) .b-plan { grid-row: 3 / 6; }
  /* 12.10.2026 noc (Michał): telefon większy, dymek nachodzi na telefon, całość wyśrodkowana w pionie względem tekstu. */
  .b-na-starcie:has(.b-plan) .b-plan { --plan-w: 270px; --plan-h: 500px; gap: 0; margin: 40px 0 0; align-self: center; }
  .b-na-starcie:has(.b-plan) .b-plan-dymek { position: relative; z-index: 2; margin-right: -56px; }
  .b-na-starcie:has(.b-plan) .b-plan-dymek::after { display: none; }
  .b-na-starcie:has(.b-plan) .b-jak { grid-row: 6; }
  .b-na-starcie:has(.b-plan) .b-poco { grid-row: 7; margin-bottom: 40px; }
  .b-na-starcie:has(.b-plan) .b-prawne { margin: 0 0 32px; }
}

/* 12.10.2026 (Michał): pod „Zacznij” trzy znaczki z ikonkami zamiast „Bezpłatnie i bez zobowiązań”. */
.b-gwarancje { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; padding: 0; list-style: none; }
.b-gwarancje li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #1C4262; }
.b-gw-ikona { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #E3F7FA; color: #0891B2; flex-shrink: 0; }
.b-gw-ikona svg { width: 15px; height: 15px; }
@media (min-width: 1024px) { .b-na-starcie .b-gwarancje { margin-top: 14px; } .b-na-starcie .b-gwarancje li { font-size: 14.5px; } }

@media (min-width: 1024px) and (max-width: 1199px) {
  .b-na-starcie:has(.b-plan) .b-plan { --plan-w: 220px; --plan-h: 405px; }
  .b-na-starcie:has(.b-plan) .b-plan-dymek { margin-right: -44px; }
}
/* 12.10.2026 noc (Michał): logo Google w pasku bez białego prostokąta (PNG ma białe tło) + równa oś w pionie. */
.b-zaufanie .mt-ocena img { mix-blend-mode: multiply; display: block; }
.b-zaufanie .mt-ocena, .b-zaufanie .b-metamorfozy { line-height: 1; }
.b-zaufanie .b-metamorfozy { display: inline-flex; align-items: center; gap: 5px; }

/* telefon: znaczki w stopce pod przyciskiem „Zacznij” — mniejsze, w jednej linii */
.b-stopka-start .b-gwarancje { flex-wrap: nowrap; justify-content: space-between; gap: 6px; margin: 8px 2px 0; white-space: nowrap; }
.b-stopka-start .b-gwarancje li { font-size: 11.5px; gap: 4px; letter-spacing: -.1px; }
.b-stopka-start .b-gw-ikona { width: 20px; height: 20px; } .b-stopka-start .b-gw-ikona svg { width: 12px; height: 12px; }
@media (max-width: 370px) { .b-stopka-start .b-gwarancje li { font-size: 10.5px; gap: 3px; } .b-stopka-start .b-gw-ikona { width: 17px; height: 17px; } .b-stopka-start .b-gw-ikona svg { width: 10px; height: 10px; } }

/* 12.10.2026 noc (Michał): pod „Dalej: dodaj zdjęcia” dwa znaczki zamiast „Zrezygnujesz w każdej chwili”. */
.b-gwarancje-tel { margin-top: 10px; gap: 8px 18px; }
@media (max-width: 400px) { .b-gwarancje-tel li { font-size: 12px; gap: 5px; } .b-gwarancje-tel .b-gw-ikona { width: 22px; height: 22px; } .b-gwarancje-tel .b-gw-ikona svg { width: 12px; height: 12px; } }
.b-poco-tel { margin: 0; } .b-poco-tel summary { display: flex; justify-content: space-between; width: 100%; color: #1C4262; font-size: 15px; padding: 2px 0; }
.b-ekran .b-poco-tel summary { font-size: 17px; }

/* 12.10.2026 noc (Michał): „Jak to działa” na komputerze jako oś procesu — kółka z numerami połączone linią, bez ramek. */
@media (min-width: 1024px) {
  .b-na-starcie .b-kroki-lista { gap: 0; }
  .b-na-starcie .b-kroki-lista li { position: relative; align-items: center; text-align: center; gap: 14px; padding: 4px 18px 0; background: none; border: 0; border-radius: 0; }
  .b-na-starcie .b-kroki-lista li::before { content: ''; position: absolute; top: 32px; left: calc(-50% + 40px); right: calc(50% + 40px); border-top: 2px dashed #B9E6EE; }
  .b-na-starcie .b-kroki-lista li:first-child::before { display: none; }
  .b-na-starcie .b-kroki-lista b { width: 56px; height: 56px; flex: 0 0 56px; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #06C2DE, #0891B2); box-shadow: 0 8px 20px rgba(8, 145, 178, .28), 0 0 0 6px #E9F8FB; }
  .b-na-starcie .b-kroki-lista span { align-items: center; gap: 4px; font-size: 14.5px; line-height: 1.45; }
  .b-na-starcie .b-kroki-lista strong { font-size: 17px; white-space: nowrap; }
}
/* 12.10.2026 noc (Michał): telefon — ta sama oś procesu pionowo (kółka z numerami, przerywana linia, krótki opis). */
@media (max-width: 1023px) {
  .b-na-starcie .b-kroki-lista { gap: 0; }
  .b-na-starcie .b-kroki-lista li { position: relative; align-items: flex-start; gap: 14px; padding: 0 0 18px; }
  .b-na-starcie .b-kroki-lista li:last-child { padding-bottom: 0; }
  .b-na-starcie .b-kroki-lista li::before { content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; border-left: 2px dashed #B9E6EE; }
  .b-na-starcie .b-kroki-lista li:last-child::before { display: none; }
  .b-na-starcie .b-kroki-lista b { flex: 0 0 36px; width: 36px; height: 36px; font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #06C2DE, #0891B2); box-shadow: 0 6px 14px rgba(8, 145, 178, .25), 0 0 0 4px #E9F8FB; }
  .b-ekran.b-na-starcie .b-kroki-lista span { font-size: 13.5px; line-height: 1.4; color: #4B5B6E; padding-top: 1px; }
  .b-ekran.b-na-starcie .b-kroki-lista strong { font-size: 16px; color: #1C4262; }
}

/* 13.10.2026 (Michał): formularze bez telefonu z planem (włosy, nos, piersi) — punkty jako równa lista: blok na środku, wiersze do lewej. */
@media (min-width: 1024px) {
  .b-na-starcie:not(:has(.b-plan)) .b-zyski { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 12px; align-items: flex-start; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
  .b-na-starcie:not(:has(.b-plan)) .b-zyski li { justify-content: flex-start; text-align: left; }
}