/*
  Shared styles for the static legal pages (privacy/, terms/, data-deletion/).

  These pages are plain HTML on purpose: they have to render for Meta's App
  Review crawler and for anyone with JavaScript off, so there is no React,
  no Tailwind CDN and no build step. The look follows the homepage: black
  ground, Poppins body, Source Serif 4 italic accents, white at reduced
  opacity for secondary text, blue-400 for links.
*/

:root {
  --bg: #000;
  --fg: #fff;
  --fg-body: rgba(255, 255, 255, 0.78);
  --fg-muted: rgba(255, 255, 255, 0.5);
  --fg-faint: rgba(255, 255, 255, 0.3);
  --rule: rgba(255, 255, 255, 0.08);
  --panel: rgba(255, 255, 255, 0.03);
  --accent: #60a5fa; /* tailwind blue-400, the homepage accent */
  --gutter: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(96, 165, 250, 0.4);
}
a:hover {
  text-decoration-color: var(--accent);
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}
.site-header .inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fg);
  text-decoration: none;
}
.brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.brand span {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.05em;
}
.site-header nav a {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 0.875rem;
}
.site-header nav a:hover {
  color: var(--fg);
}

/* ---------- document ---------- */

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 56px var(--gutter) 80px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 16px;
}

h1 {
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0;
}
h1 em {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}

.updated {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.lede {
  margin: 32px 0 0;
  font-size: 1.0625rem;
  color: var(--fg-body);
}

h2 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 48px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 24px 0 8px;
}

p,
li {
  color: var(--fg-body);
}
p {
  margin: 0 0 14px;
}
ul,
ol {
  margin: 0 0 14px;
  padding-left: 1.25rem;
}
li {
  margin-bottom: 6px;
}
strong {
  color: var(--fg);
  font-weight: 500;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 1rem;
  padding: 20px 22px;
  margin: 24px 0;
}
.panel p:last-child,
.panel ol:last-child,
.panel ul:last-child {
  margin-bottom: 0;
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 18px 20px 18px 64px;
  margin: 0 0 12px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 1rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--fg);
}

address {
  font-style: normal;
  color: var(--fg-body);
}

/* Long email addresses and URLs must not force a horizontal scroll on phones. */
main a,
address {
  overflow-wrap: anywhere;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
}
.site-footer .inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 40px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.site-footer li {
  margin: 0;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer a:hover,
.site-footer a[aria-current='page'] {
  color: var(--fg);
}
.site-footer small {
  font-size: 0.75rem;
  color: var(--fg-faint);
}

@media (min-width: 768px) {
  .site-header .inner,
  .site-footer .inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  main {
    padding-top: 80px;
  }
}