/* 004 — Data protection. Loaded after site.css; uses its colour variables with brand fallbacks. */
.dp {
  --dp-ink: var(--ink, #0A1628);
  --dp-slate: var(--slate, #5A6B7D);
  --dp-faint: var(--slate-light, #8B95A3);
  --dp-paper: var(--paper, #F4EFE3);
  --dp-paper-light: var(--paper-light, #FAF6EC);
  --dp-line: var(--grid-dark, #C8C0A8);
  --dp-line-soft: var(--grid, #E2DCCD);
  --dp-accent: var(--accent, #B54E2A);
  --dp-green: var(--green, #3B6E4A);
}

.dp-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; margin-top: 40px; }

/* Facts */
.dp-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dp-ink); }
.dp-facts li { padding: 20px 0; border-bottom: 1px solid var(--dp-line-soft); }
.dp-facts h3 { font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--dp-ink); margin: 6px 0 6px; }
.dp-facts p { margin: 0; font-size: 15px; line-height: 1.6; }

/* Figure: what happens to a formula */
.dp-fig { position: relative; margin: 0; background: var(--dp-paper-light); border: 1px solid var(--dp-ink); padding: 28px 28px 24px; }
.dp-fig::before, .dp-fig::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--dp-accent); border-style: solid; }
.dp-fig::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.dp-fig::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.dp-fig-label { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--dp-slate); margin-bottom: 22px; }
.dp-track + .dp-track { margin-top: 26px; padding-top: 24px; border-top: 1px dashed var(--dp-line); }
.dp-track-title { font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; font-size: 17px; color: var(--dp-ink); margin: 0 0 2px; }
.dp-track-sub { font-size: 13px; color: var(--dp-slate); margin: 0 0 18px; }
.dp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: dp; }
.dp-steps li { counter-increment: dp; position: relative; padding-right: 12px; font-size: 13px; }
.dp-steps li::before { content: counter(dp); position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 12px; border: 1px solid var(--dp-ink); border-radius: 50%; background: var(--dp-paper-light); font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--dp-ink); }
.dp-steps li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 26px; right: 0; height: 1px; background: var(--dp-line); }
.dp-steps li.dp-end::before { content: "\2713"; border-color: var(--dp-green); color: var(--dp-green); }
.dp-steps strong { display: block; font-weight: 500; color: var(--dp-ink); margin-bottom: 8px; }
.dp-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.dp-chip { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; padding: 2px 7px; border: 1px solid var(--dp-line); background: var(--dp-paper); color: var(--dp-ink); }
.dp-chip.gone { border-style: dashed; background: transparent; color: var(--dp-faint); text-decoration: line-through; text-decoration-color: var(--dp-accent); }
.dp-chip.kept { border-color: var(--dp-green); color: var(--dp-green); }
.dp-legend { display: flex; flex-wrap: wrap; gap: 20px; margin: 22px 0 0; font-size: 12px; color: var(--dp-slate); }
.dp-legend span { display: inline-flex; align-items: center; gap: 8px; }

/* Guarantees */
.dp-guarantees { display: grid; grid-template-columns: 1.25fr 1fr 1fr; margin-top: 56px; border-top: 2px solid var(--dp-ink); }
.dp-g { padding: 26px 28px 8px 0; }
.dp-g + .dp-g { padding-left: 28px; border-left: 1px solid var(--dp-line-soft); }
.dp-g h3 { font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.25; color: var(--dp-ink); margin: 8px 0 10px; }
.dp-g:first-child h3 { font-size: 25px; }
.dp-g p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; }
.dp-signed { display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--dp-green); }
.dp-signed::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dp-green); }
.dp-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--dp-ink); font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 14px; text-decoration: none; color: var(--dp-ink); }
.dp-btn:hover { background: var(--dp-paper-light); }
.dp-btn.solid { background: var(--dp-ink); color: var(--dp-paper-light); }
.dp-btn.solid:hover { background: var(--dp-accent); border-color: var(--dp-accent); }
.dp-btn:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 3px; }

/* Sub-processors (inside the site's faq-item) */
.dp-subs { margin-top: 40px; }
.dp-tbl { overflow-x: auto; margin-top: 4px; }
.dp-tbl table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; }
.dp-tbl th { text-align: left; font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 10px; letter-spacing: .14em; color: var(--dp-slate); padding: 10px 14px; border-bottom: 1px solid var(--dp-line); }
.dp-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--dp-line-soft); vertical-align: top; }
.dp-tbl td:first-child { color: var(--dp-ink); font-weight: 500; }
.dp-tbl-note { font-size: 13px; color: var(--dp-slate); margin: 12px 0 0; }

@media (max-width: 900px) {
  .dp-layout { grid-template-columns: 1fr; gap: 36px; }
  .dp-guarantees { grid-template-columns: 1fr; }
  .dp-g, .dp-g + .dp-g { padding: 24px 0 8px; border-left: 0; }
  .dp-g + .dp-g { border-top: 1px solid var(--dp-line-soft); }
}
@media (max-width: 560px) {
  .dp-fig { padding: 22px 18px 20px; }
  .dp-steps { grid-template-columns: 1fr; gap: 16px; }
  .dp-steps li { padding: 0 0 0 40px; }
  .dp-steps li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .dp-steps li:not(:last-child)::after { top: 26px; bottom: -16px; left: 13px; right: auto; width: 1px; height: auto; }
}

/* Section tones — three-tone rhythm: base cream, deeper cream, navy (005 only, from site.css).
   009 Contact keeps its own site.css background and grid; the deeper bands are placed so it never sits next to one.
   Order: 002 cream · 003 deep · 004 cream · 005 navy · 006 cream · 007 deep · 008 cream · 009 site.css.
   The shadow + clip-path pair paints the tone edge to edge whatever max-width site.css gives .section. */
#modules, #founder {
  background-color: var(--paper-deep, #EDE6D3);
  box-shadow: 0 0 0 100vmax var(--paper-deep, #EDE6D3);
  clip-path: inset(0 -100vmax);
}