/* /gdpr/ and /security/ — the policy markup is kept as published (it still
   carries its old utility class names); this dresses it in the design system.
   Everything is scoped under .policy. */
.policy-wrap { display: grid; gap: var(--bel-space-5, 1.25rem); padding-block: var(--bel-space-10, 2.5rem) var(--bel-space-16, 4rem); }
@media (min-width: 960px) { .policy-wrap { grid-template-columns: 240px minmax(0, 820px); justify-content: center; align-items: start; gap: var(--bel-space-8, 2rem); } }
.policy { min-width: 0; }
.policy h2 { scroll-margin-top: calc(var(--bel-header-height, 60px) + 20px); }

/* "On this page": a sticky list on desktop, a closed disclosure on phones. */
.policy-toc details { border: 1px solid var(--bel-border); border-radius: var(--bel-radius-lg); background: var(--bel-bg-raised); padding: 0 var(--bel-space-4, 1rem); }
@media (min-width: 960px) { .policy-toc { position: sticky; top: calc(var(--bel-header-height, 60px) + 20px); } }
.policy-toc summary { min-height: var(--bel-tap-target, 44px); display: flex; align-items: center; font-weight: var(--bel-weight-semibold); cursor: pointer; list-style: none; }
.policy-toc summary::-webkit-details-marker { display: none; }
.policy-toc ol { margin: 0 0 var(--bel-space-3, .75rem); padding: 0; list-style: none; display: grid; gap: 2px; max-height: 70vh; overflow-y: auto; }
.policy-toc a { display: block; padding: 6px 8px; border-radius: var(--bel-radius-sm, 8px); color: var(--bel-text-muted); font-size: var(--bel-text-sm); text-decoration: none; line-height: 1.35; }
.policy-toc a:hover { background: var(--bel-surface-hover); color: var(--bel-text); }
.policy > .bg-white {
  background: var(--bel-bg-raised); border: 1px solid var(--bel-border);
  border-radius: var(--bel-radius-lg); padding: clamp(20px, 4vw, 48px);
}
.policy h1 {
  margin: 0 0 var(--bel-space-3, .75rem); font-family: var(--bel-font-serif); font-weight: var(--bel-weight-regular);
  font-size: var(--bel-text-4xl); line-height: 1.05; letter-spacing: var(--bel-tracking-tight); text-align: left;
}
.policy .text-center { text-align: left; }
.policy .text-center:not(h1):not(h2) { color: var(--bel-text-muted); font-size: var(--bel-text-sm); }
.policy h1.border-b { padding-bottom: var(--bel-space-4, 1rem); border-bottom: 1px solid var(--bel-border); }
.policy h2 {
  margin: var(--bel-space-10, 2.5rem) 0 var(--bel-space-3, .75rem); font-size: var(--bel-text-xl);
  font-weight: var(--bel-weight-semibold); line-height: 1.25; color: var(--bel-text);
}
.policy h3 { margin: var(--bel-space-6, 1.5rem) 0 var(--bel-space-2, .5rem); font-size: var(--bel-text-lg); font-weight: var(--bel-weight-semibold); }
.policy p, .policy li { color: var(--bel-text); line-height: 1.7; }
.policy p { margin: 0 0 var(--bel-space-4, 1rem); }
.policy ul { margin: 0 0 var(--bel-space-4, 1rem); padding-left: 1.25rem; list-style: disc; }
.policy li { margin-bottom: var(--bel-space-2, .5rem); }
.policy a { color: var(--bel-link); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.policy strong, .policy .font-semibold, .policy .font-bold { font-weight: var(--bel-weight-semibold); }
.policy .ml-4 { margin-left: var(--bel-space-4, 1rem); }

/* The old blue and yellow call-outs become flat tinted notes. */
.policy .border-l-4 {
  border: 0; border-radius: var(--bel-radius-md); padding: var(--bel-space-4, 1rem) var(--bel-space-5, 1.25rem);
  margin: var(--bel-space-5, 1.25rem) 0;
}
.policy .border-l-4 p:last-child { margin-bottom: 0; }
.policy .bg-blue-50 { background: var(--bel-brand-soft); }
.policy .bg-yellow-50 { background: var(--bel-warning-soft); }
.policy .text-blue-700, .policy .text-yellow-900, .policy .text-blue-600 { color: var(--bel-text); }