/*
 * Podstrona "Dla kogo" — /pl/dla-kogo i /for-whom.
 * Znaczniki: partials/marketing/audience/*.blade.php, treść: lang/{pl,en}/home_v2_audience_page.php.
 *
 * Arkusz ładuje sama strona (slot `head` w pages/audience.blade.php), po marketing.css i home-v2.css,
 * więc korzysta z ich kontenera (.hp-wrap, 1320px) i z .hp-kicker, a dokłada tylko to, czego na
 * stronie jeszcze nie było. Prefiks .hp-audience- jest osobny od .hp-aud- ze strony głównej —
 * selektory klasowe dopasowują całe nazwy, więc te dwa zestawy nigdy się nie zazębiają, mimo że
 * język graficzny (mono-dymek z pytaniem, lila kafel z odpowiedzią, trzy chipy) jest wspólny.
 *
 * Trzy rzeczy, które wynikają z marketing.css i widać je w każdym bloku poniżej:
 *   · poniżej 641px każda <section> dostaje padding 60px !important, a każdy <p> 14px !important —
 *     dlatego tekst drugiego planu (opisy kroków, notki) jest w <div>, a pasek "jak to działa"
 *     jest <div>, nie <section>;
 *   · poniżej 641px h2 jest wyśrodkowane, a akapit stojący zaraz po h1/h2 ukryty — lead i notka
 *     siedzą w <div>, a nagłówki sekcji same się centrują, więc ich otoczenie centruje się tu razem
 *     z nimi;
 *   · powyżej 1000px body ma zoom .9, więc miejsce w układzie jest o ~11% szersze, niż mówi
 *     szerokość okna: progi poniżej są dobrane pod to, co widać na ekranie, nie pod liczby.
 *
 * Ruch: stan końcowy jest stanem domyślnym, animacja tylko do niego dochodzi. Bez JS i przy
 * prefers-reduced-motion strona wygląda tak samo, po prostu bez wejścia. Jedyny ruch poza hero to
 * wejście odczytu w otwartym przypadku, a prowadzi je skrypt (js/hv-audience-page.js), który
 * startuje dopiero wtedy, gdy odczyt wchodzi w ekran — sam CSS odegrałby je poza ekranem.
 */

/* === hero ================================================================== */

.hp-audience-hero {
  padding: 92px 0 0;
}

.hp-audience-hero .hp-wrap {
  text-align: center;
}

.hp-audience-title {
  margin: 14px 0 0;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #14162B;
  text-wrap: balance;
}

/* Lead w <div>, żeby przeżył regułę "akapit zaraz po h1 znika poniżej 641px". */
.hp-audience-lead {
  max-width: 660px;
  margin: 18px auto 0;
}

.hp-audience-lead p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: #4C5163;
  text-wrap: pretty;
}

.hp-audience-cta {
  margin: 28px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Ten sam przycisk, co w domknięciu strony: .hv-primary z marketing.css dokłada hover. */
.hp-audience-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5B5CE6;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 15px 30px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}

.hp-audience-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DEE0E8;
  background: #FFFFFF;
  color: #14162B;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: 12px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.hp-audience-ghost:hover {
  border-color: #C4C8D6;
  color: #14162B;
}

.hp-audience-btn:focus-visible,
.hp-audience-ghost:focus-visible,
.hp-audience-tab:focus-visible,
.hp-audience-panel-head:focus-visible,
.hp-audience-plan-link:focus-visible {
  outline: 2px solid #5B5CE6;
  outline-offset: 3px;
}

/* Pozycja listy i nagłówek panelu mają własne tło i zaokrąglenie, więc obrys kładzie się na ich
   kształcie, a nie na prostokącie wiersza tekstu. */
.hp-audience-tab:focus-visible {
  outline-offset: 1px;
  border-radius: 12px;
}

.hp-audience-panel-head:focus-visible {
  outline-offset: 4px;
  border-radius: 10px;
}

/* === pasek "jak to działa" ================================================= */
/*
 * <div>, nie <section>, dokładnie jak pasek z logotypami na stronie głównej: sekcja dostałaby
 * poniżej 641px 60px dopełnienia !important i zrobiła z wąskiego paska osobny rozdział.
 */

.hp-audience-how {
  margin: 68px 0 0;
  border-top: 1px solid #EDEEF2;
  border-bottom: 1px solid #EDEEF2;
  background: var(--mkt-surface, #FAFAFC);
  padding: 30px 0;
}

/* Bez marginesu u góry: 20px odsuwało listę od podpisu nad krokami, a podpis wyszedł. Zostały
   z nich puste 20px, przez które pasek miał 50px nad krokami i 30px pod nimi. */
.hp-audience-how-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 40px;
}

.hp-audience-how-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.hp-audience-how-n {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #5B5CE6;
  padding-top: 1px;
}

.hp-audience-how-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #14162B;
}

.hp-audience-how-desc {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #4C5163;
  text-wrap: pretty;
}

/* === katalog przypadków ==================================================== */
/*
 * Katalog, nie ciąg. Poprzednia wersja stawiała wszystkie profile jeden pod drugim — sześć
 * bliźniaczych kart po ~560px, czyli ~4500px przewijania, żeby dojść do swojego. Teraz lista
 * przypadków stoi po lewej i jedzie z czytelnikiem, a treść wybranego przypadku wypełnia prawą
 * kolumnę. Przełącznikiem jest :target (patrz nagłówek partials/marketing/audience/profiles),
 * więc każdy przypadek ma adres, a strona dalej nie ma ani linii skryptu.
 *
 * Trzy progi:
 *   · >= 1000px — lista po lewej (sticky) + jeden panel po prawej;
 *   · < 1000px  — akordeon: lista znika, jej rolę przejmują nagłówki paneli;
 *   · < 900px   — wnętrze panelu schodzi do jednej kolumny (odczyt i pierwsze kroki).
 * 1000px to ten sam próg, na którym marketing.css włącza `body { zoom: .9 }` — powyżej układ ma
 * ~11% miejsca ponad szerokość okna i lewa kolumna ma z czego żyć. Zmierzone na 900px w wersji
 * dwukolumnowej: panel schodził do 596px, a rząd chipów potrzebuje 570px szerokości kafla — czyli
 * dokładnie na styk, z łamaniem po angielsku.
 */

.hp-audience-profiles {
  background: #F4F5F8;
  /* 110px jak każda sekcja treści na landingu (przegląd odstępów przed wdrożeniem; było 96px). */
  padding: 110px 0;
}

.hp-audience-head {
  max-width: 720px;
}

.hp-audience-head h2 {
  margin: 14px 0 0;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: #14162B;
  text-wrap: balance;
}

/* --- siatka katalogu -------------------------------------------------------
 * 248px na listę i 34px przerwy, czyli o 24px mniej niż wcześniej (262 + 44). Te 24px poszły
 * na odczyt po prawej — wtedy pod plakietkę łącznika, dziś (sam znak w kółku) na pudełka.
 * Lista nic na tym nie traci — zmierzone przy 1024px w obu językach: przy 248px żadna etykieta
 * nie łamie się inaczej niż przy 262px (po polsku wszystkie siedem stoi w jednym wierszu,
 * po angielsku „Enterprise and many markets" ma dwa — tak samo jak przed zmianą). Próg jest
 * ostry: przy 240px dwa polskie hasła schodzą na drugi wiersz, dlatego nie schodzimy niżej.
 * Po dołożeniu hotelu, zdrowia, nieruchomości i kafla "Twoja branża" (jedenaście pozycji)
 * zmierzone jeszcze raz przy 1000, 1024, 1280, 1440 i 1920px: po polsku wszystkie jedenaście
 * w jednym wierszu, po angielsku dwa ma tylko „Enterprise and several markets". Lista ma wtedy
 * 418px (pl) i 433px (en), czyli mieści się pod przyklejoną nawigacją nawet przy 1000 × 700
 * (dół listy na 449px / 462px) i jest niższa niż najkrótszy panel (522px od 1280px, 559px
 * przy 1000-1024px), więc wysokość katalogu wyznacza zawsze panel, nie lista.
 */

.hp-audience-dir {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 0 34px;
  align-items: start;
}

/* --- lewa kolumna: lista przypadków ---------------------------------------- */

.hp-audience-side {
  position: sticky;
  /* Cel kotwicy i przyklejona kolumna siadają na tej samej wysokości, więc po kliknięciu
     w pozycję listy nic się względem siebie nie przesuwa. */
  top: calc(var(--mkt-nav-h, 84px) + 20px);
  align-self: start;
}

.hp-audience-rail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Pozycja listy to sama nazwa. Stał przed nią mono-numer "01"-"11" i wyszedł: przypadki nie są
   sekwencją (nota w partials/marketing/audience/profiles). Numery zostały tylko tam, gdzie
   kolejność jest prawdziwa — w krokach "od czego zaczynasz" i w pasku "jak to działa". Nazwy
   zaczynają się teraz przy lewym dopełnieniu pozycji (14px), więc wyrównują się w pionie
   z krawędzią białego tła wybranej pozycji tak samo, jak przedtem numery. */
.hp-audience-tab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #4C5163;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.hp-audience-tab:hover {
  background: #FFFFFF;
  color: #14162B;
}

/* Kafel "Twoja branża" nie jest jedenastym przypadkiem, tylko wyjściem dla wszystkich
   pozostałych, więc od listy przypadków oddziela go włosowa linia — ta sama #E3E5EC, co linia
   pod pytaniem w odczycie. 6px + 1px + 7px: pozycja nad linią i pod nią ma tyle samo powietrza,
   ile dwie pozycje listy (2px odstępu) plus odstęp wyraźnie większy od niego, żeby linia
   czytała się jako podział, a nie jako obwódka sąsiedniej pozycji. */
.hp-audience-rail-list > li.is-universal {
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid #E3E5EC;
}

/* --- kafel "Twoja branża": pole do wypełnienia -------------------------------
 * Właściciel: "czy to Twoja branża ciut nie odróżnić, żeby wyglądało inaczej niż tamte
 * stylistycznie?". Jeden motyw, powtórzony wszędzie, gdzie kafel stoi: kreskowana lila obwódka
 * (ta sama #C9CCF5, co kreski łącznika w odczycie) i znak "+" w kółku (lila #EEF0FE w obwódce
 * #D6DAFB, jak krążki kroków). Czyta się jak pole do wypełnienia — tym właśnie ten kafel jest,
 * razem z wybarwionymi polami szablonu w pytaniu. Żadnych nowych barw: wszystko z rodziny
 * akcentu, której strona już używa.
 *
 * Stany w tym samym porządku, co u rodzeństwa:
 *   spoczynek  — kreskowana obwódka #C9CCF5, nazwa w lila #4B4CD8 (5,6:1 na #F4F5F8);
 *   najechanie — białe tło, obwódka ciemnieje do #9EA2F2;
 *   wybrany    — białe tło, obwódka #9EA2F2, cień, kółko wypełnia się barwą akcentu
 *                (reguła w bloku "który panel jest otwarty");
 *   fokus      — ten sam obrys 2px #5B5CE6, co każda pozycja listy.
 * Obwódka zostaje kreskowana w każdym stanie, więc kafel nie udaje wybranego przypadku.
 */
.hp-audience-plus {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #EEF0FE;
  border: 1px solid #D6DAFB;
  color: #5B5CE6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.hp-audience-plus svg {
  display: block;
}

/* background-clip: padding-box — w przerwach kreskowanej obwódki ma być widać szare tło sekcji,
   a nie białe tło pozycji. Z białym pod spodem kreska na bieli zlewała się w jasną, prawie
   ciągłą linię, a krawędź najechanej i wybranej pozycji traciła wyrazistość. */
.hp-audience-rail-list > li.is-universal > .hp-audience-tab {
  align-items: center;
  border: 1px dashed #C9CCF5;
  background-clip: padding-box;
  color: #4B4CD8;
}

.hp-audience-rail-list > li.is-universal > .hp-audience-tab:hover {
  background: #FFFFFF;
  border-color: #9EA2F2;
  color: #3F40C4;
}

/* Panel kafla: ta sama kreskowana obwódka, co pozycja na liście. Na desktopie znak "+" stoi
   przed tytułem (20px, bo tytuł ma tam 20px); w akordeonie wiersz dostaje też lila nazwę —
   jest wtedy pozycją listy (reguły w bloku "który panel jest otwarty" i "szerokości"). */
.hp-audience-panel.is-universal {
  border: 1px dashed #C9CCF5;
  background-clip: padding-box;
}

.hp-audience-panel.is-universal .hp-audience-plus {
  width: 20px;
  height: 20px;
}

/* --- prawa kolumna: panele -------------------------------------------------- */

.hp-audience-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-audience-panel {
  /* Kotwica: cel nie może wylądować pod przyklejoną nawigacją. Ta sama wartość, co `top`
     przyklejonej listy. */
  scroll-margin-top: calc(var(--mkt-nav-h, 84px) + 20px);
  border: 1px solid #DEE0E8;
  border-radius: 18px;
  background: #FFFFFF;
  padding: 26px 32px 30px;
}

/* Numer przed tytułem wyszedł razem z numerami na liście (patrz .hp-audience-tab). Przed tytułem
   stoi już tylko znak "+" kafla "Twoja branża", stąd wyśrodkowanie w pionie, a nie linia bazowa:
   kółko nie ma linii bazowej, tytuł z jednym wierszem wychodzi tak samo. */
.hp-audience-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #14162B;
}

.hp-audience-panel-name {
  margin: 0;
  font-size: 20px !important; /* poniżej 641px marketing.css daje każdemu h3 15px !important */
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  text-wrap: balance;
}

.hp-audience-panel-head:hover {
  color: #3F40C4;
}

/* Strzałka jest częścią akordeonu, więc na desktopie jej nie ma — tam nagłówek nie rozwija
   panelu, tylko podaje jego adres. */
.hp-audience-panel-caret {
  display: none;
}

.hp-audience-who {
  margin: 12px 0 0;
  max-width: 82ch;
  font-size: 15px;
  line-height: 1.62;
  color: #4C5163;
  text-wrap: pretty;
}

/* Tytuł panelu jako link do podstrony przypadku (partials/marketing/audience/profiles, nota
   u góry). Od 1000px zastępuje nagłówek-kotwicę: ten sam stopień, waga i barwa co
   .hp-audience-panel-name, więc spoczynkowo panel wygląda jak dotąd. Przy najechaniu i fokusie
   tytuł bierze barwę hover nagłówka, a strzałka wysuwa się zza ostatniego wyrazu. Poniżej 1000px
   tytuł-link znika (nagłówek jest tam wierszem akordeonu); do podstrony prowadzi wtedy
   "Zobacz więcej →" w stopce pakietu (.hp-audience-plan-more), które stoi w każdej szerokości. */
.hp-audience-panel-title {
  display: none;
}

@media (min-width: 1000px) {
  .hp-audience-panel.has-page > .hp-audience-panel-head {
    display: none;
  }

  .hp-audience-panel-title {
    display: block;
    margin: 0;
    font-size: 20px !important;
    font-weight: 600;
    line-height: 1.3;
    color: #14162B;
    text-wrap: balance;
  }
}

.hp-audience-panel-link {
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.2s ease;
}

.hp-audience-panel-link:hover {
  color: #3F40C4;
}

.hp-audience-panel-link:focus-visible {
  outline: 2px solid #5B5CE6;
  outline-offset: 4px;
}

.hp-audience-panel-tail {
  white-space: nowrap;
}

.hp-audience-panel-arrow {
  display: inline-flex;
  margin-left: 8px;
  vertical-align: -1px;
  color: #5B5CE6;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hp-audience-panel-link:hover .hp-audience-panel-arrow,
.hp-audience-panel-link:focus-visible .hp-audience-panel-arrow {
  opacity: 1;
  transform: none;
}

.hp-audience-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #656B7E;
}

.hp-audience-label.is-see {
  color: #4B4CD8;
}

/* --- odczyt: pytanie → BrandinAI → co widać w panelu ------------------------
 * TEN SAM ELEMENT, CO .hp-aud NA STRONIE GŁÓWNEJ (właściciel: "mamy pewną niespójność tego
 * element vs strona główna (…) styl klient pyta / vs co widzisz"). Trzy części:
 *   lewa   — pudełko: szare #F4F5F8, obwódka #EDEEF2, róg 14/14/14/4, pytanie mono, pod włosową
 *            linią podpis "prompt śledzony cyklicznie";
 *   środek — znak BrandinAI w białym kółku, po bokach kreski (patrz .hp-audience-flow niżej);
 *   prawa  — karta odczytu: --mkt-surface, obwódka #D6DAFB, róg 14/14/4/14, odpowiedź w kroju
 *            tekstowym (to mówi produkt), pod włosową linią chipy.
 *
 * RÓWNE PUDEŁKA, JEDNA WYSOKOŚĆ WŁOSOWYCH LINII — od 900px, czyli wszędzie tam, gdzie pudełka
 * stoją obok siebie. Właściciel: "dalej się gryzie — brak wyrównania między boxami; chipy łamią
 * się na 2 linie i się rozjeżdża".
 * Dotąd trzymał to rachunek: rząd chipów miał stałą wysokość zmierzoną z góry (--hpa-band,
 * 64px albo 100px), a lewe pudełko oddawało pod siebie tyle samo minus wiersz podpisu
 * (--hpa-tail). Działało dokładnie tylko dopóty, dopóki chipy mieściły się w tej zmierzonej
 * liczbie rzędów, a lewe pudełko z założenia kończyło się 48-84px wyżej niż karta. To drugie
 * właściciel widział jako rozjazd.
 * Teraz nie ma czego liczyć. Odczyt jest siatką o trzech wierszach — etykiety · treść · stopka —
 * a kolumna pytania i kolumna odczytu biorą je przez subgrid, pudełka w nich tak samo:
 *   · pytanie i odpowiedź leżą w jednym wierszu treści, podpis i chipy w jednym wierszu stopki;
 *   · obie włosowe linie to górna krawędź podpisu i chipów, czyli początek TEGO SAMEGO wiersza;
 *   · oba pudełka zaczynają się na początku wiersza treści i kończą na dnie wiersza stopki.
 * Wiersz ma wysokość wyższej z dwóch stron, więc zgadza się to przy każdej liczbie rzędów
 * chipów, w każdym języku i przy każdej treści dopisanej jutro. Obwódka i dopełnienie pudełka
 * wchodzą do subgridu jako margines skrajnych wierszy, dlatego oba pudełka mają ten sam układ
 * obwódek i dopełnień (1px + 16px u góry, 15px + 1px na dole) — przy różnych rozjechałyby się
 * właśnie o tę różnicę.
 * Zmierzone po zmianie: 900-1920px co 5px, siedem przypadków, dwa języki — różnica wysokości
 * pudełek i różnica wysokości włosowych linii 0,00px w każdej próbce (liczby w raporcie).
 * Powtórzone przy jedenastu przypadkach (z kaflem "Twoja branża" i jego wybarwionymi polami
 * w pytaniu): 4510 próbek, różnica krawędzi pudełek i włosowych linii 0,000px w każdej.
 *
 * Podpis w stopce stoi na osi PIERWSZEGO RZĘDU CHIPÓW, a nie w środku stopki: czyta się wtedy
 * jak wiersz tabeli — linia, pod nią podpis i chipy w jednym rzędzie. Porównane na zrzutach
 * obu wersji: wyśrodkowany podpis wisiał w stopce bez żadnego odniesienia, bo przy dwóch
 * rzędach chipów trafiał w szczelinę między nimi.
 *
 * SZEROKOŚCI: 0,7fr : 80px : 1,3fr do 1199px i 0,7fr : 88px : 1,3fr od 1200px. Równe pudełka
 * mają wysokość wyższej strony, a wyższa jest zawsze odpowiedź, więc każdy piksel oddany karcie
 * skraca oba pudełka naraz. Porównane na siedmiu przypadkach w obu językach (średnio):
 * przy 0,84 : 1,16 / 0,8 : 1,2 pudełko miało 176-220px, a pusty szary luz wokół pytania
 * i podpisu 129-167px; przy 0,7 : 1,3 — 159-198px i 106-135px, a od 1200px dwa przypadki
 * mieszczą chipy w jednym rzędzie. Dalej (0,65) pytanie schodziło przy 1000px do 3,4 wiersza
 * i zaczynało wyglądać na ściśnięte. Środek jest stały, a nie w vw: przy clamp(…, 13vw, …)
 * karta odczytu była przy 1440px węższa niż przy 1200px, bo hp-wrap dobija tam do swoich 1256px
 * i szerszy viewport dokładał już tylko łącznikowi. Kółko ma 38px, na kreskę zostaje po 21px
 * do 1199px i po 25px od 1200px.
 * Poniżej 900px wszystko stoi jedno pod drugim, łącznik obraca się w pion i nie ma czego
 * wyrównywać.
 */

.hp-audience-readout {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hp-audience-ask,
.hp-audience-see {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hp-audience-bubble {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #F4F5F8;
  border: 1px solid #EDEEF2;
  border-radius: 14px 14px 14px 4px;
  /* Ten sam układ dopełnień, co karta obok (16px u góry, 15px na dole) — patrz nota wyżej:
     w subgridzie dopełnienie pudełka staje się marginesem skrajnych wierszy. */
  padding: 16px 18px 15px;
}

.hp-audience-question {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  padding-bottom: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  line-height: 1.6;
  color: #262A47;
  text-wrap: pretty;
}

/* Pola szablonu w pytaniu kafla "Twoja branża" ([Twojej usługi], [Twoim mieście]): barwa
   etykiety "co widzisz w brandinai" (#4B4CD8, 5,5:1 na #F4F5F8) i druga wgrana odmiana
   Plex Mono, więc czytają się jak miejsca do wpisania własnej treści, a nie jak cytat.
   Wymiarów nie zmienia nic: ten sam krój, ten sam stopień, zwykły <span> w tekście. */
.hp-audience-q-slot {
  color: #4B4CD8;
  font-weight: 500;
}

.hp-audience-prompt-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  padding: 13px 0 0;
  border-top: 1px solid #E3E5EC;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #656B7E;
}

/* Karta odczytu. Ta sama budowa, co pudełko obok: treść rośnie i centruje się w sobie, stopka
   stoi przy dnie. */
.hp-audience-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Jeden odcień kafla dla całej strony — token --mkt-surface (blok „podłoża”
     w marketing.css). Dotąd #F7F8FE, czyli czwarty prawie-biały na stronie. */
  background: var(--mkt-surface, #FAFAFC);
  border: 1px solid #D6DAFB;
  border-radius: 14px 14px 4px 14px;
  padding: 16px 18px 15px;
}

.hp-audience-answer {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  padding-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.62;
  color: #262A47;
  text-wrap: pretty;
}

/* Odpowiedź i paski "BrandinAI pracuje" (.hp-audience-skel, widać je tylko w trakcie wejścia)
   leżą w jednej komórce siatki. Paski mają wysokość 0 i wychodzą z niej po równo w górę i w dół,
   więc wysokości odpowiedzi nie zmieniają nigdy, także przy odpowiedzi dwuwierszowej, niższej niż
   trzy paski. Reszta pasków: "ruch w odczycie" na końcu pliku. */
.hp-audience-answer > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.hp-audience-chips {
  margin: 0;
  padding: 13px 0 0;
  border-top: 1px solid #E2E5FA;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
}

@media (min-width: 900px) {
  .hp-audience-readout {
    grid-template-columns: minmax(0, 0.7fr) 80px minmax(0, 1.3fr);
    /* etykiety · treść · stopka */
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }

  .hp-audience-ask,
  .hp-audience-see {
    grid-row: 1 / span 3;
    display: grid;
    grid-template-rows: subgrid;
    /* Subgrid dziedziczy odstęp po rodzicu, a flex wyżej dawał 10px — tu musi być zero, odstęp
       pod etykietą niesie jej margines. */
    row-gap: 0;
  }

  .hp-audience-ask { grid-column: 1; }
  .hp-audience-see { grid-column: 3; }

  .hp-audience-readout .hp-audience-label {
    grid-row: 1;
    margin-bottom: 10px;
  }

  /* Oś podpisu = oś pierwszego rzędu chipów. Chip ma 27,8px (11,5 × 1,2 + 2 × 6 + 2 × 1),
     wiersz podpisu 15,75px (10,5 × 1,5), więc podpis schodzi o połowę różnicy niżej niż chipy:
     13 + (27,8 − 15,75) / 2 = 19px. */
  .hp-audience-prompt-meta {
    padding-top: 19px;
  }

  .hp-audience-bubble,
  .hp-audience-card {
    grid-row: 2 / span 2;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  /* Jedna kolumna o szerokości pudełka, a nie domyślna `auto`. Kolumna `auto` bierze minimum
     z treści, a rząd chipów w jednym wierszu ([data-fit], nowrap) ma minimum równe sumie
     chipów — przy 1024px karta rozpychała się wtedy o ~80px poza panel, zamiast oddać
     skryptowi decyzję, które chipy schodzą. */
  .hp-audience-ask,
  .hp-audience-see,
  .hp-audience-bubble,
  .hp-audience-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .hp-audience-readout {
    grid-template-columns: minmax(0, 0.7fr) 88px minmax(0, 1.3fr);
  }
}

/* Przeglądarka bez subgridu (Chrome < 117, Safari < 16) dostaje pudełka równej wysokości — obie
   kolumny rozciągają się na wiersz — z podpisem i chipami przy dnie. Włosowe linie mogą się
   tam rozejść o różnicę wysokości stopek; treść i układ zostają całe. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .hp-audience-ask,
    .hp-audience-see {
      display: flex;
      gap: 10px;
    }

    .hp-audience-readout .hp-audience-label {
      margin-bottom: 0;
    }

    .hp-audience-bubble,
    .hp-audience-card {
      display: flex;
    }

    .hp-audience-prompt-meta,
    .hp-audience-chips {
      margin-top: auto;
    }
  }
}

.hp-audience-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.2;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

/*
 * CHIPY ZAWSZE W JEDNYM RZĘDZIE. Właściciel: "żeby chipy nie robiły się na 2 linie — to
 * rozwleka te boxy; jakby były 1-liniowe zawsze, boxy byłyby delikatniejsze wizualnie". Drugi
 * rząd chipów podnosi stopkę karty, a przez subgrid także lewe pudełko — cały odczyt rośnie
 * o ~36px dla trzech słów.
 * Trzy warstwy:
 *   1. KRÓTSZE ETYKIETY (lang/{pl,en}/home_v2_audience_page.php, nota "CHIPY W JEDNYM
 *      RZĘDZIE"): od 1100px każdy komplet, w obu językach, mieści się w całości.
 *   2. CIAŚNIEJSZY CHIP W PAŚMIE 900-1199px (dopełnienie 9px zamiast 11px, przerwa 6px zamiast
 *      8px): rząd chipów ma tu 364px (1000px) do 500px (1199px), a od 1200px stałe 495px;
 *      16px na rząd przesuwa kilka kompletów z dwóch chipów na trzy. Ten sam ruch, co
 *      ciaśniejszy skład kart na głównej w 1000-1199px.
 *   Zmierzone po zmianie, jedenaście przypadków, oba języki: od 1100px trzy chipy wszędzie;
 *   1000-1099px zwykle dwa (trzy: "Twoja branża", a po angielsku też nieruchomości i sklep);
 *   akordeon z dwiema kolumnami odczytu (900-999px) trzy albo dwa; 640-899px trzy wszędzie;
 *   telefon — patrz reguła przy max-width: 640px.
 *   3. DOPASOWANIE W SKRYPCIE (js/hv-audience-page.js): rząd dostaje [data-fit], czyli
 *      nowrap, a chipy, które się nie mieszczą, schodzą OD KOŃCA — w kolejności ważności
 *      (patrz nota o kolejności wyżej) i zawsze w całości, nigdy przycięte. Schowany chip nie
 *      znika z czytnika ekranu (ukrycie wizualne, nie display: none), a barwy po pozycji się nie
 *      przesuwają, bo chip dalej jest n-tym dzieckiem. Skrypt liczy od nowa przy zmianie
 *      szerokości rzędu (ResizeObserver — łapie też otwarcie panelu) i po wczytaniu fontów.
 *      Bez skryptu rząd zawija się jak dotąd, nic nie ginie.
 * Kiedy nie mieści się nawet pierwszy chip (bardzo wąski ekran), rząd dostaje
 * [data-fit="wrap"] i ten jeden chip może złamać się w środku, zamiast wystawać z karty.
 */
.hp-audience-chips[data-fit] {
  flex-wrap: nowrap;
}

.hp-audience-chips[data-fit] > .hp-audience-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

.hp-audience-chips[data-fit="wrap"] > .hp-audience-chip {
  flex: 0 1 auto;
  white-space: normal;
}

/* Ukrycie wizualne — te same deklaracje, co .mkt-visually-hidden w marketing.css. */
.hp-audience-chips[data-fit] > .hp-audience-chip[data-off] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 900px) and (max-width: 1199px) {
  .hp-audience-chips {
    gap: 6px;
  }

  .hp-audience-chip {
    padding: 6px 9px;
  }
}

/* Po pozycji: gdzie tracisz · kontekst konkurencyjny · co masz z BrandinAI.
   Ta sama kolejność i te same barwy, co w sekcji na stronie głównej. */
.hp-audience-chip:nth-child(1) { color: #B42318; background: #FEF0EF; border: 1px solid #F1B7B1; }
.hp-audience-chip:nth-child(2) { color: #14162B; background: #FFFFFF; border: 1px solid #DEE0E8; }
.hp-audience-chip:nth-child(3) { color: #4B4CD8; background: #EEF0FE; border: 1px solid #D6DAFB; }

/* --- łącznik: znak BrandinAI między pytaniem a odczytem ---------------------
 * Między pytaniem a odpowiedzią stoi ten, kto jedno zamienia w drugie. Była tu kolejno plakietka
 * z wordmarkiem i sześcioma modelami (ścieśniała panel — właściciel kazał ją zdjąć) i goła
 * kropka (nie mówiła nic). Jest sam znak marki w białym kółku z włosową obwódką — ten sam
 * biały i ta sama obwódka, co karty na stronie — a po bokach kreskowane linie w lila #C9CCF5,
 * tym samym, co na stronie głównej.
 *
 * Od 900px łącznik zajmuje wiersze treści i stopki (bez etykiet), a pudełka są równe, więc
 * `align-self: center` kładzie kółko dokładnie w pionowym środku obu naraz. Poniżej 900px obraca
 * się w pion (reguła max-width: 899px w sekcji szerokości).
 *
 * Kropki (.hp-audience-flow-dot) są w kreskach zawsze, ale widać je tylko w trakcie wejścia,
 * które prowadzi js/hv-audience-page.js — patrz „ruch w odczycie" na końcu pliku.
 */

.hp-audience-flow {
  display: grid;
  grid-template-columns: minmax(8px, 1fr) auto minmax(8px, 1fr);
  align-items: center;
}

@media (min-width: 900px) {
  .hp-audience-flow {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
  }
}

.hp-audience-flow-line {
  position: relative;
  display: block;
  height: 0;
  border-top: 2px dashed #C9CCF5;
}

.hp-audience-flow-mark {
  position: relative;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  border: 1px solid #DEE0E8;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 22, 43, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}

/* 20 × 18,5px: znak jest szerszy niż wyższy (198 × 183), a w kółku 38px zostawia ~8px oddechu
   z każdej strony — tyle, żeby czytał się jako znak, a nie jako ikonka wciśnięta w ramkę. */
.hp-audience-flow-logo {
  display: block;
  width: 20px;
  height: auto;
}

.hp-audience-flow-dot {
  position: absolute;
  top: -5px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #5B5CE6;
  box-shadow: 0 0 0 3px rgba(91, 92, 230, 0.16);
  opacity: 0;
  pointer-events: none;
}

/* --- od czego zaczynasz ----------------------------------------------------
 * Jedna kolumna, nie trzy słupki: trzy równe kolumny czytają się jak siatka funkcji i gubią
 * kolejność, a to jest sekwencja — najpierw pierwsze, potem drugie, potem trzecie.
 *
 * Właściciel o dolnej połowie panelu: "mam wrażenie, że można by to podkręcić / ulepszyć
 * czytelność". Numer sam kolejności nie niósł — trzy szare "01 02 03" stały luzem przy krawędzi
 * i czytały się jak numeracja listy, a nie jak następstwo. Trzy rzeczy to zmieniają:
 *   · numer jest w KRĄŻKU (lila #EEF0FE w obwódce #D6DAFB), więc jest przystankiem, nie prefiksem;
 *   · między krążkami biegnie pionowa kreska — to ona robi z trzech pozycji jedną trasę;
 *   · tekst ma własny stopień i dopełnienie (szczegóły przy .hp-audience-move-text niżej).
 * Odstęp między krokami to 14px, czyli tyle, żeby kreska między krążkami była widoczna jako
 * odcinek (14px), a nie jako styk.
 */

.hp-audience-moves {
  margin: 26px 0 0;
}

.hp-audience-move-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  counter-reset: hp-move;
}

/* Krążek z numerem rysowany pseudoelementem, żeby druga linia pozycji nie wchodziła pod niego. */
.hp-audience-move-list li {
  position: relative;
  counter-increment: hp-move;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.hp-audience-move-list li::before {
  content: counter(hp-move, decimal-leading-zero);
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #EEF0FE;
  border: 1px solid #D6DAFB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  line-height: 1;
  color: #4B4CD8;
}

/* Trasa między krążkami. Zaczyna się pod krążkiem i kończy pod krążkiem następnym, więc odcinek
   ma dokładnie wysokość odstępu (14px) plus to, o ile pierwszy wiersz jest wyższy od krążka. */
.hp-audience-move-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11.5px;
  top: 26px;
  bottom: -16px;
  width: 1px;
  background: #D6DAFB;
}

/* 14px, nie 14,5px. Pisane było pod regułę "każdy krok w jednym wierszu" przy 1024px (kolumna
   tekstu ma tam 595px) i przy 14,5px dwa kroki po polsku i jeden po angielsku łamały się na drugi
   wiersz. Tej reguły już nie ma — kroki jedenastu przypadków przepisał właściciel i część z nich
   ma przy 1024px dwa wiersze (kreska między krążkami prowadzi przez nie tak samo, bo jej długość
   bierze się z wysokości pozycji) — ale stopień zostaje: wyższy wydłużyłby każdy panel.
   Czytelność bierze na siebie to, co ją tu realnie poprawia: krążek zamiast gołego numeru, kreska
   prowadząca między krokami i 14px odstępu zamiast 10px.
   BEZ OGRANICZENIA DŁUGOŚCI WIERSZA (było 78ch, ~624px). Stało, dopóki każdy krok mieścił się
   w nim w jednym wierszu, więc niczego nie łamało. Po przepisaniu kroków przy 1440px trzynaście z 33
   polskich kroków szło w nim na dwa wiersze, nieraz z dwoma słowami w drugim („nazwa hotelu.",
   „czy dojazdu."), a obok stało ~160px pustej kolumny — pod odczytem, który idzie na całą
   szerokość panelu. Bez ograniczenia przy 1440px dwa wiersze mają 3 kroki po polsku i 6 po
   angielsku, najdłuższy wiersz to 785px, czyli szerokość kolumny, dalej nie rośnie (hp-wrap
   kończy się na 1320px). Do ~1025px kolumna i tak jest węższa niż dawne 78ch (621px przy
   1024px), więc tam nic się nie zmienia. Kroki to pojedyncze zdania, nie akapity — dłuższy
   wiersz czyta się tu jak jeden rząd tabeli. */
.hp-audience-move-text {
  display: block;
  padding-top: 2px;
  font-size: 14px;
  line-height: 1.6;
  color: #4C5163;
  text-wrap: pretty;
}

/* --- pakiet na start: STOPKA panelu ----------------------------------------
 * Liczby w chipie pochodzą z presetów cennika (ConfigurablePlanPricing), a nie z tekstu, więc ten
 * kafel nie może rozjechać się z /cennik.
 *
 * To była czwarta rzecz ułożona płasko pod trzema poprzednimi: etykieta, chip z linkiem i zdanie
 * pod spodem, wszystko na tym samym białym tle, oddzielone jedną włosową linią. Czytało się jak
 * kolejny akapit, a to jest odpowiedź na ostatnie pytanie panelu ("a więc jaki pakiet?"), czyli
 * jego stopka. Teraz nią jest: sięga do krawędzi panelu (ujemne marginesy równe jego dopełnieniu),
 * stoi na #FAFAFC — tym samym podłożu, co karta odczytu wyżej — i domyka panel zaokrągleniem
 * 17px, czyli 18px promienia panelu minus 1px jego obwódki.
 *
 * Trzy części w jednym rzędzie: decyzja (etykieta + chip), jej uzasadnienie (notka) i wyjście
 * (link po prawej). Przy 1440px mają 246px / 1fr / 122px, notka dostaje przez to 445px, czyli
 * ~66 znaków — jeden wiersz u pięciu przypadków, dwa u dwóch najdłuższych.
 *
 * Panel zachowuje swoje `padding-bottom`, a stopka zjada je ujemnym marginesem: gdyby któryś
 * profil kiedyś nie miał pakietu (planCaption zwraca null dla nieznanego presetu), panel po
 * prostu kończy się dopełnieniem, a nie krawędzią tekstu.
 */

.hp-audience-plan {
  margin: 28px -32px -30px;
  border-top: 1px solid #E5E7EF;
  border-radius: 0 0 17px 17px;
  background: #FAFAFC;
  padding: 18px 32px 20px;
  display: grid;
  /* Etykieta stoi w osobnym wierszu, a chip, notka i link w jednym — inaczej notka i link
     centrowałyby się względem PARY etykieta+chip i siadały o 9px wyżej niż chip, czyli w szczelinie
     między nim a etykietą. Teraz wszystkie trzy leżą w jednym wierszu i mają jedną oś. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "label label label"
    "chip  note  link";
  align-items: center;
  column-gap: 28px;
  row-gap: 9px;
}

.hp-audience-plan-label { grid-area: label; }
.hp-audience-plan-chip { grid-area: chip; }
.hp-audience-plan-note { grid-area: note; }
.hp-audience-plan-link { grid-area: link; }

.hp-audience-plan-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border: 1px solid #D6DAFB;
  background: #EEF0FE;
  color: #14162B;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.2;
  padding: 8px 13px;
  border-radius: 999px;
}

.hp-audience-plan-link {
  justify-self: end;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: #4B4CD8;
  transition: color 0.2s ease;
}

.hp-audience-plan-link:hover {
  color: #3F40C4;
}

/* Notka mówi, CZEGO TA PERSONA potrzebuje od pakietu, więc stoi obok chipa, a nie pod nim:
   razem czytają się jak jedno zdanie "ten pakiet, bo…". */
.hp-audience-plan-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: #5F6478;
  text-wrap: pretty;
}

/* --- który panel jest otwarty ----------------------------------------------
 * Otwarty jest ten wskazany kotwicą, a gdy żadna nie jest wskazana — pierwszy. Drugiego warunku
 * nie da się zapisać bez :has(), bo CSS nie umie inaczej powiedzieć "nic nie jest :target".
 * Przeglądarka bez :has() (Firefox < 121, Safari < 15.4, Chrome < 105) dostaje wszystkie panele
 * otwarte, czyli poprzedni układ tej strony, i wtedy lewa lista znika, żeby nie stała bez funkcji.
 * Treść jest w HTML-u zawsze, niezależnie od tego, co jest otwarte.
 */

@supports not selector(:has(*)) {
  .hp-audience-dir {
    display: block;
  }

  .hp-audience-rail {
    display: none;
  }

  .hp-audience-panels {
    gap: 24px;
  }

  /* Strzałka akordeonu nie ma tu czego zapowiadać — wszystkie panele są otwarte. !important, bo
     regułę, która ją pokazuje poniżej 1000px, zapisano dalej w pliku z tą samą wagą selektora. */
  .hp-audience-panel-caret {
    display: none !important;
  }
}

@supports selector(:has(*)) {
  /* Pozycja listy odpowiadająca otwartemu panelowi. Dopasowanie po numerze pozycji, a nie po
     href, bo kotwice są inne w każdym języku, a ten arkusz jest wspólny. Przypadków jest
     jedenaście (z kaflem "Twoja branża"), dwunasta reguła stoi w zapasie: dołożenie profilu
     w pliku językowym nie wymaga wtedy ruszania CSS-u. Każdy następny — już tak. */
  .hp-audience-dir:not(:has(.hp-audience-panel:target)) .hp-audience-rail-list > li:nth-child(1) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(1):target) .hp-audience-rail-list > li:nth-child(1) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(2):target) .hp-audience-rail-list > li:nth-child(2) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(3):target) .hp-audience-rail-list > li:nth-child(3) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(4):target) .hp-audience-rail-list > li:nth-child(4) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(5):target) .hp-audience-rail-list > li:nth-child(5) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(6):target) .hp-audience-rail-list > li:nth-child(6) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(7):target) .hp-audience-rail-list > li:nth-child(7) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(8):target) .hp-audience-rail-list > li:nth-child(8) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(9):target) .hp-audience-rail-list > li:nth-child(9) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(10):target) .hp-audience-rail-list > li:nth-child(10) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(11):target) .hp-audience-rail-list > li:nth-child(11) > .hp-audience-tab,
  .hp-audience-dir:has(.hp-audience-panel:nth-child(12):target) .hp-audience-rail-list > li:nth-child(12) > .hp-audience-tab {
    /* Otwarta pozycja różni się od zamkniętych nie samym odcieniem, tylko białym tłem, lila
       obwódką, cieniem i ciemniejszą nazwą — to samo, co najechanie, plus obwódka i cień, więc
       najechana i wybrana pozycja nie wyglądają tak samo. */
    background: #FFFFFF;
    border-color: #D6DAFB;
    color: #14162B;
    box-shadow: 0 1px 2px rgba(20, 22, 43, 0.05);
  }

  /* Wybrany kafel "Twoja branża": to samo białe tło i cień, ale obwódka zostaje kreskowana
     (mocniejsza #9EA2F2), nazwa w lila, a kółko ze znakiem wypełnia się barwą akcentu. Ta sama
     waga selektora co reguła wyżej, więc wygrywa kolejnością w pliku. */
  .hp-audience-dir:has(.hp-audience-panel.is-universal:target) .hp-audience-rail-list > li.is-universal > .hp-audience-tab {
    border-color: #9EA2F2;
    color: #3F40C4;
  }

  .hp-audience-dir:has(.hp-audience-panel.is-universal:target) .hp-audience-rail-list > li.is-universal .hp-audience-plus {
    background: #5B5CE6;
    border-color: #5B5CE6;
    color: #FFFFFF;
  }

  @media (min-width: 1000px) {
    .hp-audience-panel {
      display: none;
    }

    .hp-audience-panel:target,
    .hp-audience-panels:not(:has(> .hp-audience-panel:target)) > .hp-audience-panel:first-child {
      display: block;
    }
  }

  @media (max-width: 999px) {
    .hp-audience-panel-body {
      display: none;
    }

    .hp-audience-panel:target > .hp-audience-panel-body,
    .hp-audience-panels:not(:has(> .hp-audience-panel:target)) > .hp-audience-panel:first-child > .hp-audience-panel-body {
      display: block;
    }

    /* Otwarty wiersz akordeonu dostaje lila obwódkę i obróconą strzałkę — to jedyne, co odróżnia
       go od dziesięciu zamkniętych. */
    .hp-audience-panel:target,
    .hp-audience-panels:not(:has(> .hp-audience-panel:target)) > .hp-audience-panel:first-child {
      border-color: #D6DAFB;
    }

    .hp-audience-panel:target .hp-audience-panel-caret,
    .hp-audience-panels:not(:has(> .hp-audience-panel:target)) > .hp-audience-panel:first-child .hp-audience-panel-caret {
      color: #5B5CE6;
      transform: rotate(180deg);
    }

    /* Otwarty kafel "Twoja branża" w akordeonie: obwódka zostaje kreskowana, tylko mocniejsza,
       a kółko wypełnia się — tak samo jak wybrana pozycja na liście powyżej 1000px. */
    .hp-audience-panel.is-universal:target {
      border-color: #9EA2F2;
    }

    .hp-audience-panel.is-universal:target .hp-audience-plus {
      background: #5B5CE6;
      border-color: #5B5CE6;
      color: #FFFFFF;
    }
  }
}

/* === sekcja "w każdym pakiecie" ============================================ */
/*
 * Blady kafel z ptaszkami wypadł. Właściciel: "nie pasuje to końca z całym landingiem, nagle
 * robimy jakieś podejście typu te ptaszki… może prędzej jakieś boxy jak na głównej przy
 * problemie?". Jest więc kształt sekcji .hp-problem ze strony głównej: rząd białych kart
 * z mono-numerem, a pod nimi ciemna karta z puentą i CTA.
 *
 * Chrom kart nie jest tu przepisany. Karty niosą .hp-card / .hv-card / .hp-card-n z home-v2.css
 * (layout marketingowy ładuje ten plik na każdej podstronie), więc obrys #DEE0E8, promień 16px,
 * dopełnienie 24/20 i stopnie pisma 17/14px przychodzą z tej samej definicji, co na głównej —
 * razem z jej progami: subgrid powyżej 1000px, ciaśniejszy skład w 1000–1199px i karta 264px
 * w poziomym przewijaniu poniżej 1000px. Tutaj zostaje wyłącznie to, czego strona główna nie ma:
 * siatka na PIĘĆ kart zamiast pięciu kolumn z ciemną w środku, i ciemny pas pod nimi.
 *
 * Między katalogiem a tą sekcją nie stoi już "Zakres" (powielał blok ze strony głównej), więc
 * sekcja bierze własne 88px u góry: o oczko mniej niż 96px katalogu nad nią, bo szew i tak niesie
 * zmiana tła — szare #F4F5F8 na białe. Dwa pełne dopełnienia zsumowałyby się w dziurę.
 */

.hp-audience-band {
  background: #FFFFFF;
  /* 110px góra i dół jak reszta landingu (było 88/104). */
  padding: 110px 0;
}

.hp-audience-band-head {
  max-width: 720px;
}

/* Ten sam stopień, co nagłówki pozostałych sekcji strony (.hp-audience-head h2) i co .hp-head h2
   na stronie głównej. Poprzednie 34px było stopniem nagłówka WEWNĄTRZ kafla; sekcja bez kafla
   nagłówek sekcji ma. */
.hp-audience-band-title {
  margin: 14px 0 0;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: #14162B;
  text-wrap: balance;
}

.hp-audience-band-lead {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: #4C5163;
  text-wrap: pretty;
}

/*
 * PIĘĆ KOLUMN, NIE SZEŚĆ. Kontener ma 1320px, .hp-wrap zabiera 2 x 32px, więc na rząd zostaje
 * 1256px. Przy przerwie 16px:
 *   · sześć kart → (1256 - 5 x 16) / 6 = 196px karty, a po odjęciu dopełnienia 2 x 20px
 *     zostaje 156px na tekst. Przy 14px to około 22 znaki w wierszu — połowa dolnej granicy
 *     czytelnej kolumny i o 10px mniej niż NAJWĘŻSZY stan kart problemu na głównej (166px
 *     przy 1000px). Sześć kart w rzędzie odpada na pomiar, nie na wyczucie.
 *   · pięć kart → (1256 - 4 x 16) / 5 = 238,4px karty i 196px tekstu. To co do piksela tyle
 *     samo, ile mają karty problemu na stronie głównej przy 1440px (zmierzone: karta 236px
 *     wewnętrznie, tekst 196px, pismo 14px).
 * Dlatego ciemna karta nie jest szóstą kolumną, tylko pasem pod rzędem — w tym samym kształcie,
 * w którym .hp-answer staje pasem na stronie głównej poniżej 1000px (tytuł i tekst po lewej,
 * wypełniony przycisk po prawej). Oba układy są więc z tej samej sekcji, tylko złożone inaczej.
 *
 * grid-template-rows: auto auto 1fr — trzy ścieżki pod numer, tytuł i akapit. Karty biorą je
 * przez subgrid (reguła .hp-card w home-v2.css powyżej 1000px), więc tytuły i akapity leżą
 * w rzędzie na jednej linii bez względu na to, ile wierszy ma który tytuł.
 */
.hp-audience-band-row {
  margin: 46px 0 0;
}

@media (min-width: 1000px) {
  .hp-audience-band-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: 16px;
  }
}

/* Tak samo jak na głównej: zoom .9 zaczyna się przy 1000px, gdzie karty mają ~180px, więc do
   pełnej szerokości kolumny idzie ciaśniejsza przerwa. Stopnie pisma i dopełnienie karty zmienia
   w tym paśmie samo home-v2.css. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .hp-audience-band-row {
    column-gap: 12px;
  }
}

/* Poniżej 1000px karty jadą w poziomie, dokładnie jak na stronie głównej — .hp-card dostaje tam
   flex: 0 0 264px i scroll-snap-align z home-v2.css, więc tutaj wystarczy sam pojemnik.
   4px dopełnienia trzyma cień najechania w środku pudełka, ujemny margines zostawia karty
   na krawędzi kolumny. */
@media (max-width: 999px) {
  .hp-audience-band-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    margin: 46px -4px 0;
    padding: 4px 4px 12px;
  }

  .hp-audience-band-row::-webkit-scrollbar {
    display: none;
  }
}

/* Znacznik przy tytule karty — CO DO WARTOŚCI ten sam, co <sup> przy etykiecie wiersza w tabeli
   cennika (partials/marketing/pricing/comparison.blade.php): IBM Plex Mono, 11px, grubość 600,
   vertical-align: super, margin-left 2px, #5B5CE6. Właściciel prosił wprost o „analogicznie jak
   w cenniku", więc analogia jest tu dosłowna, a nie przybliżona.
   Wcześniej stało tu 12px/400 z vertical-align: baseline, żeby <sup> nie rozpychał wiersza
   tytułu o 2px. Ten powód nie obowiązuje: rząd kart stoi na subgridzie (.hp-problem-row
   w home-v2.css), więc wiersz tytułów ma jedną wysokość dla wszystkich pięciu kart naraz
   — podniesiony znacznik nie robi z rzędu schodka, tylko dokłada te 2px wszystkim tak samo. */
.hp-audience-band-mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  /* Znacznik ma się zgadzać z pierwowzorem NA KAŻDEJ WŁAŚCIWOŚCI, także tych, których żadna
     z dwóch stron nie deklaruje wprost — bo dziedziczy je po czymś innym tu, a po czymś innym
     tam. Zmierzone na <sup> przy wierszu „Asystent AI" w cenniku: interlinia `normal` powyżej
     640px i bezjednostkowe 1.5 (16,5px przy 11px pisma) od 640px w dół, światło `normal` na
     każdej szerokości. Tytuł karty ma 1.3 i −0,015em, więc bez tych dwóch linijek znacznik
     dziedziczyłby co innego niż jego pierwowzór. Światło widać: rozsuwa dwie gwiazdki. */
  line-height: normal;
  letter-spacing: normal;
  vertical-align: super;
  color: #5B5CE6;
  margin-left: 2px;
}

/* Poniżej 641px cennik daje swojej komórce bezjednostkowe 1.5 i <sup> je dziedziczy — tutaj
   trzeba to powtórzyć wprost, bo tytuł karty ma własną interlinię. */
@media (max-width: 640px) {
  .hp-audience-band-mark { line-height: 1.5; }
}

/* Przypis pod rzędem — ten sam kształt i te same stopnie, co przypisy pod tabelą cennika
   (partials/marketing/pricing/comparison.blade.php): znacznik w stałej kolumnie 1.3em,
   8px odstępu, zdanie obok w jednej kolumnie o własnej szerokości. */
.hp-audience-band-note {
  margin: 16px 2px 0;
  max-width: 780px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #656B7E;
  text-wrap: pretty;
}

.hp-audience-band-note-mark {
  flex: 0 0 auto;
  min-width: 1.3em;
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  color: #5B5CE6;
}

/*
 * Ciemny pas. Kolory, promień i stopnie pisma jak w .hp-answer na stronie głównej (#14162B,
 * 16px, tytuł 17px na bieli, tekst 14px w #B8BBD6) — żeby to była ta sama karta, tylko położona
 * poziomo. Tekst ma własne 760px maksimum: pas idzie przez całe 1256px i bez ograniczenia
 * zdanie ciągnęłoby się na ponad 120 znaków.
 */
.hp-audience-band-final {
  margin: 24px 0 0;
  background: #14162B;
  border-radius: 16px;
  /* 22/24/22/28 — co do piksela tyle, ile ma pierwowzór, czyli .hp-answer w postaci paska na
     stronie głównej poniżej 1000px (home-v2.css). Było 26/28/26/32. */
  padding: 22px 24px 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}

.hp-audience-band-final-text {
  min-width: 0;
  max-width: 760px;
}

.hp-audience-band-final-text h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #FFFFFF;
  text-wrap: balance;
}

.hp-audience-band-final-text p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #B8BBD6;
  text-wrap: pretty;
}

/* Obrys ogniskowania jak w ciemnym domknieciu strony glownej (.hp-final-btn): globalne
   #5B5CE6 z marketing.css ma na #14162B za maly kontrast. */
.hp-audience-band-final-cta:focus-visible {
  outline: 2px solid #9EA2F2;
  outline-offset: 3px;
}

.hp-audience-band-final-cta {
  flex: 0 0 auto;
  display: block;
  background: #5B5CE6;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
  text-align: center;
  white-space: nowrap;
}

/* === szerokości ============================================================ */

/*
 * Progi katalogu (1000 i 900px) stoją przy samym katalogu, bo są jego częścią, a nie korektą
 * szerokości. Tutaj zostaje reszta strony i to, co katalog musi zmienić, kiedy przestaje być
 * dwiema kolumnami.
 */

/*
 * 1000px — tam, gdzie marketing.css włącza `body { zoom: .9 }`. Powyżej strona dostaje ~11%
 * miejsca w układzie ponad szerokość okna; poniżej nie ma już zapasu i wszystko idzie jedną
 * kolumną. Zmierzone przy 900px w wersji dwukolumnowej: prawa kolumna schodziła do ~596px,
 * a chipy i kroki paska "jak to działa" stały w słupkach po ~250px.
 */
@media (max-width: 999px) {
  /* Katalog zamienia się w akordeon: lista znika, a jej rolę przejmują nagłówki paneli. */
  .hp-audience-dir {
    display: block;
  }

  .hp-audience-rail {
    display: none;
  }

  /* Lista znika, więc jej pojemnik nie ma czego trzymać przy przewijaniu. */
  .hp-audience-side {
    position: static;
  }

  .hp-audience-panel {
    padding: 0;
  }

  /* Cały wiersz jest celem stuknięcia, więc dopełnienie siedzi na nim, a nie na panelu.
     44px wysokości minimum to próg wielkości celu dotykowego. */
  .hp-audience-panel-head {
    align-items: center;
    gap: 12px;
    padding: 17px 22px;
    min-height: 44px;
  }

  .hp-audience-panel-name {
    flex: 1 1 auto;
    font-size: 16.5px !important;
  }

  /* W akordeonie nagłówek panelu JEST pozycją listy, więc kafel "Twoja branża" dostaje tu to,
     co jego pozycja na liście powyżej 1000px: lila nazwę (kreskowana obwódka i znak "+" stoją
     przy panelu na każdej szerokości). Kółko 18px, jak na liście — tytuł ma tu 16,5px. */
  .hp-audience-panel.is-universal .hp-audience-panel-head {
    color: #4B4CD8;
  }

  .hp-audience-panel.is-universal .hp-audience-panel-head:hover {
    color: #3F40C4;
  }

  .hp-audience-panel.is-universal .hp-audience-plus {
    width: 18px;
    height: 18px;
  }

  .hp-audience-panel-caret {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    color: #9AA0B4;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .hp-audience-panel-body {
    padding: 0 22px 24px;
  }

  .hp-audience-who {
    margin-top: 2px;
  }

  /* Stopka pakietu dalej sięga do krawędzi panelu, tylko dopełnienie jest tu inne: w akordeonie
     niesie je .hp-audience-panel-body (0 22px 24px), a nie sam panel. */
  .hp-audience-plan {
    margin: 26px -22px -24px;
  }

  .hp-audience-how-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

}

/*
 * 900px — wnętrze panelu. Odczyt trzymał dwie kolumny do 291px każda na 768px, czyli mono-dymek
 * łamał się po dwóch słowach; trzy kroki schodziły do 199px. Poniżej tego progu jedno pod drugim.
 */
@media (max-width: 899px) {
  .hp-audience-readout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Łącznik obraca się w pion: kreska nad kółkiem i pod nim. Dokładnie tak samo robi to sekcja
     na stronie głównej poniżej 1000px (.hp-aud-flow w home-v2.css). 22px kreski, bo przy
     krótszej kropka w trakcie wejścia przeskakiwała, zamiast przejechać. */
  .hp-audience-flow {
    justify-self: center;
    width: 100%;
    padding: 8px 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 22px auto 22px;
    justify-items: center;
  }

  .hp-audience-flow-line {
    width: 0;
    height: 100%;
    border-top: 0;
    border-left: 2px dashed #C9CCF5;
  }

  .hp-audience-flow-dot {
    top: -4px;
    left: -5px;
  }

  /* Węższy chip kupuje rządowi zapas. Przy 768px rząd ma 620px, a najdłuższe komplety po
     skróceniu etykiet (dział marketingu po polsku i po angielsku) ~455px — trzy chipy stoją
     w rzędzie z zapasem aż do 640px. */
  .hp-audience-chip {
    padding: 6px 10px;
  }
}

/* Telefon. marketing.css centruje tu nagłówki sekcji i narzuca im 60px dopełnienia, więc
   otoczenie nagłówka centruje się razem z nim, a bloki, które nie są sekcjami, dostają własny
   rytm ręcznie. */
@media (max-width: 640px) {
  .hp-audience-hero {
    padding-top: 60px !important;
    padding-bottom: 0 !important;
  }

  /* marketing.css chowa tu <br> w nagłówkach, więc druga, fioletowa część tytułu dopisywała się
     do pierwszej i łamała w środku: przy 390px „Bądź" zostawało na końcu wiersza z „pytają AI.",
     a reszta schodziła niżej (po angielsku „Be the" / reszta). Jako blok zaczyna własny wiersz,
     tak jak na desktopie, a text-wrap: balance z h1 równa jej wiersze („Bądź tym, / kogo AI
     poleca", „Be the one / AI recommends" przy 390px).
     inline-block nie wystarczał: przy 640px „AI." przechodziło wtedy do fioletowego wiersza. */
  .hp-audience-title .mkt-accent {
    display: block;
  }

  .hp-audience-cta {
    gap: 10px;
  }

  /* Dwa przyciski obok siebie mają na 390px po ~150px i łamią etykiety; jeden pod drugim
     czyta się jak para, a nie jak resztka rzędu. */
  .hp-audience-btn,
  .hp-audience-ghost {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hp-audience-how {
    margin-top: 44px;
    padding: 26px 0;
  }

  .hp-audience-how .hp-wrap {
    padding: 0 20px;
  }

  .hp-audience-head {
    text-align: center;
  }

  .hp-audience-dir {
    margin-top: 28px;
  }

  .hp-audience-panel-head {
    padding: 15px 18px;
  }

  .hp-audience-panel-body {
    padding: 0 18px 20px;
  }

  .hp-audience-bubble,
  .hp-audience-card {
    padding: 14px 15px 13px;
  }

  .hp-audience-question {
    padding-bottom: 12px;
    font-size: 12.5px;
  }

  .hp-audience-prompt-meta {
    padding-top: 12px;
  }

  .hp-audience-answer {
    font-size: 14px;
  }

  /* Stopka pakietu: jedna kolumna, bo na 390px rząd trzech części zszedłby do ~90px na część.
     Dopełnienie panelu jest tu 18px po bokach i 20px pod spodem. */
  .hp-audience-plan {
    margin: 24px -18px -20px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "chip"
      "note"
      "link";
    padding: 16px 18px 18px;
    row-gap: 10px;
  }

  .hp-audience-plan-link {
    justify-self: start;
  }

  /* Tylko bez skryptu: chip może się tu złamać w środku, bo z nowrap pojedynczy dłuższy chip
     nie ma jak zmaleć i rozpycha panel w poziomie. Ze skryptem rząd ma [data-fit] (reguły przy
     .hp-audience-chip wyżej): chipy stoją w jednym rzędzie, a te, które się nie mieszczą,
     schodzą od końca.
     Dopełnienie 8px i przerwa 6px (zamiast 10px i 8px), stopień bez zmian: karta ma przy
     390px 280px w środku i te 10px przesuwa większość par pierwszych dwóch chipów z jednego
     chipa na dwa. Zmierzone przy 390px: dwa chipy w każdym przypadku poza enterprise po
     polsku i "Marketing team" po angielsku (tam jeden, brakuje 2-10px); przy 320px jeden.
     Mniejszy stopień nie pomagał: przy 11px Plex Mono ma w Chrome na Linuksie zaokrąglony krok
     znaku (7px zamiast 6,6px), czyli szerszy niż przy 11,5px. */
  .hp-audience-chips {
    gap: 6px;
  }

  .hp-audience-chip {
    padding: 6px 8px;
    white-space: normal;
  }

  /*
   * Ciemny pas na telefonie: tytul, zdanie i przycisk jedno pod drugim, przycisk na pelna
   * szerokosc — dokladnie tak, jak .hp-answer na stronie glownej ponizej 760px.
   * Kropki nad "i" w naglowku glowy sekcji stawia marketing.css: przy 640px srodkuje
   * `section h2` i element stojacy przed nim, czyli kicker. Lead zostaje do lewej —
   * tak samo jak lead sekcji problemu na stronie glownej i lead katalogu na tej stronie.
   */
  .hp-audience-band-final {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    /* Jak .hp-answer poniżej 760px na stronie głównej: 22px 20px. Było 24px 20px. */
    padding: 22px 20px;
  }

  .hp-audience-band-final-cta {
    white-space: normal;
  }
}

/* === wejście =============================================================== */
/*
 * Tylko hero, czyli to, co i tak jest na ekranie w chwili wejścia. Stan końcowy jest stanem
 * domyślnym: bez JS i przy prefers-reduced-motion (marketing.css wyłącza wtedy animacje globalnie)
 * strona wygląda identycznie, po prostu bez ruchu.
 */

@media (prefers-reduced-motion: no-preference) {
  .hp-audience-hero .hp-wrap > * {
    animation: hp-audience-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}

@keyframes hp-audience-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* =============================================================================
 * RUNDA „BEZ PLAKIETKI, Z PRZYCISKIEM" (właściciel, przed wdrożeniem)
 *
 * 1. Odczyt w panelu: kafel z logo BrandinAI i sześcioma modelami między pudełkami wyszedł —
 *    „robi się jeszcze ciaśniej; dać tak jak na głównej, tylko bez brandinai i modele". Potem
 *    goła kropka ustąpiła samemu znakowi marki w kółku, a --hpa-band / --hpa-tail — subgridowi.
 *    Reguły odczytu i łącznika stoją już w jednym miejscu, w sekcji odczytu wyżej.
 * 2. Stopka pakietu: nazwa i skala pakietu, znaki modeli i przycisk po prawej zamiast notki
 *    i linku tekstowego.
 * ============================================================================= */
.hp-audience-plan {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "spec  cta";
}
.hp-audience-plan-spec {
  grid-area: spec;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
}
.hp-audience-plan-marks { display: inline-flex; align-items: center; gap: 7px; }
.hp-audience-plan-mark { width: 16px; height: 16px; display: block; }
.hp-audience-plan-cta {
  grid-area: cta;
  justify-self: end;
  white-space: nowrap;
  background: #5B5CE6;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
}
.hp-audience-plan-cta:focus-visible { outline: 2px solid #5B5CE6; outline-offset: 3px; }
@media (max-width: 640px) {
  .hp-audience-plan {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "spec"
      "cta";
  }
  .hp-audience-plan-cta { justify-self: stretch; text-align: center; }
}

/* "Zobacz więcej →" w stopce pakietu (tylko hub, tylko tam, gdzie przypadek ma podstronę):
   link tekstowy na lewo od "Porównaj pakiety", nie drugi przycisk. Wygląd bierze z linku pod
   przyciskiem w cenniku (.hv-link.mkt-cnk-compare w marketing.css: akcent, 600, podkreślenie,
   ciemniejszy przy najechaniu); tu tylko miejsce w siatce, stopień przycisku obok i nowrap,
   żeby strzałka nie spadła sama. Na telefonie przycisk ma całą szerokość, więc link schodzi
   pod niego, wyśrodkowany — tak samo, jak w cenniku stoi pod swoim przyciskiem. */
.hp-audience-plan.has-more {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "label label label"
    "spec  more  cta";
  column-gap: 22px;
}
.hp-audience-plan-more {
  grid-area: more;
  justify-self: end;
  white-space: nowrap;
  font-size: 13.5px;
}
.hp-audience-plan-more:focus-visible { outline: 2px solid #5B5CE6; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 640px) {
  .hp-audience-plan.has-more {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "spec"
      "cta"
      "more";
  }
  .hp-audience-plan-more { justify-self: center; padding: 2px 0; }
}

/* Stopka kafla "Twoja branża": ta sama rama co stopka pakietu — podłoże #FAFAFC, linia u góry,
   zaokrąglenie, dopełnienie i przycisk po prawej — tylko bez chipa pakietu i znaków modeli,
   bo bez branży nie ma czego polecić. Zostają dwie rzeczy w jednym rzędzie: etykieta po lewej
   (ten sam styl, co "pakiet na start" u rodzeństwa) i przycisk do darmowego audytu po prawej,
   na jednej osi. Dwie klasy, żeby wygrać z regułami .hp-audience-plan wyżej, także z tą
   z max-width: 640px. */
.hp-audience-plan.is-audit {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label cta";
}
.hp-audience-plan.is-audit .hp-audience-plan-label { align-self: center; }

/* Wyróżnienie kafla "Twoja branża" w stopce: lila podłoże #EEF0FE (to samo, co chip pakietu
   u rodzeństwa i krążki kroków) zamiast szarego, linia #D6DAFB i etykieta w barwie akcentu.
   Przycisk do audytu jest jedynym CTA tego kafla i stoi teraz na tle, które go niesie, a nie
   obok niego. Linia u góry zostaje ciągła: kreska jest obwódką kafla, nie jego podziałem. */
.hp-audience-panel.is-universal .hp-audience-plan.is-audit {
  background: #EEF0FE;
  border-top-color: #D6DAFB;
}
.hp-audience-panel.is-universal .hp-audience-plan.is-audit .hp-audience-plan-label { color: #4B4CD8; }
@media (max-width: 640px) {
  .hp-audience-plan.is-audit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "cta";
  }
}

/* Przypisy pod piątką „w każdym pakiecie": '*' przy konkurentach, '**' przy BIA — ten sam
   kształt, co pod tabelą cennika (znacznik w stałej kolumnie, zdanie obok). */
.hp-audience-band-notes { margin: 14px 0 0; display: grid; gap: 4px; }
.hp-audience-band-notes .hp-audience-band-note { margin: 0; }
.hp-audience-band-notes .hp-audience-band-note { max-width: none; }

/* === ruch w odczycie ======================================================= */
/*
 * Wejście odczytu w otwartym przypadku — ten sam przebieg i ten sam język, co sekcja "Dla kogo"
 * na stronie głównej (home-v2.css, [data-phase] i .hp-aud-skel):
 *   wait   — odczyt czeka poza ekranem: pytanie puste (ale na swoim miejscu), karta pusta;
 *   ask    — pytanie pisze się znak po znaku, z karetką;
 *   in     — kropka jedzie po lewej kresce do znaku BrandinAI;
 *   pulse  — znak pulsuje (fala wokół kółka);
 *   out    — kropka jedzie po prawej kresce do karty;
 *   answer — odpowiedź pisze się słowo po słowie, z karetką;
 *   done   — chipy dochodzą po kolei.
 * Atrybut [data-hpa] ustawia WYŁĄCZNIE skrypt i zdejmuje go na końcu, więc wszystko poniżej
 * dotyczy tylko trwającego wejścia. Bez JS, przy prefers-reduced-motion i na wydruku odczyt stoi
 * gotowy.
 *
 * KARTA STOI OD PIERWSZEJ KLATKI. Właściciel: "jak się zaczyna animacja, to box po prawej nie
 * jest totalnie widoczny, a na głównej jest, ale pusty, jakby generowały się w nim dane - to
 * rozwiązanie z głównej jest lepsze". Karta nie znika już przez opacity i nie osiada: obwódka,
 * tło i etykieta są na miejscu cały czas, a w środku stoi stan "BrandinAI pracuje", ten sam co
 * na głównej — trzy migające paski (#E3E7FA, 9px, co 10px, trzeci na 58%) w miejscu odpowiedzi
 * i szare pigułki w miejscu chipów. Paski znikają, kiedy zaczyna się pisać odpowiedź, pigułki,
 * kiedy dochodzą chipy.
 * Pigułki to same chipy w szarym przebraniu, a nie osobne kształty, jak na głównej (tam mają
 * stałe 132/106/120px): mają dokładnie szerokość chipa, który w nich wyląduje, a skrypt
 * dopasowania z pierwszego bloku js/hv-audience-page.js liczy je jak zawsze, bo wymiary chipa się
 * nie zmieniają — zmienia się tylko barwa.
 *
 * BEZ PRZESUNIĘĆ UKŁADU. Nic tu nie zmienia wymiarów: pytanie i odpowiedź nie są skracane, tylko
 * dzielone na część napisaną i resztę z visibility: hidden (.hp-audience-rest). Reszta zajmuje
 * dokładnie swoje miejsce, więc tekst ma przez cały czas swoją końcową liczbę wierszy i łamie się
 * w tych samych miejscach. To drugie trzyma skrypt, nie arkusz: text-wrap: pretty Chrome stosuje
 * tylko wtedy, gdy granica napisane/reszta nie wypada na spacji łamania i reszta nie jest pusta
 * (pomiar i sposób przy type() w js/hv-audience-page.js). Pola szablonu kafla "Twoja branża"
 * piszą się od razu w swoim kolorze, bo obie części są wycinkami tych samych węzłów, a nie gołym
 * tekstem. Paski mają wysokość 0 (reguła przy .hp-audience-answer wyżej), a pigułki wymiary chipów.
 * Karetka to box-shadow napisanej części, a nie osobny element: element w środku wyrazu dawałby
 * przeglądarce nowe miejsce łamania wiersza, a obwódka z ujemnym marginesem przy body{zoom:.9}
 * zaokrąglała się do innej szerokości niż margines. Cień nie ma szerokości w układzie wcale.
 */

.hp-audience-skel {
  display: none;
}

.hp-audience-rest {
  visibility: hidden;
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Paski w miejscu odpowiedzi — do chwili, w której zaczyna się ją pisać. */
  .hp-audience-readout[data-hpa]:not([data-hpa="answer"]):not([data-hpa="done"]) .hp-audience-skel {
    align-self: center;
    height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .hp-audience-skel i {
    display: block;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #E3E7FA;
    animation: hp-audience-shimmer 1.5s ease-in-out infinite;
  }

  .hp-audience-skel i:nth-child(2) { animation-delay: 0.15s; }
  .hp-audience-skel i:nth-child(3) { width: 58%; animation-delay: 0.3s; }

  /* Pigułki w miejscu chipów — do fazy "done". */
  .hp-audience-readout[data-hpa]:not([data-hpa="done"]) .hp-audience-chip {
    color: transparent;
    background: #E3E7FA;
    border-color: #E3E7FA;
    animation: hp-audience-shimmer 1.5s ease-in-out infinite;
  }

  .hp-audience-readout[data-hpa]:not([data-hpa="done"]) .hp-audience-chip:nth-child(2) { animation-delay: 0.15s; }
  .hp-audience-readout[data-hpa]:not([data-hpa="done"]) .hp-audience-chip:nth-child(3) { animation-delay: 0.3s; }

  /* Chipy lądują jak na głównej: 0,35s, co 90ms. */
  .hp-audience-readout[data-hpa="done"] .hp-audience-chip {
    animation: hp-audience-chip 0.35s ease-out backwards;
  }

  .hp-audience-readout[data-hpa="done"] .hp-audience-chip:nth-child(2) { animation-delay: 0.09s; }
  .hp-audience-readout[data-hpa="done"] .hp-audience-chip:nth-child(3) { animation-delay: 0.18s; }

  .hp-audience-readout[data-hpa="ask"] .hp-audience-q > .hp-audience-typed,
  .hp-audience-readout[data-hpa="answer"] .hp-audience-a > .hp-audience-typed {
    box-shadow: 1px 0 0 #5B5CE6;
    animation: hp-audience-caret 0.9s steps(1) infinite;
  }

  .hp-audience-readout[data-hpa="in"] .hp-audience-flow-line:first-child .hp-audience-flow-dot,
  .hp-audience-readout[data-hpa="out"] .hp-audience-flow-line:last-child .hp-audience-flow-dot {
    animation: hp-audience-travel 0.56s ease-in-out forwards;
  }

  /* Fala trwa przez fazę "pulse" i "out" — ta sama animacja w obu, więc przeglądarka jej nie
     restartuje przy zmianie fazy, tylko pozwala jej wybrzmieć, kiedy kropka już jedzie dalej. */
  .hp-audience-readout[data-hpa="pulse"] .hp-audience-flow-mark,
  .hp-audience-readout[data-hpa="out"] .hp-audience-flow-mark {
    border-color: #D6DAFB;
    animation: hp-audience-pulse 0.7s ease-out;
  }
}

/* Poniżej 900px kreski są pionowe, więc kropka jedzie z góry na dół. */
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .hp-audience-readout[data-hpa="in"] .hp-audience-flow-line:first-child .hp-audience-flow-dot,
  .hp-audience-readout[data-hpa="out"] .hp-audience-flow-line:last-child .hp-audience-flow-dot {
    animation-name: hp-audience-travel-v;
  }
}

@keyframes hp-audience-caret {
  50% { box-shadow: 1px 0 0 transparent; }
}

/* Ten sam oddech, co hp-aud-shimmer na głównej. */
@keyframes hp-audience-shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes hp-audience-travel {
  from { left: -4px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  to { left: calc(100% - 4px); opacity: 0; }
}

@keyframes hp-audience-travel-v {
  from { top: -4px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  to { top: calc(100% - 4px); opacity: 0; }
}

@keyframes hp-audience-pulse {
  0% { box-shadow: 0 1px 2px rgba(20, 22, 43, 0.05), 0 0 0 0 rgba(91, 92, 230, 0.32); transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { box-shadow: 0 1px 2px rgba(20, 22, 43, 0.05), 0 0 0 12px rgba(91, 92, 230, 0); transform: scale(1); }
}

@keyframes hp-audience-chip {
  from { opacity: 0; transform: translateY(6px); }
}

/* Siatka bezpieczeństwa: gdyby skrypt zdążył ustawić fazę, a użytkownik ma ograniczony ruch
   albo drukuje stronę, odczyt i tak stoi gotowy. Paski i pigułki są wyżej tylko pod
   (prefers-reduced-motion: no-preference) na ekranie, więc tu ich nie ma; zostaje reszta tekstu
   i kropki. Skrypt przy reduced motion w ogóle nie rusza. */
@media print, (prefers-reduced-motion: reduce) {
  .hp-audience-rest {
    visibility: visible !important;
  }

  .hp-audience-flow-dot {
    display: none !important;
  }
}