/* =========================================================
   LEGAL PAGE HERO
   Adjusts the shared page hero spacing and lead width for legal pages.
   ========================================================= */

.legal-hero {
  padding: 8.5rem 0 3.5rem;
}

.legal-hero .lead {
  max-width: 720px;
}


/* =========================================================
   LEGAL PAGE CONTAINER
   Defines the background and readable content width for legal documents.
   ========================================================= */

.legal-page {
  background: var(--paper);
}

.legal {
  max-width: 920px;
}


/* =========================================================
   LEGAL CONTENT SECTIONS
   Separates individual legal topics with consistent spacing and dividers.
   ========================================================= */

.legal-section {
  margin: 0;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}

.legal-section:first-child {
  padding-top: 0;
}

.legal-section:last-of-type {
  border-bottom: 0;
}

.legal h2 {
  margin: 0 0 .8rem;
  padding: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing: -.025em;
}

.legal p,
.legal dd,
.legal-address {
  color: var(--ink-soft);
}

.legal p {
  max-width: 82ch;
}


/* =========================================================
   LEGAL LINKS AND ADDRESS
   Styles contact details, addresses, and links inside legal content.
   ========================================================= */

.legal a {
  color: var(--green-dark);
  font-weight: 750;
  text-underline-offset: .2rem;
}

.legal a:hover {
  color: var(--ink);
}

.legal-address {
  font-style: normal;
  line-height: 1.75;
}

.legal-address strong {
  color: var(--ink);
}


/* =========================================================
   STRUCTURED LEGAL DATA
   Styles definition lists used for operator, hosting, and contact details.
   ========================================================= */

.legal-data {
  margin: 1.4rem 0 0;
  display: grid;
  gap: .75rem;
}

.legal-data > div {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(170px, .38fr) minmax(0, 1fr);
  gap: 1rem;
  background: var(--white);
}

.legal-data dt {
  color: var(--ink);
  font-weight: 850;
}

.legal-data dd {
  margin: 0;
  overflow-wrap: anywhere;
}


/* =========================================================
   INLINE TECHNICAL VALUES
   Highlights technical identifiers such as consent storage keys and GA4 IDs.
   ========================================================= */

.legal code {
  padding: .1rem .35rem;
  border-radius: .3rem;
  color: var(--ink);
  background: var(--green-soft);
  overflow-wrap: anywhere;
}


/* =========================================================
   DOCUMENT UPDATE INFORMATION
   Styles the last-updated note shown at the end of legal documents.
   ========================================================= */

.legal-updated {
  margin: 2rem 0 0;
  font-size: .86rem;
}


/* =========================================================
   RESPONSIVE LAYOUT
   Reduces spacing and stacks structured legal data on small screens.
   ========================================================= */

@media (max-width: 640px) {
  .legal-hero {
    padding: 7.5rem 0 3rem;
  }

  .legal-section {
    padding: 1.55rem 0;
  }

  .legal-data > div {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}