/* =========================================================
   myengine.io — legal / document pages, dark.
   Matches the landing (landing.css palette), self-contained.
   ========================================================= */

* { box-sizing: border-box; }

:root {
  --d-bg: #faf9f5;
  --d-ink: #141413;
  --d-ink-2: #4a4944;
  --d-muted: #87867f;
  --d-line: #e8e6dc;
  --d-line-2: #d9d6c8;
  --d-blue: #d97757;
  --d-blue-hi: #c05f3c;
  --d-card: #ffffff;
}

body {
  margin: 0;
  background: var(--d-bg);
  color: var(--d-ink-2);
  font-family: var(--me-sans);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(217, 119, 87, 0.25); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.navwrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 249, 245, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--d-line);
}
.nav { display: flex; align-items: center; height: 62px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--d-ink); font-weight: 700; font-size: 15.5px; }
.brand img { width: 24px; height: 24px; }
.brand .tld { color: var(--d-muted); font-weight: 500; }
.signin { margin-left: auto; color: var(--d-ink-2); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.signin:hover { color: var(--d-blue-hi); }

.doc-wrap { display: flex; justify-content: center; padding: 60px 20px 90px; }
.doc { width: 100%; max-width: 720px; }
.doc h1 {
  font-family: var(--me-serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 46px);
  letter-spacing: -0.02em;
  color: var(--d-ink);
  margin: 0 0 6px;
}
.doc-updated {
  font-family: var(--me-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--d-muted);
  margin: 0 0 26px;
}
.doc-intro {
  font-size: 16.5px;
  color: var(--d-ink-2);
  border: 1px solid var(--d-line);
  border-left: 3px solid var(--d-blue);
  background: var(--d-card);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 0 0 34px;
  box-shadow: 0 8px 24px -18px rgba(20, 20, 19, 0.2);
}
.doc h2 {
  font-family: var(--me-serif);
  font-weight: 500;
  font-size: 23px;
  color: var(--d-ink);
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}
.doc-num { color: var(--d-blue-hi); font-style: italic; margin-right: 6px; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc strong { color: var(--d-ink); }
.doc a { color: var(--d-blue-hi); text-decoration: none; }
.doc a:hover { text-decoration: underline; }
.doc-foot {
  margin-top: 50px;
  padding-top: 22px;
  border-top: 1px solid var(--d-line);
  font-size: 13px;
  color: var(--d-muted);
}