/* ─────────────────────────────────────────────────────────────────
   /terms and /privacy — long-form legal documents.
   -----------------------------------------------------------------
   Reuses the landing-page chassis (mesh backdrop + site header +
   site footer) so the legal pages feel like part of the marketing
   site, not an off-brand iframe.
   ──────────────────────────────────────────────────────────────── */

.legal-page {
  background: transparent;
  color: var(--color-ink);
}

.legal-page main {
  /* Lift content above the mesh backdrop blobs without isolating it
     in a card — long documents read better against the page itself
     than inside a contained surface. */
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 2rem) 6rem;
}

.legal-shell {
  /* Outer column: stacks head → body (toc + article) → foot. Used
     to be a 2-col grid containing everything, which made sticky on
     the TOC overflow into the footer area (sticky's containing
     block is the parent, so the TOC stayed pinned all the way to
     the very bottom of the page). The TOC now sticks only within
     .legal-body. */
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.legal-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 960px) {
  .legal-body {
    grid-template-columns: 220px 1fr;
    align-items: start;
  }
}

/* ── Header band ───────────────────────────────────────────────── */
.legal-head {
  text-align: left;
  max-width: 720px;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0.75rem 0 0.85rem 0;
  color: var(--color-ink);
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.92rem;
  color: var(--color-ink-muted);
  margin: 0;
}
.legal-meta b { color: var(--color-ink); font-weight: 600; }

.legal-lede {
  margin: 1.5rem 0 0 0;
  max-width: 60ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-ink-muted);
}

/* ── Sticky TOC (desktop) ──────────────────────────────────────── */
.legal-toc {
  position: relative;
  font-size: 0.9rem;
  line-height: 1.45;
}

@media (min-width: 960px) {
  .legal-toc {
    position: sticky;
    top: 6rem;
    align-self: start;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding-right: 0.5rem;
  }
}

.legal-toc__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 0.75rem 0;
}

.legal-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  counter-reset: toc;
}

.legal-toc__list a {
  display: block;
  color: var(--color-ink-muted);
  text-decoration: none;
  padding: 0.25rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
  transition: color 0.18s ease, border-color 0.18s ease;
  counter-increment: toc;
}
.legal-toc__list a::before {
  content: counter(toc, decimal-leading-zero) " ";
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  margin-right: 0.4rem;
  font-size: 0.78rem;
}
.legal-toc__list a:hover,
.legal-toc__list a.is-active {
  color: var(--color-ink);
  border-left-color: var(--color-accent);
}

/* ── Article body ──────────────────────────────────────────────── */
.legal-article {
  max-width: 720px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-ink);
  counter-reset: section;
}

.legal-article > section {
  padding-top: clamp(2rem, 3vw, 3rem);
  scroll-margin-top: 5rem;
  counter-increment: section;
}
.legal-article > section + section {
  border-top: 1px solid var(--color-line);
}

.legal-article h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 1rem 0;
  color: var(--color-ink);
}
.legal-article h2::before {
  content: counter(section, decimal-leading-zero);
  display: inline-block;
  margin-right: 0.7rem;
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  vertical-align: 0.25em;
}

.legal-article h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.75rem 0 0.6rem 0;
  color: var(--color-ink);
}

.legal-article p,
.legal-article li {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-ink);
}

.legal-article p {
  margin: 0 0 1rem 0;
}

.legal-article ul,
.legal-article ol {
  margin: 0 0 1rem 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.legal-article a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-article a:hover {
  color: var(--color-ink);
}

.legal-article strong { font-weight: 700; }
.legal-article em.legal-term {
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink);
}

/* Pull-out box for defined terms / important notices. */
.legal-callout {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.96rem;
  line-height: 1.6;
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-callout--warn {
  background: rgba(192, 52, 76, 0.06);
  border-left-color: #c0344c;
}

/* Inline definition list. */
.legal-defs {
  margin: 1rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 0.4rem 1.25rem;
}
.legal-defs dt {
  font-weight: 700;
  color: var(--color-ink);
}
.legal-defs dd {
  margin: 0;
  color: var(--color-ink-muted);
}

/* ── Footer of the article (contact + version + draft note) ───── */
.legal-foot {
  margin-top: clamp(1rem, 2vw, 2rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 1.25rem;
  font-size: 0.95rem;
  color: var(--color-ink-muted);
}

@media (min-width: 760px) {
  .legal-foot {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

.legal-foot__contact h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
  color: var(--color-ink-soft);
}
.legal-foot__contact p { margin: 0; }

.legal-foot__cross {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.legal-foot__cross a {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.legal-foot__cross a:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.legal-disclaimer {
  margin-top: 1.25rem;
  font-size: 0.84rem;
  color: var(--color-ink-soft);
  font-style: italic;
}

/* ── Mobile TOC: collapse into a dropdown ──────────────────────── */
@media (max-width: 959px) {
  .legal-toc {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
  }
}