/* Shared styles for Margin legal pages (privacy.html, terms.html).
   Same porcelain/teal language as the landing page, in a readable document layout. */
:root {
  --ink:#141820; --ink-2:#2a313c; --muted:#66717d; --faint:#5d6772;
  --bg:#f4f6f8; --panel:#ffffff; --line:#dfe4ea; --line-2:#eef1f5;
  --teal:#087f73; --teal-d:#066a60; --teal-2:#dff5f1;
  --amber:#c87513; --amber-2:#fff8ec;
  --radius:12px;
  --shadow-soft:0 10px 28px rgba(24,31,43,.07);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink);
  background:
    linear-gradient(90deg, rgba(20,24,32,.030) 1px, transparent 1px),
    linear-gradient(180deg, rgba(20,24,32,.024) 1px, transparent 1px),
    linear-gradient(180deg,#fbfcfd,var(--bg));
  background-size:34px 34px,34px 34px,auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a { color:var(--teal-d); }
a:focus-visible, .brand:focus-visible { outline:2px solid var(--teal); outline-offset:2px; border-radius:6px; }

/* header */
.legal-nav { position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(250,251,253,.85); border-bottom:1px solid var(--line); }
.legal-nav .inner { max-width:880px; margin:0 auto; padding:0 24px; height:60px; display:flex; align-items:center; gap:16px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:900; font-size:18px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.brand svg { width:25px; height:25px; }
.legal-nav .back { margin-left:auto; font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none; }
.legal-nav .back:hover { color:var(--teal-d); }

/* document */
.legal-wrap { max-width:880px; margin:0 auto; padding:0 24px; }
.legal-doc { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-soft); margin:34px 0 48px; padding:44px 48px; }
.legal-doc h1 { font-size:clamp(30px,4vw,40px); line-height:1.12; letter-spacing:-.02em; margin:0 0 8px; }
.legal-doc .updated { color:var(--faint); font-size:14px; margin:0 0 22px; }
.legal-doc h2 { font-size:21px; letter-spacing:-.01em; margin:34px 0 10px; padding-top:8px; scroll-margin-top:76px; }
.legal-doc h3 { font-size:17px; margin:20px 0 6px; }
.legal-doc p { margin:0 0 14px; color:var(--ink-2); }
.legal-doc ul { margin:8px 0 16px; padding-left:22px; }
.legal-doc li { margin:6px 0; color:var(--ink-2); }
.legal-doc strong { color:var(--ink); }
.legal-doc a { text-decoration:underline; }
.legal-doc code, .ph { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
  background:#fff4e0; color:#8a4d00; padding:1px 6px; border-radius:5px; }

/* template notice */
.notice { display:flex; gap:12px; align-items:flex-start; margin:0 0 26px; padding:14px 16px;
  border:1px solid #f0d9ad; border-left:4px solid var(--amber); border-radius:10px; background:var(--amber-2);
  color:#6b4410; font-size:14px; line-height:1.55; }
.notice svg { width:18px; height:18px; color:var(--amber); flex:none; margin-top:2px; }

/* table of contents */
.toc { border:1px solid var(--line); border-radius:10px; background:#fcfdfe; padding:16px 18px; margin:0 0 28px; }
.toc h2 { font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  margin:0 0 10px; padding:0; scroll-margin-top:0; }
.toc ol { margin:0; padding-left:20px; columns:2; column-gap:28px; }
.toc li { margin:4px 0; font-size:14px; }
.toc a { text-decoration:none; }
.toc a:hover { text-decoration:underline; }

/* footer */
.legal-foot { border-top:1px solid var(--line); }
.legal-foot .inner { max-width:880px; margin:0 auto; padding:26px 24px; display:flex; flex-wrap:wrap; gap:8px 18px;
  align-items:center; color:var(--faint); font-size:13px; }
.legal-foot a { color:var(--ink-2); text-decoration:none; font-weight:600; }
.legal-foot a:hover { color:var(--teal-d); }
.legal-foot .sep { color:var(--line); }

@media (max-width:680px){
  .legal-doc { padding:28px 22px; }
  .toc ol { columns:1; }
}