/* -----------------------------------------------------------------------------
   VALEON — legal
   Privacy policy and anything else that is mostly prose.

   Deliberately the quietest page on the site. §9 says the UI is an instrument
   panel rather than part of the spectacle, and a privacy policy is the furthest
   thing from spectacle there is: it exists to be READ, and read by someone who
   is often annoyed, in a hurry, or a reviewer with a checklist. So the measure
   is narrowed to something a person can actually track across a line, the
   headings are anchored so a provider's console can be pointed at one section,
   and the family colours appear only as section markers.
   -------------------------------------------------------------------------- */

.legal-hero {
  padding: var(--space-8) 0 var(--space-5);
}
.legal-hero h1 { margin-bottom: var(--space-3); }
.legal-hero .lede {
  max-width: 60ch;
  color: var(--ink-mid);
  font-size: 1.1rem;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--grid-line);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-lo);
}
.legal-meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: var(--space-1);
  font-weight: 700;
}

/* ----- Backdrop pool ---------------------------------------------------- */
/* The same device as .hero::before on the landing page and .lb-panel::before on
   the leaderboards, and for the same stated reason: the drifting shards are
   painted on a canvas BEHIND the page, but they are bright and they glow, so
   over unbacked body text they read as passing across it. A ranked list was
   called the one surface where legibility outranks spectacle — a privacy policy
   outranks it again. Someone is reading this because they are worried, or
   because reviewing it is their job.

   z-index: -1 keeps the pool behind the text but still inside .page, which
   establishes the stacking context, so it never covers the canvases entirely. */
.legal-hero,
.legal-summary,
.legal-body { position: relative; }

/* Wide and flat rather than a tight ellipse: these two blocks use the full
   measure, so a pool that starts fading at 76% leaves the right-hand column
   sitting in clear space — which is exactly where a shard crosses it. */
.legal-hero::before,
.legal-summary::before {
  content: "";
  position: absolute;
  inset: -2rem -3rem;
  background: radial-gradient(
    ellipse 82% 74% at 50% 50%,
    rgba(5, 8, 18, 0.93) 0%,
    rgba(5, 8, 18, 0.88) 58%,
    transparent 90%
  );
  pointer-events: none;
  z-index: -1;
}

/* The body is thousands of pixels tall, where an ellipse would fade out down the
   page. A horizontally soft-edged column holds all the way down instead. */
.legal-body::before {
  content: "";
  position: absolute;
  top: 0; bottom: var(--space-8);
  left: 0;
  width: min(82ch, 100%);
  background: linear-gradient(
    90deg,
    rgba(5, 8, 18, 0.86) 0%,
    rgba(5, 8, 18, 0.86) 72%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}

/* ----- The short version ------------------------------------------------ */
/* Almost nobody reads a privacy policy end to end. This is the honest summary,
   placed first, and it does not say anything the full text contradicts. */
/* margin-top/bottom rather than the shorthand: this element also carries .wrap,
   whose `margin: 0 auto` is what centres it. A shorthand here sets the left and
   right margins to 0 and quietly pushes the whole block to the viewport edge. */
.legal-summary {
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
}
.legal-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.legal-summary li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--ink-mid);
  font-size: 0.95rem;
}
.legal-summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--cryo);
  box-shadow: var(--glow-cryo);
}

/* ----- Body ------------------------------------------------------------- */
/* The measure is constrained on the SECTIONS, not on .legal-body itself.
   .legal-body carries .wrap, so narrowing it would let `margin: 0 auto` centre
   the prose independently and it would stop sharing a left edge with the hero
   and the summary above it. Constraining the children keeps the page's single
   left rule intact and still stops a line running to 140 characters. */
.legal-body {
  padding-bottom: var(--space-9);
}
.legal-body section {
  max-width: 74ch;
  padding-top: var(--space-7);
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}
.legal-body h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  margin-bottom: var(--space-4);
}
.legal-body h2 .num {
  color: var(--ink-dim);
  font-size: 0.7em;
  margin-right: var(--space-3);
}
.legal-body h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--ink-mid);
}
.legal-body p,
.legal-body li { color: var(--ink-mid); }
.legal-body ul,
.legal-body ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.legal-body li { margin-bottom: var(--space-2); }
.legal-body a { color: var(--cryo); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--ink-hi); }
.legal-body strong { color: var(--ink-hi); font-weight: 600; }

/* ----- Data tables ------------------------------------------------------ */
/* Wrapped in .legal-table so a narrow phone scrolls the TABLE rather than the
   page — a policy that scrolls sideways reads as broken. */
.legal-table {
  overflow-x: auto;
  margin: 0 0 var(--space-5);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-3);
  background: rgba(14, 22, 38, 0.35);
}
.legal-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 520px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--grid-line);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-lo);
  font-weight: 700;
  white-space: nowrap;
}
.legal-table td { color: var(--ink-mid); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  color: var(--ink-hi);
}

/* ----- Callout ---------------------------------------------------------- */
/* Used for the things a provider's review team looks for specifically. */
.legal-note {
  position: relative;
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--grid-line-warm);
  border-left: 2px solid var(--aurora);
  border-radius: var(--radius-2);
  background: rgba(14, 22, 38, 0.5);
}
.legal-note p:last-child { margin-bottom: 0; }
.legal-note .legal-note-title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
  color: var(--aurora);
  margin-bottom: var(--space-2);
}

/* ----- Contents --------------------------------------------------------- */
.legal-toc {
  margin: var(--space-6) 0 0;
}
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--space-6);
  counter-reset: toc;
}
.legal-toc li {
  counter-increment: toc;
  margin-bottom: var(--space-2);
  break-inside: avoid;
  font-size: 0.92rem;
}
.legal-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  margin-right: var(--space-3);
}
.legal-toc a { color: var(--ink-mid); }
.legal-toc a:hover { color: var(--cryo); }

@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
}