/* Legal pages — extends styles.css */

.legal-hero{
  padding:64px 0 40px;
  border-bottom:1px solid var(--border);
  position:relative; z-index:2;
}
.legal-hero .eyebrow{ margin-bottom:14px; }
.legal-hero h1{ font-size:2.4rem; }
.legal-updated{
  font-family:var(--font-mono); font-size:0.82rem; color:var(--text-faint); margin-top:14px;
}

.legal-body{
  padding:60px 0 100px;
  position:relative; z-index:2;
}
.legal-layout{
  display:grid; grid-template-columns: 240px 1fr; gap:60px;
  align-items:start;
}

.legal-toc{
  position:sticky; top:100px;
  display:flex; flex-direction:column; gap:4px;
  border-left:1px solid var(--border);
  padding-left:20px;
}
.legal-toc a{
  font-size:0.88rem; color:var(--text-faint); padding:8px 0;
  transition:color 0.2s var(--ease);
  border-left:2px solid transparent; margin-left:-21px; padding-left:19px;
  display:block;
}
.legal-toc a:hover{ color:var(--text-dim); }
.legal-toc a.active{ color:var(--violet); border-left-color:var(--violet); }

.legal-content{ max-width:680px; }
.legal-content section{ margin-bottom:48px; scroll-margin-top:100px; }
.legal-content h2{
  font-size:1.5rem; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.legal-num{
  font-family:var(--font-mono); font-size:0.8rem; color:var(--violet);
  background:var(--surface); border:1px solid var(--border-strong);
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.legal-content h3{ font-size:1.08rem; margin:24px 0 10px; color:var(--text); }
.legal-content p{ color:var(--text-dim); line-height:1.75; margin-bottom:14px; font-size:0.98rem; }
.legal-content ul{ margin:14px 0 18px; display:flex; flex-direction:column; gap:10px; }
.legal-content ul li{
  color:var(--text-dim); line-height:1.65; font-size:0.98rem;
  padding-left:22px; position:relative;
}
.legal-content ul li::before{
  content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%;
  background:var(--grad-primary);
}
.legal-content strong{ color:var(--text); font-weight:600; }
.legal-content a.inline-link{ color:var(--violet); text-decoration:underline; text-decoration-color:rgba(155,107,255,0.4); }
.legal-content a.inline-link:hover{ text-decoration-color:var(--violet); }

.legal-callout{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:20px 22px; margin:18px 0; display:flex; gap:14px;
}
.legal-callout .lc-icon{
  width:34px; height:34px; border-radius:9px; background:var(--grad-primary); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:#fff;
}
.legal-callout p{ margin:0; font-size:0.92rem; }

.legal-table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:0.92rem; }
.legal-table th, .legal-table td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--border);
  color:var(--text-dim);
}
.legal-table th{ color:var(--text); font-weight:600; font-family:var(--font-mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; }

.legal-contact-card{
  background: var(--grad-primary);
  border-radius: var(--radius-md);
  padding:30px 32px; margin-top:10px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.legal-contact-card h3{ color:#fff; margin:0; font-size:1.2rem; }
.legal-contact-card p{ color:rgba(255,255,255,0.85); margin:6px 0 0; }
.legal-contact-card .btn{ background:#fff; color:var(--indigo); box-shadow:none; flex-shrink:0; }
.legal-contact-card .btn:hover{ transform:translateY(-2px); }

@media (max-width: 980px){
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{ position:static; flex-direction:row; overflow-x:auto; border-left:none; border-bottom:1px solid var(--border); padding:0 0 16px; gap:18px; }
  .legal-toc a{ white-space:nowrap; border-left:none; border-bottom:2px solid transparent; margin-left:0; padding-left:0; }
  .legal-toc a.active{ border-bottom-color:var(--violet); border-left-color:transparent; }
}
@media (max-width: 600px){
  .legal-hero h1{ font-size:1.8rem; }
  .legal-content h2{ font-size:1.25rem; }
  .legal-contact-card{ flex-direction:column; align-items:flex-start; }
}