/* ==========================================================================
   Steady Scale — Terms & Conditions
   Page-local styles. Inherits the Sand & Forest system from styles.css.

   Structural intent: a single flowing legal document, not a marketing page.
   No cards, no jump-row (the document is short enough to read in one pass),
   no decoration between the reader and the text. Prose is held to the site's
   own 54-60ch measure so a dense document stays comfortable to read.
   ========================================================================== */

/* Charcoal Warm, not Ink Soft: at .95rem this sits below the site's large-text
   threshold, and Ink Soft measured 3.66:1 here, below the documented 4.5:1
   floor for anything the visitor needs to read. The "last updated" date is
   meaningful on a legal document, not decoration. */
.legal-updated { color: var(--ink); font-size: .95rem; margin-top: .5rem; }

.legal { max-width: 60ch; }

.legal h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin-top: clamp(2.25rem, 5vw, 3rem);
  margin-bottom: .85rem;
  /* Clears the sticky header (~4.75rem) when a same-page link (e.g. from an
     email or a bookmark) lands directly on a clause heading. */
  scroll-margin-top: 6rem;
}
.legal h2:first-child { margin-top: 0; }

.legal p { color: var(--ink); line-height: 1.7; margin-bottom: 1.1rem; }
.legal p:last-child { margin-bottom: 0; }

/* The global reset (styles.css) strips list markers site-wide for the card and
   nav patterns that make up the rest of the site. A legal document is the one
   place numbered/bulleted sub-clauses are genuinely load-bearing, not
   decorative, so they're reinstated here, scoped to .legal only. */
.legal ul, .legal ol {
  margin: 0 0 1.1rem;
  padding-left: 1.3rem;
  color: var(--ink);
  line-height: 1.7;
}
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: .5rem; }
.legal li:last-child { margin-bottom: 0; }
.legal li::marker { color: var(--ink-soft); }

.legal strong { color: var(--ink); font-weight: 600; }

.legal a {
  color: var(--forest);
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.legal a:hover { color: var(--terracotta-deep); }