/* ==========================================================================
   UP AL — Legal pages
   Shared by privacy.html, terms.html, accessibility.html and cookies.html.
   Deliberately simple — no card, no grid, just the same typography-first
   restraint as the Hero, plus the sitewide ambient orb for depth.

   .legal__inner (eyebrow/title/intro) is the original shell every one of
   these pages already used. .legal__meta and .legal__body are additive:
   the real document content that now follows the intro, styled entirely
   from existing tokens (the same 1.25rem sub-heading size Process/
   Contact/Why/Portfolio/Services already use for card titles, the same
   body color/line-height as everywhere else) — no new colors, sizes or
   effects introduced anywhere in this file.
   ========================================================================== */

.legal {
  position: relative;
  padding-block: calc(var(--header-height) + var(--space-9)) var(--space-10);
  overflow: hidden;
  overflow: clip;
}

.legal__orb {
  width: 640px;
  height: 640px;
  inset-inline-end: -220px;
  top: -160px;
  background: radial-gradient(circle, rgba(158, 207, 247, 0.13), transparent 70%);
  opacity: 0.8;
}

.legal__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.legal__eyebrow {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.legal__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
  margin-block-end: var(--space-5);
}

.legal__message {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin-block-end: var(--space-6);
}

/* ---------- Document meta ("last updated") ----------
   Same small/muted/uppercase treatment as .legal__eyebrow, sitting just
   above the document body instead of above the title. Tightened from
   space-7/space-6 to space-5/space-4 — the original gap read fine
   against a long document body, but on shorter documents (e.g. the
   Accessibility Statement) it left a noticeably empty gap between the
   intro and the first section. Shared by all four legal pages, so this
   keeps them all matching each other at the tighter value. */

.legal__meta {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  max-width: 640px;
}

/* ---------- Document body ----------
   The real policy text: a plain, restrained reading column — no card, no
   grid, matching the section's own "typography carries it" philosophy.
   Each <section> is one numbered clause; a hairline divider (the same
   recipe as the footer's own divider) separates them instead of a card
   boundary. */

.legal__body {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.legal__body section {
  padding-block: var(--space-6) 0;
}

.legal__body section:first-child {
  padding-block-start: 0;
}

.legal__body section + section {
  margin-block-start: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}

.legal__body h2 {
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  margin-block-end: var(--space-4);
}

.legal__body h3 {
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  margin-block: var(--space-5) var(--space-3);
}

.legal__body p {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.legal__body p + p {
  margin-block-start: var(--space-4);
}

.legal__body ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.legal__body li {
  position: relative;
  padding-inline-start: var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.legal__body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-accent);
  opacity: 0.85;
}

.legal__body li strong,
.legal__body p strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.legal__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-premium);
}

.legal__body a:hover,
.legal__body a:focus-visible {
  color: var(--color-text-primary);
}

.legal__back {
  margin-block-start: var(--space-7);
}

@media (max-width: 560px) {
  .legal {
    padding-block: calc(var(--header-height) + var(--space-6)) var(--space-8);
  }

  .legal__body section {
    padding-block: var(--space-5) 0;
  }

  .legal__body section + section {
    margin-block-start: var(--space-5);
  }
}