/* ============================================================================
   DAGB SiteMonitor — V2 publieke info-pagina (/) en aanmeld-pagina (/aanmelden)
   Reuses design tokens van de app maar voegt marketing-specifieke layout toe.
   ============================================================================ */

:root {
  --bg: #FAF7F2;
  --bg-soft: #F5F0E7;          /* Warmer alt-bg ipv pure wit */
  --card: #FFFDF9;             /* Iets warmer dan #fff zodat cards opvallen op beige */
  --border: #E8E4DB;
  --border-strong: #D3D1C7;
  --text: #2C2A26;
  --muted: #5F5E5A;
  --subtle: #6F6E68;
  --teal: #0C6B63;
  --teal-dark: #094F49;
  --teal-light: rgba(12, 107, 99, 0.08);
  /* Tweede accent — terracotta voor onderstreping en kleine markers */
  --terra: #C8654A;
  --terra-light: rgba(200, 101, 74, 0.12);
  --warn: #C2620C;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  /* Editorial typografie */
  --serif: 'Fraunces', 'Tiempos Headline', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------------- */
/* Header — top-bar met logo, login en aanmelden                      */
/* ----------------------------------------------------------------- */
.info-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.info-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.info-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; color: var(--text);
  text-decoration: none;
}
.info-logo svg { color: var(--teal); }
.info-nav { display: flex; align-items: center; gap: 8px; }
.info-nav a, .info-nav button {
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border: none; cursor: pointer; font-family: inherit;
}
.info-nav .link-secondary {
  color: var(--text);
  background: transparent;
}
.info-nav .link-secondary:hover {
  background: rgba(0, 0, 0, 0.04);
}
.info-nav .link-primary {
  color: #fff;
  background: var(--teal);
}
.info-nav .link-primary:hover {
  background: var(--teal-dark);
}

/* ----------------------------------------------------------------- */
/* Hero — typografisch manifest, links uitgelijnd                    */
/* ----------------------------------------------------------------- */
.hero {
  padding: clamp(80px, 14vh, 180px) 24px clamp(56px, 10vh, 120px);
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  position: relative;
}
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--terra);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: ""; display: inline-block;
  width: 28px; height: 1px; background: var(--terra);
}
.hero h1 {
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  max-width: 18ch;
  text-wrap: balance;
}
.hero h1 .accent {
  font-size: calc(1em * var(--italic-scale));
  color: var(--teal-dark);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hero p {
  font-size: 19px;
  color: var(--muted);
  margin: 0 0 36px;
  line-height: 1.55;
  max-width: 56ch;
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--teal); color: #fff;
  padding: 16px 32px;
  border-radius: var(--r-md);
  font-size: 16px; font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.hero-cta:hover { background: var(--teal-dark); transform: translateY(-1px); }
.hero p.hero-sub {
  font-size: 12px; color: var(--subtle);
  margin: 44px 0 0;
  letter-spacing: 0.02em;
  opacity: 0.85;
  white-space: nowrap;
  max-width: none;
}
@media (max-width: 480px) {
  .hero p.hero-sub { white-space: normal; }
}

/* ----------------------------------------------------------------- */
/* Section wrapper — variabel ritme via padding-clamp                */
/* ----------------------------------------------------------------- */
.section { padding: clamp(72px, 12vh, 140px) 24px; }
.section-inner { max-width: 1100px; margin: 0 auto; }

/* Eyebrow boven elke section-h2 — uppercase, terracotta, letter-spaced.
   Geen top-border meer (gaf dubbele-lijn-effect met de trailing terracotta);
   de trailing-line zelf "draagt" nu de eyebrow editorial-style. */
.section-eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0 0 24px;
}
.section-eyebrow .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 16px;
  color: var(--text);
  opacity: 0.55;
}
/* Trailing rule-line — vult rest van de breedte voor editorial effect */
.section-eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--terra); opacity: 0.35;
  margin-left: 4px;
}

.section h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}
.section h2 em {
  font-size: calc(1em * var(--italic-scale));
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--teal-dark);
  /* Handgetekende terracotta-onderlijn als achtergrond direct op de em.
     We gebruiken bg-image (geen ::after met inline-block) zodat em een
     normaal inline-element blijft — interpunctie erna (komma, punt) plakt
     gewoon aan het einde, en wraps respecteren box-decoration-break.
     Padding-bottom 1px houdt de lijn dicht tegen de descender van de em
     i.p.v. te zakken in de regelafstand naar de volgende regel. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M2 4 Q 50 0.5, 100 3 T 198 3.5' stroke='%23C8654A' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 0% 5px;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Underline groeit door wanneer ouder-sectie in view komt */
.in-view h2 em { background-size: 100% 5px; }
@media (prefers-reduced-motion: reduce) {
  .section h2 em { background-size: 100% 5px; transition: none; }
}
/* Op donkere bg een lichtere terracotta */
.section--dark h2 em {
  color: #F5C8A8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M2 4 Q 50 0.5, 100 3 T 198 3.5' stroke='%23F5C8A8' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
}
.section-lead {
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 48px;
  max-width: 56ch;
  line-height: 1.55;
}

/* Witte achtergrond-variant — nu warm-beige ipv pure wit voor minder klinisch */
.section--alt {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Donkere achtergrond-variant — full-bleed inversie voor ritme */
.section--dark {
  background: var(--teal-dark);
  color: #FAF7F2;
  border: none;
}
.section--dark .section-eyebrow {
  color: rgba(255,255,255,0.7);
}
.section--dark .section-eyebrow .num { color: rgba(255,255,255,0.5); }
.section--dark .section-eyebrow::after { background: rgba(255,255,255,0.4); }
.section--dark h2 { color: #FAF7F2; }
.section--dark h2 em { color: #F5C8A8; } /* terracotta-licht ipv teal */
.section--dark .section-lead { color: rgba(250, 247, 242, 0.78); }

/* ----------------------------------------------------------------- */
/* Voor wie — twee kaarten                                           */
/* ----------------------------------------------------------------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.audience-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.section--dark .audience-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #FAF7F2;
}
.section--dark .audience-card p { color: rgba(250, 247, 242, 0.78); }
.section--dark .audience-card ul li { color: rgba(250, 247, 242, 0.92); }
.section--dark .audience-card ul li::before { color: #F5C8A8; }
.section--dark .audience-card .audience-tag {
  background: rgba(245, 200, 168, 0.18);
  color: #F5C8A8;
}
.audience-card h3 {
  font-size: 20px; font-weight: 700;
  margin: 0 0 8px;
}
.audience-card .audience-tag {
  display: inline-block;
  background: var(--teal-light); color: var(--teal);
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.audience-card p { color: var(--muted); margin: 0 0 16px; }
.audience-card ul {
  list-style: none; padding: 0; margin: 0;
}
.audience-card ul li {
  padding: 6px 0 6px 24px;
  position: relative;
  font-size: 14px; color: var(--text);
}
.audience-card ul li::before {
  content: "✓"; color: var(--teal);
  position: absolute; left: 0;
  font-weight: 700;
}

/* ----------------------------------------------------------------- */
/* Features — 4 iconen-kaarten                                       */
/* ----------------------------------------------------------------- */
.features-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px 20px;
}
@media (max-width: 900px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .features-grid { grid-template-columns: 1fr; }
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.feature-card.feature-lead {
  padding: 32px;
  background: linear-gradient(180deg, #fff 0%, #FAF5EE 100%);
  border-color: var(--border-strong);
}
.feature-card.feature-lead h3 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.feature-card.feature-lead p { font-size: 15px; line-height: 1.55; }
.feature-card.feature-lead .feature-icon {
  width: 56px; height: 56px;
  background: var(--teal); color: #fff;
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--teal-light); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.feature-card h3 {
  font-size: 16px; font-weight: 700;
  margin: 0 0 6px;
}
.feature-card p {
  font-size: 14px; color: var(--muted);
  margin: 0;
}

/* ----------------------------------------------------------------- */
/* White-label demo                                                  */
/* ----------------------------------------------------------------- */
.demo-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 760px) {
  .demo-wrap { grid-template-columns: 1fr; }
}
.demo-text h3 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.demo-text p { color: var(--muted); margin: 0 0 12px; }
/* ----------------------------------------------------------------- */
/* Dashboard-mockup — fake "Studio Westerpark"-dashboard met eigen   */
/* brand-kleur als white-label demo. Pixel-perfect echo van de       */
/* echte /dashboard maar met fictionele data.                        */
/* ----------------------------------------------------------------- */
.dashboard-mockup {
  --sw-brand: #1F4D60;        /* Studio Westerpark brand-kleur (stoffig blauwgroen) */
  --sw-brand-dark: #163848;
  --sw-brand-light: rgba(31, 77, 96, 0.10);
  --sw-bg: #FAF7F2;
  --sw-card: #fff;
  --sw-border: #E8E4DB;
  --sw-text: #2C2A26;
  --sw-muted: #6F6E68;
  --sw-ok: #2F7D32;

  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 48px -12px rgba(22, 56, 72, 0.25),
              0 8px 16px -4px rgba(22, 56, 72, 0.12);
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--sw-text);
  line-height: 1.4;
  user-select: none;
}

/* Browser-frame — chroom met traffic-light dots en URL-bar */
.dm-windowbar {
  background: linear-gradient(180deg, #ECE7DD 0%, #E1DBD0 100%);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid #D3CCC1;
}
.dm-dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block; flex: 0 0 11px;
}
.dm-dot:nth-child(1) { background: #FF5F57; }
.dm-dot:nth-child(2) { background: #FEBC2E; }
.dm-dot:nth-child(3) { background: #28C840; }
.dm-urlbar {
  flex: 1;
  background: #FFFDF9;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--sw-muted);
  font-family: 'SF Mono', Menlo, monospace;
  display: flex; align-items: center; gap: 6px;
}
.dm-urlbar::before {
  content: "🔒"; font-size: 9px; opacity: 0.6;
}

/* App body */
.dm-app {
  background: var(--sw-bg);
}

/* Studio Westerpark header met merkkleur */
.dm-header {
  background: var(--sw-brand);
  color: #fff;
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.dm-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700;
}
.dm-logo-mark {
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.18);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.dm-nav {
  display: flex; gap: 4px;
}
.dm-nav-pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.82);
}
.dm-nav-pill.active {
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 600;
}

/* Content area */
.dm-content { padding: 24px; }
.dm-page-title {
  font-size: 18px; font-weight: 700;
  margin: 0 0 16px;
  color: var(--sw-text);
  letter-spacing: -0.01em;
}

/* Stats grid */
.dm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.dm-stat {
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: 9px;
  padding: 12px 14px;
}
.dm-stat-label {
  font-size: 10px; color: var(--sw-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 4px;
}
.dm-stat-value {
  font-size: 22px; font-weight: 700;
  color: var(--sw-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.dm-stat-value.warn { color: #C2620C; }
.dm-stat-sub {
  font-size: 10px; color: var(--sw-muted);
  margin-top: 2px;
}

/* Site-tabel */
.dm-table {
  background: var(--sw-card);
  border: 1px solid var(--sw-border);
  border-radius: 9px;
  overflow: hidden;
}
.dm-table-header,
.dm-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
  padding: 9px 14px;
  font-size: 11px;
}
.dm-table-header {
  background: #FAF7F2;
  color: var(--sw-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 10px;
}
.dm-table-row {
  border-top: 1px solid var(--sw-border);
  font-size: 12px;
}
.dm-site {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500;
}
.dm-site-fav {
  width: 14px; height: 14px;
  border-radius: 3px;
  display: inline-block; flex: 0 0 14px;
}
/* Dashboard-mockup fav-kleuren — voorheen inline style="background:#..."
   (CSP styleSrcAttr 'unsafe-inline' afhankelijk). Nu via classes. */
.dm-fav-a { background: #E8B14A; } /* warm oker */
.dm-fav-b { background: #5C8A6F; } /* dempt groen */
.dm-fav-c { background: #B85C42; } /* terracotta */
.dm-fav-d { background: #3F6B8C; } /* blauwgroen */
.dm-fav-e { background: #8C5A8A; } /* paars */
.dm-fav-f { background: #5C7A4A; } /* olijf */
.dm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.dm-pill.ok {
  background: rgba(47, 125, 50, 0.10);
  color: var(--sw-ok);
}
.dm-pill.ok::before {
  content: ""; width: 5px; height: 5px;
  background: var(--sw-ok); border-radius: 50%;
}
.dm-pill.warn {
  background: rgba(194, 98, 12, 0.10);
  color: #C2620C;
}

/* Responsive: schaal de mockup op kleinere viewports */
@media (max-width: 900px) {
  .dashboard-mockup { font-size: 12px; }
  .dm-content { padding: 16px; }
  .dm-stats { grid-template-columns: repeat(2, 1fr); }
  .dm-table-header,
  .dm-table-row { grid-template-columns: 2fr 1fr 1fr; }
  .dm-table-header > :nth-child(4),
  .dm-table-row > :nth-child(4) { display: none; }
  .dm-stat-value { font-size: 18px; }
}

/* ----------------------------------------------------------------- */
/* Pricing                                                           */
/* ----------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.pricing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 180ms ease;
}
.pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal);
  box-shadow: 0 18px 36px rgba(12, 107, 99, 0.12);
}
.pricing-card.highlight {
  border-color: var(--teal);
  border-width: 2px;
  box-shadow: 0 8px 24px rgba(12, 107, 99, 0.12);
}
.pricing-card.highlight:hover {
  transform: translateY(-6px);
  border-color: var(--terra);
  box-shadow: 0 22px 48px rgba(200, 101, 74, 0.24);
}
.pricing-badge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--teal); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 4px 14px; border-radius: 999px;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  z-index: 3;
}
/* Hele card is een <a> — link decoratie/kleur erven van inhoud */
a.pricing-card { text-decoration: none; color: inherit; }
a.pricing-card:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pricing-card { transition: none; }
  .pricing-card:hover { transform: none; }
}
.pricing-card h3 {
  font-size: 18px; font-weight: 700;
  margin: 0 0 4px;
}
.pricing-card .price {
  font-size: 32px; font-weight: 700;
  color: var(--text);
  margin: 16px 0 4px;
  letter-spacing: -0.02em;
}
.pricing-card .price small {
  font-size: 14px; color: var(--muted); font-weight: 500;
}
.pricing-card .price-sub {
  font-size: 12px; color: var(--subtle);
  margin: 0 0 16px;
}
.pricing-card .price-original {
  font-size: 13px; color: var(--subtle);
  text-decoration: line-through;
  margin: 0 0 4px;
}
.pricing-card ul {
  list-style: none; padding: 0;
  margin: 16px 0; flex: 1;
}
.pricing-card ul li {
  padding: 4px 0 4px 22px;
  position: relative;
  font-size: 13px; color: var(--text);
}
.pricing-card ul li::before {
  content: "✓"; color: var(--teal);
  position: absolute; left: 0;
  font-weight: 700;
}
.pricing-card ul li.muted { color: var(--subtle); }
.pricing-card ul li.muted::before { content: "—"; color: var(--subtle); }
.pricing-card .cta {
  display: block;
  text-align: center;
  background: var(--teal); color: #fff;
  padding: 11px 16px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.pricing-card .cta:hover { background: var(--teal-dark); }
.pricing-card .cta.outline {
  background: #fff; color: var(--teal);
  border: 1.5px solid var(--teal);
}
.pricing-card .cta.outline:hover,
.pricing-card:hover .cta.outline {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.pricing-note {
  text-align: center;
  font-size: 13px; color: var(--subtle);
  margin: 24px 0 0;
}

/* ----------------------------------------------------------------- */
/* Vergelijkingstabel                                                */
/* ----------------------------------------------------------------- */
.compare-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 14px;
}
.compare-table th, .compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table th {
  background: #FAF7F2;
  font-weight: 600;
  color: var(--text);
}
.compare-table th.us { color: var(--teal); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .yes { color: var(--teal); font-weight: 600; }
.compare-table .no { color: var(--subtle); }

/* ----------------------------------------------------------------- */
/* Roadmap                                                           */
/* ----------------------------------------------------------------- */
.roadmap-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.roadmap-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
}
.roadmap-status {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 8px;
}
.roadmap-status.now { background: #FBEAD8; color: #8C470A; }
.roadmap-status.next { background: var(--teal-light); color: var(--teal); }
.roadmap-status.later { background: #EFEFEC; color: var(--subtle); }
.roadmap-item h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.roadmap-item p { font-size: 13px; color: var(--muted); margin: 0; }

/* ----------------------------------------------------------------- */
/* FAQ — accordion                                                   */
/* ----------------------------------------------------------------- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
}
/* details/summary native a11y — geen aria-expanded/-controls of JS-toggle nodig.
   Browser zet zelf "expanded/collapsed" naar screen-readers + Enter/Space werkt. */
.faq-question {
  width: 100%;
  background: none; border: none;
  padding: 16px 20px;
  text-align: left;
  font-size: 15px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: inherit;
  /* Verberg de standaard disclosure-marker (driehoek/pijl) — we hebben eigen chevron */
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { background: #FAF7F2; }
.faq-question:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.faq-question .arrow {
  transition: transform 0.2s;
  color: var(--muted);
  flex-shrink: 0;
}
.faq-item[open] .faq-question .arrow { transform: rotate(180deg); }
.faq-answer {
  color: var(--muted);
  font-size: 14px;
}
.faq-answer-inner { padding: 0 20px 18px; }

/* ----------------------------------------------------------------- */
/* Footer-CTA                                                        */
/* ----------------------------------------------------------------- */
.footer-cta {
  text-align: center;
  padding: 72px 24px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: #fff;
}
.footer-cta h2 {
  color: #fff;
  font-size: 28px; font-weight: 700;
  margin: 0 0 12px;
}
.footer-cta p {
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  margin: 0 0 24px;
  max-width: 520px; margin-left: auto; margin-right: auto;
}
.footer-cta .hero-cta {
  background: #fff; color: var(--teal);
}
.footer-cta .hero-cta:hover { background: rgba(255,255,255,0.92); }

/* ----------------------------------------------------------------- */
/* Footer                                                            */
/* ----------------------------------------------------------------- */
.info-footer {
  background: #1F1D1A; color: #B8B5AE;
  padding: 32px 24px;
  font-size: 13px;
}
.info-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.info-footer a { color: #EFEDE8; text-decoration: none; }
.info-footer a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- */
/* Aanmeld-formulier (/aanmelden)                                    */
/* ----------------------------------------------------------------- */
.form-wrap {
  max-width: 560px;
  margin: 56px auto;
  padding: 0 24px;
}
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
}
.form-card h1 {
  font-size: 24px; font-weight: 700;
  margin: 0 0 8px;
}
.form-card .form-lead {
  color: var(--muted);
  margin: 0 0 28px;
}
.form-row { margin-bottom: 18px; }
.form-row label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.form-row label .opt { color: var(--subtle); font-weight: 400; }
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  background: #fff; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(12, 107, 99, 0.12);
}
.form-row textarea { resize: vertical; min-height: 90px; }

.role-radios {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.role-radio {
  position: relative;
  cursor: pointer;
}
.role-radio input {
  position: absolute; opacity: 0; pointer-events: none;
}
.role-radio .role-tile {
  display: block;
  padding: 14px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: #fff;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.role-radio .role-tile strong {
  display: block; font-size: 14px; margin-bottom: 2px;
}
.role-radio .role-tile span {
  font-size: 12px; color: var(--subtle);
}
.role-radio input:checked + .role-tile {
  border-color: var(--teal);
  background: var(--teal-light);
}

.form-submit {
  width: 100%;
  background: var(--teal); color: #fff;
  padding: 13px 16px;
  border: none;
  border-radius: var(--r-md);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  margin-top: 6px;
}
.form-submit:hover:not(:disabled) { background: var(--teal-dark); }
.form-submit:disabled { opacity: 0.7; cursor: wait; }

.form-error {
  background: #FBECEC; border: 1px solid #F0CCCC;
  color: #A32D2D;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin: 0 0 16px;
}

/* ----------------------------------------------------------------- */
/* Aanmeld-success — persoonlijke bedank-state met 3-stappen-plan,    */
/* hero-styling (serif-italic accent) en handtekening                 */
/* ----------------------------------------------------------------- */
.form-success-card {
  padding: 40px 36px;
}
@media (max-width: 520px) {
  .form-success-card { padding: 28px 24px; }
}

.success-hero {
  text-align: center;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.success-check {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--teal);
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.success-title {
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.success-title em {
  font-size: calc(1em * var(--italic-scale));
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--teal-dark);
}
.success-lead {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 42ch;
  margin: 0 auto;
}
.success-lead em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--terra);
  font-size: calc(1em * var(--italic-scale));
}

.success-steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0 0 36px;
}
.success-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.step-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--terra);
  font-size: 24px;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  min-width: 32px;
  line-height: 1.1;
}
.step-body { flex: 1; min-width: 0; }
.step-body strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.step-body p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.success-signoff {
  padding-top: 28px;
  margin: 0 0 24px;
  border-top: 1px solid var(--border);
}
.success-signoff p {
  margin: 0;
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}
.success-signoff .signoff-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--teal-dark);
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.success-signoff .signoff-mail {
  font-size: 13px;
  color: var(--subtle);
  margin-top: 10px;
}
.success-signoff .signoff-mail a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
}
.success-signoff .signoff-mail a:hover { text-decoration: underline; }

.success-meta {
  text-align: center;
  font-size: 12px;
  color: var(--subtle);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------- */
/* Scroll-reveal — subtiele fade+rise op secties                     */
/* JS voegt .reveal toe; .in-view triggert de animatie               */
/* ----------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------------- */
/* Accent-underline — handgetekende terracotta-onderlijn die         */
/* doorgroeit als de sectie in view komt                             */
/* ----------------------------------------------------------------- */
.accent-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.accent-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'><path d='M2 4 Q 50 0.5, 100 3 T 198 3.5' stroke='%23C8654A' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 100%;
  transition: background-size 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms;
}
.in-view .accent-underline::after,
.accent-underline.in-view::after {
  background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .accent-underline::after { background-size: 100% 100%; transition: none; }
}

/* ----------------------------------------------------------------- */
/* Pricing-card founding-badge in terracotta voor extra opvallendheid */
/* ----------------------------------------------------------------- */
.pricing-card.highlight .pricing-badge {
  background: var(--terra);
}
.pricing-card.highlight {
  border-color: var(--terra);
  box-shadow: 0 12px 32px rgba(200, 101, 74, 0.15);
}

/* Italic x-height correction — cursive serif italics matchen Inter sans optisch */
:root { --italic-scale: 1.13; }

/* Hide inline SVG-sprite — symbol-references blijven werken, scheelt line-height ruimte */
svg.svg-sprite { display: none; }

/* ----------------------------------------------------------------- */
/* Aanmeldpagina pricing-calculator                                  */
/* Inputs (calc-*) erven styling uit staging-v2-pricing.css.         */
/* Hieronder alleen de aanmeld-specifieke wrap + indicatie-blok.     */
/* ----------------------------------------------------------------- */
.signup-indication {
  background: #FAF7F2;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.signup-indication .signup-total {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text);
}
.signup-indication .signup-total strong {
  font-size: 20px;
  color: var(--teal-dark);
  letter-spacing: -0.01em;
}
.signup-indication .calc-breakdown {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}
.signup-indication .calc-breakdown li {
  padding: 2px 0;
}
.signup-indication .signup-note {
  font-size: 13px;
  color: var(--subtle);
  margin: 6px 0 0;
}

/* Skip-link — verschijnt alleen bij keyboard-focus, blijft anders verborgen */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--r-md) 0;
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}