/* bunny landing — palette from logo */
:root {
  --bg: #050508;
  --bg-elevated: #0d0d14;
  --bg-card: #12121c;
  --navy: #1a0b40;
  --purple: #9d8af2;
  --purple-dim: #6b5cad;
  --purple-glow: rgba(157, 138, 242, 0.25);
  --teal: #48cbb9;
  --teal-dim: #2a8f82;
  --teal-glow: rgba(72, 203, 185, 0.2);
  --white: #f4f2ff;
  --muted: #8b87a8;
  --border: rgba(157, 138, 242, 0.15);
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", monospace;
  --max-width: 1120px;
  --header-h: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ambient background */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.glow--purple {
  width: 500px;
  height: 500px;
  top: -100px;
  right: -100px;
  background: var(--purple-glow);
}

.glow--teal {
  width: 400px;
  height: 400px;
  bottom: 20%;
  left: -120px;
  background: var(--teal-glow);
}

/* header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  background: rgba(5, 5, 8, 0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand__name {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav {
  display: none;
  gap: 2rem;
}

.nav a {
  font-size: 0.9rem;
  color: var(--muted);
  transition: color 0.2s;
}

.nav a:hover {
  color: var(--purple);
}

.header__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--purple);
  color: var(--navy);
  border-color: var(--purple);
}

.btn--primary:hover {
  background: #b0a0f5;
}

.btn--secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--border);
}

.btn--secondary:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.btn--ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
  padding: 0.5rem 1rem;
}

.btn--ghost:hover {
  color: var(--white);
  border-color: var(--purple-dim);
}

.btn__badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.6rem;
}

.btn__badge img {
  height: 18px;
  width: auto;
  display: inline-block;
  filter: saturate(0.95);
}

.btn:hover .btn__badge img {
  filter: saturate(1.05);
}

.btn--large {
  padding: 0.85rem 2rem;
  font-size: 1rem;
}

/* hero */
main {
  position: relative;
  z-index: 1;
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--header-h) + 3rem) 1.5rem 4rem;
}

.hero__content {
  max-width: 720px;
  width: 100%;
}

.eyebrow {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  margin-left: auto;
  margin-right: auto;
}

.hero__lead {
  font-size: 1.125rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.hero__tagline {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, rgba(157, 138, 242, 0.12), rgba(72, 203, 185, 0.08));
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: 8px;
  box-shadow: 0 0 32px rgba(157, 138, 242, 0.08);
}

.hero__tagline-accent {
  color: var(--teal);
}

.hero__tagline-github {
  color: var(--purple);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--max-width);
  gap: 2.5rem;
}

.hero__visual-stack {
  display: none;
}

.story-diagram {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  box-shadow: 0 0 32px rgba(72, 203, 185, 0.06), inset 0 0 24px rgba(157, 138, 242, 0.03);
}

.story-diagram__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}

.story-diagram__replay {
  display: flex;
  margin: 0.85rem auto 0;
  font-size: 0.82rem;
  color: var(--muted);
  gap: 0.4rem;
}

.story-diagram__replay::before {
  content: "↻";
  font-size: 1rem;
  line-height: 1;
  color: rgba(72, 203, 185, 0.9);
}

.story-diagram__replay:hover {
  color: var(--white);
  border-color: rgba(72, 203, 185, 0.45);
}

/* story styling */
.story__panel {
  fill: rgba(8, 8, 14, 0.55);
  stroke: rgba(157, 138, 242, 0.18);
  stroke-width: 1;
}

.story__code-thread .story__panel {
  fill: var(--bg-card);
}

.story__node {
  fill: rgba(8, 8, 14, 0.6);
  stroke-width: 1.5;
}

.story__node--bunny {
  stroke: rgba(72, 203, 185, 0.65);
  /* Opaque enough to hide flow lines underneath */
  fill: rgba(10, 14, 18, 0.96);
}

.story__bunny-logo {
  filter: drop-shadow(0 0 10px rgba(72, 203, 185, 0.45));
  pointer-events: none;
}

.story__bunny-hit {
  opacity: 0;
  pointer-events: none;
}

.story__bunny-hit-bubble {
  fill: rgba(10, 14, 18, 0.96);
  stroke: rgba(72, 203, 185, 0.9);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 8px rgba(72, 203, 185, 0.55));
}

.story__bunny-rag {
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

.story__bunny-rag-bubble {
  fill: rgba(10, 14, 18, 0.96);
  stroke: rgba(157, 138, 242, 0.82);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 10px rgba(157, 138, 242, 0.45));
}

.story__rag-plus {
  font-size: 24px;
  font-weight: 300;
  fill: rgba(72, 203, 185, 0.95);
  dominant-baseline: central;
  text-anchor: middle;
  user-select: none;
}

.story__rag-emoji {
  font-size: 22px;
  dominant-baseline: central;
  text-anchor: middle;
  user-select: none;
}

.story__node--agent {
  stroke: rgba(157, 138, 242, 0.55);
  /* Opaque enough to hide flow lines underneath */
  fill: rgba(10, 14, 18, 0.96);
}

.story__node--github {
  stroke: rgba(72, 203, 185, 0.35);
  fill: rgba(72, 203, 185, 0.05);
}

.story__title {
  fill: rgba(255, 255, 255, 0.86);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 650;
}

.story__discord-logo {
  pointer-events: none;
  opacity: 0.92;
}

.story__node-title {
  fill: rgba(255, 255, 255, 0.9);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 650;
}

.story__caption {
  fill: rgba(139, 135, 168, 0.95);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
}

.story__bubble {
  stroke-width: 1;
}

.story__bubble--a {
  fill: rgba(72, 203, 185, 0.08);
  stroke: rgba(72, 203, 185, 0.25);
}

.story__bubble--b {
  fill: rgba(157, 138, 242, 0.08);
  stroke: rgba(157, 138, 242, 0.25);
}

.story__bubble--cmd {
  fill: rgba(72, 203, 185, 0.12);
  stroke: rgba(72, 203, 185, 0.55);
}

.story__bubble--validate {
  fill: rgba(157, 138, 242, 0.14);
  stroke: rgba(157, 138, 242, 0.6);
}

.story__bubble--actions {
  fill: rgba(8, 8, 14, 0.35);
  stroke: rgba(157, 138, 242, 0.18);
  stroke-width: 1;
}

.story__bubble--reject {
  fill: rgba(192, 80, 80, 0.12);
  stroke: rgba(192, 80, 80, 0.55);
}

.story__bubble--merged {
  fill: rgba(72, 203, 185, 0.12);
  stroke: rgba(72, 203, 185, 0.55);
}

.story__text {
  fill: rgba(255, 255, 255, 0.9);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 550;
}

.story__text--cmd {
  fill: rgba(72, 203, 185, 0.95);
  font-weight: 700;
}

.story__text--validate {
  fill: rgba(255, 255, 255, 0.95);
  font-weight: 750;
}

.story__text--reject {
  fill: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}

.story__pill {
  stroke-width: 1;
}

.story__pill--validate {
  fill: rgba(157, 138, 242, 0.16);
  stroke: rgba(157, 138, 242, 0.55);
}

.story__pill--reject {
  fill: rgba(192, 80, 80, 0.10);
  stroke: rgba(192, 80, 80, 0.45);
}

.story__pill-text {
  fill: rgba(255, 255, 255, 0.92);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
}

.story__pill-text--reject {
  fill: rgba(255, 255, 255, 0.78);
}

.story__diff-line {
  fill: rgba(139, 135, 168, 0.18);
}

.story__diff-line--teal {
  fill: rgba(72, 203, 185, 0.25);
}

.story__code-line {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  fill: rgba(255, 255, 255, 0.72);
}

.story__code-line--del {
  fill: rgba(220, 90, 90, 0.92);
}

.story__code-line--add {
  fill: rgba(72, 203, 185, 0.95);
}

.story__browser {
  stroke: rgba(72, 203, 185, 0.22);
}

.story__browser-bar {
  fill: rgba(8, 8, 14, 0.85);
  stroke: rgba(157, 138, 242, 0.18);
  stroke-width: 1;
}

.story__browser-dot--r { fill: rgba(220, 90, 90, 0.85); }
.story__browser-dot--y { fill: rgba(236, 178, 46, 0.85); }
.story__browser-dot--g { fill: rgba(72, 203, 185, 0.85); }

.story__browser-url {
  fill: rgba(139, 135, 168, 0.95);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.story__login-title--lg {
  font-size: 15px;
}

.story__login-card {
  fill: rgba(157, 138, 242, 0.08);
  stroke: rgba(157, 138, 242, 0.25);
  stroke-width: 1;
}

.story__login-title {
  fill: rgba(255, 255, 255, 0.9);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 650;
}

.story__login-field {
  fill: rgba(139, 135, 168, 0.18);
}

.story__login-btn {
  fill: rgba(72, 203, 185, 0.25);
}

.story__browser-cursor {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.story__browser-cursor-shape {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(8, 8, 14, 0.85);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.story__tag--gated {
  fill: rgba(72, 203, 185, 0.16);
  stroke: rgba(72, 203, 185, 0.5);
  stroke-width: 1;
}

.story__tag-text {
  fill: rgba(72, 203, 185, 0.95);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.story__check-ring {
  fill: rgba(72, 203, 185, 0.12);
  stroke: rgba(72, 203, 185, 0.85);
  stroke-width: 1.2;
}

.story__check-mark {
  fill: none;
  stroke: rgba(72, 203, 185, 0.95);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story__action-ring {
  fill: rgba(157, 138, 242, 0.12);
  stroke: rgba(157, 138, 242, 0.85);
  stroke-width: 1.2;
}

.story__action-arrow {
  fill: rgba(255, 255, 255, 0.95);
}

.story__reject-ring {
  fill: rgba(192, 80, 80, 0.10);
  stroke: rgba(192, 80, 80, 0.8);
  stroke-width: 1.2;
}

.story__reject-x {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
  stroke-linecap: round;
}

.story__shield-shape {
  fill: rgba(72, 203, 185, 0.06);
  stroke: rgba(72, 203, 185, 0.65);
  stroke-width: 1.2;
}

.story__shield-check {
  fill: none;
  stroke: rgba(72, 203, 185, 0.9);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story__path-corridor-in,
.story__path-corridor-return {
  fill: none;
  stroke: url(#story-line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0;
  pointer-events: none;
}

.story__path {
  fill: none;
  stroke: url(#story-line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0;
}

.story__path-agent {
  fill: none;
  stroke: url(#story-line-vertical);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 4 12;
  opacity: 0;
  pointer-events: none;
}

.story__path-agent-return {
  fill: none;
  stroke: url(#story-line-vertical);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 4 12;
  opacity: 0;
  pointer-events: none;
}

.story__path-review-return {
  fill: none;
  stroke: url(#story-line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0;
  pointer-events: none;
}

.story__path-github {
  fill: none;
  stroke: rgba(72, 203, 185, 0.92);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0;
}

.story__path-right-lane {
  fill: none;
  stroke: url(#story-line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0;
  pointer-events: none;
}

.story__path-review-thread {
  fill: none;
  stroke: url(#story-line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0;
  pointer-events: none;
}

.story__path-return {
  fill: none;
  stroke: url(#story-line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0;
  pointer-events: none;
}

.story__path-preview-in,
.story__path-preview-out {
  fill: none;
  stroke: rgba(72, 203, 185, 0.7);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  opacity: 0;
}

.story__pulse {
  fill: var(--teal);
  opacity: 0;
  filter: none;
  pointer-events: none;
}

.story__pulse-github {
  fill: var(--teal);
  opacity: 0;
  filter: none;
  pointer-events: none;
}

.story__pulse-preview {
  fill: rgba(72, 203, 185, 0.95);
  opacity: 0;
  filter: none;
  pointer-events: none;
}

.story__code-msg {
  opacity: 0;
  transform-origin: center;
}

/* interactive story: plays once, pauses on Validate */
.story__msg,
.story__authz-check,
.story--preview,
.story--agent,
.story--code-review,
.story__path,
.story__path-agent,
.story__path-agent-return,
.story__path-review-return,
.story__path-corridor-in,
.story__path-corridor-return,
.story__path-github,
.story__path-review-thread,
.story__path-return,
.story__tag--gated,
.story__tag-text,
.story__bunny-hit,
.story__bunny-rag {
  opacity: 0;
  transform-origin: center;
}

.story-diagram.is-playing .story__msg--1 { animation: story-in 0.6s ease forwards; animation-delay: 0.2s; }
.story-diagram.is-playing .story__msg--2 { animation: story-in 0.6s ease forwards; animation-delay: 1.0s; }
.story-diagram.is-playing .story__msg--3 { animation: story-in 0.6s ease forwards; animation-delay: 1.8s; }
.story-diagram.is-playing .story--preview {
  animation:
    story-in 0.7s ease forwards,
    story-out 0.6s ease forwards;
  animation-delay: 2.5s, 7.6s;
}
.story-diagram.is-playing .story__path-preview-in {
  animation:
    story-path-preview-in-sync 1.2s linear forwards,
    story-preview-off 0.35s ease forwards;
  animation-delay: 2.55s, 7.4s;
}
.story-diagram.is-playing .story__path-preview-out {
  animation:
    story-path-preview-out-sync 1.2s linear forwards,
    story-preview-off 0.35s ease forwards;
  animation-delay: 2.55s, 7.4s;
}
.story-diagram.is-playing .story__pulse-preview {
  animation:
    story-preview-pulse 1.2s linear forwards,
    story-preview-off 0.35s ease forwards;
  animation-delay: 2.55s, 7.4s;
  filter: url(#story-glow);
}
.story-diagram.is-playing .story__browser-cursor {
  animation: story-browser-cursor-roam 4.8s ease-in-out forwards;
  animation-delay: 2.7s;
  visibility: visible;
}
.story-diagram.is-playing .story__msg--4 { animation: story-in 0.6s ease forwards; animation-delay: 3.6s; }
.story-diagram.is-playing .story__msg--5 { animation: story-in 0.6s ease forwards; animation-delay: 5.0s; }
.story-diagram.is-playing .story__msg--6 { animation: story-in 0.6s ease forwards; animation-delay: 7.4s; }
.story-diagram.is-playing .story__msg--7 { animation: story-in 0.6s ease forwards; animation-delay: 8.5s; }
.story-diagram.is-playing .story__authz-check { animation: story-in 0.7s ease forwards; animation-delay: 8.3s; }
.story-diagram.is-playing .story--agent { animation: story-in 0.7s ease forwards; animation-delay: 8.3s; }
.story-diagram.is-playing .story--code-review { animation: story-in 0.7s ease forwards; animation-delay: 10.64s; }
.story-diagram.is-playing .story__msg--8 { animation: story-in 0.6s ease forwards; animation-delay: 19.9s; }
.story-diagram.is-playing .story__msg--9 { animation: story-in 0.6s ease forwards; animation-delay: 20.5s; }
.story-diagram.is-playing .story__msg--9b { animation: story-in 0.6s ease forwards; animation-delay: 20.5s; }
.story-diagram.is-playing .story__msg--10 { opacity: 0; }
.story-diagram.is-playing .story__path-corridor-in {
  animation:
    story-path-corridor-in-sync 13.5s linear forwards,
    story-path-corridor-in-hide 0.01s linear forwards;
  animation-delay: 9.3s, 22.8s;
}
.story-diagram.is-playing .story__path { animation: story-path-review-out-sync 13.5s linear forwards; animation-delay: 9.3s; }
.story-diagram.is-playing .story__path-review-return { animation: story-path-review-return-sync 13.5s linear forwards; animation-delay: 9.3s; }
.story-diagram.is-playing .story__path-agent { animation: story-path-agent-out-sync 13.5s linear forwards; animation-delay: 9.3s; }
.story-diagram.is-playing .story__path-agent-return { animation: story-path-agent-return-sync 13.5s linear forwards; animation-delay: 9.3s; }
.story-diagram.is-playing .story__pulse {
  animation: story-pulse 13.5s linear forwards;
  animation-delay: 9.3s;
  filter: url(#story-glow);
}
.story-diagram.is-playing .story__path-return { animation: story-path-return-sync 13.5s linear forwards; animation-delay: 9.3s; }
.story-diagram.is-playing .story__path-corridor-return { animation: story-path-corridor-return-sync 13.5s linear forwards; animation-delay: 9.3s; }
.story-diagram.is-playing .story__path-review-thread { animation: story-path-review-thread 10s linear forwards; animation-delay: 9.3s; }
.story-diagram.is-playing .story__path-github,
.story-diagram.is-playing .story__pulse-github { opacity: 0; }

.story-diagram.is-playing .story__code-msg--1 { animation: story-in 0.55s ease forwards; animation-delay: 12.15s; }
.story-diagram.is-playing .story__code-msg--2 { animation: story-in 0.55s ease forwards; animation-delay: 16.03s; }
.story-diagram.is-playing .story__code-msg--actions { animation: story-in 0.55s ease forwards; animation-delay: 19.9s; }
.story-diagram.is-playing .story__code-msg--done { animation: story-in 0.55s ease forwards; animation-delay: 19.9s; }

.story-diagram.is-playing .story__bunny-hit--preview { animation: story-bunny-hit 0.75s ease forwards; animation-delay: 3.08s; }
.story-diagram.is-playing .story__bunny-hit--main-in { animation: story-bunny-hit 0.75s ease forwards; animation-delay: 10.49s; }
.story-diagram.is-playing .story__bunny-hit--main-return-right { animation: story-bunny-hit 0.75s ease forwards; animation-delay: 13.51s; }
.story-diagram.is-playing .story__bunny-hit--agent-return-1 { animation: story-bunny-hit 0.75s ease forwards; animation-delay: 14.36s; }
.story-diagram.is-playing .story__bunny-hit--return-right-2 { animation: story-bunny-hit 0.75s ease forwards; animation-delay: 17.39s; }
.story-diagram.is-playing .story__bunny-hit--agent-return-2 { animation: story-bunny-hit 0.75s ease forwards; animation-delay: 18.24s; }
.story-diagram.is-playing .story__bunny-hit--return-right-final { animation: story-bunny-hit 0.75s ease forwards; animation-delay: 20.87s; }
.story-diagram.is-playing .story__bunny-hit--main-return-left { animation: story-bunny-hit 0.75s ease forwards; animation-delay: 21.31s; }

.story-diagram.is-ready .story__msg--9 {
  opacity: 1;
}

.story-diagram.is-ready .story__msg--1,
.story-diagram.is-ready .story__msg--2,
.story-diagram.is-ready .story__msg--3,
.story-diagram.is-ready .story__msg--4,
.story-diagram.is-ready .story--preview,
.story-diagram.is-ready .story__msg--5,
.story-diagram.is-ready .story__msg--6,
.story-diagram.is-ready .story__msg--7,
.story-diagram.is-ready .story__msg--8,
.story-diagram.is-ready .story__msg--9,
.story-diagram.is-ready .story__msg--9b,
.story-diagram.is-ready .story__authz-check,
.story-diagram.is-ready .story--agent,
.story-diagram.is-ready .story--code-review {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.story-diagram.is-ready .story__code-msg {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.story-diagram.is-ready .story__path,
.story-diagram.is-ready .story__path-agent,
.story-diagram.is-ready .story__path-agent-return,
.story-diagram.is-ready .story__path-review-return,
.story-diagram.is-ready .story__path-corridor-in,
.story-diagram.is-ready .story__path-corridor-return,
.story-diagram.is-ready .story__pulse,
.story-diagram.is-ready .story__path-review-thread,
.story-diagram.is-ready .story__path-return,
.story-diagram.is-ready .story__path-preview-in,
.story-diagram.is-ready .story__path-preview-out,
.story-diagram.is-ready .story__pulse-preview {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.story-diagram.is-ready .story__pulse,
.story-diagram.is-ready .story__pulse-preview {
  opacity: 0 !important;
}

.story-diagram.is-ready .story__path-review-thread {
  stroke-dashoffset: -425;
}

.story-diagram.is-ready .story__path-return {
  stroke-dashoffset: -321;
}

.story-diagram.is-ready .story__path-corridor-in {
  opacity: 0 !important;
}

.story-diagram.is-ready .story__path-corridor-return {
  stroke-dashoffset: -275;
}

.story-diagram.is-ready .story__path {
  stroke-dashoffset: -311;
}

.story-diagram.is-ready .story__path-review-return {
  stroke-dashoffset: -311;
  opacity: 0 !important;
}

.story-diagram.is-ready .story__path-agent-return {
  stroke-dashoffset: -111;
}

.story-diagram.is-ready .story__path-agent {
  stroke-dashoffset: -65;
}

.story-diagram.is-ready .story__path-github,
.story-diagram.is-ready .story__pulse-github {
  opacity: 0 !important;
}

.story-diagram.is-ready .story--preview {
  opacity: 0 !important;
}

.story-diagram.is-ready .story__browser-cursor {
  opacity: 0 !important;
  animation: none !important;
}

.story-diagram.is-ready .story__path-preview-in,
.story-diagram.is-ready .story__path-preview-out {
  opacity: 0 !important;
}

.story-diagram.is-ready .story__bunny-hit {
  animation: none !important;
  opacity: 0 !important;
}

.story-diagram.is-ready .story__msg--10 {
  opacity: 0 !important;
}

.story__validate {
  cursor: pointer;
}

.story__validate-tooltip {
  opacity: 0;
  pointer-events: none;
}

.story__tooltip-box {
  fill: rgb(10, 14, 18);
  stroke: rgba(72, 203, 185, 0.95);
  stroke-width: 1.5;
}

.story__tooltip-tail {
  fill: rgb(10, 14, 18);
  stroke: rgba(72, 203, 185, 0.95);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.story__tooltip-text {
  fill: rgb(255, 255, 255);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
}

.story-diagram.is-playing .story__validate-tooltip {
  animation: story-in 0.45s ease forwards;
  animation-delay: 22.8s;
}

.story-diagram.is-playing .story__tooltip-box,
.story-diagram.is-playing .story__tooltip-tail {
  animation: story-tooltip-stroke-glow 1.5s ease-in-out infinite;
  animation-delay: 23.25s;
}

.story-diagram.is-ready .story__validate-tooltip {
  opacity: 1 !important;
  transform: none !important;
}

.story-diagram.is-ready .story__tooltip-box,
.story-diagram.is-ready .story__tooltip-tail {
  animation: story-tooltip-stroke-glow 1.5s ease-in-out infinite;
}

@keyframes story-tooltip-stroke-glow {
  0%, 100% { stroke: rgba(72, 203, 185, 0.75); }
  50% { stroke: rgba(72, 203, 185, 1); }
}

.story-diagram.is-validated .story__validate-tooltip {
  opacity: 0 !important;
  animation: none !important;
}

.story-diagram.is-ready .story__pill--validate {
  animation: story-cta-pulse 1.2s ease-in-out infinite;
}

.story-diagram.is-ready .story__text--validate {
  filter: drop-shadow(0 0 10px rgba(157, 138, 242, 0.25));
}

.story-diagram.is-ready .story__pill-text--validate {
  filter: drop-shadow(0 0 10px rgba(157, 138, 242, 0.22));
}

.story-diagram.is-validated .story__bunny-hit--validate {
  animation: story-bunny-hit 0.75s ease forwards;
  animation-delay: 3.05s;
}

.story-diagram.is-validated .story__tag--gated,
.story-diagram.is-validated .story__tag-text {
  opacity: 0;
  animation: story-in 0.6s ease forwards;
  animation-delay: 4s;
}

.story-diagram.is-validated .story__msg--1,
.story-diagram.is-validated .story__msg--2,
.story-diagram.is-validated .story__msg--3,
.story-diagram.is-validated .story__msg--4,
.story-diagram.is-validated .story__msg--5,
.story-diagram.is-validated .story__msg--6,
.story-diagram.is-validated .story__msg--7,
.story-diagram.is-validated .story__msg--8,
.story-diagram.is-validated .story__msg--9,
.story-diagram.is-validated .story__msg--9b,
.story-diagram.is-validated .story--preview,
.story-diagram.is-validated .story__authz-check,
.story-diagram.is-validated .story--agent,
.story-diagram.is-validated .story--code-review,
.story-diagram.is-validated .story__code-msg,
.story-diagram.is-validated .story__path,
.story-diagram.is-validated .story__path-agent,
.story-diagram.is-validated .story__path-agent-return,
.story-diagram.is-validated .story__path-review-return,
.story-diagram.is-validated .story__path-corridor-in,
.story-diagram.is-validated .story__path-corridor-return,
.story-diagram.is-validated .story__pulse,
.story-diagram.is-validated .story__path-review-thread,
.story-diagram.is-validated .story__path-return,
.story-diagram.is-validated .story__path-preview-in,
.story-diagram.is-validated .story__path-preview-out,
.story-diagram.is-validated .story__pulse-preview {
  opacity: 1 !important;
  transform: none !important;
}

.story-diagram.is-validated .story__pulse,
.story-diagram.is-validated .story__pulse-preview {
  opacity: 0 !important;
}

.story-diagram.is-validated .story__path-review-thread {
  stroke-dashoffset: -425;
}

.story-diagram.is-validated .story__path-return {
  stroke-dashoffset: -321;
}

.story-diagram.is-validated .story__path-corridor-in {
  opacity: 0 !important;
}

.story-diagram.is-validated .story__path-corridor-return {
  stroke-dashoffset: -275;
}

.story-diagram.is-validated .story__path {
  stroke-dashoffset: -311;
}

.story-diagram.is-validated .story__path-agent {
  stroke-dashoffset: -65;
}

.story-diagram.is-validated .story__path-agent-return {
  stroke-dashoffset: -111;
}

.story-diagram.is-validated .story__path-review-return {
  opacity: 0 !important;
}

.story-diagram.is-validated .story__path-github {
  opacity: 1;
  animation: story-push-github 4s linear forwards;
}

.story-diagram.is-validated .story__pulse-github {
  opacity: 1;
  filter: url(#story-glow);
  animation: story-pulse-push-github 4s linear forwards;
}

.story-diagram.is-validated .story--preview {
  opacity: 0 !important;
}

.story-diagram.is-validated .story__path-preview-in,
.story-diagram.is-validated .story__path-preview-out {
  opacity: 0 !important;
}

.story-diagram.is-validated .story__msg--10 {
  opacity: 0;
  animation: story-in 0.6s ease forwards;
  animation-delay: 4s;
}

.story-diagram.is-validated .story__bunny-rag {
  animation: story-in 0.6s ease forwards;
  animation-delay: 4s;
}

@keyframes story-bunny-hit {
  0% { opacity: 0; transform: scale(0.88); }
  6% { opacity: 1; transform: scale(1); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.96); }
}

@keyframes story-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes story-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes story-path-preview-in-sync {
  0% { opacity: 1; stroke-dashoffset: 0; }
  56.7% { opacity: 1; stroke-dashoffset: -181; }
  100% { opacity: 1; stroke-dashoffset: -181; }
}

@keyframes story-path-preview-out-sync {
  0%, 56.6% { opacity: 0; stroke-dashoffset: 0; }
  56.7% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: -138; }
}

@keyframes story-preview-on {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes story-preview-off {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes story-preview-pulse {
  from { opacity: 0; offset-distance: 0%; }
  10% { opacity: 1; }
  to { opacity: 1; offset-distance: 100%; }
}

@keyframes story-browser-cursor-roam {
  0% { opacity: 0; transform: translate(696px, 136px); }
  4% { opacity: 1; transform: translate(696px, 136px); }
  22% { opacity: 1; transform: translate(812px, 152px); }
  44% { opacity: 1; transform: translate(838px, 212px); }
  66% { opacity: 1; transform: translate(702px, 228px); }
  88% { opacity: 1; transform: translate(768px, 182px); }
  96% { opacity: 1; transform: translate(768px, 182px); }
  100% { opacity: 0; transform: translate(768px, 182px); }
}

@keyframes story-path-corridor-in-sync {
  0% { opacity: 1; stroke-dashoffset: 0; }
  9.9% { opacity: 1; stroke-dashoffset: -275; }
  100% { opacity: 1; stroke-dashoffset: -275; }
}

@keyframes story-path-review-out-sync {
  0%, 9.9% { opacity: 0; stroke-dashoffset: 0; }
  9.9% { opacity: 1; stroke-dashoffset: 0; }
  21.1% { opacity: 1; stroke-dashoffset: -311; }
  38.6% { opacity: 1; stroke-dashoffset: 0; }
  49.8% { opacity: 1; stroke-dashoffset: -311; }
  67.4% { opacity: 1; stroke-dashoffset: 0; }
  78.5% { opacity: 1; stroke-dashoffset: -311; }
  100% { opacity: 1; stroke-dashoffset: -311; }
}

@keyframes story-path-review-return-sync {
  0%, 21.1% { opacity: 0; stroke-dashoffset: 0; }
  21.1% { opacity: 1; stroke-dashoffset: 0; }
  32.3% { opacity: 1; stroke-dashoffset: -311; }
  49.7% { opacity: 0; stroke-dashoffset: -311; }
  49.8% { opacity: 1; stroke-dashoffset: 0; }
  61% { opacity: 1; stroke-dashoffset: -311; }
  100% { opacity: 0; stroke-dashoffset: -311; }
}

@keyframes story-path-agent-out-sync {
  0%, 32.3% { opacity: 0; stroke-dashoffset: 0; }
  32.3% { opacity: 1; stroke-dashoffset: 0; }
  34.6% { opacity: 1; stroke-dashoffset: -65; }
  60.9% { opacity: 0; stroke-dashoffset: -65; }
  61% { opacity: 1; stroke-dashoffset: 0; }
  63.4% { opacity: 1; stroke-dashoffset: -65; }
  100% { opacity: 1; stroke-dashoffset: -65; }
}

@keyframes story-path-agent-return-sync {
  0%, 34.6% { opacity: 0; stroke-dashoffset: 0; }
  34.6% { opacity: 1; stroke-dashoffset: 0; }
  38.6% { opacity: 1; stroke-dashoffset: -111; }
  63.3% { opacity: 0; stroke-dashoffset: -111; }
  63.4% { opacity: 1; stroke-dashoffset: 0; }
  67.4% { opacity: 1; stroke-dashoffset: -111; }
  100% { opacity: 1; stroke-dashoffset: -111; }
}

@keyframes story-path-return-sync {
  0%, 78.5% { opacity: 0; stroke-dashoffset: 0; }
  78.5% { opacity: 1; stroke-dashoffset: 0; }
  90.1% { opacity: 1; stroke-dashoffset: -321; }
  100% { opacity: 1; stroke-dashoffset: -321; }
}

@keyframes story-path-corridor-return-sync {
  0%, 90.1% { opacity: 0; stroke-dashoffset: 0; }
  90.1% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: -275; }
}

@keyframes story-path-corridor-in {
  0% { opacity: 0; stroke-dashoffset: 0; }
  8% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: -275; }
}

@keyframes story-path-corridor-in-hide {
  to { opacity: 0; }
}

@keyframes story-path-corridor-return {
  0% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: -275; }
}

@keyframes story-path-review {
  0% { opacity: 0; stroke-dashoffset: 0; }
  6% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: -311; }
}

@keyframes story-path-agent {
  0% { opacity: 0; stroke-dashoffset: 0; }
  8% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: -65; }
}

@keyframes story-path-right-lane {
  0%, 48% { opacity: 0; stroke-dashoffset: 38; }
  52% { opacity: 1; stroke-dashoffset: 38; }
  58% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes story-path-review-thread {
  0%, 64% { opacity: 0; stroke-dashoffset: 0; }
  65% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: -425; }
}

@keyframes story-path-return {
  0% { opacity: 0; stroke-dashoffset: 0; }
  12% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: -321; }
}

@keyframes story-pulse {
  0% { opacity: 0; offset-distance: 0%; }
  2% { opacity: 1; offset-distance: 0%; }
  98% { opacity: 1; offset-distance: 100%; }
  100% { opacity: 0; offset-distance: 100%; }
}

@keyframes story-cta-pulse {
  0%, 100% { transform: translateY(0); stroke-opacity: 0.6; }
  50% { transform: translateY(-1px); stroke-opacity: 1; }
}

@keyframes story-push-github {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -477; }
}

@keyframes story-pulse-push-github {
  from { opacity: 1; offset-distance: 0%; }
  to { opacity: 1; offset-distance: 100%; }
}

.story__pulse {
  /* thread -> bunny -> bunny<->code review / agent bounces -> return to thread */
  offset-path: path("M 274 328 L 330 328 L 330 201 L 422 201 M 514 201 L 620 201 L 620 56 L 680 56 M 680 56 L 620 56 L 620 201 L 514 201 M 468 155 L 468 90 M 468 90 L 468 201 M 514 201 L 620 201 L 620 56 L 680 56 M 680 56 L 620 56 L 620 201 L 514 201 M 468 155 L 468 90 M 468 90 L 468 201 M 514 201 L 620 201 L 620 56 L 680 56 M 680 264 L 540 264 L 540 201 L 514 201 L 422 201 L 330 201 L 330 328 L 274 328");
  offset-rotate: 0deg;
}

.story__pulse-github {
  offset-path: path("M 274 402 L 274 416 L 350 416 L 350 232 L 422 232 M 468 247 L 468 360");
  offset-rotate: 0deg;
}

.story__pulse-preview {
  offset-path: path("M 274 168 L 330 168 L 330 201 L 422 201 L 468 201 L 514 201 L 560 201");
  offset-rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .story-diagram .story__msg,
  .story-diagram .story__authz-check,
  .story-diagram .story--agent,
  .story-diagram .story--code-review,
  .story-diagram .story__path,
  .story-diagram .story__path-agent,
  .story-diagram .story__path-agent-return,
  .story-diagram .story__path-review-return,
  .story-diagram .story__path-corridor-in,
  .story-diagram .story__path-corridor-return,
  .story-diagram .story__path-github,
  .story-diagram .story__path-review-thread,
  .story-diagram .story__path-return,
  .story-diagram .story__pulse,
  .story-diagram .story__pulse-github,
  .story-diagram .story__path-preview-in,
  .story-diagram .story__path-preview-out,
  .story-diagram .story__pulse-preview,
  .story-diagram .story__browser-cursor,
  .story-diagram .story__bunny-hit,
  .story-diagram .story__bunny-rag,
  .story-diagram .story__tag--gated,
  .story-diagram .story__tag-text {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.hero__visual-stack {
  display: none;
}

.hero__visual-version {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0;
}

.hero__visual-version--new {
  color: var(--purple);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
  width: 100%;
  max-width: 960px;
  text-align: center;
}

.hero__visual-version--v9 {
  color: var(--teal);
}

/* Hide earlier stacked proposals — still available in archive */
.hero__visual-stack > .compare-diagram:not(.compare-diagram--v9),
.hero__visual-stack > .hero__visual-version:not(.hero__visual-version--v9) {
  display: none;
}

.hero__visual-archive {
  margin-top: 1.5rem;
}

.hero__visual-archive > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  text-align: center;
}

.hero__visual-archive > summary::-webkit-details-marker {
  display: none;
}

.hero__visual-archive[open] > summary {
  margin-bottom: 1.25rem;
}

.hero__visual-archive .compare-diagram,
.hero__visual-archive .hero__visual-version {
  display: block !important;
}

/* v9 — governed gateway (user sketch) */
.compare-diagram--v9 .compare-diagram__svg {
  max-width: 440px;
}

.compare-diagram--v9 .compare-diagram__panel {
  padding: 1.25rem 0.75rem 0.85rem;
}

.compare-node--ide {
  fill: rgba(139, 135, 168, 0.12);
  stroke: rgba(139, 135, 168, 0.45);
  stroke-width: 1;
}

.compare-node--ide.compare-node--connected {
  stroke: rgba(72, 203, 185, 0.5);
}

.compare-v9-zone {
  fill: rgba(192, 128, 64, 0.04);
  stroke: rgba(192, 128, 64, 0.45);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.compare-v9-zone--good {
  fill: rgba(72, 203, 185, 0.05);
  stroke: rgba(72, 203, 185, 0.45);
}

.compare-v9-tool {
  fill: rgba(8, 8, 14, 0.45);
  stroke: rgba(192, 80, 80, 0.3);
  stroke-width: 1;
}

.compare-v9-tool--synced {
  stroke: rgba(72, 203, 185, 0.35);
  fill: rgba(72, 203, 185, 0.06);
}

.compare-v9-tool--hosted {
  stroke-dasharray: 4 3;
}

.compare-v9-tool--managed {
  stroke: rgba(72, 203, 185, 0.55);
  fill: rgba(72, 203, 185, 0.09);
}

.compare-v9-tool--outside {
  stroke: rgba(192, 80, 80, 0.4);
  stroke-dasharray: 4 3;
  fill: rgba(8, 8, 14, 0.3);
  opacity: 0.85;
}

.compare-v9-tool-label--outside {
  fill: rgba(192, 128, 128, 0.75);
  font-size: 5.5px;
}

.compare-v9-tool-label {
  fill: rgba(255, 255, 255, 0.88);
}

.compare-v9-bunny {
  fill: rgba(72, 203, 185, 0.12);
  stroke: rgba(72, 203, 185, 0.6);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 10px rgba(72, 203, 185, 0.3));
}

.compare-v9-bunny--gateway {
  filter: drop-shadow(0 0 14px rgba(72, 203, 185, 0.35));
}

.compare-node__text--bunny-gateway {
  font-size: 7px;
  font-weight: 700;
}

.compare-v9-ssh--gateway {
  font-size: 5.5px;
}

.compare-v9-bus--gateway {
  stroke: rgba(72, 203, 185, 0.5);
  stroke-width: 2;
  fill: none;
}

.compare-v9-line {
  stroke-width: 1.4;
}

.compare-v9-fan {
  stroke: rgba(157, 138, 242, 0.45);
  stroke-width: 1.1;
  fill: none;
}

.compare-v9-fan--dim {
  stroke: rgba(192, 80, 80, 0.25);
  stroke-dasharray: 3 4;
}

.compare-v9-impulse {
  fill: var(--purple);
}

.compare-v9-ssh {
  fill: rgba(72, 203, 185, 0.85);
  font-family: ui-monospace, monospace;
  font-size: 5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.compare-v9-line--bi {
  stroke-width: 2;
}

.compare-v9-bus {
  stroke: rgba(72, 203, 185, 0.35);
  stroke-width: 1;
  fill: none;
}

.compare-v9-spoke {
  stroke-width: 1.1;
  opacity: 0.45;
}

.compare-v9-discuss--a {
  fill: #e09050;
  stroke: rgba(224, 144, 80, 0.9);
  stroke-width: 0.5;
}

.compare-v9-discuss--b {
  fill: #b89aff;
  stroke: rgba(157, 138, 242, 0.9);
  stroke-width: 0.5;
}

.compare-v9-line--discuss {
  stroke-width: 2.5;
  opacity: 1;
}

.compare-v9-msgs,
.compare-v9-conv {
  pointer-events: none;
}

.compare-v9-conv .compare-msg-bubble,
.compare-v9-msgs .compare-msg-bubble {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.compare-node__text--chat-foot {
  font-size: 6.5px;
  opacity: 0.55;
}

.compare-v9-conv-msg--a .compare-msg-bubble {
  fill: rgba(157, 138, 242, 0.18);
  stroke: rgba(157, 138, 242, 0.55);
}

.compare-v9-conv-msg--b .compare-msg-bubble {
  fill: rgba(224, 144, 80, 0.15);
  stroke: rgba(224, 144, 80, 0.5);
}

.compare-msg-bubble--cmd {
  fill: rgba(72, 203, 185, 0.16);
  stroke: rgba(72, 203, 185, 0.6);
}

.compare-msg-text--cmd {
  fill: rgba(72, 203, 185, 0.95);
  font-size: 6.5px;
}

.compare-diagram--v9 .compare-v9-conv-msg--a {
  animation: v9-conv-1 6s linear infinite;
}

.compare-diagram--v9 .compare-v9-conv-msg--b {
  animation: v9-conv-2 6s linear infinite;
}

.compare-diagram--v9 .compare-v9-conv-msg--cmd {
  animation: v9-conv-3 6s linear infinite;
}

@keyframes v9-conv-1 {
  0%, 14% { opacity: 0; }
  15%, 84% { opacity: 1; }
  85%, 100% { opacity: 0; }
}

@keyframes v9-conv-2 {
  0%, 38% { opacity: 0; }
  39%, 84% { opacity: 1; }
  85%, 100% { opacity: 0; }
}

@keyframes v9-conv-3 {
  0%, 52% { opacity: 0; }
  53%, 84% { opacity: 1; }
  85%, 100% { opacity: 0; }
}

.compare-msg-text--v9 {
  font-size: 7.5px;
  font-weight: 700;
}

.compare-v9-msg-tail--a {
  fill: rgba(157, 138, 242, 0.18);
  stroke: rgba(157, 138, 242, 0.55);
  stroke-width: 0.6;
}

.compare-v9-msg-tail--b {
  fill: rgba(72, 203, 185, 0.15);
  stroke: rgba(72, 203, 185, 0.5);
  stroke-width: 0.6;
}

.compare-v9-pulse {
  fill: var(--teal);
}

.compare-v9-pulse--back {
  fill: var(--purple);
  opacity: 0.85;
}

.compare-v9-note {
  font-family: var(--font);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.compare-v9-note--broken {
  fill: #c08080;
}

.compare-v9-note--broken-sub {
  fill: rgba(192, 128, 128, 0.65);
  font-size: 6px;
  font-weight: 500;
}

.compare-v9-note--valid {
  fill: var(--teal);
}

.compare-v9-note--valid-sub {
  fill: rgba(72, 203, 185, 0.75);
  font-size: 6px;
  font-weight: 500;
}

/* v8 — same moment micro-story */
.compare-diagram--v8 .compare-diagram__svg {
  max-width: 360px;
}

.compare-diagram--v8 .compare-diagram__panel {
  padding: 1.25rem 0.75rem 0.85rem;
}

.compare-v8-ssh-label {
  fill: rgba(192, 128, 80, 0.9);
  font-family: ui-monospace, monospace;
  font-size: 5.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.compare-v8-ssh-label--good {
  fill: rgba(72, 203, 185, 0.9);
}

.compare-v8-line {
  stroke-width: 1.5;
}

.compare-v8-path {
  fill: none;
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
}

.compare-v8-path--ssh {
  stroke: rgba(192, 128, 80, 0.5);
}

.compare-v8-path--chat {
  stroke: rgba(157, 138, 242, 0.45);
}

.compare-v8-github--broken {
  fill: rgba(192, 80, 80, 0.08);
  stroke: rgba(192, 80, 80, 0.55);
  stroke-width: 1.5;
}

.compare-v8-github--synced {
  fill: rgba(72, 203, 185, 0.1);
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 1.5;
}

.compare-v8-clash line {
  stroke: #c05050;
  stroke-width: 2;
  stroke-linecap: round;
}

.compare-v8-clash-ring {
  fill: none;
  stroke: rgba(192, 80, 80, 0.65);
  stroke-width: 1.5;
}

.compare-v8-impulse--ssh {
  fill: #c08050;
}

.compare-v8-impulse--deploy {
  fill: var(--purple);
}

.compare-v8-impulse--out {
  fill: var(--teal);
}

.compare-v8-vm-halo {
  fill: rgba(72, 203, 185, 0.06);
  stroke: rgba(72, 203, 185, 0.28);
  stroke-width: 1.2;
}

.compare-v8-vm {
  fill: rgba(72, 203, 185, 0.1);
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 12px rgba(72, 203, 185, 0.35));
}

.compare-v8-vm-screen {
  fill: rgba(8, 8, 14, 0.55);
  stroke: rgba(72, 203, 185, 0.35);
  stroke-width: 1;
}

.compare-v8-ssh {
  fill: rgba(72, 203, 185, 0.9);
  font-family: ui-monospace, monospace;
  font-size: 6px;
  font-weight: 600;
}

.compare-v8-line--in {
  stroke-width: 1.6;
}

.compare-v8-line--out {
  stroke-width: 2;
}

.compare-v8-ripple {
  fill: none;
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 1.2;
}

.compare-v8-pool {
  fill: rgba(72, 203, 185, 0.08);
  stroke: rgba(72, 203, 185, 0.5);
  stroke-width: 1.5;
}

.compare-v8-pool-divider {
  stroke: rgba(72, 203, 185, 0.2);
  stroke-width: 0.8;
}

.compare-v8-tool-label {
  fill: rgba(255, 255, 255, 0.9);
}

.compare-v8-sync {
  fill: var(--teal);
  stroke: rgba(72, 203, 185, 0.45);
  stroke-width: 0.5;
}

/* v7 — shared VM hub */
.compare-diagram--v7 .compare-diagram__svg {
  max-width: 380px;
}

.compare-diagram--v7 .compare-diagram__panel {
  padding: 1.25rem 0.65rem 1rem;
}

.compare-v7-line {
  stroke-width: 1.6;
}

.compare-v7-talk-dot {
  fill: var(--purple);
}

.compare-v7-tools-zone {
  fill: rgba(192, 80, 80, 0.03);
  stroke: rgba(192, 80, 80, 0.18);
  stroke-width: 1;
}

.compare-v7-silo {
  fill: rgba(8, 8, 14, 0.35);
  stroke: rgba(192, 80, 80, 0.35);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.compare-v7-silo--warn {
  stroke: rgba(192, 80, 80, 0.6);
}

.compare-v7-chaos {
  stroke: rgba(192, 80, 80, 0.4);
  stroke-width: 1.1;
  stroke-dasharray: 3 4;
  fill: none;
}

.compare-v7-chaos--cross {
  stroke: rgba(192, 80, 80, 0.22);
  stroke-dasharray: 2 5;
}

.compare-v7-ctx--a { fill: #c05050; }
.compare-v7-ctx--b { fill: #c09050; }
.compare-v7-ctx--c { fill: #9050c0; }
.compare-v7-ctx--d { fill: #50a0c0; }
.compare-v7-ctx--e { fill: #48cbb9; opacity: 0.5; }

.compare-v7-vm-halo {
  fill: rgba(72, 203, 185, 0.06);
  stroke: rgba(72, 203, 185, 0.28);
  stroke-width: 1.2;
  animation: compare-vm-pulse 3.4s ease-in-out infinite;
}

.compare-v7-vm {
  fill: rgba(72, 203, 185, 0.1);
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 14px rgba(72, 203, 185, 0.35));
}

.compare-v7-vm-screen {
  fill: rgba(8, 8, 14, 0.55);
  stroke: rgba(72, 203, 185, 0.35);
  stroke-width: 1;
}

.compare-v7-ssh {
  fill: rgba(72, 203, 185, 0.9);
  font-family: ui-monospace, monospace;
  font-size: 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.compare-v7-line--ssh {
  stroke-width: 1.5;
  opacity: 0.9;
}

.compare-v7-line--chat {
  stroke-width: 2;
}

.compare-v7-line--tool {
  stroke-width: 1.3;
  opacity: 0.75;
}

.compare-v7-tool {
  fill: rgba(72, 203, 185, 0.12);
  stroke: rgba(72, 203, 185, 0.45);
  stroke-width: 1;
}

.compare-v7-tool-label {
  fill: rgba(255, 255, 255, 0.9);
}

.compare-v7-sync {
  fill: var(--teal);
  stroke: rgba(72, 203, 185, 0.45);
  stroke-width: 0.5;
}

.compare-v7-pulse {
  fill: var(--teal);
}

.compare-v7-ripple {
  fill: none;
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 1.2;
}

@keyframes compare-vm-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* v6 — two layers, visual only */
.compare-diagram--v6 .compare-diagram__svg {
  max-width: 360px;
}

.compare-diagram--v6 .compare-diagram__panel {
  padding: 1.25rem 0.75rem 1rem;
}

.compare-v6-layer {
  fill: rgba(139, 135, 168, 0.05);
  stroke: rgba(139, 135, 168, 0.22);
  stroke-width: 1;
}

.compare-v6-layer--exec {
  fill: rgba(192, 80, 80, 0.04);
  stroke: rgba(192, 80, 80, 0.2);
}

.compare-v6-layer--good {
  stroke: rgba(72, 203, 185, 0.32);
}

.compare-v6-layer--exec.compare-v6-layer--good {
  fill: rgba(72, 203, 185, 0.06);
  stroke: rgba(72, 203, 185, 0.28);
}

.compare-v6-line--talk {
  stroke-width: 1.8;
}

.compare-v6-line--down {
  stroke-width: 1.6;
  opacity: 0.85;
}

.compare-v6-talk-dot {
  fill: var(--purple);
}

.compare-v6-trail {
  fill: var(--purple);
}

.compare-v6-void {
  fill: rgba(8, 8, 14, 0.85);
  stroke: none;
}

.compare-v6-cliff {
  stroke: #c05050;
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}

.compare-v6-ghost {
  stroke-linecap: round;
}

.compare-v6-bot {
  fill: rgba(157, 138, 242, 0.2);
  stroke: rgba(157, 138, 242, 0.55);
  stroke-width: 1;
}

.compare-v6-bot--good {
  fill: rgba(72, 203, 185, 0.15);
  stroke: rgba(72, 203, 185, 0.55);
}

.compare-v6-bot-eye {
  stroke: var(--purple);
  stroke-width: 1.1;
  fill: none;
  opacity: 0.8;
}

.compare-v6-chaos {
  stroke: rgba(192, 80, 80, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  fill: none;
}

.compare-v6-chaos--cross {
  stroke: rgba(192, 80, 80, 0.25);
  stroke-dasharray: 2 5;
}

.compare-v6-silo {
  fill: none;
  stroke: rgba(192, 80, 80, 0.35);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.compare-v6-silo--warn {
  stroke: rgba(192, 80, 80, 0.65);
}

.compare-v6-ctx--a { fill: #c05050; }
.compare-v6-ctx--b { fill: #c09050; }
.compare-v6-ctx--c { fill: #9050c0; }
.compare-v6-ctx--d { fill: #50a0c0; }

.compare-v6-crack {
  stroke: #c05050;
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
  opacity: 0.85;
}

.compare-v6-bridge {
  stroke: rgba(72, 203, 185, 0.7);
  stroke-width: 2.5;
  fill: none;
}

.compare-v6-bunny {
  filter: drop-shadow(0 0 12px rgba(72, 203, 185, 0.4));
}

.compare-v6-pool {
  fill: rgba(72, 203, 185, 0.1);
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 1.5;
}

.compare-v6-pool-divider {
  stroke: rgba(72, 203, 185, 0.22);
  stroke-width: 0.8;
}

.compare-v6-pool-label {
  fill: rgba(255, 255, 255, 0.92);
}

.compare-v6-sync {
  fill: var(--teal);
  stroke: rgba(72, 203, 185, 0.5);
  stroke-width: 0.5;
}

.compare-v6-shield {
  fill: rgba(72, 203, 185, 0.25);
  stroke: rgba(72, 203, 185, 0.65);
  stroke-width: 0.8;
}

.compare-v6-pulse {
  fill: var(--teal);
}

.hero__visual-version--v5 {
  color: var(--teal);
}

/* v5 — talk vs execute */
.compare-diagram--v5 .compare-diagram__svg {
  max-width: 340px;
}

.compare-diagram--v5 .compare-diagram__panel {
  padding: 1.25rem 0.75rem 1rem;
}

.compare-v5-band {
  fill: rgba(139, 135, 168, 0.05);
  stroke: rgba(139, 135, 168, 0.22);
  stroke-width: 1;
}

.compare-v5-band--exec {
  fill: rgba(192, 80, 80, 0.04);
  stroke: rgba(192, 80, 80, 0.2);
}

.compare-v5-band--good {
  stroke: rgba(72, 203, 185, 0.3);
}

.compare-v5-band--exec.compare-v5-band--good {
  fill: rgba(72, 203, 185, 0.05);
  stroke: rgba(72, 203, 185, 0.25);
}

.compare-v5-band-label {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.compare-v5-band-label--exec {
  fill: #c08080;
}

.compare-v5-band-label--good {
  fill: var(--teal);
  opacity: 0.9;
}

.compare-v5-line {
  stroke-width: 1.6;
}

.compare-v5-line--talk {
  opacity: 0.9;
}

.compare-v5-line--drop {
  stroke-dasharray: 3 4;
  opacity: 0.5;
}

.compare-v5-line--agent {
  stroke-dasharray: 4 4;
  opacity: 0.65;
}

.compare-v5-line--flow {
  stroke-width: 2;
}

.compare-v5-break line {
  stroke: #c05050;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.compare-v5-break-label {
  fill: #c05050;
  font-family: var(--font);
  font-size: 5.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.compare-v5-agent {
  fill: rgba(157, 138, 242, 0.18);
  stroke: rgba(157, 138, 242, 0.55);
  stroke-width: 1;
}

.compare-v5-agent--good {
  fill: rgba(72, 203, 185, 0.15);
  stroke: rgba(72, 203, 185, 0.55);
}

.compare-v5-agent-mark {
  stroke: var(--purple);
  stroke-width: 1.2;
  fill: none;
  opacity: 0.75;
}

.compare-v5-tool--a { stroke: #c05050; }
.compare-v5-tool--b { stroke: #c09050; }
.compare-v5-tool--c { stroke: #9050c0; }
.compare-v5-tool--d { stroke: #50a0c0; }

.compare-v5-bunny {
  filter: drop-shadow(0 0 10px rgba(72, 203, 185, 0.35));
}

.compare-v5-pool {
  fill: rgba(72, 203, 185, 0.08);
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 1.5;
}

.compare-v5-pool-divider {
  stroke: rgba(72, 203, 185, 0.25);
  stroke-width: 0.8;
}

.compare-v5-pool-label {
  fill: rgba(255, 255, 255, 0.9);
}

.compare-v5-ctx-dot {
  fill: var(--teal);
  stroke: rgba(72, 203, 185, 0.6);
  stroke-width: 0.5;
}

.compare-v5-pulse {
  fill: var(--teal);
}

.hero__visual-version--v4 {
  color: var(--teal);
}

/* v4 — visual diagram */
.compare-diagram--v4 .compare-diagram__svg {
  max-width: 320px;
}

.compare-diagram--v4 .compare-diagram__panel {
  padding: 1.25rem 0.65rem 1rem;
}

.compare-v4-zone {
  fill: rgba(139, 135, 168, 0.04);
  stroke: rgba(139, 135, 168, 0.2);
  stroke-width: 1;
}

.compare-v4-zone--exec {
  fill: rgba(192, 80, 80, 0.03);
  stroke: rgba(192, 80, 80, 0.18);
}

.compare-v4-zone--good {
  stroke: rgba(72, 203, 185, 0.28);
}

.compare-v4-zone--exec.compare-v4-zone--good {
  fill: rgba(72, 203, 185, 0.04);
  stroke: rgba(72, 203, 185, 0.22);
}

.compare-v4-line {
  stroke-width: 1.5;
}

.compare-v4-line--social {
  opacity: 0.85;
}

.compare-v4-line--agent {
  stroke-dasharray: 4 4;
  opacity: 0.65;
}

.compare-v4-line--flow {
  stroke-width: 2;
}

.compare-v4-line--spoke {
  stroke-width: 1.4;
  opacity: 0.55;
}

.compare-v4-line--satellite {
  stroke-width: 1.2;
  opacity: 0.5;
}

.compare-v4-agent {
  fill: rgba(157, 138, 242, 0.2);
  stroke: rgba(157, 138, 242, 0.55);
  stroke-width: 1;
}

.compare-v4-agent-glyph {
  stroke: var(--purple);
  stroke-width: 1.2;
  fill: none;
  opacity: 0.8;
}

.compare-v4-silo {
  fill: none;
  stroke: rgba(192, 80, 80, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}

.compare-v4-pool {
  fill: rgba(72, 203, 185, 0.06);
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 1.5;
  animation: v4-pool-pulse 3s ease-in-out infinite;
}

@keyframes v4-pool-pulse {
  0%, 100% { stroke-opacity: 0.55; }
  50% { stroke-opacity: 0.95; }
}

.compare-v4-ctx-dot {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 0.5;
}

.compare-v4-ctx-dot--1 { fill: #c05050; }
.compare-v4-ctx-dot--2 { fill: #c09050; }
.compare-v4-ctx-dot--3 { fill: #9050c0; }
.compare-v4-ctx-dot--4 { fill: #50a0c0; }

.compare-v4-ctx-dot--shared {
  fill: var(--teal);
  stroke: rgba(72, 203, 185, 0.6);
}

.compare-v4-gap line {
  stroke: #c05050;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.7;
}

.compare-v4-satellite {
  fill: rgba(157, 138, 242, 0.1);
  stroke: rgba(157, 138, 242, 0.45);
  stroke-width: 0.6;
}

.compare-v4-satellite-line {
  stroke: rgba(157, 138, 242, 0.7);
  stroke-width: 1;
}

.compare-v4-satellite-shield {
  fill: rgba(72, 203, 185, 0.12);
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 0.8;
}

.compare-v4-satellite-check {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compare-v4-pulse {
  fill: var(--teal);
}

.compare-v4-icon-stroke {
  fill: none;
  stroke: #c08080;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compare-v4-icon-stroke--bad {
  stroke: #c05050;
}

.compare-v4-icon-stroke--good {
  stroke: var(--teal);
}

.compare-v4-icon-dot {
  fill: #c08080;
  opacity: 0.35;
}

.compare-v4-icon-dot--1 { opacity: 1; }
.compare-v4-icon-dot--2 { opacity: 0.65; }
.compare-v4-icon-dot--3 { opacity: 0.35; }
.compare-v4-icon-dot--4 { opacity: 0.15; }

.compare-v4-icon-dot--good {
  fill: var(--teal);
  opacity: 1;
}

.compare-v4-icon-ring {
  fill: none;
  stroke: rgba(72, 203, 185, 0.55);
  stroke-width: 1;
}

.hero__visual-version--v3 {
  color: var(--teal);
}

.compare-v3-thesis {
  margin: 0 0 0.75rem;
  max-width: 520px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

/* v3 — humans talk / agents execute */
.compare-diagram--v3 .compare-diagram__svg {
  max-width: 280px;
}

.compare-diagram--v3 .compare-diagram__panel {
  padding: 1.25rem 0.75rem 1rem;
  align-items: stretch;
}

.compare-v3-pillars {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.compare-v3-pillars li {
  font-size: 0.68rem;
  line-height: 1.4;
  padding-left: 1rem;
  position: relative;
}

.compare-v3-pillars--bad li {
  color: rgba(192, 128, 128, 0.95);
}

.compare-v3-pillars--bad li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #c05050;
  font-weight: 700;
}

.compare-v3-pillars--good li {
  color: rgba(72, 203, 185, 0.95);
}

.compare-v3-pillars--good li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

.compare-v3-layer-label {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
}

.compare-v3-layer-label--exec {
  fill: #c08080;
}

.compare-v3-layer-label--good {
  fill: var(--teal);
}

.compare-v3-layer-divider {
  stroke: rgba(139, 135, 168, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.compare-v3-agent-pill {
  fill: rgba(139, 135, 168, 0.12);
  stroke: rgba(139, 135, 168, 0.45);
  stroke-width: 0.6;
}

.compare-v3-agent-pill__text {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 4.5px;
  font-weight: 600;
}

.compare-v3-line--agent {
  stroke-dasharray: 3 4;
  opacity: 0.75;
}

.compare-v3-satellite {
  stroke-width: 0.6;
}

.compare-v3-satellite--decisions {
  fill: rgba(157, 138, 242, 0.12);
  stroke: rgba(157, 138, 242, 0.5);
}

.compare-v3-satellite--quality {
  fill: rgba(72, 203, 185, 0.1);
  stroke: rgba(72, 203, 185, 0.45);
}

.compare-v3-satellite__text {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--font);
  font-size: 4.5px;
  font-weight: 600;
}

.compare-v3-line--satellite {
  stroke-width: 1.2;
  opacity: 0.55;
}

.compare-v3-line {
  stroke-width: 1.5;
}

.compare-v3-line--flow {
  stroke-width: 2;
  opacity: 0.9;
}

.compare-v3-line--drop {
  stroke-dasharray: 4 5;
}

.compare-v3-line--chaos {
  stroke-dasharray: 3 4;
  opacity: 0.7;
}

.compare-v3-action-tag {
  fill: #c08080;
  font-family: var(--font);
  font-size: 4.5px;
  font-weight: 600;
  font-style: italic;
}

.compare-v3-governance-badge {
  fill: rgba(192, 80, 80, 0.15);
  stroke: rgba(192, 80, 80, 0.5);
  stroke-width: 0.6;
}

.compare-v3-governance-badge__text {
  fill: #c05050;
  font-family: var(--font);
  font-size: 4.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.compare-v3-tool-state {
  fill: #c08080;
  font-family: var(--font);
  font-size: 5px;
  font-weight: 700;
}

.compare-v3-dev .compare-node__text--dev {
  font-size: 7px;
}

.compare-v3-note {
  font-family: var(--font);
  font-size: 5.5px;
  font-weight: 600;
}

.compare-v3-note--bad {
  fill: #c08080;
}

.compare-v3-note--good {
  fill: var(--teal);
}

.compare-v3-chat-line {
  font-family: var(--font);
  font-size: 5.5px;
  font-weight: 500;
}

.compare-v3-chat-line--bad {
  fill: rgba(192, 128, 128, 0.9);
}

.compare-v3-chat-line--cmd {
  fill: var(--purple);
  font-weight: 700;
}

.compare-v3-chat-line--good {
  fill: rgba(72, 203, 185, 0.85);
}

.compare-v3-break__ring {
  fill: rgba(192, 80, 80, 0.12);
  stroke: rgba(192, 80, 80, 0.55);
  stroke-width: 1;
}

.compare-v3-break__x {
  fill: #c05050;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
}

.compare-v3-ctx-label {
  fill: #c08080;
  font-family: var(--font);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compare-v3-bunny--isolated {
  stroke: rgba(139, 135, 168, 0.45);
  fill: rgba(139, 135, 168, 0.08);
  filter: none;
}

.compare-v3-bunny-label {
  fill: var(--muted);
  opacity: 0.7;
}

.compare-v3-tools-block {
  stroke-width: 1.5;
}

.compare-v3-tools-label {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 6px;
  font-weight: 600;
}

.compare-v3-tools-label--good {
  fill: rgba(255, 255, 255, 0.9);
}

.compare-v3-tools-sub {
  fill: #c08080;
  font-family: var(--font);
  font-size: 5.5px;
  font-style: italic;
}

.compare-v3-pulse {
  fill: var(--teal);
}

/* comparative diagram */
.compare-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.compare-diagram__panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border-color 0.3s;
}

.compare-diagram__panel--without {
  opacity: 0.75;
}

.compare-diagram__panel--with {
  border-color: rgba(72, 203, 185, 0.35);
  box-shadow: 0 0 32px rgba(72, 203, 185, 0.08), inset 0 0 24px rgba(157, 138, 242, 0.04);
}

.compare-diagram__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1rem;
  text-align: center;
}

.compare-diagram__label--highlight {
  color: var(--teal);
}

.compare-diagram__svg {
  width: 100%;
  height: auto;
  display: block;
  min-height: 260px;
}

.compare-diagram__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.15rem;
}

.compare-diagram__vs {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--purple-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* SVG nodes & lines */
.compare-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.compare-line--muted {
  stroke: url(#line-muted);
  stroke-dasharray: 4 6;
  opacity: 0.6;
}

.compare-diagram--v2 .compare-line--muted {
  stroke: rgba(139, 135, 168, 0.35);
}

.compare-line--flow {
  stroke: rgba(157, 138, 242, 0.35);
  stroke-dasharray: 6 8;
  animation: flow-dash 1.2s linear infinite;
}

.compare-line--reverse {
  animation-direction: reverse;
  animation-delay: 0.4s;
  opacity: 0.5;
}

.compare-line--flow:nth-child(2) { animation-delay: 0.1s; }
.compare-line--flow:nth-child(3) { animation-delay: 0.2s; }
.compare-line--flow:nth-child(4) { animation-delay: 0.3s; }
.compare-line--flow:nth-child(5) { animation-delay: 0.15s; }
.compare-line--flow:nth-child(6) { animation-delay: 0.25s; }
.compare-line--flow:nth-child(7) { animation-delay: 0.35s; }
.compare-line--flow:nth-child(8) { animation-delay: 0.45s; }
.compare-line--flow:nth-child(9) { animation-delay: 0.55s; }

@keyframes flow-dash {
  to { stroke-dashoffset: -28; }
}

.compare-node {
  fill: var(--bg-elevated);
  stroke-width: 1.5;
}

.compare-node--chat {
  stroke: rgba(157, 138, 242, 0.55);
}

.compare-node__text--chat {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.compare-node__bubble-tail {
  fill: none;
  stroke: rgba(157, 138, 242, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.compare-chat-logos {
  pointer-events: none;
}

.compare-node--tool {
  stroke-width: 1;
}

.compare-node--isolated {
  stroke: rgba(139, 135, 168, 0.3);
}

.compare-node--connected {
  stroke: rgba(72, 203, 185, 0.45);
  animation: node-pulse 2.5s ease-in-out infinite;
}

.compare-node--bunny {
  stroke: var(--teal);
  fill: rgba(26, 11, 64, 0.6);
  filter: drop-shadow(0 0 8px var(--teal-glow));
  animation: bunny-glow 2s ease-in-out infinite;
}

@keyframes node-pulse {
  0%, 100% { stroke-opacity: 0.45; }
  50% { stroke-opacity: 0.9; }
}

@keyframes bunny-glow {
  0%, 100% { filter: drop-shadow(0 0 6px var(--teal-glow)); }
  50% { filter: drop-shadow(0 0 14px rgba(72, 203, 185, 0.45)); }
}

.compare-node__text {
  fill: var(--white);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
}

.compare-node__text--sm {
  font-size: 10px;
  font-weight: 500;
}

.compare-node__text--xs {
  font-size: 8px;
  font-weight: 500;
}

.compare-node__text--bunny {
  fill: var(--teal);
  font-size: 10px;
  font-weight: 700;
}

.compare-node__icon {
  font-size: 10px;
}

.compare-particle {
  fill: var(--teal);
}

.compare-particle--purple {
  fill: var(--purple);
}

.compare-particle--teal {
  fill: var(--teal);
}

.compare-particle--solo {
  fill: var(--muted);
  opacity: 0;
}

.compare-isolated {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 9px;
  font-style: italic;
  opacity: 0.7;
}

.compare-shared {
  fill: var(--teal);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* v2 — silos & team */
.compare-diagram--v2 .compare-diagram__svg {
  min-height: 340px;
}

.compare-diagram--v2 .compare-diagram__panel {
  padding: 1.5rem 0.75rem 1.25rem;
}

.compare-silo {
  fill: rgba(139, 135, 168, 0.04);
  stroke: rgba(139, 135, 168, 0.22);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.compare-silo--shared {
  fill: rgba(72, 203, 185, 0.05);
  stroke: rgba(72, 203, 185, 0.35);
  stroke-dasharray: none;
  animation: silo-shared-pulse 3s ease-in-out infinite;
}

@keyframes silo-shared-pulse {
  0%, 100% { stroke-opacity: 0.35; fill-opacity: 0.5; }
  50% { stroke-opacity: 0.7; fill-opacity: 1; }
}

.compare-node--dev {
  stroke: rgba(139, 135, 168, 0.4);
  stroke-width: 1;
}

.compare-dev-head {
  fill: var(--purple-dim);
}

.compare-ide-window {
  fill: rgba(157, 138, 242, 0.12);
  stroke: rgba(157, 138, 242, 0.35);
  stroke-width: 0.8;
}

.compare-ide-line {
  stroke: rgba(157, 138, 242, 0.4);
  stroke-width: 0.8;
}

.compare-node__text--dev {
  font-size: 7px;
  fill: var(--muted);
  font-weight: 500;
}

.compare-tag-bg {
  fill: rgba(26, 11, 64, 0.9);
  stroke-width: 1;
}

.compare-tag-bg--divergent {
  stroke: rgba(139, 135, 168, 0.5);
}

.compare-tag-bg--intent {
  stroke: rgba(157, 138, 242, 0.45);
  fill: rgba(157, 138, 242, 0.12);
}

.compare-tag-bg--broken {
  stroke: rgba(220, 90, 90, 0.55);
  fill: rgba(50, 12, 18, 0.85);
}

.compare-tag-bg--valid {
  stroke: rgba(72, 203, 185, 0.65);
  fill: rgba(72, 203, 185, 0.12);
}

.compare-tag-bg--shared {
  stroke: var(--teal);
}

.compare-tag-text--intent {
  fill: var(--purple);
  font-size: 5.5px;
}

.compare-tag-text--broken {
  fill: #f0a0a0;
  font-size: 5.5px;
}

.compare-tag-text--valid {
  fill: var(--teal);
  font-size: 5.5px;
  font-weight: 700;
}

.compare-tag-strike {
  stroke: rgba(220, 90, 90, 0.75);
  stroke-width: 0.8;
  stroke-linecap: round;
}

.compare-gap line {
  stroke: rgba(220, 90, 90, 0.45);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.compare-tag-stale {
  pointer-events: none;
}

.compare-tag-synced {
  pointer-events: none;
  animation: tag-sync-pulse 5s ease-in-out infinite;
}

.compare-line--discuss {
  stroke: rgba(157, 138, 242, 0.4);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  animation: flow-dash 1.4s linear infinite;
}

.compare-discuss-label {
  fill: var(--purple-dim);
  font-family: var(--font);
  font-size: 6px;
  font-weight: 600;
  font-style: italic;
  opacity: 0.9;
}

.compare-particle--discuss {
  fill: var(--purple);
}

.compare-discuss-pulse {
  pointer-events: none;
}

.compare-particle--discuss-b {
  fill: var(--teal);
}

.compare-msgs {
  pointer-events: none;
}

.compare-msg-bubble {
  stroke-width: 0.6;
}

.compare-msg--a .compare-msg-bubble {
  fill: rgba(157, 138, 242, 0.18);
  stroke: rgba(157, 138, 242, 0.55);
}

.compare-msg--b .compare-msg-bubble {
  fill: rgba(72, 203, 185, 0.15);
  stroke: rgba(72, 203, 185, 0.5);
}

.compare-msg-text {
  fill: rgba(255, 255, 255, 0.92);
  font-family: var(--font);
  font-size: 5.5px;
  font-weight: 600;
}

.compare-line--control {
  stroke: rgba(157, 138, 242, 0.65);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  animation: flow-dash 0.9s linear infinite;
  opacity: 0.85;
}

.compare-line--context-return {
  opacity: 0.35;
  stroke-dasharray: 4 8;
}

.compare-control-label {
  fill: var(--purple);
  font-family: var(--font);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.compare-tag-bg--control {
  stroke: rgba(157, 138, 242, 0.65);
  fill: rgba(157, 138, 242, 0.15);
}

.compare-tag-text--control {
  fill: var(--purple);
  font-size: 5px;
  font-weight: 700;
}

.compare-node--controller {
  stroke: rgba(157, 138, 242, 0.75);
  filter: drop-shadow(0 0 8px rgba(157, 138, 242, 0.25));
}

.compare-command-hint {
  fill: var(--purple-dim);
  font-family: var(--font);
  font-size: 6px;
  font-weight: 600;
  font-style: italic;
}

.compare-tag-synced--hub {
  animation-delay: 0s;
}

.compare-tag-synced--control {
  animation: tag-control-pulse 2.8s ease-in-out infinite;
}

.compare-command {
  pointer-events: none;
}

@keyframes tag-control-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes tag-sync-pulse {
  0%, 85%, 100% { opacity: 0.75; }
  42%, 58% { opacity: 1; }
}

.compare-context-pool {
  fill: rgba(72, 203, 185, 0.45);
  font-family: var(--font);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compare-context-sublabel {
  fill: var(--teal);
  font-family: var(--font);
  font-size: 6px;
  font-weight: 500;
  opacity: 0.8;
}

.compare-caption--broken {
  fill: #c08080;
  font-style: italic;
}

.compare-tag-text {
  fill: var(--white);
  font-family: var(--font);
  font-size: 6px;
  font-weight: 600;
}

.compare-tag-text--shared {
  fill: var(--teal);
}

.compare-caption {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 8px;
  font-style: italic;
}

.compare-caption--shared {
  fill: var(--teal);
  font-style: normal;
  font-weight: 600;
}

.compare-caption--valid {
  fill: var(--teal);
  font-style: normal;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .compare-line--flow,
  .compare-line--control,
  .compare-line--discuss,
  .compare-node--connected,
  .compare-node--bunny,
  .compare-silo--shared,
  .compare-v7-vm-halo,
  .compare-v8-vm-halo {
    animation: none;
  }

  .compare-particle,
  .compare-particle--solo,
  .compare-impulse,
  .compare-impulse--valid,
  .compare-command,
  .compare-discuss-pulse,
  .compare-msgs,
  .compare-v4-pool,
  .compare-v5-pulse,
  .compare-v6-pulse,
  .compare-v6-sync,
  .compare-v7-pulse,
  .compare-v7-sync,
  .compare-v7-ripple,
  .compare-v7-talk-dot,
  .compare-v8-impulse,
  .compare-v8-ripple,
  .compare-v8-clash-flash,
  .compare-v8-sync,
  .compare-v9-pulse,
  .compare-v9-impulse,
  .compare-v9-discuss {
    display: none;
  }

  .compare-diagram--v9 .compare-v9-conv-msg--a,
  .compare-diagram--v9 .compare-v9-conv-msg--b,
  .compare-diagram--v9 .compare-v9-conv-msg--cmd {
    animation: none;
    opacity: 1;
  }

  .compare-v9-msgs .compare-msg,
  .compare-v9-conv .compare-v9-conv-msg {
    opacity: 0.85;
  }

  .compare-tag-synced {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .compare-diagram {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    max-width: 100%;
    margin: 0 auto;
  }

  .compare-diagram__divider {
    padding: 0.25rem 0;
  }

  .compare-diagram__vs {
    writing-mode: horizontal-tb;
    transform: none;
  }
}
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.section--alt {
  background: linear-gradient(180deg, transparent, rgba(26, 11, 64, 0.15), transparent);
}

.section__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem;
}

.section__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 0.75rem;
}

.section h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.section__header p,
.section__footer-note {
  color: var(--muted);
  font-size: 1.05rem;
}

.section__footer-note {
  text-align: center;
  max-width: 640px;
  margin: 2.5rem auto 0;
}

/* cards */
.cards {
  display: grid;
  gap: 1.25rem;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.75rem;
  transition: border-color 0.25s, transform 0.25s;
}

.card:hover {
  border-color: rgba(157, 138, 242, 0.35);
  transform: translateY(-3px);
}

.card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.card__icon--purple {
  background: rgba(157, 138, 242, 0.12);
  color: var(--purple);
}

.card__icon--teal {
  background: rgba(72, 203, 185, 0.12);
  color: var(--teal);
}

.card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.card p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.65;
}

/* split layout */
.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.split__text h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1rem;
}

.split__text p {
  color: var(--muted);
  margin-bottom: 1rem;
}

.split__text p:last-child {
  margin-bottom: 0;
}

.split__panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
}

.split__caption {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--purple-dim);
  font-family: var(--font-mono);
}

/* flow list */
.flow-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.flow-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--muted);
  padding: 0.5rem 0.75rem;
  background: rgba(157, 138, 242, 0.05);
  border-radius: 6px;
  border-left: 2px solid var(--purple);
}

.flow-list__dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--purple);
  flex-shrink: 0;
}

.flow-list__dot--teal {
  background: var(--teal);
}

/* queries */
.queries {
  display: grid;
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto;
}

.query {
  font-size: 1rem;
  font-style: italic;
  color: var(--white);
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  border-left: 3px solid var(--teal);
  transition: border-color 0.2s;
}

.query:hover {
  border-left-color: var(--purple);
}

/* timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline__item {
  position: relative;
  padding: 1rem 0 1rem 1.5rem;
  border-left: 2px solid var(--border);
}

.timeline__item:last-child {
  border-left-color: transparent;
}

.timeline__item--active {
  border-left-color: var(--teal);
}

.timeline__item--active::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 1.25rem;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--teal);
}

.timeline__item--muted {
  opacity: 0.45;
}

.timeline__item--muted::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 1.25rem;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--muted);
}

.timeline__label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.timeline__desc {
  font-size: 0.85rem;
  color: var(--muted);
}

/* governance */
.gov-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.gov-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.gov-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.gov-list__icon--teal {
  background: rgba(72, 203, 185, 0.12);
  color: var(--teal);
}

.gov-list__icon--purple {
  background: rgba(157, 138, 242, 0.12);
  color: var(--purple);
}

.split__panel--gov {
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gov-diagram {
  width: 100%;
  max-width: 360px;
}

.gov-diagram__svg {
  width: 100%;
  height: auto;
  display: block;
}

.gov__node {
  fill: var(--bg-elevated);
  stroke: var(--border);
  stroke-width: 1;
}

.gov__node--tool {
  stroke: rgba(72, 203, 185, 0.25);
}

.gov__node--muted {
  opacity: 0.55;
}

.gov__avatar--human {
  fill: rgba(157, 138, 242, 0.2);
  stroke: var(--purple);
  stroke-width: 1;
}

.gov__avatar--agent {
  fill: rgba(72, 203, 185, 0.15);
  stroke: var(--teal);
  stroke-width: 1;
}

.gov__label {
  fill: var(--white);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
}

.gov__label--muted {
  fill: var(--muted);
}

.gov__shield {
  fill: url(#gov-shield);
  stroke: rgba(157, 138, 242, 0.45);
  stroke-width: 1.2;
}

.gov__bunny-glow {
  fill: url(#gov-bunny-halo);
  filter: blur(6px);
  transform-origin: center;
}

.gov__bunny-logo {
  filter: drop-shadow(0 0 10px rgba(157, 138, 242, 0.55)) drop-shadow(0 0 18px rgba(72, 203, 185, 0.35));
  pointer-events: none;
}

.gov-diagram.is-playing .gov__bunny-glow {
  animation: gov-bunny-glow-pulse 14s ease-in-out infinite;
}

@keyframes gov-bunny-glow-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  8%, 17% { opacity: 1; transform: scale(1.08); }
  29%, 39% { opacity: 1; transform: scale(1.08); }
  51%, 61% { opacity: 1; transform: scale(1.08); }
  70%, 77% { opacity: 0.85; transform: scale(1.02); }
}

.gov__gate-title {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gov__badge {
  fill: rgba(72, 203, 185, 0.1);
  stroke: rgba(72, 203, 185, 0.35);
  stroke-width: 0.8;
}

.gov__badge-text {
  fill: var(--teal);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gov__tool-label {
  fill: var(--white);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
}

.gov__path,
.gov__path-out {
  fill: none;
  stroke: url(#gov-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 6;
  opacity: 0.35;
}

.gov__path--deny {
  stroke: rgba(192, 80, 80, 0.5);
  opacity: 0.25;
}

.gov__pulse,
.gov__pulse-out {
  fill: var(--teal);
  opacity: 0;
  offset-rotate: 0deg;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.gov__pulse--teammate {
  offset-path: path("M 126 72 H 138 V 148 H 222");
}

.gov__pulse--agent {
  offset-path: path("M 126 268 H 138 V 192 H 222");
}

.gov__pulse--deny {
  fill: #c05050;
  offset-path: path("M 126 170 H 138");
}

.gov__pulse-out--github {
  offset-path: path("M 222 148 H 234 V 72 H 246");
}

.gov__pulse-out--shell {
  offset-path: path("M 222 192 H 234 V 170 H 246");
}

.gov__pulse-out--mcp {
  offset-path: path("M 222 210 H 234 V 268 H 246");
}

.gov__verdict {
  opacity: 0;
  transform-origin: center;
}

.gov__verdict-ring--allow {
  fill: rgba(72, 203, 185, 0.15);
  stroke: var(--teal);
  stroke-width: 1.2;
}

.gov__verdict-mark--allow {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gov__verdict-ring--deny {
  fill: rgba(192, 80, 80, 0.12);
  stroke: #c05050;
  stroke-width: 1.2;
}

.gov__verdict-mark--deny {
  fill: none;
  stroke: #c05050;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.gov__toast {
  opacity: 0;
  transform-origin: center;
}

.gov__toast-box {
  fill: rgba(72, 203, 185, 0.1);
  stroke: rgba(72, 203, 185, 0.35);
  stroke-width: 0.8;
}

.gov__toast-box--deny {
  fill: rgba(192, 80, 80, 0.1);
  stroke: rgba(192, 80, 80, 0.4);
}

.gov__toast-text {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 600;
}

.gov__toast-text--allow {
  fill: var(--teal);
}

.gov__toast-text--deny {
  fill: #c08080;
}

.gov__gate .gov__shield {
  transition: stroke 0.3s ease;
}

/* governance animation — 14s loop */
.gov-diagram.is-playing .gov__pulse--teammate {
  animation: gov-pulse-teammate 14s linear infinite;
}

.gov-diagram.is-playing .gov__pulse-out--github {
  animation: gov-pulse-out-github 14s linear infinite;
}

.gov-diagram.is-playing .gov__pulse--agent {
  animation: gov-pulse-agent 14s linear infinite;
}

.gov-diagram.is-playing .gov__pulse-out--shell {
  animation: gov-pulse-out-shell 14s linear infinite;
}

.gov-diagram.is-playing .gov__pulse-out--mcp {
  animation: gov-pulse-out-mcp 14s linear infinite;
}

.gov-diagram.is-playing .gov__pulse--deny {
  animation: gov-pulse-deny 14s linear infinite;
}

.gov-diagram.is-playing .gov__path--teammate,
.gov-diagram.is-playing .gov__path-out--github {
  animation: gov-path-bright-teammate 14s ease-in-out infinite;
}

.gov-diagram.is-playing .gov__path--agent,
.gov-diagram.is-playing .gov__path-out--shell {
  animation: gov-path-bright-agent 14s ease-in-out infinite;
}

.gov-diagram.is-playing .gov__path-out--mcp {
  animation: gov-path-bright-mcp 14s ease-in-out infinite;
}

.gov-diagram.is-playing .gov__path--deny {
  animation: gov-path-bright-deny 14s ease-in-out infinite;
}

.gov-diagram.is-playing .gov__verdict--allow {
  animation: gov-verdict-allow 14s ease-in-out infinite;
}

.gov-diagram.is-playing .gov__verdict--deny {
  animation: gov-verdict-deny 14s ease-in-out infinite;
}

.gov-diagram.is-playing .gov__toast--allow {
  animation: gov-toast-allow 14s ease-in-out infinite;
}

.gov-diagram.is-playing .gov__toast--deny {
  animation: gov-toast-deny 14s ease-in-out infinite;
}

.gov-diagram.is-playing .gov__gate .gov__shield {
  animation: gov-shield-cycle 14s ease-in-out infinite;
}

@keyframes gov-pulse-teammate {
  /* flow 1: teammate → gate */
  0%, 1% { opacity: 0; offset-distance: 0%; }
  2% { opacity: 1; offset-distance: 0%; }
  9% { opacity: 1; offset-distance: 100%; }
  10%, 44% { opacity: 0; offset-distance: 100%; }
  /* flow 3: teammate → gate (MCP) */
  45% { opacity: 1; offset-distance: 0%; }
  53% { opacity: 1; offset-distance: 100%; }
  54%, 100% { opacity: 0; offset-distance: 100%; }
}

@keyframes gov-pulse-out-github {
  0%, 11% { opacity: 0; offset-distance: 0%; }
  12% { opacity: 1; offset-distance: 0%; }
  17% { opacity: 1; offset-distance: 100%; }
  18%, 100% { opacity: 0; offset-distance: 100%; }
}

@keyframes gov-pulse-agent {
  0%, 22% { opacity: 0; offset-distance: 0%; }
  23% { opacity: 1; offset-distance: 0%; }
  31% { opacity: 1; offset-distance: 100%; }
  32%, 100% { opacity: 0; offset-distance: 100%; }
}

@keyframes gov-pulse-out-shell {
  0%, 33% { opacity: 0; offset-distance: 0%; }
  34% { opacity: 1; offset-distance: 0%; }
  39% { opacity: 1; offset-distance: 100%; }
  40%, 100% { opacity: 0; offset-distance: 100%; }
}

@keyframes gov-pulse-out-mcp {
  0%, 55% { opacity: 0; offset-distance: 0%; }
  56% { opacity: 1; offset-distance: 0%; }
  61% { opacity: 1; offset-distance: 100%; }
  62%, 100% { opacity: 0; offset-distance: 100%; }
}

@keyframes gov-pulse-deny {
  0%, 66% { opacity: 0; offset-distance: 0%; }
  67% { opacity: 1; offset-distance: 0%; }
  73% { opacity: 1; offset-distance: 100%; }
  74%, 100% { opacity: 0; offset-distance: 100%; }
}

@keyframes gov-path-bright-teammate {
  0%, 100% { opacity: 0.35; }
  2%, 17% { opacity: 0.85; }
  45%, 61% { opacity: 0.85; }
}

@keyframes gov-path-bright-agent {
  0%, 100% { opacity: 0.35; }
  23%, 39% { opacity: 0.85; }
}

@keyframes gov-path-bright-mcp {
  0%, 100% { opacity: 0.35; }
  45%, 61% { opacity: 0.85; }
}

@keyframes gov-path-bright-deny {
  0%, 100% { opacity: 0.35; }
  67%, 74% { opacity: 0.55; }
}

@keyframes gov-verdict-allow {
  0%, 9%, 12%, 21%, 31%, 34%, 43%, 53%, 56%, 65%, 100% { opacity: 0; }
  10%, 11% { opacity: 1; }
  32%, 33% { opacity: 1; }
  54%, 55% { opacity: 1; }
}

@keyframes gov-verdict-deny {
  0%, 73%, 78%, 100% { opacity: 0; }
  74%, 77% { opacity: 1; }
}

@keyframes gov-toast-allow {
  0%, 10%, 13%, 22%, 32%, 35%, 44%, 54%, 57%, 66%, 100% { opacity: 0; transform: translateY(6px); }
  11%, 12% { opacity: 1; transform: translateY(0); }
  33%, 34% { opacity: 1; transform: translateY(0); }
  55%, 56% { opacity: 1; transform: translateY(0); }
}

@keyframes gov-toast-deny {
  0%, 74%, 79%, 100% { opacity: 0; transform: translateY(6px); }
  75%, 78% { opacity: 1; transform: translateY(0); }
}

@keyframes gov-shield-cycle {
  0%, 100% { stroke: rgba(157, 138, 242, 0.45); }
  8%, 17% { stroke: rgba(72, 203, 185, 0.75); }
  29%, 39% { stroke: rgba(72, 203, 185, 0.75); }
  51%, 61% { stroke: rgba(72, 203, 185, 0.75); }
  70%, 77% { stroke: rgba(192, 80, 80, 0.65); }
}

@media (prefers-reduced-motion: reduce) {
  .gov-diagram.is-playing .gov__pulse,
  .gov-diagram.is-playing .gov__pulse-out,
  .gov-diagram.is-playing .gov__verdict,
  .gov-diagram.is-playing .gov__toast,
  .gov-diagram.is-playing .gov__path,
  .gov-diagram.is-playing .gov__path-out,
  .gov-diagram.is-playing .gov__gate .gov__shield,
  .gov-diagram.is-playing .gov__bunny-glow {
    animation: none;
  }

  .gov-diagram.is-playing .gov__verdict--allow,
  .gov-diagram.is-playing .gov__verdict--deny {
    opacity: 1;
    transform: none;
  }

  .gov-diagram.is-playing .gov__toast--allow {
    opacity: 1;
    transform: none;
  }

  .gov-diagram.is-playing .gov__toast--deny {
    opacity: 0.7;
    transform: none;
  }
}

/* worktree diagram */
.split__panel--worktree {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wt-diagram {
  width: 100%;
  max-width: 380px;
  overflow: visible;
}

.wt-diagram__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.wt__node {
  fill: var(--bg-elevated);
  stroke: var(--border);
  stroke-width: 1;
  transition: stroke 0.3s ease, filter 0.3s ease;
}

.wt__avatar--human {
  fill: rgba(157, 138, 242, 0.2);
  stroke: var(--purple);
  stroke-width: 1;
}

.wt__avatar--agent {
  fill: rgba(72, 203, 185, 0.15);
  stroke: var(--teal);
  stroke-width: 1;
}

.wt__actor {
  fill: var(--white);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 600;
}

.wt__branch {
  fill: var(--teal);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
}

.wt__line {
  fill: rgba(72, 203, 185, 0.55);
  opacity: 0;
}

.wt__path {
  fill: none;
  stroke: url(#wt-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 5;
  opacity: 0.3;
}

.wt__pulse {
  fill: var(--teal);
  opacity: 0;
  offset-rotate: 0deg;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.wt__pulse--spine {
  offset-path: path("M 190 252 L 190 208");
}

.wt__pulse--1 {
  offset-path: path("M 190 172 L 190 124 L 54 124 L 54 106");
}

.wt__pulse--2 {
  offset-path: path("M 190 172 L 190 124 L 144 124 L 144 90");
}

.wt__pulse--3 {
  offset-path: path("M 190 172 L 190 124 L 236 124 L 236 90");
}

.wt__pulse--4 {
  offset-path: path("M 190 172 L 190 124 L 326 124 L 326 106");
}

.wt__hub-box {
  fill: var(--bg-card);
  stroke: rgba(157, 138, 242, 0.55);
  stroke-width: 1.2;
}

.wt__hub-title {
  fill: var(--white);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.wt__repo-box {
  fill: rgba(72, 203, 185, 0.08);
  stroke: rgba(72, 203, 185, 0.35);
  stroke-width: 1;
}

.wt__repo-label {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
}

.wt__bunny-glow-wrap {
  transform-origin: 0 0;
}

.wt__bunny-glow {
  fill: url(#wt-bunny-halo);
  filter: blur(8px);
}

.wt__bunny-logo {
  filter: drop-shadow(0 0 12px rgba(72, 203, 185, 0.75)) drop-shadow(0 0 22px rgba(72, 203, 185, 0.45));
  pointer-events: none;
}

.wt-diagram.is-playing .wt__bunny-glow-wrap {
  animation: wt-bunny-glow-breathe 3.2s ease-in-out infinite;
}

@keyframes wt-bunny-glow-breathe {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.2); }
}

.wt__toast {
  opacity: 0;
  transform-origin: center;
}

.wt__toast-box {
  fill: rgba(72, 203, 185, 0.1);
  stroke: rgba(72, 203, 185, 0.35);
  stroke-width: 0.8;
}

.wt__toast-text {
  fill: var(--teal);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 600;
}

/* worktree animation — 12s loop */
.wt-diagram.is-playing .wt__pulse--spine {
  animation: wt-pulse-spine 12s linear infinite;
}

.wt-diagram.is-playing .wt__pulse--1 {
  animation: wt-pulse-1 12s linear infinite;
}

.wt-diagram.is-playing .wt__pulse--2 {
  animation: wt-pulse-2 12s linear infinite;
}

.wt-diagram.is-playing .wt__pulse--3 {
  animation: wt-pulse-3 12s linear infinite;
}

.wt-diagram.is-playing .wt__pulse--4 {
  animation: wt-pulse-4 12s linear infinite;
}

.wt-diagram.is-playing .wt__path--spine {
  animation: wt-path-spine 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__path--1 {
  animation: wt-path-1 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__path--2 {
  animation: wt-path-2 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__path--3 {
  animation: wt-path-3 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__path--4 {
  animation: wt-path-4 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__tree--1 .wt__node {
  animation: wt-node-1 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__tree--2 .wt__node {
  animation: wt-node-2 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__tree--3 .wt__node {
  animation: wt-node-3 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__tree--4 .wt__node {
  animation: wt-node-4 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__tree--1 .wt__line--1 { animation: wt-line-flash 12s ease-in-out infinite; animation-delay: 0s; }
.wt-diagram.is-playing .wt__tree--1 .wt__line--2 { animation: wt-line-flash 12s ease-in-out infinite; animation-delay: 0.15s; }

.wt-diagram.is-playing .wt__tree--2 .wt__line--1 { animation: wt-line-flash 12s ease-in-out infinite; animation-delay: 0.1s; }
.wt-diagram.is-playing .wt__tree--2 .wt__line--2 { animation: wt-line-flash 12s ease-in-out infinite; animation-delay: 0.25s; }

.wt-diagram.is-playing .wt__tree--3 .wt__line--1 { animation: wt-line-flash 12s ease-in-out infinite; animation-delay: 0.05s; }
.wt-diagram.is-playing .wt__tree--3 .wt__line--2 { animation: wt-line-flash 12s ease-in-out infinite; animation-delay: 0.2s; }

.wt-diagram.is-playing .wt__tree--4 .wt__line--1 { animation: wt-line-flash 12s ease-in-out infinite; animation-delay: 0.12s; }
.wt-diagram.is-playing .wt__tree--4 .wt__line--2 { animation: wt-line-flash 12s ease-in-out infinite; animation-delay: 0.27s; }

.wt-diagram.is-playing .wt__toast {
  animation: wt-toast 12s ease-in-out infinite;
}

.wt-diagram.is-playing .wt__hub-box {
  animation: wt-hub-glow 12s ease-in-out infinite;
}

@keyframes wt-pulse-spine {
  0%, 44% { opacity: 0; offset-distance: 100%; }
  45% { opacity: 1; offset-distance: 100%; }
  52% { opacity: 1; offset-distance: 0%; }
  53%, 100% { opacity: 0; offset-distance: 0%; }
}

@keyframes wt-pulse-1 {
  0%, 4% { opacity: 0; offset-distance: 100%; }
  5% { opacity: 1; offset-distance: 100%; }
  14% { opacity: 1; offset-distance: 0%; }
  15%, 55% { opacity: 0; offset-distance: 0%; }
  56% { opacity: 1; offset-distance: 100%; }
  65% { opacity: 1; offset-distance: 0%; }
  66%, 100% { opacity: 0; offset-distance: 0%; }
}

@keyframes wt-pulse-2 {
  0%, 14% { opacity: 0; offset-distance: 100%; }
  15% { opacity: 1; offset-distance: 100%; }
  24% { opacity: 1; offset-distance: 0%; }
  25%, 55% { opacity: 0; offset-distance: 0%; }
  56% { opacity: 1; offset-distance: 100%; }
  65% { opacity: 1; offset-distance: 0%; }
  66%, 100% { opacity: 0; offset-distance: 0%; }
}

@keyframes wt-pulse-3 {
  0%, 24% { opacity: 0; offset-distance: 100%; }
  25% { opacity: 1; offset-distance: 100%; }
  34% { opacity: 1; offset-distance: 0%; }
  35%, 55% { opacity: 0; offset-distance: 0%; }
  56% { opacity: 1; offset-distance: 100%; }
  65% { opacity: 1; offset-distance: 0%; }
  66%, 100% { opacity: 0; offset-distance: 0%; }
}

@keyframes wt-pulse-4 {
  0%, 34% { opacity: 0; offset-distance: 100%; }
  35% { opacity: 1; offset-distance: 100%; }
  44% { opacity: 1; offset-distance: 0%; }
  45%, 55% { opacity: 0; offset-distance: 0%; }
  56% { opacity: 1; offset-distance: 100%; }
  65% { opacity: 1; offset-distance: 0%; }
  66%, 100% { opacity: 0; offset-distance: 0%; }
}

@keyframes wt-path-spine {
  0%, 100% { opacity: 0.3; }
  45%, 53% { opacity: 0.85; }
}

@keyframes wt-path-1 {
  0%, 100% { opacity: 0.3; }
  5%, 15% { opacity: 0.85; }
  56%, 66% { opacity: 0.85; }
}

@keyframes wt-path-2 {
  0%, 100% { opacity: 0.3; }
  15%, 25% { opacity: 0.85; }
  56%, 66% { opacity: 0.85; }
}

@keyframes wt-path-3 {
  0%, 100% { opacity: 0.3; }
  25%, 35% { opacity: 0.85; }
  56%, 66% { opacity: 0.85; }
}

@keyframes wt-path-4 {
  0%, 100% { opacity: 0.3; }
  35%, 45% { opacity: 0.85; }
  56%, 66% { opacity: 0.85; }
}

@keyframes wt-node-1 {
  0%, 4%, 15%, 55%, 66%, 100% { stroke: var(--border); }
  5%, 14%, 56%, 65% { stroke: rgba(72, 203, 185, 0.65); }
}

@keyframes wt-node-2 {
  0%, 14%, 25%, 55%, 66%, 100% { stroke: var(--border); }
  15%, 24%, 56%, 65% { stroke: rgba(72, 203, 185, 0.65); }
}

@keyframes wt-node-3 {
  0%, 24%, 35%, 55%, 66%, 100% { stroke: var(--border); }
  25%, 34%, 56%, 65% { stroke: rgba(157, 138, 242, 0.65); }
}

@keyframes wt-node-4 {
  0%, 34%, 45%, 55%, 66%, 100% { stroke: var(--border); }
  35%, 44%, 56%, 65% { stroke: rgba(157, 138, 242, 0.65); }
}

@keyframes wt-line-flash {
  0%, 4%, 46%, 54%, 100% { opacity: 0; }
  8%, 42% { opacity: 1; }
  56%, 66% { opacity: 1; }
}

@keyframes wt-toast {
  0%, 48%, 72%, 100% { opacity: 0; transform: translateY(4px); }
  52%, 68% { opacity: 1; transform: translateY(0); }
}

@keyframes wt-hub-glow {
  0%, 100% { stroke: rgba(157, 138, 242, 0.45); }
  50%, 70% { stroke: rgba(72, 203, 185, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .wt-diagram.is-playing .wt__pulse,
  .wt-diagram.is-playing .wt__path,
  .wt-diagram.is-playing .wt__line,
  .wt-diagram.is-playing .wt__toast,
  .wt-diagram.is-playing .wt__hub-box,
  .wt-diagram.is-playing .wt__bunny-glow-wrap,
  .wt-diagram.is-playing .wt__tree .wt__node {
    animation: none;
  }

  .wt-diagram.is-playing .wt__bunny-glow-wrap {
    opacity: 0.75;
    transform: none;
  }

  .wt-diagram.is-playing .wt__line {
    opacity: 0.7;
  }

  .wt-diagram.is-playing .wt__toast {
    opacity: 1;
    transform: none;
  }
}

/* cta */
.cta {
  padding-bottom: 6rem;
}

.cta__inner {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, rgba(26, 11, 64, 0.5), rgba(72, 203, 185, 0.08));
  border: 1px solid var(--border);
  border-radius: 16px;
}

.cta__logo {
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 0 20px var(--purple-glow));
}

.cta__inner h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.75rem;
}

.cta__inner p {
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto 2rem;
}

/* footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 1;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.brand--footer .brand__name {
  font-size: 1rem;
}

.footer__copy {
  font-size: 0.85rem;
  color: var(--muted);
}

.footer__link {
  font-size: 0.85rem;
  color: var(--purple);
  font-family: var(--font-mono);
  transition: color 0.2s;
}

.footer__link:hover {
  color: var(--teal);
}

/* responsive */
@media (min-width: 640px) {
  .cards--three {
    grid-template-columns: repeat(3, 1fr);
  }

  .queries {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .nav {
    display: flex;
  }

  .compare-diagram {
    max-width: 100%;
    gap: 1.25rem;
  }

  .compare-diagram__svg {
    min-height: 300px;
  }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .split--reverse .split__text {
    order: 2;
  }

  .split--reverse .split__panel {
    order: 1;
  }
}

@media (min-width: 1024px) {
  .header {
    padding: 0 2rem;
  }

  .compare-diagram__svg {
    min-height: 340px;
  }

  .compare-diagram__panel {
    padding: 2rem 1.25rem 1.5rem;
  }

  .hero,
  .section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}