/*
 * Delta Avably nad arkuszem szablonu (ADR-068).
 *
 * Zawiera WYŁĄCZNIE układ elementów, których szablon nie ma: formularz listy
 * oczekujących ma cztery pola i zgody, a jego kontaktowy formularz — trzy pola
 * i wiadomość. Kolory, promienie i typografia pochodzą ze zmiennych szablonu,
 * żeby delta nie tworzyła drugiego systemu wizualnego.
 */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---divider--32, 32px);
}

.waitlist-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---divider--32, 32px);
  border: 0;
  margin: 0;
  padding: 0;
}

.waitlist-fieldset[disabled] {
  opacity: 0.6;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-block {
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--_colors---color--dark-8, rgba(0, 0, 0, 0.08));
}

.form-field-error:empty {
  display: none;
}

.form-field-error {
  color: var(--_colors---color--error, #b3261e);
}

.form-result {
  padding: 24px;
  border-radius: var(--radius--16, 16px);
  background-color: var(--_colors---color--dark-4, rgba(0, 0, 0, 0.04));
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.form-result-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.checkbox-field .w-checkbox-input {
  margin: 2px 0 0;
  flex: none;
}

select.text-field {
  appearance: auto;
}

/* Patrz komentarz w marketing-page-view.tsx — strony z wyspą Reacta pokazują
   treść bez czekania na interakcje odsłaniające. */
.marketing-static [style*="opacity:0"],
.marketing-static [style*="opacity: 0"] {
  opacity: 1 !important;
}

/* Odstęp na styku sekcji „momentum" (Uruchom sklep w 3 krokach) → FAQ.
   Szablon dawał FAQ padding-top: 0, przez co nagłówek „Częste pytania" kleił
   się do granicy sekcji — reszta sekcji ma pełny odstęp górny. Przywracamy
   rytm skalą szablonu (uwaga przeglądu, landing). */
.section.home-a-faq-section {
  padding-top: var(--_spacing---section-spacing--80, 80px);
}

/* ══════════ A2 / delta wizualna: zrzuty interfejsu i miejsca po wideo ══════════
 *
 * Interfejs pokazujemy jako OBRAZ — zrzut działającego produktu w `<img>`,
 * nigdy jako odtworzony w HTML/CSS kalendarz, tabelę czy wykres. To decyzja
 * właściciela (ADR-128): atrapa UI na stronie sprzedażowej obiecuje ekran,
 * którego nikt nie zbudował, i starzeje się niezależnie od produktu.
 */

/* Miejsca po usuniętym wideo z szablonu. Pierwszy ekran ma ciemne tło
 * z arkusza szablonu (`.section.hero-home-a`), ale sekcja cytatu miała je
 * WYŁĄCZNIE od wideo — bez tego zdania jasny tekst leżałby na jasnym.
 * `position` i `overflow` odtwarzają to, co dawała klasa `w-background-video`:
 * nakładki i siatka kropek są pozycjonowane względem tego pudełka. */
.home-a-video.tlo-marki,
.video-large.tlo-marki {
  position: relative;
  overflow: hidden;
  background-color: var(--_colors---color--dark, #181e25);
}

/* Zrzut interfejsu: pudełko trzyma DOKŁADNIE proporcję pliku, więc `cover`
 * nie ma czego przyciąć ani czym uzupełnić — obraz nie jest ani kadrowany,
 * ani zniekształcony, ani obramowany paskami. Wysokość liczona z proporcji
 * (nie ze stałej), więc rezerwacja miejsca jest poprawna przed wczytaniem
 * pliku i układ nie skacze przy dociąganiu obrazu. */
.zrzut-ui {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius--8, 8px);
}

.zrzut-ui-2-1 {
  aspect-ratio: 2 / 1;
}

.zrzut-ui-4-3 {
  aspect-ratio: 4 / 3;
}

.zrzut-ui-3-2 {
  aspect-ratio: 3 / 2;
}

/* Pudełka szablonu miały STAŁE wysokości pod zdjęcia dekoracyjne (396 px
 * w „trzech krokach", 720 px w bloku CTA, mniej na węższych ekranach).
 * Zrzut interfejsu w takim pudełku byłby przycięty w pionie — i to akurat
 * na wierszu z liczbami. Selektory są DWUKLASOWE, więc wygrywają swoistością
 * z jednoklasowymi regułami szablonu w każdym progu, bez `!important`
 * i bez zależności od kolejności arkuszy. */
.momonetum-image.zrzut-ramka-4-3 {
  height: auto;
  aspect-ratio: 4 / 3;
}

.cta-block-image.zrzut-ramka-3-2 {
  min-height: 0;
  height: auto;
  aspect-ratio: 3 / 2;
}

/* ══════════ LP 2.0: wideo hero i pas branż ══════════
 *
 * WIDEO BEZ JAVASCRIPTU. `buildCsp` (packages/security) daje
 * `script-src 'self' 'nonce-…' 'strict-dynamic'`, a przy `strict-dynamic`
 * przeglądarka ignoruje także `'self'` — liczy się WYŁĄCZNIE nonce. Statyczne
 * `marketing/*.html` nonce'a nie dostaną nigdy, więc skrypt wstawiony tam nie
 * wykona się i NIKT tego nie zauważy. Dlatego `<video autoplay muted loop
 * playsinline>` odtwarza się sam, a obie bramki — ruchu i urządzenia — stoją
 * niżej w CSS, gdzie nie zależą od skryptu.
 *
 * Poster jest osobnym `<img>` (nie `background-image`): dostaje `srcset`,
 * jawne `width`/`height` i `fetchpriority="high"`, a `loading="lazy"` jest tu
 * ZAKAZANE — to ścieżka LCP. Wszystkie 15 pozostałych `<img>` na tej stronie
 * ma `lazy` i implementer kopiujący wzorzec zabiłby pierwszy ekran. */
.hero-media-obraz,
.hero-media-wideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Nakładka liczona, nie oszacowana. Oś `to right` (90°), więc procent stopu =
 * procent SZEROKOŚCI; przy 100° procenty biegłyby wzdłuż osi gradientu i
 * deklarowany kontrast obowiązywałby do ~38% szerokości. Barwa to `color--dark`
 * (#181E25) — ta sama, na której stoi sekcja, więc na krawędzi wygaszenia nie
 * ma szwu. Strefa nagłówka to 0–58% szerokości: biały tekst ma tam ≥10,4:1
 * nawet przeciw czysto białemu pikselowi, czyli AAA z zapasem. */
.hero-media-scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    rgba(24, 30, 37, 0.9) 0%,
    rgba(24, 30, 37, 0.86) 45%,
    rgba(24, 30, 37, 0.78) 60%,
    rgba(24, 30, 37, 0.3) 85%,
    rgba(24, 30, 37, 0.12) 100%
  );
}

/* BRAMKA RUCHU — WARSTWA WIDOCZNOŚCI. Przy ustawieniu systemowym „ogranicz
 * ruch" wideo znika i zostaje sam poster. UWAGA: `display: none` NIE
 * zatrzymuje pobierania — `autoplay` uruchamia wybór zasobu niezależnie od
 * widoczności (zmierzone: 211,7 kB mimo ukrytego elementu). Za brak pobrania
 * odpowiada `media` na `<source>` w `home.html`; ta reguła odpowiada za to,
 * co widać, i broni się także tam, gdzie `media` bywa ignorowane.
 * To jedyna reguła `prefers-reduced-motion` na osi marketingowej — w obu
 * arkuszach szablonu nie ma jej ani razu. */
@media (prefers-reduced-motion: reduce) {
  .hero-media-wideo {
    display: none;
  }
}

/* BRAMKA URZĄDZENIA. Poniżej 1024 px nagłówek zajmuje całą szerokość, więc
 * gradient poziomy przestaje mieć sens — scrim robi się równomierny, a wideo
 * schodzi z drogi (telefon zostaje przy posterze 750w, 19 kB). */
@media screen and (max-width: 1023px) {
  .hero-media-wideo {
    display: none;
  }

  .hero-media-scrim {
    background-image: linear-gradient(to bottom, rgba(24, 30, 37, 0.86) 0%, rgba(24, 30, 37, 0.94) 100%);
  }
}

/* Pas branż: pięć kafli w rzędzie, po dwa na telefonie. Proporcja pudełka jest
 * DOKŁADNIE proporcją pliku (560×373), więc `cover` nie ma czego przyciąć,
 * a miejsce jest zarezerwowane przed wczytaniem obrazu. */
.branze-siatka {
  display: grid;
  /* `minmax(0, 1fr)`, nie `1fr`: domyślne `minmax(auto, 1fr)` pozwala długiemu
     tytułowi rozepchnąć kolumnę i wyjść na sąsiada — widać to dopiero na
     zrzucie, bo tekst nie jest przycinany, tylko nachodzi. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.branze-kafel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.branze-obraz {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 373;
  object-fit: cover;
  border-radius: var(--radius--8, 8px);
}

.branze-nota {
  max-width: 636px;
  margin: var(--_spacing---divider--32, 32px) auto 0;
  text-align: center;
}

@media screen and (max-width: 991px) {
  .branze-siatka {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .branze-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Poniżej progu „tablet" zakładki układają się w kolumnę: harmonijka na górze,
 * podgląd pod nią. Szablon dawał podglądowi stałą wysokość (400/250 px) pod
 * zdjęcie kadrowane `cover`; zrzut 2:1 jest niższy, więc zostawała martwa
 * przestrzeń pod obrazem. Wysokość idzie za treścią. */
@media screen and (max-width: 991px) {
  .tabs-content-features .tab-pane-features {
    height: auto;
  }
}

/* ══════════ MENU MOBILNE: pozycje nawigacji wracają na ekran (ADR-162) ══════════
 *
 * PRZYCZYNA, NIE OBJAW. Arkusz szablonu chowa `.nav-link` poniżej 991 px
 * (`display: none` w `@media screen and (max-width: 991px)`), bo w oryginale
 * nawigację na telefonie prowadziło MEGA-MENU: w tym samym progu szablon daje
 * `.nav-dropdown { display: block }`, a proste pozycje gasi jako duplikaty.
 * Nasze przeniesienie usuwa rozwijane pozycje w całości (`transformShell`
 * w `scripts/build-marketing-html.mjs` kasuje każdy `.navigation-link-hover-wrap`
 * zawierający `.nav-dropdown`), więc zostają wyłącznie pozycje proste — i
 * wszystkie były schowane. Odnośniki BYŁY w DOM: zmierzone przy 375 px cztery
 * sztuki, każda `display: none` i prostokąt 0 × 0 px. Rozwinięte menu pokazywało
 * pole CTA i biały prostokąt po `padding-top: 115px` wewnętrznej owijki.
 *
 * Lekarstwo jest czystym CSS-em, więc nie zależy od silnika przeglądarki
 * (właściciel testuje w Safari, narzędzia w repo mają Chromium). Selektor jest
 * DWUKLASOWY i wygrywa swoistością (0,2,0) z jednoklasową regułą szablonu
 * (0,1,0) — bez `!important` i bez zależności od kolejności arkuszy.
 */
@media screen and (max-width: 991px) {
  /* Pole zachęty (`.menu-cta-mobile`) jest pozycjonowane BEZWZGLĘDNIE na górze
     menu, więc miejsce pod nie robi górny odstęp owijki. Szablon rezerwował
     115–130 px pod kafel z obrazkiem, którego nasza wersja nie ma: przy polu
     wysokim na 54 px zostawało 61 px pustej bieli między zachętą a pierwszą
     pozycją. `min-height` pilnuje, żeby dłuższe tłumaczenie nie weszło pod
     pierwszy odnośnik — rezerwacja i zawartość zmieniają się razem. */
  .nav-menu-inner {
    padding-top: 80px;
  }

  .nav-menu-inner .menu-cta-mobile {
    min-height: 56px;
  }

  .nav-menu-inner .nav-link {
    display: flex;
    align-items: center;
    /* Cel dotykowy: 48 px to wysokość pozycji, nie samego napisu (maska
       napisu szablonu ma sztywne 22 px i sama w sobie byłaby za niska). */
    min-height: 48px;
    padding: 0;
  }

  /* Wariant `.light` maluje napis kolorem `color--light`. Na desktopie leży on
     na przezroczystej belce nad ciemnym hero; rozwinięte menu stoi natomiast na
     WŁASNYM białym tle (`.nav-menu-inner { background-color: color--light }`),
     więc ten sam napis byłby biały na białym. Kolor przejmuje też maska napisu,
     bo `.button-text` dziedziczy go po odnośniku. */
  .nav-menu-inner .nav-link.light,
  .nav-menu-inner .nav-link.light .button-text {
    color: var(--_colors---color--dark);
  }

  /* Pozycje idą w kolumnę na pełną szerokość, rozdzielone włoskową linią —
     bez niej trzy napisy pod sobą czytają się jak jeden akapit. */
  .nav-menu-inner .navigation-link-hover-wrap {
    width: 100%;
    border-bottom: 1px solid var(--_colors---color--dark-8, rgba(0, 0, 0, 0.08));
  }

  .nav-menu-inner .navigation-link-hover-wrap:last-child {
    border-bottom: 0;
  }
}

/* ══════════ DOKUMENTY PRAWNE: układ i typografia (ADR-162) ══════════
 *
 * Treść dokumentu wnosi wyspa Reacta (`privacy-content.tsx`, `terms-content.tsx`)
 * razem z własną sekcją i kontenerem — powód w komentarzu tych komponentów.
 * Tutaj zostaje rytm: nagłówek strony przestaje odbijać pełny odstęp sekcji od
 * treści, która jest jego ciągiem dalszym, a sam dokument dostaje hierarchię.
 */
.section.hero-legal {
  padding-bottom: var(--_spacing---title-margin-bottom--xs, 40px);
}

.section.legal-body-section {
  padding-top: 0;
  padding-bottom: var(--_spacing---section-spacing--120, 120px);
}

/* CZYTELNA DŁUGOŚĆ WIERSZA. Sufit siedzi na TREŚCI, nie na kontenerze: kontener
   jest ten sam, co pod nagłówkiem strony, więc dokument trzyma jedną lewą
   krawędź na każdej szerokości okna (kontener węższy i wyśrodkowany rozjeżdżał
   się z nagłówkiem o 360 px przy oknie 1440 px). 720 px to szerokość, którą
   szablon przewiduje dla tekstu ciągłego (`article-container`). */
.body-legal {
  max-width: 720px;
}

/* Numerowany nagłówek sekcji ma należeć do tekstu POD sobą, a nie stać
   w połowie drogi między dwoma akapitami — szablon dawał mu symetryczne
   10 px z obu stron. */
.body-legal h6 {
  margin-top: var(--_spacing---divider--32, 32px);
  margin-bottom: 8px;
}

.body-legal > p:first-child {
  margin-bottom: var(--_spacing---divider--32, 32px);
}

.body-legal p {
  /* Akapit dokumentu prawnego bywa długi; 10 px szablonu zlepia je w blok. */
  margin-bottom: 16px;
}

.body-legal a {
  text-decoration: underline;
}

/* ══════════ AVABLY BRAND: proporcje pełnego logo ══════════
 *
 * Eksport Forerunner przewidywał w stopce kwadratowy sygnet (64 × 64 px),
 * a w nawigacji logotyp szeroki na 118 px. Platformowy znak Avably jest pełną
 * kapsułą 348:93, dlatego kwadratowe wymiary zniekształcały wordmark. Delta
 * jest po arkuszu szablonu i utrzymuje zatwierdzone proporcje oraz minimalną
 * szerokość 120 px na każdym progu responsywnym.
 */
.nav-brand {
  width: 120px;
}

.footer-icon {
  width: 120px;
  height: auto;
}