/* ─────────────────────────────────────────────────────────
   THE SKIN CODE — Landing Page
   Design system ported from Emira Webinar prototype
   (Editorial Soft direction is default; Chrome Noir & Soft
   Honey kept as data-direction overrides for future use.)
   ───────────────────────────────────────────────────────── */

:root {
  /* base palette */
  --bg:        #FBF4F1;
  --bg-elev:  #F5E8E3;
  --ink:      #0C0C0E;
  --ink-soft: #4B4347;
  --rose:     #C58B85;
  --rose-deep:#9C5F5A;
  --cream:    #FFFFFF;
  --chrome-1: #E8DCD6;
  --chrome-2: #B8AAA5;
  --chrome-3: #6E6260;
  --line:     rgba(12,12,14,0.10);

  /* semantic helpers — overridden per direction */
  --ink-on-accent: #FFFFFF;  /* text on rose buttons (light in soft/honey) */
  --on-pillar:     #FFFFFF;  /* text on phase/pillar gradient cards */
  --pillar-bg:     #6B3F3B;  /* deep wine — dark enough for white text */

  /* type */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:    "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", monospace;
  --font-accent:  "Playfair Display", Georgia, serif;

  /* scale */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

[data-direction="noir"] {
  --bg: #0E0D10; --bg-elev: #19161A; --ink: #F5EFEC; --ink-soft: #B9AFAB;
  --rose: #D7A6A0; --rose-deep: #E8C2BB;
  --cream: #1A171C;          /* dark elevated card surface (was light, broke contrast) */
  --ink-on-accent: #0E0D10;  /* dark text on light-pink rose buttons */
  --on-pillar: #F5EFEC;      /* light text on phase/pillar cards */
  --pillar-bg: #2A1F25;      /* very dark mauve — pop cards on dark page */
  --chrome-1: #2A2428; --chrome-2: #5A4F4C; --chrome-3: #C9BFBA;
  --line: rgba(245,239,236,0.12);
}

[data-direction="honey"] {
  --bg: #F4EBE0; --bg-elev: #E8D5BF; --ink: #1A1612; --ink-soft: #5C4F40;
  --rose: #B88A78; --rose-deep: #8A5C4B; --cream: #FBF6EE;
  --ink-on-accent: #FBF6EE;
  --on-pillar: #FBF6EE;
  --pillar-bg: #5A3D2E;      /* deep warm brown — pop cream text */
  --chrome-1: #E0CBB6; --chrome-2: #A8896E; --chrome-3: #5C4632;
  --line: rgba(26,22,18,0.12);
}

/* ── Noir-specific component overrides ─────────────────── */
/* btn-ticket: dark text on light-pink rose button */
[data-direction="noir"] .btn-ticket { color: var(--ink-on-accent); }
[data-direction="noir"] .btn-ticket .btn-stub {
  border-left-color: color-mix(in oklab, var(--ink-on-accent) 30%, transparent);
}

/* .phase text colors now use --on-pillar by default (works in all directions) */

/* Final-CTA stays dark in noir (the inverted-light version looked off) */
[data-direction="noir"] .final-cta { background: #131015; color: var(--ink); }
[data-direction="noir"] .final-cta h2 { color: var(--ink); }
[data-direction="noir"] .final-cta p { color: var(--ink-soft); }
[data-direction="noir"] .final-cta .reassure { color: color-mix(in oklab, var(--ink) 65%, transparent); }
[data-direction="noir"] .final-cta .btn-ticket { background: var(--ink); color: #0E0D10; }
[data-direction="noir"] .final-cta .btn-ticket:hover { background: var(--rose); color: #0E0D10; }
[data-direction="noir"] .final-cta .btn-ticket .btn-stub {
  background: color-mix(in oklab, #0E0D10 12%, var(--ink));
  border-left-color: rgba(0,0,0,.2);
}

/* Bonus-banner needs explicit light text in noir (was light-on-light) */
[data-direction="noir"] .bonus-banner { background: #131015; color: var(--ink); }
[data-direction="noir"] .bonus-banner h3 { color: var(--ink); }
[data-direction="noir"] .bonus-banner .eyebrow { color: color-mix(in oklab, var(--ink) 70%, transparent); }
[data-direction="noir"] .bonus-banner p { color: color-mix(in oklab, var(--ink) 80%, transparent); }
[data-direction="noir"] .bonus-banner .price-tag {
  border-color: color-mix(in oklab, var(--ink) 30%, transparent);
  color: var(--ink);
}
[data-direction="noir"] .bonus-banner .price-tag strong { color: color-mix(in oklab, var(--rose) 70%, var(--ink)); }

[data-direction="noir"] .avatar-stack .count { color: var(--ink); }

/* Hero-checkout: lift readability of the bullet text on dark elevated card */
[data-direction="noir"] .checkout-without { background: color-mix(in oklab, var(--rose) 20%, var(--bg)); color: var(--ink-soft); }

/* ── reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ── shared ────────────────────────────────────────────── */
.container { width: min(1320px, calc(100% - 64px)); margin: 0 auto; }
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--ink-soft);
}
.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.serif-italic { font-family: var(--font-accent); font-style: italic; font-weight: 400; }

/* display headings render thin (Helvetica), never the bold UA default */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
/* italic emphasis is the Playfair serif accent everywhere */
em { font-family: var(--font-accent); font-style: italic; }

/* primary CTA — ticket shape */
.btn-ticket {
  display: inline-flex;
  align-items: stretch;
  background: var(--rose);
  color: var(--cream);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.15;
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 12px 36px -16px color-mix(in oklab, var(--rose-deep) 80%, transparent);
  will-change: transform;
}
.btn-ticket:hover { transform: translateY(-2px); background: var(--rose-deep); }
.btn-ticket .btn-body {
  padding: 18px 24px;
  text-align: left;
  max-width: 280px;
}
.btn-ticket .btn-stub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-left: 2px dashed color-mix(in oklab, var(--cream) 35%, transparent);
  background: color-mix(in oklab, var(--rose-deep) 50%, var(--rose));
}
.btn-ticket .btn-stub svg { width: 22px; height: 22px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.btn-ghost:hover { border-color: var(--ink); }

/* film grain */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
}
[data-direction="noir"] .grain::after { mix-blend-mode: screen; opacity: .35; }

/* image placeholder */
.imgslot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--rose) 18%, var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  overflow: hidden;
}
.imgslot[data-shape="circle"] { border-radius: 50%; }
.imgslot img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* ── nav / topbar ──────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}
.brand {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.brand .star {
  display: inline-block; width: 14px; height: 14px;
  background: var(--rose);
  border-radius: 50%;
  transform: translateY(2px);
}
.nav-pill {
  display: flex; gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream);
}
.nav-pill a {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-pill a:hover { background: var(--bg); color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.price-mini {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream);
}
.price-mini .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }

/* ── hero ──────────────────────────────────────────────── */
.hero { position: relative; padding: 56px 0 100px; }

/* centered top: eyebrow + headline + sub */
.hero-center {
  max-width: 1240px;
  margin: 0 auto 64px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 24px;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 10px 16px 10px 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 6px 24px -16px rgba(0,0,0,.2);
}
.hero-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--rose) 30%, transparent);
}
.hero-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 8px 0 12px;
  text-wrap: balance;
  max-width: none;
}
.hero-headline em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--rose-deep);
}
.hero-headline .underline {
  position: relative;
  display: inline-block;
  font-style: italic;
}
.hero-headline .underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.04em;
  height: 0.12em;
  background: linear-gradient(90deg, transparent, var(--rose) 15%, var(--rose) 85%, transparent);
  border-radius: 6px;
  opacity: .55;
}
.hero-sub {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 640px;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

/* social proof row below center text */
.hero-proof {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 4px;
}
.avatar-stack { display: flex; }
.avatar-stack > * {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--chrome-1);
  margin-left: -10px;
  overflow: hidden;
}
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-stack .count {
  background: var(--cream);
  border: 2px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600;
  font-family: var(--font-mono);
  color: var(--ink);
}

/* below-grid: portrait left, checkout right */
.hero-below {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: stretch;
}
.hero-portrait {
  position: relative;
  min-height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 70% 30%, color-mix(in oklab, var(--rose) 35%, transparent), transparent 60%),
    color-mix(in oklab, var(--rose) 18%, var(--bg-elev));
  isolation: isolate;
}
.hero-portrait .imgslot {
  width: 100%; height: 100%;
  border-radius: var(--radius-lg);
  border: 0;
  min-height: inherit;
}
.hero-portrait::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 80px);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}

/* checkout panel right of portrait */
.hero-checkout {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  display: flex; flex-direction: column;
  gap: 22px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.22);
  position: relative;
  overflow: hidden;
}
.hero-checkout::before {
  content: "";
  position: absolute; inset: -1px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--rose) 35%, transparent), transparent 50%);
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 0;
}
.hero-checkout > * { position: relative; z-index: 1; }

.checkout-head {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.checkout-head .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.checkout-head .name {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.checkout-head .name em { font-style: italic; color: var(--rose-deep); }

.checkout-price {
  display: flex; align-items: baseline; gap: 14px;
}
.checkout-price .big {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.checkout-price .big em { font-style: italic; color: var(--rose); }
.checkout-price .strike {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.checkout-price .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-left: auto;
  text-align: right;
  line-height: 1.4;
}

.checkout-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checkout-bullets li {
  display: grid; grid-template-columns: 22px 1fr;
  gap: 12px; align-items: start;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.checkout-bullets li .ck {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  margin-top: 1px;
  flex-shrink: 0;
}
.checkout-bullets li strong { color: var(--rose-deep); font-weight: 600; }

.checkout-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.checkout-cta .btn-ticket { width: 100%; }
.checkout-cta .btn-ticket .btn-body { max-width: none; flex: 1; padding: 22px 26px; }
.checkout-cta .reassure {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.checkout-cta .reassure span { display: inline-flex; align-items: center; gap: 6px; }
.checkout-cta .reassure .ck { color: var(--rose-deep); font-weight: 700; }

.checkout-without {
  margin-top: 4px;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--rose) 10%, var(--bg));
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}
.checkout-without strong { color: var(--ink); font-weight: 600; }

/* ── marquee ───────────────────────────────────────────── */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  background: var(--cream);
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex; gap: 56px;
  white-space: nowrap;
  animation: scroll 42s linear infinite;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink);
}
.marquee-track span { display: inline-flex; align-items: center; gap: 56px; }
.marquee-track .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); display: inline-block; }
.marquee-track em { font-style: italic; color: var(--rose-deep); font-weight: 400; }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── section base ──────────────────────────────────────── */
.section { padding: 120px 0; position: relative; }
.section-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 64px; max-width: 920px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.section-head h2 em { font-style: italic; color: var(--rose-deep); font-weight: 400; }
.section-head p { font-size: 18px; color: var(--ink-soft); max-width: 600px; margin: 0; }

/* ── pain section ──────────────────────────────────────── */
.pain { padding: 120px 0; }
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 16px;
}
.pain-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .35s var(--ease), border-color .25s var(--ease);
}
.pain-card:hover { transform: translateY(-4px); border-color: var(--rose); }
.pain-card .ix {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--rose-deep);
  text-transform: uppercase;
}
.pain-card p {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ── about ─────────────────────────────────────────────── */
.about { padding: 140px 0; position: relative; }
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}
.about-eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.about-eyebrow-row::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.about h2 {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--rose);
  margin: 0 0 32px;
}
.about h2 em { font-style: italic; color: var(--rose-deep); }
.about-role {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 24px;
  color: var(--ink);
}
.about-copy { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.about-copy p { margin: 0 0 18px; }
.about-copy strong { color: var(--ink); font-weight: 600; }
.about-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.about-stat .num {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.about-stat .num em { font-style: italic; color: var(--rose); }
.about-stat .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-top: 8px;
}
.about-images {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.about-images .img-a { grid-column: 1 / span 4; aspect-ratio: 3/4; }
.about-images .img-b { grid-column: 4 / span 3; aspect-ratio: 1/1; margin-top: 80px; }
.about-images .imgslot { width: 100%; height: 100%; }

/* ── solution reframe (3-col compare) ──────────────────── */
.reframe { background: var(--bg-elev); padding: 120px 0; }
.reframe-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.reframe-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  display: flex; flex-direction: column;
  gap: 18px;
  min-height: 320px;
  position: relative;
  border: 1px solid var(--line);
}
.reframe-card .strike {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.reframe-card .strike-line {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--ink) 30%, transparent);
  text-decoration-thickness: 1.5px;
  letter-spacing: -0.01em;
}
.reframe-card .arrow {
  width: 24px; height: 24px;
  color: var(--rose-deep);
  margin-top: auto;
}
.reframe-card .replace {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.reframe-card .replace em { font-style: italic; color: var(--rose-deep); }

/* ── phases (pillar-style cards) ──────────────────────── */
.phases { padding: 140px 0; }
.phases-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.phase {
  position: relative;
  background:
    radial-gradient(140% 90% at 50% 0%, color-mix(in oklab, var(--rose) 55%, transparent), transparent 70%),
    var(--pillar-bg);
  border-radius: var(--radius-lg);
  padding: 32px 26px 26px;
  min-height: 440px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease);
  color: var(--on-pillar);
}
.phase:hover { transform: translateY(-6px); }
.phase .num-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: color-mix(in oklab, var(--on-pillar) 78%, var(--rose));
  text-transform: uppercase;
}
.phase h3 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--on-pillar);
  margin: 12px 0 10px;
  font-weight: 400;
  text-wrap: balance;
}
.phase h3 em { font-style: italic; }
.phase .phase-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: color-mix(in oklab, var(--on-pillar) 68%, var(--rose));
  text-transform: uppercase;
  margin-bottom: 14px;
}
.phase p { color: color-mix(in oklab, var(--on-pillar) 90%, var(--rose)); font-size: 14.5px; line-height: 1.55; margin: 0; }
.phase ul {
  list-style: none; padding: 0; margin: 14px 0 0;
  font-size: 13.5px;
  color: color-mix(in oklab, var(--on-pillar) 85%, var(--rose));
  display: flex; flex-direction: column; gap: 6px;
}
.phase ul li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.phase ul li::before {
  content: ""; flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--on-pillar);
  margin-top: 8px;
  opacity: .7;
}

.bonus-banner {
  margin-top: 28px;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.bonus-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 80% 30%, color-mix(in oklab, var(--rose) 60%, transparent), transparent 60%);
  opacity: .8;
}
.bonus-banner > * { position: relative; z-index: 1; }
.bonus-banner .eyebrow { color: color-mix(in oklab, var(--cream) 70%, transparent); }
.bonus-banner h3 {
  font-family: var(--font-display);
  font-size: 36px; line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 6px;
  font-weight: 400;
  color: var(--cream);
}
.bonus-banner h3 em { font-style: italic; color: color-mix(in oklab, var(--rose) 70%, var(--cream)); }
.bonus-banner p { color: color-mix(in oklab, var(--cream) 80%, transparent); margin: 0; max-width: 540px; font-size: 15.5px; line-height: 1.55; }
.bonus-banner .price-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid color-mix(in oklab, var(--cream) 30%, transparent);
  border-radius: var(--radius-pill);
  color: var(--cream);
  white-space: nowrap;
}
.bonus-banner .price-tag strong { color: color-mix(in oklab, var(--rose) 70%, var(--cream)); font-weight: 700; }

/* ── inside the box ────────────────────────────────────── */
.inside { background: var(--bg-elev); padding: 140px 0; }
.inside-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.inside-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 28px 24px;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  gap: 10px;
  min-height: 220px;
  position: relative;
  transition: transform .35s var(--ease), border-color .25s var(--ease);
}
.inside-card:hover { transform: translateY(-4px); border-color: var(--rose); }
.inside-card .ix {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--rose-deep);
  text-transform: uppercase;
}
.inside-card h4 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
  font-weight: 400;
  text-wrap: balance;
}
.inside-card h4 em { font-style: italic; color: var(--rose-deep); }
.inside-card .desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.inside-card .meta {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rose-deep);
  text-transform: uppercase;
}

/* ── testimonials ──────────────────────────────────────── */
.testimonials { padding: 140px 0; }
.testimonials-scroller {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 0 32px;
  margin: 0 calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 32px);
  padding-right: 64px;
  scrollbar-width: thin;
}
.testimonial {
  flex: 0 0 360px;
  scroll-snap-align: start;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 18px;
  box-shadow: 0 12px 32px -20px rgba(0,0,0,.18);
}
.testimonial .quote {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex: 1;
}
.testimonial .quote em { font-style: italic; color: var(--rose-deep); }
.testimonial .who {
  display: flex; gap: 12px; align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.testimonial .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--chrome-1);
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial .name { font-weight: 600; font-size: 14px; }
.testimonial .meta { color: var(--ink-soft); font-size: 12.5px; font-family: var(--font-mono); }
.testimonial .stat-chip {
  display: inline-flex; gap: 6px;
  margin-left: auto;
  background: color-mix(in oklab, var(--rose) 15%, var(--bg));
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rose-deep);
}

/* ── compare table ─────────────────────────────────────── */
.compare { background: var(--bg-elev); padding: 140px 0; }
.compare-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-top: 16px;
}
.compare-col { padding: 36px 36px 24px; }
.compare-col.left { background: color-mix(in oklab, var(--ink) 4%, var(--cream)); border-right: 1px solid var(--line); }
.compare-col .col-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.compare-col.right .col-head { color: var(--rose-deep); }
.compare-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.compare-col li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.5;
}
.compare-col li .icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
  flex-shrink: 0;
}
.compare-col.left li .icon { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink-soft); }
.compare-col.right li .icon { background: var(--rose); color: var(--cream); }
.compare-col.left li { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--ink) 25%, transparent); text-decoration-thickness: 1px; }
.compare-col.right li { color: var(--ink); font-weight: 500; }
.compare-col.right li strong { color: var(--rose-deep); font-weight: 600; }

/* ── offer / pricing ───────────────────────────────────── */
.offer { padding: 140px 0; }
.offer-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.25);
}
.offer-card::before {
  content: "";
  position: absolute; inset: -1px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--rose) 40%, transparent), transparent 50%);
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 0;
}
.offer-card > * { position: relative; z-index: 1; }

.offer-left h3 {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 8px 0 18px;
  font-weight: 400;
  text-wrap: balance;
}
.offer-left h3 em { font-style: italic; color: var(--rose-deep); }
.offer-left p { color: var(--ink-soft); font-size: 16px; max-width: 460px; }

.value-stack {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.value-stack li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  font-size: 15px;
}
.value-stack li .item { color: var(--ink); }
.value-stack li .item em { font-style: italic; color: var(--rose-deep); font-family: var(--font-accent); }
.value-stack li .val {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.value-stack li.total {
  border-bottom: 0;
  padding-top: 22px;
  font-family: var(--font-display);
  font-size: 22px;
}
.value-stack li.total .item { color: var(--ink-soft); }
.value-stack li.total .val { font-size: 22px; color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.value-stack li.price {
  border-bottom: 0;
  padding-top: 14px;
  font-family: var(--font-display);
}
.value-stack li.price .item {
  font-size: 22px;
  color: var(--ink);
}
.value-stack li.price .val {
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.value-stack li.price .val em { font-style: italic; color: var(--rose); }

.offer-cta { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.offer-cta .reassure {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 14px 22px;
}
.offer-cta .reassure span { display: inline-flex; align-items: center; gap: 6px; }
.offer-cta .reassure .ck { color: var(--rose-deep); font-weight: 700; }

/* ── FAQ ───────────────────────────────────────────────── */
.faq { padding: 140px 0; background: var(--bg-elev); }
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  cursor: pointer;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.faq-q .plus {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .35s var(--ease), background .25s var(--ease);
  position: relative;
}
.faq-q .plus::before, .faq-q .plus::after {
  content: ""; position: absolute;
  background: var(--ink);
  transition: transform .35s var(--ease);
}
.faq-q .plus::before { width: 12px; height: 1.5px; }
.faq-q .plus::after  { width: 1.5px; height: 12px; }
.faq-item.open .faq-q .plus { background: var(--ink); }
.faq-item.open .faq-q .plus::before, .faq-item.open .faq-q .plus::after { background: var(--bg); }
.faq-item.open .faq-q .plus::after { transform: rotate(90deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease), padding .4s var(--ease);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}
.faq-item.open .faq-a { max-height: 320px; padding-top: 14px; }

/* ── final CTA ─────────────────────────────────────────── */
.final-cta {
  margin: 80px 0 120px;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 80px 64px;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 80% 30%, color-mix(in oklab, var(--rose) 70%, transparent), transparent 60%),
    radial-gradient(40% 60% at 10% 90%, color-mix(in oklab, var(--rose-deep) 60%, transparent), transparent 60%);
  opacity: .85;
}
.final-cta > * { position: relative; z-index: 1; }
.final-cta .eyebrow { color: color-mix(in oklab, var(--cream) 70%, transparent); }
.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 18px 0 28px;
  max-width: 20ch;
  color: var(--cream);
  text-wrap: balance;
}
.final-cta h2 em { font-style: italic; color: color-mix(in oklab, var(--rose) 70%, var(--cream)); }
.final-cta p { font-size: 18px; color: color-mix(in oklab, var(--cream) 78%, transparent); max-width: 540px; margin-bottom: 36px; }
.final-cta .btn-ticket { background: var(--cream); color: var(--ink); }
.final-cta .btn-ticket:hover { background: var(--rose); color: var(--cream); }
.final-cta .btn-ticket .btn-stub { background: color-mix(in oklab, var(--ink) 12%, var(--cream)); border-left-color: rgba(0,0,0,.2); }
.final-cta .reassure {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 65%, transparent);
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  margin-top: 22px;
}
.final-cta .reassure span { display: inline-flex; align-items: center; gap: 6px; }
.final-cta .reassure .ck { color: color-mix(in oklab, var(--rose) 70%, var(--cream)); font-weight: 700; }

/* ── footer ────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
.footer .brand { font-size: 28px; margin-bottom: 16px; color: var(--ink); }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ── reveal animations ────────────────────────────────── */
/* Default: fully visible. The .js class on <html> opts in to hidden state. */
.reveal { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 1200px) {
  .phases-grid { grid-template-columns: 1fr 1fr; }
  .inside-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .hero-below { grid-template-columns: 1fr; }
  .hero-portrait { min-height: 480px; }
  .about-grid, .faq-grid { grid-template-columns: 1fr; }
  .pain-grid { grid-template-columns: 1fr 1fr; }
  .reframe-grid { grid-template-columns: 1fr; }
  .compare-table { grid-template-columns: 1fr; }
  .compare-col.left { border-right: 0; border-bottom: 1px solid var(--line); }
  .offer-card { grid-template-columns: 1fr; padding: 40px 28px; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .container { width: calc(100% - 36px); }
  .section, .pain, .about, .reframe, .phases, .inside, .testimonials, .compare, .offer, .faq { padding: 80px 0; }
  .nav-pill { display: none; }
  .price-mini { display: none; }
  .final-cta { padding: 48px 28px; margin: 60px 0 80px; }
  .footer-grid { grid-template-columns: 1fr; }
  .pain-grid { grid-template-columns: 1fr; }
  .phases-grid, .inside-grid { grid-template-columns: 1fr; }
  .bonus-banner { grid-template-columns: 1fr; padding: 32px 28px; }
  .hero-checkout { padding: 28px 24px; }
  .checkout-price .big { font-size: 64px; }
}

/* ──────────────────────────────────────────────────────────
   SULTANIC REDESIGN — neue Sections + Animation-Utilities
   ────────────────────────────────────────────────────────── */

/* ── Mechanism Reveal (Centerpiece, Section 3) ──────────── */
.mechanism-reveal {
  padding: 100px 0;
  background: var(--bg);
  position: relative;
}
.mechanism-reveal .container { max-width: 920px; }
.mechanism-reveal .eyebrow {
  color: var(--rose-deep);
  margin-bottom: 24px;
}
.mechanism-reveal h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  text-wrap: balance;
  max-width: 780px;
}
.mechanism-reveal h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.mechanism-reveal p {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 720px;
}
.mechanism-reveal p em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.mechanism-reveal .diagram-wrap {
  margin: 48px auto;
  display: flex;
  justify-content: center;
  max-width: 880px;
}
.mechanism-reveal .signature-diagram { width: 100%; height: auto; }

/* ── Disqualifier (Section 8) ───────────────────────────── */
.disqualifier {
  padding: 80px 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.disqualifier .container { max-width: 760px; }
.disqualifier .eyebrow {
  color: var(--rose-deep);
  margin-bottom: 24px;
}
.disqualifier h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.disqualifier h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.disqualifier .lead {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 40px;
  max-width: 600px;
}
.disqualifier .statements {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.disqualifier .statement {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 16px;
  align-items: start;
}
.disqualifier .statement-icon { margin-top: 6px; width: 22px; height: 22px; }
.disqualifier .statement-text {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
}
.disqualifier .closer {
  margin-top: 48px;
  font-size: 22px;
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

/* ── Risk-Reversal-Block (innerhalb Offer-Section) ──────── */
.risk-reversal {
  margin-top: 56px;
  padding: 40px 44px;
  background: color-mix(in oklab, var(--rose) 8%, var(--bg));
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--rose) 22%, transparent);
}
.risk-reversal .eyebrow {
  color: var(--rose-deep);
  margin-bottom: 12px;
}
.risk-reversal h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.risk-reversal h3 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.risk-reversal p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.risk-reversal p:last-child { margin-bottom: 0; }
.risk-reversal p em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

/* ── Pain-Truth (Section 2 — Rewrite) ───────────────────── */
.pain-truth { padding: 80px 0; }
.pain-truth .container { max-width: 880px; }
.pain-truth h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  text-wrap: balance;
}
.pain-truth h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.pain-truth .lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 56px;
  max-width: 720px;
}
.pain-truth .mirrors {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-top: 1px solid var(--line);
  padding-top: 36px;
  clear: both;
}
.pain-truth .mirror {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.pain-truth .mirror-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  align-self: center;
  transform: translateY(-1px);
}
.pain-truth .mirror-text {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.pain-truth .mirror-text em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

/* ── About Stats (Animated Counter) ─────────────────────── */
.about-stat .num [data-stat-target] { display: inline-block; }

/* ── Final-CTA Closer (zusätzliches Visual) ─────────────── */
.final-cta .closer-visual {
  margin: 0 auto 32px;
  width: 200px;
  max-width: 60%;
  display: block;
}

/* ── Animation Utilities (GSAP-targeted) ────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
.stroke-reveal path,
.stroke-reveal line,
.stroke-reveal rect,
.stroke-reveal polyline,
.stroke-reveal polygon {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

/* No-JS / Reduced-Motion fallback — alles direkt sichtbar */
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; }
  .stroke-reveal path,
  .stroke-reveal line,
  .stroke-reveal rect,
  .stroke-reveal polyline,
  .stroke-reveal polygon {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}
html:not(.js) .fade-up { opacity: 1; transform: none; }
html:not(.js) .stroke-reveal path,
html:not(.js) .stroke-reveal line,
html:not(.js) .stroke-reveal rect,
html:not(.js) .stroke-reveal polyline,
html:not(.js) .stroke-reveal polygon {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

/* ── Inline Line-Icon Base ──────────────────────────────── */
.icon-line {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: var(--ink);
}
.icon-line .accent { fill: var(--rose); stroke: none; }
.icon-line .accent-stroke { stroke: var(--rose); }

/* ── Mobile-Tweaks für neue Sections ────────────────────── */
@media (max-width: 768px) {
  .mechanism-reveal { padding: 80px 0; }
  .mechanism-reveal .diagram-wrap { margin: 40px auto; }
  .disqualifier { padding: 80px 0; }
  .risk-reversal { padding: 32px 28px; margin-top: 40px; }
  .pain-truth { padding: 80px 0; }
  .pain-truth .mirrors { padding-top: 32px; gap: 22px; }
}


/* ══════════════════════════════════════════════════════════════════
   V4 LAUNCH BUILD — Editorial Premium System
   Adds sticky elements, editorial section markers, drop caps,
   pullquotes, authority chips, transformation moment, premium
   offer/RR layouts, refined cards & hover states.
   ══════════════════════════════════════════════════════════════════ */

/* ── Scroll-Progress-Bar (fixed top) ──────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--rose);
  z-index: 1000;
  transition: width 80ms linear;
}

/* ── Sticky CTA Bar (appears after Hero scroll) ───────────── */
.sticky-cta {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translate(-50%, 120%);
  background: var(--ink);
  color: var(--cream);
  padding: 14px 8px 14px 24px;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 16px;
  z-index: 900;
  box-shadow: 0 24px 48px -16px rgba(12,12,14,0.30);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100% - 32px);
  white-space: nowrap;
}
.sticky-cta.visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta .sc-label {
  display: inline-flex; align-items: center; gap: 10px;
}
.sticky-cta .sc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--rose) 30%, transparent);
}
.sticky-cta .sc-cta {
  background: var(--rose);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .25s var(--ease);
}
.sticky-cta .sc-cta:hover { background: var(--rose-deep); }
.sticky-cta .sc-strike { text-decoration: line-through; color: color-mix(in oklab, var(--cream) 50%, transparent); font-size: 13px; margin-right: 4px; }

@media (max-width: 640px) {
  .sticky-cta {
    bottom: 12px;
    padding: 10px 6px 10px 16px;
    font-size: 13px;
    gap: 12px;
  }
  .sticky-cta .sc-cta { padding: 8px 14px; }
}

/* ── Editorial Section Markers (vertical Mono tag on left) ── */
.section-marker {
  position: absolute;
  top: 80px;
  left: max(24px, calc(50% - 720px));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex; align-items: center; gap: 12px;
}
.section-marker::after {
  content: "";
  width: 1px; height: 48px;
  background: var(--line);
}
@media (max-width: 1100px) {
  .section-marker { display: none; }
}

/* ── Editorial Figure-Caption (for imgslots) ──────────────── */
.fig-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
}
.fig-caption::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--rose);
}

/* ── Drop-Cap (first letter of opening paragraph) ─────────── */
.drop-cap::first-letter {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 4.6em;
  float: left;
  line-height: 0.85;
  padding: 8px 14px 0 0;
  color: var(--rose-deep);
}

/* ── Pull-Quote (editorial inline quote block) ────────────── */
.pull-quote {
  margin: 56px 0;
  padding: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--rose-deep);
  max-width: 620px;
  text-wrap: balance;
  position: relative;
  padding-left: 28px;
  border-left: 1px solid var(--rose);
}

/* ── Authority Press Strip ────────────────────────────────── */
.authority-strip {
  padding: 64px 0 56px;
  background: color-mix(in oklab, var(--rose) 5%, var(--bg));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.authority-strip .strip-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 26px;
}
.authority-strip .strip-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 16px;
}
.authority-strip .strip-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.authority-strip .strip-chip .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--rose);
}

@media (max-width: 768px) {
  .authority-strip { padding: 40px 0; }
}

/* ── Transformation Section (Identity-Shift Pullquote) ────── */
.transformation {
  padding: 120px 0 100px;
  background: var(--bg);
  position: relative;
  text-align: center;
}
.transformation .container { max-width: 980px; }
.transformation .eyebrow {
  color: var(--rose-deep);
  margin-bottom: 32px;
}
.transformation .manifest {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0 auto 36px;
  max-width: 22ch;
  color: var(--ink);
  font-weight: 400;
}
.transformation .manifest em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.transformation .manifest-after {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto;
}
.transformation .manifest-after em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

@media (max-width: 768px) {
  .transformation { padding: 80px 0; }
}

/* ── Hero Refinements (asymmetric Editorial Grid) ─────────── */
.hero {
  padding: 60px 0 80px;
}
.hero .container { position: relative; }
.hero-fig-label {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.hero-fig-label::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--rose);
}
.hero-scroll-cue {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0.6;
}
.hero-scroll-cue .line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--rose-deep));
  animation: scroll-cue 2.4s var(--ease) infinite;
}
@keyframes scroll-cue {
  0% { transform: scaleY(0.2); transform-origin: top; }
  100% { transform: scaleY(1); transform-origin: top; }
}
@media (max-width: 900px) {
  .hero-scroll-cue { display: none; }
}

/* Hero-headline: enger geschnürt damit Checkout above-fold sichtbar */
.hero-headline {
  font-size: clamp(34px, 4.6vw, 62px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 4px 0 10px;
}
.hero { padding: 28px 0 60px; }
.hero-vsl-grid { margin-top: 32px; }
.hero-tag { font-size: 12px; padding: 6px 14px; }
.hero-sub { font-size: 17px; line-height: 1.55; }

/* ── Premium Card Hover (lift + soft shadow) ──────────────── */
.phase, .inside-card, .pain-card {
  transition: transform .45s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
.phase:hover, .inside-card:hover {
  box-shadow: 0 24px 56px -28px rgba(12,12,14,0.18);
}

/* ── About Section — Magazine-Style 2-col ─────────────────── */
.about .about-grid { gap: 80px; }
.about h2 { font-size: clamp(48px, 6.2vw, 92px); }
.about .about-copy .about-lead {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 18px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.about-pull-quote {
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--rose);
  border-radius: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--rose-deep);
  text-wrap: balance;
}

/* ── Inside Card — Premium Hover Reveal ───────────────────── */
.inside-card {
  position: relative;
  overflow: hidden;
}
.inside-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.inside-card:hover::after { transform: scaleX(1); }

/* ── Testimonial Card — Pullquote Magazine Treatment ──────── */
.testimonial { transition: transform .45s var(--ease), box-shadow .35s var(--ease); }
.testimonial:hover { transform: translateY(-3px); box-shadow: 0 24px 56px -28px rgba(12,12,14,0.18); }
.testimonial .quote {
  position: relative;
}
.testimonial .quote::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--rose);
  margin-bottom: 16px;
}

/* ── Offer Section — Premium Editorial Value-Stack ────────── */
.offer-card {
  padding: 72px 64px;
}
.offer-card .offer-left h3 { font-size: clamp(40px, 4.6vw, 60px); }
.value-stack li .item { font-size: 16px; letter-spacing: -0.005em; }
.value-stack li.total {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 17px;
}
.value-stack li.price {
  margin-top: 4px;
  padding-top: 14px;
}
.value-stack li.price .item { letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.value-stack li.price .val {
  font-size: clamp(56px, 6.4vw, 80px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.value-stack li.price .val em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

/* ── Risk-Reversal Signature Treatment ────────────────────── */
.risk-reversal {
  position: relative;
  padding: 56px 56px 56px 56px;
}
.risk-reversal .signature-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in oklab, var(--rose) 22%, transparent);
}
.risk-reversal .signature-portrait {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d8b4a0, #a87060);
  position: relative;
  overflow: hidden;
}
.risk-reversal .signature-portrait .imgslot {
  width: 100%; height: 100%; border-radius: 50%;
  border: 0;
  font-size: 9px;
}
.risk-reversal .signature-name {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 2px;
}
.risk-reversal .signature-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 768px) {
  .offer-card { padding: 40px 28px; }
  .risk-reversal { padding: 32px 24px; }
}

/* ── Final CTA — Editorial Close ──────────────────────────── */
.final-cta {
  padding: 96px 56px 96px;
  text-align: center;
}
.final-cta .eyebrow {
  color: color-mix(in oklab, var(--cream) 65%, transparent);
  margin-bottom: 24px;
}
.final-cta h2 {
  font-size: clamp(48px, 6.4vw, 96px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 16ch;
  margin: 0 auto 28px;
}
.final-cta p {
  max-width: 580px;
  margin: 0 auto 36px;
  font-size: 18px;
  line-height: 1.6;
}
.final-cta .btn-ticket { margin: 0 auto; }
.final-cta .reassure { margin-top: 24px; justify-content: center; }

@media (max-width: 768px) {
  .final-cta { padding: 64px 28px; }
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.site-footer .brand-mark {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.site-footer .brand-mark .star {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--rose);
  margin-right: 8px;
  transform: translateY(1px);
}
.site-footer .brand-mark em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.site-footer .footer-nav {
  display: flex; gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-footer .footer-nav a:hover { color: var(--ink); }
.site-footer .copyline {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; justify-content: space-between;
}

@media (max-width: 640px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
  .site-footer .footer-nav { flex-wrap: wrap; gap: 12px 18px; }
  .site-footer .copyline { flex-direction: column; gap: 10px; }
}

/* ── Magnetic CTA (visual prep — JS handles transform) ────── */
.btn-ticket {
  will-change: transform;
  transition: transform .25s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

/* ── Refined Phase Card layout ────────────────────────────── */
.phase {
  position: relative;
}
.phase .num-tag {
  display: inline-flex;
  letter-spacing: 0.14em;
}
.phase h3 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
/* Icons on dark phase cards: use light (on-pillar) color for visibility */
.phase .icon-line { color: var(--on-pillar); opacity: 0.92; }
.phase .icon-line .accent {
  fill: color-mix(in oklab, var(--rose) 30%, var(--on-pillar));
}
.phase .icon-line .accent-stroke {
  stroke: color-mix(in oklab, var(--rose) 30%, var(--on-pillar));
}

/* ── Image Reveal mask (for imgslots when they enter view) ── */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg);
  transform: translateX(0);
  transition: transform 1.1s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.img-reveal.in-view::after { transform: translateX(101%); }

@media (prefers-reduced-motion: reduce) {
  .img-reveal::after { display: none; }
  .hero-scroll-cue .line { animation: none; }
}

/* ── Layout: better section dividers + side gutter ────────── */
.section-divider {
  border-top: 1px solid var(--line);
}

/* ── Improved Mechanism Reveal — magazine 2-col body ──────── */
.mechanism-reveal .body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
  max-width: 880px;
}
@media (min-width: 900px) {
  .mechanism-reveal .body-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}

/* Mechanism SVG mobile — hide mono micro-labels, keep big italic words */
@media (max-width: 720px) {
  .mechanism-svg .symbol text:nth-of-type(2) { display: none; }
  .mechanism-svg .center-hub + text,
  .mechanism-svg text[font-size="9"] { font-size: 14px; }
}

/* Phases-bridge on mobile — narrower, larger labels */
.phases-bridge-svg { display: block; }
@media (max-width: 720px) {
  .phases-bridge { display: none; }
}

/* ── Hero stat box refined ────────────────────────────────── */
.hero-proof p strong { font-weight: 700; }
.hero-proof p { letter-spacing: -0.005em; }

/* ── Press-strip / chip hover ─────────────────────────────── */
.authority-strip .strip-chip {
  transition: border-color .25s var(--ease), transform .3s var(--ease);
}
.authority-strip .strip-chip:hover {
  border-color: var(--rose);
  transform: translateY(-2px);
}

/* ── Reveal smoothing for fade-up (longer offset) ──────────── */
.fade-up { transform: translateY(28px); }

/* ── Real Photos (replace imgslot placeholders) ───────────── */
.hero-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  display: block;
  z-index: 1;
}
/* keep grain overlay on top of photo for editorial look */
.hero-portrait.grain::after { z-index: 2; opacity: 0.35; }
.hero-portrait .hero-fig-label { z-index: 3; }
.hero-portrait .img-reveal::after,
.img-reveal::after { z-index: 4; }

/* About-Images: simple direct img approach — full photo visible */
.about-images { display: block; }
.about-fig {
  position: relative;
  margin: 0 0 8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
  width: 100%;
}
.about-fig-b { margin-top: 16px; }
.about-fig .about-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.signature-portrait {
  overflow: hidden;
}
.signature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  border-radius: 50%;
}

/* ── Refined Imgslot Placeholder (looks intentional) ──────── */
.imgslot {
  position: relative;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.04) 100%),
    color-mix(in oklab, var(--rose) 22%, var(--bg));
}
.imgslot::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 14px; height: 14px;
  border-top: 1px solid rgba(255,255,255,0.45);
  border-left: 1px solid rgba(255,255,255,0.45);
  pointer-events: none;
}
.imgslot::after {
  content: "";
  position: absolute;
  bottom: 12px; right: 12px;
  width: 14px; height: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  border-right: 1px solid rgba(255,255,255,0.45);
  pointer-events: none;
}
.hero-portrait .imgslot {
  background:
    linear-gradient(135deg, rgba(216,180,160,0.55) 0%, rgba(168,112,96,0.55) 100%),
    color-mix(in oklab, var(--rose) 28%, var(--bg));
}

/* ── Subtle section divider lines between sections ─────────── */
.section-divider-line {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--rose);
  margin: 0 auto;
}

/* ── Manifest word-by-word reveal helper ──────────────────── */
.manifest .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.manifest .word.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .manifest .word { opacity: 1; transform: none; transition: none; }
}

/* ── Topbar tweak: slightly stronger backdrop ─────────────── */
.topbar {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
}

/* ── Hero copy max-width refinement ───────────────────────── */
.hero-center { max-width: 1200px; }
@media (min-width: 901px) {
  .hero-center { text-align: left; align-items: flex-start; }
  .hero-headline { max-width: 20ch; }
  .hero-proof { align-self: flex-start; }
  .hero-tag { align-self: flex-start; }
  .hero-sub { max-width: 620px; }
}
@media (max-width: 900px) {
  .hero-headline { max-width: 100%; }
}

/* ── Editorial heading accent (small line above section-head h2) ── */
.mechanism-reveal h2,
.transformation .manifest,
.pain-truth h2,
.disqualifier h2,
.about h2 {
  position: relative;
}

/* ── Higher-contrast on big italics (only where needed) ──── */
.transformation .manifest em { color: var(--rose-deep); }


/* ══════════════════════════════════════════════════════════════════
   V5 CONVERSION UPLIFT — VSL Hero, Sticky Rail, Bonus-Stack,
   Garantie-Siegel, Tag-für-Tag Timeline, Real Proof Reframe
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero Trust Pills (replaces avatar-stack) ──────────── */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 8px;
  align-items: center;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.trust-pill svg { color: var(--rose-deep); flex-shrink: 0; }

/* ── Hero VSL + Checkout Grid ──────────────────────────── */
.hero-vsl-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  margin-top: 56px;
  align-items: start;
}
@media (max-width: 1100px) {
  .hero-vsl-grid { grid-template-columns: 1fr; gap: 28px; }
}

.vsl-placeholder {
  display: flex; flex-direction: column;
}
.vsl-aspect {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 30% 40%, color-mix(in oklab, var(--rose) 32%, transparent), transparent 70%),
    linear-gradient(135deg, #2a1f25 0%, #4b3338 100%);
  box-shadow: 0 30px 80px -40px rgba(12,12,14,0.4);
}
.vsl-eyebrow {
  position: absolute; top: 16px; left: 16px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.12);
}
.vsl-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 2;
  gap: 18px;
}
.vsl-play {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease);
  box-shadow: 0 12px 36px -12px rgba(0,0,0,0.4);
}
.vsl-play svg { width: 32px; height: 32px; color: var(--rose-deep); margin-left: 4px; }
.vsl-play:hover { transform: scale(1.05); background: var(--cream); }
.vsl-cue {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.vsl-grain {
  position: absolute; inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.vsl-undertext {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: center;
}
.vsl-undertext em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

/* ── Garantie-Siegel ───────────────────────────────────── */
.guarantee-seal {
  display: block;
  width: 200px; height: 200px;
  flex-shrink: 0;
}
.guarantee-seal-mini {
  display: block;
  width: 70px; height: 70px;
  flex-shrink: 0;
}
.checkout-seal {
  margin-top: 18px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.checkout-seal p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* RR layout updated to flex with seal */
.risk-reversal {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
}
.risk-reversal .rr-content { display: flex; flex-direction: column; }
.risk-reversal .rr-content h3 { margin-top: 6px; }
@media (max-width: 800px) {
  .risk-reversal { grid-template-columns: 1fr; text-align: center; }
  .risk-reversal .guarantee-seal { margin: 0 auto; width: 160px; height: 160px; }
  .risk-reversal .signature-row { justify-content: center; }
}

/* ── 'Daher weiß sie es' Section ──────────────────────── */
.daher-weiss {
  padding: 120px 0 100px;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.daher-weiss .eyebrow { color: var(--rose-deep); margin-bottom: 24px; }
.daher-weiss h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  text-wrap: balance;
  max-width: 880px;
}
.daher-weiss h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.daher-weiss .lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 64px;
  max-width: 760px;
}
.daher-weiss .lead em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; gap: 28px; } }

.proof-card { margin: 0; display: flex; flex-direction: column; }
.proof-mockup {
  position: relative;
  width: 100%;
  padding-bottom: 130%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 56px -28px rgba(12,12,14,0.22);
}
.proof-mockup > * { position: absolute; inset: 0; }

/* Book Mockup */
.proof-book {
  background: linear-gradient(135deg, #2a1f25 0%, #4b3338 100%);
}
.book-cover {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px 28px;
  text-align: center;
}
.book-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
}
.book-title {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 42px);
  color: var(--rose);
  line-height: 1.05;
  margin-top: 32px;
}
.book-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin-bottom: 32px;
}
.book-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(to right, rgba(0,0,0,0.35), transparent);
  inset: auto auto auto 0;
}

/* Candy Cush Jar */
.proof-candy {
  background: linear-gradient(135deg, color-mix(in oklab, var(--rose) 15%, var(--cream)) 0%, color-mix(in oklab, var(--rose) 35%, var(--bg-elev)) 100%);
}
.candy-jar {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.candy-cap {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 32px;
  background: linear-gradient(to bottom, var(--rose-deep), color-mix(in oklab, var(--rose-deep) 70%, var(--ink)));
  border-radius: var(--radius-sm) var(--radius-sm) 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.candy-label {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  padding: 22px 16px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  text-align: center;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.15);
}
.candy-brand {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--ink);
}
.candy-product {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 22px;
  color: var(--rose-deep);
  line-height: 1.05;
}

/* Portrait proof */
.proof-portrait { background: color-mix(in oklab, var(--rose) 18%, var(--bg-elev)); }
.proof-portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.proof-meta {
  margin: 16px 0 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.proof-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.proof-tag::before { content: ''; width: 14px; height: 1px; background: var(--rose); }
.proof-rating {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rose-deep);
}
.proof-rating em {
  font-family: var(--font-accent);
  font-style: italic;
}

/* ── Tag-für-Tag Timeline ─────────────────────────────── */
.timeline-30 { padding: 120px 0 100px; }
.timeline-30 .section-head { margin-bottom: 56px; }

.timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  padding-top: 36px;
}
.timeline-line {
  position: absolute;
  top: 18px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rose) 12%, var(--rose) 88%, transparent);
}
.timeline-stop {
  position: relative;
  text-align: left;
  padding-top: 16px;
}
.timeline-stop::before {
  content: '';
  position: absolute;
  top: -22px; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 5px var(--bg);
}
.timeline-stop.t-final::before { background: var(--rose-deep); box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px var(--rose); }
.timeline-stop .t-marker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 12px;
}
.timeline-stop h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.timeline-stop h4 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.timeline-stop p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 980px) {
  .timeline-track { grid-template-columns: 1fr; gap: 32px; padding-top: 0; }
  .timeline-line { display: none; }
  .timeline-stop { padding-left: 32px; padding-top: 0; }
  .timeline-stop::before { top: 0; left: 0; }
}

/* ── CTA Banner Strip ─────────────────────────────────── */
.cta-banner-strip {
  background: color-mix(in oklab, var(--ink) 96%, var(--rose));
  color: var(--cream);
  padding: 28px 0;
}
.cta-banner-strip .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-banner-strip p {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 720px;
}
.cta-banner-strip p em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose);
}
.cta-banner-strip .btn-ticket { flex-shrink: 0; }
.cta-banner-strip .btn-ticket .btn-body { padding: 14px 22px; max-width: none; }
.cta-banner-strip .btn-ticket .btn-stub { padding: 0 18px; background: var(--rose-deep); }
@media (max-width: 640px) {
  .cta-banner-strip { padding: 22px 0; }
  .cta-banner-strip .container { gap: 18px; }
}

/* ── Bonus-Stack Section ──────────────────────────────── */
.bonus-stack-section {
  padding: 120px 0;
  background: var(--bg);
}
.bonus-stack-section .section-head { margin-bottom: 48px; }

.bonus-stack-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 48px;
}
@media (max-width: 1200px) { .bonus-stack-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .bonus-stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bonus-stack-grid { grid-template-columns: 1fr; } }

.bonus-mockup {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bonus-mockup:hover { transform: translateY(-4px); box-shadow: 0 24px 56px -28px rgba(12,12,14,0.18); }
.bonus-mockup.mockup-bonus { background: linear-gradient(135deg, var(--ink) 0%, #2a1f25 100%); color: var(--cream); border-color: var(--rose-deep); }

.mockup-visual {
  position: relative;
  width: 100%;
  padding-bottom: 130%;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
}
.mockup-visual > * { position: absolute; inset: 0; }
.mockup-visual .mockup-label-top {
  inset: auto 0 auto 0;
  top: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.mockup-visual .mockup-title-large {
  inset: 0;
  /* column: sonst werden Text/<br>/<em> zu Flex-Items in einer Reihe
     und der Titel läuft über die Kachel hinaus */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--cream);
  padding: 0 12px;
}
.mockup-visual .mockup-title-large em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose);
}

.mockup-program { background: linear-gradient(135deg, #2a1f25 0%, #4b3338 100%); }
.mockup-pdf { background: linear-gradient(135deg, #3d2a2e 0%, var(--rose-deep) 100%); }
.mockup-cheats { background: linear-gradient(135deg, #5a3d3d 0%, #7a5050 100%); }
.mockup-tracker { background: linear-gradient(135deg, #2c1e22 0%, #3d2a2f 100%); }
.mockup-pigment { background: linear-gradient(135deg, var(--rose-deep) 0%, #6b3f3b 100%); }

.mockup-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.mockup-ix {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.bonus-mockup.mockup-bonus .mockup-ix { color: var(--rose); }
.mockup-value {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
}
.bonus-mockup.mockup-bonus .mockup-value { color: var(--cream); }
.mockup-value strong { font-weight: 600; color: var(--rose-deep); }
.bonus-mockup.mockup-bonus .mockup-value strong { color: var(--rose); }

.mockup-cta-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-deep);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  text-align: center;
}
.bonus-mockup.mockup-bonus .mockup-cta-tag { color: var(--rose); border-top-color: rgba(255,255,255,0.15); }
.mockup-cta-bonus { color: var(--rose) !important; }

.bonus-total-banner {
  display: grid;
  grid-template-columns: auto 30px auto 1fr;
  gap: 28px;
  align-items: center;
  background: var(--ink);
  color: var(--cream);
  padding: 28px 32px;
  border-radius: var(--radius-lg);
}
.bonus-total-banner .btb-left,
.bonus-total-banner .btb-right { display: flex; flex-direction: column; gap: 4px; }
.bonus-total-banner .btb-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 60%, transparent);
}
.bonus-total-banner .btb-strike {
  font-family: var(--font-display);
  font-size: 32px;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: color-mix(in oklab, var(--cream) 70%, transparent);
}
.bonus-total-banner .btb-arrow {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--rose);
  text-align: center;
}
.bonus-total-banner .btb-price {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cream);
}
.bonus-total-banner .btb-price em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose);
}
.bonus-total-banner .btn-ticket { justify-self: end; }

@media (max-width: 800px) {
  .bonus-total-banner { grid-template-columns: 1fr; gap: 18px; text-align: center; padding: 24px; }
  .bonus-total-banner .btb-arrow { display: none; }
  .bonus-total-banner .btn-ticket { justify-self: stretch; }
  .bonus-total-banner .btn-ticket .btn-body { text-align: center; }
}

/* ── Testimonial Source Tag ───────────────────────────── */
.testimonial .t-source {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 14px;
  padding: 4px 10px;
  border: 1px solid color-mix(in oklab, var(--rose) 30%, transparent);
  border-radius: var(--radius-pill);
  align-self: flex-start;
}

/* ── Sticky Side-Rail (Desktop) ───────────────────────── */
.sticky-rail {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%) translateX(120%);
  width: 280px;
  z-index: 800;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
  opacity: 0;
  pointer-events: none;
}
.sticky-rail.visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.srail-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  box-shadow: 0 30px 80px -36px rgba(12,12,14,0.30);
  display: flex; flex-direction: column; gap: 14px;
}
.srail-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.srail-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px color-mix(in oklab, var(--rose) 28%, transparent); }
.srail-price {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-display);
}
.srail-price .strike {
  font-size: 18px;
  text-decoration: line-through;
  text-decoration-thickness: 1.2px;
  color: var(--ink-soft);
}
.srail-price .price {
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.srail-price .price em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.srail-bullets { list-style: none; padding: 0; margin: 4px 0; font-size: 13px; line-height: 1.5; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.srail-cta { margin-top: 4px; }
.srail-cta .btn-body { padding: 12px 16px; font-size: 14px; }
.srail-cta .btn-stub { padding: 0 14px; }
.srail-guarantee {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

@media (max-width: 1380px) { .sticky-rail { right: 14px; width: 260px; } }
@media (max-width: 1100px) { .sticky-rail { display: none; } }

/* ── About-Stats updated for Buch/Candy/Master strings ── */
.about-stat .num em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
  font-size: 0.7em;
}


/* ── Comparison Section (Alter Weg vs Skin-Code-Weg) ───── */
.comparison {
  padding: 120px 0 100px;
  background: var(--bg);
}
.comparison .section-head { margin-bottom: 56px; max-width: 880px; }
.comparison h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.comparison h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}
.comparison .section-head p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 900px) { .comparison-grid { grid-template-columns: 1fr; gap: 24px; } }

.comp-col {
  padding: 40px 36px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.comp-old {
  background: color-mix(in oklab, var(--ink) 5%, var(--bg));
  border: 1px solid var(--line);
}
.comp-new {
  background: var(--cream);
  border: 1px solid color-mix(in oklab, var(--rose) 32%, transparent);
  box-shadow: 0 24px 56px -32px rgba(12,12,14,0.18);
}

.comp-col .comp-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.comp-new .comp-eyebrow { color: var(--rose-deep); }

.comp-col h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 16px;
}
.comp-col h3 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

.comp-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.comp-col li {
  font-size: 15.5px;
  line-height: 1.55;
  padding-left: 32px;
  position: relative;
}
.comp-col li em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

.comp-old li {
  color: var(--ink-soft);
}
.comp-old li::before {
  content: "✗";
  position: absolute;
  top: -1px; left: 0;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
  border-radius: 50%;
  background: var(--bg);
}

.comp-new li { color: var(--ink); }
.comp-new li::before {
  content: "✓";
  position: absolute;
  top: -1px; left: 0;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--cream);
  background: var(--rose);
  border-radius: 50%;
}

@media (max-width: 768px) {
  .comparison { padding: 80px 0; }
  .comp-col { padding: 32px 24px; }
}

/* ── Hero v5.1: Headline + Sub auf volle Breite ─────────── */
.hero-center { max-width: none; }
.hero-headline {
  font-size: clamp(36px, 5.2vw, 70px);
  letter-spacing: -0.04em;
}
@media (min-width: 901px) {
  .hero-headline { max-width: none; }
  .hero-sub { max-width: none; font-size: 18px; }
}

/* ── Hero v5.2: Centered headline (mit voller Breite) ────── */
@media (min-width: 901px) {
  .hero-center { text-align: center; align-items: center; }
  .hero-tag { align-self: center; }
  .hero-proof { align-self: center; }
}
.hero-headline { text-wrap: balance; }

/* ════════════════════════════════════════════════════════
   LAUNCH-ERGÄNZUNGEN — VSL-Fallback, Consent, HWG-Footer
   ════════════════════════════════════════════════════════ */

/* VSL: solange kein Video da ist (body.no-vsl), zeigt der Hero links das
   Emira-Portrait (Layout der Vorversion, Styles existieren bereits) und
   rechts die Checkout-Card. Mit gesetzter VSL_EMBED_URL übernimmt das Video. */
.hero-portrait-fallback { display: none; margin: 0; }
.no-vsl .vsl-placeholder { display: none; }
.no-vsl .hero-portrait-fallback { display: block; }
.no-vsl .hero-vsl-grid { align-items: stretch; } /* Portrait streckt auf Card-Höhe */

/* Eingebettetes VSL-Medium (iframe/video) füllt die 16:9-Fläche */
.vsl-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 2;
}
video.vsl-media { object-fit: contain; }

/* Bridge: Reduktions-Claim über der Grafik */
.bridge-claim {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bridge-claim em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--rose-deep);
}

/* HWG-Pflichthinweis im Footer */
.site-footer .hwg-disclaimer {
  margin: 28px 0 0;
  max-width: 720px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Cookie-Consent-Banner — liegt über Sticky-CTA (z-index 800) */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  display: none;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 22px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -24px rgba(12, 12, 14, 0.35);
}
.consent-banner.visible { display: flex; }
.consent-text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}
.consent-text a { text-decoration: underline; color: var(--rose-deep); }
.consent-actions { display: flex; gap: 10px; }
.consent-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rose-deep);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.consent-accept { background: var(--rose-deep); color: var(--cream); }
.consent-accept:hover { background: var(--ink); border-color: var(--ink); }
.consent-decline { background: transparent; color: var(--rose-deep); }
.consent-decline:hover { background: var(--rose); color: var(--ink); border-color: var(--rose); }

/* Hinweis unter dem Wert-Stapel: die Einzelwerte sind Vergleichswerte, kein
   frueherer Verkaufspreis. Steht bewusst klein, aber lesbar. */
.value-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
  opacity: 0.85;
}

/* ── Mobil: Die drei About-Zahlen passen nicht nebeneinander. Ohne Umbruch
   macht die Reihe die ganze Seite 443 px breit, Fotos und Kaufleiste werden
   rechts abgeschnitten. ── */
.about-grid > * { min-width: 0; }
@media (max-width: 640px) {
  .about-stats { grid-template-columns: 1fr; gap: 20px; }
  .about-stat .num, .about-stat .lbl { display: block; }
}
/* Auf schmalen Handys schiebt der volle Leistentext den 49-€-Knopf aus der Leiste. */
@media (max-width: 440px) {
  .sticky-cta .sc-extra { display: none; }
}
/* Der Angebots-Knopf wird in der Spalte volle Breite, der Text aber nicht:
   rechts blieb eine leere Fläche. Gleiche Lösung wie im Hero-Checkout. */
.offer-cta .btn-ticket .btn-body { max-width: none; flex: 1; }

/* VSL: Vorschaubild hinter dem Play-Knopf, bis das Video per Klick geladen wird. */
body:not(.no-vsl) .vsl-aspect {
  background: #1a1414 url("/assets/skin-code/vsl-skin-code-poster.jpg") center / cover no-repeat;
}
body:not(.no-vsl) .vsl-aspect::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(20,14,14,0) 45%, rgba(20,14,14,.55) 100%);
}
body:not(.no-vsl) .vsl-cue { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.55); position: relative; z-index: 1; }
body:not(.no-vsl) .vsl-play { position: relative; z-index: 1; }
body:not(.no-vsl) .vsl-content, body:not(.no-vsl) .vsl-eyebrow { z-index: 2; }