.legal-hero{
  padding-block:var(--space-5);
  color:var(--c-ink);
  background:var(--c-surface)
}

.legal-hero__body{
  display:grid;
  gap:var(--space-1);
  max-width:68ch;
  margin-top:var(--space-4)
}

.legal-hero__body h1{
  max-width:15ch;
  color:var(--c-ink)
}

.legal-hero__body p{
  max-width:64ch;
  color:var(--c-ink-soft);
  font-size:var(--fs-3)
}

.legal-hero__actions{
  justify-content:flex-start;
  margin-top:var(--space-2)
}

.legal-document{
  color:var(--c-ink);
  background:var(--c-white)
}

.legal-layout{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  align-items:start;
  gap:var(--space-5)
}

.legal-layout > *{
  min-width:0
}

.legal-index{
  position:sticky;
  top:calc(var(--header-height) + var(--space-3));
  min-width:0
}

.legal-index__inner{
  display:grid;
  gap:var(--space-1);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  color:var(--c-ink);
  background:var(--c-light)
}

.legal-index__label{
  width:fit-content;
  max-width:100%;
  align-self:flex-start;
  color:var(--c-primary);
  font-size:var(--fs-0);
  font-weight:700;
  letter-spacing:.04em
}

.legal-index h2{
  color:var(--c-ink);
  font-size:var(--fs-4)
}

.legal-index nav{
  margin-block:var(--space-2)
}

.legal-index ol{
  display:grid;
  gap:var(--space-1);
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:legal-index
}

.legal-index li{
  min-width:0;
  counter-increment:legal-index
}

.legal-index a:not(.c-btn){
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-1);
  align-items:baseline;
  color:var(--c-ink-soft);
  font-size:var(--fs-1);
  overflow-wrap:anywhere
}

.legal-index li a:not(.c-btn)::before{
  content:counter(legal-index, decimal-leading-zero);
  color:var(--c-primary);
  font-family:var(--font-mono);
  font-size:var(--fs-0)
}

.legal-index a:not(.c-btn):hover{
  color:var(--c-primary)
}

.legal-index p{
  color:var(--c-muted);
  font-size:var(--fs-1)
}

.legal-index .c-btn{
  width:fit-content;
  max-width:100%;
  margin-top:var(--space-2)
}

.legal-content{
  display:grid;
  gap:var(--space-3);
  min-width:0
}

.legal-clause{
  min-width:0;
  padding:var(--space-4);
  border-radius:var(--radius-md)
}

.legal-clause--mint{
  color:var(--c-ink);
  background:var(--c-surface)
}

.legal-clause--paper{
  color:var(--c-ink);
  background:var(--c-light)
}

.legal-clause--white{
  color:var(--c-ink);
  background:var(--c-white);
  box-shadow:var(--shadow-soft)
}

.legal-clause--dark{
  color:#eaf4e9;
  background:var(--c-dark)
}

.legal-clause__heading{
  display:grid;
  gap:var(--space-1);
  margin-bottom:var(--space-3)
}

.legal-clause__number{
  width:fit-content;
  max-width:100%;
  align-self:flex-start;
  color:var(--c-primary);
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  font-weight:700
}

.legal-clause__heading h2{
  max-width:18ch;
  color:var(--c-ink);
  font-size:clamp(1.75rem,3vw,2.5rem)
}

.legal-clause--dark .legal-clause__number{
  color:var(--c-accent)
}

.legal-clause--dark .legal-clause__heading h2{
  color:#f2f8ef
}

.legal-clause__body{
  display:grid;
  gap:var(--space-2);
  min-width:0
}

.legal-clause__body p{
  max-width:72ch;
  color:var(--c-ink-soft);
  line-height:1.72
}

.legal-clause--dark .legal-clause__body p{
  color:#c4d6c8
}

.legal-clause__body a:not(.c-btn){
  color:var(--c-primary);
  text-decoration:underline;
  text-decoration-color:var(--c-accent);
  text-underline-offset:.2em;
  overflow-wrap:anywhere
}

.legal-clause--dark .legal-clause__body a:not(.c-btn){
  color:#d9efd6;
  text-decoration-color:var(--c-accent)
}

.legal-list{
  display:grid;
  gap:var(--space-1);
  max-width:72ch;
  margin:0;
  padding-left:1.25rem;
  color:var(--c-ink-soft)
}

.legal-list li{
  padding-left:.25rem;
  line-height:1.72
}

.legal-clause--dark .legal-list{
  color:#c4d6c8
}

.legal-table{
  min-width:680px
}

.legal-table caption{
  padding:var(--space-2);
  color:var(--c-ink);
  background:var(--c-white);
  font-weight:650;
  text-align:left
}

.legal-notice{
  display:grid;
  gap:var(--space-1);
  margin-top:var(--space-1);
  color:var(--c-ink-soft);
  background:var(--c-white)
}

.legal-notice strong{
  color:var(--c-ink)
}

.legal-closing{
  color:var(--c-ink);
  background:var(--c-white)
}

.legal-closing__copy{
  display:grid;
  gap:var(--space-1);
  min-width:0
}

.legal-closing__label{
  width:fit-content;
  max-width:100%;
  align-self:flex-start;
  color:var(--c-accent);
  font-size:var(--fs-0);
  font-weight:700;
  letter-spacing:.04em
}

.legal-closing__copy h2{
  max-width:18ch;
  color:#fff
}

.legal-closing__copy p{
  max-width:62ch;
  margin-top:0;
  color:#aac0b0
}

.legal-closing__actions{
  display:grid;
  gap:var(--space-1);
  min-width:min(100%,260px)
}

.legal-closing__actions .c-btn{
  width:100%
}

.legal-closing__email{
  color:#eaf4e9;
  background:transparent;
  border-color:rgba(255,255,255,.4)
}

.legal-closing__email:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.7)
}

@media (max-width:980px){
  .legal-layout{
    grid-template-columns:1fr;
    gap:var(--space-4)
  }

  .legal-index{
    position:static
  }

  .legal-index ol{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:680px){
  .legal-hero{
    padding-block:var(--space-4)
  }

  .legal-hero__body{
    margin-top:var(--space-3)
  }

  .legal-hero__body p{
    font-size:var(--fs-2)
  }

  .legal-hero__actions{
    display:grid;
    width:100%
  }

  .legal-hero__actions .c-btn{
    width:100%;
    white-space:normal
  }

  .legal-index ol{
    grid-template-columns:1fr
  }

  .legal-clause{
    padding:var(--space-3)
  }

  .legal-clause__heading{
    margin-bottom:var(--space-2)
  }

  .legal-closing__actions{
    width:100%;
    min-width:0
  }
}

@media (max-width:390px){
  .legal-clause{
    padding:var(--space-2)
  }

  .legal-index__inner{
    padding:var(--space-2)
  }

  .legal-clause__body p,
  .legal-list li{
    overflow-wrap:anywhere
  }
}