/* ============================================================================
   FRANKLINCOVEY POLSKA — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Wzorzec: https://www.franklincovey.com — nowa strona główna.
   Ten plik jest jedynym źródłem prawdy dla designu.
   Wartości pochodzą z pomiaru oryginału (styles.min.css motywu
   franklincovey oraz arkusz Max Mega Menu), nie z oka.

   Rozdziały 1–5 i 7–8 przeniesione z poprzedniego repozytorium; bloki
   sekcyjne budujemy od nowa z pomiaru nowej strony głównej.
   ============================================================================ */
/* ============================================================
   1. FONTY
   ------------------------------------------------------------
   Oryginał self-hostuje fonty licencjonowane:
   - Rand (Optimo)       → cały tekst i UI
   - TiemposFine (Klim)  → nagłówki ozdobne, liczby statystyk
   Do czasu pozyskania plików brandowych działają fallbacki
   (Inter / Source Serif 4 — patrz @import niżej).
   Gdy będą pliki .woff → wrzucić do fonts/ i odkomentować.
   ============================================================ */
/* Fallback z Google Fonts (@import musi być przed innymi regułami),
   gdyby pliki brandowe nie były dostępne */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400&family=Inter:wght@300;400;500;700&display=swap');

/* Brandowe pliki self-hosted w fonts/ (pobrane z oryginalnego motywu FC;
   wagi jak w oryginale: Rand 400/500/600, TiemposFine 300).
   ⚠ Licencja: przed wdrożeniem na produkcję potwierdzić z FC prawo FCPL
   do użycia fontów na franklincovey.pl. */
@font-face { font-family: Rand; src: url(../fonts/Rand/Rand-Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: Rand; src: url(../fonts/Rand/Rand-Italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Rand; src: url(../fonts/Rand/Rand-Medium.woff) format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: Rand; src: url(../fonts/Rand/Rand-Bold.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: TiemposFine; src: url(../fonts/TiemposFine/TiemposFine-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }


/* ============================================================
   2. TOKENY
   ============================================================ */
:root {
  /* --- Kolory --- */
  --ink: #101820;          /* bazowy tekst, linie, ciemne tła kart (nie czysta czerń) */
  --blue: #3253FF;         /* akcent: przyciski, aktywne linki, podkreślenia linków */
  --gray: #CFDEE5;         /* szaroniebieskie tło sekcji i kart */
  --white: #ffffff;
  --selection: #04A4CC;    /* ::selection oryginału */

  /* --- Rodziny fontów --- */
  --sans: Rand, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: TiemposFine, 'Source Serif 4', Georgia, serif;

  /* --- Skala typograficzna (z arkusza styles.min.css oryginału) ---
     Model oryginału: h1 NIE MA globalnego rozmiaru — jest ustawiany per blok
     (hero/cta: 85/93; block-hero-banner: 135px). Globalne są: h2, h3
     oraz klasy .has-large-font-size i .has-huge-font-size.               */
  --fs-base: 22px;   --lh-base: 35px;   /* body / html; mobile: tylko fs → 18px */
  --fs-h2: 36px;     --lh-h2: 39px;     /* h2 globalnie; serif 300              */
  --fs-h3: 22px;     --lh-h3: 36px;     /* h3 globalnie; SANS weight 600        */
  --fs-large: 85px;  --lh-large: 93px;  /* .has-large-font-size; hero/cta h1    */
  --fs-huge: 138px;  --lh-huge: 128px;  /* .has-huge-font-size                  */
  --fs-stat: 90px;   --lh-stat: 128px;  /* .has-huge-font-size WEWNĄTRZ .block-stats */
  --fs-intro: 46px;  --lh-intro: 57px;  /* h2 w .block-intro-text; SANS (mobile 35/37) */
  --fs-small: 18px;                     /* kategorie kart, drobne opisy         */
  --fs-nav: 14px;                       /* numerki, drobne etykiety             */
  --fs-btn: 16px;                       /* tekst przycisków                     */
  --fs-base-mobile: 18px;               /* body ≤767px (line-height BEZ zmian)  */
  --heading-margin: 0 0 15px;           /* globalny margines h1–h6              */

  /* --- Kontener strony (oryginał: .uk-container) ---
     content-box + max-width 1360px → maks. całkowita szerokość 1440px.
     Padding boczny zależny od breakpointu: 15 / 30 / 40 px.            */
  --container-max: 1360px;
  --side-pad: 40px;        /* padding kontenera ≥960px (mniejsze w mediach)    */

  /* --- Spacing --- */
  /* ⚠️ Świadome odejście od oryginału: franklincovey.com trzyma 100px
     i strona jest przez to zbita. Decyzja foundera 2026-09-07: 140px. */
  --section-gap: 140px;    /* pionowy odstęp między sekcjami                   */
  --block-pad: 60px;       /* padding pionowy boksu z pełnym tłem              */
  --box-pad-x: 48px;       /* padding poziomy WEWNĄTRZ boksu z tłem            */
  --grid-gap: 30px;        /* odstęp kolumn w siatkach                         */

  /* --- Przyciski (pill) --- */
  --btn-radius: 120px;
  --btn-pad: 12px 20px;

  /* --- Breakpointy oryginału (UIkit) — używać w media queries ---
     s: 640px | m: 960px | l: 1200px | xl: 1600px | body-switch: 767px */
}

/* Tokeny formularza (Contact Form 7).
   ⚠ Wartości ZMIERZONE z wyrenderowanego formularza na franklincovey.com,
   nie z deklaracji tokenów HubSpota — motyw FC je nadpisuje (m.in. usuwa
   obramowanie, zmienia tło na cieplejszą szarość i daje pigułkowy przycisk). */
:root {
  /* Pola */
  --cf7-field-bg: rgb(216, 212, 215);   /* #D8D4D7 */
  --cf7-field-border-width: 0;
  --cf7-field-border-color: transparent;
  --cf7-field-radius: 8px;
  --cf7-field-padding: 18px 20px;
  --cf7-field-font-size: 20px;
  --cf7-field-line-height: 29px;        /* razem z paddingiem daje 65px wysokości */
  --cf7-field-color: var(--ink);
  --cf7-placeholder-color: rgba(81, 99, 131, .64);
  --cf7-text-color: rgba(51, 71, 91, 1);
  --cf7-description-color: rgba(81, 99, 131, .89);

  /* Komunikaty walidacji CF7 */
  --cf7-error-color: rgba(229, 21, 32, 1);

  /* Przycisk wysyłki — pigułka, waga 700, padding 10/20 */
  --cf7-button-bg: rgb(51, 83, 255);
  --cf7-button-bg-hover: rgba(56, 91, 255, 1);
  --cf7-button-color: #fff;
  --cf7-button-radius: 999px;
  --cf7-button-padding: 10px 20px;
  --cf7-button-weight: 700;

  /* Odstępy między polami */
  --cf7-field-gap: 16px;
}


/* ============================================================
   3. BAZA (reset + body — 1:1 z oryginałem)
   ============================================================ */
*, *::after, *::before {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); color: #fff; text-shadow: none; }

html { background: #fff; -webkit-text-size-adjust: 100%; }

body, html {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-style: normal;
  font-weight: 400;
  color: var(--ink);
}

@media only screen and (max-width: 767px) {
  body, html { font-size: var(--fs-base-mobile); }
}

/* Znaki ™ i ® nie mogą rozpychać wiersza. Domyślne vertical-align:
   super powiększa pole wiersza i robi wyrwę nad linią z tym znakiem —
   stąd zerowa interlinia i ręczne podniesienie względem linii pisma. */
sup, sub {
  font-size: .5em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -.55em; }
sub { top: .25em; }

a { color: inherit; }
img, iframe, video { max-width: 100%; }
/* Zerujemy domyślny margines akapitu (1em góra/dół) — odstępy nadają bloki.
   Bez tego pierwszy akapit w kolumnie schodzi niżej niż sąsiedni nagłówek. */
p { margin: 0; }


/* ============================================================
   4. TYPOGRAFIA — model 1:1 z oryginału (styles.min.css)
   ------------------------------------------------------------
   - wszystkie nagłówki: serif 300, ink, margin 0 0 15px
   - h1 bez globalnego rozmiaru (rozmiar nadają bloki lub klasy)
   - h2: 36/39 · h3: SANS 600 22/36
   - .has-large-font-size: 85/93 · .has-huge-font-size: 138/128
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  margin: var(--heading-margin);
  font-weight: 300;
  color: var(--ink);
}
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-family: var(--sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); }

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
  color: inherit; font-size: inherit; text-decoration: none;
}

.has-large-font-size { font-size: var(--fs-large); line-height: var(--lh-large); }
.has-huge-font-size  { font-size: var(--fs-huge);  line-height: var(--lh-huge); }

/* Eyebrow / breadcrumb nad h1 (oryginał: .breadcrumbs .linked) — body bold */
.eyebrow { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; }

/* NAGŁÓWEK SEKCJI — obowiązujący standard dla wszystkich sekcji treściowych.
   Skala intro z oryginału (.block-intro-text .intro-headings h2):
   Rand 46/57, weight 300. Używać zamiast globalnego serif h2. */
.section-title {
  font-family: var(--sans);
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  font-weight: 300;
}
/* Poniżej 960px nagłówki skalują się płynnie z szerokością ekranu.
   Sztywne wartości robiły skoki: to samo 35px wyglądało dobrze na tablecie,
   a na telefonie długi nagłówek rozbijał się na sześć linii. */
@media (max-width: 960px) {
  /* Dolna granica 20px: przy dłuższych nagłówkach 24px rozbijało tekst
     na sześć linii i dominowało nad resztą ekranu telefonu.
     Nagłówek bloku intro-text jest nadpisywany osobno w sekcji 6 — ma własną
     regułę sekcyjną, która stoi w pliku niżej i przy równej specyficzności
     wygrywałaby z tą tutaj. */
  .section-title { font-size: clamp(28px, 5.2vw, 34px); line-height: 1.25; }
}


/* ============================================================
   5. KOMPONENTY
   ============================================================ */
/* --- Przyciski (pill) --- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-btn);
  font-weight: 400;
  line-height: normal;
  padding: var(--btn-pad);
  border-radius: var(--btn-radius);
  text-decoration: none;
  cursor: pointer;
}
.btn-solid   { background: var(--blue); color: #fff; border: 1px solid var(--blue); }
.btn-outline { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }

/* --- Utility układu (zachowane nazwy z oryginału / UIkit) --- */
.uk-flex { display: flex; }
.uk-justify-sb { justify-content: space-between; }

/* --- Lista wypunktowana --- */
.list-bullets { list-style: none; padding: 0; margin: 0; }
.list-bullets li { position: relative; padding-left: 28px; margin-bottom: 16px; }
.list-bullets li:last-child { margin-bottom: 0; }
.list-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.61em;   /* środek pierwszej linii przy interlinii 35px */
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

/* --- Microcopy pod CTA ---
   Marka FC nie ma szarego tekstu pomocniczego (jedyne #696969 w oryginale
   należy do bannera cookie OneTrust, nie do designu). Hierarchię buduje
   więc sama skala: 16px przy 22px leadzie, kolor bez zmian. */
.microcopy {
  font-size: var(--fs-btn);
  line-height: 24px;
  max-width: 420px;
  margin: 16px 0 0;
}

/* --- Kontener strony (odpowiednik .uk-container z oryginału) ---
   Wszystkie sekcje żyją w środku; sekcje NIE mają własnego paddingu bocznego. */
.container {
  box-sizing: content-box;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  /* Bezpiecznik: nic nie może wypchnąć strony w bok i wywołać
     poziomego przewijania na telefonie. */
  overflow-x: hidden;
}
@media (min-width: 640px) { .container { padding-left: 30px; padding-right: 30px; } }
@media (min-width: 960px) { .container { padding-left: var(--side-pad); padding-right: var(--side-pad); } }

/* --- Linia rozdzielająca sekcje ---
   display: block jest konieczne: kreska bywa użyta na <span>, a element
   liniowy ignoruje wysokość i linia po prostu nie istnieje. */
.hairline {
  display: block;
  height: 1px;
  background: var(--ink);
  margin: var(--section-gap) 0 0;
}

/* Kreska między sekcjami. Bierze połowę odstępu na siebie, a drugą
   połowę oddaje sekcji pod sobą — dzięki temu linia stoi dokładnie
   w środku przerwy, a rytm strony zostaje ten sam.

   Klasa siedzi na kontenerze, nie na samej kresce: sąsiadem sekcji
   jest kontener i tylko z niego działa selektor `+`. */
.section-divider { margin-top: calc(var(--section-gap) / 2); }
.section-divider .hairline { margin-top: 0; }
/* [class] dobija specyficzność. Bloki z wariantem mają po trzy klasy
   w selektorze (np. .block.block-colorful-link-farm.format-large) i bez
   tego wygrywały własnym odstępem sekcji — kreska stawała 140px od
   treści zamiast 70px. */
.section-divider + section.block[class] { padding-top: calc(var(--section-gap) / 2); }

/* Kafle trzymają 20px zapasu na uniesienie w paddingu siatki,
   więc sekcja oddaje o tyle mniej. */
.section-divider + section.block.block-lead-gen[class] {
  padding-top: calc(var(--section-gap) / 2 - 20px);
}
/* Wariant ciaśniejszy — gdy poprzednia sekcja kończy się przyciskiem
   lub innym elementem, który sam nadaje już sporo powietrza. */
.hairline--tight { margin-top: 50px; }
.hairline--tight + .block { margin-top: 50px; padding-top: 0; }

/* --- Sekcja bazowa (bez paddingu bocznego — daje go kontener) --- */
.section--gap { margin-top: var(--section-gap); }
.section--gray { background: var(--gray); padding: var(--block-pad) var(--box-pad-x); }

/* --- Tła --- */
.bg-ink  { background: var(--ink); color: #fff; }
.bg-gray { background: var(--gray); color: var(--ink); }

/* --- Numerek w kółku --- */
.number-circle {
  width: 30px; height: 30px;
  color: var(--ink);
  border: 1px solid var(--ink); border-radius: 50%;
  font-size: var(--fs-nav); line-height: 30px; text-align: center;
  margin-bottom: 26px;
}

/* --- Pozycja z niebieskim podkreśleniem (link farm) ---
   Wariant `span` = pozycja nieklikalna (oryginał: .farm-link.no-link). */
/* Kolumna elastyczna → podkreślenia wyrównane na dole niezależnie
   od liczby linii tekstu (oryginał przycina tekst do 2 linii). */
.farm-link { position: relative; display: flex; flex-direction: column; }
.farm-link a,
.farm-link span {
  display: block;
  flex: 1;
  font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700;
  color: #000; text-decoration: none; padding-bottom: 3px;
}
.farm-link::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 12px;
  background: var(--blue);
}
.farm-link a:hover { color: var(--blue); }

/* Warianty koloru podkreślenia (paleta akcentów oryginału) */
.farm-link.color-blue::after       { background: var(--blue); }
.farm-link.color-black::after      { background: var(--ink); }
.farm-link.color-red::after        { background: #FF585D; }
.farm-link.color-yellow::after     { background: #FFB93C; }
.farm-link.color-green::after      { background: #62D99B; }
.farm-link.color-purple::after     { background: #A191F2; }

/* ============================================================
   6. WARSTWA RESPONSYWNA — tokeny
   ------------------------------------------------------------
   Skala oryginału jest zbudowana pod desktop. Poniżej progów
   trzeba ją domknąć. Reguły dotyczące pojedynczych bloków leżą
   przy tych blokach, nie tutaj.
   ============================================================ */
@media (max-width: 960px) {
  /* Eyebrow zawsze wyraźnie mniejszy od nagłówka, inaczej z nim konkuruje. */
  .eyebrow { font-size: clamp(15px, 2.4vw, 18px); line-height: 1.45; }
}

@media (max-width: 640px) {
  :root {
    --section-gap: 80px;
    --block-pad: 40px;
    --box-pad-x: 24px;
    /* FC trzyma interlinię 35px także na telefonie, ale przy foncie 18px
       daje to 1,94 — tekst rozjeżdża się w pionie. Ściągamy do 1,55. */
    --lh-base: 28px;
  }
}

/* ============================================================
   7. NAGŁÓWEK
   ------------------------------------------------------------
   Wartości zmierzone z franklincovey.com
   (themes/franklincovey/css/styles.min.css 1.19.4 + arkusz
   Max Mega Menu, 2026-09-07).

   Oryginał składa nawigację z wtyczki Max Mega Menu — 148 KB CSS
   na jedno menu. Tu jest odtworzony sam efekt: przyklejony biały
   pasek, panele na pełną szerokość i welon przykrywający treść.
   ============================================================ */
:root {
  /* Rzeczywista wysokość paska: 20 padding + 53,4 logo + 20 padding
     + 1 kreska. Musi się zgadzać co do piksela, bo od niej liczy się
     odstęp treści — token większy niż pasek udaje odstęp, którego nie
     ma tam, gdzie się wydaje. */
  --header-h: 95px;
  --header-gap: 70px;       /* odstęp od kreski pod paskiem do treści strony     */
  --header-pad: 20px;       /* padding pionowy paska                            */
  --logo-w: 297px;          /* szerokość logo ≥1225px (mobile 170px)            */
  /* ⚠️ Oryginał daje 14px — przy naszej szerokości paska nawigacja
     ginie. Decyzja foundera 2026-09-07: 17px. */
  --nav-fs: 17px;           /* pozycje najwyższego poziomu                      */
  --nav-lh: 40px;
  --nav-color: #141928;     /* nieco cieplejsza czerń niż --ink, jak w oryginale */
  --mega-fs: 16px;          /* nagłówki kolumn w panelu                         */
  --mega-link-fs: 14px;     /* pozycje w panelu                                 */
  --nav-breakpoint: 1225px; /* próg przejścia na menu mobilne (data-breakpoint) */
  --ikona-pobierania: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1v7.6'/%3E%3Cpath d='M2.6 5.4 6 8.8l3.4-3.4'/%3E%3Cpath d='M1.2 12.8h9.6'/%3E%3C/g%3E%3C/svg%3E");
  --veil: rgba(255, 255, 255, .7);
}

/* Pasek jest przyklejony do góry, więc treść musi dostać zapas
   od góry — inaczej pierwsza sekcja chowa się pod nagłówkiem. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--white);
  /* Dopełnienie dolne przechodzi na wnętrze, żeby kreska szła na
     szerokość treści, a nie całego okna. */
  padding: var(--header-pad) 0 0;
}

/* Jeden odstęp pod nagłówkiem dla całego serwisu. Bloki hero NIE dodają
   własnego marginesu od góry — inaczej każda podstrona zaczynałaby się
   na innej wysokości. */
.site-main { padding-top: calc(var(--header-h) + var(--header-gap)); }

/* Własna otoczka zamiast .container: kontener ma overflow-x: hidden,
   co przycina także w pionie i połyka rozwinięte panele menu. Szerokość
   i dopełnienie zostają te same, więc kreska pod paskiem nadal stoi
   w jednej linii z treścią strony. */
.site-header__wrap {
  box-sizing: content-box;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 960px) {
  .site-header__wrap { padding-left: var(--side-pad); padding-right: var(--side-pad); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  /* Kreska oddziela pasek od treści. Siedzi WEWNĄTRZ kontenera, nie na
     nim: kontener ma box-sizing: content-box, więc obramowanie na nim
     objęłoby treść plus boczne dopełnienie i wyszłoby szersze niż
     kreski rozdzielające sekcje. */
  padding-bottom: var(--header-pad);
  border-bottom: 1px solid var(--ink);
}

.site-header__logo { display: block; flex: 0 0 auto; line-height: 0; }
.site-header__logo img { width: var(--logo-w); height: auto; }

/* Nawigacja stoi przy prawej krawędzi, tak jak w oryginale: logo
   zostaje po lewej, a wolna przestrzeń zbiera się między nimi. */
.site-nav { margin-left: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__item { position: static; }

/* Pozycje otwierające panel to <button>, nie <a> — nie prowadzą pod
   żaden adres, a klawiatura musi je rozpoznać jako przełącznik. */
.site-nav__link {
  display: block;
  font-family: var(--sans);
  font-size: var(--nav-fs);
  line-height: var(--nav-lh);
  height: var(--nav-lh);
  padding: 0 10px;
  color: var(--nav-color);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Daszek przy pozycjach, które coś rozwijają. Pozycje-odnośniki
   (Kontakt) są znacznikiem <a> i daszka nie dostają — dzięki temu
   widać, co się otworzy, a co przeniesie na stronę. */
button.site-nav__link::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}

.site-nav__item.is-open > button.site-nav__link::after {
  transform: translateY(1px) rotate(-135deg);
}

.site-nav__link:hover,
.site-nav__item.is-open > .site-nav__link { color: var(--blue); }

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-search-toggle {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.site-search-toggle:hover { color: var(--blue); }
.site-search-toggle svg { display: block; width: 20px; height: 20px; }

/* --- Panel mega menu --- */

/* Panel wychodzi poza kontener na pełną szerokość okna, dlatego
   zaczepiony jest o pasek, a nie o pozycję menu. */
.mega {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: var(--white);
  border-top: 1px solid var(--gray);
  padding: 40px 0 50px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease-out, transform .2s ease-out, visibility .2s;
}

.site-nav__item.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__item.is-open .mega--siatka { transform: translateX(-50%); }

.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

/* Katalog warsztatów ma ponad dwadzieścia pozycji — jedna kolumna
   rozciągnęłaby panel na całą wysokość okna. */
.mega__col--wide { grid-column: span 2; }

.mega__heading {
  font-family: var(--sans);
  font-size: var(--mega-fs);
  font-weight: 600;
  line-height: 24px;
  color: var(--ink);
  margin: 0 0 16px;
}

.mega__list { list-style: none; margin: 0; padding: 0; }

.mega__list a {
  display: block;
  font-size: var(--mega-link-fs);
  line-height: 22px;
  color: var(--nav-color);
  text-decoration: none;
  padding: 5px 0;
}

.mega__list a:hover { color: var(--blue); }

/* Katalog w dwóch kolumnach wewnątrz szerokiej komórki. */
.mega__list--split { columns: 2; column-gap: var(--grid-gap); }
.mega__list--split li { break-inside: avoid; }

.mega__lead { font-size: var(--fs-small); line-height: 25px; margin: 0 0 20px; }

/* --- Panel kart: miniatura, odnośnik, opis --- */

/* Ten panel nie idzie przez całą szerokość okna, tylko wisi pod swoją
   pozycją — dlatego jego pozycja liczy się od niej, a nie od paska. */
.site-nav__item--karty { position: relative; }

.mega--karty {
  /* Panel rozwija się w lewo: jego prawa krawędź trzyma się pozycji
     w menu. Wypuszczony w prawo wychodziłby poza pasek przy ostatnich
     pozycjach. */
  left: auto;
  right: 0;
  width: 620px;
  /* Kreska u góry jest zbędna — panel odcina się od strony cieniem. */
  border-top: 0;
  max-width: calc(100vw - 80px);
  padding: 34px 40px 40px;
  box-shadow: 0 24px 48px rgba(16, 24, 32, .12);
}

.mega__naglowek {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 30px;
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 18px;
}

.mega__naglowek::after,
.mega__karta-tytul::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: margin-left .2s;
}

.mega--karty .mega__lead {
  font-size: var(--fs-small);
  line-height: 26px;
  margin: 0 0 30px;
  color: var(--ink);
}

.mega__karta {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  text-decoration: none;
  padding: 14px 0;
}

.mega__karta img {
  flex: 0 0 140px;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
}

.mega__karta-tresc { display: block; min-width: 0; }

.mega__karta-tytul {
  display: block;
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 30px;
  color: var(--blue);
  margin-bottom: 8px;
}

.mega__karta-opis {
  display: block;
  font-size: var(--fs-small);
  line-height: 26px;
  color: var(--ink);
}

.mega__karta:hover .mega__karta-tytul::after,
.mega__naglowek:hover::after { margin-left: 18px; }

/* Welon przykrywa treść pod otwartym panelem — na oryginale
   odcina wzrok od strony, zamiast przyciemniać panel. */
.site-veil {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  bottom: 0;
  background: var(--veil);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease-out, visibility .2s;
  z-index: 99;
}

.site-veil.is-visible { opacity: 1; visibility: visible; }

/* --- Menu mobilne --- */

.site-nav-toggle {
  display: none;
  width: 28px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.site-nav-toggle span,
.site-nav-toggle::before,
.site-nav-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: transform .2s ease-out, opacity .2s ease-out;
}

.site-nav-toggle::before { top: 0; }
.site-nav-toggle span { top: 9px; }
.site-nav-toggle::after { bottom: 0; }

.site-nav-toggle[aria-expanded="true"]::before { transform: translateY(9px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] span { opacity: 0; }
.site-nav-toggle[aria-expanded="true"]::after { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 1225px) {
  :root { --logo-w: 170px; --header-pad: 17px; --header-h: 66px; }

  .site-nav-toggle { display: block; }

  /* Panel wysuwany: ciemne tło i większy tekst, jak na oryginale
     (22px, biały) — na dotyku pozycje muszą być łatwe do trafienia. */
  .site-nav {
    position: fixed;
    margin-left: 0;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ink);
    padding: 30px 24px 60px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .2s ease-out;
  }

  .site-nav.is-open { transform: translateX(0); }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .site-nav__link {
    width: 100%;
    text-align: left;
    font-size: 22px;
    line-height: 32px;
    height: auto;
    padding: 14px 0;
    color: var(--white);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
  }

  .site-nav__link:hover,
  .site-nav__item.is-open > .site-nav__link { color: var(--white); }

  .mega {
    position: static;
    background: none;
    border: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .site-nav__item.is-open .mega { display: block; padding: 10px 0 20px; }

  .mega__grid { grid-template-columns: 1fr; gap: 24px; }
  .mega__col--wide { grid-column: auto; }
  .mega__heading { color: var(--white); }
  .mega__list a { color: var(--white); font-size: 16px; line-height: 26px; }
  .mega__list--split { columns: 1; }
  .mega__lead { color: var(--white); }

  /* Na wąskim ekranie panel kart zachowuje się jak pozostałe: pełna
     szerokość wysuwanego menu, bez cienia i miniatur. */
  .mega--karty {
    width: auto;
    max-width: none;
    padding: 0;
    box-shadow: none;
  }

  .site-nav__item--karty { position: static; }
  .mega--karty .mega__lead { display: none; }
  .mega__karta img { display: none; }
  .mega__karta { padding: 8px 0; }
  .mega__naglowek,
  .mega__karta-tytul { color: var(--white); font-size: 18px; line-height: 26px; }
  .mega__karta-opis { color: var(--white); font-size: 15px; line-height: 22px; }

  /* Welon jest zbędny, gdy menu zajmuje cały ekran. */
  .site-veil { display: none; }
}


/* ============================================================
   8. STOPKA
   ------------------------------------------------------------
   Wartości 1:1 z franklincovey.com. Cztery kolumny: znak i nota
   prawna zajmują resztę szerokości, trzy listy odnośników po 20%.
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: 105px 0;
  margin-top: 100px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: auto repeat(3, 20%);
  gap: var(--grid-gap);
}

.site-footer__brand { display: flex; flex-direction: column; }
.site-footer__brand img { width: 91px; height: auto; margin-bottom: 90px; }

.site-footer__copy {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* Telefon pod notą prawną — ten sam kolor co linki kolumn. */
.site-footer__copy + .site-footer__copy { margin-top: 10px; }
.site-footer__copy a { color: var(--white); text-decoration: none; }
.site-footer__copy a:hover { color: var(--blue); }

.site-footer__heading {
  color: var(--white);
  font-family: var(--sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 28px;
  margin: 0 0 18px;
}

.site-footer__menu { list-style: none; margin: 0; padding: 0; }

.site-footer__menu a {
  display: block;
  font-size: 12px;
  line-height: 19px;
  color: var(--white);
  text-decoration: none;
  margin: 10px 0;
}

.site-footer__menu a:hover { color: var(--blue); }

@media (max-width: 960px) {
  .site-footer { padding: 50px 0; margin-top: 50px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__brand img { margin-bottom: 30px; }
  .site-footer__copy { margin-top: 0; }
}

@media (max-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   9. PRZYCISKI STRONY GŁÓWNEJ
   ------------------------------------------------------------
   Odmiany, których nie było w rozdziale 5: przycisk na wideo
   i przycisk pobrania ze strzałką.
   ============================================================ */
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
}

.btn-outline-white:hover { background: var(--white); color: var(--ink); }

.btn-primary {
  background: var(--blue);
  color: var(--white);
  border: 1px solid var(--blue);
}

/* Strzałka pobrania: grot na trzonie nad kreską podstawy — inaczej
   sam daszek czyta się jak „rozwiń", nie jak „pobierz". Rysunek idzie
   maską, a nie obrazkiem tła, żeby brał kolor z currentColor: przycisk
   po najechaniu zmienia kolor tekstu i ikona musi iść za nim. */
.btn-download::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 14px;
  margin-left: 10px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: var(--ikona-pobierania) no-repeat center / contain;
  mask: var(--ikona-pobierania) no-repeat center / contain;
}


/* ============================================================
   10. BLOKI STRONY GŁÓWNEJ
   ------------------------------------------------------------
   Selektory i wartości 1:1 z franklincovey.com
   (themes/franklincovey/css/styles.min.css 1.19.4, 2026-09-07).
   Każdy blok trzyma przy sobie własną warstwę responsywną —
   inaczej trzeba by szukać jego reguł w dwóch miejscach.
   ============================================================ */

/* --- 1. Hero z wideo --- */
/* Wideo idzie przez całą szerokość okna, ale treść siedzi w kontenerze,
   więc jej lewa krawędź stoi w jednej linii z resztą strony. Oryginał
   odsuwa treść stałym paddingiem 88px i przy szerokim oknie rozjeżdża
   się z sekcjami niżej. */
.block.block-hero-video-fw {
  position: relative;
  padding: 209px 0 70px;
  overflow: hidden;
}

.block.block-hero-video-fw video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.block.block-hero-video-fw .overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .1);
  z-index: 1;
}

.block.block-hero-video-fw .hero-content {
  position: relative;
  width: 100%;
  max-width: 524px;
  z-index: 2;
}

/* Oryginał podstawia tu grafikę z napisem. Trzymamy żywy tekst:
   po polsku i tak potrzebny byłby nowy plik, a tekst czyta
   wyszukiwarka i czytnik ekranu. */
.block.block-hero-video-fw h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 72px;
  line-height: 78px;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}

.block.block-hero-video-fw h1 sup { font-size: .32em; top: -1.05em; }

.block.block-hero-video-fw .subtitle {
  margin: 30px 0;
  font-size: 30px;
  line-height: 43px;
  color: var(--white);
}

@media (max-width: 960px) {
  .block.block-hero-video-fw { padding: 0 0 20px; }
  .block.block-hero-video-fw .container { padding-left: 0; padding-right: 0; }
  .block.block-hero-video-fw video { position: relative; height: 250px; }
  .block.block-hero-video-fw .overlay { height: 250px; }
  .block.block-hero-video-fw .hero-content {
    max-width: none;
    padding: 21px 18px 36px 33px;
    background-color: #151928;
  }
  .block.block-hero-video-fw h1 { font-size: 42px; line-height: 46px; }
  .block.block-hero-video-fw .subtitle { font-size: 22px; line-height: 30px; margin: 20px 0; }
}

/* --- 2. Kolorowe odnośniki (format mały) --- */
.block.block-colorful-link-farm.format-small { padding: 90px 0 0; }

/* ⚠️ Świadome odejście od oryginału: franklincovey.com daje tu 36/40,
   my dajemy 60/68 (decyzja foundera 2026-09-07). To czwarty rozmiar
   nagłówka w systemie — jest tylko w tym bloku i nie stał się tokenem,
   żeby nie rozlał się na resztę strony. */
.block.block-colorful-link-farm.format-small h2 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 60px;
  line-height: 68px;
  margin: 0 0 40px;
  max-width: 90%;
  text-wrap: balance;
}

/* Ręczne łamanie wiersza w nagłówku tego bloku — decyzja redakcyjna,
   nie automat. Na telefonie zbędne, bo tekst i tak łamie się sam. */
.block.block-colorful-link-farm .lamanie-reczne { display: inline; }

.block.block-colorful-link-farm .farm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 75px 80px;
}

.block.block-colorful-link-farm .farm-link a {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 700;
  color: #000;
  padding-bottom: 3px;
  transition: color .2s;
}

/* Hover musi stać TU, przy regule bloku. Wersja z rozdziału 5
   (.farm-link a:hover) ma niższą specyficzność niż selektor wyżej
   i nigdy nie dochodziła do głosu. */
.block.block-colorful-link-farm .farm-link:hover a,
.block.block-colorful-link-farm .farm-link a:focus-visible { color: var(--blue); }

/* Strzałka przy pozycji — trójkąt z obramowania zamiast sprite'u PNG. */
.block.block-colorful-link-farm .farm-link::before {
  content: "";
  position: absolute;
  right: 0;
  top: 14px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: border-color .2s;
}

.block.block-colorful-link-farm .farm-link:hover::before { border-color: var(--blue); }

@media (max-width: 960px) {
  /* Sześćdziesiątka nie mieści się na tablecie — schodzi płynnie do 34px. */
  .block.block-colorful-link-farm.format-small h2 {
    font-size: clamp(30px, 5.6vw, 44px);
    line-height: 1.18;
    max-width: none;
  }
  .block.block-colorful-link-farm .farm-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .block.block-colorful-link-farm .farm-link a { font-size: 18px; line-height: 26px; padding-right: 40px; }
}

@media (max-width: 640px) {
  .block.block-colorful-link-farm .lamanie-reczne { display: none; }
  .block.block-colorful-link-farm.format-small { padding-top: 50px; }
  .block.block-colorful-link-farm.format-small h2 { font-size: 22px; line-height: 28px; }
  .block.block-colorful-link-farm .farm-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --- 3. i 8. Kafle materiałów --- */
/* Odstęp sekcji jest o 20px mniejszy, niż wygląda: brakujące 20px
   dokłada padding siatki niżej, jako miejsce na uniesienie kafla.
   Razem daje to 50px (25px w wariancie małym), czyli tyle co oryginał. */
.block.block-lead-gen { padding-top: calc(var(--section-gap) - 20px); }
.block.block-lead-gen.format-small { padding-top: calc(var(--section-gap) - 20px); }

.block.block-lead-gen .gen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  /* Kontener strony ma overflow-x: hidden, a to w przeglądarce wymusza
     przycinanie także w pionie. Uniesiony kafel musi mieć zapas WEWNĄTRZ
     kontenera — ujemny margines by go z niego wyprowadził i kafel dalej
     byłby ucinany. Odstęp odbiera sobie sekcja wyżej. */
  padding-top: 20px;
}

/* Kafel unosi się na najechaniu — stąd otoczka z position: relative,
   żeby ruch nie przesuwał sąsiadów w siatce. */
.block.block-lead-gen .inner-container { position: relative; height: 100%; }

.block.block-lead-gen .gen-inner {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Oryginał daje 50/45. Przy krótszych polskich tytułach zostawiało
     to puste pasy po bokach — decyzja foundera 2026-09-07. */
  padding: 34px 30px;
  border-radius: 8px;
  min-height: 410px;
  color: var(--ink);
  text-decoration: none;
  transition: top .35s;
}

.block.block-lead-gen .gen-inner:hover,
.block.block-lead-gen .gen-inner:focus-visible { top: -20px; transition-delay: .2s; }

.block.block-lead-gen .gen-inner.bg-color-black { background: var(--ink); color: var(--white); }
.block.block-lead-gen .gen-inner.bg-color-gray  { background: var(--gray); color: var(--ink); }

.block.block-lead-gen .gen-category {
  font-size: var(--fs-small);
  line-height: 25px;
  margin: 0 0 25px;
}

.block.block-lead-gen .gen-inner .title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  margin: 0 0 25px;
}

.block.block-lead-gen .gen-text p { font-size: 20px; margin: 0; }

/* Przycisk trzyma się dna kafla, żeby rząd kafli miał wspólną linię
   przycisków niezależnie od długości tytułu. */
.block.block-lead-gen .gen-buttons { margin-top: auto; padding-top: 30px; }

.block.block-lead-gen .gen-inner:hover .btn-primary,
.block.block-lead-gen .gen-inner:focus-visible .btn-primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue);
}

@media (max-width: 960px) {
  .block.block-lead-gen .gen-grid { grid-template-columns: repeat(2, 1fr); }
  .block.block-lead-gen .gen-inner { padding: 25px; min-height: 0; }
}

@media (max-width: 640px) {
  .block.block-lead-gen .gen-grid { grid-template-columns: 1fr; }
}

/* --- 4. Liczby --- */
/* Górna kreska liczb pełni tę samą rolę co kreska między sekcjami,
   więc odstęp nad nią i pod nią jest taki sam jak tam: połowa
   odstępu sekcji z każdej strony. */
.block.block-stats { padding: calc(var(--section-gap) / 2) 0 0; }
.block.block-stats + section.block { padding-top: calc(var(--section-gap) / 2); }

/* Kreski domykają liczby z góry i z dołu — na szerokość treści, więc
   stoją w jednej linii z krawędziami tekstu w sekcjach obok. */
.block.block-stats .columns {
  display: grid;
  /* Liczba kolumn wynika z liczby pozycji, nie ze sztywnego czterech:
     strona główna ma cztery liczby, podstrona trzy. Przy repeat(4, 1fr)
     trzy pozycje zostawiały pustą kolumnę i zjeżdżały w lewo. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* Oryginał zamyka liczby kreskami poziomymi nad i pod sekcją, a kolumn
   nie rozdziela — arkusz motywu ma jeszcze border-right po starszej
   wersji układu, na żywej stronie już go nie widać. */
.block.block-stats .column {
  text-align: center;
  /* Oryginał daje 35px, ale tam kreski są osobnymi elementami z własnym
     marginesem i stoją dalej. U nas kreska to obramowanie siatki, więc
     odstęp musi dać sam odstęp kolumny. */
  padding: 90px 0;
}

.block.block-stats .stat-number {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.block.block-stats .description,
.block.block-stats .top-sentence {
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 25px;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* Wariant z wprowadzeniem: zdanie stoi NAD liczbą, a dopowiedzenie pod
   nią — liczba jest wtedy środkiem zdania, nie jego nagłówkiem. Tekst
   idzie rozmiarem strony, bo to zdanie do przeczytania, nie podpis. */
.block.block-stats.z-wprowadzeniem .description,
.block.block-stats.z-wprowadzeniem .top-sentence {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 26ch;
}

.block.block-stats.z-wprowadzeniem .top-sentence { margin-bottom: 20px; }
.block.block-stats.z-wprowadzeniem .stat-number { margin-bottom: 20px; }

/* Kreska górna jest zbędna, gdy nad sekcją stoi już panel. */
.block.block-stats.z-wprowadzeniem .columns { border-top: 0; }
.block.block-stats.z-wprowadzeniem .column { padding: 0 0 40px; }

@media (max-width: 960px) {
  .block.block-stats .columns {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }
  .block.block-stats .stat-number { font-size: 60px; line-height: 80px; }
}

@media (max-width: 640px) {
  .block.block-stats .columns { grid-auto-flow: row; grid-template-columns: 1fr; }
  .block.block-stats .column { padding: 48px 0; }
}

/* --- 5. Teza --- */
.block.block-intro-text { padding: var(--section-gap) 0 0; }

.block.block-intro-text .intro-flex { display: flex; }

.block.block-intro-text .intro-headings { max-width: 690px; min-width: 575px; }

.block.block-intro-text .intro-headings h2 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  margin: 0;
}

.block.block-intro-text .intro-text { margin-left: 125px; min-width: 180px; }
.block.block-intro-text .intro-text p { margin-bottom: 35px; }
.block.block-intro-text .intro-text .list-bullets { margin: 0 0 35px; }
.block.block-intro-text .intro-text .list-bullets li { margin-bottom: 16px; }
.block.block-intro-text .intro-text p:last-of-type { margin-bottom: 0; }
.block.block-intro-text .intro-btn { margin-top: 40px; }

@media (max-width: 960px) {
  .block.block-intro-text { padding-top: 90px; }
  .block.block-intro-text .intro-flex { display: block; }
  .block.block-intro-text .intro-headings { min-width: 0; max-width: none; }
  .block.block-intro-text .intro-headings h2 { font-size: clamp(28px, 5.2vw, 35px); line-height: 1.15; }
  .block.block-intro-text .intro-text { margin: 40px 0 0; }
}

/* --- 6. Webcast --- */
.block.block-webcast { padding-top: var(--section-gap); }

.block.block-webcast .webcast-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.block.block-webcast img.webcast-main { width: 100%; display: block; }

/* Panel siedzi w prawym dolnym rogu zdjęcia — na wąskim ekranie
   schodzi pod nie, bo przykryłby całą fotografię. */
.block.block-webcast .webcast-text {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  background-color: var(--ink);
  padding: 40px 50px;
}

.block.block-webcast .webcast-text h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--white);
  margin: 0 0 25px;
}

.block.block-webcast .webcast-text p {
  color: var(--white);
  font-size: var(--fs-small);
  line-height: 25px;
  margin: 0 0 25px;
}

@media (max-width: 960px) {
  .block.block-webcast { padding-top: 90px; }
  .block.block-webcast .webcast-text { position: relative; width: auto; }
}

/* --- 7. Co nowego --- */
.block.block-whats-new { padding-top: var(--section-gap); }

.block.block-whats-new .fw-flex { display: flex; }

.block.block-whats-new .fw-intro {
  position: relative;
  max-width: 718px;
  min-width: 718px;
}

/* Zdjęcia leżą jedno na drugim i przełączają się razem z pozycją
   listy — stąd pierwsze trzyma wysokość, a reszta jest oderwana. */
.block.block-whats-new .fw-intro img {
  border-radius: 8px;
  transition: opacity .5s ease-out;
  opacity: 0;
}

.block.block-whats-new .fw-intro img:first-child { position: relative; }
.block.block-whats-new .fw-intro img + img { position: absolute; left: 0; top: 0; }
.block.block-whats-new .fw-intro img.is-active { opacity: 1; }

.block.block-whats-new .fw-text { padding-left: 90px; flex: 1 1 auto; min-width: 0; }

.block.block-whats-new .text-title {
  /* To jest h2, a globalna reguła daje h2 krój szeryfowy. Tu ma być
     Rand — bez tej linii nagłówek renderował się TiemposFine. */
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 0 0 65px;
}

.block.block-whats-new .fw-text a {
  display: block;
  margin-bottom: 60px;
  border-bottom: 4px solid;
  text-decoration: none;
  color: var(--ink);
}

.block.block-whats-new .fw-text a:last-child { margin-bottom: 0; }

.block.block-whats-new .fw-text a .title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 36px;
  line-height: 39px;
  margin: 0 0 14px;
  color: #000;
}

.block.block-whats-new .fw-text a .title::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 20px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  position: relative;
  left: 0;
  top: -4px;
  transition: left .35s;
}

.block.block-whats-new .fw-text a:hover { color: var(--blue); }
.block.block-whats-new .fw-text a:hover .title { color: var(--blue); }
.block.block-whats-new .fw-text a:hover .title::after { left: 15px; }

/* Opis pod tytułem nie ma w oryginale własnego rozmiaru — bierze
   go z tekstu strony, czyli 22/35. Wcześniej ustawiłem tu 18/25
   i podpisy wychodziły drobniejsze niż na wzorcu. */
.block.block-whats-new .fw-text a p { margin: 0 0 30px; }

.block.block-whats-new .fw-text a.color-blue       { border-color: var(--blue); }
.block.block-whats-new .fw-text a.color-green      { border-color: #62D99B; }
.block.block-whats-new .fw-text a.color-purple     { border-color: #A191F2; }
.block.block-whats-new .fw-text a.color-red        { border-color: #FF585D; }
.block.block-whats-new .fw-text a.color-yellow     { border-color: #FFB93C; }
.block.block-whats-new .fw-text a.color-light-blue { border-color: #67DFFF; }
.block.block-whats-new .fw-text a.color-black      { border-color: var(--ink); }

@media (max-width: 960px) {
  .block.block-whats-new { padding-top: 90px; }
  .block.block-whats-new .fw-flex { display: block; }
  .block.block-whats-new .fw-intro { display: none; }
  .block.block-whats-new .fw-text { padding-left: 0; }
  .block.block-whats-new .text-title { margin-bottom: 40px; }
  .block.block-whats-new .fw-text a { margin-bottom: 40px; }
  .block.block-whats-new .fw-text a .title { font-size: clamp(24px, 4.2vw, 30px); line-height: 1.2; }
}

/* --- 9. Historie klientów --- */
.block.block-customer-stories { padding-top: var(--section-gap); overflow: hidden; }

.block.block-customer-stories h2.title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-large);
  line-height: var(--lh-large);
  margin: 0 0 75px;
}

/* Harmonijka pozioma: rozwinięta pozycja zabiera trzykrotność
   szerokości pozostałych, zwinięte zostają wąskimi kolumnami. */
.block.block-customer-stories .accordion {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  /* Szerokość treści rozwiniętej historii. Jedna wartość dla zdjęcia,
     tekstu i samej karty — inaczej karta rośnie szerzej niż to, co
     w niej stoi, i z prawej zostaje pusty pas. */
  --historia-tresc: 330px;
  --historia-pad: 16px;
}

/* min-width: 0 jest konieczne — bez niego element flex nie zwęża się
   poniżej szerokości swojej treści i długie nazwy klientów rozpychają
   cały rząd. */
.block.block-customer-stories .item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 8px;
  transition: flex .4s, background .4s;
}

.block.block-customer-stories .item.active {
  flex: 0 0 calc(var(--historia-tresc) + 2 * var(--historia-pad));
  background: var(--gray);
  padding: var(--historia-pad);
}

/* Nagłówek ma STAŁĄ wysokość dwóch wierszy, nie minimalną: przy
   min-height dłuższa nazwa rozpychała swoją kolumnę i jej zdjęcie
   zjeżdżało niżej niż sąsiednie. Od tej wysokości liczy się też
   położenie przełącznika w stanie zwiniętym. */
.block.block-customer-stories .item-header {
  height: 80px;
  margin-bottom: 20px;
}

.block.block-customer-stories .item-header h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 36px;
  line-height: 40px;
  margin: 0;
  padding-right: 45px;
  /* Nazwy dłuższe niż dwa wiersze zostają przycięte — równa wysokość
     nagłówków jest ważniejsza niż pokazanie całej nazwy w kolumnie,
     która i tak jest tylko zapowiedzią. Po rozwinięciu nazwa wraca
     w całości. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block.block-customer-stories .item.active .item-header {
  height: auto;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.block.block-customer-stories .item.active .item-header h3 {
  -webkit-line-clamp: none;
  overflow: visible;
}

/* Przełącznik: niebieskie koło ze znakiem. Pionowa kreska znika po
   rozwinięciu i plus zamienia się w minus — bez dwóch plików SVG. */
.block.block-customer-stories .item-toggle {
  position: absolute;
  right: 20px;
  top: 120px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  z-index: 1;
  transition: top .2s, right .2s;
}

.block.block-customer-stories .item-toggle::before,
.block.block-customer-stories .item-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  transition: opacity .2s;
}

.block.block-customer-stories .item-toggle::before { width: 12px; height: 2px; }
.block.block-customer-stories .item-toggle::after  { width: 2px; height: 12px; }

/* Po rozwinięciu przełącznik przenosi się na wysokość nazwy klienta. */
.block.block-customer-stories .item.active .item-toggle { top: 16px; right: 16px; }
.block.block-customer-stories .item.active .item-toggle::after { opacity: 0; }

/* Zwinięta pozycja pokazuje samo zdjęcie; treść i kadr poziomy
   pojawiają się dopiero po rozwinięciu. */
.block.block-customer-stories .story-flex { display: block; }
.block.block-customer-stories .story-text { display: none; }

.block.block-customer-stories img.main-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  filter: grayscale(1);
  transition: filter .25s;
}

/* Po rozwinięciu zdjęcie i tekst idą jedną kolumną: najpierw kadr,
   pod nim treść. */
.block.block-customer-stories .item.active .story-flex { display: block; }

/* Rozwinięta karta jest szeroka na trzy czwarte rzędu, więc zdjęcie
   na pełną szerokość zajmowałoby pół ekranu. Stała szerokość 330px
   i wysokość z proporcji pliku — nic nie jest kadrowane. Tę samą
   szerokość dostaje tekst pod spodem. */
.block.block-customer-stories .item.active img.main-image {
  width: var(--historia-tresc);
  height: auto;
  aspect-ratio: auto;
  object-fit: fill;
  filter: grayscale(0);
  margin-bottom: 30px;
}

.block.block-customer-stories .item.active .story-text {
  display: block;
  max-width: var(--historia-tresc);
  font-size: 18px;
  line-height: 28px;
}

.block.block-customer-stories .story-kicker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  margin: 0 0 18px;
}

/* Akapit z przyciskiem musi być bardziej szczegółowy niż reguła
   zerująca marginesy akapitów obok — inaczej odstęp nad przyciskiem
   przepada w kaskadzie. */
.block.block-customer-stories .story-text p { margin: 0; }
.block.block-customer-stories .story-text p.cta-container { margin-top: 40px; }

@media (max-width: 1225px) {
  .block.block-customer-stories .accordion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .block.block-customer-stories .item,
  .block.block-customer-stories .item.active { flex: none; }
  .block.block-customer-stories .item.active { width: auto; }
  .block.block-customer-stories .item.active { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .block.block-customer-stories { padding-top: 90px; }
  .block.block-customer-stories h2.title {
    font-size: clamp(32px, 6vw, 48px);
    line-height: 1.2;
    margin-bottom: 25px;
  }
  .block.block-customer-stories .item-header h3 { font-size: 27px; line-height: 32px; }
  .block.block-customer-stories .item-header { height: 64px; }
  .block.block-customer-stories .item-toggle { top: 104px; }
}

@media (max-width: 640px) {
  .block.block-customer-stories .accordion { grid-template-columns: 1fr; }
  .block.block-customer-stories .item.active img.main-image,
  .block.block-customer-stories .item.active .story-text { width: 100%; max-width: none; }
}

/* --- 10. Pasek zamykający --- */
.block.block-full-width-desc { padding-top: var(--section-gap); }

.block.block-full-width-desc .fw-flex { display: flex; }
.block.block-full-width-desc .fw-intro { max-width: 750px; }

.block.block-full-width-desc .fw-intro h2 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  margin: 0 0 25px;
}

.block.block-full-width-desc .fw-intro h2 sup { font-size: 26px; top: -.75em; }

.block.block-full-width-desc .fw-text {
  max-width: 435px;
  flex-grow: 1;
  padding-left: 50px;
  border-left: 1px solid #000;
  margin-left: 50px;
}

.block.block-full-width-desc .fw-text p { font-size: var(--fs-small); line-height: 25px; margin-bottom: 25px; }

@media (max-width: 960px) {
  .block.block-full-width-desc { padding-top: 90px; }
  .block.block-full-width-desc .fw-flex { display: block; }
  .block.block-full-width-desc .fw-intro h2 { font-size: clamp(28px, 5.2vw, 35px); line-height: 1.15; }
  .block.block-full-width-desc .fw-text {
    max-width: none;
    margin: 40px 0 0;
    padding-left: 0;
    border-left: 0;
  }
}


/* ============================================================
   11. BLOKI PODSTRONY „DLACZEGO FRANKLINCOVEY"
   ------------------------------------------------------------
   Wartości 1:1 z https://www.franklincovey.com/why-franklincovey/
   (styles.min.css 1.19.4, pomiar 2026-09-07).
   ============================================================ */

/* --- Hero z ramką wideo --- */
.block.block-video-hero { padding: 0; }

/* Dwie kolumny o ustalonym podziale: tekst dostaje więcej miejsca, bo
   nagłówek ma 85px, a wideo wypełnia swoją kolumnę w całości. Oryginał
   trzyma tu sztywne 610px, ale ma nagłówek 48px. */
.block.block-video-hero .hero-flex {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}

.block.block-video-hero .hero-content { min-width: 0; }

.block.block-video-hero .hero-eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  margin: 0 0 15px;
}

.block.block-video-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-large);
  line-height: var(--lh-large);
  margin: 0 0 30px;
  text-wrap: balance;
}

/* Drugi nagłówek jest szeryfowy jak pierwszy, tylko mniejszy —
   to ciąg dalszy myśli z H1, nie osobna sekcja. */
.block.block-video-hero .hero-sub {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  max-width: 600px;
  margin: 0 0 20px;
}

.block.block-video-hero .hero-lead {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 600px;
  margin: 0;
}

/* Ramka 16:9. Oryginał liczy wysokość skryptem przy każdej zmianie
   okna; aspect-ratio robi to samo bez JavaScriptu. */
.block.block-video-hero .video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}

.block.block-video-hero .video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Przycisk odtwarzania jest prawdziwym sterowaniem, nie ozdobą:
   wideo startuje dopiero po kliknięciu, a przycisk wtedy znika. */
.block.block-video-hero .video-play,
.block.block-video-player .video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 24, 32, .45);
  cursor: pointer;
  transition: background .2s, opacity .2s;
}

.block.block-video-hero .video-play:hover,
.block.block-video-player .video-play:hover { background: rgba(16, 24, 32, .65); }

/* Trójkąt z obramowania — bez pliku graficznego. */
.block.block-video-hero .video-play::after,
.block.block-video-player .video-play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--white);
}

.block.block-video-hero .video-frame.is-playing .video-play,
.block.block-video-player .video-frame.is-playing .video-play { opacity: 0; pointer-events: none; }

@media (max-width: 960px) {
  .block.block-video-hero .hero-flex { display: block; }
  .block.block-video-hero .hero-content { margin-right: 0; }
  .block.block-video-hero h1 { font-size: clamp(36px, 6.6vw, 52px); line-height: 1.12; margin-bottom: 20px; }
  .block.block-video-hero .hero-sub { font-size: clamp(24px, 4.4vw, 30px); line-height: 1.25; }
  .block.block-video-hero .hero-lead { max-width: none; }
  .block.block-video-hero .video-frame { margin-top: 40px; }
  .block.block-video-hero .video-play,
.block.block-video-player .video-play { width: 64px; height: 64px; }
}

/* --- Siatka numerowana na tle --- */
/* Odstęp przez padding, nie margines: po kresce rozdzielającej reguła
   `.section-divider + section.block` obniża go do połowy — margines
   dokładałby się do tamtego paddingu i sekcja odjeżdżała o 210px. */
.block.block-numbered-grid { padding-top: var(--section-gap); }

/* Tło jest panelem wewnątrz kontenera, nie tłem całej sekcji —
   kończy się tam, gdzie kończy się treść, i ma zaokrąglone rogi. */
.block.block-numbered-grid .grid-panel {
  padding: 60px 48px;
  border-radius: 8px;
}

/* Nagłówek zostaje przy domyślnym kroju h2 z rozdziału 4: TiemposFine
   300, 36/39. Reguła .title z arkusza oryginału (Rand 600, 22/36)
   dotyczy innego wariantu tego bloku. */
.block.block-numbered-grid .grid-title {
  max-width: 800px;
  margin: 0 0 40px;
}

.block.block-numbered-grid .columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

/* Kolumny rozciągają się do równej wysokości, więc kreski pod nimi
   stoją w jednej linii niezależnie od długości tekstu. */
.block.block-numbered-grid .column {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 30px;
}

.block.block-numbered-grid .heading {
  font-weight: 700;
  margin: 0 0 16px;
}

@media (max-width: 960px) {
  .block.block-numbered-grid .grid-panel { padding: 40px 24px; }
  .block.block-numbered-grid .columns { grid-template-columns: 1fr; gap: 36px; }
}

/* --- Zdjęcie pełnej szerokości --- */
/* Odstęp przez padding, nie margines — po kresce rozdzielającej
   reguła `.section-divider + section.block` obniża go do połowy. */
.block.block-photo { padding-top: var(--section-gap); }

.block.block-photo img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  /* Kadr trzyma się górnej części zdjęcia — przy wyśrodkowaniu twarz
     wychodziła poza ramkę. */
  object-position: center 12%;
  border-radius: 8px;
  display: block;
}

@media (max-width: 960px) {
  .block.block-photo img { height: 240px; }
}

/* --- Dwie kolumny tekstu --- */
/* Tekst należy do zdjęcia nad nim, więc trzyma się blisko — to nie
   jest nowa sekcja, tylko jej podpis rozwinięty do dwóch kolumn. */
.block.block-two-columns { padding-top: 30px; }

.block.block-two-columns .columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
}

.block.block-two-columns p { margin-bottom: 35px; }
.block.block-two-columns p:last-child { margin-bottom: 0; }

@media (max-width: 960px) {
  .block.block-two-columns .columns { grid-template-columns: 1fr; gap: 35px; }
}

/* --- Sekcja z formularzem --- */
.block.block-full-width-form { padding-top: var(--section-gap); }

/* Formularz ma stałą szerokość i stoi przy prawej krawędzi treści,
   a kolumna z nagłówkiem zajmuje całą resztę — inaczej po zwężeniu
   formularza sekcja zostawiała pusty pas z prawej. */
.block.block-full-width-form .fw-flex {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}

.block.block-full-width-form .fw-intro { flex: 1 1 auto; min-width: 0; }

.block.block-full-width-form .fw-intro h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-large);
  line-height: var(--lh-large);
  margin: 0 0 25px;
}

.block.block-full-width-form .fw-intro p { font-size: var(--fs-small); line-height: 25px; }

.block.block-full-width-form .fw-form { flex: 0 0 600px; max-width: 600px; }

.block.block-full-width-form .fw-form h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  margin: 0 0 30px;
}

/* Pola przeniesione 1:1 z formularza demo 4 Ról Lidera
   (franklincovey.pl/wersje-demo/4-role-lidera-demo). Wartości zapisane
   przez tokeny --cf7-* z rozdziału 2, więc formularz i reszta serwisu
   zmieniają się razem.

   Nazwy klas zachowane z tamtej strony (fc-float, fc-row, fc-form-field),
   żeby po podpięciu Contact Form 7 wystarczyło wskazać te same klasy
   w polach formularza. */
.block.block-full-width-form .fc-form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--cf7-field-gap);
}

.block.block-full-width-form .fc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cf7-field-gap);
}

.block.block-full-width-form .fc-form-field {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--cf7-field-font-size);
  line-height: var(--cf7-field-line-height);
  color: var(--cf7-field-color);
  background: var(--cf7-field-bg);
  border: var(--cf7-field-border-width) solid var(--cf7-field-border-color);
  border-radius: var(--cf7-field-radius);
  padding: var(--cf7-field-padding);
}

.block.block-full-width-form .fc-form-field:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.block.block-full-width-form .fc-form-field.jest-bledne {
  outline: 2px solid var(--cf7-error-color);
  outline-offset: 2px;
}

/* Etykieta pływająca: leży na polu jak podpowiedź, a po wejściu w pole
   albo po jego wypełnieniu wjeżdża do góry i maleje. Dlatego pole ma
   większy padding u góry — etykieta musi mieć gdzie usiąść. */
.block.block-full-width-form .fc-float { position: relative; display: block; }
.block.block-full-width-form .fc-float .fc-form-field { padding: 28px 20px 10px; }

.block.block-full-width-form .fc-float .lbl {
  position: absolute;
  left: 20px;
  top: 19px;
  font-size: var(--cf7-field-font-size);
  line-height: var(--cf7-field-line-height);
  color: var(--cf7-field-color);
  opacity: .5;
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease, opacity .18s ease;
}

.block.block-full-width-form .fc-float:focus-within .lbl,
.block.block-full-width-form .fc-float:has(.fc-form-field:not(:placeholder-shown)) .lbl,
.block.block-full-width-form .fc-float:has(select.fc-form-field) .lbl {
  top: 9px;
  font-size: 13px;
  line-height: 16px;
  opacity: .62;
}

.block.block-full-width-form .fc-float textarea.fc-form-field { min-height: 150px; resize: vertical; }

/* Strzałka listy rozwijanej rysowana w tle, bo natywna różni się
   między przeglądarkami i nie da się jej dopasować do reszty pól. */
.block.block-full-width-form select.fc-form-field {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 20px;
  padding: 28px 52px 10px 20px;
}

.block.block-full-width-form select.fc-form-field:has(option[value=""]:checked) { color: rgba(16, 24, 32, .5); }
.block.block-full-width-form select.fc-form-field option { color: var(--ink); }

.block.block-full-width-form .fc-form-consent {
  display: flex;
  gap: 12px;
  font-size: 13px;
  line-height: 20px;
  color: var(--cf7-text-color);
}

.block.block-full-width-form .fc-form-consent input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.block.block-full-width-form .fc-form-required { color: var(--blue); }

.block.block-full-width-form .fc-form-submit {
  margin-top: 8px;
  align-self: flex-start;
  background: var(--cf7-button-bg);
  color: var(--cf7-button-color);
  border: 1px solid var(--cf7-button-bg);
  border-radius: var(--cf7-button-radius);
  padding: var(--cf7-button-padding);
  font-family: var(--sans);
  font-weight: var(--cf7-button-weight);
  font-size: var(--fs-btn);
  cursor: pointer;
  transition: background .3s;
}

.block.block-full-width-form .fc-form-submit:hover { background: var(--cf7-button-bg-hover); }

@media (max-width: 960px) {
  .block.block-full-width-form .fw-flex { display: block; }
  .block.block-full-width-form .fw-form { flex: none; }
  .block.block-full-width-form .fw-intro h2 { font-size: clamp(32px, 6vw, 48px); line-height: 1.2; }
  .block.block-full-width-form .fw-form { margin-top: 40px; max-width: none; }
  .block.block-full-width-form .fc-row { grid-template-columns: 1fr; }

  /* Etykieta po wjechaniu do góry miała 13px — na telefonie za drobne. */
  .block.block-full-width-form .fc-form-field { font-size: 18px; line-height: 26px; }
  .block.block-full-width-form .fc-float .fc-form-field { padding: 30px 18px 12px; }
  .block.block-full-width-form select.fc-form-field { padding: 30px 52px 12px 18px; }
  .block.block-full-width-form .fc-float .lbl { font-size: 18px; top: 21px; left: 18px; }
  .block.block-full-width-form .fc-float:focus-within .lbl,
  .block.block-full-width-form .fc-float:has(.fc-form-field:not(:placeholder-shown)) .lbl,
  .block.block-full-width-form .fc-float:has(select.fc-form-field) .lbl {
    font-size: 15px;
    line-height: 18px;
    top: 9px;
  }
  .block.block-full-width-form .fc-form-consent { font-size: 16px; line-height: 24px; }
}


/* ============================================================
   12. BLOKI PODSTRONY „ROZWIJAJ WYBITNYCH LIDERÓW"
   ------------------------------------------------------------
   Wartości 1:1 z franklincovey.com/why-franklincovey/leadership/
   (styles.min.css 1.19.4, pomiar 2026-09-07).
   ============================================================ */

/* --- Hero z obrazem --- */
/* Kolumny wyrównane do GÓRY: nadtytuł i zdjęcie zaczynają się w jednej
   linii. Wyrównanie do dołu rozjeżdżało się, bo kolumny mają różną
   wysokość. */
.block.block-cta-hero .hero-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

.block.block-cta-hero .hero-content { flex: 1 1 auto; min-width: 0; }

.block.block-cta-hero .breadcrumbs {
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 25px;
  margin: 0 0 15px;
}

.block.block-cta-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-large);
  line-height: var(--lh-large);
  margin: 0 0 30px;
  text-wrap: balance;
}

.block.block-cta-hero .subtitle {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 550px;
  margin: 0 0 30px;
}

/* Zdjęcie ma stałe pole, a nie wynika z proporcji pliku — dzięki temu
   hero ma tę samą wysokość niezależnie od tego, co w nie wstawimy. */
.block.block-cta-hero .hero-image { flex: 0 0 610px; width: 610px; }

.block.block-cta-hero .hero-image img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

@media (max-width: 960px) {
  .block.block-cta-hero .hero-flex { display: block; }
  .block.block-cta-hero h1 { font-size: clamp(36px, 6.6vw, 52px); line-height: 1.12; }
  .block.block-cta-hero .hero-image { flex: none; width: 100%; margin-top: 40px; }
  .block.block-cta-hero .hero-image img { height: 280px; }
}

/* --- Nagłówek wprowadzający serię paneli --- */
.block.block-panels-intro .panels-intro-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 48px;
  max-width: 1100px;
  margin: 0;
}

@media (max-width: 960px) {
  .block.block-panels-intro .panels-intro-title {
    font-size: clamp(24px, 4.4vw, 32px);
    line-height: 1.3;
  }
}

/* --- Zdjęcie z tekstem ---
   Model przeniesiony z panelu demo 4 Ról Lidera (.fc-panel): panel jest
   jedną figurą na ciemnym tle, tekst i zdjęcie dzielą ją po połowie. */
.block.block-image-with-text { padding-top: 50px; }

.block.block-image-with-text .it-panel {
  display: flex;
  background: var(--ink);
  border-radius: 8px;
  overflow: hidden;
}

.block.block-image-with-text .it-panel.bg-color-gray { background: var(--gray); }

/* Panele w serii zmieniają strony: raz tekst po lewej, raz po prawej.
   Kolejność w kodzie zostaje ta sama, więc czytnik ekranu i telefon
   zawsze dostają najpierw tekst. */
.block.block-image-with-text .it-panel--odwrocony { flex-direction: row-reverse; }

.block.block-image-with-text .it-text {
  flex: 1 1 50%;
  max-width: 50%;
  min-width: 0;
  padding: 75px 55px;
  color: var(--white);
}

.block.block-image-with-text .it-panel.bg-color-gray .it-text { color: var(--ink); }

.block.block-image-with-text .it-text .heading {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 40px;
  color: inherit;
  margin: 0 0 20px;
}

.block.block-image-with-text .it-text p,
.block.block-image-with-text .it-text li {
  font-size: var(--fs-small);
  line-height: 25px;
  color: inherit;
}

.block.block-image-with-text .it-text p { margin: 0 0 30px; }
.block.block-image-with-text .it-text .list-bullets { margin: 0 0 30px; }
.block.block-image-with-text .it-text > :last-child { margin-bottom: 0; }

/* Kropki wypunktowania rysuje ::before z rozdziału 5 — na ciemnym tle
   muszą zmienić kolor razem z tekstem. */
.block.block-image-with-text .it-text .list-bullets li::before { background: currentColor; }

.block.block-image-with-text .it-image { flex: 1 1 50%; max-width: 50%; min-width: 0; }

.block.block-image-with-text .it-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 960px) {
  .block.block-image-with-text .it-panel,
  .block.block-image-with-text .it-panel--odwrocony { display: block; }

  .block.block-image-with-text .it-text,
  .block.block-image-with-text .it-image { max-width: none; }

  .block.block-image-with-text .it-text { padding: 40px 24px; }
  .block.block-image-with-text .it-text .heading { font-size: clamp(26px, 4.8vw, 32px); line-height: 1.25; }
  .block.block-image-with-text .it-image img { height: auto; aspect-ratio: 785 / 618; }
}

/* --- Kolorowe odnośniki, wariant duży --- */
.block.block-colorful-link-farm.format-large { padding-top: var(--section-gap); }

.block.block-colorful-link-farm.format-large h2 {
  /* Oryginał nie nadpisuje tu kroju, więc h2 zostaje szeryfowe —
     inaczej niż w wariancie małym na stronie głównej. */
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-large);
  line-height: var(--lh-large);
  max-width: 90%;
  margin: 0 0 25px;
}

.block.block-colorful-link-farm.format-large .farm-text {
  max-width: 50%;
  margin-bottom: 70px;
}

/* Wariant duży to katalog obszarów, nie trzy drogi — mieści cztery
   pozycje w wierszu. */
.block.block-colorful-link-farm.format-large .farm-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 960px) {
  .block.block-colorful-link-farm.format-large h2 { font-size: clamp(34px, 6vw, 48px); line-height: 1.15; }
  .block.block-colorful-link-farm.format-large .farm-text { max-width: none; margin-bottom: 40px; }
  .block.block-colorful-link-farm.format-large .farm-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .block.block-colorful-link-farm.format-large .farm-grid { grid-template-columns: 1fr; }
}

/* --- Ścieżka rozwoju --- */
.block.block-journey { padding-top: var(--section-gap); }

/* Nagłówek i wprowadzenie stoją obok siebie, tak jak w bloku tezy —
   przy nagłówku 85px jedna kolumna ciągnęła się przez pół ekranu. */
.block.block-journey .journey-head {
  display: flex;
  gap: 80px;
  margin-bottom: 60px;
}

.block.block-journey .journey-title {
  /* Kolumna nie kurczy się wcale (0 0), bo przy 85px każdy oddany
     piksel to kolejny wiersz nagłówka. Tekst obok bierze resztę. */
  flex: 0 0 760px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-large);
  line-height: var(--lh-large);
  margin: 0;
}

.block.block-journey .journey-text { flex: 1 1 auto; min-width: 0; }
.block.block-journey .journey-text p { margin-bottom: 25px; }
.block.block-journey .journey-text p:last-child { margin-bottom: 0; }

.block.block-journey .journey-container { position: relative; }

/* Rząd przewija się w bok, ale bez widocznego paska — do przewijania
   służą strzałki, palec i kółko myszy. */
.block.block-journey .slides {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  /* Bez przyciągania do kart. Zapas przewijania bywa mniejszy niż
     szerokość jednej karty, a wtedy najbliższy punkt przyciągania leży
     poza zasięgiem i przeglądarka cofa rząd na start — ani strzałka,
     ani palec nic nie robią. */
  scrollbar-width: none;
}

.block.block-journey .slides::-webkit-scrollbar { display: none; }

/* Strzałki stoją poza rzędem, na wysokości środka kart. */
.block.block-journey .journey-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  z-index: 2;
  transition: background .2s, border-color .2s, opacity .2s;
}

.block.block-journey .journey-arrow:hover { background: var(--ink); border-color: var(--ink); }

.block.block-journey .journey-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
}

.block.block-journey .journey-arrow:hover::after { border-color: var(--white); }

.block.block-journey .journey-arrow--prev { left: -22px; }
.block.block-journey .journey-arrow--next { right: -22px; }

.block.block-journey .journey-arrow--prev::after { transform: translate(-40%, -50%) rotate(-135deg); }
.block.block-journey .journey-arrow--next::after { transform: translate(-60%, -50%) rotate(45deg); }

/* Strzałka na skraju rzędu nie ma dokąd przewijać. */
.block.block-journey .journey-arrow[disabled] { opacity: .25; pointer-events: none; }

.block.block-journey .slide-inner {
  position: relative;
  flex: 0 0 285px;
  transition: flex-basis .35s ease, background .35s ease;
  min-height: 210px;
  padding: 1em;
  border: 3px solid;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.block.block-journey .slide-inner.border-gray       { border-color: var(--gray); }
.block.block-journey .slide-inner.border-light-blue { border-color: #67DFFF; }
.block.block-journey .slide-inner.border-blue       { border-color: var(--blue); }
.block.block-journey .slide-inner.border-green      { border-color: #62D99B; }
.block.block-journey .slide-inner.border-purple     { border-color: #A191F2; }
.block.block-journey .slide-inner.border-orange     { border-color: #FFB93C; }
.block.block-journey .slide-inner.border-red        { border-color: #FF585D; }

.block.block-journey .slide-inner .number {
  display: inline-block;
  width: 35px;
  height: 35px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: var(--fs-nav);
  line-height: 33px;
  text-align: center;
}

.block.block-journey .slide-inner .eyebrow-text {
  display: block;
  font-size: 16px;
  line-height: 24px;
  margin-top: 14px;
}

.block.block-journey .slide-inner .slide-title {
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 10px 0 20px;
  /* Zwinięta karta jest wąska, więc tytuł przycinamy do dwóch wierszy —
     wszystkie karty w rzędzie mają wtedy równą wysokość. Po rozwinięciu
     tytuł wraca w całości. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block.block-journey .slide-inner.jest-otwarta .slide-title {
  -webkit-line-clamp: none;
  overflow: visible;
}

.block.block-journey .slide-inner .slide-content {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 20px;
}

.block.block-journey .slide-inner .slide-timing {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  margin: auto 0 0;
}

/* Zwinięta karta pokazuje sam tytuł; treść wchodzi po rozwinięciu. */
.block.block-journey .slide-inner .slide-content { display: none; }
.block.block-journey .slide-inner.jest-otwarta .slide-content { display: block; }

/* Po rozwinięciu karta rośnie i wypełnia się swoim kolorem — ten sam,
   który w stanie zwiniętym rysuje samą ramkę. */
.block.block-journey .slide-inner.jest-otwarta { flex: 0 0 610px; }

.block.block-journey .slide-inner.jest-otwarta.border-gray       { background: var(--gray); }
.block.block-journey .slide-inner.jest-otwarta.border-light-blue { background: #67DFFF; }
.block.block-journey .slide-inner.jest-otwarta.border-blue       { background: var(--blue); color: var(--white); }
.block.block-journey .slide-inner.jest-otwarta.border-green      { background: #62D99B; }
.block.block-journey .slide-inner.jest-otwarta.border-purple     { background: #A191F2; }
.block.block-journey .slide-inner.jest-otwarta.border-orange     { background: #FFB93C; }
.block.block-journey .slide-inner.jest-otwarta.border-red        { background: #FF585D; }

/* Numer w rozwiniętej karcie odwraca się na ciemny — na kolorowym tle
   sama obwódka ginie. */
.block.block-journey .slide-inner.jest-otwarta .number {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.block.block-journey .slide-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
}

.block.block-journey .slide-toggle::before,
.block.block-journey .slide-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  transition: opacity .2s;
}

.block.block-journey .slide-toggle::before { width: 12px; height: 2px; }
.block.block-journey .slide-toggle::after  { width: 2px; height: 12px; }
.block.block-journey .slide-inner.jest-otwarta .slide-toggle::after { opacity: 0; }

@media (max-width: 960px) {
  .block.block-journey .journey-title { font-size: clamp(34px, 6vw, 48px); line-height: 1.15; }

  /* Strzałki stoją poza rzędem i na telefonie wychodziłyby poza ekran.
     Na dotyku rząd przewija się palcem, więc są zbędne. */
  .block.block-journey .journey-arrow { display: none; }
  .block.block-journey .journey-head { display: block; margin-bottom: 40px; }
  .block.block-journey .journey-text { margin-top: 30px; }
}


/* ============================================================
   13. BLOK „OKOLICZNOŚCI" — karty rozwiązań
   ------------------------------------------------------------
   Wartości 1:1 z franklincovey.com/why-franklincovey/
   create-breakthrough-results/ (styles.min.css 1.19.4).
   ============================================================ */
.block.block-circumstances { padding-top: var(--section-gap); }

.block.block-circumstances .headings { margin-bottom: 50px; }

.block.block-circumstances .headings .title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  max-width: 1100px;
  margin: 0 0 20px;
}

.block.block-circumstances .headings .intro-text p {
  /* Zdanie wprowadzające idzie rozmiarem tekstu strony (22/35), tak jak
     akapity w pozostałych sekcjach — mniejszy stopień czytał się jak
     inny krój. */
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 1100px;
}

.block.block-circumstances .circumstance-list {
  display: grid;
  /* Liczba kolumn wynika z liczby kart: dwie szerokie albo trzy węższe.
     Sztywne repeat(2) zostawiało pustą kolumnę przy trzech pozycjach. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

/* Karta unosi się po najechaniu, tak jak kafle materiałów. Zapas na ten
   ruch daje padding listy — kontener strony przycina w pionie. */
.block.block-circumstances .circumstance-list { padding-top: 20px; }

.block.block-circumstances .circumstance {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--white);
  transition: top .35s ease-out;
}

.block.block-circumstances .circumstance:hover { top: -20px; }

.block.block-circumstances .circumstance .eyebrow-kategoria {
  font-size: var(--fs-nav);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 5px;
}

.block.block-circumstances .circumstance .title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 36px;
  line-height: 40px;
  /* Bez tego nagłówek bierze kolor z typografii (--ink) i ginie
     na ciemnym tle karty. */
  color: inherit;
  margin: 0 0 20px;
}

.block.block-circumstances .circumstance img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
  display: block;
}

.block.block-circumstances .circumstance p {
  font-size: var(--fs-small);
  line-height: 25px;
  margin: 10px 0 0;
}

.block.block-circumstances .circumstance .lista-tytul { font-weight: 700; margin-top: 20px; }

.block.block-circumstances .circumstance .lista-programow {
  margin: 12px 0 0;
  font-size: var(--fs-small);
  line-height: 25px;
}

.block.block-circumstances .circumstance .lista-programow li { margin-bottom: 10px; }
.block.block-circumstances .circumstance .lista-programow li:last-child { margin-bottom: 0; }

/* Przycisk trzyma się dna karty, żeby rząd miał wspólną linię. */
.block.block-circumstances .circumstance .cta { margin-top: auto; padding-top: 25px; }

/* Powyżej czterech kart rząd byłby za wąski — wtedy trzy kolumny
   i zawijanie do kolejnych wierszy. */
.block.block-circumstances.karty-3 .circumstance-list {
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
}

/* Odmiana jasna: karty na szarym tle, tekst ciemny, bez przycisków. */
.block.block-circumstances.karty-jasne .circumstance {
  background: var(--gray);
  color: var(--ink);
}

@media (max-width: 960px) {
  .block.block-circumstances { padding-top: 90px; }
  .block.block-circumstances .headings { margin-bottom: 30px; }
  .block.block-circumstances .headings .title { font-size: clamp(28px, 5.2vw, 35px); line-height: 1.15; }
  .block.block-circumstances .circumstance-list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   14. PANEL MENU: SIATKA CZTERECH KART
   ------------------------------------------------------------
   Trzeci kształt panelu w nawigacji, obok siatki kolumn
   (Rozwiązania, Zasoby) i listy kart (Dlaczego FranklinCovey).
   ============================================================ */
/* Panel siatki nie trzyma się swojej pozycji w menu, tylko środka
   ekranu — jest szeroki na 1040px i przy skrajnych pozycjach wychodziłby
   poza okno. Punktem odniesienia jest pasek (position: fixed), dlatego
   pozycja w menu zostaje statyczna. */
.site-nav__item--siatka { position: static; }

.mega--siatka {
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(10px);
  width: 1040px;
  max-width: calc(100vw - 80px);
  padding: 34px 34px 34px;
  border-top: 0;
  box-shadow: 0 24px 48px rgba(16, 24, 32, .12);
}

.mega__siatka {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 60px;
}

/* Pasek podsumowujący odcina się od kart jasnym tłem — to nie jest
   kolejna pozycja menu, tylko zbiorcze odesłanie. */
.mega__pasek {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  background: #F2F2F2;
  padding: 20px;
  margin-top: 24px;
}

.mega__pasek img {
  flex: 0 0 140px;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
}

.mega__pasek-tresc { min-width: 0; }

.mega__pasek-tytul {
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 30px;
  margin: 0 0 8px;
}

.mega__pasek-opis {
  font-size: var(--fs-small);
  line-height: 26px;
  margin: 0 0 16px;
}

.mega__pasek-linki {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 0;
  font-size: var(--fs-small);
}

.mega__pasek-linki a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.mega__pasek-linki a:hover { text-decoration: underline; }
.mega__pasek-linki .kropka { color: var(--ink); opacity: .5; }

@media (max-width: 1225px) {
  .mega--siatka {
    left: 0;
    width: auto;
    max-width: none;
    padding: 0;
    box-shadow: none;
    transform: none;
  }

  .site-nav__item.is-open .mega--siatka { transform: none; }

  .mega__siatka { grid-template-columns: 1fr; gap: 0; }

  /* Pasek to na wąskim ekranie zwykła lista odnośników. */
  .mega__pasek { display: block; background: none; padding: 16px 0 0; margin-top: 8px; }
  .mega__pasek img { display: none; }
  .mega__pasek-tytul,
  .mega__pasek-opis { color: var(--white); }
  .mega__pasek-opis { display: none; }
  .mega__pasek-linki a { color: var(--white); }
  .mega__pasek-linki .kropka { color: var(--white); }
}


/* ============================================================
   15. BLOK „POTRZEBY" — kolumny z rozwijanymi pozycjami
   ------------------------------------------------------------
   Wartości 1:1 z franklincovey.com/insights/
   (styles.min.css 1.19.4, pomiar 2026-09-07).
   ============================================================ */
.block.block-courses { padding-top: 50px; }

.block.block-courses .block-header .header {
  font-family: var(--serif);
  font-weight: 300;
  /* Oryginał daje 42px — decyzja foundera 2026-09-07: 58px. */
  font-size: 58px;
  line-height: 62px;
  color: var(--ink);
  margin: 0 0 15px;
}

.block.block-courses .block-header .header-copy {
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 26px;
  max-width: 900px;
  margin-top: 20px;
}

.block.block-courses .columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-top: 40px;
}

/* Nazwa grupy to pigułka na całą szerokość kolumny. */
.block.block-courses .category {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  padding: 10px 20px;
  border-radius: 24px;
  background: var(--ink);
  color: var(--white);
  margin: 0 0 10px;
}

/* Środkowa grupa odcina się jasną pigułką — oryginał przeplata
   ciemne i jasne, żeby kolumny nie zlewały się w jeden pas. */
.block.block-courses .category.jasna {
  background: var(--gray);
  color: var(--ink);
}

.block.block-courses .course { padding-top: 22px; }

/* Zwinięta pozycja to sam tytuł na kresce. Rozwinięta zamienia się
   w kartę z cieniem — stąd cień i kreska są w przeciwnych stanach. */
.block.block-courses .course.zwinieta {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 20px;
}

.block.block-courses .course .inner {
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 0 4px 0 #cdcdcd;
}

.block.block-courses .course.zwinieta .inner {
  box-shadow: none;
  padding: 0;
}

/* Przełącznikiem jest cały wiersz, nie sam plus — łatwiej trafić
   myszą, a klawiatura i czytnik ekranu dostają jeden element zamiast
   dwóch celów obok siebie. */
.block.block-courses .course-header {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 30px 0 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: inherit;
}

.block.block-courses .course .title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  margin: 0;
}

.block.block-courses .course-toggle {
  position: absolute;
  right: 0;
  /* Kółko w jednej linii z tytułem: 20px wysokości w wierszu 22px
     daje 1px zapasu u góry. */
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  pointer-events: none;
}

.block.block-courses .course-toggle::before,
.block.block-courses .course-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  transition: opacity .2s;
}

.block.block-courses .course-toggle::before { width: 10px; height: 2px; }
.block.block-courses .course-toggle::after  { width: 2px; height: 10px; }
.block.block-courses .course:not(.zwinieta) .course-toggle::after { opacity: 0; }

.block.block-courses .course-header:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.block.block-courses .inner-content { padding-top: 16px; }
.block.block-courses .course.zwinieta .inner-content { display: none; }

.block.block-courses .inner-content img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 20px;
  display: block;
}

.block.block-courses .inner-content p { font-size: 16px; line-height: 22px; margin: 0 0 16px; }

.block.block-courses .inner-content .btn {
  font-size: 13px;
  padding: 7px 15px;
  border-radius: 124px;
}

@media (max-width: 960px) {
  .block.block-courses .block-header .header { font-size: clamp(32px, 5.8vw, 44px); line-height: 1.12; }
  .block.block-courses .columns { grid-template-columns: 1fr; }
}


/* ============================================================
   16. CYTAT
   ------------------------------------------------------------
   Wartości 1:1 z franklincovey.com/all-access-pass/
   (styles.min.css 1.19.4, pomiar 2026-09-07).
   ============================================================ */
.block.block-pull-quote { padding-top: 50px; }

.block.block-pull-quote .the-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 55px;
  line-height: 68px;
  margin: 0;
}

/* Słowa startują przygaszone i zapalają się kolejno w miarę
   przewijania — sterowanie w strona-glowna.js, tu sam materiał. */
.block.block-pull-quote .slowo {
  color: rgba(16, 24, 32, .16);
  transition: color .35s ease;
}

.block.block-pull-quote .slowo.jest-zapalone { color: var(--ink); }

/* Przy ograniczonym ruchu cytat jest po prostu czytelny od razu. */
@media (prefers-reduced-motion: reduce) {
  .block.block-pull-quote .slowo { color: var(--ink); transition: none; }
}

/* Podpis równa się z prawą krawędzią cytatu. Oryginał odsuwa go o 23%,
   bo tam cytat kończy się wcześniej niż kolumna — po polsku tekst
   wypełnia całą szerokość i podpis wisiał w środku wiersza. */
.block.block-pull-quote .quote-author {
  text-align: right;
  margin-top: 40px;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 500;
}

@media (max-width: 960px) {
  .block.block-pull-quote .the-quote { font-size: clamp(27px, 5vw, 35px); line-height: 1.35; }
  .block.block-pull-quote .quote-author { text-align: left; margin-top: 30px; font-size: var(--fs-small); }
}


/* ============================================================
   17. KATALOG DEM
   ------------------------------------------------------------
   Blok bez odpowiednika na franklincovey.com — polska strona
   /wersje-demo/ ma własny układ. Karty składamy z komponentów
   design systemu, żeby nie tworzyć równoległego wyglądu.
   ============================================================ */
.block.block-demo { padding-top: var(--section-gap); }

.block.block-demo .demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  /* Zapas na uniesienie karty — kontener przycina w pionie. */
  padding-top: 20px;
}

.block.block-demo .demo-karta {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  border: 1px solid var(--gray);
  border-radius: 8px;
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  transition: top .35s ease-out, border-color .35s ease-out;
}

.block.block-demo .demo-karta:hover {
  top: -20px;
  border-color: var(--blue);
}

.block.block-demo .demo-karta .eyebrow-demo {
  font-size: var(--fs-nav);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}

.block.block-demo .demo-karta h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 34px;
  margin: 0 0 14px;
}

.block.block-demo .demo-karta p { font-size: var(--fs-small); line-height: 25px; margin: 0; }

/* Termin i przycisk trzymają się dna karty, żeby rząd miał wspólną
   linię niezależnie od długości opisu. */
.block.block-demo .demo-stopka { margin-top: auto; padding-top: 25px; }

.block.block-demo .demo-termin {
  display: block;
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 25px;
  margin-bottom: 14px;
}

@media (max-width: 1225px) {
  .block.block-demo .demo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .block.block-demo .demo-grid { grid-template-columns: 1fr; }
  .block.block-demo .demo-karta { padding: 24px; }
}


/* ============================================================
   18. STRONA DEMA SZKOLENIA
   ------------------------------------------------------------
   Układ przeniesiony z zatwierdzonego landingu demo 7 Nawyków
   (repo franklincovey-7nawykow-demo, zakres #fcpl-7n).

   Zmiany wobec źródła: zdjęte @font-face i blok :root (kroje oraz
   tokeny bierzemy z rozdziałów 1-2), zdjęty reset, a każdy selektor
   dostał przedrostek .demo-landing — bez tego ogólne nazwy klas
   (.hero, .wrap, .card) zderzałyby się z resztą motywu.
   ============================================================ */
/* Tokeny, których nie ma w rozdziale 2, a których używa układ landingu.
   Wartości z oryginalnego :root landingu 7 Nawyków. */
.demo-landing{
  --radius: 10px;
  --line: #E6E9EC;
  --ink-soft: #5A6672;
  --amber: #FFB93C;
  --cyan: #67DFFF;
}

/* ---------- BRAND FONTS (FranklinCovey) ---------- */
  
  
  
  
  

  
  
     .demo-landing /* 100vw + pasek przewijania = poziomy scroll, .demo-landing stąd clip */
  
  h1,.demo-landing h2,.demo-landing h3,.demo-landing h4,.demo-landing h5{font-family:TiemposFine,Georgia,serif;font-weight:300;color:var(--ink);line-height:1.1}
  .demo-landing h3.sans,.demo-landing h4.sans{font-family:Rand,sans-serif;font-weight:600;line-height:1.35}
  .demo-landing a{color:inherit;text-decoration:none}
  .demo-landing img{max-width:100%;display:block}
  .demo-landing strong,.demo-landing b{font-weight:600}
  /* Kontener landingu trzyma się tej samej szerokości i tych samych marginesów
     bocznych co .container reszty motywu — inaczej sekcje demo są szersze
     od pozostałych stron i lecą na sam brzeg okna. */
  .demo-landing .wrap{box-sizing:content-box;width:auto;max-width:var(--container-max);margin:0 auto;padding-left:15px;padding-right:15px}
  @media (min-width:640px){ .demo-landing .wrap{padding-left:30px;padding-right:30px} }
  @media (min-width:960px){ .demo-landing .wrap{padding-left:var(--side-pad);padding-right:var(--side-pad)} }

  .demo-landing /* ---------- ZBROJA NA MOTYW WP ----------
     Motyw FranklinCovey ustawia m.in. p{color:#101820} .demo-landing i p{font-size:19px},
     .demo-landing co na ciemnych blokach dawało czarny tekst na czarnym tle. Poniższe reguły
     przywracają dziedziczenie w obrębie sekcji, .demo-landing nie ruszając reszty strony. */
  p,.demo-landing li,.demo-landing span,.demo-landing div,.demo-landing h1,.demo-landing h2,.demo-landing h3,.demo-landing h4,.demo-landing h5,.demo-landing strong,.demo-landing b{color:inherit}
  .demo-landing p{margin:0;font-size:inherit;line-height:inherit}
  .demo-landing ul,.demo-landing ol{margin:0;padding:0;list-style:none}
  .demo-landing img{max-width:100%;height:auto}
  .demo-landing a{text-decoration:none}
  .demo-landing /* wpautop owija linie formularza w <p> — znikamy je z układu, .demo-landing żeby siatka pól działała */
  .fc-form-grid p,.demo-landing .fc-form-grid br{display:contents}
  .demo-landing .fc-form-grid br{display:none}
  /* checkbox zgody bywa spychany przez motyw na prawo */
  .demo-landing .wpcf7-acceptance label{float:none}
  .demo-landing .wpcf7-acceptance input[type="checkbox"]{order:-1;float:none}

  .demo-landing .eyebrow{
    font-family:Rand,sans-serif;font-weight:600;font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:12px;
  }
  .demo-landing .eyebrow::before{content:"";width:28px;height:1px;background:var(--blue);display:inline-block}
  .demo-landing .eyebrow.light{color:var(--cyan)}
  .demo-landing .eyebrow.light::before{background:var(--cyan)}

  /* ---------- BUTTONS (FC pill) ---------- */
  .demo-landing .btn{
    font-family:Rand,sans-serif;font-weight:500;font-size:16px;line-height:1;
    padding:16px 30px;border-radius:var(--btn-radius);cursor:pointer;border:1px solid var(--blue);
    display:inline-flex;align-items:center;gap:10px;transition:all .35s ease-out;
  }
  .demo-landing .btn-primary{background:var(--blue);color:#fff}
  .demo-landing .btn-primary:hover{background:#fff;color:var(--blue)}
  .demo-landing .btn-outline{background:#fff;color:var(--blue)}
  .demo-landing .btn-outline:hover{background:var(--blue);color:#fff}
  .demo-landing .btn-border{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
  .demo-landing .btn-border:hover{background:#fff;color:var(--ink);border-color:#fff}

  /* ---------- TOP BAR ---------- */
  
  
  
  
  
  

  /* ---------- HERO (spec z franklincovey.pl) ---------- */
  .demo-landing .hero{background:var(--white);padding:84px 0 76px}
  .demo-landing .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
  .demo-landing .hero h1{font-size:50px;line-height:1.12;margin:0 0 24px}
  .demo-landing .hero p.lead{font-size:20px;line-height:35px;color:var(--ink);margin-bottom:28px}
  /* pasek logotypów — pełna szerokość pod hero */
  .demo-landing .hero-logos{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:start;gap:22px 20px;margin-top:48px}
  .demo-landing .hero-logos img{height:68px;width:auto;max-width:100%;object-fit:contain}

  /* panel prawy — ciemna karta z formularzem zapisu */
  .demo-landing .hero-card{background:var(--ink);border-radius:var(--radius);padding:34px 32px;color:#fff}
  .demo-landing .hero-card .karta-tytul{font-family:Rand,sans-serif;font-weight:600;font-size:20px;line-height:28px;color:#fff;margin-bottom:6px}
  .demo-landing .hero-card .karta-opis{font-size:15px;line-height:22px;color:#B9C2CC;margin-bottom:20px}
  .demo-landing .hero-card .fc-terms{margin-bottom:16px}
  .demo-landing .hero-card .fc-form-grid{gap:12px}
  .demo-landing .hero-card .fc-form-grid .lbl{color:var(--ink)}
  .demo-landing .hero-card .fc-term{border-color:rgba(255,255,255,.22);color:#fff;padding:18px 20px;gap:14px}
  .demo-landing .hero-card .fc-term:hover{border-color:rgba(255,255,255,.4)}
  .demo-landing .hero-card .fc-term .t{color:rgba(255,255,255,.92)}
  .demo-landing /* zaznaczony kafel jak w formularzu na dole: granat FC, .demo-landing nie cyjan */
  .hero-card .fc-term:has(input:checked){border-color:var(--blue);background:rgba(50,83,255,.16)}
  .demo-landing .hero-card .fc-form-consent,.demo-landing .hero-card .wpcf7-acceptance .wpcf7-list-item-label{color:rgba(255,255,255,.78)}
  .demo-landing .hero-card .fc-form-consent input[type="checkbox"],.demo-landing .hero-card .wpcf7-acceptance input[type="checkbox"]{accent-color:var(--blue)}
  .demo-landing .hero-card .fc-form-submit{width:100%;align-self:stretch;padding:16px 24px;margin-top:6px}
  .demo-landing .hero-card .wpcf7-response-output{color:#FFD7D9;font-size:15px;line-height:22px}

  /* ---------- SECTION SHELL ---------- */
  .demo-landing section{padding:68px 0}
  .demo-landing section:last-of-type{padding-bottom:0}
  .demo-landing .sec-head{max-width:44em;margin-bottom:56px}
  .demo-landing .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .demo-landing .sec-head h2{font-size:clamp(30px,3.4vw,46px);margin:18px 0 20px}
  .demo-landing .sec-head p{font-size:17px;color:var(--ink-soft)}

  /* ---------- PANEL: TEKST + ZDJĘCIE (kanon FC .fc-block-image-with-text) ---------- */
  .demo-landing .fc-panel{display:flex;background:var(--ink);border-radius:8px;overflow:hidden}
  /* dwa panele prowadzących pod sobą — bez odstępu skleiłyby się w jeden blok */
  .demo-landing .fc-panel + .fc-panel{margin-top:30px}
  .demo-landing .fc-panel-text{flex:1 1 50%;max-width:50%;min-width:0;padding:75px 55px;color:#fff}
  .demo-landing .fc-panel-text h2{font-family:TiemposFine,serif;font-weight:300;font-size:36px;line-height:40px;color:#fff;margin-bottom:20px;padding-bottom:3px}
  .demo-landing .fc-panel-text p{font-size:18px;line-height:25px;color:#fff;margin-bottom:30px}
  .demo-landing .fc-panel-text > :last-child{margin-bottom:0}
  .demo-landing .fc-panel-img{flex:1 1 50%;max-width:50%;min-width:0}
  .demo-landing .fc-panel-img img{display:block;width:100%;height:100%;object-fit:cover}
  .demo-landing /* portret prowadzącego kadrujemy od góry, .demo-landing żeby nie ucinać głowy */
  #prowadzacy .fc-panel-img img{object-position:center 12%}
  .demo-landing .fc-bullets{list-style:none;padding:0;margin:0 0 30px;font-size:18px;line-height:25px}
  .demo-landing .fc-bullets li{position:relative;padding-left:28px;margin-bottom:20px}
  .demo-landing .fc-bullets li:last-child{margin-bottom:0}
  .demo-landing .fc-bullets li::before{content:"";position:absolute;left:0;top:.47em;width:8px;height:8px;border-radius:50%;background:var(--blue)}
  .demo-landing .fc-bullets li strong{font-weight:600}

  .demo-landing /* ---------- NAGŁÓWEK SEKCJI (kanon .fc-section-title: Rand 46/57, .demo-landing waga 300) ---------- */
  .fc-section-title{font-family:Rand,sans-serif;font-weight:300;font-size:46px;line-height:57px;color:var(--ink);margin-bottom:50px;max-width:900px}


  /* ---------- KARTY ETAPÓW (kanon .fc-block-journey) ---------- */
  .demo-landing .sec-dark{background:var(--ink)}
  .demo-landing .sec-dark .fc-section-title{color:#fff}
  .demo-landing .sec-dark .fc-slide-inner{color:#fff}
  .demo-landing .sec-dark .fc-slide-inner .fc-slide-content{color:#C3CAD1}
  .demo-landing .fc-slides{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
  .demo-landing .fc-slide-inner{position:relative;min-height:210px;padding:32px;border:3px solid;border-radius:8px;color:var(--ink)}
  .demo-landing .fc-border-gray{border-color:rgba(255,255,255,.22)}
  .demo-landing .fc-border-orange{border-color:var(--amber)}
  .demo-landing .fc-border-ink{border-color:var(--cyan)}
  .demo-landing .fc-slide-inner .fc-eyebrow{display:flex;align-items:center;gap:10px;font-family:Rand,sans-serif;font-weight:400}
  .demo-landing .fc-slide-inner .fc-eyebrow::before{content:none}
  .demo-landing .fc-slide-inner span.fc-number{flex:none;font-size:14px;border:1px solid;border-radius:999px;width:35px;height:35px;line-height:33px;text-align:center}
  .demo-landing .fc-slide-inner span.fc-eyebrow-text{font-size:16px}
  .demo-landing .fc-slide-inner .fc-slide-title{font-family:Rand,sans-serif;font-weight:600;font-size:22px;line-height:36px;margin:24px 0 20px;padding-bottom:3px}
  .demo-landing .fc-slide-inner .fc-slide-content{font-size:18px;line-height:25px}

  /* ---------- 7 NAWYKÓW (wariant C: duże liczby w dwóch kolumnach) ---------- */
  .demo-landing .wc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
  .demo-landing .wc-item{border-top:1px solid var(--line);padding:30px 0 34px}
  .demo-landing .wc-num{font-family:TiemposFine,serif;font-weight:300;font-size:56px;line-height:1;color:var(--blue);margin-bottom:14px}
  .demo-landing .wc-item h3{font-size:22px;line-height:30px;margin-bottom:10px}
  .demo-landing .wc-item p{font-size:18px;line-height:26px}
  /* ósma komórka siatki: zamiast pustego miejsca po nieparzystej liczbie nawyków */
  .demo-landing .wc-cta{background:var(--ink);color:#fff;border-radius:8px;border-top:0;padding:34px;margin-top:30px}
  .demo-landing .wc-cta .btn{margin-top:20px;background:#fff;color:var(--ink);border-color:#fff}
  .demo-landing .wc-cta .btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

  /* ---------- DLA KOGO: lista problemów w dwóch kolumnach ---------- */
  .demo-landing .fc-intro-text{font-size:18px;line-height:28px;max-width:44em;margin-bottom:36px}
  .demo-landing .fc-bullets-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 60px}
  .demo-landing .fc-bullets-grid li{margin-bottom:0}

  .demo-landing /* ---------- PRZED / PO (wariant C: ciemne karty, .demo-landing oś przed → po) ---------- */
  .ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
  .demo-landing .ba-card{background:var(--ink);border-radius:8px;padding:36px 34px;color:#fff;will-change:transform}
  .demo-landing .ba-grid .ba-card{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
  .demo-landing .ba-grid .ba-card:hover{transform:translateY(-12px)}
  .demo-landing .ba-card h3{font-family:TiemposFine,serif;font-weight:300;font-size:36px;line-height:40px;color:#fff;margin-bottom:26px}
  .demo-landing .ba-line{padding-left:20px;border-left:3px solid;margin-bottom:22px}
  .demo-landing .ba-line:last-child{margin-bottom:0}
  .demo-landing .ba-line p{font-size:18px;line-height:25px}
  .demo-landing .ba-line .tag{display:block;font-family:Rand,sans-serif;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
  .demo-landing .ba-before{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.72)}
  .demo-landing .ba-before .tag{color:rgba(255,255,255,.72)}
  .demo-landing .ba-after{border-color:var(--blue)}
  .demo-landing .ba-after .tag{color:#fff}

  /* ---------- OPINIE ---------- */
  /* cytat wiodący — słowa rozświetlają się wraz ze scrollem */
  .demo-landing .q-lead{background:var(--ink);border-radius:8px;padding:70px 60px;margin-bottom:60px}
  .demo-landing .q-lead .q-text{font-family:TiemposFine,serif;font-weight:300;font-size:clamp(28px,3.2vw,44px);line-height:1.28;letter-spacing:-.01em}
  .demo-landing .q-word{color:#fff;transition:color .35s ease}
  .demo-landing .q-lead.is-armed .q-word{color:rgba(255,255,255,.16)}
  .demo-landing .q-lead.is-armed .q-word.is-lit{color:#fff}
  .demo-landing .q-lead .who{margin-top:36px}
  .demo-landing .q-lead .who b{display:block;font-family:Rand,sans-serif;font-weight:600;font-size:18px;line-height:1.4;color:#fff}
  .demo-landing .q-lead .who span{display:block;font-size:16px;line-height:1.35;color:#B9C2CC}

  /* pozostałe opinie — szare karty w równej siatce */
  .demo-landing .q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .demo-landing .q{background:var(--gray);border-radius:8px;padding:36px 34px;display:flex;flex-direction:column}
  .demo-landing .q p{font-size:18px;line-height:25px;color:var(--ink)}
  .demo-landing .q p b,.demo-landing .q p strong{font-weight:600}
  .demo-landing .q .who{margin-top:auto;padding-top:26px;display:flex;align-items:center;gap:16px}
  .demo-landing .q .who .av{flex:none;width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center top}
  .demo-landing .q .who b{display:block;font-family:Rand,sans-serif;font-weight:600;font-size:18px;line-height:1.4}
  .demo-landing .q .who span{display:block;color:var(--ink-soft);font-size:16px;line-height:1.35}

  /* ---------- PROWADZĄCY (kanoniczny panel FC) ---------- */
  .demo-landing .fc-panel-text .role{font-family:Rand,sans-serif;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:14px}
  .demo-landing .fc-panel-text .btn{margin-top:10px;background:#fff;color:var(--ink);border-color:#fff}
  .demo-landing .fc-panel-text .btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

  /* ---------- FORMULARZ (kanon .fc-block-form + tokeny --cf7-*) ---------- */
  .demo-landing .cta-sec{padding:68px 0}
  .demo-landing .fc-form-block{display:grid;grid-template-columns:.42fr .58fr;gap:50px;align-items:start}
  .demo-landing .js-termin-source{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
  .demo-landing .fc-terms{display:flex;flex-direction:column;gap:14px}
  .demo-landing .terminy-brak{font-family:Rand,sans-serif;font-weight:500;font-size:18px;line-height:1.4;color:var(--ink);
                border:2px solid var(--line);border-radius:8px;padding:20px 22px}
  .demo-landing .hero-card .terminy-brak{color:#fff;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
  .demo-landing form.form-disabled .fc-form-field,.demo-landing form.form-disabled .fc-form-submit{opacity:.55;pointer-events:none}
  .demo-landing .fc-term{display:flex;align-items:center;gap:16px;border:2px solid var(--line);border-radius:8px;padding:22px;cursor:pointer;
           transition:border-color .25s ease,background .25s ease}
  .demo-landing .fc-term:hover{border-color:var(--gray)}
  .demo-landing .fc-term input{flex:none;width:20px;height:20px;accent-color:var(--blue)}
  .demo-landing .fc-term-body{display:flex;flex-direction:column;gap:6px;min-width:0}
  .demo-landing .fc-term .dm{font-family:TiemposFine,serif;font-weight:300;font-size:28px;line-height:1.05}
  .demo-landing .fc-term .t{font-size:19px;line-height:1.35;color:var(--ink)}
  .demo-landing .fc-term:has(input:checked){border-color:var(--blue);background:rgba(50,83,255,.05)}
  .demo-landing .fc-person{display:flex;align-items:center;gap:24px;background:var(--gray);border-radius:8px;padding:24px;margin-top:40px}
  .demo-landing .fc-person img{flex:none;width:110px;height:110px;border-radius:8px;object-fit:cover}
  .demo-landing .fc-person .n{font-family:Rand,sans-serif;font-weight:600;font-size:18px;line-height:1.4}
  .demo-landing .fc-person .d{font-size:16px;line-height:24px;color:var(--ink-soft)}
  .demo-landing .fc-person a{color:var(--blue)}

  .demo-landing .fc-form-grid{display:flex;flex-direction:column;gap:16px}
  .demo-landing .fc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .demo-landing .fc-form-field{width:100%;font-family:Rand,sans-serif;font-size:20px;line-height:29px;color:var(--ink);
    background:#D8D4D7;border:0;border-radius:8px;padding:18px 20px}
  .demo-landing .fc-form-field::placeholder{color:inherit;opacity:.5}
  .demo-landing /* CF7 opakowuje każde pole w <span class="wpcf7-form-control-wrap">, .demo-landing więc rozkładamy je na blok */
  .fc-form-grid .wpcf7-form-control-wrap{display:block;width:100%}
  .demo-landing .fc-form-grid p{margin:0}
  .demo-landing .fc-form-grid br{display:none}
  .demo-landing .fc-form-grid .wpcf7-form-control-wrap:has(input[type="hidden"]),
  .demo-landing .fc-form-grid > .screen-reader-response{display:none}
  .demo-landing .fc-form-grid > label[for="termin"],.demo-landing .fc-form-grid > label[for="wielkosc-firmy"]{display:none}
  /* Komunikat walidacji musi być czytelny także na ciemnej karcie w hero —
     czerwień #E51520 na granacie praktycznie znika. */
  .demo-landing .wpcf7-not-valid-tip{display:block;font-family:Rand,sans-serif;font-weight:500;font-size:15px;line-height:22px;
                       color:#C40D17;margin-top:8px;padding:10px 14px;border-radius:8px;
                       background:rgba(229,21,32,.08)}
  .demo-landing .hero-card .wpcf7-not-valid-tip{color:#FFD7D9;background:rgba(255,90,100,.16)}
  .demo-landing .hero-card .fc-form-field.wpcf7-not-valid{outline-color:#FF8A90}
  .demo-landing .fc-form-field.wpcf7-not-valid{outline:2px solid #E51520;outline-offset:2px}
  .demo-landing .wpcf7-response-output{font-family:Rand,sans-serif;font-size:15px;line-height:22px;color:#E51520;border:0;padding:0;margin:8px 0 0}
  .demo-landing .wpcf7 form.sent .wpcf7-response-output{color:#1C5A2C}
  .demo-landing .wpcf7-spinner{margin-left:12px}
  /* zgoda w wariancie [acceptance ...] treść [/acceptance] */
  .demo-landing .fc-form-grid .wpcf7-acceptance,
  .demo-landing .fc-form-grid .wpcf7-acceptance .wpcf7-list-item{display:block;width:100%;margin:0;text-align:left}
  .demo-landing .fc-form-grid .wpcf7-form-control-wrap[data-name="acceptance-155"]{margin-top:10px}
  .demo-landing .wpcf7-acceptance label{display:flex;flex-direction:row;justify-content:flex-start;gap:12px;align-items:flex-start;
                          width:100%;text-align:left;cursor:pointer}
  .demo-landing .wpcf7-acceptance .wpcf7-list-item-label{flex:1 1 auto;min-width:0}
  .demo-landing .wpcf7-acceptance input[type="checkbox"]{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue)}
  .demo-landing .wpcf7-acceptance .wpcf7-list-item-label{font-family:Rand,sans-serif;font-size:13px;line-height:20px;color:rgba(51,71,91,1)}

  .demo-landing /* etykieta wjeżdża do góry, .demo-landing gdy pole ma treść lub fokus */
  /* motyw ma .wpcf7 label{max-width:450px} .demo-landing — to ucinało select i zgodę w połowie formularza */
  .fc-float,.demo-landing .wpcf7-acceptance label{max-width:none;width:100%}
  .demo-landing .fc-float{position:relative;display:block}
  .demo-landing .fc-float .fc-form-field{padding:28px 20px 10px}
  .demo-landing .fc-float > span.lbl{position:absolute;left:20px;top:19px;font-size:20px;line-height:29px;color:var(--ink);opacity:.5;
                       pointer-events:none;transition:top .18s ease,font-size .18s ease,opacity .18s ease}
  .demo-landing .fc-float:focus-within > span.lbl,
  .demo-landing .fc-float.jest-wypelnione > span.lbl{top:9px;font-size:13px;line-height:16px;opacity:.62}
  .demo-landing .fc-float:has(.fc-form-field:not(:placeholder-shown)) > span.lbl,
  .demo-landing .fc-float:has(select.fc-form-field) > span.lbl{top:9px;font-size:13px;line-height:16px;opacity:.62}
  .demo-landing .fc-float select.fc-form-field{padding-top:28px;padding-bottom:10px}
  .demo-landing /* dopóki nic nie wybrano, .demo-landing wartość wygląda jak placeholder */
  select.fc-form-field:has(option[value=""]:checked){color:rgba(16,24,32,.5)}
  .demo-landing select.fc-form-field option{color:var(--ink)}
  .demo-landing .fc-form-field:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .demo-landing select.fc-form-field{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 18px center;background-size:20px;padding-right:52px}
  .demo-landing /* zgoda: motyw potrafi zepchnąć checkbox w prawo (inline + text-align), .demo-landing stąd twarde reguły */
  .fc-form-consent{display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;width:100%;margin-top:10px;
                   text-align:left;font-size:13px;line-height:20px;color:rgba(51,71,91,1)}
  .demo-landing .fc-form-consent input[type="checkbox"]{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue)}
  .demo-landing .fc-form-consent > span{flex:1 1 auto;min-width:0}
  .demo-landing .fc-form-submit{margin-top:8px;align-self:flex-start;background:#3353FF;color:#fff;border:1px solid #3353FF;border-radius:999px;
    padding:10px 20px;font-family:Rand,sans-serif;font-weight:700;font-size:16px;cursor:pointer;transition:background .3s}
  .demo-landing .fc-form-submit:hover{background:#385BFF}
  .demo-landing .form-ok{display:none;background:#EAF6EC;border:1px solid #B9DFC0;border-radius:8px;padding:22px;color:#1C5A2C;font-weight:500}
  .demo-landing .form-ok.show{display:block}

  /* ---------- PRZYPIĘTA BELKA CTA (mobile) ---------- */
  .demo-landing .fc-sticky-cta{display:none}
  @media(max-width:680px){
    .demo-landing .fc-sticky-cta{
      display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
      background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
      border-top:1px solid var(--line);
      padding:12px 20px calc(12px + env(safe-area-inset-bottom));
      transform:translateY(0);opacity:1;
      transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .35s ease;
    }
    .demo-landing .fc-sticky-cta.jest-ukryta{transform:translateY(115%);opacity:0;pointer-events:none}
    .demo-landing .fc-sticky-cta .btn{width:100%;justify-content:center;font-size:17px;padding:15px 24px}
  }

  /* ---------- FOOTER ---------- */
  
  
  
  
  
  
  
  
  

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:1000px){
    .demo-landing .fc-section-title{font-size:clamp(28px,5.2vw,34px);line-height:1.25;margin-bottom:32px}
    .demo-landing .fc-slides{grid-template-columns:repeat(2,1fr)}
    .demo-landing .q-grid{grid-template-columns:repeat(2,1fr)}
    .demo-landing .q-lead{padding:44px 34px}
    .demo-landing .wc-grid{grid-template-columns:1fr;gap:0}
    .demo-landing .wc-cta{margin-top:30px}
    .demo-landing .fc-panel{display:block}
    .demo-landing .fc-panel-text,.demo-landing .fc-panel-img{max-width:none}
    .demo-landing .fc-panel-text{padding:40px 24px}
    .demo-landing .fc-panel-text h2{font-size:clamp(26px,4.8vw,32px);line-height:1.25}
    .demo-landing .fc-panel-img img{height:auto;aspect-ratio:785/618}
    .demo-landing #prowadzacy .fc-panel-img img{aspect-ratio:4/5;object-position:center top}
    .demo-landing .hero{padding:32px 0 48px}
    .demo-landing .hero .wrap{grid-template-columns:1fr;gap:32px}
    .demo-landing .hero h1{font-size:38px}
    .demo-landing .fc-form-block{display:block}
    .demo-landing .fc-form-body{margin-top:34px}
    .demo-landing .fc-row{grid-template-columns:1fr}
  }
  @media(max-width:680px){
    /* mobile: większe nagłówki i żaden tekst treściowy poniżej 16 px */
    .demo-landing .fc-section-title{font-size:clamp(30px,7.2vw,36px);line-height:1.2;margin-bottom:28px}
    .demo-landing .fc-panel-text h2,.demo-landing .ba-card h3,.demo-landing .q-lead .q-text{font-size:clamp(28px,6.8vw,34px);line-height:1.22}
    .demo-landing .ba-title,.demo-landing .hero-card h3{font-size:clamp(26px,6.2vw,30px);line-height:1.25}
    .demo-landing .fc-panel-text p,.demo-landing .fc-bullets,.demo-landing .ba-line p,.demo-landing .q p,.demo-landing .wc-item p,
    .demo-landing .fc-slide-inner .fc-slide-content,.demo-landing .fc-slide-inner .fc-slide-content p{font-size:17px;line-height:26px}
    .demo-landing .fc-form-consent,.demo-landing .wpcf7-acceptance .wpcf7-list-item-label{font-size:16px;line-height:24px}
    .demo-landing .q .who span,.demo-landing .q .who b,.demo-landing .fc-person .d,.demo-landing .fc-term .t{font-size:16px}
    .demo-landing .fc-slide-inner .fc-eyebrow,.demo-landing .fc-slide-inner span.fc-eyebrow-text{font-size:16px}
    .demo-landing .ba-line .tag,.demo-landing .fc-card-eyebrow{font-size:14px}
    .demo-landing .wpcf7-not-valid-tip{font-size:16px;line-height:24px}
    .demo-landing .fc-slide-inner .fc-slide-title{font-size:22px;line-height:30px}
    .demo-landing .ba-card h3{margin-bottom:20px}
    .demo-landing section{padding:48px 0}
    .demo-landing .hero h1{font-size:33px}
    .demo-landing .hero p.lead{font-size:19px;line-height:1.7}
    .demo-landing .hero-card{padding:25px}
    .demo-landing .hero-logos{gap:18px 20px;margin-top:34px}
    .demo-landing .hero-logos img{height:44px}
    .demo-landing body{font-size:18px}
    
    .demo-landing .fc-slides{grid-template-columns:1fr}
    .demo-landing .fc-bullets-grid{grid-template-columns:1fr}
    .demo-landing .wc-num{font-size:46px}
    .demo-landing .q-grid{grid-template-columns:1fr}
    .demo-landing .q{padding:28px 24px}
    .demo-landing .q-lead{padding:32px 24px;margin-bottom:40px}
    .demo-landing .ba-grid{grid-template-columns:1fr;gap:16px}
    .demo-landing .ba-card{padding:28px 24px}
    .demo-landing .fc-slide-inner{min-height:0;padding:24px}
    /* etykiety pól: po wjechaniu do góry 13 px było za drobne na telefonie */
    .demo-landing .fc-form-field{font-size:18px;line-height:26px;padding:14px 16px}
    .demo-landing .fc-float .fc-form-field{padding:30px 18px 12px}
    .demo-landing .fc-float select.fc-form-field{padding-top:30px;padding-bottom:12px}
    .demo-landing .fc-float > span.lbl{font-size:18px;top:21px;left:18px}
    .demo-landing .fc-float:focus-within > span.lbl,
    .demo-landing .fc-float.jest-wypelnione > span.lbl{font-size:15px;line-height:18px;top:9px}
    .demo-landing .fc-float:has(.fc-form-field:not(:placeholder-shown)) > span.lbl,
    .demo-landing .fc-float:has(select.fc-form-field) > span.lbl{font-size:15px;line-height:18px;top:9px}
    .demo-landing .fc-person{flex-direction:column;text-align:center}
  }
  @media(prefers-reduced-motion:reduce){
    
  }


/* ============================================================
   19. ODTWARZACZ WIDEO
   ------------------------------------------------------------
   Blok ze stron programów na franklincovey.com: nagłówek nad
   ramką 16:9. Ramka i przycisk odtwarzania korzystają z tych
   samych reguł co hero z wideo (rozdział 11).
   ============================================================ */
.block.block-video-player { padding-top: var(--section-gap); }

.block.block-video-player h2 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  max-width: 900px;
  margin: 0 0 40px;
}

.block.block-video-player .video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}

.block.block-video-player .video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 960px) {
  .block.block-video-player h2 { font-size: clamp(24px, 4.4vw, 32px); line-height: 1.3; margin-bottom: 25px; }
}

/* ============================================================
   20. BLOG
   ------------------------------------------------------------
   Lista wpisów korzysta z kart bloku „karty rozwiązań", więc tutaj
   siedzi tylko to, czego tamten blok nie obsługuje: nagłówek wpisu,
   treść z edytora i paginacja.
   ============================================================ */

/* Hero wpisu jest jednokolumnowy — bez zdjęcia obok tekstu. */
.block.block-wpis-hero .container { max-width: var(--container-max); }
.block.block-wpis-hero h1 { max-width: 20em; }
.block.block-wpis-hero .data-wpisu {
  margin-top: 20px;
  font-size: 17px;
  color: rgba(16, 24, 32, .62);
}

/* Treść z edytora: wąska kolumna, bo długi tekst czyta się źle na całej szerokości. */
.block.block-wpis .obraz-wpisu { margin-bottom: 50px; }
.block.block-wpis .obraz-wpisu img { width: 100%; height: auto; border-radius: 8px; }
.block.block-wpis .tresc-wpisu { max-width: 46em; }
.block.block-wpis .tresc-wpisu > * + * { margin-top: 24px; }
.block.block-wpis .tresc-wpisu h2 { margin-top: 50px; }
.block.block-wpis .tresc-wpisu h3 { margin-top: 40px; }
.block.block-wpis .tresc-wpisu ul,
.block.block-wpis .tresc-wpisu ol { padding-left: 22px; }
.block.block-wpis .tresc-wpisu li + li { margin-top: 10px; }
.block.block-wpis .tresc-wpisu img { max-width: 100%; height: auto; border-radius: 8px; }
.block.block-wpis .tresc-wpisu blockquote {
  margin: 40px 0;
  padding-left: 24px;
  border-left: 3px solid var(--blue);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.4;
}
.block.block-wpis .cta-powrot { margin-top: 50px; }

/* Paginacja listy wpisów. */
.block-circumstances .navigation.pagination { margin-top: 50px; }
.block-circumstances .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.block-circumstances .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #E6E9EC;
  border-radius: 999px;
  font-size: 16px;
}
.block-circumstances .nav-links .page-numbers.current,
.block-circumstances .nav-links a.page-numbers:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

@media (max-width: 680px) {
  .block.block-wpis .tresc-wpisu blockquote { font-size: 20px; }
  .block.block-wpis .obraz-wpisu { margin-bottom: 34px; }
}

/* ============================================================
   21. CASE STUDY
   ------------------------------------------------------------
   Treść sekcji korzysta z bloku tekstu (.block-intro-text); tu tylko
   śródtytuły, których w innych blokach tekstu nie ma (np. Grady:
   trzy projekty w jednej sekcji).
   ============================================================ */
.block.block-case-study .intro-text h3 { margin: 40px 0 14px; }
.block.block-case-study .intro-text h3:first-child { margin-top: 0; }

/* ============================================================
   22. STRONY FIRMOWE — trenerzy, opinie, logotypy
   ------------------------------------------------------------
   Biogram trenera stoi w hero podstrony (.block-cta-hero), więc
   dziedziczy typografię nadtytułu i h1; tu tylko układ ze zdjęciem
   portretowym, siatka trenerów, karty opinii i pas logotypów.
   ============================================================ */
.block.block-trener .trener-flex { display: flex; align-items: flex-start; gap: 80px; }
.block.block-trener .trener-zdjecie { flex: 0 0 400px; max-width: 400px; }
.block.block-trener .trener-zdjecie img { display: block; width: 100%; height: auto; border-radius: 8px; }
.block.block-trener .trener-tekst { flex: 1 1 auto; min-width: 0; max-width: 46em; }
.block.block-trener .breadcrumbs a { color: inherit; }
.block.block-trener .trener-rola { margin-top: 12px; font-size: 18px; color: rgba(16, 24, 32, .62); }
.block.block-trener .trener-lead {
  margin: 30px 0 34px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.35;
}
.block.block-trener .trener-bio p { margin-bottom: 20px; }
.block.block-trener .trener-bio .list-bullets { margin: 0 0 20px; }
.block.block-trener .trener-bio .list-bullets li { margin-bottom: 10px; }
.block.block-trener .trener-bio > :last-child { margin-bottom: 0; }

.block.block-trenerzy .trenerzy-naglowek { max-width: 46em; margin-bottom: 50px; }
.block.block-trenerzy .trenerzy-naglowek p { margin-top: 20px; }
.block.block-trenerzy .trenerzy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px 30px;
}
.block.block-trenerzy .trener-karta { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.block.block-trenerzy .trener-karta img {
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 485;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 24px;
}
.block.block-trenerzy .trener-karta h3 { margin-bottom: 12px; }
.block.block-trenerzy .trener-karta p { flex: 1 1 auto; margin-bottom: 18px; }
.block.block-trenerzy .trener-link { font-weight: 500; color: var(--blue); }
.block.block-trenerzy .trener-karta:hover .trener-link { text-decoration: underline; }

.block.block-opinie .title { margin-bottom: 50px; }
.block.block-opinie .opinie-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.block.block-opinie .opinia {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 40px;
  border-radius: 8px;
  background: #F4F5F6;
}
.block.block-opinie .opinia blockquote { margin: 0; }
.block.block-opinie .opinia-autor { display: flex; align-items: center; gap: 16px; margin-top: 28px; font-size: 16px; }
.block.block-opinie .opinia-autor img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.block.block-opinie .opinia-autor b { display: block; }

.block.block-logotypy .title { margin-bottom: 50px; }
.block.block-logotypy .logotypy {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 40px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.block.block-logotypy .logotypy img {
  display: block;
  max-width: 140px;
  max-height: 48px;
  width: auto;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .block.block-trener .trener-flex { flex-direction: column; gap: 40px; }
  .block.block-trener .trener-zdjecie { flex: none; width: 100%; max-width: 360px; }
  .block.block-trenerzy .trenerzy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block.block-opinie .opinie-grid { grid-template-columns: 1fr; }
  .block.block-logotypy .logotypy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .block.block-trener .trener-lead { font-size: 22px; }
  .block.block-trenerzy .trenerzy-grid { grid-template-columns: 1fr; }
  .block.block-opinie .opinia { padding: 28px; }
  .block.block-logotypy .logotypy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

/* Karta „Kontakt" z konsultantką — odwzorowanie karty z franklincovey.pl. */
.block.block-konsultant .konsultant-karta {
  max-width: 640px;
  padding: 44px;
  border-radius: 10px;
  background: #C8D8E0;
}
.block.block-konsultant h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: 20px;
}
.block.block-konsultant .konsultant-lead { font-size: 18px; line-height: 1.45; margin-bottom: 30px; }
.block.block-konsultant .konsultant-osoba { display: flex; align-items: flex-start; gap: 20px; }
.block.block-konsultant .konsultant-osoba img {
  flex: 0 0 124px;
  width: 124px;
  height: 124px;
  border-radius: 8px;
  object-fit: cover;
}
.block.block-konsultant .konsultant-imie { font-size: 20px; font-weight: 600; margin: 0 0 20px; }
.block.block-konsultant .konsultant-osoba p { font-size: 16px; line-height: 1.4; }
.block.block-konsultant .konsultant-osoba a { color: inherit; text-decoration: none; }
.block.block-konsultant .konsultant-osoba a:hover { color: var(--blue); }

@media (max-width: 600px) {
  .block.block-konsultant .konsultant-karta { padding: 28px; }
  .block.block-konsultant h2 { font-size: 32px; }
  .block.block-konsultant .konsultant-osoba img { flex-basis: 96px; width: 96px; height: 96px; }
}

/* ============================================================
   23. WPISY — ramka CTA w treści
   ------------------------------------------------------------
   Wpisy przeniesione z franklincovey.pl mają w treści ramki
   „Pobierz poradnik / Sprawdź szkolenie". Tamten motyw składał je
   z własnych klas; tu stoją jako <aside class="wpis-cta">.
   ============================================================ */
.single-post .tresc-wpisu .wpis-cta {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 50px 0;
  padding: 40px;
  border-radius: 8px;
  background: #101820;
  color: #fff;
}
.single-post .tresc-wpisu .wpis-cta-tekst { flex: 1 1 55%; min-width: 0; }
.single-post .tresc-wpisu .wpis-cta-tekst > * + * { margin-top: 18px; }
.single-post .tresc-wpisu .wpis-cta p { color: #fff; }
.single-post .tresc-wpisu .wpis-cta-naglowek {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.2;
}
.single-post .tresc-wpisu .wpis-cta img { flex: 0 0 40%; width: 40%; height: auto; border-radius: 6px; }

@media (max-width: 760px) {
  .single-post .tresc-wpisu .wpis-cta { flex-direction: column; align-items: stretch; padding: 28px; gap: 24px; }
  .single-post .tresc-wpisu .wpis-cta img { width: 100%; flex-basis: auto; }
  .single-post .tresc-wpisu .wpis-cta-naglowek { font-size: 24px; }
}

/* ============================================================
   24. BLOG — układ z franklincovey.com/blog/
   ------------------------------------------------------------
   Wartości ze styles.min.css franklincovey.com (.blog-main-heading,
   .blog-categories, .blog-posts, .single-post, .block-blog-header,
   .block-table-of-contents, .blog-offers). Siatkę UIkit
   (uk-grid-medium, 1-4@l / 1-3@m / 1-2@s) zapisujemy jako CSS grid.
   ============================================================ */
.blog-lista,
.single-blog { padding-top: 60px; }

/* Lista */
.blog-main-heading { margin-bottom: 40px; }
.blog-main-heading h1 { margin: 0 0 5px; font-family: var(--sans); font-weight: 700; }
.blog-main-heading h5 { max-width: 46em; }

.blog-categories { margin-bottom: 30px; }
.blog-categories p { font-size: 14px; margin-bottom: 0; }
.blog-categories .categories a {
  display: inline-block;
  margin-right: 20px;
  padding: 0 10px;
  border: 1px solid #fff;
  border-radius: 30px;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.blog-categories .categories a:last-child { margin-right: 0; }
.blog-categories .categories a:hover,
.blog-categories .categories a.is-active { border-color: var(--blue); }

.blog-posts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.blog-posts .blog-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
}
.blog-posts .blog-post .feature-image {
  display: block;
  width: 100%;
  height: 180px;
  background-position: center center;
  background-size: cover;
}
.blog-posts .blog-post .inner { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px; }
.blog-posts .blog-post h4 { line-height: 32px; }
.blog-posts .blog-post h4 a { color: inherit; text-decoration: none; }
.blog-posts .blog-post h4 a::after { display: none; }
.blog-posts .blog-post p { margin-bottom: 2px; font-size: 14px; line-height: 24px; }
.blog-posts .blog-post .read-more { margin: auto 0 0; padding-top: 10px; }
.blog-posts .blog-post .read-more a { text-transform: uppercase; font-weight: 600; }

.blog-lista .navigation.pagination { margin-top: 50px; }
.blog-lista .nav-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.blog-lista .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #E6E9EC;
  border-radius: 999px;
  font-size: 16px;
}
.blog-lista .nav-links .page-numbers.current,
.blog-lista .nav-links a.page-numbers:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Wpis */
.blog-breadcrumbs { margin-bottom: 30px; }
.blog-breadcrumbs a { font-size: 16px; color: var(--ink); }
.blog-breadcrumbs a:hover { color: var(--blue); }
.blog-breadcrumbs span { margin: 0 6px; color: var(--blue); }

.single-post { padding: 50px 80px; border: 1px solid var(--ink); border-radius: 14px; }
.single-post .blog-linia { display: block; height: 1px; margin: 50px 0; background: var(--ink); }

.block.block-blog-header .blog-header-flex { display: flex; justify-content: space-between; align-items: flex-start; }
.block.block-blog-header .hero-content { padding-right: 50px; }
.block.block-blog-header .hero-image img { display: block; max-width: 214px; height: auto; }

.block.block-table-of-contents .title {
  margin-bottom: 15px;
  font-family: var(--serif);
  font-size: 36px;
  line-height: 39px;
  font-weight: 300;
}
.block.block-table-of-contents ul { list-style: none; margin: 0; padding-left: 0; }
.block.block-table-of-contents li + li { margin-top: 8px; }

.single-post .tresc-wpisu > * + * { margin-top: 24px; }
.single-post .tresc-wpisu h2 { margin-top: 50px; scroll-margin-top: 120px; }
.single-post .tresc-wpisu h3 { margin-top: 40px; }
.single-post .tresc-wpisu ul,
.single-post .tresc-wpisu ol { padding-left: 22px; }
.single-post .tresc-wpisu li + li { margin-top: 10px; }
.single-post .tresc-wpisu img { max-width: 100%; height: auto; border-radius: 8px; }

/* Kafle pod wpisem — nagłówek jak .blog-offers div.header. */
.block.block-lead-gen .header {
  margin-bottom: 45px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 42px;
  line-height: 1.2;
  color: var(--ink);
}

@media (max-width: 1199px) {
  .blog-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .blog-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-post { padding: 20px; }
  .single-post h1 { font-size: 36px; line-height: 42px; }
  .block.block-blog-header .blog-header-flex { flex-wrap: wrap; justify-content: center; }
  .block.block-blog-header .hero-image { margin: 40px 0 0; text-align: center; }
  .block.block-blog-header .hero-image img { max-width: 340px; }
}

@media (max-width: 767px) {
  .block.block-blog-header .hero-content { padding-right: 0; }
}

@media (max-width: 639px) {
  .blog-posts { grid-template-columns: 1fr; }
}

/* Cytat w treści wpisu — odpowiednik .block-pull-quote z wpisów .com
   (znak cytatu, szeryfowy tekst, autor pod spodem). */
.single-post .tresc-wpisu .wpis-cytat {
  position: relative;
  margin: 50px 0;
  padding: 40px 0 40px 90px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.single-post .tresc-wpisu .wpis-cytat::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 28px;
  font-family: var(--serif);
  font-size: 110px;
  line-height: 1;
  color: var(--blue);
}
.single-post .tresc-wpisu .wpis-cytat p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 36px;
  line-height: 1.25;
}
.single-post .tresc-wpisu .wpis-cytat .wpis-cytat-autor {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.4;
}
.single-post .tresc-wpisu figure { margin: 40px 0; text-align: center; }

@media (max-width: 767px) {
  .single-post .tresc-wpisu .wpis-cytat { padding: 70px 0 30px; }
  .single-post .tresc-wpisu .wpis-cytat::before { top: 10px; font-size: 80px; }
  .single-post .tresc-wpisu .wpis-cytat p { font-size: 26px; }
}