/* Legal / long-form page styles — used by privacy.html
   Loaded after style.css so it can lean on the same design tokens. */

.legal{padding:150px 0 80px}
.legal-head{max-width:820px;margin:0 auto 40px}
.legal-head h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:850;letter-spacing:-1.2px;margin-bottom:10px}
.legal-meta{color:var(--muted);font-size:.92rem}

.legal-body{max-width:820px;margin:0 auto}
.legal-body h2{font-size:1.35rem;font-weight:750;margin:44px 0 12px;letter-spacing:-.4px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.legal-body h3{font-size:1.05rem;font-weight:700;margin:26px 0 9px;color:var(--brand)}
.legal-body p{color:var(--muted);margin-bottom:14px;font-size:.98rem}
.legal-body ul{margin:0 0 16px 22px;color:var(--muted);font-size:.98rem}
.legal-body li{margin-bottom:8px}
.legal-body a{color:var(--brand);border-bottom:1px solid rgba(0,212,184,.35)}
.legal-body a:hover{border-bottom-color:var(--brand)}
.legal-body strong{color:var(--text)}
.legal-body em{color:var(--text);font-style:italic}

/* callout at the top: plain-English summary */
.legal-summary{background:rgba(0,212,184,.07);border:1px solid rgba(0,212,184,.28);
  border-radius:14px;padding:20px 22px;margin-bottom:12px;color:var(--muted);font-size:.98rem}
.legal-summary strong{color:var(--brand)}

/* disclaimer at the bottom */
.legal-note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:10px;padding:18px 20px;margin:36px 0 26px;color:var(--muted);font-size:.9rem}

/* tables */
.table-scroll{overflow-x:auto;margin:0 0 18px}
.legal-body table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:460px}
.legal-body th{text-align:left;padding:11px 13px;background:var(--surface-2);
  color:var(--text);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--line)}
.legal-body td{padding:11px 13px;color:var(--muted);border-bottom:1px solid var(--line);vertical-align:top}
.legal-body tbody tr:last-child td{border-bottom:0}
.legal-body tbody tr:hover td{background:rgba(255,255,255,.02)}

.back-link{margin-top:34px}
.back-link a{font-weight:600}

/* footer on legal pages is a single slim row */
.legal ~ footer .f-bot{border-top:0;padding-top:0}
footer .f-bot a{color:var(--muted);border-bottom:none}
footer .f-bot a:hover{color:var(--brand)}

@media(max-width:700px){
  .legal{padding:120px 0 60px}
  .legal-body h2{font-size:1.2rem}
}