/* ============================================================
   1ShotGen — lightweight cohesion layer for existing pages.
   Adds the shared living background + new fonts on top of the
   page's own /styles.css, WITHOUT touching its layout/JS.
   Include AFTER /styles.css:  /fonts.css, /site-overrides.css
   plus  <script type="module" src="/site-bg.js"></script>
   ============================================================ */
:root {
  --so-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --so-body:    'Hanken Grotesk', system-ui, sans-serif;
  --so-mono:    'Space Mono', ui-monospace, monospace;
}

/* fonts */
body { font-family: var(--so-body); }
h1, h2, h3, .brand-name, .plan-name, .headline { font-family: var(--so-display); letter-spacing: -0.01em; }
code, kbd, pre, .hint, .mono { font-family: var(--so-mono); }

/* living background layers (created by /site-bg.js) */
.site-bg { position: absolute; inset: 0; pointer-events: none; }
#site-mesh { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.site-depth { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#site-particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.85; }
.orb { position: absolute; border-radius: 50%; filter: blur(54px); opacity: 0.42; will-change: transform; mix-blend-mode: screen; }
.orb--a { width: 42vmax; height: 42vmax; left: -8vmax; top: -12vmax;  background: radial-gradient(circle at 40% 40%, rgba(139,92,246,0.8), transparent 66%); }
.orb--b { width: 38vmax; height: 38vmax; right: -10vmax; top: -8vmax; background: radial-gradient(circle at 50% 50%, rgba(34,211,238,0.7), transparent 64%); }
.orb--c { width: 36vmax; height: 36vmax; left: 16vmax; bottom: -16vmax; background: radial-gradient(circle at 50% 50%, rgba(52,211,153,0.65), transparent 66%); }
.orb--d { width: 30vmax; height: 30vmax; right: 4vmax; bottom: -12vmax; background: radial-gradient(circle at 50% 50%, rgba(251,113,133,0.5), transparent 66%); }

/* the existing dark page bg must not hide the mesh */
html, body { background: transparent !important; }

/* readability scrim above the bg, below content */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,5,13,0.66) 0%, rgba(4,5,13,0.34) 16%, rgba(4,5,13,0.34) 68%, rgba(4,5,13,0.78) 100%),
    radial-gradient(130% 85% at 50% 42%, transparent 36%, rgba(4,5,13,0.4) 100%);
}
/* lift the real page chrome above the background + scrim */
body > .topbar, body > header, body > main, body > footer,
body > .layout, body > .account-wrap, body > .auth-wrap, body > .app-shell,
body > .marketing, body > div:not(.site-bg) {
  position: relative; z-index: 10;
}
/* a hard fallback: any direct child that isn't the bg sits above it */
body > *:not(.site-bg):not(script) { position: relative; z-index: 10; }