.legal {
  max-width:1180px;
  margin:0 auto;
  padding:3.5rem 3rem 4.5rem;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:3.5rem;
  align-items:start
}

/* No table of contents (0–1 sections): single column, comfortable measure. */
.legal--no-toc {
  grid-template-columns:1fr
}

.legal--no-toc .legal-doc {
  max-width:820px;
  margin-inline:auto
}

.legal-toc {
  position:sticky;
  top:1.5rem;
  align-self:start;
  /* If the list is taller than the viewport, scroll it on its own instead of
     letting the lower items fall off-screen. */
  max-height:calc(100vh - 3rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  /* Understated scrollbar — Firefox. */
  scrollbar-width:thin;
  scrollbar-color:rgba(44,64,67,.22) transparent
}

/* Understated scrollbar — WebKit/Blink. Thin, borderless, fades in on hover. */
.legal-toc::-webkit-scrollbar {
  width:6px
}

.legal-toc::-webkit-scrollbar-track {
  background:transparent
}

.legal-toc::-webkit-scrollbar-thumb {
  background:rgba(44,64,67,.14);
  border-radius:6px
}

.legal-toc:hover::-webkit-scrollbar-thumb {
  background:rgba(44,64,67,.28)
}

.legal-toc-h {
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:700;
  margin-bottom:1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(44,64,67,.16)
}

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

.legal-toc li {
  counter-increment:toc
}

.legal-toc a {
  display:flex;
  gap:.6rem;
  font-family:var(--sans);
  font-size:.82rem;
  line-height:1.35;
  color:var(--text-soft);
  padding:.45rem .2rem;
  border-left:2px solid transparent;
  transition:color .2s,border-color .2s,background .2s;
  padding-left:.7rem
}

.legal-toc a::before {
  content:counter(toc) ".";
  color:var(--accent-strong);
  font-weight:700;
  flex:0 0 auto
}

.legal-toc a:hover {
  color:var(--text);
  border-left-color:var(--accent);
  background:rgba(44,64,67,.03)
}

.legal-doc {
  max-width:760px
}

.legal-meta {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.6rem;
  font-family:var(--sans);
  font-size:.78rem;
  color:var(--text-muted);
  padding-bottom:1.6rem;
  margin-bottom:2.2rem;
  border-bottom:1px solid rgba(44,64,67,.16)
}

.legal-meta strong {
  color:var(--text);
  font-weight:600
}

.legal-intro {
  font-family:var(--serif);
  font-style:normal;
  font-size:1.1rem;
  line-height:1.7;
  color:var(--text-soft);
  margin:0 0 2.6rem
}

.legal-sec {
  margin-bottom:2.6rem;
  scroll-margin-top:1.5rem
}

.legal-sec h2 {
  font-family:var(--display);
  font-weight:400;
  font-size:1.5rem;
  line-height:1.2;
  letter-spacing:.005em;
  color:var(--text);
  margin:0 0 1rem;
  display:flex;
  gap:.7rem;
  align-items:baseline
}

.legal-sec h2 .num {
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  color:var(--accent-strong);
  flex:0 0 auto
}

.legal-sec p {
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  color:var(--text-soft);
  margin:0 0 1rem
}

.legal-sec ul {
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin:0 0 1rem;
  padding-left:0;
  list-style:none
}

.legal-sec ul li {
  position:relative;
  padding-left:1.4rem;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  color:var(--text-soft)
}

.legal-sec ul li::before {
  content:'';
  position:absolute;
  left:0;
  top:.6em;
  width:8px;
  height:8px;
  background:var(--accent);
  clip-path:polygon(0 50%,40% 90%,100% 10%,90% 0,40% 70%,10% 40%)
}

.legal-sec a {
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:rgba(44,64,67,.35);
  text-underline-offset:2px;
  transition:text-decoration-color .2s
}

.legal-sec a:hover {
  text-decoration-color:var(--accent-strong)
}

.legal-sec strong {
  color:var(--text);
  font-weight:600
}

.legal-cta {
  margin-top:3rem;
  background:var(--text);
  color:#fff;
  padding:2.4rem 2.2rem;
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem 2rem;
  align-items:center;
  justify-content:space-between;
  border-top:4px solid var(--accent)
}

.legal-cta-t {
  font-family:var(--display);
  font-weight:400;
  font-size:1.4rem;
  line-height:1.2;
  margin:0 0 .4rem
}

.legal-cta-d {
  font-family:var(--sans);
  font-size:.92rem;
  color:#C0B69A;
  margin:0;
  max-width:46ch
}

.legal-cta .btn {
  border-color:var(--accent);
  background:var(--accent);
  color:var(--text)
}

.legal-cta .btn:hover {
  background:transparent;
  color:var(--accent)
}

@media(max-width:980px) {
  .legal {
    grid-template-columns:1fr;
    gap:1.8rem;
    padding:2.6rem 1.6rem 3.5rem
  }
  .legal-toc {
    position:static;
    border:1px solid rgba(44,64,67,.16);
    padding:1.2rem 1.3rem;
    background:var(--bg-alt)
  }
  .legal-toc-h {
    margin-bottom:.7rem
  }
}

@media(max-width:880px) {
  .legal {
    padding:2rem 1.2rem 3rem
  }
  .legal-intro {
    font-size:1.02rem;
    margin-bottom:2rem
  }
  .legal-sec h2 {
    font-size:1.28rem
  }
  .legal-sec p,.legal-sec ul li {
    font-size:.95rem
  }
  .legal-cta {
    padding:1.8rem 1.4rem;
    flex-direction:column;
    align-items:stretch
  }
  .legal-cta .btn {
    width:100%;
    box-sizing:border-box
  }
}