/* ─────────────────────────────────────────────────────────────────────────────
 * Metatron Mind — AI surface brand layer.
 *
 * Loaded ONLY on metatronmind.com (the Express brand middleware injects it).
 * doc-nor.com is deliberately untouched: it keeps its own theme, its own Google
 * Fonts, and the original shell.
 *
 * Two jobs:
 *   1. retint the app (the Tailwind-style semantic tokens map onto Bone Terminal)
 *   2. style the static About / How it works / Privacy / Terms pages
 * Fonts and icons come from the vendored brand package at /assets/brand/.
 * ──────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Archivo";
  src: url("/assets/brand/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/brand/fonts/jetbrains-mono-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Spectral";
  src: url("/assets/brand/fonts/spectral-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Spectral";
  src: url("/assets/brand/fonts/spectral-400-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Spectral";
  src: url("/assets/brand/fonts/spectral-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

/* App semantic tokens → Bone Terminal. Values are HSL triples because the app
   consumes them as hsl(var(--token)). Same mapping as the brand package's
   tokens/ai-semantic.css. */
:root {
  --background: 210 22.2% 3.5%;
  --foreground: 42 27.8% 92.9%;
  --card: 207.3 23.4% 9.2%;
  --card-foreground: 42 27.8% 92.9%;
  --popover: 207.3 23.4% 9.2%;
  --popover-foreground: 42 27.8% 92.9%;
  --primary: 174.5 100% 44.9%;
  --primary-foreground: 210 22.2% 3.5%;
  --secondary: 208 22.4% 13.1%;
  --secondary-foreground: 42 27.8% 92.9%;
  --muted: 207.3 23.4% 9.2%;
  --muted-foreground: 204 15% 67.3%;
  --accent: 208 22.4% 13.1%;
  --accent-foreground: 42 27.8% 92.9%;
  --destructive: 4.1 100% 65.3%;
  --destructive-foreground: 210 22.2% 3.5%;
  --border: 207 24.4% 16.1%;
  --input: 207 24.4% 16.1%;
  --ring: 174.5 100% 44.9%;
  --chart-1: 174.5 100% 44.9%;
  --chart-2: 39.7 100% 64.7%;
  --chart-3: 313.3 100% 65.5%;
  --chart-4: 146.8 69.4% 55.1%;
  --chart-5: 204 15% 67.3%;

  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

body { background: #07090B; }

/* ── static pages (About / How it works / Privacy / Terms) ─────────────────── */
.brand-page {
  margin: 0;
  min-height: 100vh;
  background: #07090B;
  color: #F2EFE8;
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.brand-page a { color: #00E5D0; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.brand-page a:focus-visible { outline: 2px solid #00E5D0; outline-offset: 3px; }
.brand-skip {
  position: absolute; left: -9999px; top: 0; background: #12181D; color: #F2EFE8;
  padding: 10px 14px; border: 1px solid #2C3A45; z-index: 10;
}
.brand-skip:focus { left: 12px; top: 12px; }
.brand-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px clamp(18px, 4vw, 40px);
  border-bottom: 1px solid #1F2A33;
  background: rgba(7, 9, 11, .92);
  backdrop-filter: blur(10px);
}
.brand-wordmark {
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 78%;
  letter-spacing: -.04em; font-size: 20px; line-height: .92; color: #F2EFE8; text-decoration: none;
}
.brand-wordmark span { color: #9FAEB8; }
.brand-nav { display: flex; flex-wrap: wrap; gap: 18px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.brand-nav a { color: #9FAEB8; text-decoration: none; }
.brand-nav a:hover, .brand-nav a[aria-current="page"] { color: #F2EFE8; }
.brand-main { max-width: 860px; margin: 0 auto; padding: clamp(40px, 7vw, 76px) clamp(20px, 4vw, 40px) 72px; }
.brand-eyebrow { margin: 0; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #00E5D0; }
.brand-main h1 { margin: 10px 0 0; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; font-stretch: 78%; }
.brand-lede { margin: 18px 0 0; font-family: "Spectral", Georgia, serif; font-size: 1.2rem; line-height: 1.55; color: #9FAEB8; max-width: 60ch; }
.brand-rule { border: 0; border-top: 1px solid #1F2A33; margin: 34px 0; }
.brand-prose { max-width: 66ch; font-family: "Spectral", Georgia, serif; font-size: 1.0625rem; line-height: 1.7; color: #9FAEB8; }
.brand-prose h2 { margin: 2.1em 0 .35em; font-family: "Archivo", sans-serif; font-stretch: 78%; font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; color: #F2EFE8; }
.brand-prose h2:first-child { margin-top: 0; }
.brand-prose p { margin: 0 0 1.1em; }
.brand-prose ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.brand-prose li + li { margin-top: .35em; }
.brand-prose strong { color: #F2EFE8; font-weight: 600; }
.brand-prose code { font-family: "JetBrains Mono", monospace; font-size: .88em; color: #F2EFE8; }
.brand-note { margin-top: 34px; padding-top: 20px; border-top: 1px solid #1F2A33; color: #7E8F9A; font-size: 14px; }
.brand-footer { border-top: 1px solid #1F2A33; background: #0C1013; }
.brand-footer-in { max-width: 1120px; margin: 0 auto; padding: 28px clamp(20px, 4vw, 40px) 40px; display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .06em; color: #7E8F9A; }
.brand-footer a { color: #9FAEB8; text-decoration: none; }
.brand-footer a:hover { color: #F2EFE8; }
.brand-footer-family { color: #7E8F9A; }
@media (max-width: 720px) {
  .brand-header { flex-wrap: wrap; gap: 12px; }
  .brand-nav { gap: 12px; }
  .brand-page { font-size: 16px; }
}

/* CTA — so /how-it-works is a route into the engine, not a dead end. */
.brand-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.brand-cta-end { margin-top: 22px; }
.brand-page .brand-btn {
  display: inline-block; padding: 12px 18px; border-radius: 10px;
  background: #00E5D0; color: #07090B; text-decoration: none;
  font-family: "Archivo", sans-serif; font-stretch: 78%; font-weight: 700; font-size: 15px;
  letter-spacing: -.01em;
}
.brand-page .brand-btn:hover { background: #5CF2E4; }
.brand-page .brand-btn-ghost { background: transparent; color: #F2EFE8; border: 1px solid #2C3A45; }
.brand-page .brand-btn-ghost:hover { border-color: #7E8F9A; background: #12181D; }
.brand-nav a[href="/"] { color: #00E5D0; }