/* BlockNinja CMS Public Website - Shadow Mage Theme
   Custom CSS appended via CSSManifest.InputCSSAppend */

/* ============================================================
   1. CSS Custom Properties - fallback tokens
   ============================================================ */
:root {
  --bn-bg-primary: hsl(var(--background));
  --bn-bg-secondary: hsl(var(--card));
  --bn-bg-surface: hsl(var(--muted));
  --bn-accent: hsl(var(--primary));
  --bn-accent-light: hsl(var(--primary) / 0.85);
  --bn-accent-dim: hsl(var(--primary) / 0.15);
  --bn-text-primary: hsl(var(--foreground));
  --bn-text-secondary: hsl(var(--muted-foreground));
  --bn-text-muted: hsl(var(--muted-foreground) / 0.8);
  --bn-text-faint: hsl(var(--muted-foreground) / 0.55);

  --bn-accent-2: hsl(var(--color-accent2));
  --bn-accent-2-light: hsl(var(--color-accent2) / 0.85);
  --bn-accent-2-dim: hsl(var(--color-accent2) / 0.15);
  --bn-accent-2-fg: hsl(var(--color-accent2-foreground));

  --bn-bg-light: hsl(var(--color-surface));
  --bn-bg-light-alt: hsl(var(--color-surface-alt));
  --bn-text-on-light: hsl(var(--color-surface-foreground));
  --bn-text-on-light-muted: hsl(var(--color-surface-muted));
  --bn-border-on-light: hsl(var(--color-surface-border) / 0.12);
}

/* ============================================================
   2. Base utilities
   ============================================================ */
.bn-section {
  position: relative;
  padding: 5rem 1.5rem;
}

.bn-section--alt {
  background: var(--bn-bg-secondary);
}

.bn-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.bn-container--narrow {
  max-width: 800px;
}

.bn-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--bn-accent);
  margin-bottom: 0.75rem;
  display: block;
}

.bn-heading {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--bn-text-primary);
}

.bn-heading--xl {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.bn-heading--lg {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.bn-heading--md {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.bn-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  color: var(--bn-text-secondary);
  line-height: 1.7;
  font-size: 1.0625rem;
}

/* Buttons */
.bn-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.75rem;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.bn-btn--primary {
  background: var(--bn-accent);
  color: hsl(var(--primary-foreground));
}

.bn-btn--primary:hover {
  background: var(--bn-accent-light);
}

.bn-btn--outline {
  background: transparent;
  color: var(--bn-text-primary);
  border: 1px solid var(--bn-accent-dim);
}

.bn-btn--outline:hover {
  border-color: var(--bn-accent);
  color: var(--bn-accent-light);
}

.bn-btn--sm {
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
}

/* Cards */
.bn-card {
  background: var(--bn-bg-surface);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.5rem;
  padding: 1.75rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bn-card:hover {
  border-color: hsl(var(--primary) / 0.35);
}

/* Render error (editor only) */
.bn-render-error {
  background: hsl(var(--destructive) / 0.1);
  border: 1px solid hsl(var(--destructive) / 0.3);
  color: hsl(var(--destructive));
  padding: 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

/* ============================================================
   3. Navigation - floating pill
   ============================================================ */
.bn-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem 1.5rem;
  transition: padding 0.3s ease, background 0.3s ease;
}

.bn-nav.scrolled {
  padding: 0.5rem 1.5rem;
  background: hsl(var(--background) / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bn-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bn-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--bn-text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.bn-nav-logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px hsl(var(--color-accent2) / 0.55)) drop-shadow(0 0 12px hsl(var(--color-accent2) / 0.3));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.bn-nav-logo:hover .bn-nav-logo-mark {
  transform: rotate(-6deg) scale(1.06);
  filter: drop-shadow(0 0 7px hsl(var(--color-accent2) / 0.8)) drop-shadow(0 0 16px hsl(var(--color-accent2) / 0.5));
}

.bn-nav-logo-text {
  line-height: 1;
}

.bn-pill {
  display: flex;
  align-items: center;
  /* Near-opaque surface so the hero animation doesn't bleed through the pill. */
  background: hsl(var(--muted) / 0.94);
  border: 1px solid hsl(var(--foreground) / 0.1);
  border-radius: 99px;
  padding: 0.375rem 1rem;
  gap: 0;
  box-shadow: 0 2px 12px hsl(0 0% 0% / 0.3);
  transition: transform 0.3s ease;
}

.bn-nav.scrolled .bn-pill {
  transform: scale(0.95);
}

.bn-pill-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bn-pill-divider {
  width: 1px;
  height: 1rem;
  background: var(--bn-accent-dim);
  margin: 0 0.5rem;
}

.bn-pill-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bn-text-secondary);
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  border-radius: 99px;
  transition: color 0.2s ease;
}

.bn-pill-link:hover {
  color: var(--bn-text-primary);
}

.bn-pill-link.active {
  color: var(--bn-accent-light);
}

.bn-pill-link--external::after {
  content: ' \2197';
  font-size: 0.75em;
}

.bn-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.bn-nav-login {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bn-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bn-nav-login:hover {
  color: var(--bn-text-primary);
}

.bn-nav-signup {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--bn-accent);
  color: hsl(var(--primary-foreground));
  padding: 0.5rem 1.25rem;
  border-radius: 99px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.bn-nav-signup:hover {
  background: var(--bn-accent-light);
}

/* Mobile hamburger */
.bn-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--bn-text-primary);
}

.bn-hamburger svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.bn-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.bn-mobile-menu.open {
  display: flex;
}

.bn-mobile-menu-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: var(--bn-text-primary);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

.bn-mobile-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bn-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bn-mobile-link:hover,
.bn-mobile-link.active {
  color: var(--bn-accent-light);
}

@media (max-width: 768px) {
  .bn-pill {
    display: none;
  }
  .bn-nav-login {
    display: none;
  }
  .bn-hamburger {
    display: block;
  }
}

/* ============================================================
   Bold utilities: solid accent, crisp buttons - solid colours only
   ============================================================ */
/* Solid accent text */
.bn-accent2-text { color: hsl(var(--color-accent2)); }
.bn-accent-text { color: var(--bn-accent-light); }

/* Buttons: solid, crisp, no glow */
.bn-btn--lg { font-size: 1.0625rem; padding: 0.95rem 2rem; }
.bn-btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: none; }
.bn-btn--primary:hover { background: hsl(var(--primary)); filter: brightness(1.08); transform: translateY(-1px); }
.bn-btn--outline { background: transparent; color: var(--bn-text-primary); border: 1px solid hsl(var(--color-accent2) / 0.4); }
.bn-btn--outline:hover { border-color: hsl(var(--color-accent2)); color: var(--bn-accent-2-light); }
.bn-btn--accent2 { background: hsl(var(--color-accent2)); color: hsl(var(--color-accent2-foreground)); box-shadow: none; }
.bn-btn--accent2:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ============================================================
   4. Hero - bold, professional, technological, with idle motion
   ============================================================ */
.bn-hero {
  position: relative; overflow: hidden;
  min-height: 92vh; display: flex; align-items: center;
  padding: 8rem 1.5rem 5rem;
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--foreground) / 0.06);
}
.bn-hero-index { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.bn-hero-inner {
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center;
}
.bn-hero-logo {
  display: block; width: 84px; height: 84px; margin: 0 0 1.5rem;
  filter: drop-shadow(0 0 10px hsl(var(--color-accent2) / 0.55)) drop-shadow(0 0 28px hsl(var(--color-accent2) / 0.32));
  animation: bn-hero-logo-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bn-hero-logo-in {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bn-hero-logo { animation: none; } }
.bn-cursor::after { content: "_"; margin-left: 2px; animation: bn-blink 1.1s steps(1) infinite; }
@keyframes bn-blink { 50% { opacity: 0; } }
.bn-typer { white-space: nowrap; }
.bn-type-caret { margin-left: 1px; animation: bn-blink 1.1s steps(1) infinite; }
.bn-hero-headline {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900; font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  line-height: 0.98; letter-spacing: -0.035em; color: var(--bn-text-primary); margin: 0.5rem 0 0;
}
.bn-hero-headline .bn-accent2-text { display: block; }
.bn-hero-subtitle { color: var(--bn-text-secondary); font-size: 1.15rem; line-height: 1.6; max-width: 560px; margin: 1.5rem 0 0; }
.bn-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.bn-hero-proof { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8125rem; color: var(--bn-text-faint); margin-top: 1.25rem; }
.bn-hero-visual { position: relative; }
.bn-hero-frame {
  position: relative; z-index: 1;
  border: 1px solid hsl(var(--foreground) / 0.12);
  box-shadow: 0 40px 100px hsl(0 0% 0% / 0.6);
  transform: perspective(1600px) rotateY(-9deg) rotateX(3deg);
  animation: bn-float 6s ease-in-out infinite alternate;
}
@keyframes bn-float {
  from { transform: perspective(1600px) rotateY(-9deg) rotateX(3deg) translateY(0); }
  to   { transform: perspective(1600px) rotateY(-9deg) rotateX(3deg) translateY(-14px); }
}
.bn-hero-bracket { position: absolute; width: 28px; height: 28px; z-index: 2; pointer-events: none; }
.bn-hero-bracket--tl { top: -10px; left: -10px; border-top: 2px solid hsl(var(--color-accent2)); border-left: 2px solid hsl(var(--color-accent2)); }
.bn-hero-bracket--br { bottom: -10px; right: -10px; border-bottom: 2px solid hsl(var(--color-accent2)); border-right: 2px solid hsl(var(--color-accent2)); }
@media (max-width: 900px) {
  .bn-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .bn-hero-frame { transform: none; animation: none; }
  .bn-hero { min-height: auto; padding-top: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-hero-frame, .bn-cursor::after { animation: none; }
}

/* ============================================================
   5. Section divider - geometric shuriken
   ============================================================ */
/* Geometric shuriken divider (minor transitions) */
.bn-shuriken {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.5rem 0;
}

.bn-shuriken::before,
.bn-shuriken::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bn-accent-dim);
}

.bn-shuriken-diamond {
  width: 10px;
  height: 10px;
  background: var(--bn-accent);
  transform: rotate(45deg);
  opacity: 0.6;
  flex-shrink: 0;
}

/* ============================================================
   6. Scroll reveal animations - blocks snapping into the layout
   ============================================================ */
.bn-reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* Directional variants: media frames slide in from the side they sit on,
   as if the block snaps into its column. */
.bn-reveal--left { transform: translateX(-36px) translateY(8px) scale(0.985); }
.bn-reveal--right { transform: translateX(36px) translateY(8px) scale(0.985); }

.bn-reveal.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Staggered cascade so a section assembles itself piece by piece */
.bn-showcase-text > .bn-reveal:nth-child(2) { transition-delay: 0.08s; }
.bn-showcase-text > .bn-reveal:nth-child(3) { transition-delay: 0.16s; }
.bn-mcp-steps .bn-reveal:nth-child(1) { transition-delay: 0.05s; }
.bn-mcp-steps .bn-reveal:nth-child(2) { transition-delay: 0.13s; }
.bn-mcp-steps .bn-reveal:nth-child(3) { transition-delay: 0.21s; }
.bn-mcp-steps .bn-reveal:nth-child(4) { transition-delay: 0.29s; }
.bn-feature-grid .bn-reveal:nth-child(3n + 2) { transition-delay: 0.08s; }
.bn-feature-grid .bn-reveal:nth-child(3n) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .bn-reveal,
  .bn-reveal--left,
  .bn-reveal--right {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* ============================================================
   7. Feature showcase - alternating sections
   ============================================================ */
.bn-showcase {
  display: grid;
  gap: 4rem;
  align-items: center;
}

/* Asymmetric column splits - never 50/50. `split` sets which column is the
   2/3 hero column; `layout` sets which side the text sits on (order). */
.bn-showcase--text-left.bn-showcase--text-wide { grid-template-columns: 2fr 1fr; }
.bn-showcase--text-left.bn-showcase--media-wide { grid-template-columns: 1fr 2fr; }
.bn-showcase--text-right.bn-showcase--text-wide { grid-template-columns: 1fr 2fr; }
.bn-showcase--text-right.bn-showcase--media-wide { grid-template-columns: 2fr 1fr; }

.bn-showcase--text-right .bn-showcase-text { order: 2; }
.bn-showcase--text-right .bn-showcase-demo { order: 1; }

.bn-showcase-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bn-showcase-demo {
  position: relative;
}

/* Surface box only for the synthetic fallback demos (no real screenshot). */
.bn-demo-surface {
  background: var(--bn-bg-surface);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.5rem;
  padding: 2rem;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

/* Demo: block-editor */
.bn-demo-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.bn-demo-block {
  background: hsl(var(--primary) / 0.06);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.25rem;
  padding: 1rem;
  opacity: 0;
  animation: bn-block-slide 3s ease-out infinite;
}

.bn-demo-block:nth-child(1) { animation-delay: 0s; }
.bn-demo-block:nth-child(2) { animation-delay: 0.3s; }
.bn-demo-block:nth-child(3) { animation-delay: 0.6s; grid-column: 1 / -1; }
.bn-demo-block:nth-child(4) { animation-delay: 0.9s; }

.bn-demo-block-line {
  height: 8px;
  border-radius: 4px;
  background: hsl(var(--primary) / 0.15);
  margin-bottom: 0.5rem;
}

.bn-demo-block-line:last-child {
  width: 60%;
  margin-bottom: 0;
}

@keyframes bn-block-slide {
  0% { opacity: 0; transform: translateY(12px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* Demo: blog-seo */
.bn-demo-seo {
  display: flex;
  gap: 1rem;
  height: 100%;
}

.bn-demo-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bn-demo-editor-line {
  height: 10px;
  border-radius: 5px;
  background: hsl(var(--primary) / 0.08);
}

.bn-demo-editor-line:nth-child(odd) {
  width: 90%;
}

.bn-demo-seo-panel {
  width: 40%;
  background: hsl(var(--primary) / 0.04);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.25rem;
  padding: 0.75rem;
  animation: bn-seo-slide 4s ease-out infinite;
}

.bn-demo-seo-score {
  height: 6px;
  background: hsl(var(--primary) / 0.1);
  border-radius: 3px;
  margin-top: 0.75rem;
  overflow: hidden;
}

.bn-demo-seo-score-fill {
  height: 100%;
  background: var(--bn-accent);
  border-radius: 3px;
  width: 0;
  animation: bn-score-fill 4s ease-out infinite;
}

@keyframes bn-seo-slide {
  0% { opacity: 0; transform: translateX(20px); }
  20% { opacity: 1; transform: translateX(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes bn-score-fill {
  0%, 20% { width: 0; }
  60% { width: 85%; }
  80% { width: 92%; }
  100% { width: 92%; opacity: 0; }
}

/* Demo: ai-content */
.bn-demo-ai {
  position: relative;
}

.bn-demo-ai-block {
  background: hsl(var(--primary) / 0.04);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.25rem;
  padding: 1.25rem;
  min-height: 120px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8125rem;
  color: var(--bn-text-secondary);
  line-height: 1.7;
  overflow: hidden;
}

.bn-demo-ai-text {
  display: inline;
  animation: bn-ai-type 5s steps(80) infinite;
  overflow: hidden;
  white-space: pre-wrap;
  border-right: 2px solid var(--bn-accent);
}

@keyframes bn-ai-type {
  0% { max-width: 0; }
  80% { max-width: 100%; }
  90% { max-width: 100%; border-color: transparent; }
  100% { max-width: 100%; border-color: transparent; }
}

/* Demo: data-engine */
.bn-demo-pipeline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.bn-demo-pipe-node {
  background: hsl(var(--primary) / 0.06);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--bn-accent-light);
  text-align: center;
  opacity: 0;
  animation: bn-pipe-appear 4s ease-out infinite;
}

.bn-demo-pipe-node:nth-child(1) { animation-delay: 0s; }
.bn-demo-pipe-node:nth-child(3) { animation-delay: 0.5s; }
.bn-demo-pipe-node:nth-child(5) { animation-delay: 1s; }
.bn-demo-pipe-node:nth-child(7) { animation-delay: 1.5s; }

.bn-demo-pipe-arrow {
  color: var(--bn-accent);
  font-size: 1rem;
  opacity: 0;
  animation: bn-pipe-appear 4s ease-out infinite;
}

.bn-demo-pipe-arrow:nth-child(2) { animation-delay: 0.25s; }
.bn-demo-pipe-arrow:nth-child(4) { animation-delay: 0.75s; }
.bn-demo-pipe-arrow:nth-child(6) { animation-delay: 1.25s; }

@keyframes bn-pipe-appear {
  0% { opacity: 0; transform: translateX(-8px); }
  15% { opacity: 1; transform: translateX(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Demo: realtime */
.bn-demo-realtime {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.bn-demo-browser {
  background: hsl(var(--primary) / 0.04);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.25rem;
  padding: 0.75rem;
  position: relative;
}

.bn-demo-browser-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 0.5rem;
}

.bn-demo-browser-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bn-accent-dim);
}

.bn-demo-cursor {
  width: 8px;
  height: 16px;
  border-radius: 1px;
  position: absolute;
}

.bn-demo-cursor--a {
  background: var(--bn-accent);
  animation: bn-cursor-move-a 3s ease-in-out infinite;
  left: 30%;
  top: 40%;
}

.bn-demo-cursor--b {
  background: var(--bn-accent-light);
  animation: bn-cursor-move-b 3s ease-in-out infinite;
  left: 60%;
  top: 55%;
}

.bn-demo-change {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  height: 12px;
  border-radius: 6px;
  background: transparent;
  overflow: hidden;
}

.bn-demo-change-fill {
  height: 100%;
  background: hsl(var(--primary) / 0.2);
  border-radius: 6px;
  animation: bn-change-ripple 3s ease-out infinite;
}

@keyframes bn-cursor-move-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, 10px); }
}

@keyframes bn-cursor-move-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-15px, -8px); }
}

@keyframes bn-change-ripple {
  0% { width: 0; opacity: 0; }
  30% { width: 80%; opacity: 1; }
  70% { width: 100%; opacity: 0.5; }
  100% { width: 100%; opacity: 0; }
}

@media (max-width: 768px) {
  .bn-showcase,
  .bn-showcase--text-left.bn-showcase--text-wide,
  .bn-showcase--text-left.bn-showcase--media-wide,
  .bn-showcase--text-right.bn-showcase--text-wide,
  .bn-showcase--text-right.bn-showcase--media-wide {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .bn-showcase--text-right .bn-showcase-text,
  .bn-showcase--text-right .bn-showcase-demo {
    order: 0;
  }
  .bn-demo-surface {
    min-height: 200px;
  }
}

/* ============================================================
   8. Feature grid
   ============================================================ */
.bn-feature-grid {
  display: grid;
  gap: 1.5rem;
}

.bn-feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bn-feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bn-feature-grid--4 { grid-template-columns: repeat(4, 1fr); }

.bn-feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bn-feature-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary) / 0.08);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.375rem;
  color: var(--bn-accent);
  font-size: 1.125rem;
}

.bn-feature-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--bn-text-primary);
}

.bn-feature-desc {
  font-size: 0.9375rem;
  color: var(--bn-text-muted);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .bn-feature-grid--3,
  .bn-feature-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .bn-feature-grid--3,
  .bn-feature-grid--4,
  .bn-feature-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   9. Pricing table
   ============================================================ */
.bn-pricing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.bn-pricing-card {
  background: var(--bn-bg-surface);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bn-pricing-card:hover {
  border-color: hsl(var(--primary) / 0.3);
}

.bn-pricing-card--highlighted {
  border-color: var(--bn-accent-2);
  box-shadow: 0 8px 40px hsl(0 0% 0% / 0.35);
  position: relative;
  transform: translateY(-0.5rem);
}

.bn-pricing-card--highlighted:hover {
  border-color: var(--bn-accent-2-light);
  box-shadow: 0 12px 48px hsl(0 0% 0% / 0.45);
}

.bn-pricing-card--highlighted::before {
  content: 'Most popular';
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bn-accent-2-fg);
  background: var(--bn-accent-2);
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  white-space: nowrap;
}

.bn-pricing-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bn-text-primary);
}

.bn-pricing-audience {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--bn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bn-pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.bn-pricing-amount {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--bn-text-primary);
  line-height: 1;
}

.bn-pricing-period {
  font-size: 0.875rem;
  color: var(--bn-text-muted);
}

.bn-pricing-limits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bn-pricing-limit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--bn-text-secondary);
}

.bn-pricing-limit::before {
  content: '\2713';
  color: var(--bn-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.bn-pricing-card--highlighted .bn-pricing-limit::before {
  color: var(--bn-accent-2);
}

.bn-pricing-cta {
  margin-top: auto;
}

@media (max-width: 1024px) {
  .bn-pricing {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .bn-pricing {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   10. Footer CTA banner
   ============================================================ */
.bn-footer-cta {
  text-align: center;
  padding: 5rem 1.5rem;
  position: relative;
}

.bn-footer-cta .bn-heading {
  position: relative;
  z-index: 1;
}

.bn-footer-cta .bn-body {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
}

.bn-footer-cta .bn-btn {
  position: relative;
  z-index: 1;
}

/* ============================================================
   11. Site footer
   ============================================================ */
.bn-footer {
  border-top: 1px solid var(--bn-accent-dim);
  padding: 3rem 1.5rem 1.5rem;
  background: var(--bn-bg-primary);
}

.bn-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.bn-footer-col-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bn-text-muted);
  margin-bottom: 1rem;
}

.bn-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bn-footer-link {
  font-size: 0.875rem;
  color: var(--bn-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bn-footer-link:hover {
  color: var(--bn-accent-light);
}

.bn-footer-link--external::after {
  content: ' \2197';
  font-size: 0.75em;
}

.bn-footer-bottom {
  border-top: 1px solid var(--bn-accent-dim);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bn-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--bn-text-muted);
}

.bn-footer-logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px hsl(var(--color-accent2) / 0.5));
}

.bn-footer-copyright {
  font-size: 0.8125rem;
  color: var(--bn-text-faint);
}

@media (max-width: 768px) {
  .bn-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .bn-footer-grid {
    grid-template-columns: 1fr;
  }
  .bn-footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* ============================================================
   12. Contact form
   ============================================================ */
.bn-contact-section {
  overflow: hidden;
}

.bn-contact-glow {
  display: none;
}

.bn-contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bn-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bn-input-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--bn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bn-input,
.bn-select,
.bn-textarea {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--bn-text-primary);
  background: var(--bn-bg-surface);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.bn-input:focus,
.bn-select:focus,
.bn-textarea:focus {
  outline: none;
  border-color: var(--bn-accent-2);
  box-shadow: 0 0 0 2px hsl(0 0% 0% / 0.2);
}

.bn-input::placeholder,
.bn-textarea::placeholder {
  color: var(--bn-text-faint);
}

.bn-select {
  appearance: none;
  padding-right: 2rem;
}

/* Token-tinted dropdown arrow: colourless SVG mask + theme colour. */
.bn-select-wrap {
  position: relative;
  display: block;
}
.bn-select-wrap::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  background-color: var(--bn-text-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 L6 8 L10 4 Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 L6 8 L10 4 Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.bn-textarea {
  min-height: 140px;
  resize: vertical;
}

.bn-form-error {
  font-size: 0.875rem;
  color: hsl(var(--destructive));
  padding: 0.5rem 0;
}

.bn-form-success {
  font-size: 0.9375rem;
  color: var(--bn-accent-2-light);
  text-align: center;
  padding: 1rem;
}

/* ============================================================
   13. Philosophy / About page sections
   ============================================================ */
.bn-philosophy-section {
  padding: 0;
}

.bn-philosophy-body {
  max-width: 700px;
}

.bn-philosophy-body p {
  color: var(--bn-text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.bn-philosophy-body strong {
  color: var(--bn-text-primary);
  font-weight: 700;
}

/* Light-band overrides: body text and label colour */
.bn-section--light .bn-philosophy-body p {
  color: var(--bn-text-on-light-muted);
}

.bn-section--light .bn-philosophy-body strong {
  color: var(--bn-text-on-light);
}

/* Allow accent-2 label to override the light-section label reset */
.bn-section--light .bn-label--alt {
  color: var(--bn-accent-2);
}

/* ============================================================
   14. Changelog / Blog index
   ============================================================ */
.bn-changelog-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.bn-changelog-header .bn-label {
  margin-bottom: 0.5rem;
}

.bn-changelog-header .bn-heading {
  margin-top: 0.25rem;
}

.bn-changelog {
  display: flex;
  flex-direction: column;
}

.bn-changelog-entry {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--bn-accent-dim);
  border-left: 2px solid transparent;
  display: flex;
  gap: 2rem;
  align-items: baseline;
  margin-left: -1rem;
  margin-right: -1rem;
  transition: border-left-color 0.2s ease, background 0.2s ease;
}

.bn-changelog-entry:hover {
  border-left-color: var(--bn-accent);
  background: hsl(var(--primary) / 0.04);
}

.bn-changelog-entry:last-child {
  border-bottom: none;
}

.bn-changelog-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  color: var(--bn-text-faint);
  flex-shrink: 0;
  min-width: 100px;
}

.bn-changelog-content {
  flex: 1;
}

.bn-changelog-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--bn-text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.bn-changelog-title:hover {
  color: var(--bn-accent-light);
}

.bn-changelog-excerpt {
  font-size: 0.9375rem;
  color: var(--bn-text-muted);
  margin-top: 0.375rem;
  line-height: 1.6;
}

.bn-changelog-empty {
  text-align: center;
}

@media (max-width: 768px) {
  .bn-changelog-entry {
    flex-direction: column;
    gap: 0.375rem;
    border-left: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   15. Blog post prose (detail page)
   ============================================================ */
.bn-prose {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.bn-prose h1,
.bn-prose h2,
.bn-prose h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  color: var(--bn-text-primary);
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

.bn-prose h1 { font-size: 2rem; }
.bn-prose h2 { font-size: 1.5rem; }
.bn-prose h3 { font-size: 1.25rem; }

.bn-prose p {
  color: var(--bn-text-secondary);
  line-height: 1.8;
  margin-bottom: 1.25em;
}

.bn-prose a {
  color: var(--bn-accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bn-prose a:hover {
  color: var(--bn-accent);
}

.bn-prose code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875em;
  background: hsl(var(--primary) / 0.08);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  color: var(--bn-accent-light);
}

.bn-prose pre {
  background: var(--bn-bg-surface);
  border: 1px solid var(--bn-accent-dim);
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5em 0;
}

.bn-prose pre code {
  background: none;
  padding: 0;
}

.bn-prose ul,
.bn-prose ol {
  color: var(--bn-text-secondary);
  line-height: 1.8;
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}

.bn-prose blockquote {
  border-left: 3px solid var(--bn-accent);
  padding-left: 1.25rem;
  margin: 1.5em 0;
  color: var(--bn-text-muted);
  font-style: italic;
}

.bn-prose img {
  max-width: 100%;
  border-radius: 0.5rem;
  margin: 1.5em 0;
}

/* ============================================================
   16. Legal pages (privacy / terms)
   ============================================================ */
.bn-legal {
  max-width: 700px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.bn-legal h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--bn-text-primary);
  margin-bottom: 2rem;
}

.bn-legal h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bn-text-primary);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.bn-legal p {
  color: var(--bn-text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.bn-legal ul {
  color: var(--bn-text-secondary);
  line-height: 1.7;
  padding-left: 1.5em;
  margin-bottom: 1rem;
}

/* ============================================================
   17. Spacer utility
   ============================================================ */
.bn-spacer {
  padding-top: 5rem;
}

.bn-spacer--nav {
  padding-top: 6rem;
}

/* ============================================================
   Section system: bold dark/light full-bleed bands
   ============================================================ */
.bn-section--dark {
  background: var(--bn-bg-primary);
}

.bn-section--light {
  background: var(--bn-bg-light);
}
.bn-section--light .bn-heading { color: var(--bn-text-on-light); }
.bn-section--light .bn-body { color: var(--bn-text-on-light-muted); }
.bn-section--light .bn-label { color: var(--bn-accent); }
.bn-section--light .bn-card {
  background: hsl(var(--color-surface));
  border-color: var(--bn-border-on-light);
}
.bn-section--light .bn-feature-title { color: var(--bn-text-on-light); }
.bn-section--light .bn-feature-desc { color: var(--bn-text-on-light-muted); }
.bn-section--light .bn-mcp-step-title { color: var(--bn-text-on-light); }
.bn-section--light .bn-mcp-step-body { color: var(--bn-text-on-light-muted); }

/* Accent-2 component variants */
.bn-label--alt { color: var(--bn-accent-2); }

/* ============================================================
   Index strip: spatial-index proof shelf (hero -> page threshold)
   ============================================================ */
.bn-index-strip {
  background: var(--bn-bg-secondary);                  /* --card 7%: the lifted shelf */
  border-top: 1px solid hsl(var(--foreground) / 0.08); /* crisp seam under hero's 0.06 bottom border */
  padding: 2.75rem 1.5rem;
}
.bn-index-strip::before {                              /* short cyan boundary tick, aligned to container left */
  content: ""; position: absolute; top: 0;
  left: max(1.5rem, calc((100% - 1200px) / 2));
  width: 72px; height: 2px;
  background: hsl(var(--color-accent2));
}
.bn-index-head {
  display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: 1.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bn-index-no { font-size: 0.8125rem; letter-spacing: 0.05em; color: var(--bn-text-faint); }
.bn-index-slash { color: var(--bn-accent-2); margin-left: 0.15rem; }
.bn-index-headlabel { font-size: 0.8125rem; letter-spacing: 0.05em; color: var(--bn-text-secondary); }
.bn-index-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.bn-index-cell { position: relative; padding: 0.25rem 1.75rem; }
.bn-index-cell:first-child { padding-left: 0; }
/* vertical partition rule between cells: hero-divider hairline weight, draws in on reveal */
.bn-index-cell + .bn-index-cell::before {
  content: ""; position: absolute; left: 0; top: 0.15rem; bottom: 0.15rem; width: 1px;
  background: hsl(var(--foreground) / 0.10);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bn-index-cell.visible::before { transform: scaleY(1); }
.bn-index-kicker {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.05em; color: var(--bn-accent-2); margin-bottom: 0.6rem;
}
.bn-index-figure {
  display: block; font-family: 'Inter', system-ui, sans-serif; font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--bn-text-primary);
}
.bn-index-caption {
  margin: 0.6rem 0 0; font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem; line-height: 1.5; color: var(--bn-text-secondary);
}
/* staggered cell + rule draw-in (mirrors the existing nth-child stagger idiom) */
.bn-index-row .bn-reveal:nth-child(2) { transition-delay: 0.07s; }
.bn-index-row .bn-reveal:nth-child(3) { transition-delay: 0.14s; }
.bn-index-row .bn-reveal:nth-child(4) { transition-delay: 0.21s; }
.bn-index-cell:nth-child(2)::before { transition-delay: 0.07s; }
.bn-index-cell:nth-child(3)::before { transition-delay: 0.14s; }
.bn-index-cell:nth-child(4)::before { transition-delay: 0.21s; }
@media (max-width: 900px) {
  .bn-index-row { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.75rem; }
  .bn-index-cell, .bn-index-cell:first-child { padding-left: 0; }
  .bn-index-cell + .bn-index-cell::before { display: none; } /* drop vertical rules when wrapped */
}
@media (max-width: 480px) {
  .bn-index-row { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-index-cell::before { transform: scaleY(1); transition: none; }
}

/* ============================================================
   Media frame: browser-chrome wrapper around real captures
   ============================================================ */
.bn-media-frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bn-accent-dim);
  background: var(--bn-bg-surface);
  box-shadow: 0 30px 80px hsl(0 0% 0% / 0.45);
}
.bn-media-frame-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: hsl(var(--foreground) / 0.03);
  border-bottom: 1px solid var(--bn-accent-dim);
}
.bn-media-frame-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bn-text-faint);
}
.bn-media-frame-asset {
  display: block;
  width: 100%;
  height: auto;
}
.bn-media-frame-poster { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bn-media-frame-asset[autoplay] { display: none; }
  .bn-media-frame-poster { display: block; width: 100%; height: auto; }
}

/* Showcase + platform media frames: crisp neutral shadow only */
.bn-showcase-demo .bn-media-frame,
.bn-platform-media .bn-media-frame {
  border: 1px solid hsl(var(--foreground) / 0.12);
  box-shadow: 0 30px 80px hsl(0 0% 0% / 0.55);
}

/* On light bands: solid surface border + softer neutral shadow for crisp lift */
.bn-section--light .bn-showcase-demo .bn-media-frame,
.bn-section--light .bn-platform-media .bn-media-frame,
.bn-section--light .bn-mcp-media {
  border-color: hsl(var(--color-surface-border) / 0.18);
  box-shadow: 0 24px 60px hsl(0 0% 0% / 0.16);
}
.bn-section--light .bn-media-frame-bar {
  background: hsl(var(--color-surface-border) / 0.04);
  border-bottom-color: hsl(var(--color-surface-border) / 0.12);
}
.bn-section--light .bn-media-frame-dot {
  background: hsl(var(--color-surface-border) / 0.3);
}
/* Full-screen control, sits at the right of the faux-browser chrome bar */
.bn-media-frame-fs {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--bn-text-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bn-media-frame-fs:hover {
  background: hsl(var(--foreground) / 0.08);
  color: var(--bn-accent);
}
.bn-media-frame-fs:focus-visible {
  outline: 2px solid var(--bn-accent);
  outline-offset: 2px;
}
.bn-media-frame-fs svg {
  width: 15px;
  height: 15px;
  display: block;
}
.bn-section--light .bn-media-frame-fs:hover {
  background: hsl(var(--color-surface-border) / 0.12);
}

/* ============================================================
   Platform section: Data Views / Workflows / AI steps
   ============================================================ */
.bn-platform-head { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.bn-platform-rows { display: flex; flex-direction: column; gap: 4rem; }
.bn-platform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.bn-platform-row--reverse .bn-platform-text { order: 2; }
.bn-platform-row--reverse .bn-platform-media { order: 1; }
@media (max-width: 860px) {
  .bn-platform-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .bn-platform-row--reverse .bn-platform-text,
  .bn-platform-row--reverse .bn-platform-media { order: 0; }
}

/* ============================================================
   MCP Showcase: connect flow section
   ============================================================ */
.bn-mcp {
  overflow: hidden;
}

.bn-mcp-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
  position: relative;
}

.bn-mcp-media {
  max-width: 900px;
  margin: 0 auto 4rem;
  position: relative;
  box-shadow: 0 30px 80px hsl(0 0% 0% / 0.45);
}

.bn-mcp-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}

.bn-mcp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.6rem 1.6rem 1.7rem 1.75rem;
  border-radius: 14px;
  background: hsl(var(--foreground) / 0.025);
  border: 1px solid hsl(var(--foreground) / 0.07);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

/* accent rail: the "guardrail" itself, drawn down the left edge of each card */
.bn-mcp-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--bn-accent-2), transparent 85%);
  opacity: 0.55;
}

.bn-mcp-step:hover {
  transform: translateY(-3px);
  border-color: var(--bn-accent-2-dim);
  background: hsl(var(--foreground) / 0.04);
}

.bn-section--light .bn-mcp-step {
  background: hsl(var(--color-surface-border) / 0.04);
  border-color: var(--bn-border-on-light);
}
.bn-section--light .bn-mcp-step:hover {
  background: hsl(var(--color-surface-border) / 0.07);
  border-color: var(--bn-accent-2-dim);
}

.bn-mcp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  background: var(--bn-accent-2-dim);
  color: var(--bn-accent-2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid var(--bn-accent-2-dim);
  margin-bottom: 0.35rem;
}

.bn-mcp-step-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--bn-text-primary);
  line-height: 1.3;
  margin: 0;
}

.bn-mcp-step-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  color: var(--bn-text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 720px) {
  .bn-mcp-steps {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   AI Terminal: live MCP session + the guardrails it stays inside
   ============================================================ */
.bn-aiterm {
  overflow: hidden;
}
.bn-aiterm-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}
.bn-aiterm-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: 2.75rem;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

/* The window is a self-contained dark "monaco" terminal theme (Tokyo Night
   inspired). Fixed palette by design: it depicts a real terminal, so it stays
   the same on any site band rather than following the page tokens. */
.bn-aiterm-window {
  --term-bg: #1a1b26;
  --term-bar: #16161e;
  --term-text: #a9b1d6;
  --term-dim: #565f89;
  --term-prompt: #7aa2f7;
  --term-cmd: #c0caf5;
  --term-green: #9ece6a;
  --term-purple: #bb9af7;
  --term-cyan: #7dcfff;
  --term-arg: #737aa2;
  --term-clay: #d6936b;
  --term-yellow: #e0af68;
  --term-edge: rgba(122, 162, 247, 0.16);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--term-edge);
  background: var(--term-bg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
  min-width: 0;
  /* fixed-size terminal: the body flexes to fill, the input chrome appears at the
     bottom only once the app boots, so the window never resizes */
  display: flex;
  flex-direction: column;
  height: 500px;
}
.bn-aiterm-bar,
.bn-aiterm-status,
.bn-aiterm-input,
.bn-aiterm-hint { flex: none; }
/* the Claude Code chrome is hidden during the shell phase and appears on boot */
.bn-aiterm-window.js-stream:not(.app-running) .bn-aiterm-status,
.bn-aiterm-window.js-stream:not(.app-running) .bn-aiterm-input,
.bn-aiterm-window.js-stream:not(.app-running) .bn-aiterm-hint { display: none; }
.bn-aiterm-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--term-bar);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
/* mac-style traffic lights */
.bn-aiterm-bar .bn-media-frame-dot { width: 11px; height: 11px; }
.bn-aiterm-bar .bn-media-frame-dot:nth-child(1) { background: #ff5f57; }
.bn-aiterm-bar .bn-media-frame-dot:nth-child(2) { background: #febc2e; }
.bn-aiterm-bar .bn-media-frame-dot:nth-child(3) { background: #28c840; }
.bn-aiterm-bar-title {
  margin: 0 auto;
  padding-right: 2.5rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--term-dim);
}
.bn-aiterm-body {
  padding: 1.5rem 1.6rem 1.2rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.95;
  color: var(--term-text);
  /* fills the terminal screen and scrolls inside it. content is anchored to the
     bottom so new lines appear just above the input and push older lines up, the
     way a real terminal scrolls */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 162, 247, 0.3) transparent;
}
/* flexible spacer: takes the slack when the session is short so content sticks
   to the bottom (new lines push older ones up), collapses once it overflows */
.bn-aiterm-body::before { content: ''; margin-top: auto; flex: none; }
.bn-aiterm-body > .bn-aiterm-row { flex: none; }
.bn-aiterm-body::-webkit-scrollbar { width: 8px; }
.bn-aiterm-body::-webkit-scrollbar-track { background: transparent; }
.bn-aiterm-body::-webkit-scrollbar-thumb {
  background: rgba(122, 162, 247, 0.25);
  border-radius: 4px;
}
.bn-aiterm-body::-webkit-scrollbar-thumb:hover { background: rgba(122, 162, 247, 0.4); }
.bn-aiterm-line {
  display: flex;
  gap: 0.55rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.bn-aiterm-text { min-width: 0; }

/* shell command + its output */
.bn-aiterm-glyph { flex: none; width: 1ch; font-weight: 700; color: var(--term-dim); }
.bn-aiterm-line--cmd .bn-aiterm-glyph { color: var(--term-green); }
.bn-aiterm-line--cmd .bn-aiterm-text { color: var(--term-cmd); }
.bn-aiterm-cmd-cursor { display: none; }
.bn-aiterm-line--cmdout .bn-aiterm-text { color: var(--term-dim); }

/* Claude Code boot banner: block-art logo + version / model / cwd */
.bn-aiterm-logo {
  display: flex;
  flex-direction: column;
  margin: 0.1rem 0 0.3rem;
}
.bn-aiterm-logo-row { display: flex; white-space: pre; line-height: 1.5; }
.bn-aiterm-logo-art {
  flex: none;
  width: 10ch;
  color: var(--term-clay);
}
.bn-aiterm-logo-app { color: var(--term-cmd); font-weight: 600; }
.bn-aiterm-logo-model { color: var(--term-text); }
.bn-aiterm-logo-cwd { color: var(--term-dim); }

/* startup warning line (⚠ N MCP servers need authentication · run /mcp) */
.bn-aiterm-warn { color: var(--term-dim); }
.bn-aiterm-warn-icon { flex: none; width: 1ch; color: var(--term-yellow); }
.bn-aiterm-warn .bn-aiterm-text { color: var(--term-dim); }

/* user message echoed into the transcript: ❯ what you typed */
.bn-aiterm-userecho { gap: 0.55rem; }
.bn-aiterm-userecho-caret { flex: none; width: 1ch; color: var(--term-clay); font-weight: 700; }
.bn-aiterm-userecho .bn-aiterm-text { color: var(--term-text); }
/* @file mention, the way Claude Code marks an attached file */
.bn-aiterm-mention { color: var(--term-cyan); }

/* the spinner control row never renders in the transcript (it drives the status line) */
.bn-aiterm-spinner { display: none; }

/* assistant message / tool call bullets (⏺) and result branch (⎿) */
.bn-aiterm-dot { flex: none; width: 1ch; color: var(--term-clay); }
.bn-aiterm-dot--ok { color: var(--term-green); }
.bn-aiterm-line--assistant .bn-aiterm-text { color: var(--term-text); }
.bn-aiterm-tool { color: var(--term-cmd); font-weight: 600; }
.bn-aiterm-mcp { color: var(--term-dim); }
.bn-aiterm-args { color: var(--term-arg); }
.bn-aiterm-branch { flex: none; width: 1.6ch; color: var(--term-dim); }
.bn-aiterm-line--result .bn-aiterm-text { color: #9aa5ce; }

/* plan checklist */
.bn-aiterm-line--task { gap: 0.4rem; }
.bn-aiterm-check { flex: none; color: var(--term-dim); }
.bn-aiterm-check.is-done { color: var(--term-green); }
.bn-aiterm-line--task .bn-aiterm-text { color: var(--term-text); }

.bn-aiterm-spacer { height: 0.5rem; }

/* Claude Code thinking line, pinned just above the input box: ✻ Cogitating…
   (timer · tokens · effort). Space is reserved so the window does not jump;
   the content only shows while a thinking step is active. */
.bn-aiterm-status {
  display: none;   /* takes no space when idle; the flexing body absorbs it */
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.35rem 1.6rem 0.15rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
}
.bn-aiterm-status.is-active { display: flex; }
.bn-aiterm-spin-star {
  flex: none;
  color: var(--term-clay);
  animation: bn-aiterm-pulse 1.1s ease-in-out infinite;
}
.bn-aiterm-spin-word {
  color: var(--term-clay);
  min-width: 8.5ch;
}
.bn-aiterm-spin-word::after { content: '…'; }
.bn-aiterm-spin-meta { color: var(--term-dim); }
@keyframes bn-aiterm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* the persistent input box + the mode hint beneath it */
.bn-aiterm-input {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--term-edge);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
}
.bn-aiterm-input-caret { flex: none; color: var(--term-clay); font-weight: 700; }
.bn-aiterm-input-text { color: var(--term-text); min-width: 0; word-break: break-word; }
.bn-aiterm-input-cursor { display: inline-block; }
.bn-aiterm-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 1.5rem 0.9rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.76rem;
}
.bn-aiterm-hint-mode { color: var(--term-clay); }
.bn-aiterm-hint-dim { color: var(--term-dim); }

.bn-aiterm-cursor {
  display: inline-block;
  width: 0.62ch;
  height: 1.05em;
  transform: translateY(0.16em);
  background: var(--term-clay);
  box-shadow: 0 0 8px rgba(214, 147, 107, 0.5);
  animation: bn-aiterm-blink 1.1s steps(1) infinite;
}
@keyframes bn-aiterm-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Streaming is JS-driven (see the script in ai-terminal.ninjatpl): the script
   adds .js-stream, hides every row, then prints them one at a time while
   auto-scrolling the body, so the session plays out like a live terminal. The
   .js-stream gate means rows stay visible if JS never runs. */
.bn-aiterm-window.js-stream .bn-aiterm-row {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.34s ease, transform 0.34s ease;
}
.bn-aiterm-window.js-stream .bn-aiterm-row.is-printed {
  opacity: 1;
  transform: none;
}

/* Right rail: the guardrails the session just demonstrated */
.bn-aiterm-rails {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-top: 0.4rem;
}
.bn-aiterm-rails-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bn-text-faint);
}
.bn-aiterm-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.bn-aiterm-rule {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.bn-aiterm-rule-mark {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* solid accent fill + dark glyph so the tick reads on the light band */
  background: var(--bn-accent-2);
  color: var(--bn-accent-2-fg);
  border: 1px solid var(--bn-accent-2);
}
.bn-aiterm-rule-mark svg { width: 0.95rem; height: 0.95rem; }
.bn-aiterm-rule-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bn-aiterm-rule-text strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--bn-text-primary);
}
.bn-aiterm-rule-text span {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--bn-text-secondary);
}

/* Light band: rail copy flips to the on-light palette (terminal stays dark) */
.bn-section--light .bn-aiterm-rule-text strong { color: var(--bn-text-on-light); }
.bn-section--light .bn-aiterm-rule-text span { color: var(--bn-text-on-light-muted); }

@media (max-width: 860px) {
  .bn-aiterm-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bn-aiterm-cursor { animation: none; }
  .bn-aiterm-body { scroll-behavior: auto; }
  .bn-aiterm-window.js-stream .bn-aiterm-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   18. Post detail page: hero header + body prose
   ============================================================ */

/* Hero band: dark background, padded, separator */
.block-post-hero {
  background: hsl(var(--background));
  padding: 3rem 1.5rem 2.5rem;
  border-bottom: 1px solid hsl(var(--foreground) / 0.08);
}

/* Override the 2-col grid; single column, constrained width */
.block-post-hero > section {
  max-width: 720px;
  margin: 0 auto;
  display: block;
}

/* Hide the image/placeholder column */
.block-post-hero > section > div:nth-child(2) {
  display: none;
}

/* "Blog" label above title: mono, cyan accent */
.block-post-hero .text-sm.uppercase {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: hsl(var(--color-accent2));
}

/* Post title: large, bold, white */
.block-post-hero h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: hsl(var(--foreground));
  margin-top: 0.5rem;
}

/* Metadata row: mono, muted-foreground */
.block-post-hero .post-meta-main {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.block-post-hero .post-meta-main svg {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

/* Category pills: purple accent */
.block-post-hero .post-meta-categories a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.25);
  border-radius: 99px;
  padding: 0.2rem 0.65rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.block-post-hero .post-meta-categories a:hover {
  background: hsl(var(--primary) / 0.18);
  border-color: hsl(var(--primary) / 0.45);
}

/* Post body container: dark, padded */
.block-post-content {
  padding: 3rem 1.5rem 5rem;
  background: hsl(var(--background));
}

/* The prose article: constrained, readable */
.block-post-content .post-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: hsl(var(--muted-foreground));
}

/* Headings: bold white, tight tracking */
.block-post-content .post-content h1,
.block-post-content .post-content h2,
.block-post-content .post-content h3,
.block-post-content .post-content h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  color: hsl(var(--foreground));
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.block-post-content .post-content h1 { font-size: 1.875rem; }
.block-post-content .post-content h2 { font-size: 1.5rem; }
.block-post-content .post-content h3 { font-size: 1.25rem; }
.block-post-content .post-content h4 { font-size: 1.125rem; }

/* Paragraphs */
.block-post-content .post-content p {
  color: hsl(var(--muted-foreground));
  line-height: 1.8;
  margin-bottom: 1.25em;
}

/* Links: cyan accent */
.block-post-content .post-content a {
  color: hsl(var(--color-accent2));
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.block-post-content .post-content a:hover {
  color: hsl(var(--color-accent2) / 0.8);
}

/* Inline code: mono, card bg, cyan */
.block-post-content .post-content code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.875em;
  background: hsl(var(--card));
  color: hsl(var(--color-accent2));
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  border: 1px solid hsl(var(--foreground) / 0.08);
}

/* Code blocks */
.block-post-content .post-content pre {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--foreground) / 0.1);
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5em 0;
}

.block-post-content .post-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: hsl(var(--foreground));
  font-size: 0.9375em;
}

/* Blockquote: cyan left border */
.block-post-content .post-content blockquote {
  border-left: 3px solid hsl(var(--color-accent2));
  padding-left: 1.25rem;
  margin: 1.5em 0;
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

/* Lists */
.block-post-content .post-content ul,
.block-post-content .post-content ol {
  color: hsl(var(--muted-foreground));
  padding-left: 1.5em;
  margin-bottom: 1.25em;
  line-height: 1.8;
}

.block-post-content .post-content li {
  margin-bottom: 0.25em;
}

/* Images: full-width, rounded, thin border */
.block-post-content .post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--foreground) / 0.08);
  margin: 1.5em 0;
}

/* Horizontal rule */
.block-post-content .post-content hr {
  border: none;
  border-top: 1px solid hsl(var(--foreground) / 0.1);
  margin: 2em 0;
}