/* Bonsai Citations — shared design tokens + base layout.
   Brand law: mint on black, flat (no gradients, no glassmorphism), Outfit,
   0.6s cubic-bezier(0.16,1,0.3,1) motion. Every page links this file first. */

/* ---- Outfit, bundled locally (never over the network) ---- */
@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/Outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/Outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --mint: #00ffb4;
  --bg: #050505;
  --frame: #050505;
  --surface: #0a0a0a;
  --border: #1c1c1c;
  --text: #ffffff;
  --dim: #9aa0a6;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;
  --font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 980px;
}

* { margin: 0; box-sizing: border-box; }
/* clip (not hidden) so the fixed living-background blobs never create horizontal
   scroll, while position: sticky on the nav keeps working. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  line-height: 1.5; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mint); transition: color var(--dur) var(--ease); }
.mint { color: var(--mint); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---- Nav: Home / For Schools / Install ---- */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--wrap); margin: 0 auto; padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { color: var(--text); }
.brand .mark { display: block; }
.wordmark { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link {
  font-weight: 600; font-size: 14px; color: var(--dim);
  padding: 8px 12px; border-radius: 9px;
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); }

/* ---- Buttons (L4-a: terminal style) ---- */
.cta {
  position: relative; overflow: hidden;
  display: inline-block; background: var(--mint); color: #000;
  font-family: var(--font); font-weight: 700; font-size: 15px;
  padding: 13px 22px; border-radius: 8px; border: 1px solid var(--mint);
  cursor: pointer; transition: opacity var(--dur) var(--ease), transform 0.08s ease;
}
.cta:hover { opacity: 0.85; color: #000; }
.cta:active { transform: translateY(2px); }
/* blinking terminal caret on hover */
.cta::after { content: ""; }
.cta:hover::after { content: "▮"; margin-left: 6px; animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
.cta-sm { padding: 8px 15px; font-size: 14px; }
.cta-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.cta-ghost:hover { color: var(--text); border-color: var(--mint); opacity: 1; }
/* ghost buttons gain a "> " prompt prefix on hover */
.cta-ghost::before { content: ""; }
.cta-ghost:hover::before { content: "> "; color: var(--mint); }
/* zap-bar light sweep injected on click (removed after 0.45s) */
.zap-bar {
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg); animation: zap 0.45s var(--ease) forwards; pointer-events: none;
}
@keyframes zap { to { left: 120%; } }

/* ---- Footer: M3 roundel seal + privacy link ---- */
.footer {
  border-top: 1px solid var(--border); margin-top: 48px;
  padding: 44px 24px; text-align: center; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.footer .seal { display: block; }
.footer p { max-width: 520px; font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; font-size: 14px; font-weight: 600; }
.footer-links a { color: var(--dim); }
.footer-links a:hover { color: var(--mint); }

/* ---- Motion respect ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ---- Mobile nav ---- */
@media (max-width: 560px) {
  .nav { padding: 14px 16px; gap: 10px; }
  .wordmark { font-size: 16px; }
  .nav-links { gap: 4px; }
  .nav-link { padding: 8px 8px; font-size: 13px; }
  .cta-sm { padding: 8px 13px; }
}
/* On phones the M1 mark carries the brand; drop the wordmark so the nav fits. */
@media (max-width: 460px) {
  .wordmark { display: none; }
}

/* ============================================================
   N1 — living background + motion system (progressive, JS-optional)
   ============================================================ */

/* Smooth in-page scrolling (killed under reduced-motion below). */
html { scroll-behavior: smooth; }

/* L1-bg-reset — ETCHED LINE grove. All prior ambient systems (blur blobs, hero
   gradient mesh, roaming scan bands, .airfx) are removed. The ONLY texture kept
   is a static CRT scanline; page background stays pure black (--bg #050505). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 255, 180, 0.025) 0 1px, transparent 1px 3px);
}

/* Etched grove scene layer — injected by art/grove.js, sits above the scanlines
   (-2) and behind all content. Non-interactive. */
.grove {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* W1 Calm Mode — global grove intensity. Homepage keeps the fuller scene;
     content-heavy pages (body.dense) drop to ~60% so text stays legible. */
  opacity: var(--grove-opacity, 0.62);
}
body.dense { --grove-opacity: 0.38; }

/* W1 Calm Mode — soft dark scrim behind bare text that sits over grove strokes.
   Flat near-black fill, radial mask feathers the edge so the grove still shows
   in the margins (no blur, no glass). Cards already carry --surface, so they
   need no scrim. Each scrim host is a stacking context at z-index 0, which keeps
   the whole block — including its ::before — above the grove (z-index -1). */
.hero, .founder, .page-hero, .demo, .prose,
.tool-hero, .cta-ext, .section, .proof-points, .coach { position: relative; z-index: 0; }
/* W1 scrim — HOTFIX (hero scrim coverage). The old radial mask feathered by RADIUS, so on a
   tall text block (a multi-sentence page-hero lede, a long .prose article) the fade crossed
   the text and the lower lines sat unreadable over the grove. Replaced with a rectangular
   feather: crossed linear masks with a FIXED 1.5rem feather that exactly matches the -1.5rem
   inset margin. Result: the solid scrim covers the FULL element box at every viewport size
   and every block height — the feather lives only in the margin (grove still peeks there),
   never across the text. */
.hero::before, .founder::before, .page-hero::before, .prose::before, .demo::before,
.tool-hero::before, .cta-ext::before, .section::before, .proof-points::before, .coach::before {
  content: ""; position: absolute; z-index: -1; inset: -1.5rem;
  background: rgba(5, 5, 5, 0.92);
  -webkit-mask:
    linear-gradient(to bottom, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%),
    linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to bottom, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%),
    linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}
/* The footer overlaps the viewport-fixed grove when scrolled to the bottom;
   a near-solid base guarantees its text contrast without hiding the grove
   elsewhere. */
.footer { position: relative; z-index: 0; background: rgba(5, 5, 5, 0.92); }
/* Text that floats directly over grove gets a subtle dark halo so a stray mint
   stroke can never sit inside a glyph. Cheap, calm, identity-preserving. */
.hero h1, .hero .lede, .demo > h2, .demo > .demo-note,
.founder-line, .founder-mission, .founder-eyebrow,
.page-hero h1, .page-hero .lede, .page-hero p, .footer p {
  text-shadow: 0 0 7px rgba(5, 5, 5, 0.92), 0 0 2px rgba(5, 5, 5, 0.95);
}
.grove .tree { position: absolute; bottom: 0; }
.grove svg { display: block; width: 100%; height: 100%; overflow: visible; }
.grove .pad { transform-box: fill-box; transform-origin: center; }
.grove .sway { transform-box: fill-box; transform-origin: bottom center; }
.grove .tree.mirror { transform: scaleX(-1); }
/* One fine etched line spanning the viewport at the trees' base. */
.grove-ground {
  position: absolute; left: 0; right: 0; bottom: 5.5vh; height: 1px;
  background: rgba(0, 255, 180, 0.32);
}
@media (max-width: 759px) { .grove-ground { bottom: 3vh; } }
/* Falling etched leaves (L3). */
.leaf-host { position: absolute; inset: 0; }
.grove .leaf { position: absolute; top: 0; left: 0; will-change: transform; }
.grove svg.leaf { width: 24px; height: auto; overflow: visible; }
.grove .leaf.glyph { color: var(--mint); font: 700 12px var(--font); line-height: 1; }

/* Scroll reveals — only hidden when JS is present (html.js, set synchronously in
   <head>). Without JS the content is fully visible. motion.js adds .in on view. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* Nav blur-in on scroll. */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(0, 0, 0, 0.55);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
}
.nav.scrolled {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

/* Tilt cards get smooth return. (Magnetic-CTA transform removed in L4-a.) */
[data-tilt] { transition: transform 0.25s var(--ease); transform-style: preserve-3d; }

/* Footer seal rotates on hover. */
.footer .seal { transition: transform 1.2s var(--ease); }
.footer .seal:hover { transform: rotate(120deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}