/* ==========================================================================
   CHIMAERA — Legal pages (/privacy/, /terms/)
   ==========================================================================

   Long-form reading pages. Loaded after page.css: reuses .page-intro for
   the title, then one readable column of numbered sections. Like page.css,
   no opaque backgrounds behind text — the atmosphere stays visible.
   ========================================================================== */

/* Title block: shorter than the generic 70svh intro — the text is the page. */
.page-intro--legal {
  min-height: auto;

  padding-top: calc(var(--header-clearance) + var(--space-l));
  padding-bottom: var(--space-l);
}

.legal {
  position: relative;
  z-index: 1;

  padding-bottom: var(--space-3xl);
}

.legal__inner {
  max-width: var(--content-max-width);
}

.legal__updated {
  margin: 0 0 var(--space-xl);
}

/* ---- Sections ---- */

.legal section {
  padding-block: var(--space-l);

  border-top: var(--rule-width) solid var(--color-ink-30);
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 700;

  font-size: var(--step-2);

  line-height: 1.1;

  margin: 0 0 var(--space-s);
}

.legal ul {
  margin: var(--space-s) 0 0;
  padding-left: 1.2em;

  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-body);

  max-width: var(--measure);
}

.legal li + li {
  margin-top: var(--space-2xs);
}

/* ---- What we process: one block per situation (a table can't fit a phone) ---- */

.legal-uses {
  display: grid;
  gap: var(--space-m);

  margin: var(--space-m) 0 0;
}

.legal-use {
  padding: var(--space-s) 0 0;

  border-top: var(--rule-width) dashed var(--color-ink-25);
}

.legal-use h3 {
  font-family: var(--font-display);
  font-weight: 700;

  font-size: var(--step-0);

  margin: 0 0 var(--space-2xs);
}

.legal-use dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3xs) var(--space-s);

  margin: 0;

  font-family: var(--font-text);
  font-size: var(--text-small);
  line-height: 1.45;
}

.legal-use dt {
  opacity: 0.7;
}

.legal-use dd {
  margin: 0;
}

@media (min-width: 48rem) {
  .legal-uses {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l) var(--column-gap);
  }
}

.legal__note {
  margin-top: var(--space-m);
}

/* "CONDITIONS" at the full intro size is wider than a phone. */
.page-intro--legal h1 {
  font-size: var(--step-4);

  overflow-wrap: break-word;
}

@media (min-width: 48rem) {
  .page-intro--legal h1 {
    font-size: var(--step-5);
  }
}