/* Legal pages: minimal additions that reuse your existing theme */
:root{
  --bg-dark:#04010d;
  --text:#ffffff;
  --muted:#d1d5db;
  --border:#2b2b2b;
  --accent-grad: linear-gradient(90deg,#ED1C24,#FCAF17,#9AC23C,#1C75BC);
}

body.legal {
  background: var(--bg-dark);
  color: var(--text);
}

/* Wrapper */
.legal-wrap{
  /* max-width: 960px; */
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}
@media (min-width:768px){
  .legal-wrap{ padding: 4rem 10% 6rem; }
}

/* Title area */
.legal-header{
  text-align:center;
  margin-bottom: 2rem;
}
.legal-title{
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem);
  font-weight: 800;
  margin: 0;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.legal-updated{
  margin-top:.5rem;
  font-size:.9rem;
  color: var(--muted);
}

/* Card surface */
.legal-card{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  overflow: hidden;
}

/* Content layout */
.legal-body{
  display:grid;
  grid-template-columns: 1fr;
}
@media (min-width:1024px){
  .legal-body{ grid-template-columns: 280px 1fr; }
}

/* Sidebar TOC */
.legal-toc{
  padding: 1.25rem 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width:1024px){
  .legal-toc{
    padding: 1.5rem;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
}
.legal-toc h3{
  font-size:1rem;
  margin:0 0 .75rem;
  color:#fff;
}
.legal-toc ul{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:.25rem;
}
.legal-toc a{
  display:block;
  padding:.5rem .5rem;
  border-radius:10px;
  text-decoration:none;
  color:#fff;
  transition: background .25s ease, color .25s ease;
}
.legal-toc a:hover{
  background: rgba(255,255,255,.08);
}

/* Main prose */
.legal-content{
  padding: 1.25rem;
}
@media (min-width:1024px){
  .legal-content{ padding: 1.5rem 1.75rem; }
}
.legal-content h2{
  font-size:1.25rem;
  margin: 1.5rem 0 .5rem;
  font-weight:800;
}
.legal-content h3{
  font-size:1.05rem;
  margin:1rem 0 .25rem;
  font-weight:700;
}
.legal-content p{
  color: var(--muted);
  line-height:1.7;
  margin: .5rem 0 1rem;
}
.legal-content ol, .legal-content ul{
  margin:.5rem 0 1rem 1.25rem;
  color: var(--muted);
}
.legal-content li{ margin:.4rem 0; }

/* Inline callouts */
.legal-note{
  background: rgba(255,255,255,.05);
  border-left: 3px solid #FCAF17;
  padding:.75rem 1rem;
  border-radius: 10px;
  color: var(--muted);
}

/* Header + footer reuse styles.css classes if present */
.navbar{ position: sticky; top:0; z-index:30; }
.footer{ text-align:center; padding:2rem 1rem; color: var(--muted); }
.footer img{ max-width: 160px; height:auto; opacity:.9; }
.footer small{ display:block; margin-top:.5rem; font-size:.8rem; }

/* Utility */
.hr{
  height:1px; background:var(--border); border:0; margin:1rem 0 1.25rem;
}
.back-home{
  display:inline-flex; gap:.5rem; align-items:center;
  text-decoration:none; color:#fff; padding:.5rem .75rem; border-radius:999px;
  background: rgba(255,255,255,.05); border:1px solid var(--border);
}
.back-home:hover{ background: rgba(255,255,255,.1); }
a{
    color: #9AC23C;
}