/* Esmond landing pages — shared styles (mirrors auth.css brand tokens) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1D1D1F;
  line-height: 1.6;
  background: #FFFFFF;
}

/* ── Header (matches pc-auth-header) ── */
.lp-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px clamp(16px, 2.6vw, 34px) 16px;
  border-bottom: 1px solid #d2d2d7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0F4C3A;
  text-decoration: none;
}

.lp-brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  color: #0F4C3A;
}

.lp-brand-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #0F4C3A;
}

.lp-header-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  background: #0C4738;
  color: #ffffff;
  border: 1px solid #165242;
  border-radius: 999px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(28, 90, 70, 0.2);
  transition: background 0.15s, box-shadow 0.15s;
}

.lp-header-cta:hover {
  background: #0A3026;
  box-shadow: 0 4px 14px rgba(28, 90, 70, 0.3);
}

/* ── Hero ── */
.lp-hero {
  background: #0C4738;
  color: #fff;
  padding: 80px 24px 64px;
  text-align: center;
}

.lp-hero h1 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.lp-hero p {
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto 32px;
  opacity: 0.9;
}

.lp-hero .lp-cta {
  background: #fff;
  color: #0C4738;
}

.lp-hero .lp-cta:hover {
  background: #f0f0f0;
}

/* ── Tekstlink naast het logo, "Zo werkt Esmond" (5/10): desktop én mobiel,
   naar de homepage van de eigen host. Typografie van de headernav; geen
   vlak, geen icoon. min-height = tikdoel 44px. ── */
.lp-header-how {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 28px;
  margin-right: auto;
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1F;
  text-decoration: none;
  white-space: nowrap;
}
.lp-header-how:hover { color: #0C4738; text-decoration: underline; text-underline-offset: 3px; }
.lp-header-how:focus-visible { outline: 2px solid #0F4C3A; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 600px) {
  .lp-header-how { margin-left: 16px; }
}
/* Waar een headernav staat (IT): logo + link blijven op regel één, de nav
   zakt op smalle schermen naar een tweede regel in dezelfde header. */
@media (max-width: 480px) {
  .lp-header:has(.lp-header-nav) { flex-wrap: wrap; }
  .lp-header:has(.lp-header-nav) .lp-header-nav { width: 100%; margin: 0 0 2px; }
}

/* ── Headernavigatie Prezzi · Contatti (24/9, voorlopig enkel IT) ── */
.lp-header-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  margin-right: 22px;
}
.lp-header-nav a {
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1F;
  text-decoration: none;
}
.lp-header-nav a:hover { color: #0C4738; }
@media (max-width: 600px) {
  .lp-header-nav { gap: 16px; margin-right: 0; }
  .lp-header-nav a { font-size: 14px; }
  /* Op mobiel is de header te smal voor merk + nav + knop; de grote knop
     staat meteen eronder in de hero. Enkel waar de nav bestaat. */
  .lp-header:has(.lp-header-nav) .lp-header-cta { display: none; }
}
/* 4/10 (besluit Kwinten): op mobiel nergens een upload-knop in de header,
   ook niet op pagina's zonder nav; de grote knop staat in de hero. */
@media (max-width: 767.98px) {
  .lp-header-cta { display: none; }
}

/* ── Controledatum onder de hero-intro (18/10/2026, veld bijgewerkt) ── */
.lp-hero p.lp-updated {
  font-size: 0.9rem;
  margin: -16px auto 28px;
  opacity: 0.75;
}

/* ── Prijsanker onder de hero-titel (24/9/2026, voorlopig enkel IT) ── */
.lp-hero p.lp-price {
  font-size: 1rem;
  margin: 0 auto 28px;
  opacity: 1;
  color: rgba(255, 255, 255, 0.85);
}
.lp-hero p.lp-price strong {
  color: #fff;
  font-weight: 600;
}
.lp-hero p.lp-price span {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Gratis preview onder de knop (18/10/2026, seo-cta-note.mjs). */
.lp-hero p.lp-cta-note {
  margin: 12px auto 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.lp-bottom-cta p.lp-cta-note {
  margin: 12px auto 0;
  font-size: 0.9rem;
  color: #6E6E73;
}

.lp-bottom-cta p.lp-bridge {
  font-size: 1.15rem;
  font-weight: 500;
  color: #1D1D1F;
}

/* Gratis preview in de tekst (19/10/2026, seo-inline-cta.mjs): één zin en
   de knop na de eerste sectie. Rustig: geen kader, wel lucht. */
.lp-inline-cta {
  margin: 8px 0 40px;
  padding: 20px 0;
  border-top: 1px solid #E5E5EA;
  border-bottom: 1px solid #E5E5EA;
}

.lp-content .lp-inline-cta p {
  margin-bottom: 14px;
}

/* Fictief voorbeeld van een opmerking (20/10): zo ziet de evaluatie eruit */
.lp-content .lp-inline-voorbeeld {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid #0C4738;
  background: #F4F7F5;
  font-style: italic;
}

.lp-content .lp-inline-voorbeeld span {
  display: block;
  margin-bottom: 6px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6E6E73;
}

/* Brugzin in de hero (20/10): onderwerp -> wat de evaluatie doet */
.lp-hero p.lp-brug {
  font-weight: 600;
  margin-bottom: 16px;
}

.lp-content a.lp-cta {
  color: #ffffff;
  text-decoration: none;
}

/* ── CTA button (matches .auth-page .primary) ── */
.lp-cta {
  display: inline-block;
  background: #0C4738;
  color: #ffffff;
  border: 1px solid #165242;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 17px;
  padding: 14px 36px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(28, 90, 70, 0.3);
  transition: background 0.15s, box-shadow 0.15s;
}

.lp-cta:hover {
  background: #0A3026;
  box-shadow: 0 6px 20px rgba(28, 90, 70, 0.35);
}

/* ── Bewijsblok onder de hero (20/8/2026) ── papierregister, haarlijn, 8px */
.lp-proof {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

.lp-proof + .lp-content {
  padding-top: 40px;
}

/* Voorbeeldenreeks (3/10/2026): inleiding en kaart als één blok */
.lp-content.lp-example {
  padding-bottom: 0;
}

.lp-content.lp-example h2 {
  margin-top: 0;
}

.lp-proof-card {
  background: #FDFCF9;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  padding: 20px 24px 18px;
}

.lp-proof-kicker {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0F4C3A;
  margin-bottom: 12px;
}

.lp-proof-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1D1D1F;
  margin-bottom: 12px;
}

.lp-proof-fragment {
  background: #FFFFFF;
  border: 1px solid #e5e5ea;
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0 0 14px;
}

.lp-proof-fragment p {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #333;
  margin: 0;
}

.lp-proof-fragment-label,
.lp-proof-fragment p.lp-proof-fragment-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-bottom: 6px;
}

.lp-proof-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0F4C3A;
  line-height: 1.5;
}

.lp-proof-label--suggest {
  color: #9A6B00;
}

.lp-proof-before,
.lp-proof-after {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 4px 16px;
  padding: 10px 14px;
  margin: 0 0 8px;
  background: #FFFFFF;
  border: 1px solid #e5e5ea;
  border-radius: 4px;
}

.lp-proof-before {
  border-left: 3px solid #A3532E;
}

.lp-proof-before .lp-proof-label {
  color: #A3532E;
}

.lp-proof-after {
  border-left: 3px solid #0F4C3A;
}

.lp-proof-before p,
.lp-proof-after p {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #333;
  margin: 0;
  overflow-wrap: anywhere;
}

.lp-proof-rows {
  margin-top: 4px;
}

.lp-proof-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 4px 16px;
  padding: 10px 0;
  border-top: 1px solid #e5e5ea;
}

.lp-proof-row:first-child {
  border-top: 0;
}

.lp-proof-row p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
  margin: 0;
}

.lp-proof-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e5ea;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #6e6e73;
}

/* ── Content ── */
.lp-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px;
}

.lp-content h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #0F4C3A;
  margin: 40px 0 14px;
}

.lp-content h2:first-child {
  margin-top: 0;
}

.lp-content h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0F4C3A;
  margin: 24px 0 8px;
}

.lp-content p {
  margin-bottom: 16px;
  color: #333;
  max-width: 740px;
}

.lp-content ul,
.lp-content ol {
  margin: 0 0 16px 20px;
  color: #333;
}

.lp-content li {
  margin-bottom: 8px;
}

/* Tabel in een sectie (16/10/2026, naslagpagina AI-beleid). Scrollt zelf
   horizontaal op een smal scherm, de pagina niet. */
.lp-table-wrap {
  overflow-x: auto;
  margin: 0 0 24px;
}

.lp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  color: #333;
}

.lp-table caption {
  text-align: left;
  font-size: 0.85rem;
  color: #6e6e73;
  padding-bottom: 8px;
}

.lp-table th,
.lp-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e5ea;
}

.lp-table thead th {
  font-weight: 600;
  color: #0F4C3A;
  border-bottom: 2px solid #0F4C3A;
}

.lp-table tbody th {
  font-weight: 600;
  white-space: nowrap;
}

/* Tabel met lange tekst in de eerste kolom (19/10/2026, voorbeelden van
   onderzoeksvragen): de vraag breekt af; op een smal scherm staat elke rij
   onder elkaar, zonder horizontaal scrollen. */
.lp-table--tekst tbody th {
  font-weight: 500;
  white-space: normal;
  min-width: 18rem;
}

@media (max-width: 640px) {
  .lp-table--tekst thead { display: none; }
  .lp-table--tekst tr { display: block; padding: 12px 0; border-bottom: 1px solid #e5e5ea; }
  .lp-table--tekst th,
  .lp-table--tekst td { display: block; padding: 2px 0; border: 0; min-width: 0; }
  .lp-table--tekst td { font-size: 0.85rem; color: #6e6e73; }
}

/* ── Cards ── */
.lp-tip {
  background: #f7faf9;
  border-left: 3px solid #0F4C3A;
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
}

.lp-tip p {
  margin-bottom: 0;
}

.lp-example {
  background: #fafafa;
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: 8px;
  font-style: italic;
  color: #555;
}

.lp-disclaimer {
  background: #f7faf9;
  padding: 16px 20px;
  margin: 32px 0;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #6e6e73;
}

/* ── Bottom CTA ── */
.lp-bottom-cta {
  text-align: center;
  padding: 48px 24px 64px;
}

.lp-bottom-cta p {
  margin-bottom: 16px;
  color: #333;
}

/* Slotblok boven de knop onderaan (21/10/2026, seo-slot.mjs): kop + wat de
   preview toont + wat de volledige evaluatie geeft. */
.lp-slot {
  max-width: 560px;
  margin: 0 auto 24px;
  padding: 24px 24px 20px;
  border: 1px solid #D6E2DC;
  border-radius: 12px;
  background: #F4F7F5;
  text-align: left;
}

.lp-bottom-cta p.lp-slot-kop {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #0C4738;
}

.lp-slot-regels {
  margin: 0;
  padding-left: 20px;
  color: #333;
}

.lp-slot-regels li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.lp-inline-vraag {
  font-weight: 600;
}

/* ── Footer ── */
.lp-footer {
  text-align: center;
  padding: 24px;
  font-size: 0.85rem;
  color: #86868b;
  border-top: 1px solid #d2d2d7;
}

.lp-footer a {
  color: #0F4C3A;
  text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .lp-hero { padding: 56px 20px 48px; }
  .lp-proof { padding: 28px 16px 0; }
  .lp-proof-card { padding: 16px 16px 14px; }
  .lp-proof-before, .lp-proof-after, .lp-proof-row { grid-template-columns: 1fr; gap: 2px; }
  .lp-hero h1 { font-size: 1.8rem; }
  .lp-header { padding: 14px 16px 12px; }
  .lp-brand-mark { width: 28px; height: 28px; }
  .lp-brand-text { font-size: 24px; }
  .lp-header-cta { padding: 8px 18px; font-size: 13px; }
}

/* ── Interne links (NL, 6/9/2026): pad voor Google naar de 53 NL-pagina's ── */
.lp-related {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 32px;
  border-top: 1px solid #d2d2d7;
  font-size: 0.9rem;
}
.lp-related-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #86868b;
}
.lp-related ul { list-style: none; margin: 0; padding: 0; }
.lp-related li { margin: 0 0 6px; }
.lp-related a { color: #0F4C3A; text-decoration: none; }
.lp-related a:hover { text-decoration: underline; }

/* ── Landband boven de header (5/10, seo-header-chrome.mjs): volle breedte,
   volledig klikbaar, naar de homepage van de eigen host. BE/IE/UK/DE
   merkgroen, in elke markt (23/10: geen vlagstrook NL, geen azzurro IT). ── */
.lp-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  background: #0C4738;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}
.lp-band strong { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lp-band-arrow { flex: none; transition: transform 0.15s; }
.lp-band:hover { background: #0A3026; }
.lp-band:hover .lp-band-arrow { transform: translateX(3px); }
.lp-band:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }
@media (max-width: 480px) {
  .lp-band { font-size: 13px; padding-left: 12px; padding-right: 12px; }
}

/* ── Dock (5/10): op mobiel een vaste balk onderaan met de uploadknop van
   de header, die daar verborgen is. Zichtbaar zodra de hero uit beeld is
   (class is-in, gezet door het script in de pagina). ── */
.lp-dock { display: none; }
@media (max-width: 767.98px) {
  .lp-dock {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #d2d2d7;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .lp-dock.is-in { transform: none; visibility: visible; transition: transform 0.25s ease; }
  body:has(.lp-dock) { padding-bottom: 76px; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .lp-dock, .lp-dock.is-in { transition: none; }
}
.lp-dock-brand { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: #0F4C3A; white-space: nowrap; }
.lp-dock-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-height: 44px;
  padding: 10px 22px;
  background: #0C4738;
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(28, 90, 70, 0.25);
}
.lp-dock-cta:hover { background: #0A3026; }
.lp-dock-cta:focus-visible { outline: 2px solid #0F4C3A; outline-offset: 2px; }

/* 15/10 (Kwinten): lopende tekst iets kleiner en een bredere inhoudskolom. */
.lp-content p,
.lp-content li {
  font-size: 15.5px;
}

/* 15/10 (Kwinten): zelfde opsommingsteken als op de marketingpagina's:
   klein vierkant in het merkgroen. Enkel gewone lijsten zonder eigen klasse. */
.lp-content ul:not([class]) {
  list-style: none;
  margin-left: 0;
}
.lp-content ul:not([class]) > li {
  position: relative;
  padding-left: 18px;
}
.lp-content ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #0F4C3A;
}
/* Tekstlinks (23/10/2026): merkgroen met een zachte haarlijn, volle lijn bij
   hover. Nergens browserblauw, ook niet in de groene hero of onderaan. */
.lp-content a,
.lp-bottom-cta p a:not(.lp-cta) {
  color: #0F4C3A;
  text-decoration-line: underline;
  text-decoration-color: rgba(15, 76, 58, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.lp-content a:hover,
.lp-bottom-cta p a:not(.lp-cta):hover {
  color: #0A3026;
  text-decoration-color: currentColor;
}
.lp-hero a:not(.lp-cta) {
  color: #FFFFFF;
  text-decoration-line: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.lp-hero a:not(.lp-cta):hover { text-decoration-color: #FFFFFF; }
.lp-content a:focus-visible,
.lp-hero a:not(.lp-cta):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Rekenaar woorden naar pagina's (18/10/2026). Formulier onder de hero,
   zelfde kaartstijl als het bewijsblok. Geen externe bron, geen meting. */
.lp-calc {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

.lp-calc + .lp-content {
  padding-top: 40px;
}

.lp-calc-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  background: #FDFCF9;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  padding: 20px 24px;
}

.lp-calc-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: #333;
}

.lp-calc-form input,
.lp-calc-form select {
  font: inherit;
  font-size: 1rem;
  padding: 8px 10px;
  border: 1px solid #d2d2d7;
  border-radius: 6px;
  background: #fff;
  min-width: 0;
}

.lp-calc-knop {
  grid-column: 1 / -1;
  justify-self: start;
  font: inherit;
  padding: 8px 16px;
  border: 1px solid #0F4C3A;
  border-radius: 6px;
  background: #fff;
  color: #0F4C3A;
  cursor: pointer;
}

.lp-calc-uit {
  grid-column: 1 / -1;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0F4C3A;
}

@media (max-width: 600px) {
  .lp-calc-form {
    grid-template-columns: 1fr;
  }
}

/* ── Mobiel strak (19/10/2026, Kwinten: "mobiel te druk"). Onder 768px:
   - geen landband: hij stuurt naar de homepage van de host waar je al bent,
     en de dock onderaan draagt de gratis preview;
   - hero links uitgelijnd en compacter: een gecentreerde alinea van tien
     regels leest als een muur. ── */
@media (max-width: 767.98px) {
  .lp-band { display: none; }
  .lp-hero { padding: 40px 20px 36px; text-align: left; }
  .lp-hero h1 { font-size: 26px; }
  .lp-hero p { font-size: 1rem; margin: 0 0 24px; }
  .lp-hero p.lp-updated { margin: -12px 0 24px; }
}

/* Tekst anonimiseren (20/10/2026, proef esmond.nl). Alles in de browser.
   26/10 (review Astra; Kwinten: "visueel niet mega fancy"): breder werkvlak
   op een lichte band, twee witte kaarten (invoer met tabbladen; resultaat als
   gemarkeerde tekst naast de lijst), elke code een chip met kleur per soort
   én de code als tekst (kleur is nooit het enige signaal), downloadbalk vast
   onderaan op mobiel. Knoppen en kleuren volgen de homepage-laag onderaan. */
.lp-anon {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #F4F6F3;
  box-shadow: 0 0 0 100vmax #F4F6F3;
  clip-path: inset(0 -100vmax);
}

.lp-anon + .lp-content {
  padding-top: 56px;
}

.lp-anon-belofte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
}

.lp-anon-belofte li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #DCE3DE;
  color: #0F4C3A;
  font-size: 13.5px;
  font-weight: 500;
}

.lp-anon-belofte li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0F4C3A;
}

.lp-anon-kaart {
  background: #fff;
  border: 1px solid #E3E6E3;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lp-anon-kaart:focus-visible {
  outline: 2px solid #0C4738;
  outline-offset: 2px;
}

.lp-anon-kop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-anon-stap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0C4738;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex: none;
}

.lp-anon-h {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #191E1B;
}

.lp-anon-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #EEF1EE;
  border-radius: 10px;
  align-self: flex-start;
}

.lp-anon-tabs [role="tab"] {
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #525D57;
  cursor: pointer;
}

.lp-anon-tabs [role="tab"][aria-selected="true"] {
  background: #fff;
  color: #191E1B;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.lp-anon-tabs [role="tab"]:focus-visible {
  outline: 2px solid #0C4738;
  outline-offset: 2px;
}

.lp-anon-zone {
  border: 1.5px dashed #C9D3CC;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  background: #FAFBF9;
  display: grid;
  gap: 10px;
  justify-items: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.lp-anon-zone:hover,
.lp-anon-zone.active {
  border-color: #0C4738;
  background: #fff;
}

.lp-anon-zone.active,
.lp-anon-zone.has-file {
  border-style: solid;
  background: #EEF4F0;
}

.lp-anon-zone-icoon {
  color: #0C4738;
  opacity: 0.55;
}

.lp-anon-zone-hint,
.lp-anon-zone-bestand {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  color: #6E7872;
  max-width: 460px;
}

.lp-anon-zone-bestand {
  font-weight: 500;
  color: #0F4C3A;
}

.lp-anon-zone-bestand:empty {
  display: none;
}

.lp-anon-veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: #191E1B;
}

.lp-anon-veld-label {
  font-weight: 500;
  font-size: 15px;
}

.lp-anon-hulp {
  font-size: 13.5px;
  line-height: 1.5;
  color: #525D57;
}

.lp-anon textarea,
.lp-anon input[type="text"] {
  font: inherit;
  font-size: 1rem;
  padding: 11px 13px;
  border: 1px solid #CFD6D1;
  border-radius: 8px;
  background: #fff;
  color: #191E1B;
  width: 100%;
  box-sizing: border-box;
}

.lp-anon textarea:focus,
.lp-anon input[type="text"]:focus {
  outline: 2px solid #0C4738;
  outline-offset: 1px;
  border-color: #0C4738;
}

.lp-anon textarea {
  resize: vertical;
  line-height: 1.55;
  min-height: 180px;
}

.lp-anon-namen {
  padding-top: 4px;
}

.lp-anon-knop {
  font: inherit;
  font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid #0C4738;
  background: #0C4738;
  color: #fff;
  cursor: pointer;
}

.lp-anon-knop:hover {
  background: #0A3026;
}

.lp-anon-knop--licht {
  background: #fff;
  color: #0C4738;
  border-color: #C9D3CC;
}

.lp-anon-knop--licht:hover {
  background: #F1F5F2;
  border-color: #0C4738;
}

.lp-anon-knop:focus-visible {
  outline: 2px solid #0C4738;
  outline-offset: 2px;
}

.lp-anon-startrij {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lp-anon-start {
  padding: 13px 32px;
}

.lp-anon-melding {
  margin: 0;
  font-size: 0.95rem;
  color: #165242;
}

.lp-anon-melding:empty {
  display: none;
}

/* Resultaat (27/10 strakker, Kwinten): een balk met telling en nacontrole,
   de tekst met chips links, het overzicht per soort rechts in één kader dat
   meeschuift, de downloads eronder en de waarschuwing achter een <details>. */
.lp-anon-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid #EDF0ED;
}

.lp-anon-telling {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-anon-getal {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #0F4C3A;
  font-variant-numeric: tabular-nums;
}

.lp-anon-telling-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14.5px;
  color: #191E1B;
}

.lp-anon-soorten {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: #6E7872;
}

.lp-anon-soorten:empty {
  display: none;
}

.lp-anon-soort::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--anon-rand, #999);
}

.lp-anon-nacontrole {
  margin: 0;
  max-width: 440px;
  padding: 7px 12px 7px 30px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #0F4C3A;
  background: #EEF6F1 no-repeat 10px 9px / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%230F4C3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lp-anon-nacontrole:empty {
  display: none;
}

.lp-anon-nacontrole.is-rest {
  color: #7A4B06;
  background-color: #FBF2DF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.5v4.2' stroke='%237A4B06' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='9.3' r='1' fill='%237A4B06'/%3E%3C/svg%3E");
}

.lp-anon-werk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.lp-anon-tekstblok {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lp-anon-titel {
  font-weight: 500;
  margin: 0;
  font-size: 15px;
  color: #191E1B;
}

.lp-anon-tekst {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.75;
  font-size: 15.5px;
  color: #191E1B;
  padding: 20px 22px;
  border: 1px solid #E3E6E3;
  border-radius: 12px;
  background: #FBFCFB;
  max-height: 64vh;
  overflow: auto;
}

.lp-anon-tekst:focus-visible {
  outline: 2px solid #0C4738;
  outline-offset: 2px;
}

.lp-anon-chip,
.lp-anon-soort {
  --anon-bg: #ECEEED;
  --anon-ink: #3B443F;
  --anon-rand: #B9C1BC;
}

.lp-anon-chip--persoon,
.lp-anon-soort--persoon {
  --anon-bg: #E3F1E9;
  --anon-ink: #0F4C3A;
  --anon-rand: #9CC9B0;
}

.lp-anon-chip--organisatie,
.lp-anon-soort--organisatie {
  --anon-bg: #E4ECF8;
  --anon-ink: #1F3F72;
  --anon-rand: #A9BFE3;
}

.lp-anon-chip--plaats,
.lp-anon-soort--plaats {
  --anon-bg: #FBEFD6;
  --anon-ink: #7A4B06;
  --anon-rand: #E2C48A;
}

.lp-anon-chip {
  display: inline;
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.92em;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--anon-ink);
  background: var(--anon-bg);
  box-shadow: inset 0 0 0 1px var(--anon-rand);
}

.lp-anon-tekst .lp-anon-chip {
  cursor: pointer;
  animation: lp-anon-in 0.7s ease-out;
}

.lp-anon-tekst .lp-anon-chip:hover {
  box-shadow: inset 0 0 0 1px var(--anon-ink);
}

@keyframes lp-anon-in {
  from { background: #0C4738; color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-anon-tekst .lp-anon-chip { animation: none; }
}

/* Het overzicht: één kader, kop en "naam toevoegen" vast, de lijst schuift. */
.lp-anon-paneel {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  border: 1px solid #E3E6E3;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.lp-anon-paneel-kop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #EDF0ED;
}

.lp-anon-paneel-kop .lp-anon-let {
  font-size: 13px;
}

.lp-anon-lijst {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 10px;
}

.lp-anon-lijst:empty {
  display: none;
}

.lp-anon-groep-kop {
  margin: 0;
  padding: 12px 8px 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6E7872;
}

.lp-anon-groep-kop span {
  margin-left: 6px;
  font-weight: 500;
  color: #A1AAA5;
}

.lp-anon-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  grid-template-areas:
    "vink term aantal"
    ".    code code";
  align-items: center;
  gap: 5px 10px;
  padding: 8px;
  border-radius: 8px;
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.3s;
}

.lp-anon-item + .lp-anon-item {
  box-shadow: 0 -1px 0 #F1F3F1;
}

.lp-anon-item:hover {
  background: #F6F8F6;
}

.lp-anon-item.is-licht {
  background: #E3F1E9;
}

.lp-anon-item input {
  grid-area: vink;
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: #0C4738;
}

.lp-anon-item-term {
  grid-area: term;
  font-weight: 500;
  color: #191E1B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-anon-item-aantal {
  grid-area: aantal;
  color: #8A938E;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.lp-anon-item-code {
  grid-area: code;
  justify-self: start;
  font-size: 13px;
}

.lp-anon-item.is-uit .lp-anon-item-term {
  color: #8A938E;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: #C3CAC6;
}

.lp-anon-item-uit {
  color: #8A938E;
  font-style: italic;
}

/* De code van een persoon is zelf de keuze voor de rol. */
.lp-anon-codekeuze {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  padding: 2px 24px 2px 8px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: var(--anon-bg) no-repeat right 7px center / 9px 6px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%230F4C3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lp-anon-codekeuze:hover,
.lp-anon-codekeuze:focus-visible {
  box-shadow: inset 0 0 0 1px var(--anon-ink);
  outline: none;
}

.lp-anon-toevoegen {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid #EDF0ED;
  background: #FAFBF9;
}

.lp-anon-toevoegen .lp-anon-veld {
  flex: 1;
  min-width: 0;
}

.lp-anon-toevoegen .lp-anon-veld-label {
  font-size: 13.5px;
}

.lp-anon-toevoegen input[type="text"] {
  padding: 9px 11px;
  font-size: 14.5px;
}

.lp-anon-toevoegen .lp-anon-knop {
  padding: 9px 14px;
  font-size: 14px;
}

.lp-anon-let {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #525D57;
  margin: 0;
}

.lp-anon-acties {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid #EDF0ED;
}

.lp-anon-acties .lp-anon-knop {
  padding: 10px 18px;
  font-size: 14.5px;
}

.lp-anon-opmaak {
  margin: 0 0 0 6px;
  flex: 1 1 240px;
  font-size: 13px;
  line-height: 1.45;
  color: #2E6B55;
}

/* Toolpagina's (27/10, Kwinten: "titels kleinere fonts, zakelijk"): de
   titel is alleen "Tekst anonimiseren", de uitleg staat eronder. Kleinere
   koppen dan op de verhaalpagina's, minder lucht boven de titel. */
body:has(.lp-anon) .lp-hero { padding-top: 44px; padding-bottom: 28px; }
body:has(.lp-anon) .lp-hero h1 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
body:has(.lp-anon) .lp-hero p { font-size: 15.5px; margin-bottom: 0; }
body:has(.lp-anon) .lp-anon-h { font-size: 1rem; font-weight: 600; }
body:has(.lp-anon) .lp-anon-stap { width: 24px; height: 24px; font-size: 12.5px; }
body:has(.lp-anon) .lp-content h2 { font-size: 1.15rem; font-weight: 600; }
body:has(.lp-anon) .lp-content h3 { font-size: 1rem; }
.lp-anon-knop.is-gekopieerd { background: #0C4738; color: #fff; }

/* Vinkje "afbeeldingen weglaten" in de opmaak-regel (27/10 avond). */
.lp-anon-afbeeldingen {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  color: #2E6B55;
  cursor: pointer;
}
.lp-anon-afbeeldingen input { margin: 3px 0 0; flex: 0 0 auto; }

.lp-anon-letop {
  font-size: 13.5px;
  line-height: 1.55;
  color: #525D57;
}

.lp-anon-letop summary {
  cursor: pointer;
  color: #3B443F;
  font-weight: 500;
}

.lp-anon-letop p {
  margin: 8px 0 0;
}

.lp-anon [hidden] {
  display: none !important;
}

@media (max-width: 899.98px) {
  .lp-anon-werk { grid-template-columns: 1fr; }
  .lp-anon-paneel { position: static; max-height: none; }
  .lp-anon-lijst { max-height: 50vh; }
}

@media (max-width: 767.98px) {
  .lp-anon { padding: 28px 16px 32px; gap: 14px; }
  .lp-anon-kaart { padding: 18px 16px; border-radius: 12px; }
  .lp-anon-tabs { align-self: stretch; }
  .lp-anon-tabs [role="tab"] { flex: 1; }
  .lp-anon-tekst { max-height: 55vh; font-size: 15px; padding: 14px 16px; }
  .lp-anon-getal { font-size: 32px; }
  .lp-anon-nacontrole { max-width: none; }
  .lp-anon-acties {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -16px -18px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #E3E6E3;
    border-radius: 0 0 12px 12px;
    gap: 8px;
  }
  .lp-anon-acties .lp-anon-knop { flex: 1 1 calc(50% - 8px); text-align: center; font-size: 14px; padding: 10px 8px; }
  .lp-anon-acties [data-anon-docx] { flex-basis: 100%; }
  /* Op mobiel staat de balk vast onderaan: zo laag mogelijk. De opmaak staat al bij het kiezen van het bestand. */
  /* Het vinkje voor afbeeldingen blijft wel zichtbaar zolang er afbeeldingen zijn. */
  .lp-anon-opmaak-tekst { display: none; }
  .lp-anon-opmaak:not(:has(.lp-anon-afbeeldingen:not([hidden]))) { display: none; }
  .lp-anon-acties .lp-anon-knop { padding: 9px 8px; }
}

/* Instagram in de header van de anonimiseertool (21/10) */
.lp-header-insta {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: 12px;
}

.lp-header-insta + .lp-header-cta {
  margin-left: 0;
}

/* De uitnodiging voor de preview (21/10; 26/10 een gewone kaart na het
   resultaat, geen zware groene omlijsting) en de privacy-uitleg. */
.lp-anon-preview {
  gap: 10px;
  align-items: flex-start;
}

.lp-anon-door {
  margin: 0;
  color: #525D57;
}

.lp-anon-privacy {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #525D57;
}

.lp-anon-privacy summary {
  cursor: pointer;
  color: #0F4C3A;
  font-weight: 500;
}

.lp-anon-privacy p {
  margin: 8px 0 0;
}

/* ── Homepage-taal (23/10/2026, Kwinten: "tikje meer de vibe van de homepage
   en de browserfeedback"). Laatste laag, overschrijft wat erboven staat:
   witte hero links uitgelijnd op de tekstkolom, Geist Sans 500 in
   bijna-zwart, gedempte lopende tekst, rechthoekige knoppen zonder schaduw,
   haarlijnen tussen secties en de voorbeeldopmerking als feedbackkaart.
   Merkgroen blijft voor knoppen, links en accenten. ── */
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/geist-sans-latin-600-normal.woff2') format('woff2');
}

body {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #191E1B;
}

/* Hero: wit, links, op dezelfde kolom als de tekst eronder (820px - 2x24). */
.lp-hero {
  background: #FFFFFF;
  color: #191E1B;
  text-align: left;
  padding: 72px max(24px, calc((100% - 772px) / 2)) 40px;
  border-bottom: 1px solid #E3E6E3;
}
.lp-hero h1 {
  font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #191E1B;
  margin-bottom: 18px;
}
.lp-hero p {
  font-size: 17px;
  max-width: 640px;
  margin: 0 0 28px;
  color: #525D57;
  opacity: 1;
}
.lp-hero p.lp-brug { color: #191E1B; font-weight: 500; }
.lp-hero p.lp-updated { margin: -16px 0 28px; font-size: 0.875rem; color: #6E7872; opacity: 1; }
/* Redactie en datum onder de h1 (26/10/2026, toppagina's) */
.lp-hero p.lp-byline { margin: -6px 0 20px; font-size: 0.875rem; color: #6E7872; opacity: 1; }
.lp-hero p.lp-byline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lp-hero p.lp-price { color: #525D57; }
.lp-hero p.lp-price strong { color: #191E1B; }
.lp-hero p.lp-price span { color: #6E7872; }
.lp-hero p.lp-cta-note { margin: 12px 0 0; color: #6E7872; opacity: 1; }
.lp-hero a:not(.lp-cta) {
  color: #0F4C3A;
  text-decoration-color: rgba(15, 76, 58, 0.35);
}
.lp-hero a:not(.lp-cta):hover { color: #0A3026; text-decoration-color: currentColor; }

/* Knoppen zoals op de homepage: rechthoekig, licht afgerond, geen schaduw. */
.lp-cta,
.lp-hero .lp-cta {
  background: #0C4738;
  color: #FFFFFF;
  border: 1px solid #0C4738;
  border-radius: 8px;
  box-shadow: none;
  font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 24px;
}
.lp-cta:hover,
.lp-hero .lp-cta:hover {
  background: #0A3026;
  box-shadow: none;
}
.lp-header-cta,
.lp-dock-cta {
  border-radius: 8px;
  box-shadow: none;
  font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
  font-weight: 500;
}
.lp-header-cta:hover { box-shadow: none; }

/* Tekst: titels bijna-zwart in Geist, haarlijn tussen secties. */
.lp-content h2 {
  font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #191E1B;
  margin: 48px 0 14px;
  padding-top: 36px;
  border-top: 1px solid #E3E6E3;
}
.lp-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.lp-content h3 {
  font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #191E1B;
}
.lp-content p,
.lp-content ul,
.lp-content ol {
  color: #3F4943;
}
.lp-content strong { color: #191E1B; font-weight: 600; }

/* Voorbeeldopmerking als feedbackkaart, zoals op de homepage: witte kaart in
   een groen kader (box-shadow, zodat de tekst in de kaart zelf staat), label
   in kleine kapitalen, passage in serif. */
.lp-content .lp-inline-voorbeeld {
  margin: 10px 10px 30px;
  padding: 16px 20px 18px;
  border: 0;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 0 0 10px #0C4738;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px;
  font-style: normal;
  line-height: 1.5;
  color: #191E1B;
}
.lp-content .lp-inline-voorbeeld span {
  display: block;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E3E6E3;
  font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A938E;
}
.lp-content .lp-inline-cta {
  border-color: #E3E6E3;
  /* 27/10: geen onderlijn meer; de volgende sectie opent al met een haarlijn. */
  border-bottom: 0;
  padding-bottom: 8px;
}
/* Bijgewerkt-regel (27/10): klein, onderaan de tekst. */
.lp-content p.lp-updated {
  margin: 48px 0 0;
  padding-top: 16px;
  border-top: 1px solid #EDF0ED;
  font-size: 0.8rem;
  color: #8A938E;
}

/* Uploaden in het previewblok (25/10, seo-upload.js; sinds 27/10 zonder
   sleepzin en zonder slepen). Met het script is de uploadknop een <label>
   rond het bestandsveld (zoals de hero van de app): zelfde knop, met wijzer
   en focusrand. De melding is leeg tot er iets te zeggen valt. */
.lp-content label.lp-cta { cursor: pointer; }
.lp-content label.lp-cta:focus-visible { outline: 2px solid #0F4C3A; outline-offset: 2px; }
.lp-content .lp-inline-cta p.lp-upload-melding {
  margin: 12px 0 0;
  font-size: 0.95rem;
  color: #191E1B;
}
.lp-content .lp-inline-cta p.lp-upload-melding:empty { margin: 0; }

/* Slotblok en knop onderaan: links op de tekstkolom, kaart in papierregister. */
.lp-bottom-cta {
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
  padding: 40px 24px 64px;
}
.lp-bottom-cta p { color: #3F4943; }
.lp-bottom-cta p.lp-cta-note { color: #6E7872; }
.lp-slot {
  max-width: none;
  margin: 0 0 24px;
  border: 1px solid #E3E6E3;
  border-radius: 10px;
  background: #FAFBFA;
}
.lp-bottom-cta p.lp-slot-kop {
  font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #191E1B;
}
.lp-slot-regels { color: #3F4943; }

/* Gerelateerd en footer: haarlijn in dezelfde toon. */
.lp-related { border-top-color: #E3E6E3; }
.lp-related-title { color: #6E7872; letter-spacing: 0.12em; font-size: 0.72rem; }
.lp-footer { border-top-color: #E3E6E3; }

@media (max-width: 767.98px) {
  .lp-hero { padding: 40px 20px 28px; }
  .lp-hero h1 { font-size: 28px; }
  .lp-hero p { font-size: 16px; margin: 0 0 22px; }
  .lp-content h2 { font-size: 1.3rem; margin-top: 36px; padding-top: 28px; }
  .lp-bottom-cta { padding: 32px 20px 56px; }
}

/* ── iPhone-fixes (24/10/2026, WebKit-check 23/10 op iPhone 15, SE en 320px).
   Alleen mobiel; desktop blijft zoals hij was.
   1. Header op één regel. it (nav Prezzi · Contatti) en wb ("Comment
      fonctionne Esmond") liepen over: it zakte naar twee regels, wb gaf
      horizontale scroll op 320px. Het slot " Esmond" van de headerlink valt
      weg (seo-header-link.mjs), merk en links worden compacter, en onder
      360px wijkt Prezzi (de prijs staat al in de hero van elke IT-pagina).
   2. Tikdoelen minstens 44px hoog: headerlinks en de links bij "gerelateerd".
   3. Kleine tekst minstens 12px; footertekst donkerder (#6E6E73 op wit,
      5,1:1, WCAG AA). De disclaimer in de footer draagt een inline stijl
      (font-size 0.82em, opacity 0.7) uit de generators, vandaar !important. ── */
/* De link is inline-flex: zonder pre verliest het slot zijn voorloopspatie. */
.lp-header-tail { white-space: pre; }
@media (max-width: 440px) {
  .lp-header-tail { display: none; }
}
@media (max-width: 480px) {
  .lp-header:has(.lp-header-nav),
  .lp-header:has(.lp-header-tail) { flex-wrap: nowrap; gap: 12px; }
  .lp-header:has(.lp-header-nav) .lp-header-nav { width: auto; margin: 0 0 0 auto; gap: 12px; }
  .lp-header:has(.lp-header-nav) .lp-brand,
  .lp-header:has(.lp-header-tail) .lp-brand { gap: 8px; }
  .lp-header:has(.lp-header-nav) .lp-brand-mark,
  .lp-header:has(.lp-header-tail) .lp-brand-mark { width: 26px; height: 26px; }
  .lp-header:has(.lp-header-nav) .lp-brand-text,
  .lp-header:has(.lp-header-tail) .lp-brand-text { font-size: 20px; }
  .lp-header:has(.lp-header-nav) .lp-header-how,
  .lp-header:has(.lp-header-tail) .lp-header-how { margin-left: 0; font-size: 13px; }
  .lp-header:has(.lp-header-nav) .lp-header-nav a { font-size: 13px; }
}
@media (max-width: 360px) {
  .lp-header-nav a[href$="/prezzi/"] { display: none; }
}
@media (max-width: 767.98px) {
  .lp-header-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .lp-related li { margin: 0; }
  .lp-related a { display: block; padding: 11px 0; }
  .lp-related-title { font-size: 12px; }
  .lp-content .lp-inline-voorbeeld span { font-size: 12px; }
  .lp-proof-fragment-label,
  .lp-proof-fragment p.lp-proof-fragment-label { font-size: 12px; }
  .lp-footer { color: #6E6E73; }
  .lp-footer > span[style*="opacity"] { font-size: 12px !important; opacity: 1 !important; }
}

/* Smalle schermen (25/10/2026, contactblad #470): een woord, url of bronlink
   die langer is dan de regel breekt af in plaats van de pagina breder te
   maken. Werkt alleen waar een woord niet past; andere regels blijven gelijk. */
.lp-hero h1,
.lp-content {
  overflow-wrap: break-word;
}

/* De knop in het previewblok is een link in .lp-content: ".lp-content
   a:hover" maakte de tekst donkergroen op de donkergroene knop (onzichtbaar
   bij hover, en op een telefoon na het tikken). Gevonden 25/10/2026. */
.lp-content a.lp-cta:hover,
.lp-content a.lp-cta:focus-visible { color: #FFFFFF; }

/* Een tabel zonder .lp-table-wrap (handgeschreven pagina's) scrollt op een
   smal scherm zelf horizontaal, de pagina niet (25/10/2026, nl
   scriptie-hbo-vs-wo: +46 px op 390 px). Alleen onder 768 px: desktop blijft
   pixel-identiek. */
@media (max-width: 768px) {
  .lp-content > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ══ Inhoudstafel (25/10/2026, scripts/seo-inhoudstafel.mjs) ══════════════
   Blok boven de tekst van lange SEO-pagina's (vanaf vier h2) met een sprong
   naar elke kop. Zelfde kolom als lp-content (820px - 2x24), kaart in het
   papierregister van het slotblok, titel als het label van "gerelateerd",
   links in merkgroen. Mobiel (<= 768px) dicht, desktop open (het script in
   het blok klapt hem op een smal scherm dicht). Niet sticky. Alles voor de
   inhoudstafel staat in dit blok. ── */
.lp-toc {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px 0;
}
.lp-toc + .lp-content {
  padding-top: 40px;
}
.lp-toc-details {
  border: 1px solid #E3E6E3;
  border-radius: 10px;
  background: #FAFBFA;
}
.lp-toc-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 20px;
  font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6E7872;
  cursor: pointer;
  list-style: none;
}
.lp-toc-titel::-webkit-details-marker { display: none; }
.lp-toc-titel::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lp-toc-details[open] > .lp-toc-titel::after { transform: translateY(2px) rotate(-135deg); }
.lp-toc-titel:focus-visible { outline: 2px solid #0F4C3A; outline-offset: 2px; border-radius: 10px; }
.lp-toc-lijst {
  list-style: none;
  margin: 0;
  padding: 0 20px 14px;
}
.lp-toc-lijst li {
  margin: 0;
  break-inside: avoid;
}
.lp-toc-lijst a {
  display: block;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.4;
  color: #0F4C3A;
  text-decoration: none;
  overflow-wrap: break-word;
}
.lp-toc-lijst a:hover { color: #0A3026; text-decoration: underline; text-underline-offset: 3px; }
.lp-toc-lijst a:focus-visible { outline: 2px solid #0F4C3A; outline-offset: 2px; border-radius: 4px; }
/* Een sprong laat wat lucht boven de kop (de header scrolt mee, hij bedekt niets). */
.lp-content h2[id] { scroll-margin-top: 16px; }
@media (min-width: 769px) {
  /* Lange lijsten in twee kolommen, zodat het blok de tekst niet ver wegduwt. */
  .lp-toc-lijst:has(> li:nth-child(8)) { column-count: 2; column-gap: 40px; }
}
@media (max-width: 768px) {
  .lp-toc { padding-top: 24px; }
  .lp-toc + .lp-content { padding-top: 32px; }
  .lp-toc-titel { padding: 10px 16px; }
  .lp-toc-lijst { padding: 0 16px 6px; }
  .lp-toc-lijst li + li { border-top: 1px solid #E3E6E3; }
  /* Tikdoel minstens 44px, zoals bij "gerelateerd". */
  .lp-toc-lijst a { padding: 11px 0; }
}
/* ══ einde Inhoudstafel ══ */