:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --tint: #3A86FF;
  --tint-soft: #E7F1FF;
  --text-primary: #1F1F1F;
  --text-secondary: #8A8A8A;
  --text-on-tint: #FFFFFF;
  --border: #E5E5E8;
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151718;
    --surface: #1E2538;
    --tint: #4C93FF;
    --tint-soft: #22314f;
    --text-primary: #ECEDEE;
    --text-secondary: #94A3B8;
    --border: #2D3748;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
}

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--tint);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  padding: 20px 0;
}

.site-header .wrap {
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--tint-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-mark svg {
  width: 20px;
  height: 20px;
  fill: var(--tint);
}

.brand-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
}

.brand-name span {
  color: var(--tint);
}

.site-nav {
  display: flex;
  gap: 24px;
}

.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.site-nav a:hover {
  color: var(--tint);
}

/* Footer */
.site-footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--border);
  margin-top: 64px;
}

.site-footer .wrap {
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer .links {
  display: flex;
  gap: 20px;
}

.site-footer a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
}

.site-footer a:hover {
  color: var(--tint);
}

.copyright {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Legal pages */
.legal main {
  padding: 24px 0 64px;
}

.legal h1 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 4px;
}

.legal .updated {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 24px;
}

.legal h2 {
  font-size: 19px;
  font-weight: 700;
  margin-top: 36px;
  margin-bottom: 10px;
}

.legal p, .legal li {
  color: var(--text-primary);
  font-size: 16px;
}

.legal ul {
  padding-left: 20px;
}

.draft-banner {
  background: var(--tint-soft);
  border: 1px solid var(--tint);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 32px;
}

.draft-banner strong {
  color: var(--tint);
}

/* Narrow screens: the header's brand name + two nav links don't both fit at full size
   without wrapping, which (since nothing else constrains it) would otherwise push the whole
   page wider than the viewport. Shrink them instead of letting that happen. */
@media (max-width: 420px) {
  .wrap {
    padding: 0 16px;
  }

  .brand-name {
    font-size: 17px;
  }

  .site-nav {
    gap: 14px;
  }

  .site-nav a {
    font-size: 14px;
  }

  .hero h1 {
    font-size: 32px !important;
  }
}