/* Layout for the static legal pages (/privacy, /terms, /data-deletion).
   Same rules as public/design-system/starter.html: everything visible is a
   token or a tokens.css class, nothing above weight 600, no gradients.
   These pages are plain HTML on purpose — Meta's crawler and other reviewers
   read the policy without running JavaScript, so it cannot live in the SPA. */

.wrap { max-width: var(--max-marketing); margin: 0 auto; padding-inline: var(--space-5); }

.topbar { display: flex; align-items: center; gap: var(--space-3); height: 64px; border-bottom: 1px solid var(--border); }
.topbar .logo { display: inline-flex; align-items: center; }
.topbar .logo img { height: 28px; width: auto; display: block; }
.topbar .spacer { flex: 1; }

.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8) 0 var(--space-9); }

.legal-nav { position: sticky; top: var(--space-5); align-self: start; display: grid; gap: 2px; }
.legal-nav .label { font-family: var(--font-mono); font-size: var(--fs-1); line-height: var(--lh-1); color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-2); }
.legal-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-2); line-height: var(--lh-2); color: var(--text-2); }
.legal-nav a:hover { background: var(--surface); color: var(--text-1); text-decoration: none; }
.legal-nav a[aria-current="page"] { background: var(--surface); color: var(--text-1); box-shadow: inset 2px 0 0 var(--accent); }

.doc { max-width: 72ch; }
.doc .eyebrow { font-family: var(--font-mono); font-size: var(--fs-1); line-height: var(--lh-1); color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-3); }
.doc h1 { font-size: var(--fs-8); line-height: var(--lh-8); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.doc .updated { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--text-3); margin-bottom: var(--space-6); }
.doc .lead { font-size: var(--fs-4); line-height: var(--lh-4); color: var(--text-2); margin-bottom: var(--space-6); }

.doc h2 { font-size: var(--fs-6); line-height: var(--lh-6); font-weight: 600; margin: var(--space-7) 0 var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border); scroll-margin-top: var(--space-5); }
.doc h3 { font-size: var(--fs-5); line-height: var(--lh-5); font-weight: 500; margin: var(--space-5) 0 var(--space-2); }
.doc p, .doc li { color: var(--text-2); }
.doc p { margin-bottom: var(--space-4); }
.doc ul, .doc ol { margin: 0 0 var(--space-4) var(--space-5); display: grid; gap: var(--space-2); }
.doc strong { color: var(--text-1); font-weight: 600; }
.doc a { text-decoration: underline; text-underline-offset: 2px; }

.doc .toc { margin-bottom: var(--space-6); }
.doc .toc ol { margin-bottom: 0; gap: var(--space-1); }
.doc .toc li { font-size: var(--fs-2); line-height: var(--lh-2); }

.doc .card { margin-bottom: var(--space-5); }
.doc .card p { margin-bottom: var(--space-2); }
.doc .card p:last-child { margin-bottom: 0; }

.doc .table-wrap { margin-bottom: var(--space-5); }
.doc .table td { color: var(--text-2); vertical-align: top; }
.doc .table td:first-child { color: var(--text-1); }

/* Business identity block — the details Meta matches against Business Info. */
.entity { font-style: normal; display: grid; gap: var(--space-1); }
.entity dt { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }
.entity dd { color: var(--text-1); margin-bottom: var(--space-3); }
.entity dd:last-child { margin-bottom: 0; }

.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); padding-bottom: var(--space-5); font-size: var(--fs-1); line-height: var(--lh-1); color: var(--text-3); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer a { color: var(--text-3); }
.site-footer a:hover { color: var(--text-1); }

@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-6); }
  .legal-nav { position: static; display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .legal-nav .label { display: none; }
}

@media (max-width: 520px) {
  .wrap { padding-inline: var(--space-4); }
  .doc h1 { font-size: var(--fs-7); line-height: var(--lh-7); }
  .topbar .btn { display: none; }
}