/* Landing page — prepensioenplanner.nl */
:root {
  --lp-bg: #f8f9fa;
  --lp-card: #fff;
  --lp-text: #1a1a1a;
  --lp-muted: #5a5a5a;
  --lp-accent: #0d6efd;
  --lp-border: #dee2e6;
  --lp-radius: 8px;
  --lp-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.landing {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--lp-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.landing a { color: var(--lp-accent); text-decoration: none; }
.landing a:hover { text-decoration: underline; }

/* Hero */
.lp-hero {
  text-align: center;
  padding: 3rem 1rem 2.5rem;
  max-width: 640px;
  margin: 0 auto;
}
.lp-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.lp-hero .lp-tagline {
  font-size: 1.125rem;
  color: var(--lp-muted);
  margin: 0 0 1.5rem;
}
.lp-cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--lp-accent);
  color: #fff !important;
  border-radius: var(--lp-radius);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.lp-cta:hover { opacity: 0.9; text-decoration: none; }

/* Sections */
.lp-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.lp-section h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.lp-section p {
  margin: 0 0 0.75rem;
  color: var(--lp-muted);
}

/* How it works — 3 steps */
.lp-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 600px) {
  .lp-steps { grid-template-columns: 1fr; }
}
.lp-step {
  background: var(--lp-card);
  padding: 1.25rem;
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  text-align: center;
}
.lp-step strong { display: block; margin-bottom: 0.25rem; }

/* Gratis vs Premium table */
.lp-comparison {
  width: 100%;
  border-collapse: collapse;
  background: var(--lp-card);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
}
.lp-comparison th, .lp-comparison td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--lp-border);
}
.lp-comparison th {
  background: var(--lp-bg);
  font-weight: 600;
}
.lp-comparison tr:last-child td { border-bottom: 0; }
.lp-comparison .lp-check { color: #198754; }
.lp-comparison .lp-lock { color: var(--lp-muted); }

/* Demo charts */
.lp-demo-charts {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}
.lp-demo-chart-wrap {
  background: var(--lp-card);
  padding: 1rem;
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
}
.lp-demo-chart-wrap canvas { max-width: 100%; height: auto !important; }

/* E-E-A-T section */
.lp-eat ul { margin: 0.5rem 0; padding-left: 1.25rem; }
.lp-eat li { margin-bottom: 0.5rem; color: var(--lp-muted); }

/* FAQ */
.lp-faq dl { margin: 0; }
.lp-faq dt {
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}
.lp-faq dd { margin: 0; color: var(--lp-muted); }

/* Footer */
.lp-footer {
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
  border-top: 1px solid var(--lp-border);
  color: var(--lp-muted);
  font-size: 0.9rem;
}
.lp-footer a { margin: 0 0.5rem; }
.lp-footer .lp-cookies { margin-top: 0.75rem; }
.lp-footer .lp-updated { margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.9; }

/* Secondary CTA */
.lp-cta-secondary {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px solid var(--lp-accent);
  color: var(--lp-accent);
  border-radius: var(--lp-radius);
  font-weight: 600;
  margin-left: 0.5rem;
}
.lp-cta-secondary:hover { background: var(--lp-accent); color: #fff; text-decoration: none; }