/* ===========================================================
   Niemiecki Restart 1:1 z Anią — LEAN sales page (owner brief:
   „prosta, przejrzysta, krótka, konkretna"). Brand canon per
   BRAND.md: Poppins only, canonical coral, ink text, white
   canvas + one big rounded colored hero panel, soft tints.
   =========================================================== */

/* Poppins — self-hosted from _shared/fonts/ (no third-party request,
   no consent question, no render-blocking stylesheet). latin + latin-ext
   split by unicode-range so Polish diacritics load their own subset. */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../../_shared/fonts/poppins-latin-ext-400.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;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../../_shared/fonts/poppins-latin-400.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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../../../_shared/fonts/poppins-latin-ext-600.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;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../../../_shared/fonts/poppins-latin-600.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: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../../../_shared/fonts/poppins-latin-ext-800.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;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../../../_shared/fonts/poppins-latin-800.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;
}

:root {
  --coral:        #E26964;   /* canonical coral — CTA / accent */
  --coral-strong: #CF534E;   /* hover + large-text highlight */
  --coral-deep:   #B23A35;   /* button base shadow, small coral text */
  --ink:          #4A4A49;   /* body + headings — never pure black */
  --ink-soft:     #6E6E6D;   /* microcopy, captions */
  --tint-pink:    #F7BCB3;   /* hero panel */
  --tint-yellow:  #F7E9B9;   /* price panel */
  --tint-blue:    #B5E0F1;   /* callouts */
  --bg:           #FFFFFF;
  --border:       #ECECEC;

  --font: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --r-hero: 28px;
  --r-card: 14px;
  --r-btn:  10px;
  --r-chip: 999px;

  --container: 1080px;
  --text-col: 680px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
ul, ol { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ----------- Type ----------- */
.section-h2 {
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(23px, 3.6vw, 34px);
  line-height: 1.25;
  margin: 0 0 18px;
  text-align: center;
}
.hl-coral { color: var(--coral-strong); }
/* Marker/highlighter treatment (owner directive) — yellow swash behind „na żywo".
   Ink text on #F1CE17 = 5.7:1, passes 4.5:1 on white cards AND inside the white
   hero chip (never laid directly on the pink panel). Irregular radius = hand-marker
   feel without gradients. ONLY for the COPY-noted spots: hero eyebrow „na żywo" +
   stack items „na żywo" / „Osobisty" / „Codzienny" / „Indywidualne" (delta #11). */
.hl-marker {
  background: #F1CE17;
  color: var(--ink);
  padding: 0 0.2em;
  border-radius: 0.45em 0.3em 0.5em 0.25em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
section { padding: 40px 0; }
@media (min-width: 768px) { section { padding: 56px 0; } }

/* ----------- HERO — one big rounded colored panel ----------- */
.hero { padding: 16px 0 8px; }
.hero__panel {
  background: var(--tint-pink);
  border-radius: var(--r-hero);
  padding: 28px 22px 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}
.hero__chip {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  border-radius: var(--r-chip);
  padding: 6px 14px;
  margin: 0 0 16px;
}
/* „RE" brand-name lockup (owner directive, COPY note 12) — uppercase RE in brand
   coral at the full product-name lockups ONLY (hero eyebrow, price line, and the
   comparison-table header per delta #18). Measured: pure #E26964 fails
   WCAG at both spots (3.26:1 on the white chip @12.5px small text, needs 4.5;
   2.69:1 on the yellow price panel, needs 3.0 large text) — so each spot uses the
   nearest darker canonical-family coral that passes: price line (large bold on
   yellow) --coral-strong 3.46:1 ✓; eyebrow chip (small text on white) --coral-deep
   5.92:1 ✓. Chip base text moved to ink so the coral RE reads as the accent. */
.brand-re {
  color: var(--coral-strong);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.hero__chip .brand-re { color: var(--coral-deep); }
.hero__headline {
  font-weight: 800;
  font-size: clamp(27px, 4.6vw, 46px);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 14px;
}
.hero__headline .hl-chip {
  background: #fff;
  color: var(--coral-strong);
  border-radius: 8px;
  padding: 0 0.18em;
  white-space: nowrap;
}
.hero__subhead {
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 520px;
}
.hero__photo {
  margin: 0;
}
.hero__photo img {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 20px;
}
@media (min-width: 900px) {
  .hero { padding: 24px 0 12px; }
  .hero__panel {
    grid-template-columns: 1.25fr 0.85fr;
    padding: 48px 52px;
    gap: 40px;
  }
  .hero__subhead { font-size: 18px; }
  .hero__photo img { max-width: 420px; }
}

/* Proof strip under the hero panel */
.proofstrip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  padding: 18px 4px 0;
  margin: 0 auto;
  max-width: 860px;
  text-align: center;
}
.proofstrip li {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.proofstrip li + li::before {
  content: "·";
  color: var(--coral);
  font-weight: 800;
  margin: 0 9px;
}
@media (min-width: 768px) {
  .proofstrip li { font-size: 14px; }
}

/* ----------- CTA ----------- */
.cta-block { text-align: center; margin: 0 auto; }
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--coral);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  padding: 15px 28px;
  border-radius: var(--r-btn);
  box-shadow: 0 4px 0 var(--coral-deep);
  transition: background 0.2s ease, transform 0.2s ease;
  width: 100%;
  max-width: 380px;
}
.cta-btn:hover { background: var(--coral-strong); transform: translateY(-2px); }
.cta-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cta-btn__icon { flex-shrink: 0; }
@media (min-width: 768px) {
  .cta-btn { width: auto; font-size: 19px; padding: 16px 36px; }
}
.cta-micro {
  list-style: none;
  padding: 0;
  margin: 14px auto 0;
  max-width: 480px;
  display: grid;
  gap: 3px;
}
.cta-micro li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.hero .cta-micro li { color: var(--ink); }
.cta-micro a { color: inherit; text-decoration: underline; }
.hero .cta-block { text-align: left; }
.hero .cta-micro { margin-left: 0; max-width: 460px; }
@media (max-width: 899px) {
  .hero .cta-block { text-align: center; }
  .hero .cta-micro { margin-left: auto; }
}

/* ----------- Generic list sections (Dla kogo / Co zyskujesz) ----------- */
.list-section .container { max-width: var(--text-col); }
.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--coral);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.5;
}
.xlist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.xlist li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
}
.xlist li::before {
  content: "✕";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.6;
}

/* ----------- Value stack ----------- */
.stack-section .container { max-width: 760px; }
.stack {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.stack li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  font-size: 15.5px;
  line-height: 1.55;
}
.stack .tick {
  flex-shrink: 0;
  color: var(--coral);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.4;
}
.stack strong { font-weight: 800; }

/* ----------- Price section: intro → comparison table → why → panel ----------- */
.pricing { padding-top: 8px; }
.pricing .container { max-width: 760px; }
.pricing__intro {
  text-align: center;
  font-size: 16px;
  max-width: 620px;
  margin: 0 auto 20px;
}
/* Comparison table (deltas #18–#25). Fixed 50/50 two-column layout at every width
   (short cells wrap; no page-level horizontal scroll — verified at 360px). Muted left
   column vs mint-tinted „winner" right column (delta #25: coral tint → brand green;
   #D9EFE3 = soft mint #BEE4D0 whitened, same derivation as the earlier coral tint),
   no gradients. Contrast (measured): ink on #D9EFE3 7.35:1 ✓ · ink-soft on #F7F7F6
   4.76:1 ✓ · RE lockup coral-deep on #D9EFE3 4.90:1 ✓ (raw #BEE4D0 would fail the
   RE at 4.28 — that's why the whitened tone). */
.compare-wrap {
  max-width: 640px;
  margin: 0 auto 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.5px;
  line-height: 1.45;
}
.compare th, .compare td {
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.compare thead th { font-weight: 800; font-size: 13px; }
.compare th:first-child, .compare td:first-child {
  background: #F7F7F6;
  color: var(--ink-soft);
  border-right: 1px solid var(--border);
}
.compare th:last-child, .compare td:last-child {
  background: #D9EFE3; /* light in-family mint tint (soft mint #BEE4D0 softened over white) */
  color: var(--ink);
}
.compare td:last-child { font-weight: 600; }
.compare tbody th, .compare tbody td { border-top: 1px solid rgba(74, 74, 73, 0.10); }
.compare .brand-re { color: var(--coral-deep); } /* 4.90:1 on the mint header ✓ */
@media (min-width: 768px) {
  .compare { font-size: 15px; }
  .compare th, .compare td { padding: 12px 16px; }
  .compare thead th { font-size: 15px; }
}
.pricing__why {
  text-align: center;
  font-weight: 800;
  font-size: clamp(19px, 2.6vw, 24px);
  color: var(--ink);
  margin: 0 0 12px;
}
.pricing__whytext {
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 12px;
}
.pricing__whytext--outcome { margin-bottom: 28px; font-weight: 600; }
.price-panel {
  background: var(--tint-yellow);
  border-radius: var(--r-card);
  padding: 26px 22px 28px;
  text-align: center;
}
.price-panel__price {
  font-weight: 800;
  font-size: clamp(21px, 3.4vw, 30px);
  line-height: 1.3;
  margin: 0 0 6px;
}
.price-panel__price strong { color: var(--coral-strong); white-space: nowrap; }
.price-panel__raty {
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 16px;
}
.price-panel__trust {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.85;
  max-width: 540px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .price-panel { padding: 34px 40px 36px; }
}

/* ----------- Quote cards ----------- */
.quote-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  margin: 18px auto 0;
  max-width: 680px;
}
.quote-card blockquote {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
}
.quote-card figcaption {
  font-size: 13px;
  color: var(--ink-soft);
}
.pullquote {
  margin: 26px auto 0;
  max-width: 620px;
  text-align: center;
}
.pullquote blockquote {
  font-weight: 800;
  font-size: clamp(19px, 2.8vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 8px;
}
.pullquote blockquote::before { content: "„"; color: var(--coral); }
.pullquote blockquote::after { content: "”"; color: var(--coral); }
.pullquote figcaption { font-size: 13px; color: var(--ink-soft); }

/* ----------- Zanim napiszesz ----------- */
.requirements .container { max-width: var(--text-col); }
.requirements__stance {
  text-align: center;
  font-size: 16px;
  margin: 0 0 20px;
}
.requirements__sub {
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 12px;
}
.requirements__closer {
  text-align: center;
  font-weight: 600;
  margin: 20px 0 0;
}

/* ----------- Ile czasu ----------- */
.time .container { max-width: var(--text-col); }
.time p { text-align: center; margin: 0; font-size: 16px; }

/* ----------- Z kim będziesz się uczyć ----------- */
.bio .container {
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
.bio .section-h2 { text-align: left; }
.bio p { margin: 0 0 14px; font-size: 16px; }
.bio p:last-child { margin-bottom: 0; }
.bio__photo { margin: 0; }
/* Portrait shot (Brandenburg Gate) — constrain on mobile so the 3:4 image
   doesn't tower over the text; desktop column caps it naturally. */
.bio__photo img {
  border-radius: var(--r-card);
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .bio .container { grid-template-columns: 1.1fr 0.9fr; gap: 44px; }
}

/* ----------- Jak dołączyć (steps) ----------- */
.steps-section .container { max-width: 760px; }
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
}
.steps li {
  counter-increment: step;
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px 18px 64px;
  font-size: 15.5px;
  line-height: 1.55;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  border-radius: 50%;
}
.steps strong { font-weight: 800; }
.steps-section__closer {
  background: var(--tint-blue);
  border-radius: var(--r-card);
  padding: 16px 20px;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 0 26px;
}

/* ----------- Jak się uczymy (4b — same step circles, warm plain closer) ----------- */
.howwelearn__closer {
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

/* ----------- Opinie ----------- */
.reviews .container { max-width: 760px; }
.reviews__framing {
  text-align: center;
  font-size: 15.5px;
  color: var(--ink);
  margin: 0 0 8px;
}

/* ----------- FAQ ----------- */
.faq .container { max-width: 760px; }
.faq__list { display: grid; gap: 10px; }
.faq__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
}
.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--coral);
  font-weight: 800;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq__item p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; }

/* ----------- Final CTA ----------- */
.final { padding-bottom: 72px; }
.final .container { max-width: 760px; text-align: center; }
.final__body { font-size: 16px; max-width: 620px; margin: 0 auto 20px; }
.final__capacity {
  display: block;
  background: var(--tint-pink);
  border-radius: var(--r-card);
  padding: 14px 20px;
  font-weight: 600;
  font-size: 15.5px;
  max-width: 560px;
  margin: 0 auto 26px;
}
.final__human {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14.5px;
  margin: 0 0 16px;
}
.final__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.final__signoff {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 22px 0 0;
}

/* ----------- FOOTER ----------- */
.footer {
  background: #4A4A49;
  color: #ddd;
  padding: 44px 0 calc(30px + env(safe-area-inset-bottom));
  text-align: center;
}
.footer__logo img {
  width: auto;
  height: 44px;
  margin: 0 auto 20px;
  filter: brightness(0) invert(1);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: center;
  margin-bottom: 14px;
}
.footer__links a {
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer__links a:hover { color: var(--tint-pink); }
.footer__contact { margin: 0 0 6px; font-size: 14px; color: #ccc; }
.footer__copy { margin: 10px 0 0; font-size: 12px; color: #b5b5b5; }

/* ----------- STICKY MOBILE CTA ----------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 22px rgba(0,0,0,0.14);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__label {
  margin: 0;
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.25;
  white-space: nowrap;
}
.sticky-cta__btn {
  flex: 1;
  width: auto;
  max-width: none;
  font-size: 15.5px;
  padding: 11px 16px;
  box-shadow: 0 3px 0 var(--coral-deep);
}
@media (min-width: 1024px) {
  .sticky-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta-btn { transition: none; }
  .sticky-cta { transition: none; }
}