.dgs-legal {
  --legal-mist: #F4F6F8;
  --legal-muted: #56677A;
  --legal-hairline: rgba(10, 31, 33, 0.1);
}

/* ─── Hero: compact, navy, single soft glow (no photo) ─── */
.dgs-legal-hero {
  background: var(--bg-deep-navy);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 8.25rem 0 3rem;
}

@media (min-width: 1024px) {
  .dgs-legal-hero {
    padding: 9.5rem 0 3.75rem;
  }
}

@media (max-width: 768px) {
  .dgs-legal-hero {
    padding: 7.25rem 0 2.5rem;
  }
}

.dgs-legal-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18%;
  width: 56vw;
  height: 22rem;
  min-width: 26rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 45%, transparent 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.dgs-legal-hero > .dgs-container {
  position: relative;
  z-index: 1;
}

.dgs-legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1affeb;
  background: rgba(0, 179, 159, 0.15);
  border: 1px solid rgba(0, 179, 159, 0.4);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.1rem;
}

.dgs-legal-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 2.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 1rem !important;
  max-width: 40rem;
}

.dgs-legal-dek {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin: 0 0 1.4rem !important;
}

.dgs-legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dgs-legal-meta strong {
  color: #ffffff;
  font-weight: 600;
}

/* ─── Layout: sticky TOC + article body ─── */
.dgs-legal-layout {
  position: relative;
  z-index: 0;
  background: #ffffff;
  /* Longhand on purpose: a shorthand `padding: 3.5rem 0 5.5rem` here would
     zero out the left/right padding .dgs-container already set (loaded
     earlier, but this class is more specific by source order since it's
     on the same element), stripping the page's side margin at every
     viewport width, not just mobile. */
  padding-top: 3.5rem;
  padding-bottom: 5.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Full-bleed white background, independent of the sitewide navy body/main */
.dgs-legal-layout::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
}

@media (min-width: 960px) {
  .dgs-legal-layout {
    grid-template-columns: 220px 1fr;
    gap: 4rem;
    align-items: start;
    padding-top: 4.5rem;
    padding-bottom: 6.5rem;
  }
}

/* ─── Table of contents ───
   Ported from the Growth Hub article template's "On This Page" TOC
   (css/dgs-growth-article.css .dgs-ga-toc*): sticky rail on desktop,
   a collapsible disclosure button on mobile (js/dgs-legal.js toggles
   [data-open] the same way js/dgs-growth-article.js does for .dgs-ga-toc),
   instead of the previous chip-wrap layout. */
.dgs-legal-toc {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 960px) {
  .dgs-legal-toc {
    position: sticky;
    top: 7.5rem;
    max-width: 220px;
  }
}

.dgs-legal-toc-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--legal-muted);
  margin-bottom: 0.85rem;
}

/* Mobile shows the disclosure button instead, which already carries
   this same label text. */
@media (max-width: 959px) {
  .dgs-legal-toc-label {
    display: none;
  }
}

/* Mobile: collapsible disclosure */
.dgs-legal-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--legal-mist);
  border: 1px solid var(--legal-hairline);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bg-deep-navy);
}

@media (min-width: 960px) {
  .dgs-legal-toc-toggle {
    display: none;
  }
}

.dgs-legal-toc-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.dgs-legal-toc[data-open="true"] .dgs-legal-toc-toggle svg {
  transform: rotate(180deg);
}

.dgs-legal-toc-list {
  list-style: none;
  margin: 0.9rem 0 0 !important;
  padding: 0.25rem 0 0 1.4rem !important;
  border-left: 2px solid var(--legal-hairline);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 100%;
}

@media (max-width: 959px) {
  .dgs-legal-toc-list {
    display: none;
    margin-top: 1rem !important;
  }

  .dgs-legal-toc[data-open="true"] .dgs-legal-toc-list {
    display: flex;
  }
}

.dgs-legal-toc-list a {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--legal-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.dgs-legal-toc-list a:hover,
.dgs-legal-toc-list a.is-active {
  color: var(--bg-deep-navy);
  font-weight: 700;
}

/* ─── Article body typography ─── */
.dgs-legal-body {
  font-family: var(--font-body);
  color: var(--text-dark-primary);
  max-width: 74ch;
  overflow-wrap: anywhere;
}

.dgs-legal-body > p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: #2A3B4D;
  margin: 0 0 1.4rem;
}

.dgs-legal-body h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bg-deep-navy);
  margin: 3rem 0 1rem;
  scroll-margin-top: 6.5rem;
}

.dgs-legal-body h2:first-child {
  margin-top: 0;
}

.dgs-legal-body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--bg-deep-navy);
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 6.5rem;
}

.dgs-legal-body ul,
.dgs-legal-body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.3rem;
  color: #2A3B4D;
  font-size: 0.98rem;
  line-height: 1.8;
}

.dgs-legal-body li {
  margin-bottom: 0.45rem;
}

.dgs-legal-body li:last-child {
  margin-bottom: 0;
}

.dgs-legal-body strong {
  color: var(--bg-deep-navy);
  font-weight: 700;
}

.dgs-legal-body a {
  color: var(--action-teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 179, 159, 0.35);
  text-underline-offset: 2px;
}

.dgs-legal-body hr {
  border: none;
  border-top: 1px solid var(--legal-hairline);
  margin: 2.5rem 0;
}

/* ─── "Before You Publish" placeholder-review notice ─── */
.dgs-legal-notice {
  background: var(--legal-mist);
  border: 1px solid var(--legal-hairline);
  border-left: 3px solid var(--action-teal);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  margin: 0 0 2.5rem;
}

.dgs-legal-notice-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action-teal);
  margin-bottom: 0.4rem;
}

.dgs-legal-notice p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #2A3B4D;
  margin: 0;
}

.dgs-legal-notice code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88em;
  background: rgba(10, 31, 51, 0.06);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

/* ─── Cross-links to the other legal pages ─── */
.dgs-legal-related {
  background: var(--legal-mist);
  border-top: 1px solid var(--legal-hairline);
  padding: 3.25rem 0;
}

.dgs-legal-related h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--bg-deep-navy);
  margin: 0 0 1.25rem !important;
}

.dgs-legal-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 640px) {
  .dgs-legal-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

a.dgs-legal-related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1rem 1.15rem;
  background: #ffffff;
  border: 1px solid var(--legal-hairline);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--bg-deep-navy);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.dgs-legal-related-card:hover {
  border-color: var(--action-teal);
  transform: translateY(-2px);
}

.dgs-legal-related-card svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--action-teal);
}

.dgs-legal-related-contact {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--legal-muted);
  margin: 0 !important;
}

.dgs-legal-related-contact a {
  color: var(--action-teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 179, 159, 0.4);
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.dgs-legal-related-contact a:hover {
  color: var(--bg-deep-navy);
}