/* ===================== Brand (HPI Brand Guidelines 1.0) ===================== */
/* Źródło: assets/temp/HPI_Brand_Guidelines_EN.pdf. Trzy kolory marki: granat
   #1A2B44 (tekst, tła hero, stopki), złoto #CB9A59 (akcenty, główne CTA), biel
   (tła treści). Kroje: Libre Baskerville 400 (H1–H2, krótkie cytaty), Montserrat
   (tekst 400, przyciski/nawigacja/etykiety 600, H3 700).

   Zasady, których pilnuje cały plik:
   - złoto na bieli tylko jako akcent (kropki, linie, tło przycisku) — jako tekst
     ma tam ~2.4:1; złoty TEKST wyłącznie na granacie,
   - przyciski 48 px, padding 24, radius 6; pola min. 48 px, radius 6, ramka
     #536174; karty radius 12, tło #F5F6F8, ramka #D9DEE5; żadnych „pigułek",
   - fokus 2 px, offset 3 px — granatowy na bieli, biały na granacie,
   - etykiety WERSALIKAMI: +0.08 em; reszta tekstu letter-spacing 0.

   Komponenty i style inline w JSX (`var(--ink)`, `var(--gold)`, `var(--mono)`…)
   czytają kolory ze zmiennych. :root = jasna paleta. Powierzchnie granatowe
   (lista `.on-navy, …` niżej) przedefiniowują te same zmienne, więc inline'owe
   `color: var(--ink)` samo wychodzi granatowe na bieli i białe na granacie. */
:root{
  /* paleta marki */
  --navy: #1A2B44;
  --navy-2: #263D5B;          /* hover drugorzędnego przycisku na granacie */
  --gold: #CB9A59;
  --gold-hover: #BF8F50;
  --gold-press: #BA8B4E;
  --white: #FFFFFF;
  --surface: #F5F6F8;         /* karty, pasy sekcji */
  --border: #D9DEE5;          /* ramki kart, linie */
  --secondary: #536174;       /* tekst drugorzędny; ramki pól (3:1) */
  --error: #B42318;
  --success: #226644;

  /* role (nazwy historyczne — używa ich cały plik i JSX) */
  --bg: var(--white);
  --bg-2: var(--surface);
  --ink: var(--navy);
  --ink-dim: var(--secondary);
  --ink-faint: var(--secondary);   /* min 4.5:1 na bieli i #F5F6F8 (WCAG 1.4.3) */
  --line: var(--border);
  --line-2: var(--border);
  --line-strong: var(--secondary); /* ramki kontrolek formularzy — min 3:1 (WCAG 1.4.11) */
  --gold-deep: var(--gold-press);
  /* „tekst wyróżniony". Na bieli złoty tekst jest nieczytelny, więc granat;
     na granacie (.on-navy) wraca do złota. */
  --gold-soft: var(--navy);
  --cyan: var(--navy-2);
  --red: var(--error);
  --green: var(--success);
  --focus: var(--navy);

  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  /* Marka nie ma kroju mono — etykiety (dawniej JetBrains Mono) idą Montserratem. */
  --mono: var(--sans);

  --radius: 6px;     /* przyciski, pola */
  --radius-l: 12px;  /* karty */

  --maxw: 1264px;    /* kontener 1200 px + marginesy boczne 2×32 px */
}

/* Powierzchnie granatowe: te same zmienne, odwrócone role. Nową granatową
   sekcję dopisz do tej listy (i daj jej `background: var(--navy)`). */
.on-navy,
.hero,
.home-cta-band,
.home-highlight,
.home-path-finish,
.foot,
.cta-card,
.fc-card,
.eb-face,
.ticker-band{
  --bg: var(--navy);
  --bg-2: var(--navy-2);
  --ink: var(--white);
  --ink-dim: #D5DBE4;
  --ink-faint: #B4BECC;              /* ~7:1 na granacie */
  --line: rgba(255,255,255,.18);
  --line-2: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.55);
  --gold-soft: var(--gold);
  --focus: var(--white);
  color: var(--white);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* ⚠️ NIE dawaj tu `overflow-x: hidden` na <body>. Przeglądarka wylicza wtedy drugą
   oś jako `auto`, body staje się KONTENEREM PRZEWIJANIA (który sam nigdy nie
   scrolluje), a `position: sticky` przykleja się do niego zamiast do okna — panel
   zakupu na /book po prostu stoi w miejscu. Poziomo przycinamy więc dwustopniowo:
   `clip` (przycina bez tworzenia kontenera przewijania) tam, gdzie jest wspierany,
   a fallbackiem jest `hidden` na samym <html> — z korzenia wartość propaguje się
   do viewportu, więc przycina tak samo i też nie psuje sticky. */
html{ overflow-x: hidden; }
@supports (overflow-x: clip){
  html,body{ overflow-x: clip; }
}
html{scroll-behavior:smooth; scroll-padding-top: 100px; background: var(--white)}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  padding-top: 96px;
}
@media (max-width: 600px){
  body{ padding-top: 78px; }
  html{ scroll-padding-top: 82px; }
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{ background: rgba(203,154,89,.35); color: var(--navy); }

/* ------- Background field ------- */
/* Dawna ciemna „siatka + poświaty". Marka stawia na płaskie tła, więc kontener
   zostaje w HTML-u (wszystkie strony go mają), ale nic nie rysuje. */
.bg-field{display:none}

/* ------- Nav ------- */
/* Nagłówek biały, granatowy tekst (jak w przykładowym landingu z brand booka). */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 600px){
  .nav{ padding: 10px 20px; gap: 10px; }
  .nav .brand-logo{ height: 40px !important; width: 40px !important; }
  .nav .brand{ gap: 8px; min-width: 0; }
  .nav .brand-wm{ display: none; }
  .nav-cta{ min-height: 40px; padding: 0 14px; font-size: 14px; gap: 6px; white-space: nowrap; flex-shrink: 0; }
}
.nav-cta-short{ display: none; }
@media (max-width: 600px){
  .nav-cta-full{ display: none; }
  .nav-cta-short{ display: inline; }
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:28px;height:28px;display:grid;place-items:center}
.brand-logo{width:34px;height:34px;object-fit:contain}
.brand-wm{font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.08em; line-height:1.25; color: var(--secondary); text-transform: uppercase}
.brand-wm b{display:block; font-weight:700; color: var(--navy); letter-spacing:.08em; font-size:14px; margin-bottom: 2px; text-transform: uppercase}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:15px;font-weight:600;line-height:24px;color:var(--navy)}
.nav-links a:hover{text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--gold); text-decoration-thickness: 2px}
/* Nagłówkowe CTA = przycisk główny (złoty), tylko niższy, bo siedzi w pasku. */
.nav-cta{
  display:inline-flex; align-items:center; gap:10px;
  min-height: 44px; padding: 0 20px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--navy);
  font-size:15px; font-weight:600;
  transition: background-color .15s ease;
}
.nav-cta:hover{background: var(--gold-hover)}
.nav-cta:active{background: var(--gold-press)}
.nav-cta .arr{transition: transform .25s}
.nav-cta:hover .arr{transform: translateX(4px)}

.nav-right{display:inline-flex; align-items:center; gap:10px;}
/* „Do góry" — przycisk drugorzędny (biały z ramką). */
.nav-top{
  display:inline-flex; align-items:center; gap:6px;
  min-height: 44px; padding: 0 14px;
  border-radius: var(--radius);
  border:1px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  font-size:14px; font-weight:600;
  transition: background-color .15s ease;
}
.nav-top:hover{background: var(--surface)}

@media (max-width: 820px){ .nav-links{display:none} .nav-top span{display:none} .nav-top{padding:0 12px} }

/* ------- Layout ------- */
.wrap{max-width: var(--maxw); margin: 0 auto; padding: 0 32px}
@media (max-width: 767px){ .wrap{ padding: 0 20px; } }
section{position:relative}

/* Shared type — rozmiary z tabeli „Hierarchy" brand booka (desktop / <768 px). */
/* Etykieta: Montserrat 600, 14/21, wersaliki +0.08 em. Na bieli granat, na
   granacie złoto. Złota kreska przed etykietą to akcent, nie tekst. */
.eyebrow{
  font-family: var(--sans); font-weight: 600; font-size: 14px; line-height: 21px;
  letter-spacing:.08em; text-transform: uppercase;
  color: var(--navy); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:24px; height:2px; background: var(--gold);
}
.on-navy .eyebrow, .hero .eyebrow, .home-cta-band .eyebrow,
.cta-card .eyebrow, .fc-card .eyebrow{ color: var(--gold); }
.h-display{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
}
.h-section{
  font-family: var(--serif); font-weight:400;
  font-size: 36px; line-height: 46px; letter-spacing: 0;
  color: var(--ink);
  margin:0;
}
@media (max-width: 767px){
  .h-display{ font-size: 32px; line-height: 40px; }
  .h-section{ font-size: 28px; line-height: 36px; }
}
/* Wyróżnienie w nagłówku: kursywa; kolor tekstu na bieli, złoto na granacie. */
.h-display em, .h-section em{ font-style: italic; color: var(--ink); }
.on-navy .h-display em, .on-navy .h-section em,
.hero .h-display em, .hero .h-section em,
.home-cta-band .h-section em,
.cta-card .h-section em, .fc-card .h-section em{ color: var(--gold); }
.lede{
  max-width: 64ch; color: var(--ink-dim);
  font-size: 18px; line-height: 29px;
}
.lede b{ font-weight: 600; }
@media (max-width: 767px){ .lede{ font-size: 16px; line-height: 26px; } }

/* ------- HERO ------- */
/* Hero = granatowa powierzchnia (paleta z listy .on-navy wyżej). */
.hero{
  padding: 96px 0;
  position: relative;
  background: var(--navy);
}
@media (max-width: 980px){ .hero{ padding: 56px 0; } }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 980px){ .hero-grid{grid-template-columns: 1fr; gap:60px} }

.hero-left .kicker{display:flex;align-items:center;gap:14px;margin-bottom:22px}
/* Kicker: bez pigułki — sama złota etykieta nad nagłówkiem (na granacie). */
.kicker-pill{
  font-family:var(--sans); font-weight: 600; font-size:14px; line-height: 21px;
  letter-spacing:.08em; text-transform: uppercase;
  color: var(--gold-soft);
}
.kicker-dot{width:8px;height:8px;border-radius:2px;background:var(--gold)}

.hero-sub{
  margin: 28px 0 0; max-width: 54ch;
  color: var(--ink-dim); font-size: 18px; line-height: 29px;
}
.hero-sub b{color: var(--ink); font-weight:600}
@media (max-width: 767px){ .hero-sub{ font-size: 16px; line-height: 26px; } }

/* Pole + przycisk w jednym rzędzie. Na granacie pole jest białe. */
.hero-form{
  margin-top: 36px; max-width: 560px;
  border:1px solid var(--secondary); border-radius: var(--radius);
  background: var(--white);
  padding: 4px; display:flex; align-items:center; gap:4px;
}
.hero-form:focus-within{ outline: 2px solid var(--focus); outline-offset: 3px; }
.hero-form input{
  flex:1; min-height: 48px; background:transparent; border:0; outline:0;
  color: var(--navy); padding: 0 14px;
  font-family: var(--sans); font-size: 16px;
}
.hero-form input::placeholder{color: var(--secondary)}

/* Przycisk główny: złoto + granatowy tekst (5.6:1; biały na złocie ma 2.5:1 —
   nigdy). 48 px, padding 24, radius 6, Montserrat 600/16. */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--radius);
  background: var(--gold);
  color: var(--navy); font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 24px;
  letter-spacing: 0;
  transition: background-color .15s ease;
  white-space: nowrap;
}
.btn-primary:hover{background: var(--gold-hover)}
.btn-primary:active{background: var(--gold-press)}
.btn-primary:disabled, .btn-primary[aria-disabled="true"]{background: var(--border); color: var(--secondary); cursor: not-allowed}
/* Etykiety CTA są opisowe, nie dwuwyrazowe. Poniżej 768 px przyciski idą na pełną
   szerokość (brand book), a tekst może się zawinąć. */
@media (max-width: 767px){
  .btn-primary{ width: 100%; white-space: normal; text-align: center; }
}

/* Przycisk drugorzędny: ramka 1 px; hover #F5F6F8 na bieli, #263D5B na granacie. */
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--radius);
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 24px;
  transition: background-color .15s ease;
}
.btn-secondary:hover{background: var(--surface)}
.on-navy .btn-secondary:hover, .hero .btn-secondary:hover{background: var(--navy-2)}

.form-meta{
  margin-top: 14px; display:flex; flex-wrap:wrap; gap:8px 24px;
  font-family: var(--sans); font-size: 14px; line-height: 21px; color: var(--ink-dim);
}
.form-meta span{display:inline-flex;align-items:center;gap:8px}
.form-meta .ic{width:18px;height:18px;color: var(--gold)}

.hero-stats{
  display:flex; gap: clamp(22px, 3vw, 40px); margin-top: 56px;
  border-top:1px solid var(--line); padding-top: 28px;
}
.hero-stats .st{min-width: 0}
.hero-stats .num{font-family:var(--serif); font-size: clamp(28px, 2.6vw, 40px); color: var(--gold-soft)}
.hero-stats .lab{font-family: var(--sans); font-weight: 600; font-size:12px; letter-spacing:.08em; color: var(--ink-faint); text-transform:uppercase}
/* Hero right — 3D book stage (na granatowym hero /start) */
.book-stage{
  position: relative;
  aspect-ratio: 1/1.1;
  perspective: 1600px;
  display:grid; place-items:center;
}
/* Cień pod książką — zwykły cień, nie poświata. */
.book-pedestal{
  position:absolute; inset: auto 0 10% 0; margin:auto;
  width: 70%; height: 70px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35), transparent 70%);
  filter: blur(14px);
  transform: translateY(20%);
}
.book-rings{
  position:absolute; inset:0;
  display:grid; place-items:center; pointer-events:none;
}
.book-rings .ring{
  position:absolute; border:1px solid rgba(203,154,89,.35); border-radius:50%;
}
.ring.r1{width:92%;height:92%;animation: spin 40s linear infinite}
.ring.r2{width:72%;height:72%;animation: spin 60s linear infinite reverse;border-style:dashed;border-color: rgba(255,255,255,.18)}
.ring.r3{width:52%;height:52%;animation: spin 30s linear infinite;border-color: rgba(203,154,89,.5)}
@keyframes spin{to{transform:rotate(360deg)}}

.book-tilt{
  position:relative; width: 65%; aspect-ratio: .72/1;
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
  will-change: transform;
}
.book-3d{
  position:absolute; inset:0;
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(4deg);
  animation: bookIdle 9s ease-in-out infinite;
}
@keyframes bookIdle{
  0%,100%{transform: rotateY(-14deg) rotateX(4deg) translateY(0)}
  50%{transform: rotateY(-10deg) rotateX(2deg) translateY(-10px)}
}
.book-face{position:absolute;inset:0;transform-style: preserve-3d;}

.face-front, .face-back, .face-spine, .face-top, .face-bottom, .face-side{
  position:absolute; backface-visibility: hidden;
}
/* Dimensions: width 100%, height 100%, depth set below as 44px */
.face-front{
  inset:0;
  transform: translateZ(22px);
  background: #dcd8d0;
  border-radius: 3px 6px 6px 3px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(26,43,68,.2),
    0 40px 80px -20px rgba(0,0,0,.6);
}
.face-front.cover-img img{position:absolute; inset:0; width:100%; height:100%; object-fit: fill; display:block}
.cover-gloss{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 65%);
  mix-blend-mode: screen;
}
.face-back{
  inset:0;
  transform: translateZ(-22px) rotateY(180deg);
  background: var(--navy);
  border-radius: 3px 10px 10px 3px;
  box-shadow: inset 0 0 0 1px var(--navy-2);
}
.face-spine{
  top:0; bottom:0; left:0; width:44px;
  transform: rotateY(-90deg) translateZ(0);
  transform-origin: left center;
  background:
    repeating-linear-gradient(180deg, var(--navy) 0 10px, #14223A 10px 11px),
    linear-gradient(90deg, #14223A, var(--navy-2));
  border-left: 1px solid rgba(203,154,89,.4);
}
.face-top{
  top:0; left:0; right:0; height:44px;
  transform: rotateX(90deg) translateZ(0);
  transform-origin: top center;
  background: repeating-linear-gradient(90deg, #e8dfc8, #f1e9cf 1px, #d7cba7 2px);
  filter: brightness(.9);
}
.face-bottom{
  bottom:0; left:0; right:0; height:44px;
  transform: rotateX(-90deg) translateZ(0);
  transform-origin: bottom center;
  background: repeating-linear-gradient(90deg, #d7cba7, #e8dfc8 1px, #c8bc95 2px);
}
.face-side{
  top:0; bottom:0; right:0; width:44px;
  transform: rotateY(90deg) translateZ(0);
  transform-origin: right center;
  background: repeating-linear-gradient(180deg, #e8dfc8, #f1e9cf 1px, #d7cba7 2px);
}

/* Cover layout */
.cover{
  position:absolute; inset:0; padding: 26px 22px;
  display:flex; flex-direction:column; justify-content:space-between;
  color: var(--ink);
}
.cover .top{display:flex; justify-content:space-between; align-items:flex-start; font-family: var(--sans); font-weight: 600; font-size:12px; letter-spacing:.08em; color: var(--gold-soft)}
.cover .title{
  font-family: var(--serif);
  font-size: clamp(22px, 3.4vw, 40px);
  line-height: 1;
  color: var(--ink);
}
.cover .title em{color: var(--gold-soft); font-style: italic}
.cover .author{
  font-family: var(--sans); font-weight: 600; font-size:12px; letter-spacing:.08em; color: var(--ink-dim);
  text-transform:uppercase;
}
.cover-chart{
  position:absolute; inset: auto 0 34% 0; width:100%; height: 40%;
  pointer-events:none; opacity:.85;
}
.cover-seal{
  position:absolute; right:18px; top:44%;
  width:74px; height:74px; border-radius:50%;
  border: 1px dashed var(--gold);
  display:grid; place-items:center;
  animation: spin 28s linear infinite;
}
.cover-seal svg{width:100%;height:100%}
.cover-seal text{font-family: var(--sans); font-size: 7.5px; fill: var(--gold); letter-spacing: .08em}

/* Etykiety pod książką — małe prostokąty zamiast pigułek. */
.book-badges{
  position:absolute; inset: auto 0 -4% 0;
  display:flex; justify-content:center; gap: 12px;
  font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .08em;
  color: var(--ink-dim); text-transform: uppercase;
}
.book-badges span{padding: 6px 10px; border:1px solid var(--line); border-radius: var(--radius); background: var(--navy-2)}

/* Pływające karty na hero (granat) — płaskie, bez blur. */
.hover-card{
  position:absolute; right:-4%; top:12%;
  width: 220px;
  padding: 16px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--navy-2);
  transform: translateZ(80px) rotate(3deg);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.55);
  animation: hoverA 6s ease-in-out infinite;
}
@keyframes hoverA{0%,100%{transform: translateZ(80px) rotate(3deg) translateY(0)} 50%{transform: translateZ(80px) rotate(3deg) translateY(-10px)}}
.hover-card .hc-lab{font-family: var(--sans); font-weight: 600; font-size:12px; letter-spacing:.08em; color: var(--ink-faint); text-transform:uppercase}
.hover-card .hc-val{font-family: var(--serif); font-size: 26px; color: var(--gold-soft); margin-top:4px}
.hover-card .hc-row{display:flex; justify-content:space-between; margin-top: 8px; font-family: var(--sans); font-size: 12px; color: var(--ink-dim)}
.hover-card .hc-strike{color: var(--ink-faint); text-decoration: line-through}

.hover-card-2{
  position:absolute; left:-6%; bottom:8%;
  width: 210px; padding: 14px 16px;
  border-radius: var(--radius-l); border: 1px solid var(--line);
  background: var(--navy-2);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.55);
  transform: translateZ(60px) rotate(-4deg);
  animation: hoverB 7.5s ease-in-out infinite;
}
@keyframes hoverB{0%,100%{transform: translateZ(60px) rotate(-4deg) translateY(0)} 50%{transform: translateZ(60px) rotate(-4deg) translateY(-8px)}}
.hover-card-2 .av{display:flex; gap:10px; align-items:center}
.hover-card-2 .av-img{width:34px;height:34px;border-radius:50%;background: var(--navy); border:1px solid var(--gold); font-family: var(--serif); color: var(--gold-soft); display:grid; place-items:center; font-size:14px}
.hover-card-2 .av-name{font-size: 13px; color: var(--ink); font-weight:600}
.hover-card-2 .av-role{font-family: var(--sans); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--ink-faint); letter-spacing:.08em}
.hover-card-2 .quote{font-family: var(--serif); font-style: italic; font-size: 14px; line-height:1.5; margin-top: 10px; color: var(--ink-dim)}

/* ------- Hero — mobile (≤ 720px) ------- */
/* Rozmiary nagłówka i tekstu idą z brand booka (p. „Shared type" na górze
   pliku) — tu tylko układ. */
@media (max-width: 720px){
  .hero-grid{ gap: 36px; }
  .hero-left, .hero-right{ min-width: 0; }

  .hero-sub{ margin-top: 18px; }

  /* Form — full-width, stack email + button vertically */
  .hero-form{ margin-top: 24px; max-width: 100%; }
  .hero-form.two-row{ padding: 4px; gap: 4px; }
  .hf-row{ flex-wrap: wrap; }
  .hf-row input{ min-width: 0; flex: 1 1 100%; }
  .hf-row .btn-primary{ width: 100%; margin-top: 4px; }

  .form-meta{ gap: 10px 16px; margin-top: 12px; }

  .hero-stats{
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px; margin-top: 36px; padding-top: 22px;
  }
  .hero-stats .num{ font-size: 28px; }

  .book-stage{
    aspect-ratio: auto;
    width: 100%; max-width: 320px;
    height: 360px;
    margin: 0 auto;
  }
  .book-tilt{ width: 58%; }

  .hover-card, .hover-card-2{ display: none; }

  .book-badges{ gap: 8px; letter-spacing: .06em; flex-wrap: wrap; }
  .book-badges span{ padding: 5px 8px; }

  .hero-pact{ margin-top: 56px; }
  .hero-pact p{ font-size: 18px; line-height: 29px; }
}

/* ------- Ticker ------- */
/* Pas pod hero — granatowy, jako przedłużenie hero (paleta .on-navy). */
.ticker-band{
  border-top: 1px solid rgba(255,255,255,.14);
  background: var(--navy);
  overflow:hidden;
}
.ticker{
  display:flex; gap: 42px;
  padding: 16px 0;
  width: max-content;
  animation: ticker 60s linear infinite;
  font-family: var(--sans); font-size: 13px;
}
.ticker .tk{display:inline-flex;align-items:center;gap:10px;color:var(--ink-dim)}
.ticker .sym{color:var(--ink); font-weight:600}
/* Na granacie #226644/#B42318 mają za mały kontrast — jaśniejsze warianty. */
.ticker .up{color: #7BC79F} .ticker .down{color: #F19A90}
.ticker .dot{width:6px;height:6px;border-radius:2px;background: var(--gold)}
@keyframes ticker{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* Pauza animacji (WCAG 2.2.2): hover/fokus + klasa .paused (przycisk pauzy) */
.ticker-band:hover .ticker,
.ticker-band:focus-within .ticker,
.ticker-band.paused .ticker{animation-play-state: paused}

/* ------- Problem ------- */
.problem{padding: 96px 0; position:relative}
@media (max-width: 767px){ .problem{ padding: 56px 0; } }
.problem .grid{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center}
@media (max-width: 980px){ .problem .grid{grid-template-columns: 1fr} }

/* Duża liczba = granat (złoto na bieli nie ma kontrastu nawet dla dużego tekstu). */
.stat-mega{
  font-family: var(--serif);
  font-size: clamp(120px, 18vw, 240px);
  line-height:.88;
  color: var(--navy);
  display:flex; align-items:flex-start;
  position:relative;
}
.stat-mega sup{font-size: .35em; color: var(--ink-dim); margin-left: 8px; font-family: var(--sans); font-weight: 400; margin-top: .4em}
.stat-mega::after{content:""; position:absolute; left:0; right:0; bottom:-18px; height:2px; background: linear-gradient(90deg, var(--gold), transparent)}

.bullets{display:grid;gap: 12px; margin-top: 28px}
.bullet{
  display:grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
}
.bullet .no{font-family: var(--sans); font-weight: 700; font-size: 12px; color: var(--navy); letter-spacing: .08em; padding-top: 4px}
.bullet p{margin:0; color: var(--ink-dim); font-size: 16px; line-height:26px}
.bullet p b{color: var(--ink); font-weight: 600}

/* Chart visualization */
.loss-chart{
  position: relative; width: 100%; aspect-ratio: 1/1;
  border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface);
  padding: 24px;
  overflow:hidden;
}
.loss-chart::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 10% 12.5%;
  pointer-events:none;
  mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.loss-chart svg{position:relative;width:100%;height:100%}
.loss-chart .lbl{
  position:absolute; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing:.08em; color: var(--secondary);
  text-transform:uppercase;
}
.loss-chart .lbl.tl{top:18px; left:20px}
.loss-chart .lbl.tr{top:18px; right:20px; color: var(--navy)}
.loss-chart .lbl.br{bottom:18px; right:20px}

/* ------- Inside the book ------- */
.inside{padding: 96px 0; position:relative}
@media (max-width: 767px){ .inside{ padding: 56px 0; } }
.inside-head{display:grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items:end; margin-bottom: 64px}
@media (max-width: 900px){ .inside-head{grid-template-columns: 1fr; margin-bottom: 48px} }

.chapters{
  border-top: 1px solid var(--line);
}
.chap{
  display:grid;
  grid-template-columns: 100px 1fr 1.1fr 120px;
  align-items: center;
  gap: 24px;
  padding: 28px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: background-color .15s ease;
}
.chap:hover{background: var(--surface)}
.chap::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background: var(--gold);
  transition: width .2s ease;
}
.chap:hover::before{width: 3px}
.chap .num{font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--navy); letter-spacing: .08em}
.chap .ttl{font-family: var(--sans); font-weight: 700; font-size: 22px; line-height:30px; color: var(--ink)}
.chap .desc{color: var(--ink-dim); font-size: 15px; line-height: 24px}
.chap .meta{font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--secondary); letter-spacing:.08em; text-transform: uppercase; text-align:right}
.chap .meta .pg{display:block; color: var(--ink-dim); font-size:14px; margin-top:4px}

@media (max-width: 820px){
  .chap{grid-template-columns: 60px 1fr; grid-template-rows: auto auto}
  .chap .desc{grid-column: 2; margin-top:8px}
  .chap .meta{grid-column: 2; text-align:left; margin-top: 8px}
}

/* ------- Author ------- */
.author{padding: 96px 0; position:relative}
@media (max-width: 767px){ .author{ padding: 56px 0; } }
.author-wrap{
  display:grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items:center;
}
@media (max-width: 980px){ .author-wrap{grid-template-columns: 1fr} }

.portrait{
  position:relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--border);
  display:grid; place-items:center;
  font-family: var(--sans); font-size: 12px; letter-spacing:.08em; color: var(--secondary);
  text-align:center;
}
.portrait .ph-title{font-family:var(--serif); font-size: 18px; color: var(--ink-dim); text-transform:none}
.portrait .ph-hint{max-width: 70%}
/* Granatowy gradient pod cytatem — biały tekst musi być czytelny na każdym zdjęciu. */
.portrait::after{
  content:""; position:absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, rgba(26,43,68,0), rgba(26,43,68,.92));
  pointer-events:none;
}
.portrait .quote-tag{
  position:absolute; left: 24px; bottom: 24px; right: 24px; z-index: 2;
  font-family: var(--serif); font-style:italic; font-size: 20px; line-height:1.45;
  color: var(--white);
}
.portrait .quote-tag .src{display:block; margin-top: 10px; font-family: var(--sans); font-weight: 600; font-style:normal; font-size: 12px; letter-spacing:.08em; color: var(--gold)}

.author-copy h2 em{color: var(--ink); font-style: italic}
.author-copy .p{margin: 20px 0 0; color: var(--ink-dim); font-size: 18px; line-height: 29px; max-width: 64ch}
.author-copy .p b{color: var(--ink); font-weight: 600}
@media (max-width: 767px){ .author-copy .p{ font-size: 16px; line-height: 26px; } }
.author-facts{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 36px}
.author-facts .f{
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface);
}
.author-facts .f .n{font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; color: var(--navy)}
.author-facts .f .l{font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing:.08em; color: var(--secondary); text-transform:uppercase; margin-top: 8px}
@media (max-width: 600px){ .author-facts{ grid-template-columns: 1fr; } }

/* ------- Social Proof ------- */
.proof{padding: 96px 0}
@media (max-width: 767px){ .proof{ padding: 56px 0; } }
.proof-head{display:grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items:end; margin-bottom: 48px}
@media (max-width: 900px){ .proof-head{grid-template-columns: 1fr} }

.tiles{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
  grid-auto-rows: 1fr;
}
.tile{
  border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 24px 32px;
  background: var(--surface);
  display:flex; flex-direction:column; gap: 14px;
  position:relative; overflow:hidden;
  min-height: 260px;
}
.tile.t-big{grid-column: span 7; min-height: 340px}
.tile.t-small{grid-column: span 5}
.tile.t-row{grid-column: span 6}
.tile.t-wide{grid-column: span 12}

@media (max-width: 900px){
  .tile, .tile.t-big, .tile.t-small, .tile.t-row, .tile.t-wide{grid-column: span 12}
}

.tile .q{font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height:1.4; color: var(--ink)}
.tile .q.huge{font-size: clamp(26px, 2.6vw, 36px); line-height:1.3}
.tile .q em{color: var(--ink); font-style: italic}
.tile .attr{margin-top: auto; display:flex; gap:12px; align-items:center}
.tile .av{width:38px;height:38px;border-radius:50%;border:1px solid var(--gold); background: var(--navy); display:grid; place-items:center; color: var(--gold); font-family: var(--serif); font-size: 14px}
.tile .who{font-size: 14px; color: var(--ink); font-weight:600}
.tile .role{font-family:var(--sans); font-weight: 600; font-size:12px; letter-spacing:.08em; text-transform: uppercase; color: var(--secondary)}

.tile.kpi{align-items: flex-start; justify-content:space-between}
.tile.kpi .n{font-family: var(--serif); font-size: clamp(56px, 6vw, 96px); color: var(--navy); line-height:.95}
.tile.kpi .l{font-family:var(--sans); font-weight: 600; font-size:12px; color: var(--secondary); letter-spacing:.08em; text-transform:uppercase}
.tile.kpi .sm{color:var(--ink-dim); font-size:15px; line-height:1.55; max-width: 36ch}

.placeholder-note{
  font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing:.08em; color: var(--secondary); text-transform:uppercase;
  border-top: 1px dashed var(--border); padding-top: 12px;
}

/* Sparkline */
.spark{height: 80px; width:100%; display:block; color: var(--gold)}

/* ------- CTA block ------- */
/* Karta książki na /start — granatowa powierzchnia (paleta .on-navy). */
.cta-section{padding: 96px 0}
@media (max-width: 767px){ .cta-section{ padding: 56px 0; } }
.cta-card{
  position:relative;
  border-radius: var(--radius-l);
  overflow:hidden;
  padding: clamp(24px, 5vw, 64px);
  background: var(--navy);
}
.cta-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 80px); align-items:center}
@media (max-width: 980px){ .cta-grid{grid-template-columns: 1fr} }

.cta-left h2{margin:0}
.cta-left .p{color: var(--ink-dim); font-size: 18px; line-height:29px; margin-top: 20px; max-width: 56ch}
@media (max-width: 767px){ .cta-left .p{ font-size: 16px; line-height: 26px; } }
.cta-list{margin-top: 26px; padding: 0; display:grid; gap: 12px}
.cta-list li{
  list-style:none; padding-left: 26px; position:relative; color: var(--ink-dim); font-size: 16px; line-height: 26px;
}
.cta-list li b{color: var(--ink); font-weight: 600}
.cta-list li::before{
  content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  border-radius:2px; background: var(--gold);
}

/* Pole + przycisk; białe pole jest „jasną wyspą" — przywracamy jasne zmienne. */
.cta-form{
  --ink: var(--navy); --ink-dim: var(--secondary); --ink-faint: var(--secondary); --focus: var(--navy);
  margin-top: 30px; display:flex; gap:4px; flex-wrap: wrap;
  background: var(--white);
  border:1px solid var(--secondary); border-radius: var(--radius); padding: 4px;
  max-width: 520px;
}
.cta-form input{
  flex:1; min-width: 180px; min-height: 48px; background:transparent; border:0; outline:0;
  padding: 0 14px; color: var(--navy); font-size: 16px; font-family: var(--sans);
}
.cta-form input::placeholder{color: var(--secondary)}

.cta-figure{
  position:relative; aspect-ratio: 3/4.2; border-radius: var(--radius-l); overflow: hidden;
  background: var(--navy-2);
  display:grid; place-items:center;
}
.cta-figure .ph{font-family:var(--sans); font-weight: 600; font-size:12px; letter-spacing:.08em; color: var(--ink-faint); text-align:center; text-transform:uppercase; max-width: 70%}
/* Podpis leży na jasnej okładce książki — zawsze granatowy. */
.cta-figure .sig{
  position:absolute; left:24px; bottom:24px;
  font-family:var(--serif); font-size: 28px; color: var(--navy); font-style:italic;
}
.cta-figure .sig .sub{display:block; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing:.08em; font-style:normal; color: var(--secondary); margin-top: 6px}
/* ------- FAQ ------- */
.faq{padding: 96px 0; background: var(--white)}
@media (max-width: 767px){ .faq{ padding: 56px 0; } }
.faq-grid{display:grid; grid-template-columns: .9fr 1.3fr; gap: clamp(30px, 5vw, 80px); align-items:start}
@media (max-width: 900px){ .faq-grid{grid-template-columns: 1fr} }
.faq h2{margin:0}
.faq .p{color: var(--ink-dim); margin-top:20px; max-width: 44ch; font-size: 16px; line-height:26px}
/* adres e-mail w leadzie FAQ (inline <b>) — czytany jak link: granat + podkreślenie */
.faq .p b{font-weight: 600; color: var(--navy) !important; text-decoration: underline; text-underline-offset: 3px}

.q-item{
  border-top:1px solid var(--line);
  padding: 20px 0;
}
.q-item:last-child{border-bottom:1px solid var(--line)}
/* Nagłówek akordeonu jest <button> (globalny reset button zeruje tło/ramkę) */
.q-head{display:flex; justify-content:space-between; align-items:center; gap: 20px; width:100%; padding:0; text-align:left; cursor:pointer}
.q-head .t{font-family:var(--sans); font-weight:600; font-size: 18px; line-height:28px; color: var(--ink)}
.q-head .sign{
  width: 32px; height: 32px; border-radius: var(--radius); border:1px solid var(--secondary);
  display:grid; place-items:center; color: var(--navy); flex: 0 0 auto;
  transition: background-color .25s, border-color .25s;
}
/* „+" → „×": obracamy samą ikonę — obrócony kwadrat wyglądałby jak romb. */
.q-head .sign svg{transition: transform .35s ease}
.q-item.open .sign{background: var(--gold); border-color: var(--gold); color: var(--navy)}
.q-item.open .sign svg{transform: rotate(45deg)}
.q-body{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.q-item.open .q-body{grid-template-rows: 1fr}
.q-body > div{overflow:hidden}
.q-body p{margin: 14px 0 0; color: var(--ink-dim); font-size: 16px; line-height:26px; max-width: 64ch}

/* ------- Footer ------- */
/* Stopka = granatowa powierzchnia (lista .on-navy w nagłówku pliku). */
.foot{
  padding: 56px 0 40px;
  background: var(--navy);
}
.foot-grid{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap: wrap}
.foot-grid .lg{font-family: var(--sans); font-weight:700; letter-spacing:.08em; font-size:14px; color: var(--white)}
/* flex-wrap jest tu obowiązkowe: bez niego czwarty link („Ustawienia cookie")
   nie mieści się w rzędzie na telefonie i wychodzi poza prawą krawędź ekranu,
   dokładając stronie poziomy scroll. */
.foot .links{display:flex; flex-wrap:wrap; gap:12px 22px; min-width:0; font-family:var(--sans); font-weight: 600; font-size:14px; line-height: 21px; color: var(--white)}
.foot .links > *{ white-space: nowrap; }
.foot .links a:hover, .foot .links button:hover{ text-decoration: underline; text-underline-offset: 4px; }
.foot .copy{font-family:var(--sans); font-size:14px; color: var(--ink-faint)}

/* Na wąskich ekranach stopka układa się w kolumnę — trzy bloki obok siebie i tak
   się nie mieszczą, a wyrównanie do lewej czyta się lepiej niż rozjechany rząd. */
@media (max-width: 720px){
  .foot-grid{ flex-direction: column; align-items: flex-start; gap: 26px; }
  .foot .links{ gap: 12px 18px; }
  .foot-brand img{ width: 72px !important; height: 72px !important; }
}

/* ------- Reveal on scroll ------- */
/* Ukrywamy tylko gdy user akceptuje animacje; fokus klawiatury wewnątrz ukrytej
   sekcji natychmiast ją odsłania (WCAG 2.4.7 — fokus nie może być niewidoczny). */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
}
.reveal.in{opacity:1; transform: translateY(0)}
.reveal:focus-within{opacity:1; transform: none; transition: none}

.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}
.delay-4{transition-delay:.32s}

/* Hero title — line-by-line rise, even cadence */
.hero-title .line,
.h-display .line{display:block; overflow:hidden; padding-bottom: .08em}
.hero-title .line-inner,
.h-display .line-inner{
  display:inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
  animation: lineRise .85s cubic-bezier(.22,.7,.18,1) forwards;
}
.hero-title .line:nth-child(1) .line-inner,
.h-display .line:nth-child(1) .line-inner{animation-delay:.10s}
.hero-title .line:nth-child(2) .line-inner,
.h-display .line:nth-child(2) .line-inner{animation-delay:.30s}
.hero-title .line:nth-child(3) .line-inner,
.h-display .line:nth-child(3) .line-inner{animation-delay:.50s}
@keyframes lineRise{
  from{transform: translateY(110%); opacity: 0}
  to{transform: translateY(0); opacity: 1}
}

/* Honor user motion preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-title .line-inner,
  .h-display .line-inner{transform: none; opacity: 1}
}

/* Submitted state */
/* Komunikat po wysłaniu formularza. Działa na bieli i na granacie (kolory ze
   zmiennych); wariant błędu ustawia inline borderColor/background w JSX. */
.success{
  margin-top: 20px; padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid var(--success);
  background: rgba(34,102,68,.10);
  color: var(--ink); display:flex; gap: 14px; align-items:center;
  animation: rise-in .4s ease-out;
}
@keyframes rise-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.success .ok{width:34px;height:34px;flex:0 0 auto;border-radius:50%; background: var(--success); color: var(--white); display:grid; place-items:center; font-weight:700}
.success b{color: var(--ink)}
.success p{margin:4px 0 0; color: var(--ink-dim); font-size: 14px; line-height: 21px}

/* Hero form — two rows (name + email). Białe pole na granacie jest „jasną
   wyspą": przywracamy jasne zmienne, żeby ikony inline (`var(--ink-faint)`)
   i tekst były granatowe, a nie białe na bieli. */
.hero-form, .fc-form{
  --ink: var(--navy); --ink-dim: var(--secondary); --ink-faint: var(--secondary);
  --line-strong: var(--border); --focus: var(--navy);
}
.hero-form.two-row{
  display:flex; flex-direction: column; gap: 4px; padding: 4px;
  align-items: stretch;
}
.hf-row{display:flex; align-items:center; gap:4px}
.hf-row:first-child{border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 0}
.hf-row input{flex:1; min-height: 48px; background:transparent; border:0; outline:0; color: var(--navy); padding: 0 14px; font-family: var(--sans); font-size: 16px}
.hf-row input::placeholder{color: var(--secondary)}

/* Hero pact (honest disclaimer block) — w granatowym hero; karta o ton jaśniejsza. */
.hero-pact{
  margin-top: 64px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--navy-2);
  position: relative;
}
@media (max-width: 767px){ .hero-pact{ padding: 24px; } }
.hero-pact .pact-line{position:absolute; left: 32px; top: -1px; width: 64px; height: 3px; background: var(--gold)}
.hero-pact p{margin:0; font-family: var(--serif); font-size: 22px; line-height:34px; color: var(--ink); max-width: 70ch}
.hero-pact b{font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing:.08em; text-transform: uppercase; color: var(--gold-soft); display:block; margin-bottom: 14px; line-height: 21px}
.hero-pact em{color: var(--gold-soft); font-style: italic}

/* Calm ticker */
.ticker.calm{animation-duration: 80s; gap: 56px}
.ticker.calm .dot{background: var(--gold)}

/* Principles list */
.principles{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pr{
  padding: 32px 24px;
  border-right: 1px solid var(--line);
  display:flex; flex-direction: column; gap: 12px;
  transition: background-color .15s ease;
}
.pr:last-child{border-right: 0}
.pr:hover{background: var(--surface)}
.pr-no{font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--navy); letter-spacing:.08em}
.pr-no::after{content:""; display:block; width:24px; height:2px; margin-top:10px; background: var(--gold)}
.pr-t{font-family: var(--sans); font-weight: 700; font-size: 18px; line-height:26px; color: var(--ink)}
.pr-d{color: var(--ink-dim); font-size: 15px; line-height: 24px}
@media (max-width: 900px){
  .principles{grid-template-columns: 1fr}
  .pr{border-right: 0; border-bottom: 1px solid var(--line)}
  .pr:last-child{border-bottom: 0}
}

/* Contrast columns (Nie ma tu / Jest za to). Strony rozróżnia lewy pasek karty
   (czerwony #B42318 / złoty) i kolor etykiety — tytuły zostają granatowe. */
.contrast{
  display:grid; grid-template-columns: 1fr 80px 1fr; gap: 0;
  align-items: stretch; position: relative;
}
.col{display:flex; flex-direction:column; gap: 16px; padding: 24px 0}
.col-h{display:flex; justify-content:space-between; align-items:center; padding-bottom: 18px; border-bottom: 1px solid var(--line)}
.col-tag{font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing:.08em; text-transform: uppercase}
.col-tag.bad{color: var(--error)}
.col-tag.good{color: var(--navy)}
.col-divider{display:grid; place-items:center}
.col-divider span{display:block; width:1px; height: 100%; background: linear-gradient(180deg, transparent, var(--line) 20%, var(--line) 80%, transparent)}
.ctile{
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface);
}
.col-no .ctile{border-left: 3px solid var(--error)}
.col-yes .ctile{border-left: 3px solid var(--gold)}
.ctile-t{font-family: var(--sans); font-weight: 700; font-size: 18px; line-height:26px; margin-bottom: 8px; color: var(--ink)}
.ctile-t.bad{color: var(--ink)}
.ctile-t.good{color: var(--ink)}
.ctile-d{color: var(--ink-dim); font-size: 15px; line-height: 24px}
@media (max-width: 900px){
  .contrast{grid-template-columns: 1fr}
  .col-divider{display:none}
}

/* Ebook rail (3 ebooks) */
.ebook-rail{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 10px;
}
@media (max-width: 900px){ .ebook-rail{grid-template-columns: 1fr} }
.ebook{
  display:flex; flex-direction: column; gap: 24px;
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface);
  position: relative;
}
.ebook:hover .ebook-cover{transform: translateY(-6px) rotateX(8deg) rotateY(-6deg)}
.ebook-cover{
  height: 280px; position: relative; perspective: 900px;
  display:grid; place-items:center;
  transform: rotateX(6deg) rotateY(-8deg);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
/* Makieta okładki ebooka — granatowa (paleta .on-navy), złote akcenty. */
.eb-face{
  width: 70%; height: 100%; padding: 22px;
  background: var(--navy);
  border-radius: 4px 10px 10px 4px;
  border: 1px solid rgba(203,154,89,.35);
  box-shadow: 0 24px 48px -20px rgba(26,43,68,.6), inset 8px 0 16px -8px rgba(0,0,0,.5);
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateZ(20px);
}
.eb-spine{
  position:absolute; left: 15%; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(90deg, #14223A, var(--navy-2));
  border-left: 1px solid rgba(203,154,89,.4);
  transform: translateZ(15px);
}
.eb-no{font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing:.08em; color: var(--gold-soft)}
.eb-mini-chart{height: 60px; opacity: .9}
.eb-mini-chart svg{width:100%; height:100%}
.eb-title{font-family: var(--serif); font-size: 20px; line-height:1.25; color: var(--ink)}
.eb-foot{font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing:.08em; color: var(--ink-faint); text-transform: uppercase}
.ebook-meta{display:flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-2)}
.eb-when{font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing:.08em; color: var(--navy); text-transform: uppercase}
.eb-h{font-family: var(--sans); font-weight: 700; font-size: 18px; line-height:26px; color: var(--ink)}
.eb-d{color: var(--ink-dim); font-size: 15px; line-height: 24px}

/* Notka pod listą (też na stronie głównej, #ebooki). */
.rail-note{
  margin-top: 36px; padding: 24px;
  border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface);
  display:flex; gap: 16px; align-items:flex-start;
}
.rail-note p{margin:0; color: var(--ink-dim); font-size: 16px; line-height: 26px; max-width: 78ch}
.rail-note b{color: var(--ink); font-weight: 600}

/* Honesty box („gdzie jest haczyk?") — szary blok z akcentującym złotym paskiem.
   Na granatowej karcie (.cta-card na /start) tło półprzezroczyste. */
.honesty-box{
  margin-top: 30px; padding: 20px 24px;
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface);
}
.cta-card .honesty-box{ background: rgba(255,255,255,.06); }
.hb-h{display:flex; gap:10px; align-items:center; font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 21px; letter-spacing:.08em; color: var(--ink); text-transform: uppercase; margin-bottom: 10px}
.hb-h svg{color: var(--gold)}
.honesty-box p{margin:0; color: var(--ink-dim); font-size: 16px; line-height: 26px}
.honesty-box b{color: var(--ink); font-weight: 600}

/* Final CTA — granatowa karta (paleta .on-navy). */
.final-cta{padding: 96px 0}
@media (max-width: 767px){ .final-cta{ padding: 56px 0; } }
.fc-card{
  max-width: 820px; margin: 0 auto;
  text-align: center;
  padding: 64px 32px;
  border-radius: var(--radius-l);
  background: var(--navy);
}
@media (max-width: 767px){ .fc-card{ padding: 48px 20px; } }
.fc-form{
  margin: 30px auto 0; max-width: 560px;
  display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 4px;
  padding: 4px; border: 1px solid var(--secondary); border-radius: var(--radius);
  background: var(--white);
}
.fc-form:focus-within{ outline: 2px solid var(--white); outline-offset: 3px; }
.fc-row{display:flex}
.fc-row + .fc-row{border-left: 1px solid var(--border)}
.fc-row input{
  width:100%; min-height: 48px; background:transparent; border:0; outline:0;
  padding: 0 14px; color: var(--navy); font-size: 16px; font-family: var(--sans);
}
.fc-row input::placeholder{color: var(--secondary)}
@media (max-width: 720px){
  .fc-form{grid-template-columns: 1fr}
  .fc-row + .fc-row{border-left: 0; border-top: 1px solid var(--border)}
  .fc-form .btn-primary{justify-content:center}
}
.fc-foot{margin-top: 16px; font-family: var(--sans); font-size: 14px; line-height: 21px; color: var(--ink-faint)}

/* Footer brand row */
.foot-brand{display:flex; gap:12px; align-items:center}

/* tilt helper mouse hint */
.tilt-hint{
  position:absolute; left: 10px; bottom: -30px;
  font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing:.08em;
  color: var(--ink-faint); text-transform:uppercase;
}


/* ===================== Pages added for funnel rebuild ===================== */

/* ----- /book page ----- */
.book-page{
  padding: 64px 0 96px;
}
@media (max-width: 767px){ .book-page{ padding: 32px 0 56px; } }
.book-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 980px){ .book-grid{ grid-template-columns: 1fr; gap: 40px; } }

/* PŁYWAJĄCY PANEL ZAKUPU — całość w tych kilku linijkach, zero JS.
   Formularz jest wyższy niż okno (dane + Payment Element + zgody), a lewa kolumna
   jest jeszcze wyższa. Samo `sticky top` schowałoby dolne pola: panel przykleja się
   górą i nie da się dojechać do przycisku. Dlatego panel dostaje własną wysokość
   (okno minus nagłówek) i własny scroll — jest przyklejony od pierwszego piksela,
   widoczny cały czas i w całości używalny.
   Sticky działa, bo `.checkout-form` jest bezpośrednim elementem gridu (blok
   zawierający = obszar wiersza, czyli wysokość lewej kolumny) — nie owijaj go
   dodatkowym divem. Drugi warunek: `<body>` nie może mieć `overflow-x: hidden`
   (patrz komentarz na górze pliku). */
@media (min-width: 981px){
  .book-grid > .checkout-form{
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
}

/* /book — lewa kolumna to EKSPOZYCJA produktu (duża okładka, „gdzie jest haczyk",
   6 ebooków z opisami), a więc ta wysoka. Panel zakupu w prawej kolumnie pływa
   razem ze scrollem (sam CSS, patrz wyżej). Lewa kolumna NIE MA ograniczenia
   wysokości ani własnego scrolla. */
.book-product{
  display: grid;
  gap: clamp(28px, 3.4vw, 48px);
  min-width: 0;
}
.book-hero{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 2.6vw, 32px);
  align-items: start;
}
@media (max-width: 620px){
  .book-hero{ grid-template-columns: 1fr; }
}
.book-cover-wrap{
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px -24px rgba(26,43,68,.45);
  max-width: 340px;
}
.book-cover-img{ width: 100%; height: 100%; object-fit: cover; }
/* H1: Libre Baskerville 400, 48/58 (mobile 32/40). Tytuł w kursywie, granatem —
   złoty tekst na bieli jest nieczytelny. */
.book-h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: var(--ink);
  margin: 16px 0 16px;
}
.book-h1 em{ font-style: italic; color: var(--ink); }
@media (max-width: 767px){ .book-h1{ font-size: 32px; line-height: 40px; } }
.book-lede{
  margin: 0;
  font-size: 18px;
  line-height: 29px;
  color: var(--ink-dim);
}
.book-lede b{ color: var(--ink); font-weight: 600; }
@media (max-width: 767px){ .book-lede{ font-size: 16px; line-height: 26px; } }
/* skrót do formularza tylko tam, gdzie panel zakupu jest pod treścią (jedna kolumna) */
.book-jump{ display: none; margin-top: 24px; }
@media (max-width: 980px){
  .book-jump{ display: inline-flex; }
}

/* Komplet 6 ebooków w lewej kolumnie — karty reużywają `.home-path-book`
   i `.hpb-*` ze ścieżki na `/`, żeby ten sam produkt wyglądał identycznie. */
.bke-wrap{
  display: grid;
  gap: clamp(18px, 2.2vw, 24px);
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--border);
}
/* H2: Libre Baskerville 400, 36/46 (mobile 28/36) */
.bke-t{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0;
  color: var(--ink);
  margin: 16px 0 14px;
}
.bke-t em{ font-style: italic; color: var(--ink); }
@media (max-width: 767px){ .bke-t{ font-size: 28px; line-height: 36px; } }
.bke-lede{
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-dim);
}
.bke-lede b{ color: var(--ink); font-weight: 600; }
.bke-stage{
  display: grid;
  gap: clamp(12px, 1.4vw, 16px);
}
.bke-stage-head{
  border-left: 3px solid var(--gold);
  padding-left: 16px;
}
.bke-stage-no{
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 6px;
}
/* H3: Montserrat 700, 24/32 (mobile 22/30) */
.bke-stage-k{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 6px;
}
@media (max-width: 767px){ .bke-stage-k{ font-size: 22px; line-height: 30px; } }
.bke-stage-lead{
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-dim);
}

/* Podsumowanie zamówienia w panelu zakupu (góra `.checkout-form`). Biała karta
   na szarym panelu — wyróżnia się bez złotego tekstu. */
.co-summary{
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--white);
  padding: 16px 20px 8px;
}
.co-summary-k{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 4px;
}
.co-summary .price-breakdown{ margin-top: 0; border-top: 0; }
.co-summary .pb-row:last-child{ border-bottom: 0; }
/* Lista cech (używana na /book i na /). Kwadratowe złote znaczniki = akcent. */
.book-features{
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; gap: 12px;
}
.book-features li{
  position: relative; padding-left: 24px;
  font-size: 16px; line-height: 26px;
  color: var(--ink-dim);
}
.book-features li::before{
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--gold);
}
.book-features b{ color: var(--ink); font-weight: 600; }

/* ----- Checkout form (also reused by /book) ----- */
/* Karta: #F5F6F8 + ramka #D9DEE5, radius 12; pola białe. */
.checkout-form{
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
  padding: 32px;
  display: grid;
  gap: 16px;
}
@media (max-width: 767px){ .checkout-form{ padding: 24px 20px; } }
.checkout-title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: var(--ink);
  margin: 0 0 4px;
}
/* Etykieta zawsze NAD polem (placeholder nie zastępuje etykiety). */
.checkout-form label{
  display: grid; gap: 6px;
}
.checkout-form label > span:first-child{
  font-family: var(--sans); font-weight: 600; font-size: 14px; line-height: 21px;
  letter-spacing: 0; text-transform: none;
  color: var(--ink);
}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form input[type="password"],
.checkout-form select{
  width: 100%;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--secondary);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.checkout-form input::placeholder,
.checkout-form textarea::placeholder{ color: var(--secondary); }
.checkout-form input:focus,
.checkout-form select:focus{ border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.checkout-form input[aria-invalid="true"],
.checkout-form select[aria-invalid="true"]{ border-color: var(--error); }
/* Native <select> doesn't inherit input chrome — strip the browser look and
   draw a navy chevron so it matches the field styling. */
.checkout-form select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A2B44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
/* Dropdown list itself is OS-rendered; set readable colors for browsers
   that honour them. */
.checkout-form select option{
  background: var(--white);
  color: var(--ink);
}
.checkout-form input:read-only,
.checkout-form input:disabled{
  background: var(--surface);
  color: var(--secondary);
  cursor: not-allowed;
}

.cf-row-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-row-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.cf-col-span-2{ grid-column: span 2; }
.cf-row-phone{ display: grid; grid-template-columns: minmax(110px, 0.4fr) 1fr; gap: 12px; }
.cf-phone-cc input{ font-variant-numeric: tabular-nums; }
@media (max-width: 600px){
  .cf-row-2, .cf-row-3{ grid-template-columns: 1fr; }
  .cf-col-span-2{ grid-column: auto; }
  .cf-row-phone{ grid-template-columns: minmax(96px, 0.4fr) 1fr; }
}

.cf-checkbox{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink);
  padding: 4px 0;
}
.cf-checkbox input[type="checkbox"]{
  width: 18px; height: 18px;
  accent-color: var(--navy);
  cursor: pointer;
}
.cf-checkbox > span:first-child{
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.cf-checkbox a{ color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

.cf-company{
  display: grid; gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

/* Payment Element (iframe Stripe) — biała ramka, wygląd pól ustawiany w
   `appearance` w src/pages/book/checkout.jsx. */
.payment-element-mount{
  min-height: 60px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  padding: 16px;
}
.payment-loader{
  font-size: 14px;
  color: var(--ink-dim);
  padding: 8px 4px;
}

/* Błąd: #B42318 + komunikat w treści. */
.checkout-error{
  padding: 12px 16px;
  border: 1px solid var(--error);
  border-left-width: 3px;
  background: #FDF3F2;
  color: var(--error);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 21px;
}

.checkout-submit{
  margin-top: 8px;
  justify-content: center;
}
.checkout-submit:disabled{
  background: var(--border);
  color: var(--secondary);
  cursor: not-allowed;
}

/* StartForm — para przycisków: egzamin (główny) + „Najpierw porozmawiajmy" (alternatywa).
   Układ kolumnowy zawsze: oba napisy są długie, a .btn-primary ma white-space:nowrap,
   więc w rzędzie wychodziłyby poza 560px kontenera formularza. */
.sf-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-actions .checkout-submit{ width: 100% }

/* Alternatywa = przycisk drugorzędny (ramka 1 px, hover #F5F6F8). */
.sf-alt{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.sf-alt:hover{
  background: var(--surface);
}
.sf-alt:disabled{
  border-color: var(--border);
  background: var(--border);
  color: var(--secondary);
  cursor: not-allowed;
}
.sf-alt-note{
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-faint);
}

.checkout-trust{
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
  margin: 8px 0 0;
  line-height: 21px;
}

/* ----- Thanks state ----- */
.thanks-card{
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
}
/* Sukces: #226644 + potwierdzenie. */
.thanks-ok{
  display: inline-flex;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
}

/* ----- /unregister page ----- */
.unreg-page{
  min-height: calc(100vh - 96px);
  display: flex;
  align-items: center;
  padding: 64px 0;
}
@media (max-width: 767px){ .unreg-page{ padding: 40px 0; } }
.unreg-wrap{ width: 100%; }
.unreg-card{
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.unreg-form{
  margin-top: 28px;
  display: grid;
  gap: 16px;
}
.unreg-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.unreg-full{ grid-column: span 2; }
@media (max-width: 600px){
  .unreg-fields{ grid-template-columns: 1fr; }
  .unreg-full{ grid-column: auto; }
}
.unreg-fields label{
  display: grid; gap: 6px;
}
.unreg-fields label > span:first-child{
  font-family: var(--sans); font-weight: 600; font-size: 14px; line-height: 21px;
  letter-spacing: 0; text-transform: none;
  color: var(--ink);
}
/* Pola tylko do odczytu (prefill z CRM) — wyszarzone tło, granatowy tekst. */
.unreg-fields input{
  width: 100%;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--secondary);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
.unreg-fields input:read-only{ background: var(--surface); }
.unreg-foot{
  margin-top: 18px;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-faint);
  text-align: center;
}
.unreg-foot a{ color: var(--navy); text-decoration: underline; }
/* ----- Home (/) page extras ----- */
/* Hero strony głównej ma klasy `hero home-hero` — granat i paleta przychodzą
   z `.hero` (patrz .on-navy na górze pliku). */
.home-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
/* Okładka książki w hero. W przeciwieństwie do dawnego portretu NIE chowamy jej
   na wąskich ekranach — to produkt, po który przyszedł użytkownik. */
.home-hero-cover{ min-width: 0; display: grid; place-items: center; }
.home-hero-cover img{
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--radius-l);
  background: var(--navy-2);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.55);
}

@media (max-width: 980px){
  .home-hero-grid{ grid-template-columns: 1fr; gap: 40px; }
  .home-hero-cover img{ max-width: 320px; }
}
@media (max-width: 600px){
  .home-hero .kicker-pill{ font-size: 12px; }
  .home-hero-cover img{ max-width: 260px; }
}

/* Sekcja „O książce" (#ksiazka) */
.home-book-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
.home-book-facts .book-features{ margin-top: 0; }
.home-book-facts .book-features li{ font-size: 18px; line-height: 29px; }
.home-book-facts .book-features li::before{ top: 11px; }
@media (max-width: 767px){
  .home-book-facts .book-features li{ font-size: 16px; line-height: 26px; }
  .home-book-facts .book-features li::before{ top: 9px; }
}
/* Karta oferty leży na szarym pasie (.home-sec-band), więc jest biała. */
.home-book-offer{
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--white);
}
@media (max-width: 900px){
  .home-book-grid{ grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px){ .home-book-offer{ padding: 24px; } }

/* Cena w karcie oferty (#ksiazka) — JEDYNE miejsce na / z kwotą: duże „9,99 zł"
   + mały podpis „+ 17 zł kurier". Pełne rozbicie (9,99 + 17 = 26,99 zł) jest dopiero
   w panelu zakupu na /book (.price-breakdown). */
.offer-price{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.offer-price .op-k{
  flex-basis: 100%;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.offer-price .op-amount{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 58px;
  color: var(--ink);
}
.offer-price .op-note{
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-dim);
}

/* Microcopy pod przyciskiem — pełne warunki oferty przy samym kliknięciu. */
.cta-microcopy{
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-dim);
  max-width: 46ch;
}

/* Rozbicie kosztu w karcie oferty (#ksiazka). */
.price-breakdown{
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.pb-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-dim);
}
.pb-row b{ font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-total{ border-bottom: none; }
.pb-total span{ font-weight: 700; color: var(--ink); }
.pb-total b{ font-weight: 700; font-size: 20px; color: var(--ink); }

/* Ścieżka 6 ebooków (sekcja #ebooki) — MAPA PODRÓŻY, nie lista plików. Pionowa
   szyna po lewej spina trzy etapy (każdy z węzłem-kropką) i kończy się „metą",
   czyli drukowaną książką. Kolejność ma być czytelna zanim ktokolwiek przeczyta
   choć jedno zdanie, dlatego numer + okładka są nośnikiem, a nie opis.
   Świadomie nie reużywamy .ebook-rail z /start — tamten grid jest sztywno
   3-kolumnowy i przy 6 pozycjach gubi etapy.
   Okładki: /assets/ebooks/0N-*.webp = pierwsze strony realnych PDF-ów z downloads/. */
.home-path{
  --rail: clamp(30px, 3.6vw, 56px);
  --hp-gap: clamp(30px, 3.6vw, 52px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap);
  padding-left: var(--rail);
}
.home-path-stage{ position: relative; }
/* węzeł etapu na szynie */
.home-path-stage::before{
  content: "";
  position: absolute;
  top: 6px;
  left: calc(-1 * var(--rail) / 2 - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--border);
}
/* odcinek szyny — od własnego węzła do węzła następnego etapu */
.home-path-stage::after{
  content: "";
  position: absolute;
  top: 24px;
  bottom: calc(-1 * var(--hp-gap) - 8px);
  left: calc(-1 * var(--rail) / 2 - 1px);
  width: 2px;
  background: var(--border);
}
/* ostatni etap doprowadza szynę aż do węzła „mety" (ten siedzi niżej, bo karta
   finiszu ma własny padding) — inaczej linia urywa się w powietrzu */
.home-path-stage:nth-last-child(2)::after{ bottom: calc(-1 * var(--hp-gap) - 32px); }
.hp-head{ margin-bottom: clamp(16px, 2vw, 24px); }
.hp-no{
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.hp-no i{ font-style: normal; color: var(--ink-faint); }
/* H3: Montserrat 700, 24/32 (mobile 22/30) */
.hp-k{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: var(--ink);
  margin: 0 0 10px;
}
@media (max-width: 767px){ .hp-k{ font-size: 22px; line-height: 30px; } }
.hp-lead{
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-dim);
  max-width: 62ch;
}
.home-path-books{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.home-path-book{
  display: grid;
  grid-template-columns: clamp(92px, 10vw, 128px) minmax(0, 1fr);
  gap: clamp(16px, 1.7vw, 22px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
  transition: border-color .15s ease;
}
.home-path-book:hover{ border-color: var(--secondary); }
/* okładka PDF-u — proporcja 3:4 trzyma równy rytm mimo że część plików jest A4 */
.hpb-cover{
  position: relative;
  align-self: start;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px -12px rgba(26,43,68,.35);
}
.hpb-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* cień grzbietu — z płaskiego skanu robi książkę */
.hpb-cover::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.38) 0, rgba(0,0,0,0) 8%, rgba(0,0,0,0) 90%, rgba(0,0,0,.2) 100%);
}
.hpb-body{ min-width: 0; }
.hpb-kind{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.hpb-no{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
}
.hpb-t{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: var(--ink);
  margin: 0 0 9px;
}
.hpb-d{
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-dim);
}

/* META ścieżki — drukowana książka. Granatowa karta (jedyny mocny akcent
   sekcji), a ostatni węzeł jest większy i „celowniczy", żeby było widać, że
   droga gdzieś prowadzi, a nie po prostu się urywa. */
.home-path-finish{
  position: relative;
  display: grid;
  grid-template-columns: clamp(130px, 15vw, 200px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
  padding: 32px;
  border-radius: var(--radius-l);
  background: var(--navy);
}
.home-path-finish::before{
  content: "";
  position: absolute;
  top: 26px;
  left: calc(-1 * var(--rail) / 2 - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle, var(--gold) 0 4px, var(--white) 5px 100%);
  box-shadow: 0 0 0 4px var(--white);
}
.hpf-cover{
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-2);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
}
.hpf-cover img{ width: 100%; height: 100%; object-fit: cover; }
.hpf-cover::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.4) 0, rgba(0,0,0,0) 9%);
}
.hp-no-finish{ color: var(--gold); }
/* tytuł książki w cudzysłowie — traktowany jak krótki cytat, więc serif */
.hpf-t{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 42px;
  color: var(--ink);
  margin: 0 0 12px;
}
.hpf-t em{ font-style: italic; color: var(--gold); }
.hpf-d{
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-dim);
  max-width: 60ch;
}
.hpf-d b{ color: var(--ink); font-weight: 600; }
@media (max-width: 767px){ .hpf-t{ font-size: 26px; line-height: 34px; } }
@media (max-width: 720px){
  .home-path{ --rail: 26px; }
  .home-path-book{ grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .home-path-finish{ grid-template-columns: 1fr; padding: 24px; }
  .hpf-cover{ max-width: 190px; }
}
@media (prefers-reduced-motion: reduce){
  .home-path-book{ transition: none; }
}

/* Manifest „dlaczego za darmo" — przy ofercie 0 zł brak wyjaśnienia czyta się
   jak haczyk, więc mechanizm musi być opisany wprost. Długi tekst, więc
   Montserrat (serif tylko dla H1–H2 i krótkich cytatów). */
.home-manifesto{
  margin-top: clamp(32px, 4vw, 56px);
  padding: 32px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.home-manifesto .hm-k{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.home-manifesto p{
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 18px;
  line-height: 29px;
  color: var(--ink-dim);
}
.home-manifesto p:last-child{ margin-bottom: 0; }
.home-manifesto b{ color: var(--ink); font-weight: 600; }
@media (max-width: 767px){
  .home-manifesto{ padding: 24px; }
  .home-manifesto p{ font-size: 16px; line-height: 26px; }
}

/* Generyczny split 2-kolumnowy (sekcja „dla kogo"). */
.home-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 32px);
  align-items: start;
}
.home-fit-card{
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.home-fit-card--muted{ background: var(--white); }
.home-fit-card--muted .book-features li::before{ background: var(--secondary); }
.home-fit-h{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.home-fit-card--muted .home-fit-h{ color: var(--ink-faint); }
@media (max-width: 820px){
  .home-split{ grid-template-columns: 1fr; }
}
@media (max-width: 767px){ .home-fit-card{ padding: 24px; } }

/* Section scaffolding — odstępy 96 / 56 px; pas (.home-sec-band) = #F5F6F8. */
.home-sec{
  padding: 96px 0;
  position: relative;
  background: var(--white);
}
.home-sec-band{
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 767px){ .home-sec{ padding: 56px 0; } }

/* About — 2-col with portrait */
.home-sec-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.home-sec-media{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--border);
}
.home-sec-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
}
.home-sec-body .lede{ max-width: 56ch; }
@media (max-width: 980px){
  .home-sec-grid{ grid-template-columns: 1fr; gap: 40px; }
  .home-sec-media{ aspect-ratio: 4/3; max-width: 520px; }
}

/* „0 obietnic gwarantowanego zysku" — granatowa karta: złota cyfra i złote
   wyróżnienie są czytelne tylko na granacie. */
.home-highlight{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  padding: 32px 40px;
  border-radius: var(--radius-l);
  background: var(--navy);
}
.home-highlight-num{
  font-family: var(--serif);
  font-size: 96px;
  line-height: 1;
  color: var(--gold);
}
@media (max-width: 767px){ .home-highlight{ padding: 24px; } }
@media (max-width: 640px){
  .home-highlight{ grid-template-columns: 1fr; text-align: center; }
}

/* Testimonials — karty na szarym pasie, więc białe. Cytat = serif (krótki cytat). */
.home-testimonials{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.testimonial-card{
  position: relative;
  margin: 0;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testimonial-disclaimer{
  margin: clamp(24px, 3vw, 36px) auto 0;
  max-width: 72ch;
  text-align: center;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-faint);
}
.testimonial-mark{
  font-family: var(--serif);
  font-size: 72px;
  line-height: .6;
  color: var(--gold);
  height: 28px;
}
.testimonial-quote{
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 30px;
  color: var(--ink);
  font-style: italic;
  flex: 1;
}
.testimonial-cap{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testimonial-author{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 900px){ .home-testimonials{ grid-template-columns: 1fr; } }
@media (max-width: 767px){ .testimonial-card{ padding: 24px; } }

/* Why I do this — centered narrow */
.home-why{
  max-width: 760px;
  margin: 0 auto;
}
.home-why .lede{ max-width: none; }

/* Final CTA band — granatowa karta w białej sekcji. */
.home-cta-band{
  text-align: center;
  padding: 64px 32px;
  border-radius: var(--radius-l);
  background: var(--navy);
}
.home-cta-band .eyebrow::before{ display: none; }
.home-cta-band .h-section{ margin-left: auto; margin-right: auto; }
.home-cta-band .lede{ max-width: 560px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px){ .home-cta-band{ padding: 48px 20px; } }

/* ---------- Slim mid-page CTA bar (/start: ebooks → book) ---------- */
/* Karta #F5F6F8 z ramką, zamiast dawnej „pigułki" z poświatą. */
.start-midcta{ padding: clamp(28px, 5vw, 56px) 0; }
.mid-cta-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(18px, 3vw, 40px);
  padding: 24px 32px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.mid-cta-copy{ display:flex; flex-direction:column; gap: 8px; }
.mid-cta-copy p{
  margin:0; font-family: var(--serif);
  font-size: 22px; line-height: 32px; color: var(--ink);
}
.mid-cta-bar .btn-primary{ flex-shrink:0; }
@media (max-width: 640px){
  .mid-cta-bar{ flex-direction:column; align-items:stretch; text-align:center;
    padding: 24px 20px; gap: 16px; }
  .mid-cta-copy{ align-items:center; }
  .mid-cta-copy p{ font-size: 20px; line-height: 30px; }
  .mid-cta-bar .eyebrow{ justify-content:center; }
  .mid-cta-bar .btn-primary{ justify-content:center; }
}

/* ---------- Minimal nav (legal/kontakt pages) ---------- */
.nav-minimal{ justify-content: space-between; }
.nav-back{ padding-left: 14px; }
.arr-back{ transition: transform .25s; display:inline-block; }
.nav-back:hover .arr-back{ transform: translateX(-4px); }

/* ---------- Legal pages (regulamin, polityka) ---------- */
/* Długi tekst prawny: kolumna ~70 znaków, body 16/26, H1/H2 wg hierarchii marki
   (H1 Libre Baskerville; nagłówki paragrafów jako H3-podobne Montserrat 700). */
.legal-page{
  padding: 64px 0 96px;
}
@media (max-width: 767px){ .legal-page{ padding: 40px 0 56px; } }
.legal-page .wrap{ max-width: 820px; }
.legal-page h1{
  font-family: var(--serif);
  font-size: 48px;
  line-height: 58px;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--ink);
}
@media (max-width: 767px){ .legal-page h1{ font-size: 32px; line-height: 40px; } }
.legal-page .legal-meta{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 48px;
}
.legal-section{
  margin: 40px 0;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.legal-section:first-of-type{ border-top: none; padding-top: 0; }
.legal-section h2{
  font-family: var(--sans);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 16px;
}
.legal-section h3{
  font-family: var(--sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink);
  margin: 24px 0 10px;
}
.legal-section p, .legal-section li{
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-dim);
}
.legal-section p{ margin: 0 0 14px; }
.legal-section ul, .legal-section ol{ margin: 0 0 16px; padding-left: 22px; }
.legal-section li{ margin-bottom: 6px; }
.legal-section li::marker{ color: var(--navy); }
/* Linki: granat + podkreślenie (brand book). */
.legal-section a{ color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.legal-section a:hover{ text-decoration-thickness: 2px; text-decoration-color: var(--gold); }
.legal-placeholder{
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius);
  background: #FBF5EC;
  border: 1px dashed var(--gold);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
}
.legal-section h4{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 18px 0 8px;
}
.legal-section code{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 14px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--navy);
}
.legal-toc{
  margin: 0 0 8px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.legal-toc ol{ margin: 10px 0 0; padding-left: 20px; }
.legal-toc li{ margin-bottom: 6px; }
.legal-toc a{ color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.legal-table{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 21px;
}
.legal-table th, .legal-table td{
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--ink-dim);
}
.legal-table th{ color: var(--ink); font-weight: 600; background: var(--surface); }

/* ---------- Kontakt page ---------- */
.kontakt-page{
  padding: 64px 0;
}
@media (max-width: 767px){ .kontakt-page{ padding: 40px 0; } }
.kontakt-page .wrap{ max-width: 720px; }
.kontakt-page h1{
  font-family: var(--serif);
  font-size: 48px;
  line-height: 58px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 12px;
}
@media (max-width: 767px){ .kontakt-page h1{ font-size: 32px; line-height: 40px; } }
.kontakt-page .lede{ max-width: none; margin-bottom: 40px; }

/* Formularz = karta (#F5F6F8, ramka #D9DEE5, radius 12); pola białe, 48 px,
   ramka #536174; etykieta zawsze nad polem. */
.contact-form{
  display: grid;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
}
@media (max-width: 767px){ .contact-form{ padding: 24px 20px; } }
.contact-form label{
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 21px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  /* width + min-width: bez nich pole trzyma domyślne ~20 znaków i w wąskiej
     kolumnie gridu (kierunkowy, telefon na mobile) wychodzi poza kartę. */
  width: 100%;
  min-width: 0;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--secondary);
  padding: 12px 14px;
  border-radius: var(--radius);
  font: inherit;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  transition: border-color .15s, box-shadow .15s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: var(--secondary); }
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"]{ border-color: var(--error); }
.contact-form textarea{ min-height: 140px; resize: vertical; }
.contact-form .cf-row-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px){
  .contact-form .cf-row-2{ grid-template-columns: 1fr; }
}
.contact-form .cf-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dim);
  line-height: 21px;
  cursor: pointer;
}
.contact-form .cf-checkbox input[type="checkbox"]{
  margin-top: 0;
  accent-color: var(--navy);
  flex-shrink: 0;
}
.contact-form .cf-checkbox a{ color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.contact-form .cf-checkbox a:hover{ text-decoration-color: var(--gold); }
.contact-form .submit-row{ margin-top: 8px; }
.contact-form .submit-row .btn-primary{ width: 100%; justify-content: center; }
.contact-form .recaptcha-note{
  font-size: 12px;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
  line-height: 18px;
}
.contact-form .recaptcha-note a{ color: var(--navy); text-decoration: underline; }

/* ---------- Kontakt CTA section ---------- */
.kontakt-cta{
  padding: 0 0 96px;
}
@media (max-width: 767px){ .kontakt-cta{ padding: 0 0 56px; } }
.kontakt-cta .wrap{ max-width: 820px; text-align: center; }

/* ---------- Book checkout: waiting overlay + timeout screen ---------- */
.payment-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(26,43,68,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.payment-overlay-card{
  max-width: 440px;
  width: 100%;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--white);
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.35);
}
.payment-overlay-card h3{
  margin: 18px 0 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: var(--ink);
}
.payment-overlay-card p{
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-dim);
}
.payment-spinner{
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: payment-spin 0.9s linear infinite;
}
@keyframes payment-spin{
  to { transform: rotate(360deg); }
}
.checkout-timeout{
  text-align: center;
}
.checkout-timeout .checkout-title{
  color: var(--ink);
  margin-bottom: 18px;
}
.checkout-timeout-text{
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-dim);
  margin: 0 0 14px;
}
.checkout-timeout-text a{
  color: var(--navy);
  text-decoration: underline;
}
.checkout-timeout .checkout-submit{
  margin-top: 20px;
}

/* Cookie consent banner (RODO) — injected into every page by build.js */
.dk-consent{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: 0 16px 40px -12px rgba(26,43,68,.35);
}
.dk-consent[hidden]{ display: none; }
.dk-consent__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dk-consent__text{
  margin: 0;
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 21px;
  color: var(--secondary);
}
.dk-consent__text a{
  color: var(--navy);
  text-decoration: underline;
}
.dk-consent__actions{
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.dk-consent__btn{
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius);
  border: 1px solid var(--navy);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* „Odrzuć" = przycisk drugorzędny, „Akceptuję" = główny. */
.dk-consent__btn--reject{
  background: var(--white);
  color: var(--navy);
}
.dk-consent__btn--reject:hover{
  background: var(--surface);
}
.dk-consent__btn--accept{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.dk-consent__btn--accept:hover{
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}
@media (max-width: 600px){
  .dk-consent__inner{ padding: 16px; }
  .dk-consent__actions{ width: 100%; }
  .dk-consent__btn{ flex: 1 1 0; text-align: center; }
}

/* ===================== Uniwersytet Tradingu funnel ===================== */
/* Shared by /ut, /hello (A/B/C landings), /egzamin i /konsultacja. Szata marki
   (granat/złoto/biel, Libre Baskerville + Montserrat — patrz nagłówek pliku).
   Hero tych stron ma klasę `.hero`, więc jest granatową powierzchnią z listy
   `.on-navy`; reszta sekcji to biel z kartami #F5F6F8. */

.ut-section{
  padding: 96px 0;
  border-top: 1px solid var(--border);
  background: var(--white);
}
@media (max-width: 767px){ .ut-section{ padding: 56px 0; } }
.ut-h{ margin: 12px 0 0; }
.ut-lede{ margin-top: 18px; }

/* Hero */
.ut-hero{ border-top: none; }
/* Jasna karta formularza wewnątrz granatowego hero (/egzamin — rejestracja):
   przywracamy jasną paletę, inaczej etykiety dziedziczą biały tekst z hero. */
.ut-hero .checkout-form{
  --bg: var(--white);
  --bg-2: var(--surface);
  --ink: var(--navy);
  --ink-dim: var(--secondary);
  --ink-faint: var(--secondary);
  --line: var(--border);
  --line-2: var(--border);
  --line-strong: var(--secondary);
  --gold-soft: var(--navy);
  --focus: var(--navy);
  color: var(--navy);
  background: var(--white);
}
.ut-hero-title{ margin: 18px 0 0; max-width: 18ch; }
.ut-cta-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top: 34px; }
.ut-cta-note{ color: var(--ink-faint); font-size: 14px; line-height: 21px; }

/* Wspólna karta UT: tło #F5F6F8, ramka #D9DEE5, radius 12, padding 24–32. */
.ut-pillar,
.ut-step,
.ut-card,
.ut-seat,
.ut-cert,
.ut-honesty,
.lp-book,
.lp-capture,
.ex-q,
.ex-score,
.ex-booking{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}

/* Pillars */
.ut-pillars{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.ut-pillars-2{ grid-template-columns: repeat(2, 1fr); }
.ut-pillar{ padding: 32px; }
.ut-pillar-num{ font-family: var(--serif); color: var(--navy); font-size: 36px; line-height: 1; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--gold); display: inline-block; }
.ut-pillar h3{ font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 30px; margin: 0 0 8px; color: var(--navy); }
.ut-pillar p{ color: var(--ink-dim); font-size: 16px; line-height: 26px; margin: 0; }
.ut-pillar-foot{ margin-top: 32px; font-family: var(--serif); font-size: 28px; line-height: 36px; color: var(--ink); }
.ut-pillar-foot b{ color: var(--navy); font-weight: 400; font-style: italic; }

/* Steps (semestr) */
.ut-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.ut-step{ border-left: 3px solid var(--gold); padding: 32px; }
.ut-step-tag{ font-family: var(--sans); font-weight: 600; font-size: 14px; line-height: 21px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.ut-step h3{ font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 30px; margin: 10px 0 8px; color: var(--navy); }
.ut-step p{ color: var(--ink-dim); font-size: 16px; line-height: 26px; margin: 0; }

/* Admissions cards */
.ut-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.ut-card{ padding: 32px; text-align:center; }
.ut-card-n{
  width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: var(--radius);
  display:grid; place-items:center; color: var(--navy); background: var(--white);
  margin: 0 auto 16px; font-family: var(--sans); font-weight: 700; font-size: 18px;
}
.ut-card h3{ font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 28px; margin: 0 0 6px; color: var(--navy); }
.ut-card p{ color: var(--ink-dim); font-size: 15px; line-height: 24px; margin: 0; }

/* Seats / scarcity stats */
.ut-seats{ display:flex; gap: 24px; flex-wrap:wrap; margin-top: 32px; }
.ut-seat{ flex:1; min-width: 150px; text-align:center; padding: 24px; }
.ut-seat b{ display:block; font-family: var(--serif); font-weight: 400; font-size: 40px; color: var(--navy); line-height: 1; margin-bottom: 8px; }
.ut-seat span{ color: var(--secondary); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* Philosophy */
.ut-philo{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items:stretch; }
.ut-philo-photo{
  height: 100%; min-height: 460px; border-radius: var(--radius-l);
  overflow: hidden; background: var(--border);
}
.ut-philo-photo img{
  /* Fill the column's full height; crop whatever overflows horizontally. */
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
/* Krótki cytat — Libre Baskerville (brand: H1–H2 i krótkie cytaty). */
.ut-quote{ font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 38px; margin: 14px 0 18px; color: var(--navy); }
@media (max-width: 767px){ .ut-quote{ font-size: 22px; line-height: 32px; } }
.ut-philo-p{ color: var(--ink-dim); margin: 0 0 12px; font-size: 16px; line-height: 26px; }
.ut-sig{ color: var(--navy); font-weight: 600; font-size: 14px; line-height: 21px; margin-top: 6px; }

/* Certificate */
.ut-cert{
  display:grid; grid-template-columns: auto 1fr; gap: 32px; align-items:center;
  padding: 32px;
}
.ut-cert-seal{
  width: 96px; height: 96px; border: 2px solid var(--gold); border-radius: 50%;
  display:grid; place-items:center; text-align:center; color: var(--navy); background: var(--white);
  padding: 8px; font-family: var(--sans); font-weight: 700; font-size: 11px; line-height: 1.3; letter-spacing: .08em;
}
.ut-cert-h{ font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 32px; margin: 8px 0; color: var(--navy); }
.ut-cert-p{ color: var(--ink-dim); font-size: 16px; line-height: 26px; margin: 0; }

/* Honesty quote (landing B) */
.ut-honesty{ border-left: 3px solid var(--gold); padding: 32px 40px; }
.ut-honesty p{ font-family: var(--serif); font-size: 24px; line-height: 36px; margin: 0; color: var(--navy); }
@media (max-width: 767px){ .ut-honesty{ padding: 24px; } .ut-honesty p{ font-size: 20px; line-height: 30px; } }
.ut-honesty-who{ margin-top: 16px; color: var(--secondary); font-weight: 600; font-size: 14px; line-height: 21px; }

/* Apply / CTA */
.ut-apply{ background: var(--surface); }
/* Na szarym pasie karty są białe, inaczej zlewają się z tłem. */
.ut-apply .ex-booking,
.ut-apply .lp-capture,
.ut-apply .checkout-form{ background: var(--white); }
.ut-apply-cta{ margin-top: 30px; display:flex; flex-direction:column; align-items:center; gap: 14px; }
.ut-apply-note{ color: var(--ink-dim); font-size: 14px; line-height: 21px; max-width: 48ch; margin: 0; }

@media (max-width: 860px){
  .ut-pillars, .ut-pillars-2, .ut-steps, .ut-cards{ grid-template-columns: 1fr; }
  .ut-philo{ grid-template-columns: 1fr; }
  /* Stacked: the photo has no text column to match, so give it a fixed portrait frame. */
  .ut-philo-photo{ aspect-ratio: 4/5; height: auto; min-height: 0; }
  .ut-cert{ grid-template-columns: 1fr; text-align:center; }
  .ut-cert-seal{ margin: 0 auto; }
}
@media (max-width: 767px){
  .ut-pillar, .ut-step, .ut-card, .ut-cert{ padding: 24px; }
}

/* ----- Landing A/B/C extras (/hello) ----- */
.lp-books{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.lp-book{ overflow:hidden; }
/* Zastępcza „okładka" — granatowa plansza z tytułem (złoty tekst tylko na granacie). */
.lp-book-cover{
  aspect-ratio: 3/4; display:grid; place-items:center; text-align:center; padding: 24px;
  color: var(--gold); font-family: var(--serif); font-size: 18px; line-height: 1.3;
  background: var(--navy);
}
.lp-book-body{ padding: 24px; }
.lp-book-body h3{ font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 26px; margin: 0 0 6px; color: var(--navy); }
.lp-book-body p{ color: var(--ink-dim); font-size: 15px; line-height: 24px; margin: 0; }

.lp-video{
  position: relative; width: 100%; aspect-ratio: 16/9; margin-top: 30px;
  border-radius: var(--radius-l);
  display:grid; place-items:center; gap: 12px; color: #D5DBE4;
  font-size: 14px; line-height: 21px;
  background: var(--navy);
}
.lp-video-play{
  width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--gold);
  display:grid; place-items:center; color: var(--gold);
}
.lp-video-play svg{
  /* Nudge the triangle right so its mass — not its bounding box — sits centred. */
  display:block; margin-left: 3px;
}

/* Real hero video (Wistia embed) — replaces the .lp-video placeholder on Landing B. */
.lp-video-wrap{
  margin-top: 30px;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--navy);
}
.lp-video-wrap wistia-player{ display:block; width:100%; }

/* Formularz zapisu: etykieta nad polem, pola 48 px / radius 6 / ramka #536174. */
.lp-capture{
  max-width: 520px; margin: 28px auto 0; text-align:left;
  padding: 32px; display:grid; gap: 16px;
}
@media (max-width: 767px){ .lp-capture{ padding: 24px; } }
.lp-capture label{ display:grid; gap: 6px; }
.lp-capture label > span{ font-weight: 600; font-size: 14px; line-height: 21px; color: var(--navy); }
.lp-capture input{
  width: 100%; min-height: 48px; background: var(--white); border: 1px solid var(--secondary);
  border-radius: var(--radius); padding: 0 14px; font-family: var(--sans); font-size: 16px; color: var(--navy);
}
.lp-capture input:focus{ border-color: var(--navy); }
.lp-capture-btn{ width: 100%; justify-content: center; margin-top: 8px; }
.lp-capture-err{ color: var(--error); font-size: 14px; line-height: 21px; margin: 0; }

@media (max-width: 760px){ .lp-books{ grid-template-columns: 1fr; } }

/* ----- Egzamin (/egzamin) ----- */
.ex-narrow{ max-width: 820px; }
.ex-quiz{ margin-top: 28px; display:grid; gap: 32px; }
.ex-block{ display:grid; gap: 24px; }
.ex-block-head{ margin-bottom: 2px; }
.ex-q{ padding: 24px; }
.ex-q-err{ border-color: var(--error); }
/* Tekstowy komunikat błędu przy pytaniu — kolor nie jest jedynym nośnikiem (1.4.1/3.3.1) */
.ex-q-errmsg{ color: var(--error); font-size: 14px; line-height: 21px; margin: 12px 0 0; }
.ex-q-label{ display:block; font-weight: 600; font-size: 18px; color: var(--navy); margin-bottom: 16px; line-height: 28px; }
.ex-options{ display:grid; gap: 8px; }
/* Opcja odpowiedzi: biała, ramka #536174; wybrana = granatowa ramka 2 px + jasne
   granatowe tło + wypełniony znacznik (stan czytelny nie tylko kolorem). */
.ex-option{
  display:flex; align-items:center; gap: 12px; text-align:left; width: 100%;
  min-height: 48px;
  border: 1px solid var(--secondary); border-radius: var(--radius); padding: 12px 16px;
  background: var(--white); color: var(--navy); font-size: 16px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ex-option:hover{ background: var(--surface); }
.ex-option.on{ border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #EDF0F4; }
.ex-mark{
  flex-shrink:0; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--secondary); display:grid; place-items:center;
  font-size: 11px; color: var(--white); background: var(--white);
}
.ex-mark.sq{ border-radius: 4px; }
.ex-option.on .ex-mark{ border-color: var(--navy); background: var(--navy); }
.ex-option-label{ line-height: 1.5; }
.ex-textarea{
  width: 100%; min-height: 96px; background: var(--white); border: 1px solid var(--secondary);
  border-radius: var(--radius); padding: 12px 14px; color: var(--navy); font-family: var(--sans); font-size: 16px; line-height: 26px; resize: vertical;
}
.ex-textarea:focus{ border-color: var(--navy); }
.ex-next{ margin-top: 28px; }
.ex-contact{ margin-top: 24px; }

.ex-result{ text-align:center; max-width: 640px; margin: 0 auto; }
/* Etykieta profilu — prostokąt z małym promieniem, nie pigułka. */
.ex-badge{
  display:inline-block; font-weight: 600; font-size: 14px; line-height: 21px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 6px 14px; margin-bottom: 18px; background: var(--white);
}
.ex-scores{ display:flex; gap: 24px; justify-content:center; margin-top: 26px; flex-wrap: wrap; }
.ex-score{ padding: 24px 32px; min-width: 150px; }
.ex-score b{ display:block; font-family: var(--serif); font-weight: 400; font-size: 40px; color: var(--navy); line-height: 1; margin-bottom: 8px; }
.ex-score span{ font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); }
.ex-booking{
  margin: 40px auto 0; max-width: 720px;
  padding: 32px;
}
@media (max-width: 767px){ .ex-booking{ padding: 24px; } }
.ex-list-done{ text-align:center; max-width: 560px; margin: 36px auto 0; }

/* ----- Booking slot picker ----- */
.bk{ margin-top: 22px; }
.bk-cal-title{ font-weight: 600; font-size: 14px; line-height: 21px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.bk-days{ display:flex; gap: 8px; overflow-x:auto; padding-bottom: 10px; margin-bottom: 18px; }
/* Dzień / godzina: biały przycisk z ramką #536174; wybrany = granat + biały tekst. */
.bk-day{
  flex-shrink:0; min-height: 48px; border: 1px solid var(--secondary); border-radius: var(--radius); padding: 0 16px;
  background: var(--white); color: var(--navy); font-size: 14px; font-weight: 600; white-space:nowrap;
  transition: background-color .15s;
}
.bk-day:hover{ background: var(--surface); }
.bk-day.on{ border-color: var(--navy); color: var(--white); background: var(--navy); }
/* Wybór sygnalizowany także znacznikiem, nie tylko kolorem (WCAG 1.4.1) */
.bk-day.on::before{ content:"✓ "; color: var(--gold); }
.bk-slot.on::before{ content:"✓ "; color: var(--gold); }
.bk-slots{ display:grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bk-slot{
  min-height: 48px; border: 1px solid var(--secondary); border-radius: var(--radius); padding: 0; text-align:center;
  background: var(--white); color: var(--navy); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600;
  transition: background-color .15s;
}
.bk-slot:hover{ background: var(--surface); }
.bk-slot.on{ border-color: var(--navy); color: var(--white); background: var(--navy); }
.bk-confirm{ margin-top: 22px; width: 100%; justify-content:center; }
.bk-confirm:disabled{ background: var(--border); color: var(--secondary); cursor: not-allowed; }
.bk-loader{ color: var(--ink-dim); padding: 24px 0; text-align:center; }
.bk-who{ color: var(--ink-dim); font-size: 14px; line-height: 21px; margin: 0 0 16px; padding: 12px 16px; border:1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.bk-who b{ color: var(--navy); font-weight: 600; }
.sf-form{ text-align: left; }
/* Consultation form (form fields + slot picker in one .checkout-form card):
   grid items default to min-width:auto, which lets inputs / the slot grid push
   wider than the card and overflow its background. Force every row & control to
   be allowed to shrink so they stay within the card. */
.bk-form{ width: 100%; max-width: 100%; }
.bk-form > *{ min-width: 0; }
.bk-form .cf-row-2{ min-width: 0; }
.bk-form .cf-row-2 > label{ min-width: 0; }
.bk-form input{ min-width: 0; }
.bk-form .bk,
.bk-form .bk-days,
.bk-form .bk-slots{ min-width: 0; max-width: 100%; }
/* Błąd: #B42318 + komunikat w treści (brand book „States"). */
.bk-error{
  margin-top: 14px; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; line-height: 21px;
  border: 1px solid var(--error); border-left-width: 3px; background: #FEF3F2; color: var(--error);
}
.bk-done, .ex-list-done{ text-align:center; padding: 16px 0; }
.bk-done-mark, .ex-list-done .bk-done-mark{
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display:grid; place-items:center;
  background: var(--success); color: var(--white); font-size: 28px; font-weight: 700;
}
.bk-done h3{ font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 36px; margin: 0 0 8px; color: var(--navy); }
.bk-done p{ color: var(--ink-dim); }
/* ===================== Dostępność (WCAG 2.1 AA) — blok globalny ===================== */
/* Na końcu pliku, żeby wygrywać kaskadą z wcześniejszymi `outline:0` o tej samej
   specyficzności. Widoczny wskaźnik fokusa dla nawigacji klawiaturą (2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  /* brand: 2 px, offset 3 px; granat na bieli, biel na granacie (--focus) */
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Skip-link (2.4.1) — pierwszy element <body>, widoczny tylko przy fokusie */
.skip-link{
  position: fixed;
  top: -100px; left: 16px;
  z-index: 10000;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus{ top: 14px; }

/* Cele dotykowe checkboxów zgód ≥24px (WCAG 2.2: 2.5.8).
   Wszystkie checkboxy w serwisie to zgody w formularzach. */
input[type="checkbox"]{
  width: 24px; height: 24px;
  accent-color: var(--navy);
  flex-shrink: 0;
}

/* Kontener przewijalny dla szerokich tabel (1.4.10 reflow na 320px) */
.table-scroll{ overflow-x: auto; }
.table-scroll > table{ min-width: 480px; }

/* ── Panel admina (/admin) ─────────────────────────────────────────────── */
.adm-wrap{ max-width: 1100px; }
.adm-narrow{ max-width: 560px; }
.adm-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 22px;
}
.adm-nav{ display:flex; gap:16px; }
.adm-user{ color: var(--ink-dim); font-size: 14px; }
.adm-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin: 8px 0 14px;
}
.adm-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.adm-link{
  background:none; border:0; padding:0; cursor:pointer;
  color: var(--navy); font-family: var(--sans); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.adm-link:disabled{ color: var(--ink-faint); cursor:default; text-decoration:none; }
.adm-btn{ min-height: 40px; padding: 8px 18px; font-size: 14px; }
.adm-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 24px;
}
/* Login/hasło karta: przycisk pełnej szerokości z wycentrowaną etykietą
   (w gridzie .checkout-form btn-primary rozciąga się, ale treść siedziała po lewej). */
.adm-card .btn-primary{ width: 100%; justify-content: center; margin-top: 4px; }
.adm-tablewrap{ overflow-x:auto; border:1px solid var(--border); border-radius: var(--radius-l); background: var(--white); }
.adm-table{
  width:100%; border-collapse: collapse; font-size: 14px; font-family: var(--sans);
  min-width: 640px;
}
.adm-table th{
  text-align:left; padding: 12px; color: var(--navy); font-weight:600; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); background: var(--surface);
  white-space: nowrap;
}
.adm-table td{ padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.adm-table tr:last-child td{ border-bottom: 0; }
.adm-table code{ font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 13px; color: var(--navy); }
.adm-row{ cursor:pointer; }
.adm-row:hover td{ background: var(--surface); }
.adm-empty{ color: var(--ink-faint); text-align:center; padding: 22px !important; }
.adm-badge{
  display:inline-block; padding: 3px 10px; border-radius: var(--radius); font-size: 12px; font-weight: 600;
  border: 1px solid var(--secondary); color: var(--secondary); background: var(--white);
}
.adm-badge-active{ color: var(--success); border-color: var(--success); }
/* draft: złoto tylko jako ramka — złoty tekst na bieli byłby nieczytelny */
.adm-badge-draft{ color: var(--navy); border-color: var(--gold); background: #FBF5EC; }
.adm-badge-archived{ color: var(--secondary); }
.adm-json{
  width:100%; min-height: 480px; resize: vertical; box-sizing: border-box;
  background: var(--white); color: var(--navy);
  border: 1px solid var(--secondary); border-radius: var(--radius);
  /* edytor JSON zostaje w kroju stałej szerokości — wcięcia muszą się zgadzać */
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; line-height: 1.55; padding: 14px;
  tab-size: 2;
}
.adm-json:focus{ border-color: var(--navy); }
.adm-json-ro{ min-height: 120px; white-space: pre-wrap; overflow-x:auto; }
.adm-errlist{ margin: 8px 0 0; padding-left: 20px; }
.adm-errlist li{ margin: 3px 0; }
.adm-saved{
  color: var(--success); font-family: var(--sans); font-size: 14px; font-weight: 600; margin: 10px 0;
}
.adm-conflict .adm-link{ color: inherit; }
.adm-filters{
  display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 14px;
}
.adm-filters input{
  min-height: 40px; background: var(--white); color: var(--navy);
  border: 1px solid var(--secondary); border-radius: var(--radius);
  font-family: var(--sans); font-size: 14px; padding: 0 12px;
}
.adm-filters input:focus{ border-color: var(--navy); }
.adm-count{ color: var(--ink-dim); font-size: 14px; }
.adm-dl{
  display:grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin:0;
  font-size: 14px;
}
.adm-dl dt{ color: var(--ink-dim); }
.adm-dl dd{ margin: 0; }
.adm-answers{ display:flex; flex-direction:column; gap: 10px; margin-top: 12px; }
.adm-answer{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px;
}
.adm-answer-q{ color: var(--ink-dim); font-size: 13px; margin-bottom: 4px; }
.adm-answer-a{ font-size: 15px; white-space: pre-wrap; }

/* ── Silnik egzaminów: nowe typy pól + paginacja ───────────────────────── */
.ex-input{ min-height: auto; }
.ex-select{
  width: 100%; box-sizing: border-box;
  min-height: 48px; background-color: var(--white); color: var(--navy);
  border: 1px solid var(--secondary); border-radius: var(--radius);
  font-family: var(--sans); font-size: 16px; padding: 0 40px 0 14px;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.ex-select:focus{ border-color: var(--navy); }
.ex-select option{ background: var(--white); color: var(--navy); }
.ex-consent{
  display:flex; gap: 12px; align-items:flex-start; cursor:pointer;
  font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--navy);
}
.ex-consent input[type="checkbox"]{ margin-top: 1px; }
.ex-progress{ margin: 14px 0 20px; }
.ex-progress-label{
  display:block; font-family: var(--sans); font-size: 14px; color: var(--ink-dim);
  margin-bottom: 8px;
}
.ex-progress-bar{
  height: 6px; border-radius: 3px; background: var(--border); overflow: hidden;
}
.ex-progress-fill{
  height: 100%; border-radius: 3px; background: var(--gold);
  transition: width .25s ease;
}
.ex-pagenav{
  display:flex; gap: 14px; align-items:center; justify-content:flex-end;
  margin-top: 22px; flex-wrap: wrap;
}
.ex-pagenav .ex-next{ margin-top: 0; }
/* „Wstecz" = przycisk drugorzędny marki: ramka 1 px, hover #F5F6F8. */
.ex-back{
  min-height: 48px; background: var(--white); border: 1px solid var(--navy); border-radius: var(--radius);
  color: var(--navy); font-family: var(--sans); font-size: 16px; font-weight: 600;
  padding: 0 24px; cursor:pointer; transition: background-color .15s;
}
.ex-back:hover{ background: var(--surface); }

/* ── Panel: losowanie egzaminów (typ + champion) ───────────────────────── */
.adm-dim{ color: var(--ink-faint); }
.adm-champion-row td{ background: #EAF3EE; }
.adm-champ{ margin-left: 8px; }
.adm-drawnote{
  margin: 0 0 18px; font-family: var(--sans); font-size: 14px;
  line-height: 1.6; color: var(--ink-dim);
}
.adm-drawnote code{ font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 13px; color: var(--navy); }
.adm-typesel{
  font-family: var(--sans); font-size: 13px; padding: 4px 6px;
  color: var(--navy); background: var(--white);
  border: 1px solid var(--secondary); border-radius: var(--radius);
}

/* ── QuickBooking (/ut + /hello A/B/C) ──────────────────────────────────────
   Dwukrokowa rezerwacja: kalendarz → dane. Reużywa .bk-* z /konsultacja;
   poniżej tylko to, czego tamten widok nie miał — nagłówek nad kalendarzem,
   pasek z wybranym terminem i notka o Zoomie. */
.qb{ text-align: left; }
.qb-intro{ margin-bottom: 16px; }
.qb-heading{ margin-bottom: 6px; }
.qb-sub{ color: var(--ink-dim); font-size: 14px; line-height: 21px; margin: 0; }
.qb-note{
  color: var(--ink-dim); font-size: 14px; line-height: 21px;
  margin: 14px 0 16px; padding-left: 12px; border-left: 2px solid var(--gold);
}
.qb-summary{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 18px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.qb-summary-label{
  display: block; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--secondary); margin-bottom: 3px;
}
.qb-back{
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px;
}
.qb-back:hover{ text-decoration-color: var(--gold); }
/* Krok 1 nie jest <form>, więc nie dziedziczy szerokości pól z .checkout-form. */
.qb-step .bk-days, .qb-step .bk-slots{ width: 100%; }