/* Legal — every selector scoped under .m-legal (style.css rule 3), every colour
   a token, every size a scale step. */

/* Header rhythm, matching features, download and support: the head keeps no
   bottom padding and each band below brings one step, so two section paddings
   never stack into a hole. */
.m-legal__headsec { padding-block-end: 0; }
.m-legal__head > * + * { margin-block-start: var(--sp-3); }
.m-legal__head .lede { max-width: var(--measure); }
.m-legal__navsec { padding-block: var(--sp-5) 0; }

/* Two documents, side by side, wrapping at narrow widths. The pair is a tab
   bar, so it gets a rule under it to sit on rather than floating in space. */
.m-legal__docs {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  font-size: var(--fs-sm);
  padding-block-end: var(--sp-3);
  border-block-end: var(--hairline) solid var(--line);
}
.m-legal__docs a[aria-current="page"] { color: var(--ink); font-weight: 640; }

/* The document body. .prose already sets the measure and the paragraph rhythm;
   this only adds the heading spacing a long document needs, which .prose's
   uniform step is too tight for. */
/* A long document is read top to bottom, not scanned, so it gets a measure and
   generous space ABOVE each heading and tight space below it — a heading
   belongs to the text that follows it, and equal space on both sides makes it
   float between two sections instead of introducing one. */
.m-legal__bodysec { padding-block: var(--sp-6) var(--sp-9); }
.m-legal__doc .h2 { margin-block-start: var(--sp-8); margin-block-end: var(--sp-3); }
.m-legal__doc > .h2:first-of-type { margin-block-start: var(--sp-5); }
.m-legal__doc p { max-width: var(--measure); }
.m-legal__doc > p + p { margin-block-start: var(--sp-4); }

/* The effective-date line. Quieter than body text; it is metadata, not copy. */
.m-legal__meta { font-size: var(--fs-sm); color: var(--ink-2); margin-block-end: var(--sp-6); }

/* Lists carry as much of these documents as the paragraphs do, so they get the
   same measure and a readable gap rather than the browser default. */
.m-legal__list { max-width: var(--measure); padding-inline-start: var(--sp-5); color: var(--ink-2); }
.m-legal__list > li + li { margin-block-start: var(--sp-3); }
.m-legal__list strong { color: var(--ink); font-weight: 620; }

/* Callout. This is where a conventional policy SHOUTS IN CAPITALS — the
   disclaimer and the liability limit. Capitals are measurably harder to read,
   and the legal purpose of a "conspicuous" clause is that it stands out from
   the text around it, which a bordered, tinted block does better than caps. So
   the copy stays sentence case and the box does the conspicuousness. */
.m-legal__callout {
  max-width: var(--measure);
  margin-block: var(--sp-5);
  padding: var(--sp-5);
  border: var(--hairline) solid var(--line-strong);
  border-inline-start-width: 3px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
}