/* ============================================================
   Goodwood Marine — compliance pages
   privacy-policy, terms-of-service, customer-support
   ============================================================

   Long-form legal text, which the rest of the site has none of. The
   job here is legibility over a few thousand words, not art direction:
   one column held to a reading measure, generous leading, and headings
   that are findable when someone is scanning for one clause. */

.legal {
  max-width: 68ch;
  color: var(--muted-light);
  font-size: var(--fs-base);
  line-height: 1.7;
}

/* The opening paragraphs carry the definitions the rest of the document
   leans on, so they are set slightly larger and in the ink colour. */
.legal__intro { color: var(--ink-text); font-size: var(--fs-lg); line-height: 1.55; }
.legal__intro + .legal__intro { margin-top: var(--sp-4); }

.legal h2 {
  margin: var(--sp-9) 0 var(--sp-4);
  font-size: var(--fs-xl);
  color: var(--ink-text);
  /* A rule rather than a box: nothing else on this page is a panel, and a
     boxed heading would read as a callout it is not. */
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-light);
}
.legal__intro + h2,
.legal > h2:first-child { margin-top: var(--sp-7); }

.legal p + p { margin-top: var(--sp-4); }

.legal ul {
  margin: var(--sp-4) 0;
  display: grid; gap: var(--sp-4);
  list-style: none;
}
/* Hanging marker, so a clause that wraps stays aligned under its own text
   rather than under the bullet. */
.legal li { position: relative; padding-left: var(--sp-6); }
.legal li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
}
.legal li strong { color: var(--ink-text); }

.legal a { color: var(--ink-text); text-decoration-color: var(--line-light); }
.legal a:hover { text-decoration-color: var(--amber); }

.legal__contact {
  margin-top: var(--sp-5);
  font-style: normal;
  color: var(--ink-text);
  line-height: 1.8;
}

.legal__note {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-light);
  font-size: var(--fs-sm);
}

/* Effective/updated dates sit in the page head, on the dark ground. */
.legal__dates {
  margin-top: var(--sp-4);
  font-family: var(--data);
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  color: var(--muted-dark);
}

@media (min-width: 900px) {
  .legal { font-size: var(--fs-lg); line-height: 1.75; }
  .legal__intro { font-size: 1.35rem; }
}