.symmetric-hero .hero-copy h1 {
  max-width: 680px;
  font-size: 4.45rem;
}

.symmetric-hero .hero-copy h1 span {
  display: block;
}

.governance-graphic {
  background:
    radial-gradient(circle at 50% 48%, rgba(99, 214, 198, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%),
    rgba(12, 16, 23, 0.74);
}

.governance-graphic .field-glow {
  fill: url(#coreGlow);
  opacity: 0.76;
  transform-box: fill-box;
  transform-origin: center;
  animation: governanceGlow 5.8s ease-in-out infinite;
}

.governance-graphic .boundary-ring {
  fill: none;
  stroke: rgba(214, 199, 150, 0.48);
  stroke-width: 1.5;
  stroke-dasharray: 12 12;
  transform-box: fill-box;
  transform-origin: center;
  animation: governanceRing 12s linear infinite;
}

.governance-graphic .boundary-ring--inner {
  stroke: rgba(99, 214, 198, 0.42);
  stroke-dasharray: 7 12;
  animation-duration: 8.5s;
  animation-direction: reverse;
}

.governance-graphic .system-node circle {
  fill: rgba(8, 10, 14, 0.88);
  stroke: rgba(99, 214, 198, 0.64);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 16px rgba(99, 214, 198, 0.15));
  animation: nodeStabilize 4.8s ease-in-out infinite;
}

.governance-graphic .human-node circle {
  stroke: rgba(212, 182, 111, 0.78);
  animation-delay: -1.1s;
}

.governance-graphic .system-node path {
  fill: none;
  stroke: rgba(236, 232, 220, 0.72);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.governance-graphic .system-node text,
.governance-graphic .governance-gate text,
.governance-graphic .boundary-layer text,
.governance-graphic .audit-layer text,
.governance-graphic .fault-pulse text {
  fill: rgba(236, 232, 220, 0.76);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-anchor: middle;
}

.governance-graphic .signal-line {
  fill: none;
  stroke: url(#goldLine);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 9 14;
  opacity: 0.78;
  animation: signalFlow 4.8s linear infinite;
}

.governance-graphic .signal-line--human {
  animation-duration: 6.6s;
  animation-direction: reverse;
}

.governance-graphic .governance-gate rect,
.governance-graphic .boundary-layer rect,
.governance-graphic .audit-layer rect {
  fill: rgba(13, 16, 22, 0.84);
  stroke: rgba(214, 199, 150, 0.32);
  stroke-width: 1.4;
}

.governance-graphic .governance-gate rect {
  stroke: rgba(99, 214, 198, 0.45);
  filter: drop-shadow(0 0 22px rgba(99, 214, 198, 0.16));
}

.governance-graphic .boundary-layer path,
.governance-graphic .audit-ticks {
  fill: none;
  stroke: rgba(212, 182, 111, 0.66);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 22 18;
  animation: auditFlow 5.6s linear infinite;
}

.governance-graphic .audit-ticks {
  stroke: rgba(99, 214, 198, 0.7);
  animation-duration: 4.2s;
}

.governance-graphic .fault-pulse circle {
  fill: rgba(210, 99, 92, 0.22);
  stroke: rgba(210, 99, 92, 0.86);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: faultPulse 3.4s ease-in-out infinite;
}

.governance-graphic .fault-pulse path {
  fill: none;
  stroke: rgba(210, 99, 92, 0.82);
  stroke-width: 2;
  stroke-linecap: round;
}

.governance-graphic .fault-pulse text {
  fill: rgba(210, 99, 92, 0.78);
  font-size: 10px;
}

.governance-graphic .caption {
  fill: rgba(170, 164, 146, 0.78);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-anchor: start;
}

.symmetric-content .author-note {
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.94rem;
}

.symmetric-content .questions-block {
  border-left: 3px solid var(--cyan);
}

@keyframes governanceGlow {
  50% {
    opacity: 0.44;
    transform: scale(1.08);
  }
}

@keyframes governanceRing {
  to {
    stroke-dashoffset: -96;
    transform: rotate(360deg);
  }
}

@keyframes signalFlow {
  to {
    stroke-dashoffset: -46;
  }
}

@keyframes auditFlow {
  to {
    stroke-dashoffset: -40;
  }
}

@keyframes nodeStabilize {
  50% {
    stroke-opacity: 0.42;
    transform: scale(1.025);
  }
}

@keyframes faultPulse {
  50% {
    opacity: 0.35;
    transform: scale(1.6);
  }
}

@media (max-width: 720px) {
  .symmetric-hero .hero-copy h1 {
    font-size: 2.65rem;
  }
}