/* poza-horyzont.css - wspólny arkusz sekcji Poza Horyzont (17.10.2026):
   strona główna sekcji (poza-horyzont.html), pełny opis inicjatywy
   (poza-horyzont-o-inicjatywie.html) i podstrony materiałów (poza-horyzont-<slug>.html).
   Ładuje się PO styles.css, więc nadpisuje jego warstwę .ph-* (fioletową, z pastylkami).
   Część 1 = dawny inline <style> strony (układ manifestu), część 2 = podstrony.

   UKŁAD (15.10.2026): raport badawczy, nie strona produktu. Sekcje to
   pełnoszerokie pasy (biały / jasny / ciemny) jak na stronie konferencji,
   zamiast białych zaokrąglonych pudeł. Jedyny motyw graficzny to linia
   horyzontu - linia pozioma: włosowe linie dzielą wiersze, krótka kreska
   w kolorze akcentu oznacza zdania kluczowe, a grubość linii rośnie z głębokością
   horyzontu (H1 → H3). Bez kart, ikon, pastylek i rozstrzelonych wersalików. */
:root{
  /* AKCENT SEKCJI = NIEBIESKI (15.10.2026, decyzja użytkownika; pasuje do zdjęcia w hero).
     Nadpisuje fioletowe tokeny --ph ze styles.css na stronach sekcji (tylko one ładują
     ten arkusz) - baner „Poza Horyzont” na stronie konferencji zostaje fioletowy.
     Kontrasty: biały na --ph 5,17:1, --ph-ink na bieli 6,70:1 (na jasnym 6,26:1),
     --ph-light na granacie 10,44:1. */
  --ph:        #2563eb;
  --ph-dark:   #1d4ed8;
  --ph-darker: #1e3a8a;
  --ph-light:  #93c5fd;
  --ph-ink:    #1d4ed8;
  --ph-rgb:    37,99,235;
  --ink-2: #334155;                    /* tekst drugiego planu - 10,3:1 na bieli */
  --on-dark: rgba(255,255,255,.74);
  --on-dark-hair: rgba(255,255,255,.14);
  --gap-cols: clamp(2rem, 5vw, 5rem);
}
/* styles.css daje html,body{overflow-x:hidden} - body staje się wtedy kontenerem
   przewijania i position:sticky (nagłówki horyzontów i hipotez) nie działa.
   clip przycina tak samo, ale bez kontenera przewijania (jak na stronie konferencji). */
html, body{overflow-x:clip;}
/* Długie słowa (np. „odpowiedzialnością”) przy powiększonym tekście łamią się zamiast wychodzić poza ekran. */
main{overflow-wrap:break-word;}

/* NAV - oś --w-wide jak na stronie głównej i konferencji.
   Pasek #topNav pozycjonuje styles.css. Lokalna reguła nav{} obejmowałaby każdy <nav>
   (np. ścieżkę nawigacji .ph-crumb na podstronach) - celowo jej tu nie ma. */
.nav-inner{max-width:var(--w-wide); padding:.75rem 1.5rem; width:100%; min-width:0;}
@media (max-width: 399.98px){ .nav-inner{padding-left:1rem; padding-right:1rem;} }
@media (hover:hover){.nav-links a:hover{color:var(--dark);background:rgba(29,78,216,.1)}}
@media (prefers-reduced-motion: reduce){ .hamburger span{transition:none;} }
@media (hover:hover){.btn.submit:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-cta-hover) !important;}}
@media (max-width: 899.98px){
  .nav-links{display:none}
  .hamburger{display:flex}
}
/* Menu mobilne: nieprzezroczysta szuflada do dołu ekranu (jak na stronie głównej i konferencji).
   Wspólna wersja ze styles.css (98% bieli + rozmycie) przepuszczała biały tytuł hero.
   Pozycjonowanie zostaje absolutne względem paska: #topNav ma backdrop-filter, więc
   position:fixed liczyłby się od paska, a nie od ekranu. */
.mobile-menu{
  background:#ffffff; -webkit-backdrop-filter:none; backdrop-filter:none;
  height:calc(100vh - var(--nav-h) + 2px); height:calc(100dvh - var(--nav-h) + 2px); max-height:none; /* +2px: --nav-h jest zaokrąglone */
  overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--border);
}

/* PASY SEKCJI */
section{scroll-margin-top:calc(var(--nav-h) + 20px);}
.sec{padding:var(--sec-standard) 0;}
.sec--white{background:#ffffff;}
.sec--light{background:var(--bg-light);}
.sec--dark{background:var(--dark); color:#ffffff;}
.sec--join{padding-top:0;}            /* dalszy ciąg poprzedniego pasa */
@media (max-width: 639.98px){
  .sec{padding:var(--sec-compact) 0;}
  .sec--join{padding-top:0;}
}
.container{max-width:var(--w-wide); margin:0 auto; padding:0 1.5rem;}
@media (max-width: 399.98px){ .container{padding:0 1rem;} }

.section-title{
  font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700;
  font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.03em;
  color:var(--dark); margin:0 0 1.5rem; text-align:left; text-wrap:balance;
}
.section-title--sm{font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.15;}
.sec--dark .section-title{color:#ffffff;}

/* Nagłówek sekcji: tytuł z lewej, tekst wprowadzający z prawej (oś 5/7). */
.ph-head{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--gap-cols); align-items:start; margin-bottom:clamp(2.5rem, 5vw, 3.5rem);}
.ph-head .section-title{margin:0;}
.ph-lead{margin:0 0 1rem; max-width:64ch; font-size:var(--fs-lg); line-height:1.7; color:var(--ink-2);}
.ph-lead:last-child{margin-bottom:0;}
.ph-lead strong{color:var(--dark); font-weight:700;}
@media (max-width: 1023.98px){ .ph-head{grid-template-columns:minmax(0,1fr); row-gap:1.25rem;} }

/* Układ dwukolumnowy z krótkim, przyklejonym nagłówkiem po lewej. */
.ph-split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--gap-cols); align-items:start;}
.ph-split__aside .section-title{margin:0;}
.ph-split__body{min-width:0;}
@media (min-width: 1024px){ .ph-split__aside--sticky{position:sticky; top:calc(var(--nav-h) + 1.5rem);} }
@media (max-width: 1023.98px){
  .ph-split{grid-template-columns:minmax(0,1fr);}
  .ph-split__aside{margin-bottom:1.5rem;}
}

/* PROZA */
.ph-prose{max-width:66ch;}
.ph-prose p{color:var(--dark); font-size:var(--fs-lg); line-height:1.75; margin:0 0 1.25rem;}
.ph-prose p:last-child{margin-bottom:0;}
.ph-prose strong{font-weight:700;}

/* ZDANIE KLUCZOWE - wyróżnione krojem i rozmiarem, nie tłem.
   Krótka fioletowa kreska nad nim to ten sam motyw horyzontu. */
.ph-hypo__key, .ph-note{margin:2rem 0; padding:0; background:none; border:0;}
.ph-hypo__key::before, .ph-note::before{content:''; display:block; width:2.5rem; height:2px; background:var(--ph); margin-bottom:1rem;}
.ph-hypo .ph-hypo__key p, .ph-note p{
  margin:0; max-width:34ch; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:500;
  font-size:clamp(1.3rem, 2vw, 1.6rem); line-height:1.35; letter-spacing:-.015em; color:var(--dark); text-wrap:pretty;
}
.ph-note strong{font-weight:inherit;}
.ph-hypo .ph-hypo__key--long p{max-width:none; font-size:var(--fs-xl); line-height:1.5;}

/* Krótka kreska horyzontu jako znacznik wiersza listy. */
.ph-checks li, .ph-hypo ul li{position:relative; padding-left:1.9rem;}
.ph-checks li::before, .ph-hypo ul li::before{content:''; position:absolute; left:0; width:1rem; height:2px; background:var(--ph);}

/* ---------- HERO: wschód nad krzywizną planety ----------
   Źródło: zdjecia/horyzont.jpg (5200x3528, dostarczone 15.10.2026). Pliki ph-horyzont-*
   to kadr 2,34:1 z linią horyzontu na 85% wysokości - rozbłysk leży przy dolnej
   krawędzi hero, POD tekstem. To samo zdjęcie mają wszystkie strony sekcji (podstrony
   w niższym wariancie .ph-hero--page) - wspólny znak rozpoznawczy.
   Przesłona zostawia ciemną lewą stronę pod tekstem, prawa odsłania zdjęcie. */
.ph-hero{text-align:left; padding:calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(5.5rem, 11vw, 10rem);}
.ph-hero__bg{
  --ph-hero-ov: linear-gradient(90deg, rgba(11,17,32,.78) 0%, rgba(11,17,32,.5) 45%, rgba(11,17,32,.15) 100%);
  background-color:#0b1120;
  background-image:var(--ph-hero-ov), url('ph-horyzont-1280.jpg');
  background-image:var(--ph-hero-ov), image-set(url('ph-horyzont-1280.webp') type('image/webp'), url('ph-horyzont-1280.jpg') type('image/jpeg'));
  background-size:cover; background-position:center bottom; background-repeat:no-repeat;
}
@media (min-width: 1280px){
  .ph-hero__bg{background-image:var(--ph-hero-ov), image-set(url('ph-horyzont-1920.webp') type('image/webp'), url('ph-horyzont-1280.jpg') type('image/jpeg'));}
}
/* Jedna kolumna: przesłona pionowa (tekst biegnie przez całą szerokość). Pas 55-80%
   to wysokość cytatu - tam przesłona musi trzymać kontrast >= 4,5:1 nad rozbłyskiem. */
@media (max-width: 1023.98px){
  .ph-hero__bg{--ph-hero-ov: linear-gradient(180deg, rgba(11,17,32,.78) 0%, rgba(11,17,32,.66) 55%, rgba(11,17,32,.62) 80%, rgba(11,17,32,.15) 100%); background-position:50% bottom;}
}
/* Zdjęcie wnosi własną linię horyzontu - rysowana dalsza linia (::before) byłaby jej
   dublerem i przecinałaby tytuł. Dolna krawędź hero (::after) zostaje jako sygnatura sekcji. */
.ph-hero__bg::before{display:none;}
.ph-hero__bg::after{background:linear-gradient(90deg, transparent, rgba(147,197,253,.7) 20%, rgba(147,197,253,.7) 80%, transparent); box-shadow:0 0 14px 1px rgba(var(--ph-rgb),.23);}
.ph-hero__inner{max-width:var(--w-wide); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--gap-cols); align-items:end;}
.ph-eyebrow{
  display:flex; align-items:center; gap:.85rem; margin:0 0 1.35rem; padding:0;
  background:none; border:0; border-radius:0;
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.22em; color:rgba(255,255,255,.88);
}
/* Kreska w kolorze akcentu tytułu (jak na konferencji, szkoleniu i w Hubie). */
.ph-eyebrow::before{content:''; width:28px; height:2px; background:#f04747; flex:none;}
.ph-hero h1{margin:0 0 1.25rem; letter-spacing:-.04em; text-shadow:none; text-wrap:balance;}
/* „Poza Horyzont” w czerwieni „&” z hero konferencji (16.10.2026, decyzja użytkownika).
   #f04747 na granacie 5,1:1. */
.ph-hero h1 .ph-hero__accent{color:#f04747;}
.ph-hero__lead{margin:0; max-width:none; color:rgba(255,255,255,.9);}
/* Przyciski w hero strony głównej sekcji (17.10.2026): materiały mają być widoczne od razu. */
.ph-hero__actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem;}
.ph-hero__actions .btn{white-space:normal; text-align:center;}
.ph-hero__quote{
  margin:0; padding-top:1.25rem; border-top:1px solid rgba(147,197,253,.4);
  color:rgba(255,255,255,.8); font-size:var(--fs-lg); line-height:1.65;
}
@media (max-width: 1023.98px){ .ph-hero__inner{grid-template-columns:minmax(0,1fr); row-gap:2.25rem;} }

/* ---------- 1. WARSZTAT: stary rytm → jego przerwanie ---------- */
.ph-litany{
  margin:clamp(2.5rem, 5vw, 3.75rem) 0 0; max-width:42em;
  font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:400;
  font-size:clamp(1.15rem, 2.3vw, 1.85rem); line-height:1.45; letter-spacing:-.015em;
  color:var(--light); text-wrap:pretty;
}
.ph-litany i{font-style:normal;}
.ph-turnrow{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--gap-cols); align-items:start;
  margin-top:clamp(2.5rem, 5vw, 3.75rem); padding-top:clamp(1.75rem, 3vw, 2.25rem); border-top:2px solid var(--ph);
}
.ph-turn{
  margin:0; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700;
  font-size:clamp(1.6rem, 2.8vw, 2.25rem); line-height:1.15; letter-spacing:-.03em; color:var(--dark); text-wrap:balance;
}
@media (max-width: 1023.98px){ .ph-turnrow{grid-template-columns:minmax(0,1fr); row-gap:1.25rem;} }

/* ---------- 2. DZISIEJSZE MOŻLIWOŚCI AI: lista z numerami ---------- */
.ph-shifts{border-top:2px solid var(--dark);}
.ph-shift{
  position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--gap-cols);
  padding:1.75rem 0; border-bottom:1px solid var(--border);
}
.ph-shift__num{
  position:absolute; left:0; top:calc(1.75rem + .3rem);
  font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:500; font-size:var(--fs-sm);
  letter-spacing:.04em; color:var(--light); font-variant-numeric:tabular-nums;
}
.ph-shift h3{
  margin:0; padding-left:2.75rem; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif;
  font-size:var(--fs-xl); font-weight:700; line-height:1.3; letter-spacing:-.015em; color:var(--dark); text-wrap:balance;
}
.ph-shift p{margin:0; max-width:66ch; color:var(--ink-2); font-size:var(--fs-base); line-height:1.75;}
@media (max-width: 1023.98px){
  .ph-shift{grid-template-columns:minmax(0,1fr);}
  .ph-shift h3{margin-bottom:.65rem;}
  .ph-shift p{padding-left:2.75rem;}
}
@media (max-width: 479.98px){ .ph-shift p{padding-left:0;} }

/* ---------- 3. PYTANIE PRZEWODNIE: ciemny pas, kulminacja aktu I ---------- */
.ph-pivot{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--gap-cols); align-items:start;}
.ph-pivot__title{grid-column:1; margin:0;}
.ph-pivot__intro{grid-column:2; max-width:62ch;}
.ph-pivot__intro p{margin:0 0 1.1rem; font-size:var(--fs-lg); line-height:1.7; color:var(--on-dark);}
.ph-pivot__intro p:last-child{margin-bottom:0;}
.ph-pivot__old strong{color:#ffffff; font-weight:700;}
.ph-pivot__new{
  grid-column:1 / -1; margin:clamp(2.5rem, 5vw, 3.5rem) 0 0; padding-top:clamp(1.75rem, 3vw, 2.25rem);
  border-top:2px solid var(--ph-light);
  font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700;
  font-size:clamp(1.6rem, 3.2vw, 2.6rem); line-height:1.18; letter-spacing:-.03em; color:#ffffff; text-wrap:balance;
}
.ph-pivot__coda{grid-column:2; margin:clamp(1.75rem, 3vw, 2.25rem) 0 0; font-size:var(--fs-lg); line-height:1.7; color:#ffffff; font-weight:500;}
@media (max-width: 1023.98px){
  .ph-pivot{grid-template-columns:minmax(0,1fr);}
  .ph-pivot__title, .ph-pivot__intro, .ph-pivot__coda{grid-column:1;}
  .ph-pivot__intro{margin-top:1.5rem;}
}

/* ---------- 4. NIE PRZEWIDUJEMY: wstęp z lewej, „Jeżeli… sprawdzamy” z prawej ---------- */
.ph-split__aside .ph-prose{margin-top:1.5rem;}
.ph-split__aside .ph-prose p{color:var(--ink-2);}
.ph-checks{list-style:none; padding:0; margin:0; border-top:2px solid var(--dark);}
.ph-checks li{padding:1.3rem 0 1.3rem 1.9rem; border-bottom:1px solid var(--border); color:var(--ink-2); font-size:var(--fs-lg); line-height:1.65;}
.ph-checks li::before{top:calc(1.3rem + .8em);}
.ph-checks strong{color:var(--dark); font-weight:700;}

/* ---------- 5. NIE PYTAMY / PYTAMY: tabela o dwóch kolumnach ----------
   Etykiety zostają w każdym wierszu (czytniki ekranu, telefon). Na szerokim
   ekranie widać je tylko w pierwszym wierszu, gdzie pełnią rolę nagłówków kolumn. */
.ph-vs{border-top:2px solid var(--dark);}
.ph-vs__row{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--gap-cols); align-items:start; padding:1.5rem 0; border-bottom:1px solid var(--border);}
.ph-vs__arrow{display:none;}
.ph-vs__label{
  display:block; margin-bottom:.6rem; font-family:'Roboto','Roboto Fallback',sans-serif;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--light);
}
.ph-vs__yes .ph-vs__label{color:var(--ph-ink);}
.ph-vs__no{font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:500; font-size:var(--fs-xl); line-height:1.4; letter-spacing:-.01em; color:var(--light);}
.ph-vs__yes{font-size:var(--fs-lg); line-height:1.65; color:var(--dark);}
@media (min-width: 850px){
  .ph-vs__row:first-child .ph-vs__label{margin-bottom:1rem;}
  .ph-vs__row + .ph-vs__row .ph-vs__label{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
}
@media (max-width: 849.98px){
  .ph-vs__row{grid-template-columns:minmax(0,1fr); row-gap:1.1rem;}
}

/* ---------- 6. TRZY HORYZONTY ----------
   Drabinka głębokości (16.10.2026, „horyzonty lepiej rozróżnialne”): każdy horyzont to pas
   na całą szerokość ekranu - H1 jasny, H2 niebieski, H3 granatowy („za horyzontem”).
   Legenda powtarza te same trzy kolory i prowadzi do opisów.
   Kontrasty: cyfra H1 na pasie H1 4,77:1, cyfra H2 na H2 5,43:1, cyfra H3 na granacie 10,44:1,
   tekst 2. planu na H1/H2 9,55/8,40:1, treść H3 13,99:1, „Nie pytamy” w H3 7,62:1. */
.ph-horizons{
  --hz1-bg:#f1f6ff; --hz1-line:#93c5fd; --hz1-ink:#2563eb;
  --hz2-bg:#dce8ff; --hz2-line:#3b82f6; --hz2-ink:#1d4ed8;
  --hz3-bg:var(--dark); --hz3-line:#1e3a8a; --hz3-ink:#93c5fd;
}
.ph-legend{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 clamp(1rem, 3vw, 2rem); margin:0 0 clamp(2rem, 4vw, 3rem);}
.ph-legend__item{
  display:flex; align-items:center; min-height:44px; padding:.75rem 0 .25rem;
  font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700; font-size:var(--fs-md); letter-spacing:.01em;
  color:var(--dark); text-decoration:none; transition:color .15s ease;
}
@media (hover:hover){ .ph-legend__item:hover{color:var(--ph-ink);} }
.ph-legend__item{border-top:4px solid;}
.ph-legend__item.is-h1{border-top-color:#93c5fd;}
.ph-legend__item.is-h2{border-top-color:#3b82f6;}
.ph-legend__item.is-h3{border-top-color:#1e3a8a;}
@media (max-width: 639.98px){ .ph-legend{grid-template-columns:minmax(0,1fr); row-gap:.5rem;} }

/* Pas na całą szerokość ekranu przy treści w kontenerze: tło rysuje ::before rozciągnięty
   na 100vw (od środka kontenera). html,body mają overflow-x:clip, więc nadmiar szerokości
   nie tworzy poziomego przewijania. (Sztuczka z box-shadow + clip-path zostawiała
   podpikselowe „ząbki” na krawędziach pasa.) */
.ph-horizon{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--gap-cols); align-items:start;
  padding:clamp(2.75rem, 5vw, 3.75rem) 0; scroll-margin-top:calc(var(--nav-h) + 20px);
}
.ph-horizon::before{content:''; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--hz-bg);}
.ph-horizon.is-h1{--hz-bg:var(--hz1-bg); --hz-ink:var(--hz1-ink);}
.ph-horizon.is-h2{--hz-bg:var(--hz2-bg); --hz-ink:var(--hz2-ink);}
.ph-horizon.is-h3{--hz-bg:var(--hz3-bg); --hz-ink:var(--hz3-ink); color:#ffffff;}
.ph-horizon__head{min-width:0;}
@media (min-width: 1024px){ .ph-horizon__head{position:sticky; top:calc(var(--nav-h) + 1.5rem);} }
/* Znacznik H1/H2/H3 w wierszu: duża cyfra zamiast pastylki. */
.ph-horizon .ph-h-badge{
  display:block; padding:0; margin:0 0 .85rem; background:none; border:0; border-radius:0;
  font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700; text-transform:none;
  font-size:clamp(2.5rem, 4vw, 3.25rem); line-height:1; letter-spacing:-.04em; color:var(--hz-ink, var(--ph-ink));
}
.ph-horizon h3{font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:var(--fs-2xl); font-weight:700; line-height:1.2; color:var(--dark); margin:0 0 .5rem; letter-spacing:-.02em;}
.ph-horizon__sub{display:block; max-width:40ch; color:var(--ink-2); font-size:var(--fs-base); line-height:1.55;}
.ph-horizon__body{min-width:0; max-width:66ch;}
.ph-horizon__body p{color:var(--dark); font-size:var(--fs-lg); line-height:1.75; margin:0 0 1.15rem;}
.ph-horizon__body p:last-child{margin-bottom:0;}
.ph-horizon strong{font-weight:700;}
/* Pary „Nie pytamy: … lecz: …” w H3 - ten sam chwyt co tabela w sekcji „Model pracy”. */
.ph-horizon__body .ph-ask{padding:1rem 0; margin:0; border-top:1px solid var(--border);}
.ph-horizon__body .ph-ask + p:not(.ph-ask){border-top:1px solid var(--border); padding-top:1.15rem;}
.ph-ask__no, .ph-ask__yes{display:block;}
.ph-ask__no{color:var(--light);}
.ph-ask__no em{font-style:normal;}
.ph-ask__yes{margin-top:.3rem;}
/* H3 na granacie: jasne odpowiedniki kolorów tekstu i linii. */
.ph-horizon.is-h3 h3, .ph-horizon.is-h3 strong{color:#ffffff;}
.ph-horizon.is-h3 .ph-horizon__sub{color:var(--on-dark);}
.ph-horizon.is-h3 .ph-horizon__body p{color:rgba(255,255,255,.86);}
.ph-horizon.is-h3 .ph-ask, .ph-horizon.is-h3 .ph-ask + p:not(.ph-ask){border-top-color:var(--on-dark-hair);}
.ph-horizon.is-h3 .ph-ask__no{color:rgba(255,255,255,.62);}
@media (max-width: 1023.98px){
  .ph-horizon{grid-template-columns:minmax(0,1fr); row-gap:1.5rem;}
  .ph-horizon .ph-h-badge{margin-bottom:.6rem;}
}

/* ---------- 7. HORYZONT SIĘ PRZESUWA: coda pasa horyzontów ---------- */
#horyzonty.sec{padding-bottom:0;}
.ph-ruch{padding-top:clamp(2.5rem, 5vw, 3.5rem);}
.ph-path{
  margin:2rem 0 0; padding-top:1.5rem; border-top:2px solid var(--ph); max-width:none;
  font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:500;
  font-size:var(--fs-xl); line-height:1.55; letter-spacing:-.01em; color:var(--dark);
}

/* ---------- 8. CO BADAMY: sześć obszarów na liniach (taksonomia eksperymentów) ---------- */
.ph-areas{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(2.25rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);}
.ph-area{padding-top:1.1rem; border-top:2px solid var(--dark); scroll-margin-top:calc(var(--nav-h) + 20px);}
.ph-area:target{border-top-color:var(--ph);}
.ph-area h3{font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:var(--fs-xl); font-weight:700; letter-spacing:-.015em; line-height:1.3; color:var(--dark); margin:0 0 .75rem;}
.ph-area ul{list-style:none; padding:0; margin:0;}
.ph-area li{padding:.65rem 0; border-top:1px solid var(--border); color:var(--ink-2); font-size:var(--fs-base); line-height:1.55;}
.ph-area li:first-child{border-top:0; padding-top:0;}
@media (max-width: 1023.98px){ .ph-areas{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width: 639.98px){ .ph-areas{grid-template-columns:minmax(0,1fr);} }

/* ---------- 9. HIPOTEZY ---------- */
.ph-hypos{border-top:2px solid var(--dark);}
.ph-hypo{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--gap-cols); align-items:start; padding:clamp(2rem, 4vw, 3rem) 0; border-bottom:1px solid var(--border);}
.ph-hypo:last-child{border-bottom:0; padding-bottom:0;}
.ph-hypo__head{min-width:0;}
@media (min-width: 1024px){ .ph-hypo__head{position:sticky; top:calc(var(--nav-h) + 1.5rem);} }
.ph-hypo__num{display:block; margin-bottom:.6rem; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:500; font-size:var(--fs-md); color:var(--ph-ink);}
.ph-hypo h3{font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:clamp(1.4rem, 2.2vw, 1.75rem); font-weight:700; line-height:1.25; letter-spacing:-.02em; color:var(--dark); margin:0; text-wrap:balance;}
.ph-hypo__body{min-width:0; max-width:66ch;}
.ph-hypo__body p{color:var(--dark); font-size:var(--fs-lg); line-height:1.75; margin:0 0 1.25rem;}
.ph-hypo__body > :last-child{margin-bottom:0;}
.ph-hypo strong{font-weight:700;}
.ph-hypo ul{list-style:none; padding:0; margin:0 0 1.5rem; border-top:1px solid var(--border);}
.ph-hypo ul li{padding-top:.65rem; padding-bottom:.65rem; border-bottom:1px solid var(--border); color:var(--dark); font-size:var(--fs-base); line-height:1.55;}
.ph-hypo ul li::before{top:calc(.65rem + .75em);}
@media (max-width: 1023.98px){ .ph-hypo{grid-template-columns:minmax(0,1fr); row-gap:1.5rem;} }

/* ---------- 10-11. DWA STANOWISKA: automatyzacja i profesja obok siebie ---------- */
.ph-pair{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(2.75rem, 5vw, 5rem);}
.ph-pair__item{padding-top:1.5rem; border-top:2px solid var(--dark);}
.ph-pair .ph-note{margin:1.75rem 0;}
@media (max-width: 899.98px){ .ph-pair{grid-template-columns:minmax(0,1fr);} }

/* ---------- 12. DOMKNIĘCIE: ciemny pas, bez gradientu i poświaty ---------- */
.ph-close__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--gap-cols); align-items:start;}
.ph-close h2{
  margin:0; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700;
  font-size:var(--fs-h1); line-height:1.05; letter-spacing:-.035em; color:#ffffff;
}
@media (min-width: 1024px){ .ph-close h2{position:sticky; top:calc(var(--nav-h) + 1.5rem);} }
.ph-close__body{max-width:62ch;}
.ph-close p{color:var(--on-dark); font-size:var(--fs-lg); line-height:1.75; margin:0 0 1.2rem;}
.ph-close em{color:#ffffff;}
/* Selektor .ph-close .ph-close__sig (0,2,0) wygrywa z .ph-close p (0,1,1) bez !important. */
.ph-close .ph-close__sig{
  margin:2rem 0 0; padding-top:1.5rem; border-top:2px solid var(--ph-light);
  font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:700;
  font-size:clamp(1.35rem, 2.2vw, 1.75rem); line-height:1.3; letter-spacing:-.02em; color:#ffffff;
}
.ph-close__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem;}
/* Przy powiększonym tekście (ustawienia dostępności telefonu) .btn z white-space:nowrap
   wychodził poza ekran - tu przyciski mogą złamać wiersz. */
.ph-close__cta .btn{white-space:normal; text-align:center;}
.btn--ph{background:var(--ph); color:#fff; border-color:var(--ph); box-shadow:none;}
@media (hover:hover){.btn--ph:hover{background:var(--ph-dark); border-color:var(--ph-dark); transform:translateY(-2px);}}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,0.45);}
@media (hover:hover){.btn--ghost:hover{background:rgba(255,255,255,0.1); border-color:#fff; transform:translateY(-2px);}}
@media (max-width: 1023.98px){ .ph-close__grid{grid-template-columns:minmax(0,1fr); row-gap:1.5rem;} }

/* STOPKA - bez gradientowej linii nad stopką (ustalenie z 06.10.2026: bez gradientów i poświat). */
footer.cfp-footer p{ font-size:var(--fs-md); color:rgba(15,23,42,0.68); margin:.25rem auto; max-width:560px; }
@media (hover:hover){.footer-links a:hover, .footer-links button:hover{color:var(--ph-ink);}}
.nobr{white-space:nowrap;}

/* =====================================================================
   CZĘŚĆ 2 (17.10.2026): STRONA GŁÓWNA SEKCJI I PODSTRONY
   Strona główna = krótki opis + odesłanie do pełnego opisu + lista materiałów.
   Każdy materiał ma własną podstronę (generator: docs/narzedzia-poza-horyzont).
   ===================================================================== */

/* Hero podstrony: to samo zdjęcie, niższe, jedna kolumna, ścieżka nawigacji nad nadtytułem. */
.ph-hero--page{padding:calc(var(--nav-h) + clamp(2rem, 5vw, 3.25rem)) 0 clamp(4.5rem, 10vw, 7rem);}
.ph-hero--page .ph-hero__inner{grid-template-columns:minmax(0,1fr);}
.ph-hero--page h1{font-size:clamp(2.1rem, 1.35rem + 2.9vw, 3.5rem); line-height:1.08; max-width:24ch;}
.ph-hero--page .ph-hero__lead{max-width:62ch; font-size:var(--fs-lead); line-height:1.6;}
.ph-crumb{display:flex; flex-wrap:wrap; align-items:center; gap:0 .55rem; margin:0 0 1.5rem; font-size:var(--fs-sm); color:rgba(255,255,255,.72);}
.ph-crumb a{display:inline-flex; align-items:center; min-height:24px; color:rgba(255,255,255,.9); text-decoration:none; font-weight:500;}
@media (hover:hover){ .ph-crumb a:hover{color:#ffffff; text-decoration:underline; text-underline-offset:3px;} }
.ph-crumb [aria-hidden]{color:rgba(255,255,255,.45);}

/* Przyciski na jasnym tle (na granacie zostają .btn--ph i .btn--ghost). */
.ph-btns{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem;}
.ph-btns .btn{white-space:normal; text-align:center;}
.btn--ph-line{background:transparent; color:var(--ph-ink); border-color:var(--ph); box-shadow:none;}
@media (hover:hover){ .btn--ph-line:hover{background:rgba(var(--ph-rgb),.08); transform:translateY(-2px);} }

/* ---------- STRONA GŁÓWNA: krótki opis inicjatywy ---------- */
.ph-head--end{margin-bottom:0;}   /* opis kończy pas - bez odstępu pod nagłówkiem */

/* ---------- STRONA GŁÓWNA: lista materiałów ----------
   Pierwsza sekcja pod hero. Wiersz na całą szerokość: rodzaj i data, duży tytuł, (opis, znaczniki),
   z prawej „Czytaj →”. Cały wiersz klikalny (rozciągnięty link tytułu), tło przy najechaniu
   jak w spisie Hubu wiedzy. Skaluje się na dowolną liczbę materiałów. */
.ph-mats{list-style:none; margin:0; padding:0; border-top:2px solid var(--dark);}
.ph-mat{position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:2rem; align-items:center; padding:clamp(1.6rem, 3vw, 2.25rem) 0; border-bottom:1px solid var(--border);}
.ph-mat::before{content:""; position:absolute; z-index:-1; inset:0 -1rem; border-radius:var(--r-md); background:transparent; transition:background-color .15s ease;}
.ph-mat__kind{margin:0 0 .6rem; color:var(--light); font-size:var(--fs-sm); font-weight:500;}
.ph-mat__title{margin:0; max-width:36ch; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); font-weight:700; line-height:1.2; letter-spacing:-.025em; color:var(--dark); text-wrap:balance; transition:color .15s ease;}
.ph-mat__title a{color:inherit; text-decoration:none;}
.ph-mat__title a::after{content:""; position:absolute; inset:0 -1rem;}   /* cały wiersz klikalny */
.ph-mat__desc{margin:.8rem 0 0; max-width:66ch; color:var(--ink-2); font-size:var(--fs-base); line-height:1.7;}
.ph-mat__tags{display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; margin:.9rem 0 0; color:var(--dark); font-size:var(--fs-sm); font-weight:500;}
.ph-mat__cta{display:inline-flex; align-items:center; gap:.5rem; color:var(--ph-ink); font-size:var(--fs-md); font-weight:700; white-space:nowrap;}
.ph-mat__cta svg{flex:none; transition:transform .2s ease;}
@media (hover:hover){
  .ph-mat:has(.ph-mat__title a:hover)::before{background:var(--bg-light);}
  .ph-mat:has(.ph-mat__title a:hover) .ph-mat__title{color:var(--ph-ink);}
  .ph-mat:has(.ph-mat__title a:hover) .ph-mat__cta svg{transform:translateX(4px);}
}
.ph-mat__title a:focus-visible{outline:none; box-shadow:none;}
.ph-mat:has(.ph-mat__title a:focus-visible)::before{background:var(--bg-light); outline:3px solid var(--focus-ring, #1d4ed8); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .ph-mat__cta svg{transition:none;} }
@media (max-width: 639.98px){
  .ph-mat{grid-template-columns:minmax(0,1fr); row-gap:1rem;}
  .ph-mat::before, .ph-mat__title a::after{inset:0 -.75rem;}
}
.ph-empty{margin:0; padding:1.75rem 0; border-top:2px solid var(--dark); border-bottom:1px solid var(--border); color:var(--ink-2); font-size:var(--fs-lg); line-height:1.65;}
/* Znacznik horyzontu w tekście: krótka linia w kolorze pasa z opisu inicjatywy. */
.ph-hz{display:inline-flex; align-items:center; gap:.5rem;}
.ph-hz::before{content:''; flex:none; width:1rem; height:3px; background:var(--hz-line, var(--ph));}
.ph-hz.is-h1{--hz-line:#93c5fd;}
.ph-hz.is-h2{--hz-line:#3b82f6;}
.ph-hz.is-h3{--hz-line:#1e3a8a;}

/* ---------- PODSTRONA MATERIAŁU: prosta, jedna kolumna tekstu (jak artykuły Hubu wiedzy) ----------
   Tytuł w hero i treść mają tę samą lewą krawędź. Bez bocznych paneli i metryczek. */
.ph-hero--doc .ph-hero__inner, .container.ph-doc{max-width:calc(var(--w-article) + 3rem);}
.ph-hero--doc h1{max-width:none;}
.ph-hero__meta{margin:1.25rem 0 0; color:rgba(255,255,255,.75); font-size:var(--fs-sm); line-height:1.6;}
.ph-hero__meta a{color:#ffffff; text-underline-offset:3px;}

/* Treść materiału: te same kroje i linie co opis inicjatywy. */
.ph-text > :first-child{margin-top:0;}
.ph-text p{margin:0 0 1.25rem; color:var(--dark); font-size:var(--fs-lg); line-height:1.75;}
.ph-text h2{margin:2.75rem 0 1rem; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight:700; line-height:1.2; letter-spacing:-.025em; color:var(--dark); text-wrap:balance; scroll-margin-top:calc(var(--nav-h) + 20px);}
.ph-text h3{margin:2rem 0 .75rem; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:var(--fs-xl); font-weight:700; line-height:1.3; letter-spacing:-.015em; color:var(--dark);}
.ph-text ul, .ph-text ol{list-style:none; margin:0 0 1.5rem; padding:0; border-top:1px solid var(--border);}
.ph-text li{position:relative; padding:.65rem 0 .65rem 2rem; border-bottom:1px solid var(--border); color:var(--dark); font-size:var(--fs-lg); line-height:1.65;}   /* ten sam rozmiar co akapity */
.ph-text ul > li::before{content:''; position:absolute; left:0; top:calc(.65rem + .78em); width:1rem; height:2px; background:var(--ph);}
.ph-text ol{counter-reset:ph-ol;}
.ph-text ol > li{counter-increment:ph-ol;}
.ph-text ol > li::before{content:counter(ph-ol, decimal-leading-zero); position:absolute; left:0; top:.85rem; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:500; font-size:var(--fs-sm); color:var(--light);}
.ph-text blockquote{margin:2rem 0; padding:0;}
.ph-text blockquote::before{content:''; display:block; width:2.5rem; height:2px; background:var(--ph); margin-bottom:1rem;}
.ph-text blockquote p{font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-weight:500; font-size:clamp(1.25rem, 1.9vw, 1.5rem); line-height:1.4; letter-spacing:-.015em;}
.ph-text figure{margin:2rem 0;}
.ph-text img{display:block; width:100%; height:auto; border-radius:var(--r-lg); background:var(--bg-light);}
.ph-text figcaption{margin-top:.65rem; color:var(--light); font-size:var(--fs-sm); line-height:1.5;}
.ph-text a{color:var(--ph-ink); font-weight:700; text-underline-offset:3px;}
.ph-text strong{font-weight:700;}
.ph-text .tablewrap{overflow-x:auto; margin:0 0 1.5rem;}
.ph-text table{width:100%; border-collapse:collapse; font-size:var(--fs-md); line-height:1.5;}
.ph-text th, .ph-text td{padding:.7rem .9rem .7rem 0; border-bottom:1px solid var(--border); text-align:left; vertical-align:top;}
.ph-text th{border-bottom:2px solid var(--dark); color:var(--dark); font-weight:700;}
/* Lista plików do pobrania: ikona formatu, nazwa, format z prawej. */
.ph-text ul.ph-files > li{display:flex; align-items:center; gap:.9rem; padding:.85rem 0;}
.ph-text ul.ph-files > li::before{display:none;}
.ph-file-ico{flex:none; display:block;}   /* ikona formatu: DOCX / MD */
.ph-files span{margin-left:auto; padding-left:1rem; color:var(--light); font-size:var(--fs-sm); white-space:nowrap;}
/* Telefon: format pokazuje ikona - napis zostaje tylko dla czytników ekranu, tytuł dostaje całą szerokość. */
@media (max-width: 639.98px){ .ph-files span{position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;} }
.ph-doc__end{margin-top:3rem; padding-top:1.5rem; border-top:2px solid var(--dark);}
.ph-doc__end p{margin:0; max-width:62ch; color:var(--ink-2); font-size:var(--fs-md); line-height:1.65;}
.ph-doc__end .ph-btns{margin-top:1.25rem;}

/* Nawigacja między materiałami (jak między artykułami sprawozdania). */
.ph-mnav{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 2rem; border-top:1px solid var(--border);}
.ph-mnav a{display:block; padding:1.5rem 0; border-bottom:1px solid var(--border); text-decoration:none;}
.ph-mnav a.nx{grid-column:2; text-align:right;}
.ph-mnav small{display:block; margin-bottom:.35rem; color:var(--light); font-size:var(--fs-sm); font-weight:500;}
.ph-mnav strong{display:block; font-family:'Space Grotesk','Space Grotesk Fallback','Roboto','Roboto Fallback',sans-serif; font-size:var(--fs-lg); line-height:1.35; color:var(--dark); transition:color .15s ease;}
@media (hover:hover){ .ph-mnav a:hover strong{color:var(--ph-ink);} }
@media (max-width: 639.98px){ .ph-mnav{grid-template-columns:minmax(0,1fr);} .ph-mnav a.nx{grid-column:1; text-align:left;} }