/* live-v2.css - system wizualny V2 dla lejka LIVE (index, ankieta, dziekujemy).
 *
 * Zastepuje pare main-styles.css + live-overrides.css na tych trzech stronach.
 * /admin/ebooki/ zostaje na starym arkuszu - patrz props `stylesheet` w BaseLayout.astro.
 *
 * Zrodlo systemu: nastart.doradcasukcesyjny.pl/DESIGN.md (Fraunces + Newsreader,
 * naprzemienne pasma jasne/ciemne, chapter tick, zloto tylko jako akcja).
 * Zloto #c7a56f jest identyczne z paleta wymagana w AGENTS.md dla tej domeny.
 *
 * Fonty sa self-hostowane (public/fonts/*.woff2) - nie ma zadnego zapytania do
 * fonts.googleapis.com, bo to byl najwiekszy pojedynczy koszt w LCP (zmierzone
 * 2026-08-14: LCP 6,2 s na produkcji).
 */

/* ============================================================
   1. FONTY
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Brak osobnego pliku italic dla Fraunces jest CELOWY - przegladarka syntezuje
   pochylenie z odmiany prostej. Deklaracja @font-face italic wskazujaca na plik
   prosty daje glify pionowe, czyli zaden italic. Tak samo jak na nastart. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   2. TOKENY
   ============================================================ */

:root {
  color-scheme: only light;

  --paper: #f4efe5;
  --cream: #fffdf7;
  --tint: #e7dcc4;
  --white: #ffffff;
  --ink: #14110d;
  --ink-2: #1d1913;
  --ink-soft: #2a2018;
  --body: #382d20;

  --gold: #c7a56f;
  --gold-deep: #8b6914;
  --gold-ink: #7c5314;
  --gold-light: #e4c58e;

  /* akcent: butelkowa zielen, tylko kreska i podkreslenie, nigdy plaskie tlo */
  --green: #1f4a37;
  --green-soft: #a7c7b6;
  --green-line: #3f8a68;

  /* LIVE ember - jedyne miejsce, gdzie uzywamy czerwieni: kropka "na zywo" */
  --ember: #d65a3a;
  --danger: #9c3d2e;

  --muted: #6b5c4a;
  --cream-70: rgba(255, 250, 240, 0.74);
  --cream-55: rgba(255, 250, 240, 0.58);
  --line: rgba(78, 58, 38, 0.16);
  --line-2: rgba(78, 58, 38, 0.3);
  --line-dark: rgba(228, 197, 142, 0.22);

  --content: 1160px;
  --topbar: 60px;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --shadow: 0 1px 2px rgba(20, 17, 13, 0.06), 0 6px 14px rgba(20, 17, 13, 0.06),
    0 24px 54px rgba(20, 17, 13, 0.12);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   3. BAZA
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--body);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  font-feature-settings: "onum" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-top: var(--topbar);
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

.container {
  width: min(100% - 40px, var(--content));
  margin-inline: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.024em;
  font-variation-settings: "opsz" 144;
}

h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 110;
}

h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 560;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 18px;
}

strong {
  font-weight: 620;
  color: inherit;
}

/* Liczby wyswietlane: lining + tabular. Proza zostaje na oldstyle. */
.cd-num,
.mentor-stat-value,
.counter-value {
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.overline {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green);
}

.overline-gold {
  color: var(--gold-light);
}


/* Unikaj sierot na koncu akapitu */
/* ============================================================
   4. PASMA I RYTM
   ============================================================ */

.sect {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0;
  scroll-margin-top: calc(var(--topbar) + 8px);
}

/* chapter tick: 64px kreska w lewym gornym rogu kazdego pasma */
.sect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--green) 0 64px, transparent 64px);
}

.sect-dark {
  background: var(--ink);
  color: var(--cream-70);
}
.sect-dark::before {
  background: linear-gradient(90deg, var(--gold-deep) 0 64px, transparent 64px);
}
.sect-dark h1,
.sect-dark h2,
.sect-dark h3 {
  color: var(--cream);
}
.sect-dark strong {
  color: var(--cream);
}
.sect-dark .overline {
  color: var(--green-soft);
}

.sect-paper {
  background: var(--paper);
  color: var(--body);
}
.sect-cream {
  background: var(--cream);
  color: var(--body);
}
/* Styk jasne-na-jasnym dostaje pelna cienka kreske, zeby dwa beze sie nie zlaly */
.sect-paper + .sect-cream::before,
.sect-cream + .sect-paper::before {
  background: linear-gradient(90deg, var(--green) 0 64px, var(--line-2) 64px);
}

.section-heading {
  max-width: 24ch;
}
.section-lead {
  max-width: 58ch;
  margin-top: 16px;
  color: var(--ink-soft);
}
.sect-dark .section-lead {
  color: var(--cream-70);
}

/* ============================================================
   5. PRZYCISKI
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.btn-gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-secondary:hover {
  background: rgba(139, 105, 20, 0.08);
  border-color: var(--gold-deep);
}
.sect-dark .btn-secondary {
  color: var(--cream);
  border-color: var(--line-dark);
}
.sect-dark .btn-secondary:hover {
  background: rgba(228, 197, 142, 0.12);
  border-color: var(--gold-light);
}

.btn-full {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.62;
  cursor: progress;
}

/* Stary markup niesie <span class="btn-shine"> - w V2 nie ma polysku,
   ale span zostaje w HTML, wiec musi byc niewidoczny. */
.btn-shine {
  display: none;
}

.btn-link-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--gold-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.btn-link-secondary:hover {
  color: var(--gold-light);
}
.btn-link-secondary-dark {
  color: var(--gold-ink);
  text-decoration-color: var(--gold-deep);
}
.btn-link-secondary-dark:hover {
  color: var(--ink);
}

.section-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 32px;
}
.section-cta-row {
  justify-content: center;
}

/* ============================================================
   6. GORNY PASEK Z ODLICZANIEM
   ============================================================ */

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: rgba(20, 17, 13, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
}

.top-bar-inner {
  width: min(100% - 32px, var(--content));
  margin-inline: auto;
  min-height: var(--topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.top-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  text-decoration: none;
  /* Kotwica dziedziczyla --body (ciemny braz) z <body>, czyli 1,4:1 na ciemnym
     pasku. Dzis nic sie w tym kolorze nie renderuje, bo tekst marki jest w
     osobnym spanie z wlasnym kolorem, a na mobile jest w ogole ukryty - ale
     kazdy nowy tekst wrzucony wprost do tej kotwicy bylby niewidoczny. */
  color: var(--cream);
}
.mc-owl-bar {
  height: 26px;
  width: auto;
  display: block;
}
.top-bar-brand-text {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--cream);
  white-space: nowrap;
}

.top-bar-countdown {
  display: flex;
  align-items: center;
  gap: 12px;
}
.live-now-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f4d6c8;
  white-space: nowrap;
}
.live-now-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 0 rgba(214, 90, 58, 0.55);
  animation: topBarLiveDot 1.4s ease-in-out infinite;
}
html.live-prelive .live-now-badge {
  color: var(--gold-light);
}
html.live-prelive .live-now-badge .live-now-dot {
  background: var(--gold-light);
  box-shadow: 0 0 0 0 rgba(228, 197, 142, 0.5);
}
@keyframes topBarLiveDot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.72);
  }
}
.top-bar-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-55);
}
.countdown {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 30px;
}
.cd-num {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-light);
}
.cd-label {
  font-family: var(--sans);
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-55);
  margin-top: 3px;
}
.cd-sep {
  color: var(--line-dark);
  font-size: 0.9rem;
  align-self: center;
}

.top-bar-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  white-space: nowrap;
}
.top-bar-cta:hover {
  background: var(--gold-light);
}

@media (max-width: 900px) {
  .top-bar-brand-text {
    display: none;
  }
  .top-bar-label {
    display: none;
  }
}
@media (max-width: 560px) {
  .cd-unit {
    min-width: 26px;
  }
  .cd-num {
    font-size: 0.94rem;
  }
  .top-bar-cta {
    padding: 0 15px;
    font-size: 0.84rem;
  }
  .live-now-badge {
    max-width: 172px;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-now-dot {
    animation: none;
  }
}

/* ============================================================
   7. HERO Z FORMULARZEM
   ============================================================ */

.hero-live {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cream);
  background: radial-gradient(52% 70% at 6% 100%, rgba(46, 140, 100, 0.26), rgba(46, 125, 91, 0) 58%),
    radial-gradient(46% 60% at 92% 4%, rgba(199, 165, 111, 0.16), rgba(199, 165, 111, 0) 62%),
    var(--ink);
}

.hero-live-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, var(--content));
  margin-inline: auto;
  padding: clamp(28px, 4vw, 64px) 0 clamp(34px, 4.5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(392px, 430px);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.hero-copy {
  max-width: 34em;
}

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4d6c8;
  background: rgba(214, 90, 58, 0.12);
  border: 1px solid rgba(214, 90, 58, 0.42);
  border-radius: 999px;
}
.badge-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(214, 90, 58, 0.8);
  animation: liveDot 1.6s ease-in-out infinite;
}
html.live-prelive .badge-live {
  color: var(--gold-light);
  background: rgba(199, 165, 111, 0.12);
  border-color: rgba(228, 197, 142, 0.42);
}
html.live-prelive .badge-live-dot {
  background: var(--gold-light);
  box-shadow: 0 0 8px rgba(228, 197, 142, 0.65);
}
@keyframes liveDot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.7);
  }
}

.hero-copy h1 {
  margin: 18px 0 0;
  color: var(--cream);
  /* Bez tego obie linie naglowka konczyly sie pojedynczym slowem-sierota
     ("sukcesji." i "poruszy."), jedna pod druga. */
  text-wrap: pretty;
}
/* Druga linia naglowka. Byla KURSYWA Fraunces w wadze 400, 17,5px na
   telefonie, przy interlinii 1,04 - czyli krojem displayowym uzytym jak tekst
   biezacy, z wierszami, ktore niemal sie stykaly. Wlasciciel zglosil ja jako
   nieczytelna i mial racje: kontrast byl w porzadku (11,4:1), winna byla forma.
   Prosto, ciezej i z oddechem miedzy wierszami. */
.hero-copy h1 .gold-text {
  display: block;
  margin-top: 0.22em;
  font-size: 0.66em;
  font-style: normal;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--gold-light);
}

/* Premisa z maila 01 - trzy zdania, ktore nie padaly na stronie */
.hero-premise {
  margin: 22px 0 0;
  max-width: 40ch;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  line-height: 1.52;
  color: var(--cream-70);
}
.hero-premise strong {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--green-soft);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.hero-languages {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-soft);
}

.hero-mentor {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
}
.hero-mentor img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  /* Zrodlowy portret jest kadrowany pod kolo 240px z duzym marginesem nad
     glowa. Przy 54px domyslne centrowanie wpycha twarz w dolna polowe, wiec
     przesuwamy kadr do gory. */
  object-position: 50% 18%;
  border: 1px solid var(--gold);
  display: block;
  flex: none;
}
.hero-mentor-name {
  display: block;
  font-family: var(--display);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
}
.hero-mentor-role {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--cream-55);
  line-height: 1.3;
  margin-top: 2px;
}
.hero-mentor-role .mc-highlight {
  color: var(--gold-light);
}

/* ============================================================
   8. KARTA FORMULARZA
   ============================================================ */

.form-card {
  background: rgba(255, 253, 247, 0.045);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(10px);
}
.sect-dark .form-card {
  background: rgba(255, 253, 247, 0.05);
}

.form-card-title {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 560;
  color: var(--cream);
  line-height: 1.18;
  margin: 0 0 4px;
}
.form-card-sub {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.42;
  color: var(--cream-70);
}

.form {
  margin: 0;
}

.form-row {
  margin-bottom: 12px;
}
.form-row label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cream-70);
}
.form-row .required {
  color: var(--gold-light);
}
.form-row .optional {
  font-weight: 400;
  color: var(--cream-55);
  letter-spacing: 0;
}

.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--cream);
  background: rgba(20, 17, 13, 0.5);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.form-row input::placeholder,
.form-row textarea::placeholder {
  color: rgba(255, 250, 240, 0.34);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199, 165, 111, 0.22);
}

/* Telefon: staly prefiks +48 zrosniety z polem */
.phone-field {
  display: flex;
  align-items: stretch;
}
.phone-cc {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--cream-70);
  background: rgba(20, 17, 13, 0.68);
  border: 1px solid var(--line-dark);
  border-right: 0;
  border-radius: 6px 0 0 6px;
}
.phone-field input {
  border-radius: 0 6px 6px 0;
}

.form-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}
/* Ta sama zasada co przy .opt: natywny checkbox na ciemnym to biala plama. */
.form-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  border: 1px solid rgba(255, 250, 240, 0.42);
  border-radius: 4px;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.form-check input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  margin-top: -3px;
  transition: transform 0.12s var(--ease);
}
.form-check input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.form-check input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}
.form-check label {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--cream-70);
}
.form-check label a {
  color: var(--gold-light);
  text-underline-offset: 3px;
}
.form-check label strong {
  color: var(--cream);
}

/* Zwijane zgody sprzedazowe w formularzu */
.form-extra {
  margin: 4px 0 14px;
  border-top: 1px solid var(--line-dark);
  padding-top: 10px;
}
.form-extra > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-light);
}
.form-extra > summary::-webkit-details-marker {
  display: none;
}
.form-extra > summary::after {
  content: "+";
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--gold-light);
}
/* U+2212 minus jako escape, nie literalny glif */
.form-extra[open] > summary::after {
  content: "\2212";
}
.form-extra-body {
  padding-top: 12px;
}
.form-extra-body .form-check:last-child {
  margin-bottom: 0;
}

/* Stan bledu - pole i zgoda */
.form-row.field-invalid input,
.form-check.field-invalid input[type="checkbox"] {
  border-color: var(--danger);
  outline: 1px solid var(--danger);
}
.field-error {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: #e2a08f;
}

.form-note {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--cream-55);
  text-align: center;
}

.form-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: #e2a08f;
  background: rgba(156, 61, 46, 0.14);
  border: 1px solid rgba(156, 61, 46, 0.4);
  border-radius: 6px;
}

/* Licznik zapisanych - realna liczba z /api/live/counter */
.signup-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--cream-55);
}
.signup-counter[hidden] {
  display: none;
}
.counter-value {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--gold-light);
}

/* Potwierdzenie po wyslaniu */
.form-ok-redirect {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--cream-55);
}

.form-ok {
  padding: clamp(20px, 2.4vw, 28px);
  background: rgba(31, 74, 55, 0.2);
  border: 1px solid var(--green-line);
  border-radius: 12px;
  text-align: center;
}
.form-ok[hidden] {
  display: none;
}
.form-ok h3 {
  color: var(--cream);
  margin-bottom: 10px;
}
.form-ok p {
  color: var(--cream-70);
  font-size: 0.96rem;
}
.form-ok-actions {
  margin-top: 14px;
}
.cal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border-radius: 3px;
}
.cal-link:hover {
  background: var(--gold-light);
}

/* Sekcja zapisu na dole strony - karta formularza wysrodkowana i zwezona,
   bo na pelnej szerokosci kontenera pola bylyby absurdalnie szerokie. */
.form-section-inner {
  text-align: center;
}
.form-section-inner .signup-block {
  max-width: 520px;
  margin: clamp(24px, 3vw, 34px) auto 0;
  text-align: left;
}

/* Lista korzysci nad formularzem na dole.
   UWAGA: te <svg> w markupie NIE maja atrybutow width/height - maja tylko
   viewBox. Bez jawnego rozmiaru w CSS rozdymaja sie do szerokosci kontenera
   (zmierzone: sekcja urosla do 4295px). Kazdy nowy inline svg w tym arkuszu
   musi dostac rozmiar, dlatego nizej jest jeszcze globalny bezpiecznik. */
.waitlist-perks {
  list-style: none;
  margin: clamp(20px, 2.6vw, 30px) auto 0;
  padding: 0;
  max-width: 520px;
  display: grid;
  gap: 10px;
  text-align: left;
}
.waitlist-perks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--cream-70);
}
.waitlist-perks svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--green-soft);
}

/* Bezpiecznik: inline svg bez width/height nie moze urosnac do kontenera.
   Dotyczy takze <a>, bo ikony przyciskow kalendarza na /dziekujemy/ rozdymaly
   sie do ~48px i lamaly etykiete na trzy linie. */
li > svg:not([width]),
p > svg:not([width]),
a > svg:not([width]),
span > svg:not([width]) {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Przyciski kalendarza: ikona 20px, etykieta w jednej linii, rowna wysokosc. */
.cal-link svg,
.cal-link-icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.cal-link {
  gap: 10px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .ty-actions .cal-link {
    width: 100%;
    white-space: normal;
  }
}

/* ============================================================
   9. PASEK ZAUFANIA
   ============================================================ */

.trust-bar-wrap {
  background: var(--ink-2);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.trust-bar {
  width: min(100% - 40px, var(--content));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(18px, 3vw, 40px);
  padding: 15px 0;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cream-70);
}
.trust-item svg {
  color: var(--green-soft);
  flex: none;
}

/* Na telefonie piec faktow zawijalo sie 2/2/1 z ostatnim wysrodkowanym samotnie.
   Jedna kolumna wyrownana do lewej czyta sie jak lista, a nie jak rozsypka. */
@media (max-width: 560px) {
  .trust-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 14px 0;
  }
}

/* ============================================================
   10. AGENDA
   ============================================================ */

.agenda-grid {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}
.agenda-item {
  position: relative;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.agenda-num {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 560;
  line-height: 1;
  color: var(--gold-ink);
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.agenda-item h3 {
  margin: 12px 0 8px;
}
.agenda-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}
.sect-dark .agenda-item {
  border-left-color: var(--line-dark);
}
.sect-dark .agenda-num {
  color: var(--gold-light);
}
.sect-dark .agenda-item p {
  color: var(--cream-70);
}

/* ============================================================
   11. PROWADZACY
   ============================================================ */

.mentor-full {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(28px, 3.6vw, 44px);
}
.mentor-full-photo img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold);
  display: block;
}
.mentor-full-bio p {
  margin: 12px 0 0;
  max-width: 58ch;
  color: var(--ink-soft);
}
/* --gold-ink jest ciemnym zlotem DO JASNYCH TLA. Na ciemnym daje 2,88:1,
   czyli ponizej AA - zmierzone Lighthouse'em na <strong class="mc-highlight">
   w stopce (#7c5314 na #0f0c09). Kazdy ciemny kontekst musi dostac
   --gold-light, wiec lista musi obejmowac WSZYSTKIE ciemne powierzchnie,
   nie tylko .sect-dark. */
.mc-highlight {
  color: var(--gold-ink);
}
.sect-dark .mc-highlight,
.hero-live .mc-highlight,
.footer .mc-highlight,
.ankieta-page .mc-highlight,
.ty-page .mc-highlight,
.form-card .mc-highlight {
  color: var(--gold-light);
}

.mentor-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.mentor-stat {
  display: flex;
  flex-direction: column;
}
.mentor-stat-value {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 560;
  line-height: 1;
  color: var(--gold-ink);
}
.mentor-stat-label {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 15ch;
}

@media (max-width: 760px) {
  .mentor-full {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .mentor-full-photo img {
    width: 148px;
    height: 148px;
  }
  .mentor-full-bio p {
    text-align: left;
  }
}

/* ============================================================
   12. OPINIE
   ============================================================ */

.quotes {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.quote {
  margin: 0;
  padding: 24px;
  background: rgba(255, 253, 247, 0.04);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
}
.quote-inner {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.quote-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.quote p {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.44;
  color: var(--cream);
}
/* Klasa MUSI byc `expanded` - to ona jest przelaczana w live.js
   (`expand.classList.toggle("expanded")`). Pierwsza wersja tego arkusza
   nasluchiwala `.open` i rozwijanie po prostu nie dzialalo: przycisk zmienial
   napis na "Zwin", a tekst zostawal uciety. Zaden automat tego nie zlapal -
   moj skan martwych klas uznal `.open` za uzywana, bo `open` wystepuje w
   live.js jako nazwa ZMIENNEJ. Zglosil to wlasciciel, patrzac na strone. */
.quote-expand {
  position: relative;
  max-height: 7.5em;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.quote-expand.expanded {
  max-height: 200em;
}
/* Zanik u dolu mowi, ze tekst jest uciety. Bez niego cytat wyglada, jakby po
   prostu konczyl sie w polowie zdania - stary arkusz to mial, przepisujac
   plik od zera zgubilem afordancje razem z nazwa klasy. Kolor to tlo karty
   (rgba kremu 0.04 na --ink), a nie samo --ink. */
.quote-expand::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3em;
  background: linear-gradient(transparent, #191712);
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.quote-expand.expanded::after {
  opacity: 0;
}
.quote-toggle {
  margin-top: 8px;
  /* 44px, nie 32px: to samodzielny przycisk, a nie link w zdaniu, wiec nie
     lapie sie na wyjatek dla linkow inline w WCAG 2.5.8. Zmierzone na 390px. */
  padding: 11px 0;
  min-height: 44px;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-light);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quote footer {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--cream-55);
}
.quote footer strong {
  display: block;
  color: var(--cream);
}
.quotes-more-link {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold-light);
  text-underline-offset: 4px;
}

/* ============================================================
   13. FAQ
   ============================================================ */

.faq-list {
  margin: clamp(30px, 4vw, 44px) auto 0;
  max-width: 72ch;
  display: grid;
  gap: 11px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(20, 17, 13, 0.05);
  transition: border-color 0.15s var(--ease);
}
.faq-item[open] {
  border-color: var(--green);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 58px 20px 22px;
  position: relative;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 560;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--green);
}
.faq-item[open] summary {
  color: var(--green);
}
/* U+2212 minus - escape, nie literalny glif, wiec hook na pauzy przechodzi */
.faq-item[open] summary::after {
  content: "\2212";
}
.faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--body);
}

/* ============================================================
   14. FEATURE AI: SPRAWDZ SWOJE PIERWSZE ZDANIE
   ============================================================ */

/* Trzy rzeczy warte wpisania w cwiczenie. Nie ozdoba: to sa trzy bledy, ktore
   prompt asystenta rozpoznaje najlepiej, wiec czytelnik od razu widzi, po co
   to pole jest. Kropka na koncu zdania byloby tu za duzo - to lista hasel. */
.fs-try {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  max-width: 58ch;
}
.fs-try li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.fs-try li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--gold-deep);
}

.fs-panel {
  margin: clamp(28px, 3.6vw, 44px) auto 0;
  max-width: 720px;
  padding: clamp(22px, 2.8vw, 34px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.sect-dark .fs-panel {
  background: rgba(255, 253, 247, 0.05);
  border-color: var(--line-dark);
}
.fs-panel label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.sect-dark .fs-panel label {
  color: var(--cream-70);
}
.fs-input {
  width: 100%;
  min-height: 96px;
  padding: 13px 15px;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  resize: vertical;
}
.fs-input:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(199, 165, 111, 0.24);
}
.fs-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.fs-count {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--muted);
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.fs-answer {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--paper);
  border-left: 3px solid var(--green);
  border-radius: 0 7px 7px 0;
}
.fs-answer[hidden] {
  display: none;
}
.fs-answer p {
  margin: 0 0 12px;
}
.fs-answer p:last-child {
  margin-bottom: 0;
}
.fs-note {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--muted);
}
.fs-error {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--danger);
}
.fs-error[hidden] {
  display: none;
}

/* ============================================================
   15. STICKY CTA NA MOBILE
   ============================================================ */

.mobile-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(20, 17, 13, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-dark);
}
.mobile-sticky-cta[hidden] {
  display: none;
}
.mobile-sticky-primary {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
}
.mobile-sticky-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 14px;
  color: var(--cream-70);
  font-family: var(--sans);
  font-size: 0.84rem;
  text-decoration: none;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
}

/* JS trzyma element w DOM z hidden=false i steruje widocznoscia klasa .visible
   (patrz updateStickyCta w live.js). Bez bramki na .visible pasek pokazuje sie
   od razu nad formularzem w hero, czyli dokladnie tam, gdzie jest zbedny. */
@media (max-width: 860px) {
  .mobile-sticky-cta:not([hidden]).visible {
    display: flex;
  }
}

/* ============================================================
   16. STOPKA
   ============================================================ */

.footer {
  background: #0f0c09;
  color: var(--cream-55);
  font-size: 0.9rem;
  font-family: var(--sans);
}
.footer-top {
  padding: 44px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: clamp(28px, 4vw, 56px);
}
.footer-nav-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(22px, 3vw, 40px);
}
.footer-col + .footer-col {
  margin-top: 26px;
}
.footer-nav-group .footer-col + .footer-col {
  margin-top: 0;
}
.footer-vat-inline {
  color: var(--cream-55);
}
.footer-brand {
  display: block;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 560;
  color: var(--cream);
  line-height: 1.3;
}
.footer-heading {
  display: block;
  margin-bottom: 12px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.footer-address,
.footer-contact {
  margin: 12px 0 0;
  line-height: 1.7;
}
.footer-contact a,
.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--cream-70);
  text-decoration: none;
}
.footer-contact a:hover,
.footer-nav a:hover {
  color: var(--gold-light);
}
.footer-nav {
  display: flex;
  flex-direction: column;
}
.footer-icon {
  color: var(--gold-light);
  opacity: 0.7;
  flex: none;
}
.footer-social-bar {
  margin-top: 34px;
  border-top: 1px solid rgba(228, 197, 142, 0.14);
}
.footer-social {
  width: min(100% - 40px, var(--content));
  margin-inline: auto;
  display: flex;
  gap: 16px;
  padding: 18px 0;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cream-55);
}
.footer-social a:hover {
  color: var(--gold-light);
}
.footer-bottom {
  border-top: 1px solid rgba(228, 197, 142, 0.14);
  padding: 18px 0;
}
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: 0.82rem;
}
.footer-bottom p {
  margin: 0;
}
.footer-tagline em {
  color: var(--cream-70);
}

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

/* ============================================================
   17. ANKIETA
   ============================================================ */

/* Ankieta i dziekujemy to CALE ciemne strony, ale nie uzywaja klasy .sect-dark,
   wiec naglowki dziedziczylyby domyslny kolor --ink i znikalyby na tle.
   Zdarzylo sie dokladnie to na /dziekujemy/ przy pierwszym buildzie V2. */
/* Kolory tekstu ida za PASMEM, nie za strona. Do 2026-08-15 obie strony byly
   w calosci ciemne i regula brzmiala "na tych stronach wszystko kremowe";
   teraz jasne pasmo potrzebuje odwrotnego zestawu, inaczej kremowy tekst
   znika na papierze. */
.ankieta-intro-band h1,
.ankieta-intro-band h2,
.ankieta-intro-band h3,
.ankieta-intro-band strong,
.ty-intro-band h1,
.ty-intro-band h2,
.ty-intro-band h3,
.ty-intro-band strong,
.ankieta-card h1,
.ankieta-card h2,
.ankieta-card h3,
.ankieta-card strong {
  color: var(--cream);
}
.ankieta-intro-band a,
.ty-intro-band a,
.ankieta-card a {
  color: var(--gold-light);
}

/* Jasne pasmo */
.ty-body-band h1,
.ty-body-band h2,
.ty-body-band h3,
.ty-body-band strong {
  color: var(--ink);
}
.ty-body-band a {
  color: var(--gold-ink);
}
.ty-body-band .cal-link,
.ty-body-band .btn-gold,
.ty-page .cal-link,
.ty-page .btn-gold {
  color: var(--ink);
}
.ty-body-band .ty-card-label {
  color: var(--gold-ink);
}
.ty-body-band .ty-delivery-number {
  color: var(--gold-ink);
  border-color: var(--gold);
}
.ty-body-band .ty-note,
.ty-body-band .ty-icon {
  color: var(--muted);
}
.ty-body-band .mc-highlight {
  color: var(--gold-ink);
}

/* Strony po zapisie dostaly rytm pasm dopiero 2026-08-15. Wczesniej byly jedna
   nieprzerwana plachta atramentu bez chapter ticka, wiec po zbandowanej stronie
   glownej czytaly sie jak inna witryna. Uklad: ciemna intro (kontynuacja hero),
   jasne pasmo z trescia, ciemne domkniecie. */
.ankieta-page {
  background: var(--paper);
  min-height: 100vh;
}
.ankieta-intro-band {
  position: relative;
  background: var(--ink);
  padding: clamp(30px, 4.5vw, 58px) 0 clamp(34px, 5vw, 64px);
}
.ankieta-intro-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-deep) 0 64px, transparent 64px);
}
.ankieta-body-band {
  position: relative;
  background: var(--paper);
  padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 6vw, 76px);
}
.ankieta-body-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--green) 0 64px, transparent 64px);
}
.ankieta-wrap {
  width: min(100% - 40px, 720px);
  margin-inline: auto;
}
.ankieta-overline {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-soft);
}
.ankieta-title {
  margin: 14px 0 0;
  color: var(--cream);
}
.ankieta-lead,
.ankieta-intro {
  margin: 14px 0 0;
  color: var(--cream-70);
}
/* Karta ankiety siedzi na JASNYM pasmie od 2026-08-15, wiec jest biala.
   Wszystkie kontrolki w srodku byly stylowane pod czern i musza sie przewrocic
   razem z nia - inaczej wychodzi szara breja, ktora zobaczylem na zrzucie.
   Uwaga na pulapke: polprzezroczyste tlo karty sprawia, ze automatyczna
   kontrola "jasny tekst na jasnym tle" go NIE wykrywa, bo computed background
   to rgba, a nie pelna biel. Tu rozstrzyga oko na zrzucie, nie regex. */
.ankieta-card {
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(22px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* --- kontrolki ankiety w wersji jasnej --- */
.ankieta-body-band .step-bar {
  border-top-color: var(--line-2);
  color: var(--muted);
}
.ankieta-body-band .step-bar strong {
  color: var(--muted);
}
.ankieta-body-band .step-bar.active,
.ankieta-body-band .step-bar.done {
  border-top-color: var(--gold-deep);
  color: var(--ink);
}
.ankieta-body-band .step-bar.active strong,
.ankieta-body-band .step-bar.done strong {
  color: var(--gold-ink);
}
.ankieta-body-band .ankieta-q {
  color: var(--ink);
}
.ankieta-body-band .ankieta-step-label {
  color: var(--gold-ink);
}
.ankieta-body-band .ankieta-help,
.ankieta-body-band .ankieta-next-note {
  color: var(--muted);
}
.ankieta-body-band .opt {
  background: var(--paper);
  border-color: var(--line);
}
.ankieta-body-band .opt:hover {
  border-color: var(--gold-deep);
}
.ankieta-body-band .opt:has(input:checked) {
  border-color: var(--gold-deep);
  background: #fbf6ea;
}
.ankieta-body-band .opt-text {
  color: var(--ink-soft);
}
.ankieta-body-band .opt input[type="radio"],
.ankieta-body-band .opt input[type="checkbox"],
.ankieta-body-band .form-check input[type="checkbox"] {
  border-color: var(--line-2);
}
.ankieta-body-band .opt input:checked,
.ankieta-body-band .form-check input[type="checkbox"]:checked {
  border-color: var(--gold-deep);
}
.ankieta-body-band .opt input::before {
  background: var(--gold-deep);
}
.ankieta-body-band .form-check input[type="checkbox"]:checked {
  background: var(--gold-deep);
}
.ankieta-body-band .form-check input[type="checkbox"]::before {
  border-left-color: var(--white);
  border-bottom-color: var(--white);
}
.ankieta-body-band .form-check label {
  color: var(--ink-soft);
}
.ankieta-body-band .form-check label strong {
  color: var(--ink);
}
.ankieta-body-band .open-textarea {
  background: var(--paper);
  border-color: var(--line-2);
  color: var(--ink);
}
.ankieta-body-band .open-textarea:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(199, 165, 111, 0.24);
}
.ankieta-body-band .pref-group-title {
  color: var(--gold-ink);
}
.ankieta-body-band .ankieta-error {
  color: var(--danger);
  background: rgba(156, 61, 46, 0.08);
  border: 1px solid rgba(156, 61, 46, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
}
.ankieta-body-band .ankieta-sending,
.ankieta-body-band .ankieta-ok {
  color: var(--ink-soft);
}
.ankieta-body-band .ankieta-loader-bar {
  background: var(--line);
}
.ankieta-body-band .btn-secondary {
  color: var(--ink);
  border-color: var(--line-2);
}
.progress {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
/* UWAGA: .step-bar NIE jest samym paskiem - niesie w srodku numer i etykiete
   ("01 Rola"). Pasek to gorna krawedz elementu, nie jego tlo. Ustawienie tu
   height:3px chowa tekst pod sasiednim krokiem. */
.step-bar {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-top: 9px;
  border-top: 2px solid var(--line-dark);
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--cream-55);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.step-bar strong {
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cream-55);
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.step-bar.active,
.step-bar.done {
  border-top-color: var(--gold);
  color: var(--cream);
}
.step-bar.active strong,
.step-bar.done strong {
  color: var(--gold-light);
}

/* Na waskim ekranie etykieta NIE znika, tylko schodzi pod numer.
   Wczesniej bylo tu `display: none`, wiec telefon dostawal gole "01 02 03 04" -
   a numer bez slowa nie mowi nic o tym, co jeszcze przede mna, i to wlasnie
   mobile jest tu ruchem glownym. Kolumna miesci "Pytanie" i "Kontakt" w
   ~70px slupka przy 390px, sprawdzone pomiarem na 360 i 390. */
@media (max-width: 520px) {
  .step-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .step-bar span {
    font-size: 0.68rem;
    line-height: 1.25;
  }
}
.ankieta-step-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-55);
  margin-bottom: 10px;
}
.ankieta-step {
  display: none;
}
.ankieta-step.active {
  display: block;
}
.ankieta-q {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 560;
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 18px;
}
.ankieta-options {
  display: grid;
  gap: 10px;
}
.opt {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  min-height: 56px;
  background: rgba(20, 17, 13, 0.42);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.opt:hover {
  border-color: var(--gold);
}
/* Natywne radio na ciemnym tle renderuje sie jako PELNE biale kolo, czyli
   uniwersalny znak "zaznaczone" - wszystkie piec opcji wygladalo na wybrane,
   a bialy #ffffff byl najjasniejszym obiektem na stronie. Rysujemy wlasna
   kontrolke: pusty pierscien, zlota kropka dopiero po wyborze. */
.opt input[type="radio"],
.opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid rgba(255, 250, 240, 0.38);
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}
.opt input[type="radio"] {
  border-radius: 50%;
}
.opt input[type="checkbox"] {
  border-radius: 4px;
}
.opt input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  background: var(--gold);
  transition: transform 0.12s var(--ease);
}
.opt input[type="checkbox"]::before {
  border-radius: 2px;
}
.opt input:checked {
  border-color: var(--gold);
}
.opt input:checked::before {
  transform: scale(1);
}
.opt:has(input:checked) {
  border-color: var(--gold);
  background: rgba(199, 165, 111, 0.1);
}
.opt-text {
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.35;
  color: var(--cream);
}
.open-textarea {
  width: 100%;
  min-height: 110px;
  padding: 13px 15px;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--cream);
  background: rgba(20, 17, 13, 0.5);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  resize: vertical;
}
.open-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199, 165, 111, 0.22);
}
/* Dwa <span> obok siebie bez separatora renderowaly sie jako
   "~60 sekund 4 kroki" - jeden ciag. */
.ankieta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ankieta-meta span + span::before {
  content: "\00B7";
  margin-right: 16px;
  color: var(--line-dark);
}

.ankieta-help,
.ankieta-meta,
.ankieta-next-note {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--cream-55);
  margin-top: 12px;
}
.nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}
.ankieta-error {
  color: #e2a08f;
  font-family: var(--sans);
  font-size: 0.86rem;
  margin-top: 12px;
}
.ankieta-sending,
.ankieta-ok {
  text-align: center;
  padding: 24px 0;
  color: var(--cream-70);
}
.ankieta-loader-bar {
  height: 3px;
  margin: 16px auto 0;
  max-width: 240px;
  background: var(--line-dark);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.ankieta-loader-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--gold);
  animation: ankietaLoad 1.1s var(--ease) infinite;
}
@keyframes ankietaLoad {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(260%);
  }
}

/* Grupa preferencji kontaktu - dwa zestawy radio obok siebie */
.pref-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 3vw, 32px);
}
.pref-group-title {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 10px;
}

/* ============================================================
   18. DZIEKUJEMY
   ============================================================ */

/* Ten sam rytm co ankieta: ciemne potwierdzenie, jasne pasmo z krokami. */
.ty-page {
  background: var(--paper);
  min-height: 100vh;
}
.ty-intro-band {
  position: relative;
  background: var(--ink);
  padding: clamp(34px, 5vw, 66px) 0 clamp(36px, 5vw, 68px);
  text-align: center;
}
.ty-intro-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-deep) 0 64px, transparent 64px);
}
.ty-body-band {
  position: relative;
  background: var(--paper);
  padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 6vw, 76px);
}
.ty-body-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--green) 0 64px, transparent 64px);
}
.ty-wrap {
  width: min(100% - 40px, 760px);
  margin-inline: auto;
}
.ty-help {
  margin-top: 30px;
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--muted);
}
.ty-overline {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-soft);
}
.ty-h1 {
  margin: 14px 0 0;
  color: var(--cream);
}
.ty-sub {
  margin: 16px 0 0;
  color: var(--cream-70);
  font-size: clamp(1.06rem, 1.4vw, 1.2rem);
}
/* Karty siedza teraz na JASNYM pasmie, wiec sa biale z cieniem, tak jak karty
   na nastarcie. Wczesniej byly przezroczystymi panelami na czerni. */
.ty-card,
.ty-mail-card,
.ty-bonus-card {
  margin-top: clamp(22px, 3vw, 32px);
  padding: clamp(20px, 2.8vw, 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--body);
  box-shadow: var(--shadow);
}
.ty-bonus-card-highlight {
  border-color: var(--gold);
  background: #fffaf0;
}
.ty-card-centered,
.ty-actions-centered {
  text-align: center;
}
.ty-card-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 10px;
}
.ty-delivery-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.ty-delivery-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.ty-delivery-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  font-family: var(--display);
  font-size: 0.94rem;
  color: var(--gold-light);
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.ty-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.ty-note {
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--cream-55);
}
.ty-icon {
  color: var(--gold-light);
  flex: none;
}
.ty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 32px);
}
.ty-actions-centered {
  justify-content: center;
}
.cal-link-primary {
  background: var(--gold);
  color: var(--ink);
}
.cal-link-icon {
  margin-right: 8px;
}

/* ============================================================
   19. ZGODA NA COOKIES
   ============================================================ */

.ds-consent-card {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(12px);
  z-index: 50;
  width: min(100% - 28px, 720px);
  background: rgba(20, 17, 13, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ds-consent-card.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.ds-consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  padding: 16px 20px;
}
.ds-consent-inner p {
  margin: 0;
  flex: 1 1 260px;
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--cream-70);
}
.ds-consent-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--cream-55);
}
.ds-consent-hint a {
  color: var(--gold-light);
}
.ds-consent-actions {
  display: flex;
  gap: 10px;
}
.ds-consent-btn {
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--cream-70);
}
.ds-consent-btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

/* ============================================================
   20. DOSTEPNOSC I RUCH
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 3px;
}
.sect-dark a:focus-visible,
.hero-live a:focus-visible,
.footer a:focus-visible,
.form-card input:focus-visible,
.form-card button:focus-visible {
  outline-color: var(--gold-light);
}

/* Pola honeypot - poza ekranem, nie display:none, zeby boty je widzialy */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Reveal - wzorzec przeniesiony ZE STAREGO main-styles.css, bo mial trzy
   zabezpieczenia, ktorych pierwsza wersja V2 nie miala i przez to wprowadzala
   regresje:
     1. Stan DOMYSLNY jest WIDOCZNY. Gdy live.js sie nie wykona (blad, bloker,
        wolna siec), tresc i tak jest na ekranie. Odwrotna kolejnosc oznacza
        pusta strone przy kazdej awarii skryptu.
     2. Animacja tylko przy klasie .js na <body>, czyli gdy skrypty w ogole
        dzialaja.
     3. Tylko od 900px w gore. Na telefonie animacji nie ma wcale - czyli
        dokladnie tam, gdzie ryzyko wolnego lub przerwanego JS jest najwieksze,
        tresc jest widoczna bezwarunkowo.
   Znalezione przez porownanie z poprzednikiem podczas QA. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
  }
  .js .reveal.visible {
    opacity: 1;
    transform: none;
  }
  /* Hero jest nad zgieciem, wiec nie moze czekac na obserwatora. */
  .js .hero-live .reveal,
  .js .hero-live .reveal * {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   21. MOBILE
   ============================================================
   Budzet wysokosci na 390x844: pasek 60px zostawia 784px.
   Nad zgieciem musi zmiescic sie CALY formularz (decyzja wlasciciela),
   wiec naglowek jest minimalny, a premisa, jezyki i mentor schodza
   pod formularz. Kolejnosc wymuszona przez `order`.
   ============================================================ */

@media (max-width: 900px) {
  .hero-live-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px 0 28px;
  }
  /* display:contents wypuszcza dzieci .hero-copy prosto do gridu hero, dzieki
     czemu karta formularza moze wejsc miedzy naglowek a reszte copy bez
     duplikowania markupu. Kolejnosc ustawiona przez `order`. */
  .hero-copy {
    display: contents;
  }
  .badge-live {
    order: 1;
    justify-self: start;
  }
  .hero-copy h1 {
    order: 2;
    margin: 0;
    font-size: clamp(1.55rem, 6.4vw, 2rem);
  }
  .hero-live .signup-block {
    order: 3;
  }
  .hero-copy h1 .gold-text {
    font-size: 0.72em;
    line-height: 1.26;
  }
  .form-card {
    padding: 16px;
  }
  .hero-premise {
    order: 4;
    margin: 0;
    max-width: none;
  }
  .hero-languages {
    order: 5;
    margin: 0;
  }
  .hero-mentor {
    order: 6;
    margin: 0;
  }
}

@media (max-width: 900px) {
  /* W hero na mobile karta formularza rezygnuje z tytulu i podtytulu -
     naglowek stron jest tuz nad nia i mowi to samo. */
  .hero-live .form-card-title,
  .hero-live .form-card-sub {
    display: none;
  }
  .form-row {
    margin-bottom: 10px;
  }
  .form-row label {
    font-size: 0.76rem;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 1rem;
  }
  .container {
    width: min(100% - 32px, var(--content));
  }
  .quote-inner {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
  .quote-photo {
    width: 48px;
    height: 48px;
  }
  .btn {
    width: 100%;
  }
  .section-cta-row .btn {
    width: 100%;
  }
}

/* ============================================================
   22. HERO NA NISKICH EKRANACH DESKTOPOWYCH
   ============================================================
   Karta formularza konczyla sie na ~900px niezaleznie od okna, wiec na kazdym
   laptopie nizszym niz ~900px byla UCIETA: brakowalo 40px przy 860, 100px przy
   800, 140px przy 760. Pierwsza weryfikacja tego nie zlapala, bo mierzyla
   jedna wysokosc (950) i tylko przycisk, a nie dol calej karty - czyli
   dokladnie te konfiguracje, ktora przechodzi.

   Wysokosc okna, nie szerokosc, jest tu zmienna decydujaca, wiec media query
   idzie po max-height. Dwa stopnie, bo jeden nie wystarcza na 760px.
   ============================================================ */

@media (min-width: 900px) and (max-height: 940px) {
  .hero-live-inner {
    padding: 22px 0 26px;
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
  }
  .hero-copy h1 {
    font-size: clamp(1.9rem, 3.1vw, 2.9rem);
    margin-top: 14px;
  }
  .hero-premise {
    margin-top: 16px;
    font-size: 1rem;
  }
  .hero-languages {
    margin-top: 14px;
  }
  .hero-mentor {
    margin-top: 18px;
  }
  .form-card {
    padding: 20px;
  }
  .form-card-sub {
    margin-bottom: 13px;
  }
  .form-row {
    margin-bottom: 9px;
  }
  .form-row input,
  .phone-cc {
    min-height: 44px;
    padding-block: 10px;
  }
  .form-extra {
    margin: 2px 0 10px;
    padding-top: 8px;
  }
  .form-note {
    margin-top: 9px;
  }
}

/* Drugi stopien: 13-calowe laptopy z paskiem przegladarki. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero-live-inner {
    padding: 14px 0 18px;
  }
  .hero-copy h1 {
    font-size: clamp(1.75rem, 2.7vw, 2.4rem);
    margin-top: 10px;
  }
  .hero-premise {
    margin-top: 12px;
    font-size: 0.96rem;
    line-height: 1.45;
  }
  .hero-languages {
    margin-top: 11px;
    font-size: 0.66rem;
  }
  .hero-mentor {
    margin-top: 13px;
  }
  .hero-mentor img {
    width: 46px;
    height: 46px;
  }
  .form-card {
    padding: 16px 18px;
  }
  .form-card-title {
    font-size: 1.2rem;
  }
  .form-card-sub {
    margin-bottom: 11px;
    font-size: 0.82rem;
  }
  .form-row {
    margin-bottom: 8px;
  }
  .form-row label {
    margin-bottom: 3px;
    font-size: 0.76rem;
  }
  .btn {
    min-height: 48px;
  }
  .form-note {
    margin-top: 8px;
    font-size: 0.72rem;
  }
  .signup-counter {
    margin-top: 6px;
    font-size: 0.74rem;
  }
}

/* UWAGA NA POMIAR: licznik zapisanych pojawia sie TYLKO wtedy, gdy
   /api/live/counter odpowie, czyli na produkcji albo pod `wrangler pages dev`.
   Statyczny podglad z python http.server zwraca 404, wiec licznika nie ma i
   karta mierzy sie o ~40px KROCEJ niz naprawde. Tak wlasnie przeoczylem
   przyciecie karty na 1366x700: lokalnie wychodzilo zero. Kazdy budzet
   wysokosci dla hero sprawdzaj na produkcji, nie na statyku.

   Ponizej 800px wysokosci okna licznik chowamy: dowod spoleczny jest mile
   widziany, ale nie kosztem obcietego formularza. */
@media (min-width: 900px) and (max-height: 800px) {
  .signup-counter {
    display: none !important;
  }
  .hero-live-inner {
    padding: 10px 0 14px;
  }
  .form-card {
    padding: 14px 16px;
  }
  .form-row {
    margin-bottom: 7px;
  }
}

/* Gdy sticky CTA jest widoczne, ostatnia sekcja potrzebuje miejsca */
@media (max-width: 860px) {
  .footer-bottom {
    padding-bottom: calc(18px + 68px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   GALERIA MASTERCLASS 2.0 (#sala)

   Jedyne zdjecia z wydarzenia na tej stronie. Kazde ma w markupie prawdziwe
   width/height, wiec przegladarka rezerwuje miejsce zanim plik dojdzie -
   inaczej siedem leniwych obrazow przesuwaloby tresc pod palcem czytelnika.
   ============================================================ */

.gallery-hero {
  margin: 40px 0 0;
}
.gallery-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.gallery-hero figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  opacity: 0.72;
}
/* Na ciemnym pasmie ink-soft jest praktycznie niewidoczny, a podpis niesie
   date certyfikacji - to tresc, nie ozdoba. */
.sect-dark .gallery-hero figcaption {
  color: var(--cream-55);
  opacity: 1;
}

.gallery-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
}
.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
@media (hover: hover) {
  .gallery-grid figure:hover img {
    transform: scale(1.03);
  }
}
@media (max-width: 720px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ============================================================
   WYWIADY (#wywiady)

   Fasada: miniatura + przycisk. Ramka YouTube powstaje dopiero po klknieciu,
   w initInterviewPlayers, i zastepuje przycisk - dlatego regula na iframe
   celuje w bezposrednie dziecko .interview, a nie w cos wewnatrz przycisku.
   ============================================================ */

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

.interview-poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: var(--ink);
  cursor: pointer;
}
.interview-poster img {
  display: block;
  width: 100%;
  height: 100%;
  /* hqdefault to 480x360 z czarnymi pasami - cover odcina dokladnie pasy */
  object-fit: cover;
  transition: transform 0.4s var(--ease), opacity 0.2s var(--ease);
}
@media (hover: hover) {
  .interview-poster:hover img {
    transform: scale(1.03);
    opacity: 0.85;
  }
}
.interview-poster:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.interview-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(20, 17, 13, 0.72);
  border: 1px solid var(--gold);
  color: var(--cream);
  transition: background 0.2s var(--ease);
}
@media (hover: hover) {
  .interview-poster:hover .interview-play {
    background: var(--gold);
    color: var(--ink);
  }
}

.interview-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(20, 17, 13, 0.82);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.interview > iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 3px;
}

.interview-meta {
  padding-top: 14px;
}
.interview-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.interview-meta h3 {
  margin: 6px 0 0;
  font-size: 1.06rem;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .interview-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid img,
  .interview-poster img {
    transition: none;
  }
  .gallery-grid figure:hover img,
  .interview-poster:hover img {
    transform: none;
  }
}