/* Shared styling for the Privacy Policy, Terms and 404 pages.
   Layout and rhythm only: the tokens come from tl-system.css, loaded before
   this. Deliberately plainer than the rest of the site, because long-form
   text wants a single column, generous line height and no ornament competing
   with it. */

@import url('/assets/fonts/fonts.css');

/* The palette lives in tl-system.css, which these pages now load first.
   It used to be copied here, hard-coded to the dark theme with no light
   rules at all, so Privacy, Terms and the 404 rendered dark on every site
   whatever the reader had chosen. The copy also carried #A1A1AA/#71717A for
   --muted/--faint, which are the Tailwind zinc values rather than the tuned
   ones, and #71717A measures 4.07:1 on this ground. Seventy-two elements a
   page were below 4.5:1 because of that one line. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* The brand spectrum, as on every other page. */
body::before {
  content: '';
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50;
  background: var(--tl-rainbow);
}

header {
  border-bottom: 1px solid var(--line2);
  padding: 22px 0;
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg, rgba(11,11,12,0.88));
  backdrop-filter: blur(12px);
}

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }
header .wrap { display: flex; align-items: center; gap: 16px; }

.brand {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 19px;
  color: var(--text); text-decoration: none; letter-spacing: -0.01em;
}
.brand img { width: 30px; height: 30px; }
header nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
header nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
header nav a:hover { color: var(--text); }

main { padding: 56px 0 90px; }

h1 {
  font-family: 'Outfit', sans-serif; font-weight: 900;
  font-size: clamp(30px, 5.5vw, 44px); line-height: 1.12;
  margin: 0 0 12px; letter-spacing: -0.02em;
}
.updated { color: var(--faint); font-size: 14px; margin: 0 0 10px; }
.lede { color: var(--muted); font-size: 17px; margin: 0 0 40px; }

h2 {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 21px; margin: 42px 0 12px; letter-spacing: -0.01em;
  scroll-margin-top: 90px;
}
h3 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16.5px; margin: 26px 0 8px; }
p { margin: 0 0 15px; color: var(--prose, var(--text)); }
ul { margin: 0 0 15px; padding-left: 22px; color: var(--prose, var(--text)); }
li { margin-bottom: 8px; }
strong { color: var(--text); font-weight: 600; }
/* --greent is the display green, tuned for large headings at 3:1. A link is
   body text and needs 4.5:1, which is what --cta-text is for: on the light
   theme --greent measures 2.92:1 here. */
a { color: var(--cta-text, var(--greent)); }
a:hover { color: var(--cta, var(--green)); }

/* Contents list */
.toc {
  background: var(--bg2); border: 1px solid var(--line2);
  border-radius: var(--r-md); padding: 18px 22px; margin: 0 0 44px;
}
.toc h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
          letter-spacing: 0.08em; color: var(--faint); font-weight: 700; }
.toc ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.toc li { margin-bottom: 5px; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--greent); }

/* A statement worth making stand out, used for the no-tracking claim. */
.note {
  border-left: 3px solid var(--greent);
  background: rgba(52,199,89,0.07);
  padding: 15px 20px; margin: 22px 0; border-radius: 0 12px 12px 0;
}
.note.warn { border-left-color: var(--amber); background: rgba(255,179,92,0.07); }
.note p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
th { color: var(--faint); font-weight: 600; font-size: 12.5px;
     text-transform: uppercase; letter-spacing: 0.05em; }
td { color: var(--prose, var(--text)); }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

footer {
  border-top: 1px solid var(--line2); padding: 30px 0 44px;
  color: var(--faint); font-size: 13.5px;
}
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--text); }
footer .spacer { margin-left: auto; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}