/* Scopes everything to the Terms body so other pages aren't affected */
main.legal { background: linear-gradient(180deg, var(--purple-700), var(--purple-750)); }
main.legal .container { max-width: 920px; }

/* Headings + intro (optional – matches your brand scale) */
main.legal .section-title { text-align: center; margin: 0 0 8px; }
main.legal .lead { text-align: center; margin: 6px auto 18px; }
main.legal .meta { text-align: center; opacity: .9; margin-bottom: 24px; }

/* Table of contents layout (keeps your current two-column look) */
.legal-toc { margin: 10px 0 28px; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 28px; }
@media (max-width: 720px){ .legal-toc ol { columns: 1; } }

/* --- Link styling (purple, accessible, on-brand) --- */
main.legal a{
  color: var(--purple-300);                  /* default link color */
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--purple-300) 70%, transparent);
  transition: color .15s ease, text-decoration-color .15s ease, text-shadow .15s ease;
}
main.legal a:hover{
  color: var(--purple-400);
  text-decoration-color: var(--purple-400);
  text-shadow: 0 0 14px rgba(185,149,255,.28);
}
main.legal a:visited{
  color: color-mix(in srgb, var(--purple-300) 85%, var(--purple-400));
}
main.legal a:active{ color: var(--purple-400); }
main.legal a:focus-visible{
  outline: 3px solid var(--purple-300);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Make TOC links feel tappable */
.legal-toc a{ display:inline-block; padding: 2px 0; font-weight: 700; }

/* Comfortable reading rhythm for sections */
main.legal section + section { margin-top: 22px; }
main.legal h3 { margin: 16px 0 8px; font-weight: 800; }
main.legal p { margin: .4rem 0; line-height: 1.75; }
main.legal ul { margin: .4rem 0 .8rem 1.2rem; }
main.legal li + li { margin-top: .2rem; }

/* Small callout block (for the “legal review” note) */
.callout{
  margin: 12px 0 24px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}

/* Ensure anchor targets land below the sticky header */
main.legal [id]{ scroll-margin-top: 88px; }