/* ============================================================
   XYMERIS LABS — LEGAL SHEET (privacy.html & terms-of-service.html)
   Legal pages load ONLY this stylesheet. This file defines the
   page background and text colors itself, with strong contrast,
   and isolates the legal prose container from any other CSS so
   legal content always sits on the page base color. Nothing here
   is semi-transparent; every decorative band is pre-blended.
   ============================================================ */

:root {
  --nl-newsprint: #F6F4EE;     /* unprinted proof sheet soft white */
  --nl-soot: #23211E;          /* main ink text */
  --nl-paper: #FCFBF6;         /* raised paper columns */
  --nl-ink: #1C1A17;           /* deep header band */
  --nl-inktext: #EFECE2;       /* text on the deep band */
  --nl-red: #C24A31;           /* vermilion accent */
  --nl-steel: #5A6470;         /* secondary ink */
  --nl-line: #E2DCCC;          /* hairlines */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;                       /* literal body font-size */
  background-color: var(--nl-newsprint);
  color: var(--nl-soot);
  line-height: 1.78;
  overflow-x: hidden;
  width: 100%;
}

a { color: var(--nl-red); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 700; color: var(--nl-soot); line-height: 1.25; }

/* ============================================================
   LEGAL HEADER — a solid deep band with strong h1 contrast,
   exactly as the legal pages require.
   ============================================================ */
.nl-header {
  background: var(--nl-ink);
  border-bottom: 3px solid var(--nl-red);
}
.nl-header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.nl-header-brand { padding: 22px 0 10px; }
.nl-header-brand a {
  font-family: "Courier New", monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--nl-inktext);
  text-transform: uppercase;
}
.nl-header-brand a:hover { color: var(--nl-red); text-decoration: none; }
.nl-title { padding: 8px 0 26px; }
.nl-title p.nl-eyebrow {
  font-family: "Courier New", monospace;
  color: var(--nl-red);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.76rem;
  margin-bottom: 10px;
}
.nl-title h1 { color: var(--nl-inktext); font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 20ch; }
.nl-title .nl-rule {
  width: 92px;
  height: 4px;
  background: var(--nl-red);
  margin: 14px 0 0;
}

/* ============================================================
   SCOPE ISOLATION — legal prose container. Any section inside
   the legal content must render on the page base color, even
   if ambient styles (from other sheets that are not loaded on
   the legal pages) would inject panel or stripe backgrounds.
   ============================================================ */
.nl-page {
  background: var(--nl-newsprint);
  min-height: 60vh;
}
.nl-shell {
  max-width: 900px;
  margin: 0 auto;             /* REQUIRED with max-width on a content wrap */
  padding: 44px 24px 28px;
}
.nl-meta { font-family: "Courier New", monospace; color: var(--nl-steel); font-size: 0.84rem; margin-bottom: 26px; border-bottom: 1px solid var(--nl-line); padding-bottom: 16px; }
.nl-meta b { color: var(--nl-soot); }

.legal-content section {
  background: var(--nl-newsprint) !important;    /* scope isolation */
  color: var(--nl-soot) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: none !important;
  box-shadow: none !important;
  border: none !important;
}
.legal-content h2 {
  font-size: 1.45rem;
  color: var(--nl-soot);
  margin: 40px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--nl-line);
}
.legal-content h2 .anchor-wrap { display: block; margin-top: 8px; }
.legal-content h3 { font-size: 1.12rem; color: var(--nl-ink); margin: 20px 0 8px; }
.legal-content p { margin: 0 0 14px; color: #33312C; }
.legal-content ul, .legal-content ol { margin: 0 0 16px 24px; color: #33312C; }
.legal-content li { margin-bottom: 7px; }
.legal-content a { color: var(--nl-red); font-weight: 700; }

/* ============================================================
   LINK BACK TO THE HOMEPAGE (rich, editorial bar band)
   ============================================================ */
.nl-homebackLink { margin-top: 20px; }
.nl-homepush {
  display: block;
  background: var(--nl-red);
  color: var(--nl-newsprint);
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 16px 22px;
  text-align: center;
}
.nl-homepush:hover { background: var(--nl-ink); color: var(--nl-inktext); text-decoration: none; }
.nl-homepush .ns-arr::after { content: " →"; }

/* Table of contents rail */
.legal-content .toc {
  background: var(--nl-paper);
  border: 1px solid var(--nl-line);
  border-left: 6px solid var(--nl-red);
  padding: 18px 22px;
  margin: 0 0 10px;
}
.legal-content .toc h2 { border: none; margin: 0 0 12px; padding: 0; font-size: 1.15rem; }
.legal-content .toc ol { margin-left: 20px; }
.legal-content .toc li { margin-bottom: 4px; }
.legal-content .toc a { font-weight: 700; color: var(--nl-red); text-decoration: none; }

/* ============================================================
   LEGAL FOOTER — plain centred band with the back link.
   ============================================================ */
.nl-footer {
  background: var(--nl-ink);
  border-top: 3px solid var(--nl-red);
}
.nl-footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 26px 24px 30px;
  text-align: center;
}
.nl-footer-inner p { color: var(--nl-inktext); font-size: 0.92rem; }
.nl-footer-inner .nl-cr { font-family: "Courier New", monospace; font-size: 0.74rem; letter-spacing: 0.06em; color: #9E9A8F; margin-bottom: 10px; }
.nl-footer-inner a.nl-home {
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nl-red);
  font-size: 0.9rem;
}
.nl-footer-inner a.nl-home:hover { color: var(--nl-inktext); text-decoration: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 700px) {
  .nl-shell, .nl-header-inner, .nl-footer-inner { padding-left: 16px; padding-right: 16px; }
  .legal-content h2 { font-size: 1.3rem; }
}