/* ==========================================================================
   TRIGGERZ — Landingspagina's /nl/aanvraag/
   Donkere hero met een witte formulierkaart, daaronder afwisselend licht en
   wit, en een donkere slotsectie. Hergebruikt de merk-tokens en fonts uit
   style.css; geen extra libraries, geen build-stap.

   KLEUR — overgenomen uit assets/css/style.css, :root
     regel  8  --color-bg        #0A0A0A
     regel 11  --color-cream     #F5F1EB
     regel 13  --color-mint      #7DEDD3   <- de merkkleur
     regel 14  --color-mint-dark #5BC7AE

   Mint is de accentkleur van de hoofdsite: de knop "Plan een gesprek", de
   badge, het woord "slimmer" in de H1 en de cijfers in de hero.

   Op een DONKERE achtergrond wordt mint zelf gebruikt (14,07:1 contrast).
   Op een LICHTE achtergrond kan dat niet: mint haalt op wit maar 1,41:1 en is
   daar onleesbaar. Daarvoor staat --lp-mint-deep: exact dezelfde hue (166,1
   graden) en verzadiging, alleen donkerder (L 26% in plaats van 71%). Dat
   haalt 5,71:1 op wit. Geen nieuwe kleur, wel een leesbare.
   ========================================================================== */

:root {
  /* Merk-tokens, gelijk aan style.css */
  --lp-dark: #0A0A0A;
  --lp-cream: #F5F1EB;
  --lp-mint: #7DEDD3;
  --lp-mint-dark: #5BC7AE;
  --lp-mint-mid: #6ADCC2;           /* afgeleid: exact tussen mint en mint-dark */
  --lp-mint-deep: #10745D;          /* afgeleid: mint-hue, donkerder, voor tekst */
  --lp-mint-wash: #EAF9F4;          /* afgeleid: mint-hue, zeer licht */

  /* Lichte vlakken */
  --lp-bg: #FFFFFF;
  --lp-bg-soft: #FAFAF8;
  --lp-ink: #14110E;
  --lp-ink-dim: #55504A;
  --lp-ink-muted: #767066;          /* 4,91:1 op wit, 4,70:1 op #FAFAF8 */
  --lp-line: #E8E8E4;
  --lp-line-strong: #CFC9C1;

  /* Tekst op donker */
  --lp-on-dark: #F5F1EB;
  --lp-on-dark-dim: rgba(245, 241, 235, 0.74);
  --lp-on-dark-muted: rgba(245, 241, 235, 0.55);
  --lp-on-dark-line: rgba(245, 241, 235, 0.16);

  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --lp-max: 1080px;
  --lp-pad: clamp(20px, 5vw, 48px);
  --lp-radius: 14px;
  --lp-radius-lg: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--lp-bg);
  color: var(--lp-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.lp-container {
  width: 100%;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding-left: var(--lp-pad);
  padding-right: var(--lp-pad);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lp-mint);
  color: var(--lp-dark);
  padding: 12px 20px;
  z-index: 100;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Sectieritme ---------- */
.lp-section { padding: 56px 0; }
@media (min-width: 768px) { .lp-section { padding: 88px 0; } }

.lp-band-light { background: var(--lp-bg-soft); }
.lp-band-white { background: var(--lp-bg); }
.lp-band-dark  { background: var(--lp-dark); color: var(--lp-on-dark); }

/* ---------- Header ---------- */
.lp-header {
  background: var(--lp-dark);
  color: var(--lp-on-dark);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 40;
}
.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lp-logo img { width: 132px; height: auto; }
.lp-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--lp-dark);
  background: var(--lp-mint);
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.lp-phone:hover { background: var(--lp-cream); }
.lp-phone svg { width: 16px; height: 16px; flex: none; }
.lp-phone-label { display: none; }
@media (min-width: 620px) { .lp-phone-label { display: inline; } }

/* ---------- Hero: donker, met een witte formulierkaart erop ---------- */
.lp-hero {
  background: var(--lp-dark);
  color: var(--lp-on-dark);
  padding: 36px 0 48px;
  /* heel subtiel verloop, verder niets */
  background-image: radial-gradient(120% 80% at 78% 0%, rgba(125, 237, 211, 0.07) 0%, rgba(10, 10, 10, 0) 60%);
}
@media (min-width: 768px) { .lp-hero { padding: 64px 0 80px; } }

.lp-hero-grid { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .lp-hero-grid {
    grid-template-columns: 1fr 440px;
    grid-template-areas: "top form" "rest form";
    column-gap: 48px;
    row-gap: 18px;   /* gelijk aan de marge tussen H1 en prijsregel */
    align-items: start;
  }
  .lp-hero-top  { grid-area: top; }
  .lp-hero-form { grid-area: form; }
  .lp-hero-rest { grid-area: rest; }
}
/* Onder 900px staat het formulier bewust tussen de prijsregel en de rest,
   zodat het ook op een telefoon boven de vouw blijft. */

.lp-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-mint);
  background: rgba(125, 237, 211, 0.10);
  border: 1px solid rgba(125, 237, 211, 0.32);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lp-on-dark);
}
h1 .lp-accentwoord { color: var(--lp-mint); }

.lp-price {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.3vw, 1.35rem);
  line-height: 1.35;
  color: var(--lp-on-dark);
}
.lp-price strong { font-weight: 800; color: var(--lp-mint); }
.lp-price-note {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--lp-on-dark-dim);
}
@media (min-width: 700px) { .lp-price br { display: none; } }

.lp-lead {
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: var(--lp-on-dark-dim);
  max-width: 56ch;
}

.lp-usp { margin-top: 24px; display: grid; gap: 10px; }
.lp-usp li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.98rem;
  color: var(--lp-on-dark);
}
.lp-usp svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--lp-mint); }

/* Dezelfde vinkjeslijst, maar op een lichte sectie. Mint zelf is daar
   onleesbaar, dus de donkere tint van dezelfde hue. */
.lp-usp--licht { margin-top: 0; gap: 12px; }
.lp-usp--licht li { color: var(--lp-ink); }
.lp-usp--licht svg { color: var(--lp-mint-deep); }

/* ---------- Formulierkaart ----------
   Eén definitie voor beide kaarten: die in de hero en die in de slotsectie.
   Beide gebruiken exact deze klasse, dus exact dezelfde kleuren. */
.lp-formcard {
  background: var(--lp-bg);
  color: var(--lp-ink);
  border-radius: var(--lp-radius-lg);
  padding: clamp(22px, 3.5vw, 30px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}

/* Schild op containerniveau. De hero en de slotsectie zetten allebei een lichte
   color op de SECTIE. Alles in die sectie erft dat, ook de witte kaart. Deze
   regel zet daar met hogere specificiteit een donkere kleur tegenover, zodat
   niets binnen de kaart ooit nog de lichte sectiekleur kan erven, ook niet als
   er later een sectieregel bij komt. Op de container, niet per element. */
.lp-hero .lp-formcard,
.lp-form-bottom .lp-formcard { color: var(--lp-ink); }
.lp-formcard h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--lp-ink);
}
.lp-formcard-sub {
  margin-top: 8px;
  margin-bottom: 20px;
  font-size: 0.94rem;
  color: var(--lp-ink-dim);
}

.lp-field { margin-bottom: 15px; }
.lp-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--lp-ink);
}
.lp-req { color: var(--lp-mint-deep); }

.lp-field input,
.lp-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--lp-ink);
  background: var(--lp-bg);
  border: 1px solid var(--lp-line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lp-field textarea { min-height: 96px; resize: vertical; }
.lp-field input:focus,
.lp-field textarea:focus {
  outline: none;
  border-color: var(--lp-mint-deep);
  box-shadow: 0 0 0 3px rgba(16, 116, 93, 0.18);
}
.lp-field input::placeholder,
.lp-field textarea::placeholder { color: var(--lp-ink-muted); }

.lp-row { display: grid; gap: 15px; }
@media (min-width: 560px) { .lp-row { grid-template-columns: 1fr 1fr; } }

/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots */
.lp-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Primaire knop: mint vlak met donkere tekst, precies zoals .btn-primary op
   de homepage. Contrast #0A0A0A op #7DEDD3 = 14,07:1. */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--lp-dark);
  background: var(--lp-mint);
  border-radius: 999px;
  padding: 15px 24px;
  margin-top: 6px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lp-btn:hover { background: var(--lp-mint-dark); }
.lp-btn:active { transform: translateY(1px); }
.lp-btn svg { width: 15px; height: 15px; }

.lp-form-note {
  margin-top: 14px;
  font-size: 0.83rem;
  color: var(--lp-ink-muted);
  text-align: center;
}
.lp-privacy {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--lp-ink-muted);
  text-align: center;
}
.lp-privacy a {
  color: var(--lp-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lp-privacy a:hover { color: var(--lp-mint-deep); }

.lp-error {
  background: #FFF1EE;
  border: 1px solid rgba(180, 60, 40, 0.4);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 0.92rem;
  color: #8A2410;
}

/* ---------- Geruststellers ---------- */
.lp-assure { background: var(--lp-bg); padding: 26px 0; }
.lp-assure-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .lp-assure-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-assure-item {
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 0.95rem;
  color: var(--lp-ink);
}
.lp-assure-item svg { width: 20px; height: 20px; flex: none; color: var(--lp-mint-deep); }

/* ---------- Logobalk: licht, logo's in donkergrijs ----------
   De bestanden zijn wit-op-transparant. brightness(0) maakt er een zwart
   silhouet van, de opacity brengt dat terug naar donkergrijs (#666 op wit).
   De per-logo hoogtes corrigeren de verschillende hoeveelheden transparante
   rand in de bestanden; zie het meetwerk in het rapport. */
.lp-proof { background: var(--lp-bg); padding: 8px 0 44px; }
.lp-proof-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--lp-ink-muted);
  margin: 0 0 26px;
}
.lp-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.lp-logos img {
  flex: none;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.6;
}
.lp-logo--aelmans    { height: 43px; }
.lp-logo--heijmans   { height: 44px; }
.lp-logo--nvm        { height: 43px; }
.lp-logo--lindeboom  { height: 40px; }
.lp-logo--crossroads { height: 34px; }
.lp-logo--kubon      { height: 28px; }

@media (max-width: 767px) {
  .lp-logos { gap: 28px; }
  .lp-logos img { flex: 0 0 calc((100% - 56px) / 3); }
  .lp-logo--aelmans    { height: 30px; }
  .lp-logo--heijmans   { height: 31px; }
  .lp-logo--nvm        { height: 30px; }
  .lp-logo--lindeboom  { height: 28px; }
  .lp-logo--crossroads { height: 24px; }
  .lp-logo--kubon      { height: 20px; }
}

/* ---------- Kopjes in de secties ---------- */
.lp-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--lp-ink);
  margin-bottom: 12px;
}
.lp-section-lead {
  color: var(--lp-ink-dim);
  max-width: 62ch;
  margin-bottom: 36px;
}

/* ---------- Kaarten "Wat je krijgt" ---------- */
.lp-cards { display: grid; gap: 20px; }
@media (min-width: 700px) { .lp-cards { grid-template-columns: repeat(3, 1fr); } }

.lp-card {
  background: var(--lp-bg);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 26px 24px;
}
.lp-band-light .lp-card { background: var(--lp-bg); }
.lp-card-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 14px;
  color: var(--lp-mint-deep);
}
.lp-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: 9px;
  color: var(--lp-ink);
}
.lp-card p { color: var(--lp-ink-dim); font-size: 0.96rem; }

.lp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--lp-mint-wash);
  color: var(--lp-mint-deep);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

/* ---------- Werkblok ---------- */
.lp-work { display: grid; gap: 20px; }
@media (min-width: 760px) { .lp-work { grid-template-columns: repeat(3, 1fr); } }

.lp-work-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--lp-bg);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 32px 26px 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-work-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.lp-work-item--tisaco::before   { background: var(--lp-mint); }
.lp-work-item--nvm::before      { background: var(--lp-mint-dark); }
.lp-work-item--hairdo::before   { background: var(--lp-mint-mid); }

.lp-work-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
}

.lp-work-item h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--lp-ink);
  margin-bottom: 12px;
}
.lp-work-item p {
  color: var(--lp-ink-dim);
  font-size: 0.96rem;
  margin-bottom: 22px;
}
.lp-work-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--lp-mint-deep);
  border: 1px solid rgba(16, 116, 93, 0.35);
  border-radius: 999px;
  padding: 8px 18px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lp-work-link:hover {
  background: var(--lp-mint-wash);
  border-color: var(--lp-mint-deep);
}

/* ---------- FAQ ---------- */
.lp-faq { display: grid; gap: 0; max-width: 78ch; }
.lp-faq details { border-bottom: 1px solid var(--lp-line); padding: 18px 0; }
.lp-faq summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--lp-ink);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--lp-mint-deep);
  flex: none;
}
.lp-faq details[open] summary::after { content: "\2013"; }
.lp-faq details p { margin-top: 12px; color: var(--lp-ink-dim); }

/* ---------- Cross-sell ---------- */
.lp-cross {
  margin-top: 40px;
  padding: 22px 24px;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  max-width: 78ch;
}
.lp-band-light .lp-cross { background: var(--lp-bg); }
.lp-cross h3 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-ink-muted);
  margin-bottom: 12px;
}
.lp-cross ul { display: grid; gap: 8px; }
.lp-cross li {
  font-size: 0.88rem;
  color: var(--lp-ink-dim);
  padding-left: 16px;
  position: relative;
}
.lp-cross li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-mint-dark);
}
.lp-cross strong { color: var(--lp-ink); font-weight: 700; }

/* ---------- Slotsectie: donker, met dezelfde witte formulierkaart ---------- */
.lp-form-bottom {
  background: var(--lp-dark);
  color: var(--lp-on-dark);
  padding: 56px 0;
  background-image: radial-gradient(120% 80% at 78% 0%, rgba(125, 237, 211, 0.07) 0%, rgba(10, 10, 10, 0) 60%);
}
@media (min-width: 768px) { .lp-form-bottom { padding: 88px 0; } }

.lp-form-bottom-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
  .lp-form-bottom-grid { grid-template-columns: 1fr 440px; column-gap: 48px; }
}
/* Let op: deze twee regels zijn bewust gescoped op .lp-form-bottom-intro, de
   linkerkolom. Stonden ze op .lp-form-bottom h2 / p, dan raakten ze ook de
   koppen en teksten binnen de witte formulierkaart: gelijke specificiteit
   (0-1-1) maar later in het bestand, dus ze wonnen van .lp-formcard h2 en van
   .lp-formcard-sub, .lp-form-note en .lp-privacy (0-1-0). De kaarttekst werd
   dan crème op wit en was onleesbaar. */
.lp-form-bottom-intro h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--lp-on-dark);
  margin-bottom: 14px;
}
.lp-form-bottom-intro p { color: var(--lp-on-dark-dim); max-width: 52ch; }
.lp-callout {
  margin-top: 22px;
  padding: 18px 20px;
  background: rgba(245, 241, 235, 0.05);
  border: 1px solid var(--lp-on-dark-line);
  border-radius: var(--lp-radius);
}
.lp-callout p { color: var(--lp-on-dark-dim); }
.lp-callout strong { font-family: var(--font-display); color: var(--lp-on-dark); }
/* Telefoonnummer in lopende tekst: geen kleur, alleen onderstreept. */
.lp-tel {
  color: var(--lp-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.lp-tel:hover { text-decoration-thickness: 2px; }

/* ---------- Footer ---------- */
.lp-footer {
  background: var(--lp-dark);
  color: var(--lp-on-dark);
  padding: 34px 0;
  font-size: 0.9rem;
  border-top: 1px solid var(--lp-on-dark-line);
}
.lp-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  align-items: center;
}
.lp-footer a {
  color: var(--lp-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-footer-meta { color: var(--lp-on-dark-muted); }

/* ---------- Bedankpagina ---------- */
.lp-thanks {
  background: var(--lp-dark);
  color: var(--lp-on-dark);
  min-height: 66vh;
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 96px) 0;
}
.lp-thanks-inner { max-width: 60ch; }
.lp-thanks h1 { color: var(--lp-on-dark); }
.lp-thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: rgba(125, 237, 211, 0.12);
  color: var(--lp-mint);
  margin-bottom: 26px;
}
.lp-thanks-mark svg { width: 30px; height: 30px; }
.lp-thanks p { margin-top: 16px; color: var(--lp-on-dark-dim); font-size: 1.05rem; }
/* ---------- Contactknoppen op de bedankpagina ----------
   De oude knop brak het telefoonnummer over drie regels. Oorzaak: de inline
   SVG had geen width/height-attribuut en geen CSS-regel. Een replaced element
   zonder eigen maat valt terug op 300x150px, en dat duwde in de flex-rij de
   tekst weg. Vandaar hieronder een expliciete 22px op het icoon, plus
   white-space: nowrap zodat de tekst hoe dan ook op één regel blijft. */
.lp-thanks-actions-title {
  margin-top: 34px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-on-dark-muted);
}
.lp-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

.lp-btn-contact {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease;
}
/* Vaste 22px, flex: none zodat het icoon niet meeschaalt of krimpt. */
.lp-btn-contact svg {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  flex: none;
}

.lp-btn-tel { color: var(--lp-dark); background: var(--lp-mint); }
.lp-btn-tel:hover { background: var(--lp-cream); }

/* Het WhatsApp-groen is hier bewust de enige uitzondering op het mint-palet:
   het is de herkenningskleur van de dienst waar de knop naartoe linkt.
   Nergens anders op de landingspagina's gebruikt. */
.lp-btn-wa { color: #FFFFFF; background: #25D366; }
.lp-btn-wa:hover { background: #1FB855; }

@media (max-width: 599px) {
  .lp-thanks-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .lp-btn-contact { width: 100%; }
}
/* Onder 400px blijft de knop volle breedte; de padding gaat iets omlaag zodat
   het nummer ook op een 320px-scherm ruim op één regel past. */
@media (max-width: 399px) {
  .lp-btn-contact { padding: 16px 18px; font-size: 1rem; }
}
.lp-thanks .lp-cross {
  background: rgba(245, 241, 235, 0.05);
  border-color: var(--lp-on-dark-line);
  margin-top: 44px;
}
.lp-thanks .lp-cross h3 { color: var(--lp-on-dark-muted); }
.lp-thanks .lp-cross li { color: var(--lp-on-dark-dim); }
.lp-thanks .lp-cross strong { color: var(--lp-on-dark); }
.lp-thanks .lp-cross li::before { background: var(--lp-mint); }

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