/* ============== Product Page Styles ============== */

.product-hero {
  position: relative;
  padding: clamp(72px, 10vw, 120px) var(--pad) clamp(48px, 6vw, 80px);
  text-align: center;
  overflow: hidden;
}
.product-hero::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background:
    radial-gradient(ellipse 50% 35% at 50% 30%, oklch(0.94 0.06 285 / 0.45), transparent 70%),
    radial-gradient(ellipse 40% 30% at 30% 70%, oklch(0.95 0.05 80 / 0.35), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.product-hero > * { position: relative; z-index: 2; }
.product-hero h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 16px auto 18px;
  max-width: 18ch;
}
.product-hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.product-hero .lede {
  font-size: 18px;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 auto 32px;
  color: var(--ink-2);
}
.product-hero .hero-cta {
  display: inline-flex;
  gap: 12px;
  margin-top: 8px;
}

/* === Chapter tab nav === */
.chapter-nav {
  position: sticky;
  top: 56px; /* below topbar */
  z-index: 40;
  background: oklch(0.985 0.005 80 / 0.85);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.chapter-nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chapter-nav-inner::-webkit-scrollbar { display: none; }
.chap-tab {
  flex-shrink: 0;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.chap-tab .num {
  font-size: 10px;
  color: var(--ink-4);
  margin-right: 6px;
}
.chap-tab:hover { color: var(--ink); }
.chap-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.chap-tab.active .num { color: var(--accent); }

/* === Chapter sections === */
.chapter {
  position: relative;
  padding: clamp(64px, 9vw, 120px) var(--pad);
  scroll-margin-top: 110px;
}
.chapter:nth-child(even) {
  background: var(--bg-2);
}
.chap-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 6vw, 80px);
  margin-bottom: clamp(40px, 5vw, 64px);
  align-items: end;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 880px) {
  .chap-head { grid-template-columns: 1fr; gap: 24px; }
}
.chap-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chap-num::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.chap-head h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.chap-head h2 em {
  font-style: italic;
  color: var(--accent);
}
.chap-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

/* === Bullet list === */
.chap-bullets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 32px;
  max-width: var(--maxw);
  margin: 0 auto clamp(48px, 6vw, 80px);
  padding-left: 0;
  list-style: none;
}
@media (max-width: 720px) { .chap-bullets { grid-template-columns: 1fr; } }
.chap-bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  font-family: var(--mono);
}
.chap-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 1px;
  background: var(--accent);
}

/* === Feature cards grid === */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
}
@media (max-width: 1100px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }

.feat-card {
  position: relative;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px oklch(0.18 0.012 270 / 0.18);
  border-color: oklch(0.45 0.18 280 / 0.3);
}
.feat-card .fc-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.feat-card h3 {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.feat-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.feat-card .fc-visual {
  height: 90px;
  margin: -4px -4px 0;
  border-radius: 10px;
  background: oklch(0.97 0.005 270);
  border: 1px solid var(--rule-2);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* === Visuals (per-chapter) === */

/* CAPTURE: Brain Dump - typing lines */
.viz-brain-dump {
  background: oklch(0.99 0.005 80);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  gap: 4px;
}
.viz-brain-dump .line {
  height: 6px;
  background: var(--ink);
  border-radius: 2px;
  opacity: 0.18;
  transform-origin: left;
  animation: typeIn 4s ease-out infinite;
}
.viz-brain-dump .line:nth-child(1) { width: 88%; animation-delay: 0s; }
.viz-brain-dump .line:nth-child(2) { width: 72%; animation-delay: 0.2s; }
.viz-brain-dump .line:nth-child(3) { width: 95%; animation-delay: 0.4s; }
.viz-brain-dump .line:nth-child(4) { width: 60%; background: var(--accent); opacity: 0.6; animation-delay: 0.6s; }
.viz-brain-dump .line:nth-child(5) { width: 80%; animation-delay: 0.8s; }
@keyframes typeIn {
  0%, 60%, 100% { transform: scaleX(1); opacity: var(--start, 0.18); }
  30% { transform: scaleX(0); opacity: 0; }
}

/* CAPTURE: Chrome pin */
.viz-chrome-pin {
  background: linear-gradient(135deg, oklch(0.97 0.01 240), oklch(0.95 0.01 240));
  display: flex;
  align-items: center;
  justify-content: center;
}
.viz-chrome-pin .pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px oklch(0.45 0.18 280 / 0.4), 0 0 0 0 oklch(0.45 0.18 280 / 0.4);
  animation: pinPulse 2.4s ease-in-out infinite;
}
@keyframes pinPulse {
  0%, 100% { box-shadow: 0 8px 24px oklch(0.45 0.18 280 / 0.4), 0 0 0 0 oklch(0.45 0.18 280 / 0.4); }
  50% { box-shadow: 0 8px 24px oklch(0.45 0.18 280 / 0.4), 0 0 0 16px oklch(0.45 0.18 280 / 0); }
}

/* CAPTURE: OCR scan */
.viz-ocr {
  background: var(--bg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.viz-ocr .doc {
  width: 60%;
  height: 100%;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  gap: 4px;
  box-shadow: 0 4px 14px -2px oklch(0.18 0.012 270 / 0.1);
}
.viz-ocr .doc-line {
  height: 3px;
  background: var(--ink-3);
  opacity: 0.4;
  border-radius: 2px;
}
.viz-ocr .doc-line:nth-child(1) { width: 60%; }
.viz-ocr .doc-line:nth-child(2) { width: 90%; }
.viz-ocr .doc-line:nth-child(3) { width: 75%; }
.viz-ocr .doc-line:nth-child(4) { width: 80%; }
.viz-ocr .scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: scan 2.4s ease-in-out infinite;
}
@keyframes scan {
  0%, 100% { top: 8%; opacity: 0.8; }
  50% { top: 92%; opacity: 1; }
}

/* CAPTURE: Voice waveform */
.viz-voice {
  background: oklch(0.18 0.012 270);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 24px;
}
.viz-voice .bar {
  width: 3px;
  background: oklch(0.78 0.16 65);
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}
.viz-voice .bar:nth-child(1) { animation-delay: 0s; height: 20%; }
.viz-voice .bar:nth-child(2) { animation-delay: 0.1s; height: 40%; }
.viz-voice .bar:nth-child(3) { animation-delay: 0.2s; height: 65%; }
.viz-voice .bar:nth-child(4) { animation-delay: 0.3s; height: 80%; }
.viz-voice .bar:nth-child(5) { animation-delay: 0.4s; height: 50%; }
.viz-voice .bar:nth-child(6) { animation-delay: 0.5s; height: 70%; }
.viz-voice .bar:nth-child(7) { animation-delay: 0.6s; height: 35%; }
.viz-voice .bar:nth-child(8) { animation-delay: 0.7s; height: 60%; }
.viz-voice .bar:nth-child(9) { animation-delay: 0.8s; height: 45%; }
.viz-voice .bar:nth-child(10) { animation-delay: 0.9s; height: 25%; }
.viz-voice .bar:nth-child(11) { animation-delay: 1s; height: 55%; }
.viz-voice .bar:nth-child(12) { animation-delay: 1.1s; height: 30%; }
.viz-voice .bar:nth-child(13) { animation-delay: 1.2s; height: 65%; }
.viz-voice .bar:nth-child(14) { animation-delay: 1.3s; height: 40%; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* CONNECT: graph */
.viz-graph {
  background: var(--bg-paper);
  position: relative;
}
.viz-graph svg { width: 100%; height: 100%; display: block; }
.viz-graph .gn {
  animation: nodePulse 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.viz-graph .gn:nth-child(2) { animation-delay: 0.3s; }
.viz-graph .gn:nth-child(3) { animation-delay: 0.6s; }
.viz-graph .gn:nth-child(4) { animation-delay: 0.9s; }
.viz-graph .gn:nth-child(5) { animation-delay: 1.2s; }
@keyframes nodePulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.viz-graph .ge {
  stroke-dasharray: 3 3;
  animation: edgeFlow 3s linear infinite;
}
@keyframes edgeFlow { to { stroke-dashoffset: -24; } }

/* CONNECT: decision chain */
.viz-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  gap: 6px;
}
.viz-chain .node {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--ink-3);
  background: var(--bg-paper);
  flex-shrink: 0;
}
.viz-chain .node.active {
  border-color: var(--accent);
  background: oklch(0.92 0.04 285);
}
.viz-chain .arrow {
  flex-shrink: 0;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
}

/* CONNECT: blast radius */
.viz-blast {
  background: oklch(0.99 0.012 65);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.viz-blast .center {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--amber-deep);
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px oklch(0.96 0.10 65);
}
.viz-blast .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--amber-deep);
  opacity: 0;
  animation: blastRing 2.6s ease-out infinite;
}
.viz-blast .ring.r1 { width: 30px; height: 30px; }
.viz-blast .ring.r2 { width: 50px; height: 50px; animation-delay: 0.3s; }
.viz-blast .ring.r3 { width: 70px; height: 70px; animation-delay: 0.6s; }
@keyframes blastRing {
  0% { opacity: 0.7; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* CONNECT: org tree */
.viz-tree {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.viz-tree svg { width: 100%; height: 100%; max-width: 200px; }

/* RECALL: chat bubbles */
.viz-chat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  gap: 6px;
}
.viz-chat .bubble {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-2);
  max-width: 80%;
}
.viz-chat .bubble.you {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  align-self: flex-end;
}
.viz-chat .bubble.cite {
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
  border-color: oklch(0.45 0.18 280 / 0.3);
  background: oklch(0.94 0.04 285);
  padding: 3px 7px;
}
.viz-chat .typing {
  display: flex;
  gap: 3px;
  padding: 8px 10px;
}
.viz-chat .typing span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: typingDot 1.2s ease-in-out infinite;
}
.viz-chat .typing span:nth-child(2) { animation-delay: 0.15s; }
.viz-chat .typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40% { transform: scale(1.1); opacity: 1; }
}

/* RECALL: deepthink dossier */
.viz-dossier {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-items: stretch;
}
.viz-dossier .col {
  background: var(--bg-paper);
  border-top: 2px solid var(--accent);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
}
.viz-dossier .col-line {
  height: 2px;
  background: var(--ink-3);
  opacity: 0.3;
  border-radius: 1px;
}
.viz-dossier .col-line:first-child { background: var(--accent); opacity: 0.7; }
.viz-dossier .col:nth-child(1) { animation: dossierGrow 0.8s 0s ease-out backwards; }
.viz-dossier .col:nth-child(2) { animation: dossierGrow 0.8s 0.15s ease-out backwards; }
.viz-dossier .col:nth-child(3) { animation: dossierGrow 0.8s 0.3s ease-out backwards; }
.viz-dossier .col:nth-child(4) { animation: dossierGrow 0.8s 0.45s ease-out backwards; }
.viz-dossier .col:nth-child(5) { animation: dossierGrow 0.8s 0.6s ease-out backwards; }
@keyframes dossierGrow {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* RECALL: time machine */
.viz-time {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.viz-time .track {
  width: 100%;
  height: 2px;
  background: var(--rule);
  position: relative;
  border-radius: 2px;
}
.viz-time .tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 8px;
  background: var(--ink-3);
}
.viz-time .handle {
  position: absolute;
  top: -8px;
  width: 14px;
  height: 18px;
  background: var(--accent);
  border-radius: 3px;
  margin-left: -7px;
  box-shadow: 0 4px 12px oklch(0.45 0.18 280 / 0.4);
  animation: timeScrub 4s ease-in-out infinite;
}
@keyframes timeScrub {
  0%, 100% { left: 12%; }
  50% { left: 78%; }
}
.viz-time .label-l, .viz-time .label-r {
  position: absolute;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  top: 14px;
}
.viz-time .label-l { left: 16px; }
.viz-time .label-r { right: 16px; }

/* RECALL: anonymous */
.viz-anon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.18 0.012 270);
}
.viz-anon .mask {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.4 0.02 270), oklch(0.25 0.02 270));
  border: 2px dashed oklch(0.7 0.05 270);
  position: relative;
  animation: anonRotate 8s linear infinite;
}
.viz-anon .mask::before, .viz-anon .mask::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: oklch(0.95 0 0);
  top: 12px;
}
.viz-anon .mask::before { left: 8px; }
.viz-anon .mask::after { right: 8px; }
@keyframes anonRotate { to { transform: rotate(360deg); } }

/* RUN: agent rotor */
.viz-agent {
  background: var(--bg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.viz-agent .agent-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  position: relative;
}
.viz-agent .orbit {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1px dashed var(--rule);
  border-radius: 50%;
  animation: orbit 6s linear infinite;
}
.viz-agent .orbit::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  margin-left: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes orbit { to { transform: rotate(360deg); } }

/* RUN: onboarding packet */
.viz-packet {
  background: linear-gradient(135deg, oklch(0.99 0.012 65), oklch(0.96 0.04 75));
  display: flex;
  align-items: center;
  justify-content: center;
}
.viz-packet .stack {
  position: relative;
  width: 50px;
  height: 60px;
}
.viz-packet .sheet {
  position: absolute;
  inset: 0;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 2px 6px -1px oklch(0.18 0.012 270 / 0.08);
}
.viz-packet .sheet:nth-child(1) { transform: rotate(-6deg) translateY(-2px); animation: stackBob 3s ease-in-out infinite; }
.viz-packet .sheet:nth-child(2) { transform: rotate(2deg) translateY(0); animation: stackBob 3s ease-in-out infinite -1s; }
.viz-packet .sheet:nth-child(3) { transform: rotate(-2deg) translateY(2px); animation: stackBob 3s ease-in-out infinite -2s; }
@keyframes stackBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}

/* RUN: action draft */
.viz-draft {
  background: var(--bg-paper);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.viz-draft .draft-line {
  height: 4px;
  background: var(--ink-3);
  opacity: 0.3;
  border-radius: 2px;
  width: 100%;
  transform-origin: left;
  animation: draftWrite 4s ease-out infinite;
}
.viz-draft .draft-line:nth-child(1) { animation-delay: 0s; width: 70%; }
.viz-draft .draft-line:nth-child(2) { animation-delay: 0.4s; width: 90%; }
.viz-draft .draft-line:nth-child(3) { animation-delay: 0.8s; width: 60%; }
.viz-draft .draft-line:nth-child(4) { animation-delay: 1.2s; width: 80%; background: var(--accent); opacity: 0.5; }
@keyframes draftWrite {
  0%, 30%, 100% { transform: scaleX(1); }
  10% { transform: scaleX(0); }
}

/* RUN: run-now button */
.viz-runnow {
  background: var(--bg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.viz-runnow .play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  position: relative;
  cursor: pointer;
}
.viz-runnow .play::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: runRipple 1.6s ease-out infinite;
}
@keyframes runRipple {
  0% { opacity: 0.6; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* GOVERN: rbac matrix */
.viz-rbac {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
}
.viz-rbac .cell {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.viz-rbac .cell.allow { background: oklch(0.94 0.06 145); border-color: oklch(0.7 0.12 145); }
.viz-rbac .cell.deny { background: oklch(0.97 0.02 30); border-color: oklch(0.85 0.04 30); }
.viz-rbac .cell.flash { animation: cellFlash 2.4s ease-in-out infinite; }
@keyframes cellFlash {
  0%, 100% { background: oklch(0.94 0.06 145); }
  50% { background: oklch(0.85 0.10 145); }
}

/* GOVERN: WORM chain */
.viz-worm {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.viz-worm .block {
  flex: 1;
  height: 32px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 7px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}
.viz-worm .block.locked {
  background: oklch(0.18 0.012 270);
  color: oklch(0.78 0.16 65);
  border-color: oklch(0.18 0.012 270);
  animation: blockSeal 3s ease-in-out infinite;
}
@keyframes blockSeal {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.78 0.16 65 / 0); }
  50% { box-shadow: 0 0 0 4px oklch(0.78 0.16 65 / 0.2); }
}
.viz-worm .link {
  color: var(--ink-3);
  font-size: 8px;
}

/* GOVERN: SAML */
.viz-saml {
  background: var(--bg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
}
.viz-saml .lock {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.viz-saml .arrow-flow {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 30px 100%;
  background-repeat: repeat-x;
  animation: samlFlow 1.8s linear infinite;
}
@keyframes samlFlow { to { background-position: 30px 0; } }
.viz-saml .idp {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  font-weight: 500;
}

/* GOVERN: GDPR */
.viz-gdpr {
  background: oklch(0.98 0.005 240);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.viz-gdpr .badge {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  position: relative;
}
.viz-gdpr .badge::after {
  content: "";
  position: absolute;
  inset: -8px -16px;
  border: 1px solid var(--rule);
  border-radius: 24px;
}
.viz-gdpr .check {
  position: absolute;
  right: 20px; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: oklch(0.7 0.15 145);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  margin-top: -7px;
  animation: checkPop 2.6s ease-in-out infinite;
}
@keyframes checkPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* DEPLOY: cloud */
.viz-cloud {
  background: linear-gradient(180deg, oklch(0.97 0.02 240), oklch(0.94 0.04 240));
  display: flex;
  align-items: center;
  justify-content: center;
}
.viz-cloud .cloud {
  font-size: 26px;
  filter: drop-shadow(0 4px 8px oklch(0.45 0.18 280 / 0.3));
  animation: cloudFloat 4s ease-in-out infinite;
}
@keyframes cloudFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* DEPLOY: tenant */
.viz-tenant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
}
.viz-tenant .silo {
  width: 16px;
  height: 50px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 3px 3px 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2px;
  gap: 2px;
}
.viz-tenant .silo.active {
  border-color: var(--accent);
  background: oklch(0.94 0.04 285);
}
.viz-tenant .silo .layer {
  height: 6px;
  background: var(--ink-3);
  opacity: 0.3;
  border-radius: 1px;
}
.viz-tenant .silo.active .layer { background: var(--accent); opacity: 0.7; }

/* DEPLOY: on-prem */
.viz-onprem {
  background: oklch(0.18 0.012 270);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.viz-onprem::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, oklch(0.78 0.16 65 / 0.06) 8px 9px),
    repeating-linear-gradient(90deg, transparent 0 8px, oklch(0.78 0.16 65 / 0.06) 8px 9px);
}
.viz-onprem .server {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.viz-onprem .rack {
  width: 50px;
  height: 8px;
  background: oklch(0.95 0 0);
  border-radius: 1px;
  position: relative;
}
.viz-onprem .rack::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: oklch(0.78 0.16 65);
  box-shadow: 0 0 4px oklch(0.78 0.16 65);
  animation: rackBlink 1.4s ease-in-out infinite;
}
.viz-onprem .rack:nth-child(2)::after { animation-delay: 0.4s; }
.viz-onprem .rack:nth-child(3)::after { animation-delay: 0.8s; }
@keyframes rackBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* DEPLOY: compliance badges */
.viz-compliance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  flex-wrap: wrap;
}
.viz-compliance .badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-paper);
  color: var(--ink-2);
}
.viz-compliance .badge.live {
  background: oklch(0.94 0.06 145);
  border-color: oklch(0.7 0.12 145);
  color: oklch(0.3 0.08 145);
}

/* === Final CTA === */
.product-final {
  position: relative;
  padding: clamp(80px, 10vw, 140px) var(--pad);
  text-align: center;
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
}
.product-final::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background:
    radial-gradient(ellipse 40% 50% at 30% 30%, oklch(0.45 0.18 280 / 0.4), transparent 70%),
    radial-gradient(ellipse 35% 45% at 75% 70%, oklch(0.78 0.16 65 / 0.25), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}
.product-final > * { position: relative; z-index: 2; }
.product-final h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 auto 24px;
}
.product-final h2 em { font-style: italic; color: oklch(0.78 0.16 65); }
.product-final p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto 36px;
  color: oklch(0.85 0.005 270);
}
.product-final .cta-row {
  display: inline-flex;
  gap: 14px;
}
.product-final .btn-light {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--bg);
}
.product-final .btn-light:hover {
  background: oklch(0.9 0 0);
}
.product-final .btn-outline {
  background: transparent;
  color: var(--bg);
  border: 1px solid oklch(1 0 0 / 0.3);
}
.product-final .btn-outline:hover {
  border-color: var(--bg);
  background: oklch(1 0 0 / 0.06);
}

/* Reveal observer hook */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.in {
  opacity: 1;
  transform: translateY(0);
}