/* Legal page v2 (inc/legal-v2.php, page-templates/tpl-legal-v2.php). Scoped to .lg2 so the async common.css
   (loaded after this) cannot restyle it. The part above the "below the fold" marker is inlined in <head> by
   ss_lg2_critical_css() (read from this file at request time - nothing to regenerate). Reveal policy: nothing is
   hidden waiting for JS, no entrance/scroll animations, UI transitions <= 150 ms (README-CS2
   "Reveal/animation policy"). Hero = the shared gold glow token (inc/ss-glow.php), never blue. Reading typography
   follows assets/css/blog-v2.css (19px / 1.65 body at a ~720px measure), stepped down slightly for a denser legal
   document. Existing legal copy is unstyled beyond generic h2/h3/p/ul/ol/a/table selectors - wording untouched. */
.lg2 {
  --navy: var(--ss-navy-deep);
  --ink: var(--ss-ink);
  --body: var(--ss-navy-line);
  --muted: var(--ss-ink-3);
  --on-navy: var(--ss-on-navy);
  --rule: var(--ss-line);
  --soft: var(--ss-ground);
  --gold: var(--ss-gold);
  --gold-ink: var(--ss-navy);
  --link: var(--ss-link);
  --font: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --hdr: 57px;
  background: #fff;
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

@media (min-width: 768px) {
  .lg2 {
    --hdr: 67px;
  }
}

@media (min-width: 1200px) {
  .lg2 {
    --hdr: 75px;
  }
}

body.lg2-page {
  margin: 0;
  background: var(--navy, var(--ss-navy-deep));
}

body.lg2-page .site-content {
  padding-top: 0 !important;
}

.lg2 *,
.lg2 *:before,
.lg2 *:after {
  box-sizing: border-box;
}

.lg2 :where(h1, h2, h3) {
  margin: 0;
  font-family: var(--font);
  color: inherit;
  letter-spacing: -.02em;
  text-transform: none;
}

.lg2 :where(p) {
  margin: 0;
}

.lg2 :where(a) {
  color: inherit;
}

.lg2-w {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 64px;
  position: relative;
}

@media (max-width: 900px) {
  .lg2-w {
    padding-inline: 24px;
  }
}

@media (max-width: 560px) {
  .lg2-w {
    padding-inline: 16px;
  }
}

/* ---------- hero: one-line stacked heading on the page navy + shared gold burst ---------- */
.lg2-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--hdr) + 56px) 0 56px;
  background-color: var(--navy);
  background-image: var(--ss-glow-gold), var(--ss-glow-navy);
  text-align: center;
}

.lg2-hero .lg2-w {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.lg2-hero h1 {
  color: #fff;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.lg2-updated {
  color: var(--on-navy);
  font-size: 15px;
  letter-spacing: .01em;
}

@media (max-width: 560px) {
  .lg2-hero {
    padding: calc(var(--hdr) + 32px) 0 36px;
  }

  .lg2-hero h1 {
    font-size: 28px;
  }
}

/* Visible breadcrumb trail removed site-wide 2026-10-01 (BreadcrumbList schema kept, Yoast): the copy keeps the trail row (21px) as space so the first element sits where the trail ended. */
.lg2-hero{padding-top:calc(var(--hdr) + 77px)}
@media (max-width:767.98px){.lg2-hero{padding-top:calc(var(--hdr) + 53px)}}

/* ==== below the fold ==== */

/* ---------- reading section: white, 720px-ish measure, blog v2 type scale ---------- */
.lg2-body {
  padding: 64px 0 104px;
  background: #fff;
}

.lg2-w--read {
  max-width: 840px;
}

.lg2-content {
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
  overflow-wrap: break-word;
}

.lg2-content > *:first-child {
  margin-top: 0 !important;
}

.lg2-content p {
  margin: 0 0 1.15em;
  color: var(--body);
  font-size: inherit;
  line-height: inherit;
}

.lg2-content h2,
.lg2-content h3 {
  color: var(--ink);
  font-weight: 700;
  scroll-margin-top: 110px;
}

.lg2-content h2 {
  margin: 1.9em 0 .55em;
  font-size: 28px;
  line-height: 1.22;
}

.lg2-content h3 {
  margin: 1.6em 0 .45em;
  font-size: 21px;
  line-height: 1.3;
}

.lg2-content strong,
.lg2-content b {
  color: var(--ink);
  font-weight: 700;
}

.lg2-content a {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(var(--ss-link-rgb),.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}

.lg2-content ul,
.lg2-content ol {
  margin: 0 0 1.25em;
  padding: 0 0 0 1.4em;
}

.lg2-content ul {
  list-style: none;
}

.lg2-content li {
  position: relative;
  margin: 0 0 .45em;
  color: var(--body);
  font-size: inherit;
  line-height: 1.6;
}

.lg2-content ul > li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: -1.05em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.lg2-content ol > li::marker {
  color: var(--gold-ink);
  font-weight: 700;
}

.lg2-content li > ul,
.lg2-content li > ol {
  margin: .45em 0 .3em;
}

.lg2-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: 15.5px;
}

.lg2-content th,
.lg2-content td {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.lg2-content th {
  background: var(--soft);
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 700px) {
  .lg2-content table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .lg2-body {
    padding: 44px 0 72px;
  }

  .lg2-content {
    font-size: 17px;
  }

  .lg2-content h2 {
    font-size: 23px;
  }

  .lg2-content h3 {
    font-size: 18.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg2-content a {
    transition: none;
  }
}