/* ==========================================================================
   VENUS — LEGAL / SYSTEM PAGES
   Restrained, editorial layout for Privacy, Terms, Disclaimer. Reuses tokens
   and shared components; adds only a readable content column, a review notice,
   and a 404 layout. Legal text kept to a comfortable measure.
   ========================================================================== */

/* Client-review production state: a clean "being finalised" notice shown in
   production, while the draft body (with review placeholders) is gated to the
   staging/development view. Keeps the page presentable without unsupported claims. */
.legal-inprep {
  max-width: 62ch; margin-block: var(--space-8);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.legal-inprep__label {
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-accent-strong); margin: 0 0 var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.legal-inprep__label::before { content: ""; width: 20px; height: 2px; background: var(--color-accent); }
.legal-inprep p { margin: 0; color: var(--color-text-muted); line-height: 1.6; }
.legal-inprep a { color: var(--color-link); }

/* Review notice banner (staging visibility of "needs legal review"). */
.legal-notice {
  border: 1px solid var(--warning);
  background: rgba(181, 137, 43, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.legal-notice__icon {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--warning); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
}
.legal-notice p { margin: 0; font-size: var(--fs-small); color: var(--text-strong); }

/* Content column — comfortable reading measure, not full-width. */
.legal-content { max-width: 72ch; }
.legal-content h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-hairline);
}
.legal-content h2:first-of-type { margin-top: var(--space-8); }
.legal-content h3 { font-size: 1.0625rem; margin-top: var(--space-6); }
.legal-content p, .legal-content li { color: var(--color-text); }
.legal-content ul, .legal-content ol { padding-left: var(--space-6); }
.legal-content li { margin-bottom: var(--space-2); }
.legal-meta { color: var(--color-text-muted); font-size: var(--fs-small); margin-bottom: var(--space-8); }

/* Optional table of contents (desktop sidebar). */
.legal-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
@media (min-width: 992px) {
  .legal-layout { grid-template-columns: 220px 1fr; gap: var(--space-16); align-items: start; }
  .legal-toc { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.legal-toc__title { font-family: var(--font-heading); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-500); margin-bottom: var(--space-3); }
.legal-toc ul { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin-bottom: var(--space-2); }
.legal-toc a { font-size: var(--fs-small); color: var(--color-text-muted); }
.legal-toc a:hover { color: var(--color-accent-strong); }

/* --------------------------------------------------------------- 404 page -- */
.error-hero { background: var(--bg-dark); color: var(--text-on-dark); }
.error-hero__inner { padding-block: clamp(4rem, 3rem + 8vw, 9rem); text-align: center; }
.error-code {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: clamp(4rem, 2rem + 12vw, 8rem); line-height: 1;
  color: var(--copper-300); letter-spacing: -0.03em; margin: 0 0 var(--space-4);
}
.error-hero h1 { color: var(--text-on-dark); margin-bottom: var(--space-4); }
.error-hero p { color: var(--text-on-dark-muted); max-width: 48ch; margin-inline: auto; }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
.error-links { margin-top: var(--space-12); }
.error-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.error-links a { color: var(--copper-300); font-size: var(--fs-small); }