/* Shared styling for the static legal pages (Terms of Use, Privacy Policy).
   Kept separate from the React app so these two pages ship as plain HTML with
   no JS. Mirrors the main site's theme tokens. */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/nunito-latin-var.woff2') format('woff2');
}

:root {
  /* Match the main site's container (see src/index.css --maxw / --gutter) */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 56px);
  --blue: #2196f3;
  --blue-dark: #1769c9;
  --ink: #10233a;
  --text: #3f5670;
  --muted: #6b7f96;
  --bg: #ffffff;
  --bg-alt: #f4f8fc;
  --border: #e3ecf4;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.legal-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.legal-header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.legal-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.legal-header .brand span {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.legal-header img {
  height: 40px;
  width: auto;
  display: block;
}
.legal-header a.back {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
}
.legal-header a.back:hover {
  color: var(--blue-dark);
}

main.legal {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 48px var(--gutter) 80px;
}

.legal h1 {
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.legal h2 {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 800;
  margin: 40px 0 12px;
}
.legal h3 {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 26px 0 8px;
}
.legal p {
  margin: 0 0 16px;
}
.legal ul,
.legal ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal li {
  margin-bottom: 8px;
}
.legal a {
  color: var(--blue);
  font-weight: 600;
}

.legal-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.legal-footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 28px var(--gutter);
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}
.legal-footer a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.legal-footer a:hover {
  color: var(--blue);
}
.legal-footer .sep {
  opacity: 0.4;
  margin: 0 8px;
}