/* Qoba — legal / policy page styles (extends styles.css) */

.legal-hero{
  padding:56px 0 40px;
  background:linear-gradient(180deg, var(--bg-alt), #fff);
  border-bottom:1px solid var(--border);
}
.legal-hero h1{
  font-size:clamp(2rem, 4vw, 2.6rem);
  margin:10px 0 12px;
  letter-spacing:-.01em;
}
.legal-meta{ color:var(--muted); font-size:.92rem; }

.legal-body{ padding:56px 0 96px; }
.legal-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:56px;
  align-items:start;
}

.legal-toc{
  position:sticky; top:96px;
  display:flex; flex-direction:column; gap:2px;
  border-left:2px solid var(--border);
  padding-left:18px;
}
.toc-label{
  font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.legal-toc a{
  font-size:.86rem; color:var(--ink-soft); padding:6px 0; line-height:1.4;
}
.legal-toc a:hover{ color:var(--brand-dark); }

.legal-content{ max-width:720px; }
.legal-content > p{ color:var(--ink-soft); font-size:1rem; line-height:1.75; margin-bottom:20px; }
.legal-content h2{
  font-size:1.35rem; margin:44px 0 14px; scroll-margin-top:96px; letter-spacing:-.01em;
}
.legal-content h2:first-of-type{ margin-top:8px; }
.legal-content h3{
  font-size:1rem; margin:22px 0 8px; color:var(--ink); scroll-margin-top:96px;
}
.legal-content ul{ margin:0 0 20px; padding-left:0; }
.legal-content li{
  list-style:none; position:relative; padding:6px 0 6px 22px;
  color:var(--ink-soft); font-size:.96rem; line-height:1.65;
}
.legal-content li::before{
  content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%;
  background:var(--brand);
}
.legal-content a{ color:var(--brand-dark); text-decoration:underline; text-underline-offset:2px; }

@media (max-width: 860px){
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{
    position:static; border-left:none; padding-left:0;
    display:grid; grid-template-columns:repeat(2, 1fr); gap:4px 16px;
    padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--border);
  }
}
