@font-face {
  font-family: "Baloo 2";
  src: url("fonts/baloo-2-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Baloo 2";
  src: url("fonts/baloo-2-latin-800-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --policy-paper: oklch(0.97 0.018 91);
  --policy-paper-deep: oklch(0.925 0.03 89);
  --policy-ink: oklch(0.235 0.055 265);
  --policy-soft: oklch(0.37 0.045 265);
  --policy-line: oklch(0.82 0.025 91);
  --policy-cyan: oklch(0.55 0.14 225);
  --policy-yellow: oklch(0.88 0.175 93);
}

* { box-sizing: border-box; }

body {
  background: var(--policy-paper);
  color: var(--policy-ink);
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  line-height: 1.68;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(oklch(0.45 0.025 85 / 0.11) 0.7px, transparent 0.7px);
  background-size: 6px 6px;
  content: "";
}

header {
  z-index: 10;
  margin-bottom: 68px;
  border-bottom: 1px solid var(--policy-line);
  background: oklch(0.97 0.018 91 / 0.9);
  backdrop-filter: blur(16px);
}

.nav { min-height: 72px; padding: 0 24px; }

.wordmark { color: var(--policy-ink); letter-spacing: -0.015em; text-transform: none; }
.wordmark img { width: 34px; height: 34px; }
.nav > a:last-child { color: var(--policy-soft); font-weight: 750; text-decoration: none; }

.wrap { max-width: 790px; padding: 0 28px 100px; }

h1 {
  margin-bottom: 6px;
  color: var(--policy-ink);
  font-size: clamp(2.7rem, 7vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.updated { margin-bottom: 48px; color: var(--policy-soft); }

h2 {
  margin: 42px 0 12px;
  color: var(--policy-ink);
  font-size: 1.45rem;
  line-height: 1.15;
}

p, li { color: var(--policy-soft); }
strong { color: var(--policy-ink); }
a { color: var(--policy-cyan); text-underline-offset: 3px; }

.card {
  margin: 0 0 46px;
  padding: 24px 26px;
  border: 0;
  border-radius: 16px;
  background: var(--policy-yellow);
}

.card p { margin: 0; color: var(--policy-ink); }

@media (max-width: 620px) {
  header { margin-bottom: 46px; }
  .wordmark { font-size: 0.92rem; }
  .wordmark img { width: 30px; height: 30px; }
  .wrap { padding-inline: 20px; }
  h1 { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}