/* ─────────────────────────────────────────────────────────
   PROMPTED · LIES landingspagina
   Alleen geladen op lies.html. Bouwt op de tokens uit base.css;
   alle klassen hebben het voorvoegsel lp- zodat ze niet botsen
   met pages.css.
   ───────────────────────────────────────────────────────── */

/* Caveat (SIL Open Font License) zelf gehost, zodat de handgeschreven
   kaarten geen verzoek naar Google Fonts nodig hebben. Alleen latin. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Caveat-Medium.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --lp-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --lp-paper: #FFFDF7;
}

.lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.lp-eyebrow b {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  background: var(--p-black);
  color: var(--p-green);
  padding: 4px 9px;
  border-radius: var(--r-xs);
}

/* ── Hero ─────────────────────────────────────────────── */
.lp-hero { padding: 72px 0 96px; overflow: hidden; }
.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}
.lp-hero h1 { font-size: clamp(42px, 5.4vw, 78px); margin-bottom: 26px; }
.lp-hero .lead { font-size: 19px; max-width: 34em; color: var(--p-ink); opacity: 0.78; }
.lp-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.lp-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--p-line);
  font-size: 14px;
  font-weight: 500;
}
.lp-hero__proof span { display: inline-flex; align-items: center; gap: 8px; }
.lp-hero__proof svg { color: var(--p-green-deep); flex: none; }

/* Collage rechts: foto, handgeschreven kaart, signaal en reactie */
.lp-collage { position: relative; aspect-ratio: 1 / 1.02; max-width: 560px; justify-self: end; width: 100%; }
.lp-collage__photo {
  position: absolute;
  inset: 0 0 18% 12%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
}
.lp-collage__photo img { width: 100%; height: 100%; object-fit: cover; }
.lp-collage__card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58%;
  transform: rotate(-5deg);
  z-index: 2;
}
.lp-collage__signal {
  position: absolute;
  top: 6%;
  right: -3%;
  z-index: 3;
  transform: rotate(2deg);
}
.lp-collage__reply {
  position: absolute;
  right: -2%;
  bottom: 4%;
  z-index: 3;
  transform: rotate(-2deg);
}

/* Handgeschreven kaart */
.lp-handcard {
  background: var(--lp-paper);
  border-radius: 6px;
  padding: 22px 24px 20px;
  box-shadow: 0 1px 0 rgba(10,10,10,0.04), 0 28px 50px -22px rgba(10,10,10,0.38);
  border: 1px solid #EFE9D8;
  position: relative;
}
.lp-handcard::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 40px;
  border: 2px dashed #D9D1BC;
  border-radius: 3px;
}
.lp-handcard p {
  font-family: var(--lp-hand);
  font-size: 23px;
  line-height: 1.22;
  color: #1E3A6E;
  margin: 0;
  padding-right: 34px;
}
.lp-handcard p + p { margin-top: 8px; }
.lp-handcard small {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* Kleine zwevende labels */
.lp-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--p-white);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  box-shadow: 0 18px 36px -18px rgba(10,10,10,0.35), 0 0 0 1px rgba(10,10,10,0.06);
  font-size: 13.5px;
  line-height: 1.3;
  max-width: 270px;
}
.lp-tag__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--p-acc-violet);
}
.lp-tag--green .lp-tag__icon { background: var(--p-green); }
.lp-tag b { display: block; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 1px; }

/* ── Probleem (donker) ────────────────────────────────── */
.lp-ink { background: var(--p-black); color: var(--p-cream); }
.lp-ink h2 { color: var(--p-cream); }
.lp-ink .mark { mix-blend-mode: normal; color: var(--p-black); }
.lp-ink .eyebrow { color: rgba(244,241,230,0.55); }
.lp-ink .section-head__lead { color: rgba(244,241,230,0.7); }
.lp-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-pain {
  border: 1px solid rgba(244,241,230,0.14);
  border-radius: var(--r-md);
  padding: 30px 28px;
}
.lp-pain__num { font-family: var(--font-mono); font-size: 12px; color: var(--p-green); margin-bottom: 26px; display: block; }
.lp-pain h3 { color: var(--p-cream); font-size: 23px; margin-bottom: 12px; }
.lp-pain p { color: rgba(244,241,230,0.7); font-size: 15.5px; line-height: 1.55; }
.lp-turn {
  margin-top: 56px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 24em;
}
.lp-turn em { font-style: normal; color: var(--p-green); }

/* ── Stappen ──────────────────────────────────────────── */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: lp-step;
  position: relative;
}
.lp-steps::before {
  content: '';
  position: absolute;
  left: 28px;
  right: 28px;
  top: 27px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--p-black) 0 8px, transparent 8px 16px);
  opacity: 0.2;
}
.lp-step { position: relative; }
.lp-step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--p-black);
  color: var(--p-green);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
  position: relative;
}
.lp-step:nth-child(2) .lp-step__num { background: var(--p-acc-violet); color: var(--p-black); }
.lp-step:nth-child(3) .lp-step__num { background: var(--p-green); color: var(--p-black); }
.lp-step:nth-child(4) .lp-step__num { background: var(--p-acc-cyan); color: var(--p-black); }
.lp-step h3 { font-size: 24px; margin-bottom: 10px; }
.lp-step p { color: var(--fg-mute); font-size: 15.5px; line-height: 1.55; }

/* ── Vergelijking eerste bericht ──────────────────────── */
.lp-compare { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: start; }
.lp-mail {
  background: var(--p-white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(10,10,10,0.05);
  overflow: hidden;
}
.lp-mail__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid var(--p-line);
}
.lp-mail__head { padding: 16px 22px 0; font-size: 13.5px; color: var(--fg-mute); line-height: 1.6; }
.lp-mail__head b { color: var(--p-black); font-weight: 500; }
.lp-mail__body { padding: 16px 22px 24px; font-size: 16px; line-height: 1.6; }
.lp-mail__body p + p { margin-top: 12px; }
.lp-mail--generic { transform: rotate(-1deg); margin-top: 28px; }
.lp-mail--generic .lp-mail__label { color: var(--fg-soft); }
.lp-mail--generic .lp-mail__body { color: var(--fg-soft); }
.lp-mail--generic .lp-mail__verdict { color: #B42318; }
.lp-mail--lies .lp-mail__label { background: var(--p-black); color: var(--p-green); border-bottom: 0; }
.lp-mail--lies .lp-mail__verdict { color: var(--p-cream); opacity: 0.8; }
.lp-hl { background: linear-gradient(transparent 55%, var(--p-green) 55%); padding: 0 2px; }
.lp-hl--violet { background: linear-gradient(transparent 55%, var(--p-acc-violet) 55%); }
.lp-hl--cyan { background: linear-gradient(transparent 55%, var(--p-acc-cyan) 55%); }
.lp-notes { display: grid; gap: 10px; padding: 0 22px 24px; }
.lp-note { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--fg-mute); }
.lp-note i { width: 10px; height: 10px; border-radius: 3px; flex: none; transform: translateY(1px); background: var(--p-green); }
.lp-note i.v { background: var(--p-acc-violet); }
.lp-note i.c { background: var(--p-acc-cyan); }
.lp-note b { color: var(--p-black); font-weight: 600; }

/* ── Reis door de kanalen ─────────────────────────────── */
.lp-journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
.lp-touch {
  background: var(--p-white);
  border-radius: var(--r-md);
  padding: 24px 22px 26px;
  box-shadow: 0 0 0 1px rgba(10,10,10,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-touch__day {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mute);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lp-touch__mode {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--p-cream);
  color: var(--p-black);
}
.lp-touch__mode--auto { background: var(--p-green); }
.lp-touch h3 { font-size: 21px; }
.lp-touch p { color: var(--fg-mute); font-size: 14.5px; line-height: 1.5; }
.lp-touch--card {
  background: var(--p-black);
  color: var(--p-cream);
  box-shadow: var(--shadow-card);
}
.lp-touch--card h3 { color: var(--p-cream); }
.lp-touch--card p { color: rgba(244,241,230,0.72); }
.lp-touch--card .lp-touch__day { color: rgba(244,241,230,0.6); }
.lp-touch--card .lp-handcard { margin-top: 10px; transform: rotate(-3deg); }
.lp-touch--card .lp-handcard p { font-size: 21px; padding-right: 30px; color: #1E3A6E; }
.lp-touch--card .lp-handcard::after { width: 26px; height: 30px; }
.lp-journey-foot {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14.5px;
  color: var(--fg-mute);
}
.lp-journey-foot span { display: inline-flex; gap: 8px; align-items: center; }
.lp-journey-foot svg { color: var(--p-green-deep); }

/* ── Regie ────────────────────────────────────────────── */
.lp-control { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
.lp-control__img { position: relative; }
.lp-control__img img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-photo); aspect-ratio: 4 / 5; object-fit: cover; }
.lp-control__badge {
  position: absolute;
  right: -22px;
  bottom: 32px;
  background: var(--p-green);
  color: var(--p-black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  transform: rotate(-3deg);
  box-shadow: 0 18px 36px -18px rgba(10,10,10,0.45);
  max-width: 220px;
}
.lp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; margin-top: 36px; }
.lp-check h3 { font-size: 19px; display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; line-height: 1.2; }
.lp-check h3::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--p-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7' fill='none' stroke='%230A0A0A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  transform: translateY(2px);
}
.lp-check p { color: var(--fg-mute); font-size: 15px; line-height: 1.55; padding-left: 28px; }

/* ── Koppelingen ──────────────────────────────────────── */
.lp-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 22px 26px;
  border-radius: var(--r-md);
  background: var(--p-white);
  box-shadow: 0 0 0 1px rgba(10,10,10,0.06);
}
.lp-stack__label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mute); margin-right: 8px; }

/* ── Doelgroepen ──────────────────────────────────────── */
.lp-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-who__item {
  border-radius: var(--r-md);
  padding: 28px 24px 30px;
  background: var(--p-white);
  box-shadow: 0 0 0 1px rgba(10,10,10,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-who__item--first { background: var(--p-acc-violet); box-shadow: none; }
.lp-who__tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mute); }
.lp-who__item--first .lp-who__tag { color: var(--p-black); opacity: 0.7; }
.lp-who__item h3 { font-size: 21px; }
.lp-who__item p { font-size: 14.5px; line-height: 1.55; color: var(--fg-mute); }
.lp-who__item--first p { color: var(--p-black); opacity: 0.8; }

/* ── Zo begin je ──────────────────────────────────────── */
.lp-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--p-black); }
.lp-start__item { padding: 28px 28px 8px 0; }
.lp-start__item + .lp-start__item { padding-left: 28px; border-left: 1px solid var(--p-line); }
.lp-start__when { font-family: var(--font-mono); font-size: 12px; color: var(--p-green-deep); margin-bottom: 14px; display: block; }
.lp-start__item h3 { font-size: 22px; margin-bottom: 10px; }
.lp-start__item p { color: var(--fg-mute); font-size: 15px; line-height: 1.55; }

/* ── Afsluiter met formulier ──────────────────────────── */
.lp-final {
  background: var(--p-black);
  color: var(--p-cream);
  border-radius: var(--r-lg);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.lp-final h2 { color: var(--p-cream); font-size: clamp(34px, 4vw, 58px); margin-bottom: 20px; }
.lp-final .mark { mix-blend-mode: normal; color: var(--p-black); }
.lp-final .lead { color: rgba(244,241,230,0.72); }
.lp-final__list { margin-top: 26px; display: grid; gap: 10px; font-size: 15px; color: rgba(244,241,230,0.85); }
.lp-final__list li { display: flex; gap: 10px; align-items: center; }
.lp-final__list svg { color: var(--p-green); flex: none; }
.lp-form {
  background: var(--p-cream);
  color: var(--p-black);
  border-radius: var(--r-md);
  padding: 30px;
  display: grid;
  gap: 14px;
}
.lp-form h3 { font-size: 22px; }
.lp-form .field input { height: 50px; }
.lp-form .btn { width: 100%; margin-top: 4px; }
.lp-form__fine { font-size: 12px; color: var(--fg-mute); line-height: 1.45; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .lp-hero__grid { gap: 40px; }
  .lp-collage__reply { right: 0; }
  .lp-who { grid-template-columns: 1fr 1fr; }
  .lp-control { gap: 48px; }
  .lp-control__badge { right: 12px; }
}
@media (max-width: 980px) {
  .lp-hero { padding: 48px 0 72px; }
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-collage { justify-self: start; max-width: 520px; }
  .lp-pains { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .lp-steps::before { display: none; }
  .lp-compare { grid-template-columns: 1fr; }
  .lp-mail--generic { margin-top: 0; transform: none; }
  .lp-journey { grid-template-columns: 1fr 1fr; }
  .lp-control { grid-template-columns: 1fr; }
  .lp-control__img { max-width: 420px; }
  .lp-start { grid-template-columns: 1fr; }
  .lp-start__item + .lp-start__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--p-line); }
  .lp-final { grid-template-columns: 1fr; padding: 44px 32px; gap: 36px; }
}
@media (max-width: 640px) {
  .lp-hero h1 { font-size: 40px; }
  .lp-hero .lead { font-size: 17px; }
  .lp-collage { aspect-ratio: 1 / 1.08; }
  .lp-collage__photo { inset: 0 0 24% 10%; }
  .lp-collage__card { width: 70%; }
  .lp-collage__reply { bottom: 2%; }
  .lp-collage__signal { display: none; }
  .lp-tag { font-size: 12.5px; max-width: 220px; padding: 8px 11px; }
  .lp-handcard p { font-size: 20px; }
  .lp-steps, .lp-journey, .lp-who, .lp-checks { grid-template-columns: 1fr; }
  .lp-final { padding: 36px 22px; border-radius: var(--r-md); }
  .lp-form { padding: 22px; }
}