/* ==========================================================================
   Herstructurering v8.16.0: twee-kanalen + leadkaart

   Uitsluitend bestaande tokens uit landing.css. Geen eigen :root, geen
   nieuwe kleuren. Enqueue afhankelijk van leadpin-landing.
   ========================================================================== */

/* ------------------------------------------------------- twee kanalen */

.lpl-app.lpl-v3 .lpl-tk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 780px) {
  .lpl-app.lpl-v3 .lpl-tk-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.lpl-app.lpl-v3 .lpl-tk-kanaal {
  padding: 28px 28px 30px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.lpl-app.lpl-v3 .lpl-tk-kanaal + .lpl-tk-kanaal {
  border-top-color: var(--blue-bright);
}

.lpl-app.lpl-v3 .lpl-tk-moment {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 40px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--blue-soft);
  color: var(--blue-deep);
}

.lpl-app.lpl-v3 .lpl-tk-naam {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 8px;
}

.lpl-app.lpl-v3 .lpl-tk-uitleg {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.lpl-app.lpl-v3 .lpl-tk-punten {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lpl-app.lpl-v3 .lpl-tk-punten li {
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: 14.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line-soft);
}

.lpl-app.lpl-v3 .lpl-tk-punten li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue);
}

/* uitkomst: beide kanalen komen samen */

.lpl-app.lpl-v3 .lpl-tk-uitkomst {
  max-width: 900px;
  margin-inline: auto;
}

.lpl-app.lpl-v3 .lpl-tk-uitkomst-pijlen {
  display: flex;
  justify-content: space-around;
  max-width: 620px;
  margin-inline: auto;
}

.lpl-app.lpl-v3 .lpl-tk-pijl {
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, var(--line), var(--blue-soft));
}

.lpl-app.lpl-v3 .lpl-tk-uitkomst-kaart {
  padding: 26px 30px 28px;
  text-align: center;
  background: var(--blue-pale);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius-lg);
}

.lpl-app.lpl-v3 .lpl-tk-uitkomst-kaart .lpl-tk-naam {
  color: var(--blue-deep);
}

.lpl-app.lpl-v3 .lpl-tk-uitkomst-kaart .lpl-tk-uitleg {
  max-width: var(--lpl-tekst-breed);
  margin: 0 auto;
}

.lpl-app.lpl-v3 .lpl-tk-meer {
  margin-top: 16px;
  font-size: 14.5px;
}

.lpl-app.lpl-v3 .lpl-tk-meer a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--blue-soft);
}

.lpl-app.lpl-v3 .lpl-tk-meer a:hover {
  border-bottom-color: var(--blue);
}

/* ---------------------------------------------------------- leadkaart */

.lpl-app.lpl-v3 .lpl-lk-vlak {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .lpl-app.lpl-v3 .lpl-lk-vlak {
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(32px, 5vw, 60px);
  }
}

.lpl-app.lpl-v3 .lpl-lk-kaart {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 460px;
}

.lpl-app.lpl-v3 .lpl-lk-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 22px;
  background: var(--blue-midnight);
}

.lpl-app.lpl-v3 .lpl-lk-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}

.lpl-app.lpl-v3 .lpl-lk-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-sky);
}

.lpl-app.lpl-v3 .lpl-lk-tijd {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

.lpl-app.lpl-v3 .lpl-lk-velden {
  margin: 0;
  padding: 6px 22px;
}

.lpl-app.lpl-v3 .lpl-lk-veld {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}

.lpl-app.lpl-v3 .lpl-lk-veld:last-child {
  border-bottom: 0;
}

.lpl-app.lpl-v3 .lpl-lk-veld dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}

.lpl-app.lpl-v3 .lpl-lk-veld dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.lpl-app.lpl-v3 .lpl-lk-bron {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 40px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--blue-soft);
  color: var(--blue-deep);
}

.lpl-app.lpl-v3 .lpl-lk-voet {
  padding: 12px 22px 16px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-alt);
}

.lpl-app.lpl-v3 .lpl-lk-toelichting h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}

.lpl-app.lpl-v3 .lpl-lk-toelichting p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 14px;
  max-width: var(--lpl-tekst-smal);
}

.lpl-app.lpl-v3 .lpl-lk-toelichting strong {
  color: var(--ink);
}

/* --------------------------------------------- kader zoekprofiel-demo */

.lpl-app.lpl-v3 .lpl-zpd-kader {
  margin-bottom: 24px;
  padding: 12px 18px;
  background: var(--blue-soft);
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--blue-midnight);
}

/* ------------------------------------------- pricing: maandpakket-alinea */

.lpl-app.lpl-v3 .lpl-pricing-maand {
  max-width: var(--lpl-tekst-breed);
  margin: 22px auto 0;
  padding: 16px 20px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ----------------------------------------------- microcopy onder de CTA's */

.lpl-app.lpl-v3 .lpl-hero-micro {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: var(--lpl-tekst-smal);
}

/* ------------------------------------- pricing: maandpakket als hoofdmodel */

.lpl-app.lpl-v3 .lpl-pricing-sub {
  max-width: var(--lpl-tekst-breed);
  margin: 10px auto 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.lpl-app.lpl-v3 .lpl-pricing-maand-kaart {
  position: relative;
  max-width: 720px;
  margin: 0 auto 34px;
  padding: 26px 30px 28px;
  background: var(--blue-pale);
  border: 1.5px solid var(--blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.lpl-app.lpl-v3 .lpl-pricing-maand-badge {
  position: absolute;
  top: -12px;
  left: 30px;
  padding: 4px 13px;
  border-radius: 40px;
  font-size: 12.5px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--blue);
}

.lpl-app.lpl-v3 .lpl-pricing-maand {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.lpl-app.lpl-v3 .lpl-pricing-bundels-kop {
  max-width: 720px;
  margin: 0 auto 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* ── Vangnet naast de prijs, v8.20.0 ─────────────────────────────────────── */

/* Wie EUR 120 tot 200 per aanvraag leest zonder de garantie en de
   creditregeling te zien, weegt alleen het risico. Deze twee blokken staan
   daarom direct onder de bundels en niet in een voetnoot. */

.lpl-app.lpl-v3 .lpl-pricing-vangnet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 900px;
  margin: 28px auto 0;
}

@media (min-width: 780px) {
  .lpl-app.lpl-v3 .lpl-pricing-vangnet {
    grid-template-columns: 1fr 1fr;
  }
}

.lpl-app.lpl-v3 .lpl-pricing-garantie,
.lpl-app.lpl-v3 .lpl-pricing-credit {
  padding: 20px 22px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.lpl-app.lpl-v3 .lpl-pricing-garantie {
  background: var(--blue-pale);
  border-color: var(--blue-soft);
}

.lpl-app.lpl-v3 .lpl-pricing-vangnet b {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
}

.lpl-app.lpl-v3 .lpl-pricing-garantie b {
  color: var(--blue-deep);
}

.lpl-app.lpl-v3 .lpl-pricing-vangnet p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.lpl-app.lpl-v3 .lpl-pricing-credit ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.lpl-app.lpl-v3 .lpl-pricing-credit li {
  position: relative;
  padding: 5px 0 5px 24px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.lpl-app.lpl-v3 .lpl-pricing-credit li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.lpl-app.lpl-v3 .lpl-pricing-credit-noot {
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}

/* Toelichting bij de bundels, v8.21.0. Staat direct onder de kaarten zodat
   iemand die de prijzen vergelijkt de nuance meteen ziet. */

.lpl-app.lpl-v3 .lpl-pricing-bundelnoot {
  max-width: 900px;
  margin: 16px auto 0;
  font-size: 14px;
  color: var(--ink-muted);
  text-align: center;
}

/* ── Netwerkblok, v8.24.0 ────────────────────────────────────────────────── */

/* De doorverwijzing tussen makelaar en adviseur halveert de acquisitiekosten
   per opdracht. Dat argument stond alleen in een bezwaarantwoord; hier krijgt
   het de plek die het verdient. */

.lpl-app.lpl-v3 .lpl-nw-stappen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 820px) {
  .lpl-app.lpl-v3 .lpl-nw-stappen {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.lpl-app.lpl-v3 .lpl-nw-stap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 22px 24px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* Op brede schermen staat de pijl tussen de stappen; die maakt de volgorde
   zichtbaar zonder dat er een grafisch element bij hoeft. */
@media (min-width: 820px) {
  .lpl-app.lpl-v3 .lpl-nw-stap {
    position: relative;
  }
  .lpl-app.lpl-v3 .lpl-nw-stap + .lpl-nw-stap::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -13px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: 2px solid var(--blue-soft);
    border-right: 2px solid var(--blue-soft);
    transform: rotate(45deg);
  }
}

.lpl-app.lpl-v3 .lpl-nw-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  background: var(--blue-soft);
  color: var(--blue-deep);
}

.lpl-app.lpl-v3 .lpl-nw-stap b {
  display: block;
  margin-bottom: 5px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
}

.lpl-app.lpl-v3 .lpl-nw-stap p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.lpl-app.lpl-v3 .lpl-nw-slot {
  max-width: var(--lpl-tekst-breed);
  margin: 26px auto 0;
  padding: 18px 22px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
}

/* Rekenvoorbeeld bij de prijs, v8.24.0. Staat tussen de bundels en het vangnet:
   de klant heeft net de bedragen gezien en gaat rekenen. */

.lpl-app.lpl-v3 .lpl-pricing-rekenvoorbeeld {
  max-width: 700px;
  margin: 26px auto 0;
  padding: 22px 24px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.lpl-app.lpl-v3 .lpl-pricing-rekenvoorbeeld b {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
}

.lpl-app.lpl-v3 .lpl-pricing-rekenvoorbeeld ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rv;
}

.lpl-app.lpl-v3 .lpl-pricing-rekenvoorbeeld li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line-soft);
}

.lpl-app.lpl-v3 .lpl-pricing-rekenvoorbeeld li:last-child {
  border-bottom: 0;
}

.lpl-app.lpl-v3 .lpl-pricing-rekenvoorbeeld strong {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* De derde regel is de uitkomst waar het om draait. */
.lpl-app.lpl-v3 .lpl-pricing-rekenvoorbeeld li:nth-child(3) strong {
  color: var(--blue-deep);
  font-size: 16px;
}

.lpl-app.lpl-v3 .lpl-pricing-rekenvoorbeeld > p {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Woningcheck-mogelijkheden, v8.25.0 ──────────────────────────────────── */

/* Zes categorieen die samen een check vormen, met per categorie of hij vast is
   of instelbaar. Registergegevens staan er altijd in; die krijgen daarom een
   andere rand dan de vijf waarover het kantoor beslist. */

.lpl-app.lpl-v3 .lpl-wcm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1000px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .lpl-app.lpl-v3 .lpl-wcm-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1040px) {
  .lpl-app.lpl-v3 .lpl-wcm-grid { grid-template-columns: repeat(3, 1fr); }
}

.lpl-app.lpl-v3 .lpl-wcm-groep {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.lpl-app.lpl-v3 .lpl-wcm-groep-vast {
  background: var(--blue-pale);
  border-color: var(--blue-soft);
}

.lpl-app.lpl-v3 .lpl-wcm-kop {
  margin-bottom: 8px;
}

.lpl-app.lpl-v3 .lpl-wcm-kop h3 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 3px;
}

.lpl-app.lpl-v3 .lpl-wcm-bron {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.lpl-app.lpl-v3 .lpl-wcm-tekst {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.lpl-app.lpl-v3 .lpl-wcm-items {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.lpl-app.lpl-v3 .lpl-wcm-items li {
  position: relative;
  padding: 5px 0 5px 20px;
  font-size: 14px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}

.lpl-app.lpl-v3 .lpl-wcm-groep-vast .lpl-wcm-items li {
  border-bottom-color: rgba(30, 111, 176, .12);
}

.lpl-app.lpl-v3 .lpl-wcm-items li:last-child { border-bottom: 0; }

.lpl-app.lpl-v3 .lpl-wcm-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
}

/* De statusregel staat onderaan uitgelijnd, ook bij ongelijke tekstlengtes. */
.lpl-app.lpl-v3 .lpl-wcm-vast,
.lpl-app.lpl-v3 .lpl-wcm-keuze {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
}

.lpl-app.lpl-v3 .lpl-wcm-vast {
  color: var(--blue-deep);
  border-top-color: rgba(30, 111, 176, .16);
}

.lpl-app.lpl-v3 .lpl-wcm-keuze {
  color: var(--muted);
}

.lpl-app.lpl-v3 .lpl-wcm-slot {
  max-width: var(--lpl-tekst-breed);
  margin: 26px auto 0;
  padding: 18px 22px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
}

/* v8.31.0: verwijzing naar de referentiepagina. Bewust een tekstlink en geen
   tweede knop; het blok heeft al genoeg nadruk. */
.lpl-app.lpl-v3 .lpl-wcm-voorbeeld {
  max-width: var(--lpl-tekst-breed);
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

.lpl-app.lpl-v3 .lpl-wcm-voorbeeld a {
  color: var(--blue-deep);
  text-decoration: underline;
}

/* Standaard-aan-markering in het mogelijkhedenblok, v8.26.0. Drie van de ruim
   dertig gegevens staan altijd aan; die krijgen een label zodat de bezoeker het
   verschil ziet tussen wat er is en wat een keuze is. */

.lpl-app.lpl-v3 .lpl-wcm-items li.lpl-wcm-standaard {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  color: var(--ink);
  font-weight: 500;
}

.lpl-app.lpl-v3 .lpl-wcm-items li.lpl-wcm-standaard::before {
  background: var(--blue-deep);
}

.lpl-app.lpl-v3 .lpl-wcm-items li span {
  padding: 1px 8px;
  border-radius: 40px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--blue-deep);
  background: var(--blue-soft);
}

/* ── Verdieping-intro, v8.27.0 ───────────────────────────────────────────── */

/* Het openingsessay van de verdiepingsroute. Leesbaar als artikel: een smalle
   kolom, ruime regelafstand, duidelijke koppen. Geen kaarten of roosters; dit
   is tekst om te lezen, niet om te scannen. */

.lpl-app.lpl-v3 .lpl-vdi-wrap {
  max-width: 760px;
}

.lpl-app.lpl-v3 .lpl-vdi-head {
  margin-bottom: 40px;
}

.lpl-app.lpl-v3 .lpl-vdi-h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 10px 0 18px;
  text-wrap: balance;
}

.lpl-app.lpl-v3 .lpl-vdi-inleiding {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.lpl-app.lpl-v3 .lpl-vdi-essay h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 40px 0 14px;
  color: var(--ink);
}

.lpl-app.lpl-v3 .lpl-vdi-essay h2:first-child {
  margin-top: 0;
}

.lpl-app.lpl-v3 .lpl-vdi-essay p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin-bottom: 16px;
  max-width: 68ch;
}

/* De eerste alinea onder een kop iets donkerder: dat markeert het begin van een
   nieuw onderwerp zonder een extra element. */
.lpl-app.lpl-v3 .lpl-vdi-essay h2 + p {
  color: var(--ink-soft);
}

/* Verdiepingsroute als zelfstandig document, v8.27.2. De body wordt buiten de
   themalayout gerenderd, dus een paar basissen die het thema anders levert. */

body.lpl-verdieping-body {
  margin: 0;
  background: var(--bg, #fff);
  color: var(--ink, #14201e);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

body.lpl-verdieping-body .lpl-app {
  max-width: none;
}