/*
 * Zichtbaarheidsmeting, v8.30.0
 *
 * Geen eigen :root. Uitsluitend tokens uit landing.css, met letterlijke
 * fallbacks voor het geval het blok buiten .lpl-app wordt geplaatst.
 * Geen inline styling, geen dependencies, geen animaties buiten een enkele
 * hoverovergang die prefers-reduced-motion respecteert.
 */

.lpl-zm-stappen {
  list-style: none;
  margin: 0 0 var(--lpl-gap-grid, 32px);
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

.lpl-zm-stap {
  position: relative;
  padding: 24px 22px 22px;
  background: var(--bg, #ffffff);
  border: 1px solid var(--line, #e4e9f0);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 41, 0.05));
}

.lpl-zm-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--blue-soft, #e8f0f9);
  color: var(--blue-deep, #0247A4);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.lpl-zm-kop {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink, #0f1729);
}

.lpl-zm-txt {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted, #525c6e);
}

.lpl-zm-cijfers {
  margin: 0 0 var(--lpl-gap-grid, 32px);
  padding: 22px;
  background: var(--blue-pale, #f3f8fc);
  border: 1px solid var(--blue-bright-soft, #dcecfb);
  border-radius: var(--radius-lg, 16px);
}

.lpl-zm-grens {
  padding: 22px 24px;
  background: var(--bg-alt, #f5f8fb);
  border-left: 3px solid var(--blue-bright, #2796EB);
  border-radius: var(--radius, 12px);
}

.lpl-zm-grens-kop {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink, #0f1729);
}

.lpl-zm-grens p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft, #2a3447);
}

.lpl-zm-gebruik {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft, #2a3447);
}

.lpl-zm-noot {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted, #7d8798);
}

@media (max-width: 900px) {
  .lpl-zm-stappen {
    grid-template-columns: 1fr;
  }
}