/* Shared styling for the legal pages (privacy.html, terms.html).
   Tokens come from colors_and_type.css — nothing is redefined here. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--brand-pink); color: var(--brand-ink); }
body { font-family: var(--font-body); }
a { color: var(--brand-red); }
a:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ---------- NAV (matches index.html) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 236, 244, 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 16px; }
.logo {
  font-family: var(--font-display); font-size: 36px; color: var(--brand-red);
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; text-decoration: none;
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--brand-ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.nav-links a:hover { color: var(--brand-red); }
@media (max-width: 640px) { .nav-links a:not(.nav-keep) { display: none; } }

/* ---------- DOC SHELL ---------- */
.doc-head { padding: 56px 0 32px; }
.doc-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--neutral-500);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.doc-title {
  font-family: var(--font-display); font-size: clamp(48px, 10vw, 88px);
  line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase;
  margin: 14px 0 0; color: var(--brand-ink);
}
.doc-title .red { color: var(--brand-red); }
.doc-lede { font-size: var(--fs-lg); color: var(--neutral-600); max-width: 60ch; margin: 18px 0 0; }

.doc-body {
  background: var(--neutral-0);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(24px, 5vw, 56px);
  max-width: 860px;
  margin: 0 0 72px;
}

/* ---------- TYPE ---------- */
.doc-body h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em;
  margin: 44px 0 10px; padding-top: 22px; border-top: 1px solid var(--neutral-100);
  scroll-margin-top: 80px;
}
.doc-body > h2:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.doc-body h3 { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; margin: 24px 0 6px; }
.doc-body p, .doc-body li { font-size: var(--fs-md); line-height: 1.65; color: var(--neutral-700); max-width: 68ch; }
.doc-body p { margin: 0 0 14px; }
.doc-body ul, .doc-body ol { margin: 0 0 16px; padding-left: 22px; }
.doc-body li { margin-bottom: 7px; }
.doc-body strong { color: var(--brand-ink); font-weight: 600; }
.doc-body code {
  font-family: var(--font-mono); font-size: 0.87em;
  background: var(--neutral-100); padding: 1px 5px; border-radius: 4px;
}

/* ---------- TABLE OF CONTENTS ---------- */
.toc { background: var(--neutral-50); border: 1px solid var(--neutral-100); border-radius: 14px; padding: 20px 24px; margin: 0 0 8px; }
.toc h2 { font-size: var(--fs-xs) !important; font-family: var(--font-mono) !important; letter-spacing: 0.1em; text-transform: uppercase;
          color: var(--neutral-500); margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; font-weight: 500; }
.toc ol { columns: 2; column-gap: 32px; padding-left: 18px; margin: 0; }
.toc li { font-size: var(--fs-sm); margin-bottom: 5px; break-inside: avoid; }
.toc a { text-decoration: none; color: var(--neutral-700); }
.toc a:hover { color: var(--brand-red); text-decoration: underline; }
@media (max-width: 560px) { .toc ol { columns: 1; } }

/* ---------- DATA TABLE ---------- */
.tbl-scroll { overflow-x: auto; margin: 0 0 18px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--neutral-100); vertical-align: top; font-size: var(--fs-sm); line-height: 1.55; }
th { font-family: var(--font-mono) !important; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-500); font-weight: 500; border-bottom: 1px solid var(--neutral-200); }
td { color: var(--neutral-700); }
td:first-child { color: var(--brand-ink); font-weight: 500; }

/* ---------- DECISION MARKERS ----------
   Every spot where a real decision is still outstanding. Deliberately loud —
   these must not survive to production unnoticed. */
.todo {
  font-family: var(--font-mono); font-size: 0.84em; font-weight: 500;
  background: #FFF0F0; color: var(--brand-red);
  border: 1px dashed var(--brand-red); border-radius: 4px;
  padding: 1px 6px; white-space: normal;
}
.notice {
  border: 2px solid var(--brand-red); background: #FFF5F7; border-radius: 14px;
  padding: 20px 24px; margin: 0 0 32px; max-width: 860px;
}
.notice h2 {
  margin: 0 0 8px !important; padding: 0 !important; border: 0 !important;
  font-family: var(--font-body); font-size: var(--fs-md) !important; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--brand-red);
}
.notice p, .notice li { font-size: var(--fs-sm); color: var(--neutral-700); }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
.notice ul { margin-bottom: 0; }

/* ---------- FOOTER ---------- */
.doc-foot { border-top: 1px solid var(--border); padding: 24px 0 48px; }
.doc-foot .legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
                   font-size: var(--fs-sm); color: var(--neutral-500); }
.doc-foot a { color: inherit; text-decoration: none; margin-right: 16px; }
.doc-foot a:hover { color: var(--brand-red); }