/* Privacy policy page: the OverLoad dashboard look (dark, chunky borders, hard shadows). Self-contained, no web fonts. */
:root {
  --bg: #0d0b16;
  --bar: #110e1f;
  --surface: #16132a;
  --surface-2: #1d1934;
  --line: #2a2545;
  --ink: #000;
  --text: #f1eefe;
  --text-2: #dcd7f0;
  --text-3: #b4add3;
  --orange: #ff6a13;
  --orange-2: #ff7a1f;
  --yellow: #ffc21a;
  --green: #5be38a;
  --font-display: 'Bungee', 'Arial Black', Impact, sans-serif;
  --font-body: 'Barlow Semi Condensed', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0; min-height: 100vh; color: var(--text-2); font-family: var(--font-body); font-size: 18px; line-height: 1.6;
  background-color: var(--bg); background-image: radial-gradient(#1a1630 1.5px, transparent 1.5px); background-size: 18px 18px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange-2); text-decoration: underline; text-underline-offset: 3px }
a:hover { color: var(--yellow) }
strong { color: var(--text) }

.site-head { position: sticky; top: 0; z-index: 10; background: var(--bar); border-bottom: 3px solid var(--ink) }
.site-head .in { max-width: 1120px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.site-head img { display: block; height: 48px; width: auto; filter: drop-shadow(3px 3px 0 var(--ink)) }
.site-head nav { flex: none }
.site-head ul { display: flex; flex-direction: row; gap: 10px; list-style: none; margin: 0; padding: 0 }
.site-head ul a {
  display: block; padding: 8px 12px; background: var(--surface-2); color: var(--text); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 12px; text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.site-head ul a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); color: var(--yellow) }
.site-head ul a[aria-current] { background: var(--orange); color: #14102a }

.layout { max-width: 1120px; margin: 0 auto; padding: 48px 24px 80px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start }
.toc {
  position: sticky; top: 96px; background: var(--surface); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 18px 20px;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.toc h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 14px; color: var(--yellow) }
.toc ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 16px }
.toc a { color: var(--text-2); text-decoration: none }
.toc a:hover { color: var(--yellow); text-decoration: underline }

.layout > .doc-head { grid-column: 2; grid-row: 1 }
.toc { grid-column: 1; grid-row: 1 / span 2 }
.doc { grid-column: 2; flex-direction: column; gap: 36px; min-width: 0 }
.doc-head { display: flex; flex-direction: column; gap: 12px }
h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 6vw, 56px); line-height: 1.05; color: var(--text); text-shadow: 4px 4px 0 var(--ink) }
.meta { font-size: 16px; color: var(--text-3) }
p { margin: 0; text-wrap: pretty }
section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 96px }
section h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--text); text-shadow: 2px 2px 0 var(--ink) }
section h2 span { color: var(--orange) }
section h3 { margin: 8px 0 0; font-size: 20px; font-weight: 700; color: var(--yellow) }
ul, ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px }
ul ul { margin-top: 8px; gap: 4px }

.panel { background: var(--surface); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 16px 20px }
.callout { border-left: 6px solid var(--green) }
.facts { padding: 0 }
.facts > div { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line) }
.facts > div:last-child { border-bottom: 0 }
.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; list-style: none; padding: 0 }
.who li { background: var(--surface); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 12px 16px }
.who li strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 14px; color: var(--yellow) }
.steps { counter-reset: s; list-style: none; padding: 0 }
.steps li { counter-increment: s; position: relative; padding-left: 46px; min-height: 32px }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--orange); color: #14102a; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-family: var(--font-display); font-size: 14px;
}

.site-foot { border-top: 3px solid var(--ink); background: var(--bar); padding: 28px 20px; text-align: center; color: var(--text-3); font-size: 15px }
.site-foot a { color: var(--text-3); margin: 0 10px }
.site-foot p { margin: 10px 0 0 }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; gap: 28px; padding: 28px 16px 64px }
  .toc, .layout > .doc-head, .doc { grid-column: 1; grid-row: auto }
  .toc { position: static; max-height: none }
  .site-head .in { padding: 10px 16px }
  .site-head img { height: 38px }
  .site-head ul a { padding: 6px 9px; font-size: 11px }
  .facts > div { grid-template-columns: 1fr; gap: 4px }
  body { font-size: 17px }
}