/* ==========================================================================
   Secure Borders – legal pages (privacy.html, accessibility.html)
   Loaded after main.css + responsive.css. These pages are intentionally plain:
   readable long-form text, all three languages stacked, no JS required.
   ========================================================================== */

.legal { background: var(--c-bg); }

.legal__top { border-bottom: 1px solid var(--c-line); padding: var(--sp-4) 0; }
.legal__topin { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.legal__topin .btn { font-size: .82rem; }

.legal__main { padding: var(--sp-8) 0 var(--sp-9); max-width: 860px; }

.legal__sec { padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); border-bottom: 1px solid var(--c-line); }
.legal__sec:last-of-type { border-bottom: 0; }
.legal__sec .h2 { margin-bottom: var(--sp-5); }

.legal__h {
  font-size: 1.02rem; font-weight: 700; color: var(--c-text);
  margin: var(--sp-6) 0 var(--sp-3);
}
.legal__sec p { color: var(--c-muted); margin-bottom: var(--sp-3); line-height: 1.7; }
.legal__sec p strong { color: var(--c-text); }

.legal__list { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.legal__list li {
  position: relative; color: var(--c-muted); line-height: 1.65;
  list-style: none;
}
.legal__list li::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-4)); top: .65em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-tech);
}

.legal code {
  font-size: .86em; background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: 4px; padding: .1em .4em; color: var(--c-accent);
}
.legal kbd {
  font: inherit; font-size: .82em; background: var(--c-surface-2);
  border: 1px solid var(--c-line-2); border-bottom-width: 2px;
  border-radius: 4px; padding: .1em .45em;
}

.legal__updated { font-size: .8rem; color: var(--c-dim); text-align: center; padding-top: var(--sp-5); }
.legal__updated strong { color: var(--c-muted); }

.legal__foot { border-top: 1px solid var(--c-line); background: #071120; padding: var(--sp-6) 0; }
.legal__foot p { font-size: .74rem; color: var(--c-dim); line-height: 1.6; max-width: 90ch; }
.legal__foot p + p { margin-top: var(--sp-3); }

@media (max-width: 720px) {
  .legal__topin { flex-direction: column; align-items: flex-start; }
  .legal__main { padding-top: var(--sp-6); }
}