:root {
  --ink: #17121f;
  --muted: #696074;
  --paper: #fffaf0;
  --violet: #7c3cff;
  --violet-deep: #4d16ad;
  --lime: #baff4f;
  --line: rgba(23, 18, 31, .17);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 5%, rgba(255, 95, 159, .19), transparent 25rem),
    radial-gradient(circle at 92% 13%, rgba(85, 217, 255, .22), transparent 27rem),
    linear-gradient(rgba(23, 18, 31, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 18, 31, .04) 1px, transparent 1px),
    var(--paper);
  background-size: auto, auto, 38px 38px, 38px 38px, auto;
  font: 500 17px/1.7 "Nunito Sans", sans-serif;
}

a { color: inherit; }
.policy-header, .policy-footer, .policy-shell { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.policy-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; gap: 24px; }
.policy-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.policy-brand img { width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 13px; object-fit: cover; box-shadow: 3px 4px 0 var(--ink); }
.policy-brand span { font: 400 1.05rem/1 "Chango", sans-serif; }
.policy-nav { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.policy-nav a { padding: 9px 12px; border-radius: 9px; font: 700 .68rem/1 "Azeret Mono", monospace; text-decoration: none; text-transform: uppercase; }
.policy-nav a:hover, .policy-nav a[aria-current="page"] { color: #fff; background: var(--violet); }
.policy-hero { position: relative; padding: clamp(50px, 10vw, 110px) 0 56px; border-bottom: 2px solid var(--ink); overflow: hidden; }
.policy-hero::after { position: absolute; right: 2%; bottom: -85px; width: 220px; height: 220px; border: 34px solid var(--lime); border-radius: 50%; content: ""; transform: rotate(-12deg); }
.eyebrow { color: var(--violet-deep); font: 700 .72rem/1.2 "Azeret Mono", monospace; letter-spacing: .14em; }
h1 { max-width: 900px; margin: 20px 0; font: 400 clamp(3.3rem, 9vw, 7.8rem)/.9 "Chango", sans-serif; letter-spacing: -.05em; }
.policy-hero p { max-width: 720px; margin: 0; color: var(--muted); font-size: 1.2rem; }
.policy-meta { display: inline-flex; margin-top: 28px; padding: 8px 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime); font: 700 .67rem "Azeret Mono", monospace; }
.policy-content { display: grid; grid-template-columns: 240px minmax(0, 1fr); padding: 54px 0 90px; gap: clamp(30px, 7vw, 90px); }
.policy-toc { position: sticky; top: 24px; align-self: start; padding: 20px; border: 2px solid var(--ink); border-radius: 18px; background: rgba(255,255,255,.8); box-shadow: 5px 6px 0 var(--ink); }
.policy-toc b { display: block; margin-bottom: 12px; font: 700 .68rem "Azeret Mono", monospace; letter-spacing: .1em; }
.policy-toc a { display: block; padding: 6px 0; color: var(--muted); font-size: .9rem; text-decoration: none; }
.policy-toc a:hover { color: var(--violet-deep); }
.policy-document { min-width: 0; }
.policy-document section { padding: 12px 0 34px; border-bottom: 1px solid var(--line); }
.policy-document h2 { margin: 18px 0 12px; font: 400 clamp(1.6rem, 4vw, 2.5rem)/1.1 "Chango", sans-serif; }
.policy-document h3 { margin: 24px 0 8px; font: 800 1.05rem "Azeret Mono", monospace; }
.policy-document p, .policy-document li { color: #4f4858; }
.policy-document li + li { margin-top: 8px; }
.policy-callout { margin: 20px 0; padding: 18px 20px; border-left: 6px solid var(--violet); border-radius: 0 14px 14px 0; background: #f1eaff; }
.policy-footer { display: flex; justify-content: space-between; padding: 28px 0 42px; border-top: 2px solid var(--ink); color: var(--muted); font: 700 .68rem "Azeret Mono", monospace; gap: 20px; }
.policy-footer div { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 760px) {
  .policy-content { grid-template-columns: 1fr; }
  .policy-toc { position: static; }
  .policy-hero::after { opacity: .25; }
}

@media (max-width: 540px) {
  .policy-header { align-items: start; flex-direction: column; }
  .policy-nav { justify-content: start; }
  .policy-footer { align-items: start; flex-direction: column; }
}