/* Datatonia legal pages — shared shell + document styles.
   Mirrors the tokens / nav / footer / background of index.html so privacy + terms
   read as part of datatonia.net rather than as bare documents. */

:root {
  --bg-deep:#faf9f5; --surface-2:#f5f3ec; --surface-hover:#efece2;
  --fg:#141413; --fg-soft:#3b3a35; --fg-muted:#6b6a62; --fg-faint:#97958a;
  --accent:#d97757; --accent-strong:#c15f3f;
  --border:#e8e6dc; --border-strong:#dad7c9;
  --maxw:1140px; --ease:cubic-bezier(0.16,1,0.3,1); --dur:280ms;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --brand-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:"Lora",Georgia,serif; background:var(--bg-deep); color:var(--fg);
  line-height:1.7; font-size:16px; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; position:relative;
  background-image:
    radial-gradient(900px 600px at 80% -10%, rgba(217,119,87,0.06), transparent 60%),
    radial-gradient(700px 500px at 6% 2%, rgba(106,155,204,0.05), transparent 55%);
}
/* honeycomb texture, matching the site */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("hexbg.svg") repeat; background-size:122px auto; opacity:0.06;
}
a { color:inherit; text-decoration:none; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:0.01em;
  padding:13px 22px; border-radius:5px; cursor:pointer; border:1px solid transparent;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease); white-space:nowrap; }
.btn svg { width:17px; height:17px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { transform:translateY(-1px); background:var(--accent-strong); }
.btn-sm { padding:9px 15px; font-size:14px; border-radius:5px; }

/* ---------- Nav (static top-state of the site nav) ---------- */
header.nav { position:fixed; inset:0 0 auto 0; z-index:100; border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur); }
header.nav.scrolled { background:rgba(250,249,245,0.82); border-bottom-color:var(--border);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav .brand { display:flex; align-items:center; font-family:var(--brand-mono); font-weight:600;
  font-size:21px; letter-spacing:-0.02em; text-transform:uppercase; color:var(--fg-soft); }
.nav .brand .wordmark { display:inline-flex; align-items:center; line-height:1; }
.wm-dia { width:0.4em; height:0.706em; margin:0 0.03em; overflow:visible; flex:none; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a.link { font-family:var(--mono); padding:8px 13px; border-radius:9px; color:var(--fg-soft);
  font-size:13.5px; font-weight:500; transition:color var(--dur), background var(--dur); }
.nav-links a.link:hover { color:var(--fg); background:var(--surface-2); }
.nav-cta { display:flex; align-items:center; gap:10px; }
.mobile-cta { display:none; }

/* ---------- Legal document ---------- */
main.legal { max-width:764px; margin-inline:auto; padding:118px 24px 40px; }
main.legal h1 { font-family:var(--brand-mono); font-weight:600; font-size:clamp(28px,5vw,40px);
  letter-spacing:-0.01em; line-height:1.14; }
main.legal .updated { color:var(--fg-muted); font-size:14px; margin-top:12px; }
main.legal .lede { color:var(--fg-muted); font-size:18px; margin-top:22px; line-height:1.6; }
main.legal h2 { font-family:var(--brand-mono); font-weight:600; font-size:18px; margin:38px 0 12px; letter-spacing:-0.005em; }
main.legal p, main.legal li { color:var(--fg-soft); font-size:15.5px; }
main.legal p + p, main.legal ul + p { margin-top:14px; }
main.legal ul { margin:10px 0 0 22px; display:flex; flex-direction:column; gap:8px; }
main.legal .note { margin-top:26px; padding:14px 16px; border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:10px; background:#fff; color:var(--fg-muted); font-size:14px; }
main.legal a[href^="mailto"], main.legal .lede a { color:var(--accent); }
main.legal a:hover { text-decoration:underline; }

/* ---------- Footer (from the site) ---------- */
footer.foot { border-top:1px solid var(--border); padding-block:50px 36px; margin-top:40px; }
.foot-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; margin-bottom:40px; }
.foot-top .brand-col { max-width:320px; text-align:center; }
.foot-top .brand-col .brand { justify-content:center; display:inline-flex; }
.brand .mark { width:56px; height:56px; display:grid; place-items:center; color:var(--fg); }
.brand .mark svg { width:100%; height:100%; overflow:visible; }
.brand .mark .dt-top { transform-box:fill-box; transform-origin:center; animation:dt-float 3.4s ease-in-out infinite; }
@keyframes dt-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce) { .brand .mark .dt-top { animation:none; } }
.foot-top .brand-col p { color:var(--fg-muted); font-size:14.5px; margin-top:18px; line-height:1.6; }
.foot-cols { display:flex; gap:56px; flex-wrap:wrap; }
.foot-col h4 { font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--fg-faint); margin-bottom:14px; font-weight:600; }
.foot-col a { display:block; color:var(--fg-soft); font-size:14.5px; padding:5px 0; transition:color var(--dur); }
.foot-col a:hover { color:var(--fg); }
.foot-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px;
  padding-top:28px; border-top:1px solid var(--border); color:var(--fg-faint); font-size:13.5px; }
.foot-bottom .to-top { display:inline-flex; align-items:center; gap:7px; }
.foot-bottom .to-top svg { width:16px; height:16px; }

@media (max-width:760px) {
  .nav-links, .desktop-cta { display:none; }
  .mobile-cta { display:inline-flex; }
  .foot-top { flex-direction:column; align-items:center; text-align:center; }
  .foot-cols { gap:36px; justify-content:center; }
}