/*
 * Legal pages — /privacy, /terms, /acceptable-use, /sla, /trust.
 *
 * Mirrors the marketing site's typographic system (Instrument Serif for
 * heads, Space Grotesk for body, JetBrains Mono for meta lines) so the
 * legal pages stop reading like a database dump. All colour tokens come
 * from site.css :root variables, so the light/dark toggle just works.
 *
 * Selectors are scoped under .legal-policy so they cannot bleed into any
 * other page that happens to use h1/h2.
 */

.legal-policy{
  position:relative;
  z-index:2;
  padding:64px 0 96px;
}

.legal-policy .container{
  max-width:880px;
  margin:0 auto;
  padding:0 36px;
}

.legal-policy h1{
  font-family:"Instrument Serif", "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(40px, 6vw, 64px);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0 0 14px;
  color:var(--paper);
}

.legal-policy .legal-meta{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11.5px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 44px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}

.legal-policy .legal-meta a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.legal-policy .legal-meta a:hover{border-bottom-color:var(--cyan)}

.legal-policy .legal-section{
  margin:0 0 36px;
}

.legal-policy .legal-section h2{
  font-family:"Instrument Serif", "Times New Roman", serif;
  font-weight:400;
  font-size:26px;
  line-height:1.2;
  letter-spacing:-0.01em;
  margin:0 0 14px;
  color:var(--paper);
}

.legal-policy .legal-section p{
  margin:0 0 14px;
  color:var(--paper-2);
  font-size:15px;
  line-height:1.7;
}

.legal-policy .legal-section p:last-child{margin-bottom:0}

.legal-policy .legal-section strong{
  color:var(--paper);
  font-weight:600;
}

.legal-policy .legal-section a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(25,167,224,0.35);
  transition:border-color .15s ease, color .15s ease;
}
.legal-policy .legal-section a:hover{
  color:var(--cyan-2);
  border-bottom-color:var(--cyan-2);
}

.legal-policy .legal-section ul,
.legal-policy .legal-section ol{
  margin:0 0 14px;
  padding-left:22px;
  color:var(--paper-2);
}
.legal-policy .legal-section li{margin:0 0 6px}

/* Data processors table — only present on the privacy page. */
.legal-processors{
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--line);
}

.legal-processors-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  color:var(--paper-2);
  margin-top:14px;
}

.legal-processors-table thead th{
  text-align:left;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}

.legal-processors-table tbody td{
  padding:14px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  line-height:1.55;
}

.legal-processors-table tbody tr:last-child td{border-bottom:none}

.legal-processors-table a{
  color:var(--cyan);
  text-decoration:none;
  word-break:break-all;
}
.legal-processors-table a:hover{color:var(--cyan-2)}

@media (max-width:680px){
  .legal-policy{padding:32px 0 64px}
  .legal-policy .container{padding:0 20px}
  .legal-policy h1{font-size:34px}
  .legal-policy .legal-section h2{font-size:22px}
  .legal-processors-table{font-size:12px}
  .legal-processors-table thead th,
  .legal-processors-table tbody td{padding:8px 8px}
}