:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body {
  background: #050505;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.88'/%3E%3C/svg%3E");
  opacity: .1;
  pointer-events: none;
  position: absolute;
  inset: -40%;
  width: 180%;
  height: 180%;
  z-index: -1;
  animation: grain .18s steps(2) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -1%); }
  50% { transform: translate(-1%, 2%); }
  75% { transform: translate(1%, 1%); }
  100% { transform: translate(-2%, -1%); }
}

.logo {
  width: clamp(144px, 18vw, 230px);
  height: auto;
  display: block;
  background: #fff;
  mix-blend-mode: screen;
  will-change: transform;
  transition: transform 650ms cubic-bezier(.2,.8,.2,1);
  user-select: none;
}

.privacy-link {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.62);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease;
}

.privacy-link:hover, .privacy-link:focus-visible { color: #fff; }
.privacy-link:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }

.policy {
  max-width: 680px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 80px 28px 48px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
}

.policy a { color: #fff; }
.policy h1 { color: #fff; font-size: 24px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 8px; }
.policy h2 { color: #fff; font-size: 14px; font-weight: 600; margin: 34px 0 7px; }
.policy p { margin: 0 0 16px; }
.policy .updated { color: rgba(255,255,255,.42); font-size: 12px; }
.back { display: inline-block; margin-bottom: 56px; color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.back:hover, .back:focus-visible { color: #fff; }

.not-found { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 24px; }
.not-found h1 { margin: 0 0 10px; font-size: 22px; font-weight: 500; }
.not-found p { margin: 0 0 24px; color: rgba(255,255,255,.55); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .noise { animation: none; }
  .logo { transition: none; }
}
