/* Standalone styles for legal/blog pages (no React) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #ffffff; color: #0a0a0a;
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --sub: #555555;
  --rule: #0a0a0a;
  --faint: #eaeaea;
  --accent: #c9f24a;
  --accent-ink: #0a0a0a;
  --display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --rw: 2px;
  --tracking: -0.04em;
  --pad: 48px;
  --max: 1280px;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.ap-nav {
  border-bottom: var(--rw) solid var(--rule);
  padding: 20px 0; display: flex;
  justify-content: space-between; align-items: center;
}
.nav__logo {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.nav__mark {
  width: 28px; height: 28px; background: var(--ink);
  display: grid; place-items: center; color: var(--bg);
  font-family: var(--mono); font-weight: 700; font-size: 14px;
}
.nav__name {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  letter-spacing: var(--tracking); text-transform: uppercase;
}
.ap-nav__back {
  border: var(--rw) solid var(--rule);
  padding: 8px 14px; display: inline-flex; gap: 10px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; transition: background .18s, color .18s;
}
.ap-nav__back:hover { background: var(--ink); color: var(--bg); }

.ap-footer {
  padding: 40px 0; border-top: var(--rw) solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sub);
}

.legal { max-width: 800px; margin: 0 auto; padding: 64px var(--pad) 96px; }
.legal h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(36px, 5vw, 56px); letter-spacing: var(--tracking);
  text-transform: uppercase; margin-bottom: 48px;
}
.legal h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; letter-spacing: var(--tracking);
  text-transform: uppercase; margin: 48px 0 16px;
}
.legal h3 { font-weight: 600; font-size: 16px; margin: 32px 0 8px; }
.legal p { margin-bottom: 16px; line-height: 1.65; }
.legal ul { margin: 8px 0 16px 20px; }
.legal li { margin-bottom: 6px; line-height: 1.55; }
.legal a { text-decoration: underline; }

.blog { max-width: 800px; margin: 0 auto; padding: 64px var(--pad) 96px; }
.blog h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(36px, 5vw, 56px); letter-spacing: var(--tracking);
  text-transform: uppercase; margin-bottom: 12px;
}
.blog__sub { color: var(--sub); margin-bottom: 48px; }
.blog__empty {
  text-align: center; padding: 48px; color: var(--sub);
  border: var(--rw) dashed var(--faint);
}

@media (max-width: 900px) {
  :root { --pad: 20px; }
}