/* AI Software Development: privacy, terms and the 404 page. Tokens live in base.css; the footer and
   wrap come from public.css. The header here is static (not the home page's fixed, transparent one),
   so it never sits over the text. */
.site-header--static { position: static; height: auto; padding: 18px 0; background: var(--sidebar); border-bottom: 1px solid var(--border); }
.legal-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.legal-nav a { color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.legal-nav a:hover { color: var(--highlight); }
.legal-nav a[aria-current="page"] { color: var(--cyan); }

.legal { padding: 56px 0 96px; }
.legal__inner { max-width: 780px; }
.draft-banner {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 36px;
  padding: 16px 18px; border-radius: var(--r-md);
  background: rgba(221, 184, 86, 0.1); border: 1px solid rgba(221, 184, 86, 0.55); color: var(--text);
}
.draft-banner .icon { color: var(--warning); margin-top: 3px; }
.draft-banner strong { display: block; color: var(--warning); font-family: var(--font-head); font-size: 17px; margin-bottom: 2px; }
.draft-banner p { color: var(--text-2); font-size: 15px; }
.legal h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; margin: 14px 0 12px; }
.legal__meta { color: var(--text-2); font-size: 14px; margin-bottom: 32px; }
.legal h2 { font-size: 22px; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid rgba(23, 59, 81, 0.6); }
.legal h3 { font-size: 17px; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--text-2); font-size: 16px; line-height: 1.65; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal code { font-family: var(--font-mono); font-size: 14px; color: var(--highlight); }
.legal a { color: var(--highlight); }
.legal__toc { margin: 0 0 8px; padding: 18px 22px; }
.legal__toc h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 15px; font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.legal__toc ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.legal__toc a { min-height: 32px; display: inline-flex; align-items: center; }

.notfound { min-height: calc(100vh - 230px); display: flex; align-items: center; padding: 72px 0; position: relative; overflow: hidden; }
.notfound__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 75% 40%, rgba(21, 136, 208, 0.18), transparent 70%); }
.notfound__inner { position: relative; max-width: 640px; }
.notfound__code { font-family: var(--font-mono); color: var(--cyan); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; }
.notfound h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; margin: 16px 0 14px; text-transform: uppercase; }
.notfound p { color: var(--text-2); font-size: 17px; max-width: 52ch; }
.notfound__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

@media (max-width: 520px) {
  .site-header--static { height: auto; padding: 12px 0; }
  .site-header--static .site-header__inner { flex-wrap: wrap; gap: 4px 16px; }
  .legal-nav { gap: 16px; }
  .legal { padding: 36px 0 72px; }
  .legal h2 { font-size: 20px; }
  .legal .legal__toc h2 { font-size: 13px; }
  .notfound__ctas .btn { width: 100%; }
}