/* =====================================================================
 * landing-bundle.css - GENERATED, do not edit by hand.
 * Concatenation of the four landing stylesheets in EXACTLY the order they
 * were linked in app/+html.tsx. That order is load-bearing (sublanding.css
 * refines .bg-dark/.eyebrow-chip/.l2 primitives from landing.css, and every
 * file reads the design tokens defined in landing.css :root), so it must be
 * preserved on any regeneration:
 *   1. landing.css  2. landing-dna.css  3. sublanding.css  4. landing-redesign.css
 * The four source files remain in place as @import stubs so the per-route
 * <link>s in app/*.tsx keep resolving without a second full download.
 * ===================================================================== */

/* ==== landing.css (90945 B) ==== */
/* =========================================================================
   TakeMeTo — Landing Page (redesign aligned to Design System)
   ========================================================================= */

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  /* Colours */
  --bg:              #FAF8F5;
  --bg-raised:       #F7F5F0;
  --bg-sand:         #F4EFE8;
  --bg-dark:         #1A1410;
  --ink:             #3A2E22;
  --ink-80:          rgba(58,46,34,0.80);
  --ink-75:          rgba(58,46,34,0.75);
  --ink-70:          rgba(58,46,34,0.70);
  --ink-60:          rgba(58,46,34,0.60);
  --ink-50:          rgba(58,46,34,0.50);
  --ink-45:          rgba(58,46,34,0.45);
  --ink-40:          rgba(58,46,34,0.40);
  --ink-10:          rgba(58,46,34,0.10);
  --cream:           #F4EBD8;
  --accent:          #C17D3C;
  --accent-15:       rgba(193,125,60,0.15);
  --accent-border:   rgba(193,125,60,0.35);
  --border-1:        rgba(58,46,34,0.10);
  --border-2:        rgba(58,46,34,0.16);

  /* TM design-system aliases */
  --tm-amber-light:   #C17D3C;
  --tm-card-cream:    #F7F5F0;
  --tm-charcoal-brown:#3A2E22;
  --tm-soft-ivory:    #F9F3EA;
  --tm-warm-cream-2:  #F4EFE8;
  --tm-espresso:      #1A1410;

  /* Typography */
  --font-sans:    'BagossStandard-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'BagossStandard-Medium',  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Bagoss everywhere (12.08.2026): the decorative "mono" values on the ID card
     were the last non-brand face on the public pages. */
  --font-mono:    'Bagoss Standard', 'BagossStandard-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fw-book:      400;
  --fw-thin:      300;
  --fw-semi:      600;
  --fs-16:        16px;
  --lh-body:      1.65;
  --ls-body:      0em;
  --ls-head:      -0.02em;
  --ls-display:   -0.03em;
  --ls-eyebrow:   0.14em;

  /* Radii */
  --r-3:  16px;
  --r-4:  24px;
  --r-5:  9999px;

  /* Shadows */
  --shadow-1: 0 2px 8px rgba(58,46,34,0.06), 0 8px 24px rgba(58,46,34,0.08);
  --shadow-2: 0 4px 16px rgba(58,46,34,0.10), 0 20px 48px rgba(58,46,34,0.14);

  /* Motion */
  --dur-fast: 0.18s;
  --dur-base: 0.32s;
  --dur-slow: 0.60s;
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  /* Hero parallax (set by JS) */
  --hero-img-y: 0px;

  /* ── Redesign tokens (April 2026 homepage rebuild) — additive, new names only ── */
  --r-2: 6px;
  --bg-muted: #F0EDE8;
  --bg-darker: #33281E;
  --tm-amber: #C17D3C;
  --tm-amber-deep: #9A6028;
  --tm-amber-rich: #B06E30;
  --tm-amber-core: #C17D3C;
  --tm-amber-soft: #E0A35E;
  --tm-amber-white: #FFF8F0;
  --tm-warm-tan: #D4C5A9;
  --tm-ivory: #FDF8F0;
  --tm-warm-ivory: #FBF4E9;
  --tm-parchment: #F8EFE0;
  --tm-light-sand: #ECE7DE;
  --tm-deep-espresso: #33281E;
  --tm-near-black-warm: #1A1A19;
  --ink-65: rgba(58,46,34,0.65);
  --ink-55: rgba(58,46,34,0.55);
  --ink-20: rgba(58,46,34,0.20);
  --ink-08: rgba(58,46,34,0.08);
  --cream-90: rgba(250,248,245,0.90);
  --cream-80: rgba(250,248,245,0.80);
  --cream-70: rgba(250,248,245,0.70);
  --cream-55: rgba(250,248,245,0.55);
  --accent-text: #FFF8F0;
  --accent-10: rgba(193,125,60,0.10);
  --border-3: rgba(58,46,34,0.32);
  --shadow-3: 0 4px 8px rgba(58,46,34,0.06), 0 20px 48px rgba(58,46,34,0.12);
  --shadow-amber-glow: 0 0 24px rgba(193,125,60,0.25);
  --grad-cta: linear-gradient(135deg,#C17D3C,#D4924F,#C17D3C);
  --grad-cta-hover: linear-gradient(135deg,#D4924F,#E0A35E,#D4924F);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; background: var(--bg); }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-book);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-book); }

/* ------------- Layout primitives ------------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.section {
  padding: clamp(64px, 9vw, 128px) 0;
  position: relative;
}
.section-narrow { padding: clamp(48px, 7vw, 96px) 0; }

/* ------------- Section background variants ------------- */
.bg-cream { background: var(--bg); }
.bg-paper { background: var(--bg-raised); }
.bg-warm  { background: var(--tm-warm-cream-2); }
.bg-ivory { background: var(--tm-soft-ivory); }
.bg-sand  { background: var(--bg-sand); }
.bg-dark  { background: var(--bg-dark); color: var(--cream); }
.bg-dark .tm-display, .bg-dark .tm-h1, .bg-dark .tm-h2, .bg-dark .tm-h3, .bg-dark .tm-h4, .bg-dark .tm-h5 { color: var(--cream); }
.bg-dark .tm-body, .bg-dark .tm-lead { color: rgba(250,248,245,0.75); }
.bg-dark .tm-meta { color: rgba(250,248,245,0.6); }
.bg-dark .tm-eyebrow { color: rgba(250,248,245,0.6); }

/* ------------- Eyebrow chip (pill, like the live site) ------------- */
.eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-5);
  background: transparent;
  color: var(--accent);
  font: var(--fw-book) 11px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  border: 1px solid var(--accent-border);
}
.bg-dark .eyebrow-chip {
  background: transparent;
  color: var(--tm-amber-light);
  border-color: rgba(193,125,60,0.4);
}

/* ------------- Bicolor headline (ink line + amber line) ------------- */
.bicolor { display: block; }
.bicolor .l1 { color: var(--ink); display: block; }
.bicolor .l2 { color: var(--accent); display: block; }
.bg-dark .bicolor .l1 { color: var(--cream); }
.bg-dark .bicolor .l2 { color: var(--tm-amber-light); }

/* ------------- Buttons ------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-5);
  border: 0;
  font: var(--fw-book) 13px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all var(--dur-base) var(--ease-std);
  white-space: nowrap;
}
.btn .arrow { transition: transform var(--dur-base) var(--ease-std); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0.08) 40%,
      rgba(255,255,255,0.04) 70%,
      rgba(255,255,255,0.14) 100%
    );
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(255,255,255,0.12),
    inset 0 0 24px rgba(255,255,255,0.06),
    0 8px 24px rgba(58,46,34,0.18),
    0 1px 2px rgba(58,46,34,0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
  z-index: 1;
}
.btn-primary > * { position: relative; z-index: 2; }
.btn-primary:hover {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.4) 0%,
      rgba(255,255,255,0.14) 40%,
      rgba(255,255,255,0.08) 70%,
      rgba(255,255,255,0.22) 100%
    );
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    inset 0 0 36px rgba(255,255,255,0.16),
    0 12px 32px rgba(58,46,34,0.22),
    0 4px 12px rgba(58,46,34,0.14);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 2px rgba(58,46,34,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 4px 12px rgba(58,46,34,0.18);
}

/* On dark backgrounds, glass needs lighter text */
.bg-dark .btn-primary,
.cta-section .btn-primary,
.site-footer .btn-primary,
.hero .btn-primary {
  color: var(--cream);
  border-color: rgba(255,255,255,0.35);
}
.bg-dark .btn-primary:hover,
.cta-section .btn-primary:hover,
.site-footer .btn-primary:hover,
.hero .btn-primary:hover {
  border-color: rgba(255,255,255,0.55);
}

.btn-dark {
  background: var(--ink);
  color: var(--cream);
}
.btn-dark:hover { background: var(--tm-charcoal-brown); }

/* Transparent glass button — adapts to dark backgrounds */
.btn-glass-dark {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(250, 248, 245, 0.55);
  box-shadow: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.btn-glass-dark:hover {
  background: rgba(250, 248, 245, 0.1);
  border-color: rgba(250, 248, 245, 0.85);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.btn-sm { padding: 10px 18px; font-size: 11px; }
.btn-lg { padding: 16px 32px; font-size: 14px; }

/* .btn is nowrap so a two-word label never splits mid-phrase on a wide screen.
   On a phone that guarantee turns into an overflow: .btn-lg carries 64px of
   horizontal padding and uppercase .08em tracking, so a long localized label
   ("Demander une solution sur mesure" on /fr/partners, "Solicitar una solución
   a medida" on /es/partners) measured 393px and 361px against a 375px viewport
   and pushed the whole page sideways. German and English fit, which is why it
   survived this long.
   Below 520px the label is allowed to wrap and the button is capped at the
   width it actually has. Wrapping a button label is a cosmetic compromise;
   a page that scrolls sideways is not. */
@media (max-width: 520px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  .btn-lg { padding: 14px 20px; letter-spacing: 0.05em; }
}

/* ------------- Glass UI Card (used on photo backgrounds) ------------- */
.glass {
  background: rgba(58, 46, 34, 0.32);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(250, 248, 245, 0.14);
  border-radius: var(--r-3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(250,248,245,0.08);
}
.glass-light {
  background: rgba(250, 248, 245, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(250, 248, 245, 0.6);
  border-radius: var(--r-3);
  box-shadow: 0 8px 32px rgba(58,46,34,0.12), inset 0 1px 0 rgba(255,255,255,0.4);
}
.glass-amber {
  background: rgba(193, 125, 60, 0.22);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(193, 125, 60, 0.28);
  border-radius: var(--r-3);
}

/* ------------- Plain card (cream paper) ------------- */
.card {
  background: var(--tm-card-cream);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-std);
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* ------------- Header ------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: background var(--dur-base) var(--ease-std);
}
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 3vw, 40px);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    background var(--dur-base) var(--ease-std),
    backdrop-filter var(--dur-base) var(--ease-std),
    border-bottom-color var(--dur-base) var(--ease-std);
  /* Own compositing layer: backdrop-filter sampling a playing <video>
     scrolling underneath it repaints every frame in Chrome/Safari unless the
     blurred element is promoted to its own GPU layer up front — without this
     the bar visibly flickers/strobes while the Lokales-section rooftop clip
     scrolls past behind it. */
  transform: translateZ(0);
  will-change: backdrop-filter;
}
.site-header.scrolled .header-inner {
  background: rgba(250, 248, 245, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(58, 46, 34, 0.08);
  box-shadow: 0 4px 24px rgba(58, 46, 34, 0.06);
}
.site-header.scrolled.on-dark .header-inner {
  background: rgba(35, 27, 18, 0.45);
  border-bottom-color: rgba(250, 248, 245, 0.06);
}
.site-header.on-dark .logo { color: var(--cream); }
.site-header.on-dark .logo img { filter: invert(1) brightness(1.4); }
.site-header.on-dark .nav a,
.site-header.on-dark .nav button { color: rgba(250, 248, 245, 0.75); }
.site-header.on-dark .nav a:hover,
.site-header.on-dark .nav button:hover { color: var(--cream); }
.site-header.on-dark .menu-toggle { color: var(--cream); }
.site-header.on-dark .lang {
  color: var(--cream);
  border-color: rgba(250, 248, 245, 0.55);
}
.site-header.on-dark .lang:hover {
  background: rgba(250, 248, 245, 0.1);
  border-color: rgba(250, 248, 245, 0.8);
}
.site-header .btn-primary {
  background: transparent;
  border: 1px solid rgba(58, 46, 34, 0.4);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.site-header .btn-primary::before,
.site-header .btn-primary::after { display: none; }
.site-header .btn-primary:hover {
  background: rgba(58, 46, 34, 0.06);
  border-color: rgba(58, 46, 34, 0.6);
  transform: none;
  box-shadow: none;
}
.site-header.on-dark .btn-primary {
  color: var(--cream);
  border-color: rgba(250, 248, 245, 0.55);
  background: transparent;
}
.site-header.on-dark .btn-primary:hover {
  background: rgba(250, 248, 245, 0.1);
  border-color: rgba(250, 248, 245, 0.8);
}

/* Header "Code einlösen" link — same style as "Zugang anfragen" pill */
.site-header .header-redeem {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: transparent;
  border: 1px solid rgba(58, 46, 34, 0.4);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.site-header .header-redeem:hover {
  background: rgba(58, 46, 34, 0.06);
  border-color: rgba(58, 46, 34, 0.6);
  transform: none;
  box-shadow: none;
}
.site-header.on-dark .header-redeem {
  color: var(--cream);
  border-color: rgba(250, 248, 245, 0.55);
  background: transparent;
}
.site-header.on-dark .header-redeem:hover {
  background: rgba(250, 248, 245, 0.1);
  border-color: rgba(250, 248, 245, 0.8);
}

/* Header "Login" — text-link aesthetic, sits to the left of the pill buttons */
.site-header .header-login {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font: var(--fw-book) 13px/1 var(--font-sans);
  letter-spacing: 0.01em;
  color: rgba(58, 46, 34, 0.65);
  cursor: pointer;
  transition: color var(--dur-fast);
  text-decoration: none;
  white-space: nowrap;
}
.site-header .header-login:hover { color: var(--ink); }
.site-header.on-dark .header-login { color: rgba(250, 248, 245, 0.75); }
.site-header.on-dark .header-login:hover { color: var(--cream); }

/* "Back to chat" CTA — shown when user is signed in. Stronger visual treatment
   so the path back into the app is the obvious choice. */
.site-header .header-login.header-login--chat {
  padding: 9px 16px;
  border: 1.5px solid #C17D3C;
  border-radius: 9999px;
  background: transparent;
  color: #7A4A1F;
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.site-header .header-login.header-login--chat:hover {
  background: rgba(193, 125, 60, 0.08);
  border-color: #A8651F;
  color: #5A3712;
  transform: translateY(-1px);
}
.site-header.on-dark .header-login.header-login--chat {
  background: transparent;
  border-color: rgba(193, 125, 60, 0.85);
  color: #F5E2C8;
}
.site-header.on-dark .header-login.header-login--chat:hover {
  background: rgba(193, 125, 60, 0.12);
  border-color: #E0A268;
  color: #FFF1D8;
}

.site-header .logo {
  display: flex; align-items: center; gap: 10px;
  font: var(--fw-book) 17px/1 var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  /* The wordmark is not negotiable space. As a flex item it defaults to
     flex-shrink:1 with min-width:auto, so a nav that needs more room takes it
     out of the brand: on /fr the logo measured 0px wide at 1280px on
     2026-08-09 — the header started with the first nav link and carried no
     brand at all. Nothing about that is visible in the markup. */
  flex: 0 0 auto;
  white-space: nowrap;
}
.site-header .logo img { height: 22px; }
.site-header .nav {
  display: flex; align-items: center; gap: clamp(10px, 1.8vw, 26px);
}
.site-header .nav a,
.site-header .nav button {
  font-size: 15px;
  color: var(--ink-75);
  letter-spacing: -0.005em;
  transition: color var(--dur-fast);
  position: relative;
  background: none;
  border: 0;
  padding: 0;
}
.site-header .nav a:hover,
.site-header .nav button:hover { color: var(--ink); }
.site-header .nav a::after,
.site-header .nav button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-std);
}
.site-header .nav a:hover::after,
.site-header .nav button:hover::after { transform: scaleX(1); }

/* Quiz nav CTA — amber outline pill, one step louder than the plain text
   links (no underline sweep, own border/fill) but quieter than the solid
   .btn-primary "get started" button so it never competes with it.

   Ported here from public/landing/landing.css on 2026-08-08: beta added this
   rule to landing.css, which this branch had already reduced to an @import
   stub. Nothing requests landing.css any more, so the rule had to move into
   the bundle or the pill in LandingHeaderHTML.tsx would render unstyled. */
.site-header .nav .nav-quiz-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--accent);
  padding: 7px 16px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-5);
  background: transparent;
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.site-header .nav .nav-quiz-pill::after { display: none; }
.site-header .nav .nav-quiz-pill:hover {
  background: var(--accent-15);
  border-color: var(--accent);
  color: var(--accent);
}
.nav-quiz-pill-emoji { font-size: 12px; line-height: 1; }
.site-header.on-dark .nav .nav-quiz-pill {
  color: #F5E2C8;
  border-color: rgba(193, 125, 60, 0.85);
}
.site-header.on-dark .nav .nav-quiz-pill:hover {
  background: rgba(193, 125, 60, 0.12);
  border-color: #E0A268;
  color: #FFF1D8;
}

.site-header .right { display: flex; align-items: center; gap: clamp(6px, 0.8vw, 12px); }
.site-header .lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink);
  padding: 8px 12px;
  border-radius: var(--r-5);
  background: transparent;
  border: 1px solid rgba(58, 46, 34, 0.4);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.site-header .lang:hover {
  background: rgba(58, 46, 34, 0.06);
  border-color: rgba(58, 46, 34, 0.6);
}

.site-header .menu-toggle { display: none; }

/* ------------- Hero ------------- */
.hero {
  position: relative;
  /* 100vh fallback for older browsers; 100dvh tracks the visible viewport
     so the hero always fills the screen even while the mobile URL bar
     animates in/out. */
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  background-color: #2a201a;
}
.hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(58,46,34,0.55) 0%, rgba(58,46,34,0.15) 45%, rgba(58,46,34,0) 70%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 32px;
  max-width: 1240px;
  margin: 0 auto;
}
.hero-content { max-width: 620px; color: var(--cream); }
.hero h1 {
  font: var(--fw-book) clamp(48px, 7vw, 96px)/0.98 var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--cream);
  margin: 0 0 24px;
}
.hero-lead {
  font: var(--fw-book) clamp(15px, 1.3vw, 18px)/1.55 var(--font-sans);
  color: rgba(250,248,245,0.88);
  letter-spacing: -0.005em;
  margin: 0 0 36px;
  max-width: 460px;
}
.hero-cta-row {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.hero-cta-row .meta {
  font-size: 12px; color: rgba(250,248,245,0.72);
  letter-spacing: -0.005em;
}

/* Hero variant B — dark + accent */
.hero[data-variant="b"] .hero-img::after {
  background: linear-gradient(180deg, rgba(58,46,34,0.45) 0%, rgba(58,46,34,0.85) 100%);
}
.hero[data-variant="b"] .hero-inner {
  align-items: flex-end;
  padding-bottom: 96px;
}
.hero[data-variant="b"] .hero-content { max-width: 880px; }
.hero[data-variant="b"] h1 { font-size: clamp(56px, 9vw, 128px); line-height: 0.95; }

/* Hero variant C — split, image right */
.hero[data-variant="c"] {
  background: var(--bg);
}
.hero[data-variant="c"] .hero-img {
  left: 50%;
  border-radius: var(--r-4) 0 0 var(--r-4);
  overflow: hidden;
  margin: 24px 0 24px 0;
}
.hero[data-variant="c"] .hero-img::after { background: none; }
.hero[data-variant="c"] .hero-content { color: var(--ink); max-width: 540px; }
.hero[data-variant="c"] h1 { color: var(--ink); }
.hero[data-variant="c"] .hero-lead { color: var(--ink-70); }
.hero[data-variant="c"] .hero-cta-row .meta { color: var(--ink-60); }

/* ------------- Hero scroll-down indicator (redesign hero, rl-hero) ------------- */
@keyframes rl-scrolldown-dot {
  0%   { transform: translateX(-50%) translateY(0); opacity: 1; }
  70%  { opacity: 0; }
  100% { transform: translateX(-50%) translateY(13px); opacity: 0; }
}
.rl-scrolldown {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vh, 36px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--dur-fast);
}
.rl-scrolldown:hover { opacity: 1; }
.rl-scrolldown .rl-scrolldown-mouse {
  width: 24px;
  height: 38px;
  border: 1.5px solid rgba(250, 248, 245, 0.7);
  border-radius: 14px;
  position: relative;
}
.rl-scrolldown .rl-scrolldown-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.9);
  transform: translateX(-50%);
  animation: rl-scrolldown-dot 1.8s ease-in-out infinite;
}

/* ------------- Hero entry animations ------------- */
@keyframes hero-img-in {
  0%   { opacity: 0; transform: translate3d(0, var(--hero-img-y, 0px), 0) scale(1.08); }
  100% { opacity: 1; transform: translate3d(0, var(--hero-img-y, 0px), 0) scale(1.02); }
}
.hero-img {
  opacity: 0;
  transform: translate3d(0, var(--hero-img-y, 0px), 0) scale(1.08);
  will-change: transform, opacity;
  animation: hero-img-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes hero-word-in {
  0%   { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes hero-fade-up {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero-h1-anim { display: block; }
.hero-h1-anim .hero-word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: hero-word-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-fade-in {
  opacity: 0;
  will-change: transform, opacity;
  animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero-h1-anim .hero-word,
  .hero-fade-in { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-img { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ------------- Two-column section pattern ------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: stretch;
}
.split.split-text-left .text { order: 1; }
.split.split-text-left .media { order: 2; }
.split-image {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--r-3);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-2);
}

/* ------------- Section heading block ------------- */
.heading-block { max-width: 720px; }
.heading-block .tm-h2,
.heading-block .tm-h3 { margin: 16px 0 20px; }
.heading-block .tm-h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1.04; }
.heading-block .tm-h3 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; }
.heading-block .tm-lead { margin: 0; max-width: 540px; }

/* ------------- Before / After (Shift section) ------------- */
.shift-section { padding-top: clamp(56px, 6vw, 80px); padding-bottom: clamp(56px, 6vw, 80px); }
.shift-header {
  max-width: 720px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
}
.shift-eyebrow {
  color: rgba(250,248,245,0.5);
  display: inline-block;
  margin-bottom: 14px;
}
.shift-title {
  font: var(--fw-book) clamp(24px, 2.8vw, 36px)/1.15 var(--font-display);
  letter-spacing: var(--ls-head);
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.shift-title span { display: inline; }
.shift-title-amber { margin-left: 0.4em; }
.shift-title-amber {
  color: var(--tm-amber-light);
  font-style: italic;
}

.shift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
  align-items: stretch;
}
.shift-grid::before {
  content: '';
  position: absolute;
  left: 50%; top: 4%; bottom: 4%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(250,248,245,0.18) 18%, rgba(193,125,60,0.45) 50%, rgba(250,248,245,0.18) 82%, transparent);
}
.shift-grid::after { display: none; }

.shift-col {
  padding: clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 40px);
  display: flex;
  flex-direction: column;
}
.shift-col-after {
  background: transparent;
}

.shift-marker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 2vw, 22px);
}
.shift-num {
  font: var(--fw-book) clamp(24px, 2.8vw, 38px)/1 var(--font-display);
  color: rgba(250,248,245,0.16);
  letter-spacing: -0.02em;
}
.shift-num-amber { color: rgba(193,125,60,0.55); }

.shift-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-5);
  font: var(--fw-book) 10px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.shift-badge.before {
  background: transparent;
  color: rgba(250,248,245,0.6);
  border: 1px solid rgba(250,248,245,0.25);
}
.shift-badge.after {
  background: transparent;
  color: var(--tm-amber-light);
  border: 1px solid rgba(193,125,60,0.4);
}

.shift-col h3 {
  font: var(--fw-book) clamp(20px, 2vw, 28px)/1.2 var(--font-display);
  letter-spacing: var(--ls-head);
  margin: 0 0 clamp(14px, 2vw, 22px);
  color: var(--cream);
  text-wrap: balance;
}
.shift-col h3.bicolor .l2 {
  color: var(--tm-amber-light);
  font-style: italic;
}

.shift-list {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(8px, 2vw, 16px);
  display: flex;
  flex-direction: column;
}
.shift-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: clamp(13px, 0.9vw, 14.5px);
  line-height: 1.5;
  color: rgba(250,248,245,0.7);
  border-top: 1px solid rgba(250,248,245,0.05);
  max-width: 420px;
}
.shift-list li:last-child { border-bottom: 1px solid rgba(250,248,245,0.06); }
.shift-bullet {
  color: rgba(250,248,245,0.35);
  font-size: 18px;
  line-height: 1.5;
  flex-shrink: 0;
  width: 18px;
}
.shift-bullet-amber { color: var(--tm-amber-light); }

/* ------------- Shift entry animation sequence ------------- */
.shift-anim {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shift-anim-left  { transform: translateX(-32px); }
.shift-anim-right { transform: translateX(32px); }

.shift-play .shift-anim-left  { opacity: 1; transform: translateX(0); transition-delay: 0ms; }
.shift-play .shift-anim-right { opacity: 1; transform: translateX(0); transition-delay: 700ms; }

@media (prefers-reduced-motion: reduce) {
  .shift-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.identity-match-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--r-5);
  background: rgba(250,248,245,0.025);
  border: 1px solid rgba(250,248,245,0.06);
  margin-top: 24px;
}
.identity-match-card .imc-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.identity-match-card .imc-eyebrow {
  font: var(--fw-book) 9px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--tm-amber-light);
  display: block; margin-bottom: 3px;
}
.identity-match-card .imc-text {
  font-size: 13px; color: var(--cream);
}

/* ------------- Identity Card carousel ------------- */
.idcard-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  margin-top: 32px;
  overflow: visible;
  gap: 12px;
}
/* Arrows participate in flex flow — no absolute positioning, never clipped */
.idcard-carousel .car-arrow {
  position: static;
  transform: none;
  flex-shrink: 0;
}
.idcard-stack {
  position: relative;
  width: min(820px, 100%);
  height: 300px;
  overflow: visible;
}
/* No CSS keyframe animation here — framer-motion in IdentityCardCarousel
   controls the active-card crossfade smoothly. Peek cards stay still. */
.idcard {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #2a221b 0%, #1c1612 100%);
  border: 1px solid rgba(193,125,60,0.12);
  border-radius: var(--r-3);
  padding: 24px 30px;
  display: grid;
  grid-template-columns: 1fr 1px 220px;
  gap: 28px;
  align-items: center;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: all var(--dur-slow) var(--ease-std);
}
.idcard::after {
  content: '';
  background: linear-gradient(180deg, transparent, rgba(193,125,60,0.18) 30%, rgba(193,125,60,0.18) 70%, transparent);
  width: 1px;
  height: 100%;
  align-self: stretch;
  grid-column: 2;
  grid-row: 1;
}
.idcard > div:first-child { grid-column: 1; grid-row: 1; }
.idcard > .ic-stat { grid-column: 3; grid-row: 1; }
.idcard.peek-l, .idcard.peek-r {
  width: 84%;
  height: 88%;
  top: 6%;
  background: var(--tm-charcoal-brown);
  opacity: 0.5;
  z-index: 1;
}
.idcard.peek-l { left: -14%; }
.idcard.peek-r { right: -14%; }
.idcard .ic-eyebrow {
  font: var(--fw-book) 9.5px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tm-amber-light);
  margin-bottom: 10px;
  display: inline-block;
  padding: 4px 10px;
  background: rgba(193,125,60,0.1);
  border: 1px solid rgba(193,125,60,0.22);
  border-radius: 999px;
}
.idcard h3 {
  font: var(--fw-book) clamp(24px, 2.2vw, 30px)/1.05 var(--font-display);
  letter-spacing: var(--ls-head);
  color: var(--cream);
  margin: 0 0 14px;
  text-wrap: balance;
}
.idcard .ic-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 7px 16px;
  font-size: 13px;
}
.idcard .ic-grid dt {
  font: var(--fw-book) 9px/1.4 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,248,245,0.4);
  align-self: center;
}
.idcard .ic-grid dd {
  margin: 0;
  color: rgba(250,248,245,0.92);
  font: var(--fw-book) 12.5px/1.35 var(--font-sans);
  align-self: center;
  overflow-wrap: break-word;
  min-width: 0;
}
.idcard .ic-grid dd em {
  color: var(--tm-amber-light);
  font-style: italic;
}
.idcard .ic-stat {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.idcard .ic-percent {
  font: var(--fw-book) 52px/1 var(--font-display);
  color: var(--tm-amber-light);
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 4px 0 2px;
}
.idcard .ic-percent span { font-size: 18px; color: rgba(193,125,60,0.55); margin-left: 2px; font-style: italic; }
.idcard .ic-percent-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(250,248,245,0.5);
  margin: 0;
}
.idcard .ic-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; width: 100%; padding-top: 10px; border-top: 1px solid rgba(250,248,245,0.06); }
.idcard .ic-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: rgba(250,248,245,0.7);
  letter-spacing: 0.02em;
}
.idcard .ic-bar span:last-child {
  font-family: var(--font-mono);
  color: var(--tm-amber-light);
  font-size: 10.5px;
}

.car-arrow {
  position: absolute;
  top: 50%;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(58,46,34,0.06);
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast);
  z-index: 5;
  transform: translateY(-50%);
  color: var(--ink-70);
}
.car-arrow.left { left: -12px; }
.car-arrow.right { right: -12px; }
.car-arrow:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.car-dots {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 24px;
}
.car-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(193,125,60,0.22);
  transition: width 0.35s var(--ease-std), border-radius 0.35s var(--ease-std);
  border: 0; padding: 0;
  position: relative; overflow: hidden; cursor: pointer;
}
.car-dot.active {
  width: 24px; border-radius: 999px;
  background: rgba(193,125,60,0.22);
}
/* Fill that sweeps left→right over the autoplay duration */
.car-dot-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  animation: dot-progress 6s linear forwards;
}
@keyframes dot-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ------------- Steps (How it works) ------------- */
.steps { margin-top: 56px; }
.step-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--border-1);
  align-items: start;
}
.step-row:last-child { border-bottom: 1px solid var(--border-1); }
.step-num {
  font: var(--fw-thin) clamp(28px, 3.8vw, 56px)/1 var(--font-display);
  color: var(--ink-45);
  letter-spacing: -0.02em;
  min-width: 0;
}
.step-row h4 {
  font: var(--fw-book) 22px/1.2 var(--font-display);
  letter-spacing: var(--ls-head);
  color: var(--ink);
  margin: 0 0 12px;
}
.step-row p { margin: 0; color: var(--ink-70); font-size: 15px; line-height: 1.55; max-width: 380px; }
.step-aside { color: var(--ink-60); font-size: 15px; line-height: 1.55; max-width: 280px; }

/* ------------- Why TakeMeTo cards ------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.why-card {
  background: var(--tm-card-cream);
  border-radius: var(--r-3);
  padding: 32px 28px;
  box-shadow: var(--shadow-1);
  transition: all var(--dur-base) var(--ease-std);
  position: relative;
  min-height: 240px;
  display: flex; flex-direction: column;
}
.why-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.why-card .why-eyebrow {
  font: var(--fw-book) 10px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.why-card .why-num {
  position: absolute; top: 24px; right: 24px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border: 1px solid var(--border-1);
  font: var(--fw-book) 11px/1 var(--font-sans);
  color: var(--ink-60);
  letter-spacing: 0;
}
.why-card h4 {
  font: var(--fw-book) 22px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 28px 0 16px;
}
.why-card p {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-70); margin: 0;
}
/* Infinite marquee */
.why-marquee-wrap {
  overflow: hidden;
  width: 100%;
  margin-top: 40px;
  /* soft fade on the edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.why-marquee {
  display: flex;
  /* each card owns its gap via margin-right so -50% translate is exactly one set */
  animation: why-scroll 35s linear infinite;
}
.why-marquee:hover { animation-play-state: paused; }
.why-marquee .why-card {
  flex-shrink: 0;
  width: 360px;
  margin-right: 20px;
  min-height: 280px;
}
@keyframes why-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* legacy controls — no longer rendered but kept for safety */
.why-controls {
  display: flex; align-items: center; gap: 14px;
  justify-content: flex-end;
  margin-top: 20px;
}
.why-controls .car-arrow { position: static; transform: none; }
.why-controls .pgnr {
  font: var(--fw-book) 12px/1 var(--font-mono);
  color: var(--ink-60); letter-spacing: 0.04em;
}

/* ------------- Sample Itinerary cards ------------- */
.itinerary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.itin-card {
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--tm-card-cream);
  box-shadow: var(--shadow-1);
  transition: all var(--dur-base) var(--ease-std);
}
.itin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.itin-img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  position: relative;
}
.itin-match {
  position: absolute; top: 14px; right: 14px;
  padding: 4px 10px;
  border-radius: var(--r-5);
  font: var(--fw-book) 10px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(58,46,34,0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(250,248,245,0.18);
}
.itin-tags {
  position: absolute; bottom: 14px; left: 14px;
  display: flex; gap: 6px;
}
.itin-tag {
  padding: 4px 10px;
  border-radius: var(--r-5);
  font: var(--fw-book) 10px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  background: rgba(58,46,34,0.55);
  backdrop-filter: blur(8px);
  color: var(--cream);
  border: 1px solid rgba(250,248,245,0.16);
}
.itin-tag.amber { background: rgba(193,125,60,0.85); color: var(--cream); }
.itin-body { padding: 20px 22px 24px; }
.itin-title {
  font: var(--fw-book) 20px/1.2 var(--font-display);
  letter-spacing: var(--ls-head);
  color: var(--ink); margin: 0 0 4px;
}
.itin-loc {
  font: var(--fw-book) 13px/1.3 var(--font-sans);
  font-style: italic;
  color: var(--accent);
  margin: 0 0 14px;
}
.itin-desc {
  font-size: 13px; line-height: 1.55; color: var(--ink-70); margin: 0;
}

.dna-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-radius: var(--r-5);
  background: var(--accent-15);
  border: 1px solid var(--accent-border);
  color: var(--ink-80);
  font-size: 12px;
  margin-top: 24px;
}
.dna-chip .dna-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.itin-summary {
  text-align: center;
  font: var(--fw-book) 16px/1.5 var(--font-sans);
  font-style: italic;
  color: var(--ink-70);
  margin-top: 56px;
  letter-spacing: -0.005em;
}

.share-row {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  margin-top: 36px;
  font-size: 12px; color: var(--ink-60);
}
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-5);
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--ink-70);
  font-size: 12px;
  transition: all var(--dur-fast);
}
.share-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-raised); }

/* ------------- Platform Vision (full-bleed photo) ------------- */
.vision {
  position: relative;
  padding: clamp(64px, 9vw, 128px) 0;
  background-size: cover;
  background-position: center;
  color: var(--cream);
  overflow: hidden;
}
.vision::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(58,46,34,0.7) 0%, rgba(58,46,34,0.4) 100%);
}
.vision .container { position: relative; z-index: 2; }
.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.vision h2 { color: var(--cream); margin: 16px 0 24px; }
.vision .tm-lead { color: rgba(250,248,245,0.85); margin: 0 0 28px; max-width: 420px; }
.vision .pill-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-5);
  background: rgba(250,248,245,0.1);
  border: 1px solid rgba(250,248,245,0.15);
  font: var(--fw-book) 11px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(250,248,245,0.8);
  margin-top: 20px;
}
.vision .pill-tag .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tm-amber-light); }

.vision-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.vision-card {
  padding: 24px 24px 24px;
  position: relative;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.1);
}
.vision-card .vc-num {
  font: var(--fw-thin) 16px/1 var(--font-mono);
  color: rgba(250,248,245,0.4);
  margin-bottom: 16px;
  display: block;
}
.vision-card h4 {
  font: var(--fw-book) 17px/1.2 var(--font-sans);
  color: var(--cream);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.vision-card p {
  font-size: 13px; line-height: 1.5;
  color: rgba(250,248,245,0.7);
  margin: 0;
}

/* ------------- Old vs New (A new category) ------------- */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 56px;
  position: relative;
}
.compare-col {
  background: var(--tm-card-cream);
  border-radius: var(--r-3);
  padding: 32px 32px 36px;
  box-shadow: var(--shadow-1);
}
.compare-col.new { background: var(--bg-raised); }
.compare-eyebrow {
  font: var(--fw-book) 10px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 8px;
}
.compare-col.new .compare-eyebrow { color: var(--accent); }
.compare-col h4 {
  font: var(--fw-book) 22px/1.2 var(--font-display);
  letter-spacing: var(--ls-head);
  color: var(--ink);
  margin: 0 0 24px;
}
.compare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.compare-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.5; color: var(--ink-75);
}
.compare-list li .compare-icn {
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-10);
  margin-top: 2px;
}
.compare-list.new li .compare-icn { background: var(--accent-15); }
.compare-list .compare-icn svg { width: 10px; height: 10px; }
.compare-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 56px;
  z-index: 2;
}
.compare-arrow .ca-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  box-shadow: var(--shadow-2);
}

/* ------------- Founding Circle (testimonials over photo) ------------- */
.founding {
  position: relative;
  padding: clamp(80px, 10vw, 160px) 0 clamp(60px, 8vw, 120px);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.founding::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(40,30,22,0.45) 0%, rgba(40,30,22,0.55) 60%, rgba(40,30,22,0.7) 100%);
}
.founding .container { position: relative; z-index: 2; text-align: center; }
.founding .tm-eyebrow { color: rgba(250,248,245,0.7) !important; }
.founding .tm-h2 { color: var(--cream); }
.founding .tm-lead { margin: 16px auto 56px; color: rgba(250,248,245,0.85); }
.founding .testimonial p { color: var(--cream); }
.founding .testimonial .author { color: rgba(250,248,245,0.7); }
.founding .testimonial .quote-mark { color: rgba(250,248,245,0.4); }
.founding .testimonial.glass-light {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(250,248,245,0.2);
  background: rgba(250,248,245,0.13);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.testimonials {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  text-align: left;
}
.testimonial {
  padding: 28px 28px 24px;
}
.testimonial .quote-mark {
  font: var(--fw-book) 28px/1 var(--font-display);
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}
.testimonial p {
  font-size: 14px; line-height: 1.55;
  color: var(--ink); margin: 0 0 20px;
  letter-spacing: -0.005em;
}
.testimonial .author {
  font: var(--fw-book) 10px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-60);
}

/* ------------- CTA section (Join the private beta) ------------- */
.cta-section {
  position: relative;
  background: var(--bg-dark);
  color: var(--cream);
  padding: clamp(96px, 12vw, 160px) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
  isolation: isolate;
}
.cta-section .container { position: relative; z-index: 2; }
.cta-section .tm-h2 { color: var(--cream); }

.cta-glow {
  position: absolute;
  width: 80vw; max-width: 1100px;
  aspect-ratio: 1;
  top: -10%; right: -15%;
  background: radial-gradient(circle, rgba(193,125,60,0.18) 0%, rgba(193,125,60,0.05) 35%, transparent 65%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 1;
}


.cta-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.cta-copy { padding-top: 0; margin-top: -10px; }

/* Left column — copy + steps */
.cta-copy { max-width: 560px; }
.cta-title {
  font: var(--fw-book) clamp(40px, 5.4vw, 68px)/1.05 var(--font-display);
  letter-spacing: var(--ls-display);
  margin: 24px 0 0;
  color: var(--cream);
  text-wrap: balance;
}
.cta-title em {
  font-style: italic;
  color: var(--tm-amber-light);
  font-weight: var(--fw-book);
}
.cta-lead {
  margin: 22px 0 0;
  color: rgba(250,248,245,0.7);
  font: var(--fw-book) 16px/1.55 var(--font-sans);
  max-width: 480px;
}

.cta-progress {
  margin-top: 36px;
  padding: 18px 22px;
  border: 1px solid rgba(250,248,245,0.1);
  border-radius: 18px;
  background: rgba(250,248,245,0.025);
  max-width: 420px;
}
.cta-progress-row {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 10px;
}
.cta-progress-num {
  font: var(--fw-book) 28px/1 var(--font-display);
  color: var(--cream);
  letter-spacing: -0.01em;
}
.cta-progress-num span {
  font-size: 16px;
  color: rgba(250,248,245,0.4);
  margin-left: 2px;
}
.cta-progress-label {
  font: var(--fw-book) 12px/1 var(--font-sans);
  color: rgba(250,248,245,0.55);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.cta-progress-bar {
  height: 4px;
  background: rgba(250,248,245,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.cta-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tm-amber-light), var(--accent));
  border-radius: 999px;
}

.cta-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cta-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid rgba(250,248,245,0.08);
}
.cta-step:last-child { border-bottom: 1px solid rgba(250,248,245,0.08); }
.cta-step-num {
  font: var(--fw-book) 12px/1 var(--font-mono);
  color: var(--tm-amber-light);
  letter-spacing: var(--ls-eyebrow);
  padding-top: 4px;
}
.cta-step h5 {
  font: var(--fw-book) 17px/1.3 var(--font-sans);
  color: var(--cream);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.cta-step p {
  font: var(--fw-book) 13px/1.55 var(--font-sans);
  color: rgba(250,248,245,0.6);
  margin: 0;
}

/* Right column — form card */
.cta-form-wrap { position: relative; }
.cta-form-card {
  position: relative;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cta-form-card::before { display: none; }
.cta-form-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(250,248,245,0.08);
}
.cta-form-eyebrow {
  font: var(--fw-book) 12px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--cream);
}
.cta-form-meta {
  font: var(--fw-book) 11px/1 var(--font-mono);
  color: rgba(250,248,245,0.45);
  letter-spacing: 0.4px;
}

.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
  max-width: none;
}
.cta-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cta-field.full { grid-column: 1 / -1; }
.cta-field span {
  font: var(--fw-book) 11px/1 var(--font-sans);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(250,248,245,0.55);
}
.cta-form .inp {
  background: rgba(250,248,245,0.04);
  border: 1px solid rgba(250,248,245,0.1);
  color: var(--cream);
  font: var(--fw-book) 16px/1.2 var(--font-sans);
  padding: 13px 16px;
  border-radius: 12px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  width: 100%;
  appearance: none;
}
.cta-form .inp::placeholder { color: rgba(250,248,245,0.35); }
.cta-form .inp:focus {
  outline: none;
  border-color: rgba(193,125,60,0.55);
  background: rgba(250,248,245,0.06);
}
.cta-form .inp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23faf8f5' stroke-opacity='0.55' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.cta-form .inp-select option {
  background: #1f1812;
  color: var(--cream);
}

.cta-form-submit {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 8px;
  padding: 16px 24px;
  justify-content: center;
}

.cta-redeem {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  text-align: center;
  font: var(--fw-book) 13px/1.5 var(--font-sans);
  color: rgba(250,248,245,0.65);
}
.cta-redeem-link {
  color: var(--tm-amber-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-std);
}
.cta-redeem-link:hover {
  border-bottom-color: var(--tm-amber-light);
}

.cta-form-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(250,248,245,0.08);
  font: var(--fw-book) 11px/1 var(--font-sans);
  color: rgba(250,248,245,0.55);
  letter-spacing: 0.3px;
}
.cta-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cta-trust-item svg { color: rgba(250,248,245,0.5); }
.cta-trust-dot { color: rgba(250,248,245,0.25); }

/* Hide the old mini-card grid + form-note styles harmlessly */
.cta-mini-cards { display: none !important; }
.cta-form-note { display: none !important; }

@media (max-width: 880px) {
  .cta-layout { grid-template-columns: 1fr; gap: 56px; }
  .cta-form { grid-template-columns: 1fr; }
}
.cta-form-note {
  text-align: center;
  font-size: 12px; color: rgba(250,248,245,0.5);
  margin-top: 14px;
}

/* ------------- Footer ------------- */
.site-footer {
  background: var(--bg-dark);
  color: rgba(250,248,245,0.65);
  padding: 80px 0 32px;
  border-top: 1px solid rgba(250,248,245,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 64px;
}
.footer-grid .footer-brand .logo {
  display: flex; align-items: center; gap: 10px;
  font: var(--fw-book) 17px/1 var(--font-display);
  color: var(--cream);
  margin-bottom: 16px;
}
.footer-grid .footer-brand img { height: 22px; }
.footer-grid .footer-brand p {
  font-size: 13px; line-height: 1.55;
  color: rgba(250,248,245,0.55);
  max-width: 260px;
  margin: 0;
}
.footer-grid h6 {
  font: var(--fw-book) 10px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(250,248,245,0.45);
  margin: 0 0 16px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid ul a {
  font-size: 13px; color: rgba(250,248,245,0.7);
  transition: color var(--dur-fast);
}
.footer-grid ul a:hover { color: var(--cream); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(250,248,245,0.06);
  font-size: 12px;
  color: rgba(250,248,245,0.45);
}
.footer-bottom .lang { color: rgba(250,248,245,0.55); display: inline-flex; align-items: center; gap: 6px; }
.footer-bottom .tagline { font-style: italic; color: rgba(250,248,245,0.5); }

/* ------------- Reveal on scroll ------------- */
/* INVERTED DEFAULT (2026-08-03). `.reveal` on its own now hides NOTHING.
 *
 * It used to be `.reveal { opacity: 0 }`, undone only by the `.in` class that
 * the IntersectionObserver in useRevealOnScroll() adds — i.e. after the ~1,96 MB
 * bundle had downloaded, parsed and hydrated. That made the entire scroll-reveal
 * a gate on the JS bundle: measured in a real Chromium with JS ENABLED but the
 * bundle request blocked, `/` showed 989 of 2472 words, /manifesto 90 of 331,
 * /lokale-events 83 of 617. The prerendered text was in the HTML and painted
 * transparent — exactly the window the prerender was built to fill.
 *
 * Two obvious repairs were built and measured against the shipped dist/ before
 * this one, and both are dead:
 *   · a `no-js`/`js` switch (`html.js .reveal { opacity: 0 }`, class set by an
 *     inline <script> at the top of <head>): the script runs during HTML parsing,
 *     so `html.js` is on the element BEFORE the first paint. Measured: 989 / 90
 *     words — bit-identical to the bug. It separates "JS off" from "JS on", but
 *     the broken case is "JS on, bundle not here yet".
 *   · exempting the first viewport: at 1280×800 exactly 0 of 26 `.reveal` blocks
 *     on `/` intersect the first viewport (the hero owns it), so it buys nothing
 *     there; on /manifesto it lifted 90 → 110 of 331. It moves the boundary, it
 *     does not remove it.
 *   · a self-firing `animation-delay` failsafe would still ship the content
 *     hidden and merely put a timer on it — the blank window it leaves IS the
 *     window being fixed.
 *
 * So the hiding is no longer shipped in the HTML at all: the bundle arms it.
 * `.reveal-armed` is added by useRevealOnScroll() (LandingPageHTML.tsx) and ONLY
 * to blocks the observer reports as NOT intersecting — blocks the visitor cannot
 * see. Arming therefore happens off-screen and is never visible; everything the
 * visitor is actually looking at when the bundle boots stays as it is instead of
 * flashing back to opacity 0.
 *
 * `.reveal-armed` deliberately carries NO transition: arming must be instant, or
 * a block armed just above the scroll position would visibly fade OUT over 800 ms.
 * The transition lives on the `.in` end state instead — CSS Transitions start
 * from the after-change style, so adding `.in` still animates opacity 0 → 1 and
 * translateY(24px) → 0 with exactly the old 800 ms/--ease-std curve.
 *
 * Layout is untouched by all of this: opacity and transform never change a box,
 * so the reveal contributes 0 to CLS in either direction. */
.reveal.reveal-armed {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.reveal-armed.in {
  opacity: 1;
  transform: none;
  transition: opacity 800ms var(--ease-std), transform 800ms var(--ease-std);
}
/* Safety net: any code path that adds `.in` without arming first (or a stale
   cached bundle from before this change) still lands on the visible end state.
   0-2-0, same as `.reveal.reveal-armed`, but `.reveal.reveal-armed.in` is 0-3-0
   and wins for an armed element, so this cannot short-circuit the animation. */
.reveal.in {
  opacity: 1;
  transform: none;
}
/* Reduced motion: land on the end state straight away instead of making the
   visitor wait for an entrance they asked not to see.
   useRevealOnScroll() already returns early under this media query, so nothing
   is armed in the first place; this rule covers the visitor who flips the OS
   setting AFTER the page booted (matchMedia is read once) and any block armed
   before that. `transform: none` after `translateY(24px)` changes no box, so
   nothing reflows. Later in source than the two rules above at equal or higher
   specificity, so no !important is needed. */
@media (prefers-reduced-motion: reduce) {
  .reveal.reveal-armed,
  .reveal.reveal-armed.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------- Responsive ------------- */
/* ── Header: progressive responsive collapse ──────────────────────────── */
/* One row has to hold logo + 7 nav links + quiz pill + 2 CTAs + lang switcher,
   in four languages whose labels differ by ~30% in width. Below 1120px the
   drawer takes over (next block); between 1120px and 1536px the chrome has to
   give way instead.
 *
 * This used to be a single step at max-width:1200px. A step leaves a band:
 * everything from 1201px up got the full 15px/26px-gap desktop size, which fit
 * six labels and stopped fitting the moment a seventh ("Produkt") was added on
 * 2026-08-09. Measured against the served dist on that day: DE broke 1201-1300
 * ("So / funktioniert's", "Über / uns", header 73px -> 82px), ES 1241-1341,
 * EN 1201-1211 — and on FR, where the labels are longest, flexbox paid for the
 * overflow out of the logo instead: 0px wide at 1280px, 65px at 1366px.
 * Raising the step to another fixed pixel value only moves that band.
 *
 * So the size is fluid now and derived from ONE number: --hdr-tight, how far
 * the viewport is below 1536px. Every value below is `clamp(floor, top -
 * tight * slope, top)`, and both ends are values that already existed, so
 * nothing jumps at either edge:
 *   · at >=1536px --hdr-tight is 0 and every value is the untouched desktop
 *     one (15px labels, 26px gaps, 40px padding, 12px/8px lang, ...);
 *   · every slope reaches its floor at the same point (~1270px), and the
 *     floors are the old max-width:1200px step's values (12px labels, 24px
 *     padding, 8px/14px button, 6px/10px lang) shaved by the 2-6px that /fr
 *     needs to stop overflowing just above the drawer — gaps 10px instead of
 *     12px, padding 20px, lang 9px. From ~1270px down to the drawer at 1120px
 *     the header therefore looks as it did before this change, a couple of
 *     pixels tighter.
 * In between it interpolates, so no width can fall between steps again — in
 * any language, including ones this repo does not ship yet.
 *
 * 100vw counts the scrollbar and a media query does not; on a fluid ramp that
 * ~15px disagreement is a 15px shift along a continuous curve instead of a
 * step landing in the wrong place.
 *
 * What this does NOT fix: French below 1200px. Measured on the served dist,
 * fully tightened, /fr fits on one line from 1200px up (10px of slack there,
 * 33px at 1440px) and still has to wrap "Comment ça marche" between 1121px and
 * 1199px — seven labels plus the quiz pill plus two CTAs plus the switcher do
 * not fit in that width in French at any readable size. That band wrapped
 * before this branch too (it wrapped up to 1440px), and it now wraps without
 * squeezing the logo or pushing the switcher out of the bar: the row lands at
 * exactly 0px of slack. Closing it needs a copy or IA decision — a shorter
 * French label set, or the drawer taking over earlier on
 * /fr — not another CSS knob. */
@media (min-width: 1121px) {
  .site-header { --hdr-tight: clamp(0px, 1536px - 100vw, 416px); }
  .site-header .header-inner {
    padding: 18px clamp(20px, 40px - var(--hdr-tight) * 0.075, 40px);
  }
  .site-header .nav { gap: clamp(10px, 26px - var(--hdr-tight) * 0.06, 26px); }
  .site-header .nav a,
  .site-header .nav button { font-size: clamp(12px, 15px - var(--hdr-tight) * 0.0112, 15px); }
  /* 0-3-1, same as the base pill rule and later in source, so it wins over the
     0-2-1 label rule above — the pill has to shrink with the row, otherwise it
     is the widest single item left in it. */
  .site-header .nav .nav-quiz-pill {
    font-size: clamp(11px, 13px - var(--hdr-tight) * 0.0075, 13px);
    padding: 7px clamp(8px, 16px - var(--hdr-tight) * 0.03, 16px);
  }
  .site-header .right { gap: clamp(6px, 12px - var(--hdr-tight) * 0.0225, 12px); }
  .site-header .header-login {
    padding: 8px clamp(8px, 14px - var(--hdr-tight) * 0.0225, 14px);
    font-size: clamp(11.5px, 13px - var(--hdr-tight) * 0.0056, 13px);
  }
  .site-header .right .btn-sm {
    padding: clamp(8px, 10px - var(--hdr-tight) * 0.0075, 10px)
             clamp(13px, 18px - var(--hdr-tight) * 0.0187, 18px);
    font-size: 11px;
  }
  .site-header .lang {
    padding: clamp(6px, 8px - var(--hdr-tight) * 0.0075, 8px)
             clamp(9px, 12px - var(--hdr-tight) * 0.0112, 12px);
    font-size: clamp(11px, 12px - var(--hdr-tight) * 0.00375, 12px);
  }
}
@media (max-width: 1120px) {
  .container { padding: 0 24px; }
  .site-header { top: 0; width: 100%; }
  .site-header .nav { display: none; }
  /* Lang switcher + CTA live in the drawer — hide them from the header bar */
  .site-header .lang { display: none !important; }
  .site-header .right .btn-primary { display: none !important; }
  .site-header .header-redeem { display: none !important; }
  .site-header .header-inner { padding: 12px 16px; }
  /* Site-wide — was only overridden on the homepage's own hero styles, so
     every other page (Partners, About, FAQ, …) still showed the bigger
     desktop logo (22px) in the cramped mobile bar. One rule, everywhere
     (user request 2026-07-12). */
  .site-header .logo img { height: 18px; }
  .menu-toggle { display: flex !important; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--cream); border: 0; }
  .hero h1 { font-size: clamp(40px, 11vw, 64px); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.split-text-left .text { order: 2; }
  .split.split-text-left .media { order: 1; }
  .shift-grid { grid-template-columns: 1fr; }
  .shift-grid::before { display: none; }
  .shift-grid::after { display: none; }
  .shift-col { padding: 32px 24px; border-bottom: 1px solid rgba(250,248,245,0.08); }
  .shift-title { font-size: clamp(36px, 9vw, 56px); }
  .why-grid { grid-template-columns: 1fr; }
  .itinerary-cards { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; gap: 20px; }
  .compare-arrow { transform: rotate(90deg); width: auto; padding: 8px 0; }
  .testimonials { grid-template-columns: 1fr; }
  .vision-grid { grid-template-columns: 1fr; }
  .vision-cards { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
  .step-row { grid-template-columns: 44px 1fr; gap: 16px; }
  .step-aside { grid-column: 2; }
  .idcard { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .idcard.peek-l, .idcard.peek-r { display: none; }
  .idcard h3 { font-size: 22px; }
  .idcard-stack { height: 280px; }
  .cta-mini-cards { grid-template-columns: 1fr; }
  .cta-form { grid-template-columns: 1fr; }
  .hero[data-variant="c"] .hero-img { left: 0; margin: 0; border-radius: 0; opacity: 0.25; }
  .hero[data-variant="c"] .hero-content { color: var(--ink); }
}

/* ------------- Rounded card override ------------- */
.why-card,
.itin-card,
.itin-img,
.vision-card,
.testimonial,
.cta-mini {
  border-radius: 40px;
}
.itin-card { overflow: hidden; }

/* ==========================================================================
   Mobile polish — only applies at ≤960px, leaves desktop untouched
   ========================================================================== */
@media (max-width: 960px) {
  /* Tighter section padding on small screens */
  .section, .section-narrow {
    padding-top: clamp(56px, 12vw, 80px);
    padding-bottom: clamp(56px, 12vw, 80px);
  }

  /* All split layouts: media first (visual on top), text below */
  .split { gap: 28px; }
  .split .media { order: 1; }
  .split .text { order: 2; }

  /* Travel DNA — keep 2 columns at 960px, just reduce scale + gap */
  #dna .split {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  #dna .media { order: 1; }
  #dna .text { order: 2; text-align: left; }
  /* Scale down the overscaled DNA visual */
  #dna .media > div {
    transform: translateX(-2%) scale(1.06) !important;
    transform-origin: left center !important;
  }

  /* Hero adjustments */
  .hero { padding-top: 80px; padding-bottom: 60px; }
  .hero-content { padding: 0 4px; }

  /* Headline scaling */
  .tm-h2 { font-size: clamp(30px, 7.5vw, 44px) !important; }
  .cta-title { font-size: clamp(34px, 9vw, 48px); }
  .shift-title { font-size: clamp(30px, 8vw, 44px); line-height: 1.15; }
  .shift-title span { display: block; }
  .shift-title-amber { margin-left: 0; }

  /* Eyebrow chip + buttons stack nicely */
  .eyebrow-chip { font-size: 10px; }

  /* Identity card carousel — single column, full natural height on mobile */
  /* Arrows go back to absolute so the stack can fill 100% of the carousel width */
  .idcard-carousel .car-arrow { position: absolute !important; top: auto !important; bottom: -52px !important; transform: none !important; }
  .idcard-carousel .car-arrow.left { left: calc(50% - 56px) !important; }
  .idcard-carousel .car-arrow.right { right: calc(50% - 56px) !important; }
  .idcard-stack { width: 100% !important; flex: none !important; height: auto !important; min-height: 0 !important; overflow: visible; }
  .idcard-carousel { gap: 0; overflow: hidden; padding-bottom: 64px; }
  .idcard.peek-l, .idcard.peek-r { display: none; }

  /* Inactive cards: completely hidden so they don't interfere */
  .idcard-stack > [aria-hidden="true"] { display: none !important; }

  /* Active card wrapper: static flow, full width */
  .idcard-stack > [aria-hidden="false"] { position: static !important; inset: auto !important; width: 100%; }

  /* Card itself: static position, full width, auto height */
  .idcard {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 20px;
    padding: 28px 22px;
  }
  .idcard h3 { font-size: 20px; }
  /* Stack the children vertically (override explicit grid-column placement) */
  .idcard > div:first-child { grid-column: 1 !important; grid-row: 1 !important; }
  .idcard > .ic-stat { grid-column: 1 !important; grid-row: 2 !important; align-items: flex-start !important; text-align: left !important; }
  .idcard::after { display: none !important; }
  .idcard .ic-bars { padding-top: 12px; margin-top: 0; border-top: 1px solid rgba(250,248,245,0.08); }
  .idcard .ic-percent { font-size: 42px; margin: 0 0 4px; justify-content: flex-start; }
  .idcard .ic-percent-label { letter-spacing: 0.18em; }

  /* Why cards: switch from auto-marquee to touch-swipable carousel */
  .why-marquee-wrap {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
    padding: 8px 0 4px;
  }
  .why-marquee-wrap::-webkit-scrollbar { display: none; }
  .why-marquee {
    animation: none !important;
    padding: 0 24px;
    gap: 16px;
  }
  .why-marquee .why-card {
    scroll-snap-align: center;
    width: calc(100vw - 96px);
    max-width: 320px;
    flex-shrink: 0;
    margin-right: 0 !important;
  }
  /* Hide the duplicated cards (they were only for the desktop seamless loop) */
  .why-marquee .why-card[aria-hidden="true"] { display: none !important; }

  /* Vision cards — stack to single column on mobile (was 2 columns) */
  .vision-grid { grid-template-columns: 1fr; gap: 32px; }
  .vision-cards { grid-template-columns: 1fr; gap: 12px; }

  /* Shift section — better mobile flow */
  .shift-grid { gap: 0; }
  .shift-col { padding: 28px 0; }
  .shift-col-after { border-top: 1px solid rgba(250,248,245,0.08); padding-top: 32px; margin-top: 8px; }
  .identity-match-card { width: 100%; box-sizing: border-box; }

  /* CTA section — stack columns; form below copy */
  .cta-section { padding: 64px 0 80px; }
  .cta-layout { grid-template-columns: 1fr !important; gap: 40px; }
  .cta-copy { margin-top: 0; max-width: 100%; }
  .cta-copy .cta-title { font-size: clamp(34px, 9vw, 48px); }
  .cta-copy .cta-lead { max-width: 100%; }
  .cta-form { grid-template-columns: 1fr; gap: 12px; }
  .cta-form-header { flex-wrap: wrap; gap: 8px; }
  .cta-form-trust { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }

  /* How-it-works steps */
  .step-row { grid-template-columns: 44px 1fr; gap: 14px; padding: 24px 0; }
  .step-aside { grid-column: 2; font-size: 15px; margin-top: 8px; }

  /* Founding circle / itinerary / category sections */
  .itinerary-cards { grid-template-columns: 1fr; gap: 16px; }
  .compare-grid { grid-template-columns: 1fr; gap: 16px; }
  .compare-arrow { transform: rotate(90deg); width: auto; padding: 8px 0; margin: 0 auto; }
  .testimonials { grid-template-columns: 1fr; gap: 16px; }

  /* Why TakeMeTo */
  .why-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Group Trip Paros image — ensure it's readable */
  .split-image { aspect-ratio: 4/3; }
  .glass[style*="bottom: 16px"] { font-size: 10px !important; padding: 8px 14px !important; }

  /* Footer — collapse to two columns then stack brand on top */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-bottom: 40px; }
  .footer-grid .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  /* Share row — wrap & center */
  .share-row { flex-wrap: wrap; justify-content: center; row-gap: 8px; }

  /* Identity card carousel arrows — keep them touchable */
  .car-arrow { width: 40px; height: 40px; }
}

@media (max-width: 768px) {
  /* Medium-small: DNA visual stops scaling, stays 2 columns */
  #dna .media > div {
    transform: none !important;
    transform-origin: left center !important;
  }
  /* Steps: shrink column further */
  .step-row { grid-template-columns: 36px 1fr; gap: 12px; }
  .step-aside { grid-column: 2; }
}

@media (max-width: 640px) {
  /* DNA collapses to single column at phone-ish widths */
  #dna .split {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #dna .media { order: 1; }
  #dna .text { order: 2; text-align: left; }
}

@media (max-width: 560px) {
  /* Phone size — push further */
  .container { padding: 0 18px; }
  /* Was 1fr (full stack, 6 columns tall) — kept the 2-col pairing from the
     960px breakpoint instead (Entdecken next to Reisen für, etc.) and
     tightened spacing, so the footer reads as one compact block on a phone
     instead of a long vertical list (user request 2026-07-12). */
  .site-footer { padding: 48px 0 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-bottom: 32px; }
  .footer-grid h6 { margin-bottom: 10px; }
  .footer-grid ul { gap: 8px; }
  .footer-grid ul a { font-size: 12.5px; }
  .footer-grid .footer-brand p { max-width: none; }
  .vision-cards { grid-template-columns: 1fr; }
  .cta-form-header .cta-form-meta { display: none; }
  .idcard h3 { font-size: 18px; }
  .idcard-stack { min-height: 380px; }
  .ic-grid { grid-template-columns: 100px 1fr !important; }
  .tm-h2 { font-size: clamp(28px, 8vw, 38px) !important; }
}

/* ============================================================================
   Partners Page
   ============================================================================ */

/* Hero — 1:1 match to homepage .hero */
.partners-hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  max-height: 920px;
  width: 100%;
  overflow: hidden;
  background-color: #2a201a;
}
.partners-hero-img {
  position: absolute;
  inset: 0;
}
.partners-hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.partners-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(58,46,34,0.92) 0%, rgba(58,46,34,0.65) 45%, rgba(58,46,34,0.52) 70%, rgba(58,46,34,0.52) 100%);
}
.partners-hero-content {
  max-width: 620px;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.partners-hero-content .eyebrow-chip {
  margin-bottom: 28px;
}
.partners-hero-h1 {
  font: var(--fw-book) clamp(36px, 4.5vw, 64px)/1.04 var(--font-display);
  letter-spacing: var(--ls-head);
  color: var(--cream);
  margin: 0 0 24px;
}
.partners-hero-lead {
  font: var(--fw-book) clamp(15px, 1.3vw, 18px)/1.55 var(--font-sans);
  color: rgba(250,248,245,0.88);
  letter-spacing: -0.005em;
  margin: 0 0 36px;
  max-width: 460px;
}
.partners-hero-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Benefit cards (light section) */
.partners-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.partners-benefit-card {
  background: var(--bg);
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  padding: 36px 32px;
  transition: border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.partners-benefit-card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 8px 32px rgba(193,125,60,0.08);
}
.partners-benefit-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-3);
  background: rgba(193,125,60,0.08);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: background var(--dur-base) var(--ease-std);
}
.partners-benefit-card:hover .partners-benefit-icon {
  background: rgba(193,125,60,0.14);
}
.partners-benefit-title {
  /* --font-display resolves to the Medium-weight static font file — at this
     small card-title size, seven of these plus the step titles on one page
     read as "everything is bold". Regular weight (--font-sans) here instead,
     display font stays reserved for the large section H2s. */
  font: var(--fw-book) clamp(17px, 1.4vw, 20px)/1.2 var(--font-sans);
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: var(--ls-head);
}
.partners-benefit-desc {
  font: var(--fw-book) 15px/1.6 var(--font-sans);
  color: var(--ink-75);
  margin: 0;
}

/* How it works — dark section steps */
.partners-steps {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.partners-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: rgba(250,248,245,0.05);
  border: 1px solid rgba(250,248,245,0.1);
  border-radius: var(--r-4);
  padding: 28px 32px;
  transition: border-color var(--dur-base) var(--ease-std);
}
.partners-step:hover {
  border-color: rgba(193,125,60,0.3);
}
.partners-step-num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--cream);
  font: var(--fw-book) 13px/1 var(--font-sans);
  letter-spacing: 0.05em;
  display: flex; align-items: center; justify-content: center;
}
.partners-step-title {
  font: var(--fw-book) clamp(17px, 1.4vw, 20px)/1.2 var(--font-sans);
  color: var(--cream);
  margin: 0 0 8px;
  letter-spacing: var(--ls-head);
}
.partners-step-desc {
  font: var(--fw-book) 15px/1.6 var(--font-sans);
  color: rgba(250,248,245,0.7);
  margin: 0;
}

/* =========================================================================
   Travel Quiz
   ========================================================================= */

/* Welcome Screen */
.quiz-welcome {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.quiz-welcome-bg {
  position: absolute;
  inset: 0;
  /* Bug10 (Bild 55): warm brand-tone placeholder so the hero doesn't visibly
     rasterise top-to-bottom while decoding. The <img> below starts at opacity:0
     and fades in via .loaded (toggled onLoad), giving a clean cross-fade instead
     of a top-down reveal. Tones match the quiz cream palette (--tm-parchment /
     --tm-light-sand / --tm-warm-tan). */
  background: linear-gradient(160deg, #F8EFE0 0%, #ECE7DE 50%, #D4C5A9 100%);
}
.quiz-welcome-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.quiz-welcome-bg img.loaded {
  opacity: 1;
}
.quiz-welcome-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 40%, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,0.5) 0%, transparent 60%);
}
.quiz-welcome-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 80px 32px 64px;
  max-width: 700px;
}
.quiz-welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
  width: fit-content;
}
.quiz-welcome-title {
  font: 100 clamp(36px, 5vw, 64px)/1.1 var(--font-display);
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.quiz-welcome-title em {
  font-style: italic;
  font-weight: 100;
}
.quiz-welcome-sub {
  font: 400 clamp(15px, 1.5vw, 18px)/1.7 var(--font-sans);
  color: rgba(255,255,255,0.7);
  margin: 0 0 32px;
  max-width: 500px;
}
.quiz-welcome-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  padding: 16px 16px 16px 32px;
  border-radius: 9999px;
  border: none;
  background: #fff;
  color: #0a0a0a;
  font: 500 18px/1 var(--font-sans);
  cursor: pointer;
  transition: all 0.3s;
}
.quiz-welcome-cta:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-2px);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.quiz-welcome-cta:active {
  transform: translateY(0);
}
.quiz-cta-arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.3s;
}
.quiz-welcome-cta:hover .quiz-cta-arrow {
  transform: translateX(4px);
}
.quiz-welcome-meta {
  font: 400 13px/1 var(--font-sans);
  color: rgba(255,255,255,0.4);
  margin: 16px 0 0;
}
.quiz-welcome-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
/* Skip/back sits inline in the actions row next to "Quiz starten" on ALL
   breakpoints (desktop used to pin this to an absolute bottom-right corner,
   which visually detached it from the CTA — TMT_Log design-bug 20.07). */
.quiz-welcome-skip {
  position: static;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.7);
  font: 500 15px/1 var(--font-sans);
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.quiz-welcome-skip:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
/* Bug2 (Bild 54) — mobile only: smaller pill + blur, still inline in the row. */
@media (max-width: 600px) {
  .quiz-welcome-skip {
    padding: 12px 20px;
    font-size: 14px;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* Quiz Screen */
.quiz-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F8EFE0;
}
.quiz-progress-bar {
  width: 100%;
  height: 3px;
  background: #f0f0f0;
}
.quiz-progress-fill {
  height: 100%;
  background: #2c2c2c;
}
.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}
.quiz-header-left {
  display: flex;
  align-items: center;
  min-width: 80px;
}
.quiz-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.quiz-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: none;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}
.quiz-back-btn:hover { color: #0a0a0a; }
.quiz-back-text { display: none; }
@media (min-width: 640px) { .quiz-back-text { display: inline; } }
.quiz-counter {
  font: 400 12px/1 monospace;
  color: #999;
}
.quiz-dots {
  display: flex;
  gap: 3px;
}
.quiz-dot {
  height: 3px;
  width: 8px;
  border-radius: 2px;
  background: #ddd;
  transition: all 0.3s;
}
.quiz-dot--done { width: 16px; background: #2c2c2c; }
.quiz-dot--active { width: 24px; background: #2c2c2c; }

.quiz-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 32px;
}
.quiz-question-wrap {
  width: 100%;
  max-width: 900px;
}
.quiz-question-text {
  text-align: center;
  margin-bottom: 20px;
}
.quiz-chapter {
  display: block;
  font: 400 11px/1 monospace;
  color: #999;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.quiz-prompt {
  font: 400 clamp(22px, 3vw, 36px)/1.2 var(--font-display);
  color: #0a0a0a;
  margin: 0 0 8px;
}
.quiz-subtitle {
  font: 400 clamp(13px, 1.2vw, 16px)/1.4 var(--font-sans);
  color: #666;
  margin: 0;
}
.quiz-hint {
  font: 400 13px/1 var(--font-sans);
  color: #999;
  text-align: center;
  margin-top: 16px;
}

/* Quiz Cards */
.quiz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .quiz-grid { gap: 16px; } }

.quiz-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.4s;
  background: none;
  padding: 0;
}
.quiz-card:hover { border-color: #bbb; }
.quiz-card--selected {
  border: 2px solid #2c2c2c;
  box-shadow: 0 0 30px rgba(44,44,44,0.3);
  transform: scale(1.02);
}
.quiz-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease-out;
}
.quiz-card:hover .quiz-card-img { transform: scale(1.05); }
.quiz-card--selected .quiz-card-img { transform: scale(1.1); }
.quiz-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 40%, transparent 100%);
  transition: opacity 0.3s;
}
.quiz-card--selected .quiz-card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 100%);
}
.quiz-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2c2c2c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  animation: quiz-pop 0.3s ease-out;
}
@keyframes quiz-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.quiz-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
}
.quiz-card-label span {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 500 clamp(12px, 1.2vw, 15px)/1.2 var(--font-sans);
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.quiz-card--selected .quiz-card-label span {
  background: rgba(44,44,44,0.25);
  border-color: rgba(44,44,44,0.4);
}

/* Bug11 (Bild 55) — mobile only: stack the 4 answer images in a single full-width
   column so each is much larger, and flatten the tiles (16/9 instead of 16/10) so
   all four still fit comfortably without excessive scrolling. 16/9 (not the former
   21/9) keeps scenic photos from being cropped into too thin a band. Desktop/tablet
   (≥640px) keeps the untouched 2×2 grid. Placed after the base .quiz-grid /
   .quiz-card rules so these overrides win by source order. */
@media (max-width: 639px) {
  .quiz-grid { grid-template-columns: 1fr; }
  .quiz-card { aspect-ratio: 16 / 9; }
}

/* Result Screen */
/* ── Result Screen — light cream theme (matches landingpage TravelDNA) ── */
.quiz-result {
  background: #FAF8F5;
}
.quiz-result-hero {
  position: relative;
  height: clamp(400px, 55vh, 650px);
  overflow: hidden;
  margin: 0 24px;
  border-radius: 16px;
}
.quiz-result-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quiz-result-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(250,248,245,0.85) 0%, rgba(250,248,245,0.25) 50%, transparent 100%),
    linear-gradient(to right, rgba(250,248,245,0.20) 0%, transparent 50%);
}
.quiz-result-hero-content {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
}
.quiz-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(58,46,34,0.10);
  background: rgba(250,248,245,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(58,46,34,0.7);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.quiz-result-badge svg { color: #C17D3C; }
.quiz-result-title {
  font: 400 clamp(32px, 5vw, 56px)/0.95 var(--font-display);
  color: #3A2E22;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.quiz-result-subtitle {
  font: 500 clamp(16px, 2vw, 20px)/1.3 var(--font-display);
  color: #C17D3C;
  margin: 0;
  letter-spacing: 0.01em;
}

.quiz-result-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  background: #FAF8F5;
}
.quiz-result-section {
  margin-bottom: 48px;
}
.quiz-result-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 clamp(20px, 2vw, 24px)/1.2 var(--font-display);
  color: #3A2E22;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.quiz-result-section-title svg { color: #C17D3C; flex-shrink: 0; }
.quiz-result-desc {
  font: 400 clamp(15px, 1.3vw, 18px)/1.7 var(--font-sans);
  color: rgba(58,46,34,0.75);
  margin: 0;
}
.quiz-result-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.quiz-result-trait {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(58,46,34,0.10);
  background: rgba(247,245,240,0.8);
  color: rgba(58,46,34,0.75);
  font: 500 13px/1 var(--font-sans);
}
.quiz-result-dims {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quiz-result-dim-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.quiz-result-dim-label {
  font: 500 13px/1 var(--font-sans);
  color: #3A2E22;
}
.quiz-result-dim-val {
  font: 400 11px/1 var(--font-mono);
  color: rgba(58,46,34,0.5);
}
.quiz-result-dim-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(58,46,34,0.10);
  overflow: hidden;
}
.quiz-result-dim-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #C17D3C 0%, #E8A766 100%);
}
.quiz-result-attrs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) {
  .quiz-result-attrs {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .quiz-result-attrs > * { flex: 1 1 45%; min-width: 220px; }
}
.quiz-result-attr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(58,46,34,0.08);
  background: rgba(247,245,240,0.8);
  font: 400 13px/1.4 var(--font-sans);
  color: rgba(58,46,34,0.8);
}
.quiz-result-attr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C17D3C;
  flex-shrink: 0;
}
.quiz-result-reco {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid rgba(58,46,34,0.08);
  border-left: 4px solid #C17D3C;
  background: rgba(247,245,240,0.8);
}
.quiz-result-reco p {
  font: 400 15px/1.6 var(--font-sans);
  color: rgba(58,46,34,0.8);
  margin: 0;
}
.quiz-result-secondary {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(58,46,34,0.08);
  background: rgba(247,245,240,0.8);
  transition: border-color 0.3s;
}
.quiz-result-secondary:hover { border-color: rgba(193,125,60,0.30); }
.quiz-result-secondary img {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(193,125,60,0.20);
}
@media (min-width: 768px) { .quiz-result-secondary img { width: 120px; height: 120px; } }
.quiz-result-secondary h4 {
  font: 500 20px/1.2 var(--font-display);
  color: #3A2E22;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.quiz-result-secondary-sub {
  font: 400 14px/1 var(--font-sans);
  color: #C17D3C;
  margin: 0 0 8px;
}
.quiz-result-secondary-desc {
  font: 400 13px/1.5 var(--font-sans);
  color: rgba(58,46,34,0.7);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Email Capture */
.quiz-email-section {
  padding: 32px;
  border-radius: 16px;
  border: 1px solid rgba(58,46,34,0.08);
  background: rgba(247,245,240,0.8);
}
.quiz-email-desc {
  font: 400 14px/1.6 var(--font-sans);
  color: rgba(58,46,34,0.65);
  margin: 0 0 20px;
}
.quiz-email-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.quiz-email-form .quiz-email-input[type="text"] { flex: 1 1 160px; min-width: 160px; }
.quiz-email-form .quiz-email-input[type="email"] { flex: 1 1 220px; min-width: 220px; }
.quiz-email-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(58,46,34,0.15);
  background: #FAF8F5;
  color: #3A2E22;
  font: 400 16px/1 var(--font-sans);
  outline: none;
  transition: border-color 0.2s;
}
.quiz-email-input::placeholder { color: rgba(58,46,34,0.40); }
.quiz-email-input:focus { border-color: #C17D3C; }
.quiz-email-btn {
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #C17D3C, #D4924F, #C17D3C);
  color: #FFF8F0;
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.quiz-email-btn:hover { background: linear-gradient(135deg, #D4924F, #E0A35E, #D4924F); }
.quiz-email-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.quiz-email-error {
  font: 400 13px/1 var(--font-sans);
  color: #E53935;
  margin: 8px 0 0;
}
.quiz-email-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}
.quiz-email-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(34,197,94,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
}
.quiz-email-success p {
  font: 500 15px/1 var(--font-sans);
  color: rgba(58,46,34,0.85);
  margin: 0;
}

/* CTAs */
.quiz-result-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 32px;
  border-top: 1px solid rgba(58,46,34,0.10);
}
.quiz-cta-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 999px;
  border: 1px solid rgba(58,46,34,0.15);
  background: rgba(247,245,240,0.8);
  color: rgba(58,46,34,0.75);
  font: 500 14px/1 var(--font-sans);
  cursor: pointer;
  transition: all 0.2s;
}
.quiz-cta-share:hover { background: rgba(193,125,60,0.10); color: #3A2E22; border-color: rgba(193,125,60,0.30); }
.quiz-cta-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #C17D3C, #D4924F, #C17D3C);
  color: #FFF8F0;
  font: 700 16px/1 var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(58,46,34,0.05), 0 8px 20px rgba(58,46,34,0.08);
}
.quiz-cta-main:hover {
  background: linear-gradient(135deg, #D4924F, #E0A35E, #D4924F);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(58,46,34,0.06), 0 20px 48px rgba(58,46,34,0.12);
}
.quiz-cta-restart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid rgba(58,46,34,0.20);
  background: transparent;
  color: rgba(58,46,34,0.65);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  transition: all 0.2s;
}
.quiz-cta-restart:hover { color: #3A2E22; border-color: rgba(58,46,34,0.40); }

@media (max-width: 639px) {
  .quiz-welcome-content { padding: 60px 20px 48px; }
  .quiz-result-hero { margin: 0 12px; height: 45vh; }
  .quiz-result-hero-content { bottom: 20px; left: 20px; right: 20px; }
  .quiz-email-form { flex-direction: column; }
  .quiz-email-btn { width: 100%; padding: 14px; }
  /* min-width is a CROSS-axis constraint once the form is a column, so the 220px
     floor on the email field kept applying after the switch. Inside the quiz
     result body (24px padding) and the email section (32px padding) a 320px
     viewport leaves 208px — twelve short — and the field ran past its box. The
     flex-basis above still drives the width everywhere it fits. */
  .quiz-email-form .quiz-email-input[type="text"],
  .quiz-email-form .quiz-email-input[type="email"] { min-width: 0; width: 100%; }
}

/* Form */
.partners-form-wrap {
  max-width: 520px;
  margin: 0 auto;
}
.partners-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.partners-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.partners-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.partners-label {
  font: var(--fw-book) 12px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-60);
}
.partners-input {
  width: 100%;
  font: var(--fw-book) 16px/1 var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  padding: 14px 18px;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.partners-input::placeholder { color: var(--ink-40); }
.partners-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(193,125,60,0.1);
}
.partners-submit {
  background: var(--ink);
  color: var(--cream);
  justify-content: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-std), box-shadow var(--dur-base);
}
.partners-submit:hover:not(:disabled) {
  background: var(--accent);
  box-shadow: 0 8px 24px rgba(193,125,60,0.25);
}
.partners-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.partners-form-note {
  font: var(--fw-book) 13px/1.6 var(--font-sans);
  color: var(--ink-50);
  text-align: center;
  margin: 0;
  white-space: pre-line;
}

/* Success state */
.partners-success {
  background: var(--bg-dark);
  border-radius: var(--r-4);
  padding: clamp(40px, 6vw, 64px);
  text-align: center;
}
.partners-success-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(193,125,60,0.15);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.partners-success-title {
  font: var(--fw-book) clamp(22px, 2.5vw, 30px)/1.15 var(--font-sans);
  color: var(--cream);
  margin: 0 0 16px;
  letter-spacing: var(--ls-head);
}
.partners-success-msg {
  font: var(--fw-book) 15px/1.65 var(--font-sans);
  color: rgba(250,248,245,0.75);
  margin: 0;
  max-width: 420px;
  margin-inline: auto;
}

/* Responsive */
@media (max-width: 680px) {
  .partners-benefits { grid-template-columns: 1fr; }
  .partners-form-row { grid-template-columns: 1fr; }
  .partners-hero-content { gap: 20px; }
}

/* ==== landing-dna.css (6009 B) ==== */
/* ============================================================
   TRAVEL-DNA: animierte SVG keyframes + bindings
   Extracted from uploads/Travel DNA.html
   ============================================================ */

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(38px, -46px) rotate(3deg) scale(1.04); }
  66%      { transform: translate(-26px, -28px) rotate(-2.2deg) scale(0.97); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  40%      { transform: translate(-46px, 34px) rotate(-3.6deg) scale(1.05); }
  70%      { transform: translate(20px, 46px) rotate(2.4deg) scale(0.96); }
}
@keyframes drift-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  35%      { transform: translate(32px, 42px) rotate(2.4deg) scale(1.03); }
  65%      { transform: translate(46px, -18px) rotate(-1.8deg) scale(0.98); }
}
@keyframes drift-d {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  40%      { transform: translate(-40px, -38px) rotate(-3deg) scale(0.96); }
  70%      { transform: translate(-48px, 18px) rotate(2deg) scale(1.04); }
}
@keyframes drift-e {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(48px, 22px) rotate(2.2deg) scale(1.05); }
  66%      { transform: translate(14px, -40px) rotate(-2.8deg) scale(0.96); }
}
@keyframes drift-f {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-28px, 32px) scale(1.08); }
  70%      { transform: translate(24px, -16px) scale(0.94); }
}
@keyframes drift-g {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%      { transform: translate(36px, -28px) scale(0.93); }
  70%      { transform: translate(-22px, 24px) scale(1.09); }
}
@keyframes drift-h {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  40%      { transform: translate(-32px, 40px) rotate(-2.2deg) scale(1.05); }
  70%      { transform: translate(36px, 16px) rotate(3deg) scale(0.96); }
}
@keyframes drift-stroke-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(22px, -22px) rotate(2deg); }
}
@keyframes drift-stroke-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-20px, 18px) rotate(-2deg); }
}
@keyframes line-wave {
  0%, 100% { stroke-dashoffset: 0;   transform: translate(0, 0); }
  50%      { stroke-dashoffset: -48; transform: translate(14px, -12px); }
}
@keyframes line-wave-2 {
  0%, 100% { stroke-dashoffset: 0;  transform: translate(0, 0); }
  50%      { stroke-dashoffset: 52; transform: translate(-14px, 14px); }
}

.travel-dna {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.travel-dna .shape {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.travel-dna .line {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, stroke-dashoffset;
  stroke-dasharray: 600;
}

.travel-dna #s-triangle    { animation: drift-a 8s    ease-in-out infinite; animation-delay: -1s; }
.travel-dna #s-sage-big    { animation: drift-f 10s   ease-in-out infinite; animation-delay: -3s; }
.travel-dna #s-sand-big    { animation: drift-g 12s   ease-in-out infinite; animation-delay: -2s; }
.travel-dna #s-sage-mid    { animation: drift-b 9s    ease-in-out infinite; animation-delay: -4s; }
.travel-dna #s-sand-mid    { animation: drift-c 10.5s ease-in-out infinite; animation-delay: -1.5s; }
.travel-dna #s-terra-big   { animation: drift-d 10s   ease-in-out infinite; animation-delay: -3.5s; }
.travel-dna #s-terra-inner { animation: drift-d 9.5s  ease-in-out infinite; }
.travel-dna #s-terra-sm    { animation: drift-e 7.5s  ease-in-out infinite; animation-delay: -2.5s; }
.travel-dna #s-terra-tiny  { animation: drift-a 6.5s  ease-in-out infinite; animation-delay: -1s; }
.travel-dna #s-blob        { animation: drift-h 13s   ease-in-out infinite; animation-delay: -5s; }
.travel-dna #s-slate       { animation: drift-b 11s   ease-in-out infinite; animation-delay: -2s; }
.travel-dna #s-slate-bar   { animation: drift-c 9.5s  ease-in-out infinite; animation-delay: -4s; }
.travel-dna #s-sage-tab    { animation: drift-d 8.5s  ease-in-out infinite; animation-delay: -2s; }
.travel-dna #s-sage-bottom { animation: drift-e 12s   ease-in-out infinite; animation-delay: -3s; }

.travel-dna #strokes-a { animation: drift-stroke-1 8.5s ease-in-out infinite; animation-delay: -2s; }
.travel-dna #strokes-b { animation: drift-stroke-2 10s  ease-in-out infinite; animation-delay: -3s; }

.travel-dna #line-1 { animation: line-wave 9s ease-in-out infinite; }
.travel-dna #line-2 { animation: line-wave-2 11s ease-in-out infinite; animation-delay: -2s; }
.travel-dna #line-3 { animation: line-wave 13s ease-in-out infinite; animation-delay: -4s; }
.travel-dna #line-4 { animation: line-wave-2 10s ease-in-out infinite; animation-delay: -1s; }

.travel-dna .label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.16em;
  fill: var(--tm-espresso, #3A2E22);
  text-transform: uppercase;
}
.travel-dna #lab-arch  { animation: drift-c 11s ease-in-out infinite; animation-delay: -2s; transform-box: fill-box; transform-origin: center; }
.travel-dna #lab-culin { animation: drift-b 9.5s ease-in-out infinite; animation-delay: -3s; transform-box: fill-box; transform-origin: center; }
.travel-dna #lab-mini  { animation: drift-a 12s ease-in-out infinite; animation-delay: -1s; transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .travel-dna .shape,
  .travel-dna .line,
  .travel-dna .label,
  .travel-dna #strokes-a,
  .travel-dna #strokes-b,
  .travel-dna #lab-arch,
  .travel-dna #lab-culin,
  .travel-dna #lab-mini {
    animation: none !important;
  }
}

/* ==== sublanding.css (10814 B) ==== */
/* =========================================================================
   TakeMeTo — Sub-Landing (funnel) pages: /hochzeit, /gruppenreise, …
   Built on the same tokens as landing.css / global.css. Reuses .container,
   .section, .bg-*, .eyebrow-chip, .bicolor, .btn*, .reveal, .cta-section.
   Only adds the new layout primitives the funnel pages need (sl-*).
   ========================================================================= */

/* ── Hero (image bg, 1:1 spirit of .partners-hero) ───────────────────── */
.sl-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background-color: #2a201a;
  display: flex;
  flex-direction: column;
}
.sl-hero-img { position: absolute; inset: 0; }
.sl-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sl-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, transparent 55%, rgba(30,22,16,0.55) 100%),
    linear-gradient(105deg, rgba(58,46,34,0.88) 0%, rgba(58,46,34,0.6) 46%, rgba(58,46,34,0.32) 72%, rgba(58,46,34,0.22) 100%);
}
.sl-hero-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; align-items: center;
  max-width: 1240px; margin: 0 auto; width: 100%;
  padding: 140px 32px 60px;
}
.sl-hero-pillars {
  position: relative; z-index: 2;
  padding: 0 32px 72px;
}
.sl-hero-content { max-width: 700px; color: var(--cream); }
.sl-hero-content .eyebrow-chip { margin-bottom: 26px; }
.sl-hero-pillars .eyebrow-chip { color: var(--tm-amber-light); border-color: rgba(212,197,169,0.4); }
.sl-h1 {
  font: var(--fw-book) clamp(40px, 6vw, 80px)/1.02 var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--cream);
  margin: 0 0 22px;
  text-wrap: balance;
}
.sl-h1 .l2 { display: block; color: var(--tm-amber-light); font-style: italic; }
.sl-lead {
  font: var(--fw-book) clamp(15px, 1.35vw, 19px)/1.6 var(--font-sans);
  color: rgba(250,248,245,0.9);
  letter-spacing: -0.005em;
  margin: 0 0 34px;
  max-width: 52ch;
}
.sl-hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sl-hero-meta { font-size: 13px; color: rgba(250,248,245,0.7); }

/* Hero entrance — minimalistic fade-up (respects reduced motion below) */
@keyframes sl-fade-up { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
.sl-anim { opacity: 0; will-change: transform, opacity; animation: sl-fade-up 0.8s var(--ease-std) forwards; }
.sl-anim-1 { animation-delay: 0.10s; }
.sl-anim-2 { animation-delay: 0.28s; }
.sl-anim-3 { animation-delay: 0.46s; }

/* ── Pillars (4-up benefit grid) ─────────────────────────────────────── */
.sl-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.sl-pillar {
  background: rgba(58,46,34,0.10);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(250,248,245,0.14);
  border-radius: var(--r-3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(250,248,245,0.08);
  padding: 22px;
  transition: transform var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std);
}
.sl-pillar:hover { transform: translateY(-4px); background: rgba(58,46,34,0.45); border-color: rgba(250,248,245,0.22); }
.sl-pillar h3 {
  font: var(--fw-book) 18px/1.25 var(--font-sans);
  letter-spacing: -0.01em; color: var(--cream); margin: 0 0 8px;
}
.sl-pillar p { font: var(--fw-book) 14px/1.55 var(--font-sans); color: rgba(250,248,245,0.75); margin: 0; }

/* ── Problem / Solution split ────────────────────────────────────────── */
.sl-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: 12px; }
.sl-block .sl-block-eyebrow {
  font: var(--fw-book) 11px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent);
}
.sl-block h2 {
  font: var(--fw-book) clamp(26px, 3.2vw, 40px)/1.1 var(--font-display);
  letter-spacing: var(--ls-head); color: var(--ink); margin: 14px 0 16px; text-wrap: balance;
}
.bg-dark .sl-block h2 { color: var(--cream); }
.sl-block p { font: var(--fw-book) 16px/1.65 var(--font-sans); color: var(--ink-75); margin: 0; }
.bg-dark .sl-block p { color: rgba(250,248,245,0.75); }

/* "Explained for non-AI users" callout */
.sl-explain {
  margin-top: 22px;
  background: rgba(193,125,60,0.07);
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  padding: 18px 20px;
}
.sl-explain .sl-explain-lbl {
  font: var(--fw-book) 11px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px;
}
.sl-explain p { font: var(--fw-book) 14.5px/1.6 var(--font-sans); color: var(--ink-75); margin: 0; }

/* ── Steps ───────────────────────────────────────────────────────────── */
.sl-steps { margin-top: 44px; max-width: 760px; }
.sl-step {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px;
  padding: 28px 0; border-top: 1px solid var(--border-1, rgba(58,46,34,0.08));
  align-items: start;
}
.sl-step:last-child { border-bottom: 1px solid var(--border-1, rgba(58,46,34,0.08)); }
.bg-dark .sl-step, .bg-dark .sl-step:last-child { border-color: rgba(250,248,245,0.1); }
.sl-step-num {
  font: var(--fw-thin) clamp(28px, 3.4vw, 48px)/1 var(--font-display);
  color: var(--accent); letter-spacing: -0.02em;
}
.sl-step h4 { font: var(--fw-book) 21px/1.2 var(--font-display); letter-spacing: var(--ls-head); color: var(--ink); margin: 0 0 8px; }
.bg-dark .sl-step h4 { color: var(--cream); }
.sl-step p { font: var(--fw-book) 15px/1.6 var(--font-sans); color: var(--ink-70); margin: 0; max-width: 520px; }
.bg-dark .sl-step p { color: rgba(250,248,245,0.7); }

/* ── FAQ accordion ───────────────────────────────────────────────────── */
.sl-faq { max-width: 760px; margin: 40px auto 0; }
.sl-faq-item { border-top: 1px solid var(--border-1, rgba(58,46,34,0.1)); }
.sl-faq-item:last-child { border-bottom: 1px solid var(--border-1, rgba(58,46,34,0.1)); }
.sl-faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0;
  font: var(--fw-book) clamp(16px, 1.6vw, 19px)/1.4 var(--font-sans);
  color: var(--ink); letter-spacing: -0.01em;
}
.sl-faq-q .sl-faq-ic {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--accent-border); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std);
}
.sl-faq-item.open .sl-faq-ic { transform: rotate(45deg); background: rgba(193,125,60,0.1); }
.sl-faq-a { overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--dur-slow) var(--ease-std), opacity var(--dur-base) var(--ease-std), padding var(--dur-base) var(--ease-std); }
.sl-faq-item.open .sl-faq-a { max-height: 360px; opacity: 1; padding: 0 0 22px; }
.sl-faq-a p { font: var(--fw-book) 15px/1.65 var(--font-sans); color: var(--ink-70); margin: 0; max-width: 64ch; }

/* ── Testimonials ────────────────────────────────────────────────────── */
.sl-testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.sl-quote {
  background: rgba(250,248,245,0.05);
  border: 1px solid rgba(250,248,245,0.1);
  border-radius: var(--r-4);
  padding: 30px 30px 26px;
}
.sl-quote .sl-quote-mark { font: var(--fw-book) 30px/1 var(--font-display); color: var(--tm-amber-light); display: block; margin-bottom: 10px; }
.sl-quote p { font: var(--fw-book) 16px/1.55 var(--font-sans); color: var(--cream); margin: 0 0 18px; letter-spacing: -0.005em; }
.sl-quote .sl-quote-author { font: var(--fw-book) 11px/1 var(--font-sans); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(250,248,245,0.6); }

/* ── Related pages strip (internal links for SEO + discovery) ────────── */
.sl-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.sl-related-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--tm-card-cream); border: 1px solid var(--border-1, rgba(58,46,34,0.08));
  border-radius: var(--r-4); padding: 24px 26px;
  transition: transform var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}
.sl-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-border); }
.sl-related-card .sl-related-eyebrow { font: var(--fw-book) 10px/1 var(--font-sans); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.sl-related-card h4 { font: var(--fw-book) 19px/1.2 var(--font-display); letter-spacing: var(--ls-head); color: var(--ink); margin: 0; }
.sl-related-card .sl-related-arrow { margin-top: auto; color: var(--accent); font-size: 14px; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .sl-pillars { grid-template-columns: 1fr 1fr; }
  .sl-split { grid-template-columns: 1fr; gap: 36px; }
  .sl-testimonials { grid-template-columns: 1fr; }
  .sl-related { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sl-pillars { grid-template-columns: 1fr; }
  .sl-step { grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 0; }
  .sl-hero-content { padding: 0; }
  .sl-hero-inner { padding: 100px 20px 40px; }
  .sl-hero-pillars { padding: 0 20px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-anim { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==== landing-redesign.css (4434 B) ==== */
/* =========================================================================
   TakeMeTo — Landing redesign (April 2026 homepage rebuild)
   Hover + responsive helpers, scoped to the rebuilt homepage via .rl-* classes.
   The redesign markup is otherwise inline-styled (ported from the design source),
   so these rules only carry interaction + mobile-collapse behaviour.
   `!important` is required to override the inline grid-template-columns.
   ========================================================================= */

/* ------------- Hover micro-interactions ------------- */
.rl-cta   { transition: background var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std); }
.rl-cta:hover   { background: var(--grad-cta-hover); transform: translateY(-1px); }
.rl-ghost { transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std); }
.rl-ghost:hover { background: rgba(255,255,255,0.20); }
.rl-dark  { transition: background var(--dur-fast) var(--ease-std); }
.rl-dark:hover  { background: var(--tm-charcoal-brown); }
.rl-card  { transition: transform var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std); }
.rl-card:hover  { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.rl-pill  { transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std); }
.rl-pill:hover  { border-color: rgba(255,255,255,0.40); background: rgba(255,255,255,0.06); }
.rl-link  { transition: color var(--dur-fast) var(--ease-std); }
.rl-link:hover  { color: var(--accent); }

/* ------------- Responsive collapse (inline grids need !important) ------------- */
@media (max-width: 980px) {
  .rl-hero       { grid-template-columns: 1fr !important; }
  .rl-hero-cards { display: none !important; }
  .rl-2col       { grid-template-columns: 1fr !important; }
  .rl-3col       { grid-template-columns: 1fr 1fr !important; }
  .rl-compare    { grid-template-columns: 1fr !important; }
  .rl-compare-arrow { transform: rotate(90deg); margin: 6px auto !important; }
  .rl-foot       { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .rl-3col       { grid-template-columns: 1fr !important; }
  .rl-foot       { grid-template-columns: 1fr !important; }
  /* Bug1 (Bild 53): keep the 3-col layout on phones so the 8 tool tiles stay
     "floating around" the centre TakeMeTo logo (tile index 4). Collapsing to
     2 cols pushed the logo off-centre and blew the tiles up huge. 3 cols on a
     narrow viewport auto-shrinks each tile, which is exactly what the ticket
     asks for. Labels scale down a touch so they still fit the smaller tiles. */
  .rl-toolgrid   { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .rl-toolgrid span { font-size: 12px !important; line-height: 1.15 !important; }
}
@media (max-width: 780px) {
  /* /how-to staggered video row: the left/right offset only works with room
     either side. Below that, go full-width and drop the caption's mirrored
     alignment so titles don't end up right-aligned in a narrow column. */
  .rl-howto-row { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .rl-howto-row > div:last-child { text-align: left !important; margin-left: 4px !important; margin-right: auto !important; }
}
@media (max-width: 600px) {
  /* /how-to step cards. Their inline grid is "minmax(96px,140px) 1fr", and the
     class it hangs on — rl-howto-step — had no rule ANYWHERE in the project, so
     unlike every sibling grid here it never collapsed. The number track then
     absorbed the free space: on a 360px phone roughly 134px, over half the row
     and most of it whitespace, leaving about 114px for the step text beside it.
     At 320px the two tracks plus the gap no longer fit inside the card at all.
     One column puts the step number above its text, which is what the rest of
     the page already does on a phone. */
  .rl-howto-step { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* Respect reduced-motion: kill transforms/transitions. */
@media (prefers-reduced-motion: reduce) {
  .rl-cta, .rl-ghost, .rl-dark, .rl-card, .rl-pill, .rl-link { transition: none !important; }
  .rl-cta:hover, .rl-card:hover { transform: none !important; }
}