/* ============ HERO ============ */
.privacy-hero { padding: 64px 0 40px; }
.privacy-hero .sub b { color: var(--lime); font-weight: 600; }
.doc-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.doc-meta .cell { padding: 16px 18px; border-right: 1px solid var(--line); }
.doc-meta .cell:last-child { border-right: none; }
.doc-meta .k { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: lowercase; letter-spacing: 0.05em; }
.doc-meta .v { font-weight: 600; font-size: 14.5px; margin-top: 6px; line-height: 1.35; }
.doc-meta .v small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 3px; }

/* ============ GRID ============ */
.privacy-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; padding: 32px 0 96px; }

.toc { position: sticky; top: 92px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.toc h4 {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--lime); text-transform: lowercase;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.toc h4::before { content: "// "; color: var(--muted); }
.toc ol { list-style: none; counter-reset: toc; }
.toc a {
  display: flex; gap: 10px; padding: 9px 16px; counter-increment: toc;
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease, color 0.15s ease;
}
.toc li:last-child a { border-bottom: none; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 2px; opacity: 0.7; }
.toc a:hover { color: var(--ink); background: var(--panel2); }
.toc a.active { background: var(--lime-soft); color: var(--lime); box-shadow: inset 2px 0 0 var(--lime); }
.toc a.active::before { color: var(--lime); opacity: 1; }

/* ============ DOC ============ */
.doc { max-width: 760px; }
.doc section { margin-bottom: 56px; scroll-margin-top: 96px; }
.doc h2 {
  font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.05; letter-spacing: -0.025em;
  margin-bottom: 18px;
}
.doc h2 em { font-style: normal; color: var(--lime); }
.doc h3 { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--lime); text-transform: lowercase; margin: 22px 0 10px; }
.doc h3::before { content: "> "; color: var(--muted); }
.doc p { font-size: 15px; color: var(--muted); margin-bottom: 14px; max-width: 46em; }
.doc p strong, .doc li strong { font-weight: 600; color: var(--ink); }
.doc ul { margin: 0 0 14px 0; padding-left: 0; list-style: none; display: grid; gap: 9px; }
.doc ul li { padding-left: 26px; position: relative; font-size: 15px; color: var(--muted); }
.doc ul li::before { content: "[·]"; position: absolute; left: 0; top: 2px; font-family: var(--mono); font-size: 11px; color: var(--lime); }
.doc a { color: var(--lime); font-weight: 500; }
.doc a.btn { color: #eef6f0; }
.doc a.btn:hover { color: #eef6f0; }

/* Data-tabel */
.data-table { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 22px 0; }
.data-table .row {
  display: grid; grid-template-columns: 0.7fr 1.6fr 0.8fr 0.7fr; gap: 14px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.data-table .row:last-child { border-bottom: none; }
.data-table .row.head {
  background: var(--panel2); color: var(--lime);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: lowercase;
}
.data-table .c-what strong { color: var(--ink); font-weight: 600; }
.data-table .c-basis, .data-table .c-keep { font-family: var(--mono); font-size: 11px; }

/* Verwerkers */
.proc-list { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 22px 0; }
.proc { display: grid; grid-template-columns: 0.8fr 1.6fr 0.5fr; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); align-items: start; }
.proc:last-child { border-bottom: none; }
.proc .p-name { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink); }
.proc .p-name small { display: block; font-family: var(--mono); font-size: 10px; font-weight: 400; text-transform: lowercase; color: var(--muted); margin-top: 2px; }
.proc .p-purpose { font-size: 13px; color: var(--muted); }
.proc .p-loc { font-family: var(--mono); font-size: 12px; font-weight: 700; text-align: right; color: var(--lime); }
.proc .p-loc small { display: block; font-weight: 400; font-size: 10px; color: var(--muted); }

/* Rechten */
.rights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.right { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; transition: border-color 0.2s ease; }
.right:hover { border-color: var(--lime-line); }
.right .label {
  font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: lowercase;
  color: var(--lime); background: var(--lime-soft); border: 1px solid var(--lime-line); border-radius: 4px;
  display: inline-block; padding: 1px 7px; margin-bottom: 10px;
}
.right h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--ink); }
.right p { font-size: 12.5px; color: var(--muted); margin: 0; }

/* Contact-blok */
.contact-call {
  border: 1px solid var(--lime-line); border-radius: 12px;
  background: linear-gradient(170deg, #0e1a13, var(--panel) 45%);
  box-shadow: 0 0 60px -20px rgba(47, 143, 99, 0.25);
  padding: 26px 24px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.contact-call .ti { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.contact-call .ti em { font-style: normal; color: var(--lime); }
.contact-call p { color: var(--muted); margin: 10px 0 0; font-size: 14px; max-width: 34em; }

@media (max-width: 1000px) {
  .privacy-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
  .doc-meta { grid-template-columns: 1fr 1fr; }
  .doc-meta .cell { border-bottom: 1px solid var(--line); }
  .doc-meta .cell:nth-child(even) { border-right: none; }
  .doc-meta .cell:nth-child(n+3) { border-bottom: none; }
  .rights { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .data-table .row, .proc { grid-template-columns: 1fr; gap: 6px; }
  .data-table .row.head { display: none; }
  .proc .p-loc { text-align: left; }
  .rights { grid-template-columns: 1fr; }
}

/* Mobiel: lange links en knoppen mogen nooit breder worden dan het scherm */
.doc a { overflow-wrap: anywhere; }
.contact-call .btn { max-width: 100%; }
.doc-meta .cell { min-width: 0; }
.doc-meta .v { overflow-wrap: anywhere; }