/* =====================================================================
   LEGAL UPDATE  (v284)  —  approved asset = the rendered visual layer

   Per direction: do NOT recreate the spur, icons, type, or layout with
   live elements. The approved desktop/mobile mockups ARE the page,
   placed byte-identical. Live text is kept crawlable but visually
   clipped (SEO/a11y), and the CTA links are transparent hotspots laid
   over the baked image — exactly the baked-asset pattern used across
   the rest of the site (Drug Cases, About, How, Results, etc.).
   ===================================================================== */

.page-legal-update { background: var(--color-paper); color: #2c2c2c; }

/* nav pinned solid near-black (white wordmark stays legible over the
   dark hero band and the paper article alike) */
.page-legal-update .nav,
.page-legal-update .nav.is-scrolled { background-color: var(--color-near-black); }

/* ---------- baked visual layer ---------- */
.lu-baked { position: relative; width: 100%; }
.lu-baked__img { display: block; width: 100%; height: auto; }
.lu-baked__img--m { display: none; }          /* mobile asset hidden on desktop */

/* ---------- CTA hotspots laid over the asset ---------- */
.lu-hotspot { position: absolute; display: block; z-index: 3; }
.lu-hotspot--m { display: none; }              /* mobile hotspots hidden on desktop */
.lu-hotspot:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* ---------- crawlable text, visually clipped (the asset is the visual) ---------- */
.lu-seo {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
}

/* ---------- responsive: swap to the mobile asset for the ≤1024 range ---------- */
@media (max-width: 1024px) {
  .lu-baked__img--dt, .lu-hotspot--dt { display: none; }
  .lu-baked__img--m { display: block; }
  .lu-hotspot--m { display: block; }
}