/* Extra onderdelen bovenop style.css (zelfde tokens). */
.hero__lead + .hero__note { margin: calc(var(--s-4) * -1) 0 var(--s-6); font-size: var(--fs-sm); color: var(--text-dim); max-width: 38em; }
.mail-example { max-width: 34rem; margin: 0 auto; background: var(--surface-solid); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.mail-example__bar { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.mail-example__head { padding: var(--s-4) var(--s-5) 0; }
.mail-example__subject { margin: 0; font-weight: 700; font-size: var(--fs-lg); }
.mail-example__meta { margin: var(--s-1) 0 0; font-size: var(--fs-sm); color: var(--text-dim); }
.mail-example__body { padding: var(--s-4) var(--s-5) var(--s-5); color: var(--text-dim); }
.mail-example__body p:last-child { margin-bottom: 0; }
.hero .eyebrow { color: color-mix(in srgb, var(--accent) 60%, var(--text)); }
.features-note { margin: var(--s-6) auto 0; max-width: 44rem; text-align: center; color: var(--text-dim); }
.feature__sub { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--text-dim); }
@media (min-width: 820px) { .steps.steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps.steps--4 { grid-template-columns: repeat(4, 1fr); } }
.scene__item { padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.scene__item p { margin: var(--s-2) 0 0; color: var(--text-dim); font-size: var(--fs-sm); }
.scene__item .badge { margin-left: var(--s-2); }
.ok-sub { margin: var(--s-2) 0 0; font-weight: 400; font-size: var(--fs-sm); }
.apk-check__cta { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--text-dim); }

/* Licht/donker-schakelaar in de header (theme.js haalt [hidden] weg en zet .has-theme op <html>). */
.theme-toggle { order: 4; flex: none; width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; cursor: pointer;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle[aria-pressed="false"] .icon-sun { display: block; }
.theme-toggle[aria-pressed="false"] .icon-moon { display: none; }
@media (max-width: 819px) {
  /* Mobiel: regel 1 = merk, sitewissel, taal; regel 2 = navigatie en themaknop. */
  .site-header__inner { column-gap: 8px; }
  .brand { font-size: 1.15rem; }
  .has-theme .site-nav { width: calc(100% - 60px); }
  .has-theme .site-nav a { padding-inline: 4px; font-size: .8125rem; }
  .site-switch a { padding-inline: 7px; font-size: .8125rem; }
  .site-header .lang-switch { padding: 0; font-size: .75rem; }
}
@media (min-width: 820px) { .theme-toggle { order: 0; } }

/* Taalschakelaar (EN | NL) in de header: 44px tikdoel, huidige taal vet. */
.lang-switch { flex: none; margin-left: auto; gap: .3em; min-width: 44px; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); }
.lang-switch b { color: var(--text); font-weight: 800; }
.lang-switch:hover { border-color: var(--accent); }