/* r38 · uwagi Grzegorza z 30.10 (lista 1–13). Każdy blok podpisany numerem jego punktu. */

/* #1 · górna belka zawsze widoczna (bez chowania przy przewijaniu i w przypiętych scenach) */
.site-head.is-hidden, .site-head.r36-off { transform: none !important; }
.site-head.r36-off .bar { pointer-events: auto; }

/* #2 · „Get in line” = okno nad stroną, nie koniec strony: na telefonie arkusz z widoczną stroną nad nim, mniejszy nagłówek */
.kov .kov-final .cap.stamp { display: none; }
.kov .kov-final .h2 { font-size: clamp(30px, 3.2vw, 44px) !important; }
.kov .kov-final .lead { font-size: 17px; }
@media (max-width: 640px) {
  .kov .kov__panel:has(.kov-final) { height: calc(100dvh - 72px); }
  .kov .kov__panel:has(.kov-final)::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(255,255,255,.28); z-index: 3; }
}

/* #5 · nagłówki sekcji zawsze tej samej wielkości (wyjątki: hero H1, claim #7 i „Your accountant will love it”) */
main .h2:not(.kov .h2):not(.rep-head .h2), .di-h { font-size: clamp(38px, 4.8vw, 72px) !important; line-height: .97; letter-spacing: -.035em; }
.di-h { margin-bottom: 26px; }

/* #6 · wyspa: zwykła sekcja (bez przypinania), mniejszy telefon, paginator na dole; pierwszy przykład startuje sam */
section.di { height: auto !important; --v: clamp(1px, 31vw / 417.3, 1.25px); padding-block: calc(var(--sp) * 1.1); }
.di-vp { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 6vw, 120px); row-gap: 28px; width: min(1240px, 100%); margin: 0 auto; padding: 0 var(--gut); }
.di-copy { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: 560px; }
.di-phone { position: relative; left: auto; top: auto; margin: 0; grid-column: 2; grid-row: 1; }
.di-pager { grid-column: 2; grid-row: 2; justify-self: center; display: flex; align-items: center; gap: 10px; }
.di-pg { display: grid; gap: 8px; justify-items: start; min-width: 104px; padding: 6px 4px; background: none; border: 0; color: var(--mute); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.di-pg[aria-pressed="true"] { color: var(--paper); }
.di-pg-bar { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(247,246,241,.18); overflow: hidden; }
.di-pg-bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--lime); }
.di-pg.done .di-pg-bar i { transform: scaleX(1); background: rgba(247,246,241,.5); }
.di-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(247,246,241,.1); color: var(--paper); cursor: pointer; }
.di-play svg { width: 18px; height: 18px; fill: currentColor; }
.di-play .pl { display: none; }
.di-play[aria-pressed="true"] .pa { display: none; }
.di-play[aria-pressed="true"] .pl { display: block; }
.di-pg:focus-visible, .di-play:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
@media (max-width: 759px) {
  section.di { --v: calc((100vw - 2 * var(--gut)) / 417.3 * .86); }
  .di-vp { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .di-copy { padding: 0; }
  .di-phone, .di-pager { grid-column: 1; justify-self: center; }
  .di-phone { grid-row: 2; height: calc(300 * var(--v)); }
  .di-pager { grid-row: 3; gap: 6px; }
  .di-pg { min-width: 0; flex: 1; font-size: 13px; }
  .di-pager { width: 100%; }
}
html.rm .di-vp { display: grid; }
html.rm .di-cap { position: absolute; opacity: 0; }
html.rm .di-cap.on { opacity: 1; }
html.rm .di-caps { min-height: 4.6em; }

/* #7 · claim jak u Apple: cały ekran, na środku, dużo większy */
.claim { min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--sp) * 1.6) !important; }
.claim .wrap { width: 100%; }
.claim-h { font-size: clamp(50px, 8.4vw, 150px) !important; line-height: .98; letter-spacing: -.045em; text-align: center; margin: 0 auto; max-width: 15ch; }
.claim-h .word { min-height: 2.05em; }
@media (max-width: 759px) { .claim-h { font-size: clamp(44px, 12.4vw, 60px) !important; } .claim-h .word { min-height: 3.1em; } }
.di-copy { inset: auto !important; }   /* r23 dawał left/right = gut (pozycja absolutna); w siatce przesuwało tekst poza margines */
.di-cap { transition: opacity .18s ease, transform .3s ease; }   /* stary podpis znika szybko… */
.di-cap.on { transition: opacity .4s ease .2s, transform .55s cubic-bezier(.2,.7,.2,1) .2s; }   /* …nowy wchodzi po nim, bez nakładania */
.claim-h .dot { display: none; }
.rot .ring { opacity: 0; }
.rot.landed .ring { opacity: 1; }
/* #1 · belka stoi zawsze: linie przy telefonie na telefonie startują pod nią (było 7svh ≈ 59 px, belka kończy się na 64 px) */
@media (max-width: 759px) { .h17-say { top: calc(var(--kit-header-h, 52px) + 28px); } }
/* #1 · komputer: telefon i biała ramka w otwarciu stoją pod belką (środek obszaru pod belką; r11-hero.js ustawia --hh2) */
@media (min-width: 760px) {
  .h11-phone, .h17-ghost { margin-top: calc(-435.65 * var(--u) + var(--hh2, 0px)); }
}
/* #1b (30.10, wieczór) · na średnich ekranach linki sekcji też w belce (Menu tylko poniżej 900 px) */
@media (min-width: 900px) and (max-width: 1179px) {
  .site-head .links { display: flex; gap: 16px; font-size: 13.5px; }
  .site-head .bar .menu-btn { display: none; }
  .site-head .bar .cta-slot { order: 0; width: 120px; }
}
@media (min-width: 760px) and (max-width: 899px) { .site-head .bar .cta-slot { width: 100px; } }