/* ============================================================
   LEGAL — terms, privacy, refunds, cookies (body[data-page=legal])
   A calm crest header: the title and its 'Last updated' line on the
   left, a crest window (the crest's own proportions, never stretched)
   onto a still mountain night on the right; it stays still on load. Then
   the document on the spine: every section taps the trace with a
   chamfered nameplate at the via (never sticky: a riding via would slide
   off the trace's 45-degree jogs) while the text reads at 40rem beside
   it. No boxes around text; the only light is the trace.
   Two rails from 1180px: --legal-cols (nameplates | text), which the
   header shares, so the crest window sits over the text column.
   ============================================================ */

body[data-page="legal"] {
  --legal-cols: minmax(0, 23rem) minmax(0, 40rem);
  --legal-gap: clamp(40px, 5vw, 80px);
}

/* ---------- header ---------- */

.legal-head {
  overflow: clip; /* the still trace below the 'Last updated' via stops at the header's edge */
  padding: calc(var(--nav-h) + clamp(28px, 5vw, 64px)) 0 clamp(36px, 4.4vw, 64px);
}
.legal-head-inner { position: relative; z-index: 1; display: grid; gap: var(--s-6) var(--legal-gap); align-items: center; }
/* a low band of mist across the header's foot, so the window stands in the night instead of on bare navy */
.legal-env {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 52%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 52%, transparent 96%);
}
.legal-haze { top: auto; height: 88%; }
.legal-haze > img { object-position: 50% 100%; opacity: 0.34; }
.legal-head-text { position: relative; min-width: 0; }
.page-head.legal-head h1 { max-width: 8em; margin: 0 0 var(--s-5); line-height: 0.94; }

/* 'Last updated': taps the trace like a rack row */
.page-head .legal-updated { position: relative; margin: 0; color: var(--steel); font-size: var(--fs-small); }
.legal-updated time { color: var(--silver); font-weight: 500; }
.page-head .legal-updated > .pad { left: calc(var(--lane) * -0.5 - var(--pad) / 2); top: calc(50% - var(--pad) / 2); }
.legal-updated > .stub { width: calc(var(--lane) * 0.5 - 12px); }

/* the crest window: the crest's own silhouette and proportions (the frame's viewBox is square; 1.12 is the
   inner-page stage's ratio), a still mountain night inside */
.legal-crest { width: min(100%, 400px); aspect-ratio: 1.12; justify-self: center; }
/* the cloud band graded down to night, so nothing in the window reads as daylight */
.legal-crest .legal-sky > img { object-position: 30% 58%; filter: brightness(0.46) saturate(0.85); }
.legal-crest .legal-ridges, .legal-crest .legal-mist { top: 30%; }
.legal-crest .legal-ridges > img { object-position: 24% 0%; }
.legal-crest .legal-mist > img { object-position: 50% 0%; opacity: 0.75; }
.legal-crest .legal-fog > img { object-position: 50% 100%; opacity: 0.6; }
.legal-crest .portal-veil { background: linear-gradient(180deg, rgba(3, 6, 26, 0.05) 0%, rgba(3, 6, 26, 0) 40%, rgba(3, 6, 26, 0.5) 100%); }

@media (min-width: 720px) {
  .legal-head-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}
@media (min-width: 1180px) {
  .legal-head-inner { grid-template-columns: var(--legal-cols); justify-content: start; }
  .legal-crest { justify-self: start; }
}
/* phones: a small crest beside the title instead of a band under it */
@media (max-width: 719.98px) {
  .legal-head-inner { grid-template-columns: minmax(0, 1fr) min(34vw, 150px); align-items: start; gap: var(--s-4); }
  .legal-crest { width: 100%; justify-self: end; margin-top: 4px; }
}

/* ---------- the document ---------- */

.legal-doc.sec { padding-block: 0 var(--chapter-pad); }
body[data-page="legal"] .prose { max-width: none; }

/* the opening paragraph ('Short version' / scope) is the lede */
body[data-page="legal"] .prose > p:first-child {
  max-width: 54ch;
  margin: 0;
  color: var(--silver);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, var(--fs-lede));
  line-height: 1.55;
}

.legal-sec { position: relative; margin-top: clamp(48px, 6vw, 88px); }
.legal-sec + .legal-sec { margin-top: clamp(40px, 5vw, 72px); }

/* nameplate: a facet plate holding the section heading; the trace taps it at its middle */
.legal-plate {
  width: fit-content;
  max-width: 100%;
  padding: 16px 24px 17px;
}
.legal-plate > .pad { left: calc(var(--lane) * -0.5 - var(--pad) / 2); top: calc(50% - var(--pad) / 2); }
.legal-plate > .stub { width: calc(var(--lane) * 0.5); }
body[data-page="legal"] .legal-plate h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.15rem + 0.9vw, 1.875rem);
  line-height: 1.08;
  font-stretch: 88%;
  text-wrap: balance;
}

.legal-body { margin-top: var(--s-5); }
.legal-body > * { max-width: 40rem; }
.legal-body > :first-child { margin-top: 0; }
.legal-body > :last-child { margin-bottom: 0; }

/* reading */
body[data-page="legal"] .prose p,
body[data-page="legal"] .prose ul { margin: 0 0 var(--s-4); line-height: 1.65; }
body[data-page="legal"] .prose ul { padding-left: 1.15em; list-style: square; }
body[data-page="legal"] .prose li { margin-bottom: var(--s-3); padding-left: 0.2em; }
body[data-page="legal"] .prose li:last-child { margin-bottom: 0; }
body[data-page="legal"] .prose li::marker { color: var(--steel); }
body[data-page="legal"] .prose h3 {
  margin: var(--s-6) 0 var(--s-3);
  font: 600 var(--fs-h4)/1.35 var(--font-text);
  color: var(--chrome);
}
body[data-page="legal"] .prose .legal-body > h3:first-child { margin-top: 0; }
/* Plex ships upright only: emphasis gets a drawn slant instead of vanishing under font-synthesis: none */
body[data-page="legal"] .prose em { font-synthesis: style; }

/* cookie table: names are row headers; it keeps its columns and scrolls inside its region on phones */
.legal-body > .table-wrap { max-width: none; margin: 0 0 var(--s-5); }
body[data-page="legal"] .prose table { min-width: 34rem; }
body[data-page="legal"] .prose tbody th { white-space: nowrap; }

/* two rails: the nameplates hold the left one, the text the right */
@media (min-width: 1180px) {
  .legal-sec {
    display: grid;
    grid-template-columns: var(--legal-cols);
    column-gap: var(--legal-gap);
    align-items: start;
  }
  .legal-plate { width: auto; }
  .legal-body { margin-top: 0; padding-top: 14px; }
}

/* still trace (motion off, reduced, no JS): from the 'Last updated' via down the lane; .legal-doc is a .sec,
   so the shared rule carries it on to the footer */
@media (min-width: 720px) {
  html:not(.motion):not([data-open]) .legal-updated::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: calc(var(--lane) * -0.5);
    top: 50%;
    width: 1px;
    height: 100vh;
    background: rgba(70, 210, 245, 0.45);
    pointer-events: none;
  }
}