/* Leadmagnet engine · shared landing CSS (all campaigns load this file).
   Adapted from the Visenza Quelle landing.css shell (nav, hero, veils, form,
   footer, confirmation pages), stripped of the quiz/offer/marquee sections
   and of every hardcoded brand value.

   Everything visual is driven by the CSS variables in :root below. They ship
   with NEUTRAL defaults so a raw campaign already looks presentable. The
   design skill injects a per-campaign `<style>:root{...}</style>` into the
   {{BRAND_TOKENS}} slot of the page <head> (loaded AFTER this file), which
   overrides these defaults with the real brand colors and fonts. Never bake a
   brand value into a rule below; add or override a variable instead. */

:root {
  /* ---- Colors (neutral defaults, overridden per campaign) ---- */
  --lm-bg: #f6f5f2;              /* page background */
  --lm-surface: #ffffff;         /* cards, inputs, form panel */
  --lm-text: #1c1b19;            /* primary text */
  --lm-muted: #6b675f;           /* secondary / supporting text */
  --lm-border: #e3dfd7;          /* hairlines, input borders */
  --lm-accent: #2c2b29;          /* primary button + accent fills */
  --lm-accent-contrast: #f6f5f2; /* text/label on the accent color */
  --lm-accent-hover: #46443f;    /* accent hover state */
  --lm-error: #b02618;           /* inline validation / error text */
  --lm-veil: rgba(24, 23, 21, .58); /* overlay when a hero bg image is set */

  /* ---- Typography (neutral serif head + sans body, overridable) ---- */
  --font-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Shape & rhythm ---- */
  --radius: 6px;
  --maxw: 1080px;
  --section-gap: 96px;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lm-bg);
  color: var(--lm-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- type scale ---- */
.h-xl {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.h-lg {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lm-accent);
}
p { font-size: 1rem; line-height: 1.7; }

/* ---- buttons (text-label only, never icon fonts or SVG icons) ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  background: var(--lm-accent);
  color: var(--lm-accent-contrast);
  border: 1px solid var(--lm-accent);
  padding: 15px 34px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--lm-accent-hover); border-color: var(--lm-accent-hover); }
.btn:disabled { opacity: 0.6; cursor: default; }

.tl {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--lm-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tl:hover { color: var(--lm-text); border-bottom-color: var(--lm-text); }

/* ---- nav (slim bar; brand slot left, latent language switch right) ---- */
.site-nav {
  border-bottom: 1px solid var(--lm-border);
  background: var(--lm-bg);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
}
.site-nav__brand {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lm-text);
}
/* Language switch styling: kept live for when the /en/ tree ships and the
   commented-out switch in the nav is re-enabled. */
.langswitch { display: flex; gap: 12px; }
.langswitch a {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lm-muted);
  transition: color 0.2s ease;
}
.langswitch a:hover { color: var(--lm-text); }
.langswitch a[data-active] {
  color: var(--lm-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- hero ---- */
.hero {
  position: relative;
  padding: clamp(28px, 4vw, 56px) 0 var(--section-gap);
  background: var(--lm-bg);
  overflow: hidden;
}
/* Background image slot: only rendered when the design skill adds <img class="hero__bg">
   plus <div class="veil"></div> and the "hero--image" modifier on <header>. */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero .veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--lm-veil) 0%, rgba(24, 23, 21, .28) 60%, rgba(24, 23, 21, .12) 100%); }
.hero__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.hero__headline { margin: 18px 0 0; }
.hero__sub {
  margin: 18px auto 0;
  max-width: 54ch;
  color: var(--lm-muted);
  font-size: 1.08rem;
}
/* light-on-image treatment, applied only when a hero background image is present */
.hero--image { color: var(--lm-accent-contrast); }
.hero--image .eyebrow { color: rgba(255, 255, 255, .82); }
.hero--image .hero__headline { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); }
.hero--image .hero__sub { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }

/* ---- email capture form ---- */
.lm-form {
  max-width: 460px;
  margin: 34px auto 0;
  background: var(--lm-surface);
  border: 1px solid var(--lm-border);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  text-align: left;
  box-shadow: 0 14px 40px rgba(24, 23, 21, .07);
}
.lm-field { display: block; }
.lm-field__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--lm-text);
  margin-bottom: 8px;
}
.lm-field__input {
  width: 100%;
  background: var(--lm-bg);
  border: 1px solid var(--lm-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--lm-text);
  transition: border-color 0.2s ease;
}
.lm-field__input::placeholder { color: var(--lm-muted); opacity: 0.8; }
.lm-field__input:focus { outline: none; border-color: var(--lm-accent); }

/* Honeypot: off-screen for humans; bots fill it and the server drops the request. */
.lm-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lm-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--lm-muted);
}
.lm-consent__box {
  flex-shrink: 0;
  margin-top: 2px;
  width: 17px;
  height: 17px;
  accent-color: var(--lm-accent);
}
.lm-consent__text a { color: var(--lm-text); text-decoration: underline; text-underline-offset: 2px; }

.lm-form__submit { width: 100%; margin-top: 20px; }

.lm-status {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--lm-error);
}
.lm-status[hidden] { display: none; }

.lm-trust {
  margin: 14px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--lm-muted);
  text-align: center;
}

/* ---- footer ---- */
.site-footer {
  border-top: 1px solid var(--lm-border);
  padding: 34px 0;
  background: var(--lm-bg);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer__copy { margin: 0; font-size: 0.8rem; color: var(--lm-muted); }
.site-footer__links { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer__links a {
  font-size: 0.8rem;
  color: var(--lm-muted);
  transition: color 0.2s ease;
}
.site-footer__links a:hover { color: var(--lm-text); }

/* ---- confirmation pages (check-email.html, confirmed.html) ---- */
.lm-confirm {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  background: var(--lm-bg);
}
.lm-confirm .eyebrow { margin-bottom: 18px; }
.lm-confirm h1 { margin: 0 0 18px; max-width: 18ch; }
.lm-confirm p {
  margin: 0 0 30px;
  max-width: 46ch;
  color: var(--lm-muted);
  font-size: 1.02rem;
}

/* ---- responsive ---- */
@media (max-width: 640px) {
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .lm-form { padding: 22px 18px 20px; }
}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}