/* ============================================================
   BK SOLUTIONS — Strona /oferta/ („Podręcznik Asset Ownera")
   Filozofia: „Inżynieryjny Blueprint (Cyfrowa Architektura)".

   Konsumuje css/tokens.css + css/blueprint.css. Tu dokładamy
   WYŁĄCZNIE unikalne komponenty tej strony (okładka książki,
   wiersze modułów, karty pakietów, akordeon FAQ, badge autora).
   ZERO surowych hexów — wszystko przez zmienne tokenów.
   ============================================================ */

/* ── Offset pod fixed-nav ──────────────────────────────────── */
:root { --nav-h: 76px; }
body {
  padding-top: var(--nav-h);
  background: var(--bg-page);
}
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-4)); }

/* CTA „Zamów" to PRZYCISK, nie zwykły link — wymuś stały GRANATOWY tekst
   na miedzi w KAŻDYM stanie paska. Bez tego dziedziczy szary
   --text-secondary z .nav__link, a czysta miedź jest zbyt jasna pod
   jasny tekst (kontrast). Granat na miedzi = czytelne AA. */
.nav .nav__cta.btn--gold,
.nav .nav__cta.btn--gold:hover {
  color: var(--navy);
}

/* ── Nawigacja: ciemna na starcie → jasna po przewinięciu ──────
   Obie strony marketingowe startują od sekcji navy (hero).
   Na starcie pasek jest navy: jasny tekst + wordmark.
   Po przewinięciu (.nav--scrolled) → jasne tło papieru, ciemny tekst. */
.nav:not(.nav--scrolled) {
  background: var(--navy);
  border-bottom-color: var(--line-navy);
}
.nav:not(.nav--scrolled) .nav__link { color: var(--on-navy-soft); }
.nav:not(.nav--scrolled) .nav__link:hover { color: var(--on-navy); }
.nav:not(.nav--scrolled) .nav__toggle { color: var(--on-navy); }

/* Wordmark w navbarze (logotyp słowny zamiast PNG). Kolor przełącza
   się automatycznie: biały na granacie (start), atrament po
   przewinięciu (.nav--scrolled → jasne tło); „k" zawsze miedziane. */
.nav__brand { position: relative; display: inline-flex; align-items: center; }
.nav__wordmark { font-size: 1.1rem; }

/* Mobilne menu rozwija się na jasnym tle (papier) niezależnie od stanu
   paska — tam linki muszą zostać ciemne, by były czytelne. */
@media (max-width: 760px) {
  .nav:not(.nav--scrolled) .nav__link { color: var(--text-secondary); }
  .nav:not(.nav--scrolled) .nav__link:hover { color: var(--ink); }
}

/* Przełącznik motywu na granatowym pasku (start) — jasna wersja */
.nav:not(.nav--scrolled) .theme-toggle { color: var(--on-navy-soft); border-color: var(--line-navy); }
.nav:not(.nav--scrolled) .theme-toggle:hover { color: var(--on-navy); border-color: var(--on-navy); background: rgba(248, 247, 242, 0.06); }

/* ── Hero ──────────────────────────────────────────────────── */
/* Jaśniejsza miedź na granacie (.gold domyślnie = terracotta-deep, za ciemna na navy) */
.section--navy .gold { color: var(--color-copper); }

.hero {
  position: relative;
  padding: var(--space-20) 0 var(--space-24);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}
.hero__brand {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: 1.25rem;
  color: var(--on-navy);
  margin-bottom: var(--space-6);
}
.hero__title { margin: var(--space-4) 0 var(--space-5); }
.hero__sub { max-width: 46ch; margin-bottom: var(--space-8); }
.hero__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  color: var(--on-navy-mut);
  margin: var(--space-8) 0 var(--space-5);
}
.hero__pills { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__pills--spaced { margin-top: var(--space-8); }

/* ── Okładka książki (arkusz na navy) ──────────────────────── */
.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-12);
  aspect-ratio: 3 / 4;
  max-width: 380px;
  margin-inline: auto;
  padding: var(--space-8);
  background: var(--navy-700);
  border: 1px solid var(--line-navy);
  border-radius: var(--r-sheet);
  box-shadow: var(--sh-pop);
}
/* Złota krawędź grzbietu (lewa) — sygnał */
.cover::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--color-copper);
  border-radius: var(--r-sheet) 0 0 var(--r-sheet);
}
.cover__brand {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-2xs);
  color: var(--on-navy-soft);
}
.cover__t1 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  color: var(--on-navy-soft);
}
.cover__t2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--on-navy);
}
.cover__rule {
  width: 56px; height: 2px;
  background: var(--color-copper);
  margin: var(--space-5) 0;
}
.cover__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--on-navy-mut);
}
.cover__author {
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  color: var(--on-navy-soft);
}
/* Mini-okładka (Tom 2) */
.cover--sm { max-width: 280px; }

/* ── Pros / Cons (układ dwukolumnowy) ──────────────────────── */
.problem-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.proscons__title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-5);
}

/* Asset Owner vs. Spekulant — bloki tematyczne */
.paradigm-blocks {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-10);
}
.paradigm-block__title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-6);
}
.paradigm-block__cols { margin-top: 0; }
.paradigm-card p:not(.card__kicker) {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin: 0;
}

/* Sekcja 01 — wyśrodkowanie osi + karty porównawcze */
#problem .section__head {
  text-align: center;
  margin-inline: auto;
}
#problem .problem-cols {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
}
#problem .card { text-align: center; }
#problem .proscons {
  max-width: 24rem;
  margin-inline: auto;
}
#problem .proscons__title {
  font-size: clamp(1.2rem, 2.2vw, 1.35rem);
}
#problem .proscons .pc {
  font-size: var(--fs-body);
  text-align: justify;
  hyphens: auto;
}

/* ── Sekcja „O projekcie" ──────────────────────────────────────
   Surowa treść redakcyjna + bloki info. Reset zeruje marginesy,
   więc rytm pionowy i markery list trzeba przywrócić tutaj.
   .card p scope'owane do #o-projekcie, by nie nadpisać .benefit p. */
.prose { max-width: var(--container-text); }
.prose > * + * { margin-top: var(--space-4); }
.prose p { color: var(--text-secondary); }
.prose strong { color: var(--text-primary); font-weight: var(--w-semibold); }

/* Lista „check" (✓) na jasnym tle — wspólna dla kart w tej sekcji */
.check { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.check li { position: relative; padding-left: var(--space-6); color: var(--text-secondary); font-size: var(--fs-sm); }
.check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.1rem;
  height: 1.1rem;
  /* mask + kolor tokenu zamiast url-tła: ✓ przejmuje kolor motywu */
  background: var(--ink);
  mask: url('../assets/bk-icons/icon-check.svg') center / contain no-repeat;
  -webkit-mask: url('../assets/bk-icons/icon-check.svg') center / contain no-repeat;
}

/* Kicker karty (Cel / Dla kogo / Misja / Wizja) — mono etykieta */
/* ── Karty platformy (Podręcznik / Aplikacja / Ćwiczenia) ──── */
.platform-card { display: flex; flex-direction: column; }
.platform-card__meta {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}
.platform-card p:not(.platform-card__meta) {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.platform-card__more {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  color: var(--color-copper);
  text-decoration: none;
}
.platform-card__more:hover { text-decoration: underline; }
.platform-card .platform-card__more { margin-top: auto; padding-top: var(--space-4); }

/* Adnotacja pod okładką w hero oferty */
.hero__cover-badge {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--on-navy-soft);
}

.card__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--space-3);
}
#o-projekcie .card p,
#fundamenty .card p { color: var(--text-secondary); }
#o-projekcie .card > * + *,
#fundamenty .card > * + * { margin-top: var(--space-3); }
#o-projekcie .card .note { color: var(--text-muted); font-size: var(--fs-sm); }
#o-projekcie .callout--rule { margin-top: var(--space-6); }
#o-projekcie .section__head { margin-bottom: var(--space-8); max-width: none; }
#o-projekcie .prose { max-width: none; margin-top: var(--space-6); }
#o-projekcie .lead,
#o-projekcie .prose p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}
#o-projekcie .prose + .card,
#o-projekcie .card + .section__head { margin-top: var(--space-10); }
#o-projekcie .cols + .callout { margin-top: var(--space-10); }

/* Sekcja 03 — sam eyebrow, karty benefitów bez wstępu */
.section--band:has(.benefit) .section__head { margin-bottom: var(--space-8); }

/* Liczby i fakty (spec-strip) */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
.fact {
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--line-paper);
  border-left: 3px solid var(--color-copper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}
.fact__k {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.fact__v {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.fact__v span {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Pod-blok „Misja, wizja i wartości" — odstęp od części produktowej */
.about__sub { margin-top: var(--space-16); margin-bottom: var(--space-8); }

/* Dla kogo — trzy poziome kontenery (równa wysokość) */
.audience-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}
.audience-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.audience-card .card__head {
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
.audience-card .card__head h3 {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}
.audience-card .card__head .ic { margin-top: 2px; flex-shrink: 0; }
.audience-card p {
  flex: 1;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin: 0;
}
.about__cards + .about__cards { margin-top: var(--space-6); }

/* ── Karta korzyści — ikona w jednej linii z tytułem (.card__head) ── */
.benefit .card__head { align-items: flex-start; margin-bottom: var(--space-4); }
.benefit .card__head h3 { font-size: var(--fs-body); line-height: var(--lh-snug); }
.benefit .card__head .ic { margin-top: 2px; }
.benefit p { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 0; }

/* ── Wiersze modułów (spis treści) ─────────────────────────── */
.module-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-10);
}
.module-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.module-row:hover { border-color: var(--copper); box-shadow: var(--sh-card); }
.module-row__n {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold-deep);
  letter-spacing: var(--ls-mono);
}
/* Wiersz bez numeru modułu (sam tytuł + opis) */
.module-row__icon { align-self: start; margin-top: 2px; }
.module-row h3 { margin-bottom: var(--space-2); }
.module-row p { color: var(--text-secondary); font-size: var(--fs-sm); }

/* Tag dostępności modułu (demo / od premiery) pod opisem */
.module-row__tag {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}
.module-row__tag--demo {
  color: var(--color-copper);
  text-decoration: none;
}
.module-row__tag--demo:hover { text-decoration: underline; }

/* Lista rozdziałów w module (spis treści 2-kolumnowy) */
.module-chapters {
  list-style: none;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-paper);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-8);
}
.module-chapters li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}
.module-chapters li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-copper);
}
.module-chapters strong { color: var(--ink); font-weight: var(--w-semibold); }
/* „Podsumowanie i pytania kontrolne" — domyka każdy moduł, ściszone */
.module-chapters .sum { color: var(--text-muted); font-style: italic; grid-column: 1 / -1; }
.module-chapters .sum::before { background: var(--border-strong); }

/* ── Tom 2 (navy) — siatka okładka + treść ─────────────────── */
.tom2__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-16);
  align-items: center;
}
.tom2__grid h2 { margin-top: var(--space-3); }
.tom2__list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.tom2__list li {
  position: relative;
  padding-left: var(--space-8);
  color: var(--on-navy-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.tom2__list li::before {
  content: "\2713"; /* ✓ */
  position: absolute;
  left: 0; top: 0;
  font-weight: var(--w-bold);
  color: var(--teal-soft);
}

/* Motto w ciemnym callout (sekcja 04 — NOT Your Keys NOT Your Coins) */
.callout--motto {
  background: var(--navy);
  color: var(--on-navy);
  border-left: var(--bw-rule) solid var(--color-copper);
  padding: var(--space-6);
  padding-left: calc(var(--space-6) - var(--bw-rule));
}
.callout__motto-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}
.callout__motto-icon {
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--copper);
  background: var(--navy-glass);
  border-color: var(--gold-alpha-30);
}
.callout__motto-icon svg { width: 24px; height: 24px; }
.callout__motto {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  letter-spacing: 0.08em;
  line-height: var(--lh-snug);
  color: var(--on-navy);
  text-transform: uppercase;
}

/* ── Sekcja self-custody (SVG + treść) ─────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.split__art { max-width: 360px; margin-inline: auto; }

/* ── Cennik (pakiety) ──────────────────────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-lg);
  padding: var(--space-8);
  padding-top: var(--space-10);
  box-shadow: var(--sh-card);
}
.tier--featured {
  border: 2px solid var(--color-copper);
  box-shadow: var(--sh-card);
}
.tier__badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-copper);
  color: var(--gold-ink);
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--fs-2xs);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.tier__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  min-height: 5.5rem;
}
.tier h3 {
  font-size: var(--fs-h3);
  font-weight: var(--w-semibold);
  margin: 0;
}
.tier__price {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.tier__regular {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-decoration: line-through;
  margin: 0;
}
/* Placeholder ceny do premiery (Q1 2027) — zob. komentarze w oferta/index.html */
.tier__soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--copper-deep);
  background: var(--bg-page);
  border: 1px solid var(--color-copper);
  border-radius: var(--r-pill);
  padding: var(--space-2) var(--space-4);
  margin: 0;
}
/* Opis zakresu pakietu (jak na /app/) — zawsze widoczny, nad placeholderem ceny.
   Niezależny od mechanizmu ukrywania cen (.tier__soon) — zostaje po premierze. */
.tier__scope {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--copper-deep);
  background: var(--bg-page);
  border: 1px solid var(--color-copper);
  border-radius: var(--r-pill);
  padding: var(--space-2) var(--space-4);
  margin: 0;
}
/* Gdy zakres i placeholder premiery są widoczne razem, premiera jako drobniejsza,
   stonowana adnotacja pod pigułką zakresu (hierarchia: co dostajesz → kiedy). */
.tier__scope + .tier__soon {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  background: transparent;
  border-color: var(--line-paper);
}
.tier__features {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  flex: 1;
  width: 100%;
  max-width: 20rem;
  margin: 0 auto var(--space-8);
  padding: 0;
  text-align: left;
}
.tier__features li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.tier__features li::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.12em;
  /* mask + kolor tokenu — ✓/✗ przejmują kolor motywu */
  background: var(--ink);
  mask: url('../assets/bk-icons/icon-check.svg') center / contain no-repeat;
  -webkit-mask: url('../assets/bk-icons/icon-check.svg') center / contain no-repeat;
}
.tier__features li.off {
  color: var(--text-muted);
}
.tier__features li.off::before {
  mask-image: url('../assets/bk-icons/icon-close.svg');
  -webkit-mask-image: url('../assets/bk-icons/icon-close.svg');
  opacity: 0.45;
}
.tier .btn {
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

/* Link „co odblokujesz w aplikacji" pod przyciskiem tieru */
.tier__demo {
  display: block;
  margin-top: var(--space-4);
  text-align: center;
  color: var(--color-copper);
  text-decoration: none;
}
.tier__demo:hover { text-decoration: underline; }
.tier__demo-note {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--text-muted);
}

/* ── Autor (badge + zdjęcie + treść) ───────────────────────── */
.author__grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--space-12);
  align-items: start;
}
.author__col {
  display: grid;
  gap: var(--space-4);
}
.author__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--paper-3);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.author__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.author__photo-ph {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  color: var(--slate);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper-3);
  background-size: var(--grid-cell) var(--grid-cell);
}
.author__photo-ph svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--copper-deep);
  opacity: 0.55;
}
.author__photo-ph span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}
.author__badge {
  display: grid;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-10) var(--space-8);
  background: var(--navy);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}
.author__mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--color-copper);
}
.author__mono--lower { text-transform: none; }
.author__name {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h3);
  color: var(--on-navy);
}
.author__role {
  font-size: var(--fs-sm);
  color: var(--on-navy-soft);
}
#autor .section__head { max-width: none; margin-bottom: var(--space-8); }
.author__body p {
  color: var(--text-secondary);
  margin-top: var(--space-4);
  font-size: 1.05rem;
  line-height: var(--lh-body);
}
#autor .author__body > p:first-child { margin-top: 0; }

/* ── Akordeon FAQ ──────────────────────────────────────────── */
.faq-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-10);
  max-width: var(--container-text);
}
.faq {
  border: 1px solid var(--line-paper);
  border-radius: var(--r-md);
  background: var(--bg-card);
  overflow: hidden;
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-body);
  color: var(--ink);
}
.faq__q::after {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--gold-deep);
  mask: url('../assets/bk-icons/icon-chevron-right.svg') center / contain no-repeat;
  -webkit-mask: url('../assets/bk-icons/icon-chevron-right.svg') center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform var(--t-base) var(--ease-out);
}
.faq.is-open .faq__q::after { transform: rotate(-90deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base) var(--ease-out);
}
/* Hojny zapas — niektóre odpowiedzi mają listę + kilka akapitów. */
.faq.is-open .faq__a { max-height: 560px; }
.faq__a p,
.faq__a ul {
  padding-inline: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.faq__a > :first-child { padding-top: var(--space-4); }
.faq__a > :last-child { padding-bottom: var(--space-5); }
.faq__a > * + * { margin-top: var(--space-3); }
.faq__a ul { list-style: none; display: grid; gap: var(--space-2); }
.faq__a li { position: relative; padding-left: var(--space-5); }
.faq__a li::before { content: "\2013"; position: absolute; left: 0; color: var(--gold-deep); } /* – */

/* ── Finalne CTA (navy) ────────────────────────────────────── */
.final { text-align: center; }
.final__inner { max-width: 640px; margin-inline: auto; display: grid; gap: var(--space-5); justify-items: center; }
.final p { color: var(--on-navy-soft); }
.final__sub { margin-bottom: 0; }
.final__actions { justify-content: center; }

/* Stopka — wyśrodkowana kolumna (index + oferta) */
.footer__top { flex-direction: column; align-items: center; text-align: center; }
.footer__tag { max-width: none; }
.footer__social { justify-content: center; }
.footer__legal {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.footer__legal a {
  color: var(--on-navy-mut);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.footer__legal a:hover { color: var(--copper); }

button.btn { cursor: pointer; }

/* ── Disclaimer ────────────────────────────────────────────── */
.disclaimer { padding: var(--space-12) 0; background: var(--navy-900); }
.disclaimer p {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--on-navy-mut);
  max-width: var(--container-text);
  margin-inline: auto;
  text-align: center;
}

/* ── Responsywność ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero__grid,
  .tom2__grid,
  .split,
  .author__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero__cover-col { order: -1; }
  .tiers { grid-template-columns: 1fr; }
  .problem-cols { grid-template-columns: 1fr; }
  .audience-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  body { padding-top: 64px; }
  .hero { padding: var(--space-12) 0 var(--space-16); }
  .tier--featured { margin-top: var(--space-6); }
  .facts { grid-template-columns: 1fr; }
  .module-chapters { grid-template-columns: 1fr; }
  .audience-cols { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; align-items: center; }
}

/* ── Waitlist — modal zapisu na premierę ───────────────────── */
body.waitlist-open { overflow: hidden; }

.waitlist-modal[hidden] { display: none !important; }

.waitlist-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.waitlist-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 22, 46, 0.62);
  backdrop-filter: blur(4px);
}

.waitlist-modal__sheet {
  position: relative;
  width: min(100%, 440px);
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-pop);
  padding: var(--space-8) var(--space-8) var(--space-6);
}

.waitlist-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.waitlist-modal__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  line-height: var(--lh-tight);
}

.waitlist-modal__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.waitlist-modal__close:hover {
  border-color: var(--copper);
  color: var(--copper-deep);
}

.waitlist-form__lead {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  line-height: var(--lh-base);
}

.waitlist-form__field {
  margin-bottom: var(--space-5);
}

.waitlist-form__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.waitlist-form__input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.waitlist-form__input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--copper);
  box-shadow: none;
}

.waitlist-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.waitlist-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-base);
  cursor: pointer;
}
.waitlist-form__check input {
  margin-top: 0.2em;
  flex-shrink: 0;
  accent-color: var(--copper-deep);
}
.waitlist-form__check a {
  color: var(--copper-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.waitlist-form__actions {
  margin-top: var(--space-6);
}

.waitlist-form__status {
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: var(--lh-base);
  padding: var(--space-4) 0;
}
.waitlist-form__status--error {
  color: var(--signal);
}

/* ── Strona polityki prywatności ───────────────────────────── */
.legal-prose {
  max-width: var(--container-text);
  margin-inline: auto;
}
.legal-prose h2 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: var(--space-10) 0 var(--space-4);
  color: var(--ink);
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p,
.legal-prose li {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.legal-prose ul {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
}
.legal-prose a {
  color: var(--copper-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Tryb sprzedaży vs waitlist (data-sale na <html>) ───────── */
html[data-sale="waitlist"] .sale-only { display: none !important; }
html[data-sale="open"] .waitlist-only { display: none !important; }

/* Strona sukcesu po płatności */
.success-dl { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.success-dl__item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5); border: 1px solid var(--line-paper); border-radius: var(--r-md);
  background: var(--paper-2);
}
.success-dl__name { font-weight: var(--w-semibold); }
.success-status { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: var(--space-4); }

/* Deactivated demo CTAs while working on user journey */
.is-demo-disabled,
.platform-card__more.is-demo-disabled,
.tier__demo.is-demo-disabled,
.module-row__tag--demo.is-demo-disabled,
a.btn.is-demo-disabled {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
}
.is-demo-disabled:hover,
.platform-card__more.is-demo-disabled:hover,
.tier__demo.is-demo-disabled:hover,
.module-row__tag--demo.is-demo-disabled:hover {
  text-decoration: none !important;
}

/* Stronger visual treatment for disabled primary/secondary buttons */
a.btn.is-demo-disabled {
  background-color: transparent !important;
  border-color: currentColor !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
}