/* THE LEGAL PAGES' OWN LAYOUT, IN A STYLESHEET THE SERVED POLICY ALLOWS (governor message 743, self-directed,
   2026-09-21). scripts/generate-legal-pages.mjs used to write these rules into every legal page as an inline
   <style> element. The site serves style-src 'self', which refuses an inline block, so in production none of
   them applied. Measured on live /terms, enforced against bypassed: the text sat flush against the left edge
   of a phone (x=0, no gutter), ran 1265px wide on a desktop instead of a 1184px column, and the "In effect"
   status lost its border and padding. A same-origin stylesheet is exactly what style-src 'self' permits, so
   the rules moved here and the policy did not change. Their values moved unchanged but two, repaired in the
   48rem block below. Each page links this file where the block sat, after partner.css, so the cascade is the
   one the block had. */

.legal-shell {
  width: min(calc(100% - var(--page-gutter, 2rem)), 74rem);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 0;
}

.legal-hero {
  max-width: 54rem;
}

.legal-status {
  border: 2px solid currentColor;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1.5rem 0;
  background: color-mix(in srgb, var(--brand-soft, #eef2ff) 60%, transparent);
}

.legal-meta {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.45rem 1rem;
  margin: 1.5rem 0 2.5rem;
}

.legal-meta dt {
  font-weight: 800;
}

.legal-meta dd {
  margin: 0;
}

.legal-content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.legal-copy {
  max-width: 48rem;
}

.legal-copy section {
  margin-bottom: 2.5rem;
}

.legal-copy li,
.legal-copy p {
  line-height: 1.7;
}

.legal-hero h1 {
  font-size: 1.7rem;
  line-height: 1.25;
  margin: 0 0 0.6rem;
}

.legal-copy h2 {
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0 0 0.7rem;
}

.legal-hero .lead {
  font-size: 1.05rem;
  line-height: 1.6;
}

.legal-nav strong {
  font-size: 1rem;
}

.legal-nav [aria-current="page"] {
  display: inline-block;
  padding: 0.22rem 0;
  color: var(--muted, #5b6472);
}

.legal-nav {
  position: sticky;
  top: 6rem;
  border: 1px solid var(--line, #d7dce3);
  border-radius: 1rem;
  padding: 1rem;
}

.legal-nav ul {
  margin: 0.7rem 0 0;
  padding-left: 1.2rem;
}

.legal-nav a {
  display: inline-block;
  padding: 0.22rem 0;
}

.policy-directory {
  columns: 2;
  column-gap: 2rem;
}

.policy-directory li {
  break-inside: avoid;
  margin: 0.35rem 0;
}

@media (max-width: 48rem) {
  /* minmax(0, 1fr), NOT THE BLOCK'S 1fr, in the two narrow columns below: the values that did not move unchanged.
     1fr is minmax(auto, 1fr), so a column could not shrink below its widest word. "accessibility@pupmkt.com." (191px)
     made a 231px column in a 148px shell at 200% zoom on a phone, 67px of sideways scroll, measured by the UI audit
     once these rules applied at last; an archived record's metadata column overflowed the same way on
     "COUNSEL_APPROVAL_REQUIRED" (232px). With a zero minimum each column keeps the shell's width, and the long word
     wraps under the body's overflow-wrap. */
  .legal-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-nav {
    position: static;
  }

  .legal-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-meta dd {
    margin-bottom: 0.65rem;
  }

  .policy-directory {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}