/* Legal document pages (privacy.html). Reuses the sitewide tokens and base
   styles from contact.CW3nh7dV.css -- nothing here redefines a token.

   Deliberately NOT reusing .corner-brand from the home page: that header is
   position:absolute and overlays the hero, which on a long text page would sit
   on top of the first paragraph. A document page gets a header in normal flow. */

/* The header is the home page's header, not an approximation of it.
   `.corner-brand` in the markup picks up the flex row from header-cta.css, and
   `.header-cta` gives the CTA the same gradient-bordered treatment.

   What does NOT carry over is everything index.Dg6SV2NV.css scopes to
   [data-astro-cid-6llfy6le] -- the positioning, the padding and the logo
   sizing. Those are restated below at the same values, which is why the logo
   is 72px here rather than the 44px `.logo--md` would otherwise give.

   Deliberately NOT position:absolute like the home page: there it overlays a
   hero image, and on a long text page it would sit on top of the first
   paragraph. Same metrics, normal flow.

   No border-bottom either -- the home header has none, and .section already
   provides 96px of separation before the content. */
.legal-header {
  padding-block: var(--space-3);
  padding-inline: var(--space-5);
}

/* !important for the same reason index.Dg6SV2NV.css uses it on the home header:
   `.logo--md[data-astro-cid-tvrurpns] .logo__mark[data-astro-cid-tvrurpns]` is
   four selectors deep and would otherwise win with its default 44px. Matching
   that specificity here would mean writing the scope attribute into these
   selectors too, which is less legible than the precedent already set. */
.legal-header .logo__mark {
  width: 72px !important;
  height: 72px !important;
}

.legal-header .logo__word {
  font-size: 2rem;
}

@media (max-width: 640px) {
  .legal-header .logo__mark {
    width: 40px !important;
    height: 40px !important;
  }

  .legal-header .logo__word {
    font-size: 1.125rem;
  }
}

.legal__inner {
  /* ~70 characters. Long measure is the main readability failure on legal
     pages, and this is a page people are meant to actually read. */
  max-width: 70ch;
}

.legal__eyebrow {
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-gray-300);
}

.legal__title {
  font-size: var(--type-section-headline);
  font-weight: 700;
  line-height: 1.15;
  margin-top: var(--space-2);
}

.legal__updated {
  margin-top: var(--space-3);
  font-size: var(--type-label);
  color: var(--color-gray-300);
}

.legal__lead {
  margin-top: var(--space-5);
  font-size: var(--font-size-md);
  color: var(--color-paper);
}

.legal h2 {
  margin-top: var(--space-7);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.3;
}

.legal p,
.legal li {
  /* gray-300 on --color-dark-bg is 7.77:1. */
  color: var(--color-gray-300);
  line-height: 1.7;
}

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

.legal ul {
  margin-top: var(--space-4);
  padding-left: var(--space-5);
}

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

.legal strong {
  /* Full-strength paper against gray-300 body text, so emphasis reads as
     emphasis rather than as a slightly different grey. 20.43:1. */
  color: var(--color-paper);
  font-weight: 600;
}

/* Underlined, not colour-only: WCAG 1.4.1 -- colour alone must not be the only
   thing distinguishing a link from surrounding text. */
.legal a {
  color: var(--color-paper);
  text-decoration: underline;
  text-decoration-color: var(--color-magenta);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal a:hover {
  text-decoration-thickness: 2px;
}

.legal__back {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-dark-border);
}