/* PlayServ components */

/* ==== Layout ==== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.container-narrow { max-width: 960px; }
.container-wide   { max-width: 1440px; }

/* ==== Top Nav ==== */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(8,8,13,0.72);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex; align-items: center; gap: 32px;
  height: 60px;
  padding: 0 32px;
  max-width: 1440px; margin: 0 auto;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em;
}
.nav-logo-mark {
  width: 7px; height: 7px;
  background: url('logo.png') center / contain no-repeat;
  flex-shrink: 0;
}
.nav-logo img.nav-logo-mark-img {
  width: 7px; height: 7px; object-fit: contain;
}
.nav-links {
  display: flex; gap: 4px; align-items: center;
  margin-left: 12px;
}
.nav-link {
  padding: 7px 12px; border-radius: var(--r-2);
  color: var(--text-3); font-size: 13.5px; font-weight: 500;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--text-1); background: var(--surface); }
.nav-link.active { color: var(--text-1); background: var(--surface); }
.nav-link-caret::after {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 6px; opacity: .6;
}
.nav-spacer { flex: 1; }
.nav-actions { display: flex; gap: 8px; align-items: center; }

/* ==== Nav dropdown (Platform menu) ==== */
.nav-dropdown { position: relative; }
.nav-dropdown > .nav-link { cursor: pointer; }
.nav-menu {
  position: absolute; top: 100%; left: -12px;
  margin-top: 10px;
  min-width: 640px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  padding: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03);
  opacity: 0;
  visibility: hidden;
  /* pointer-events: auto always — visibility: hidden keeps the menu
     non-interactive while hidden, so this is safe. When shown, the menu
     and its ::before bridge immediately catch the cursor. */
  pointer-events: auto;
  transform: translateY(-6px);
  /* HIDE path: opacity fades 150ms, visibility WAITS 150ms before
     flipping to hidden — gives the cursor a grace period to cross the
     10px gap and land inside the menu (or its ::before bridge), at
     which point :has(.nav-menu:hover) keeps the menu open. */
  transition: opacity .15s, transform .15s, visibility 0s .15s;
  z-index: 60;
}
/* Invisible bridge across the 10px gap. Anchored to .nav-menu so it
   inherits the always-on pointer-events: auto. Catches the cursor when
   traversing from "Pillars" link to menu content. */
.nav-menu::before {
  content: ''; position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu,
.nav-dropdown:has(.nav-menu:hover) .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* SHOW path: visibility flips instantly. */
  transition: opacity .15s, transform .15s, visibility 0s 0s;
}
.nav-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.nav-menu-col h5 {
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-4); margin: 4px 8px 8px;
}
.nav-menu.is-pillars { min-width: 360px; }
.nav-menu.is-pillars .nav-menu-col { display: grid; gap: 2px; }
.nav-menu-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-2);
  transition: background .12s;
}
.nav-menu-item:hover { background: var(--surface); }
.nav-menu-item.active { background: var(--surface); }
.nav-menu-item .mid {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 10.5px/1 var(--font-mono);
  background: var(--surface-2); border: 1px solid var(--border);
  color: currentColor; flex-shrink: 0;
}
.nav-menu-item .dot {
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 7px; flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.nav-menu-item .t { font: 500 13px/1.2 var(--font-sans); color: var(--text-1); }
.nav-menu-item .d { font: 500 11px/1.3 var(--font-mono); color: var(--text-4); margin-top: 3px; letter-spacing: 0.02em; }
.nav-menu-item.soon .t { color: var(--text-3); }
.nav-menu-item.soon .t::after {
  content: 'soon';
  display: inline-block; margin-left: 6px;
  font: 500 9px/1 var(--font-mono); letter-spacing: 0.1em;
  padding: 2px 5px; border-radius: 4px;
  color: var(--text-4); background: var(--surface-2);
  border: 1px solid var(--border);
  transform: translateY(-1px);
}
.nav-menu-foot {
  border-top: 1px dashed var(--border);
  margin-top: 10px; padding-top: 10px;
  display: flex; gap: 16px; align-items: center;
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.02em;
}
.nav-menu-foot a { color: var(--text-3); padding: 4px 6px; border-radius: 4px; }
.nav-menu-foot a:hover { color: var(--text-1); background: var(--surface); }
.nav-menu-foot .spacer { flex: 1; }
.nav-menu-foot .cta { color: var(--accent-hi); }
.nav-menu-foot .cta:hover { color: #fff; background: var(--accent-soft); }

/* ==== Mobile nav ==== */
.nav-burger { display: none; }
@media (max-width: 880px) {
  .nav-links, .nav-actions .btn-ghost, .nav-actions .btn-secondary { display: none; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--r-2);
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); cursor: pointer;
  }
}

/* ==== Buttons ==== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font: 500 13.5px/1 var(--font-sans);
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.btn-ghost { color: var(--text-2); background: transparent; }
.btn-ghost:hover { color: var(--text-1); background: var(--surface); }
.btn-secondary {
  color: var(--text-1);
  background: var(--surface);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 20px -8px var(--accent-glow);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-lg { padding: 12px 22px; font-size: 14.5px; border-radius: var(--r-3); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }

/* ==== Badges / chips ==== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font: 500 11.5px/1 var(--font-sans);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.chip-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.chip-accent { color: var(--accent-hi); background: var(--accent-soft); border-color: transparent; }
.chip-emerald { color: var(--emerald); background: var(--emerald-soft); border-color: transparent; }
.chip-cyan { color: var(--cyan); background: var(--cyan-soft); border-color: transparent; }
.chip-amber { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.chip-rose { color: var(--rose); background: var(--rose-soft); border-color: transparent; }

/* ==== Status chips ====
   Use for "this module is live / specced / in beta" badges in hero chip rows.
   One class, multiple variants — replaces the inline .specced-banner and
   .live-banner definitions that were duplicated across feature pages. */
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  font: 500 var(--text-xs)/1 var(--font-mono);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.status-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.status-chip.live     { color: var(--success); background: var(--success-soft); }
.status-chip.specced  { color: var(--warning); background: var(--warning-soft); }
.status-chip.beta     { color: var(--info);    background: var(--info-soft); }
.status-chip.alert    { color: var(--danger);  background: var(--danger-soft); }
.status-chip.featured { color: var(--accent-hi); background: var(--accent-soft); }
/* Editorial label on a synthetic (non-real-customer) story page. Dashed ring
   + star glyph marks it as "sample journey" — readable text, not decoration. */
.status-chip.sample {
  color: var(--text-2); background: transparent;
  border: 1px dashed var(--border-strong);
  padding: 4px 10px;
}
.status-chip.sample::before {
  content: '\2736'; /* six-pointed star */
  width: auto; height: auto;
  background: transparent; box-shadow: none;
  color: var(--accent-hi); font-size: 11px; line-height: 1;
}
/* Real customer story counterpart — solid violet for trust parity. */
.status-chip.real-studio { color: var(--accent-hi); background: var(--accent-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.eyebrow::before {
  content: ''; width: 18px; height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ==== Cards ==== */
.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: 24px;
}
.card-hover { transition: all .2s; }
.card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

/* Card modifiers — compose with .card to express intent without inventing
   a new class every time. Most bespoke per-page cards (.why-card, .contact-card,
   etc.) can collapse into .card + one or two modifiers. */
.card.is-flat {
  /* Neutral flat background — overrides the default gradient on .card. */
  background: var(--bg-2);
}
.card.is-sm { padding: var(--space-4); border-radius: var(--r-3); }
.card.is-lg { padding: var(--space-6); border-radius: var(--r-5); }
.card.is-interactive {
  cursor: pointer;
  transition: border-color var(--t-base), transform var(--t-base);
}
.card.is-interactive:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.card.is-accent {
  border-color: var(--accent-lo);
  box-shadow: 0 0 0 1px var(--accent-lo), 0 20px 60px -30px var(--accent-glow);
}
.card.is-dashed {
  border-style: dashed;
  background: color-mix(in srgb, var(--bg-2), var(--bg-0) 40%);
}

/* ==== Typography ==== */
.display-1 {
  font: 600 clamp(44px, 6vw, 82px)/1.02 var(--font-display);
  letter-spacing: -0.035em;
  margin: 0;
}
.display-2 {
  font: 600 clamp(34px, 4.5vw, 56px)/1.05 var(--font-display);
  letter-spacing: -0.03em;
  margin: 0;
}
.display-3 {
  font: 600 clamp(26px, 3vw, 38px)/1.1 var(--font-display);
  letter-spacing: -0.025em;
  margin: 0;
}
.lead {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 640px;
}
.text-muted { color: var(--text-3); }
.text-dim   { color: var(--text-4); }
.gradient-text {
  background: linear-gradient(135deg, var(--accent-hi), var(--cyan) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==== Grid backdrop (dev-tool style) ==== */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 80%);
  opacity: 0.35;
}
.glow {
  position: absolute; pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}

/* ==== Section wrapper ==== */
section { position: relative; padding: 96px 0; }
section.tight { padding: 64px 0; }

/* ==== Home redesign: pillar cards / story cards / pricing snapshot ====
   Composable modifiers for the four-page-type IA. Pillar and story cards
   reuse .card / .card.is-interactive; the pillar color is passed via
   --pillar-c (set per-card inline on the element). */

/* Pillar card — 3x2 grid on Home; also used on Pillar pages' "sibling pillars" row. */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.pillar-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--space-6);
  border-top: 2px solid var(--pillar-c, var(--border-strong));
  color: inherit; text-decoration: none;
  position: relative;
}
.pillar-card .pillar-card-head {
  display: flex; align-items: center; gap: 10px;
}
.pillar-card .pillar-card-head .chip-dot {
  display: inline-flex; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pillar-c, var(--accent)); flex-shrink: 0;
  box-shadow: 0 0 10px var(--pillar-c, var(--accent));
}
.pillar-card .chip-dot::before { content: none; }
.pillar-card .pillar-card-head .pillar-name {
  font: 600 22px/1.15 var(--font-display); letter-spacing: -0.02em;
  color: var(--text-1);
}
.pillar-card .pillar-card-desc {
  font-size: 14px; line-height: 1.55; color: var(--text-3);
  margin: 0;
}
.pillar-card .pillar-card-foot {
  margin-top: auto; padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.02em;
  color: var(--text-4);
}
.pillar-card .pillar-card-foot .arrow { color: var(--pillar-c, var(--accent-hi)); }

/* Story card — 3-up on Home, 1-3 on Pillar/Module pages. */
.story-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.story-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--space-5);
  color: inherit; text-decoration: none;
}
.story-card .story-card-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em;
  color: var(--text-4); text-transform: uppercase;
}
.story-card .story-card-title {
  font: 600 20px/1.2 var(--font-display); letter-spacing: -0.02em;
  color: var(--text-1); margin: 0;
}
.story-card .story-card-pains {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 6px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-3);
}
.story-card .story-card-pains li { padding-left: 14px; position: relative; }
.story-card .story-card-pains li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1px; background: var(--border-strong);
}
.story-card .story-card-foot {
  margin-top: auto; padding-top: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em;
  color: var(--text-4); text-transform: uppercase;
}

/* Pricing snapshot — compact 3-up; one row per billing line. */
.pricing-snap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.pricing-snap-tier {
  padding: var(--space-5);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
}
.pricing-snap-tier .label {
  font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.12em;
  color: var(--text-4); text-transform: uppercase;
  margin-bottom: 12px;
}
.pricing-snap-tier .line {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; color: var(--text-3);
  margin-bottom: 4px;
}
.pricing-snap-tier .line strong { color: var(--text-1); font-weight: 600; font-size: 15px; }
.pricing-snap-tier .line .price { color: var(--accent-hi); font-family: var(--font-mono); font-size: 12px; margin-left: auto; }
.pricing-snap-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em;
  color: var(--text-3);
}
.pricing-snap-link:hover { color: var(--text-1); }

@media (max-width: 980px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .story-strip, .pricing-snap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

/* ==== Pillar page helpers ====
   Composable blocks for /sync, /realm, /stage, /vault, /passport, /signals.
   All read --pillar-c set on body[style] per page. */

.persona-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.persona-card {
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: 10px;
}
.persona-card .persona-role {
  font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.12em;
  color: var(--pillar-c, var(--accent-hi)); text-transform: uppercase;
}
.persona-card h3 {
  margin: 0; font: 600 17px/1.25 var(--font-display); letter-spacing: -0.015em;
  color: var(--text-1);
}
.persona-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-3); }

.mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mod-list li {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 4px;
  border-top: 1px dashed var(--border);
}
.mod-list li:first-child { border-top: none; padding-top: 4px; }
.mod-list .mod-icon { width: 36px; height: 36px; font-size: 11px; }
.mod-list .mod-title { font: 500 14.5px/1.3 var(--font-sans); color: var(--text-1); }
.mod-list .mod-desc { font-size: 13px; color: var(--text-3); line-height: 1.5; margin-top: 2px; }
.mod-list .mod-link { color: var(--pillar-c, var(--accent-hi)); font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em; }

.pillar-chips {
  display: inline-flex; flex-wrap: wrap; gap: 6px;
}
.pillar-chips .chip { font-size: 11px; }

/* Pillar hero eyebrow gets the pillar color when scoped by .is-pillar. */
.eyebrow.is-pillar { color: var(--pillar-c, var(--accent-hi)); }
.eyebrow.is-pillar::before { background: var(--pillar-c, var(--accent)); box-shadow: 0 0 8px var(--pillar-c, var(--accent-glow)); }

@media (max-width: 880px) {
  .persona-row { grid-template-columns: 1fr; }
  .mod-list li { grid-template-columns: 36px 1fr; gap: 10px; }
  .mod-list .mod-link { grid-column: 2; justify-self: start; }
}

/* ==== Story page helpers ====
   Editorial, pain-forward surfaces at /stories/*. Dark-theme by default;
   a lighter weight + narrower column signals "article, not product page". */

.story-hero {
  position: relative;
  padding: 88px 0 52px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.story-hero .grid-bg { opacity: 0.18; }
.story-hero .container { position: relative; z-index: 1; max-width: 920px; }
.story-hero .meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.story-hero .story-h1 {
  font: 500 clamp(38px, 5vw, 68px)/1.05 var(--font-display);
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0 0 22px;
}
.story-hero .story-sub {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 620px;
  margin: 0 0 28px;
}

.story-narrative {
  display: grid; gap: var(--space-6);
  max-width: 760px;
  margin: 0 auto;
  padding-left: 0;
  position: relative;
}
.story-narrative::before {
  content: ''; position: absolute;
  top: 18px; bottom: 18px; left: 15px;
  width: 1px; background: var(--border);
}
.day-block {
  position: relative;
  padding-left: 52px;
}
.day-number {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font-mono); color: var(--text-2);
  z-index: 1;
}
.day-label {
  display: inline-block;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em;
  color: var(--text-4); text-transform: uppercase;
  margin-right: 8px;
  vertical-align: middle;
}
.day-block h2 {
  font: 600 22px/1.25 var(--font-display); letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 0 0 10px;
}
.day-block p {
  margin: 0 0 10px;
  font-size: 15.5px; line-height: 1.7; color: var(--text-2);
}
.day-block p:last-child { margin-bottom: 0; }

.story-pullquote {
  margin: var(--space-6) auto;
  padding: var(--space-5) var(--space-6);
  max-width: 760px;
  border-left: 2px solid var(--accent-lo);
  background: var(--bg-2);
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--text-1);
  font-weight: 500;
}
.story-pullquote .attrib {
  display: block; margin-top: 14px;
  font: 500 12px/1 var(--font-mono); color: var(--text-4);
  letter-spacing: 0.04em;
}

.escape-hatch {
  max-width: 760px; margin: 0 auto;
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
}
.escape-hatch .eh-text { color: var(--text-2); font-size: 14.5px; line-height: 1.55; flex: 1; min-width: 260px; }
.escape-hatch .eh-text strong { color: var(--text-1); }

.competitor-callout {
  max-width: 820px; margin: 0 auto;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--rose);
  border-radius: var(--r-3);
  padding: var(--space-5) var(--space-6);
  background: color-mix(in srgb, var(--rose-soft), transparent 20%);
}
.competitor-callout h3 {
  margin: 0 0 8px;
  font: 600 15px/1.3 var(--font-sans); color: var(--rose);
  display: flex; align-items: center; gap: 8px;
}
.competitor-callout h3::before {
  content: '⚠'; font-size: 16px; line-height: 1;
}
.competitor-callout p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }

/* ==== Footer ==== */
.footer {
  border-top: 1px solid var(--border);
  padding: 48px 0;
  background: var(--bg-1);
  color: var(--text-3);
  font-size: 13px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
.footer h3 {
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2); margin: 0 0 16px;
}
.footer a { display: block; padding: 4px 0; color: var(--text-3); }
.footer a:hover { color: var(--text-1); }

/* ==== Module icon ==== */
.mod-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  position: relative;
}
.mod-icon.lg { width: 44px; height: 44px; font-size: 14px; border-radius: 10px; }

/* ==== Code pill ==== */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.kbd {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 4px;
  font: 500 11px/1.3 var(--font-mono);
  color: var(--text-2);
  box-shadow: 0 1px 0 var(--border);
}

/* ==== Divider line ==== */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

/* ==== Footer legal bar ==== */
.footer-legal {
  border-top: 1px solid var(--border);
  padding: 18px 0 6px;
  margin-top: 32px;
  font-size: 12px;
  color: var(--text-4);
}
.footer-legal-inner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: 0.02em;
}
.footer-legal-inner .legal-sep { flex: 1; }
.footer-legal-inner .legal-addr { color: var(--text-4); }
.footer-legal-inner a { color: var(--text-3); padding: 4px 0; }
.footer-legal-inner a:hover { color: var(--text-1); }

/* Footer social icon row (Block 09 — above legal addr) */
.footer-socials {
  display: flex; gap: 10px;
  padding: 4px 0 14px;
}
.footer-socials a {
  color: var(--text-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: var(--text-1);
  background: var(--surface);
}
.footer-socials svg { width: 20px; height: 20px; display: block; }

/* ==== Legal page layout ==== */
.legal {
  padding: 72px 0 56px;
}
.legal .legal-head {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.legal .legal-head h1 {
  font: 600 clamp(32px, 4.2vw, 48px)/1.1 var(--font-display);
  letter-spacing: -0.03em;
  margin: 14px 0 8px;
}
.legal .legal-head .meta {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-4);
}
.legal-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 60px;
}
.legal-toc {
  position: sticky; top: 80px;
  align-self: start;
  font: 500 13px/1.6 var(--font-sans);
}
.legal-toc h3 {
  margin: 0 0 10px; font: 600 10.5px/1 var(--font-mono);
  color: var(--text-4); letter-spacing: 0.12em; text-transform: uppercase;
}
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc ol li {
  counter-increment: toc;
  padding: 4px 0;
}
.legal-toc ol li::before {
  content: counter(toc, decimal-leading-zero) '  ';
  color: var(--text-4); font-family: var(--font-mono); font-size: 11.5px;
}
.legal-toc a { color: var(--text-3); }
.legal-toc a:hover { color: var(--text-1); }

.legal-content h2 {
  font: 600 22px/1.2 var(--font-display); letter-spacing: -0.02em;
  margin: 40px 0 14px;
  scroll-margin-top: 80px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font: 600 16px/1.3 var(--font-sans); color: var(--text-1);
  margin: 22px 0 8px;
}
.legal-content p, .legal-content li {
  color: var(--text-2); font-size: 15px; line-height: 1.65;
}
.legal-content p { margin: 0 0 14px; }
.legal-content ul, .legal-content ol { padding-left: 22px; margin: 0 0 14px; }
.legal-content li { margin-bottom: 6px; }
.legal-content strong { color: var(--text-1); font-weight: 600; }
.legal-content a { color: var(--accent-hi); text-decoration: underline; text-decoration-color: var(--accent-lo); text-underline-offset: 3px; }
.legal-content a:hover { color: var(--text-1); }
.legal-content .callout {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-2);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 14px;
  color: var(--text-2);
}
.legal-content .callout b { color: var(--text-1); }

@media (max-width: 900px) {
  .legal-body { grid-template-columns: 1fr; gap: 24px; }
  .legal-toc { position: static; }
}

/* ==== Cookie banner ==== */
.cookie-banner {
  position: fixed; bottom: 18px; right: 18px;
  max-width: 420px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.55;
  z-index: 200;
  transform: translateY(30px); opacity: 0;
  transition: transform .25s ease-out, opacity .25s ease-out;
  pointer-events: none;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner h3 { margin: 0 0 6px; font: 600 14.5px/1.3 var(--font-sans); color: var(--text-1); }
.cookie-banner p { margin: 0 0 14px; color: var(--text-3); font-size: 13px; }
.cookie-banner p a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner .row { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner button {
  padding: 8px 14px; border-radius: 6px;
  font: 500 13px/1 var(--font-sans);
  cursor: pointer; border: 1px solid transparent;
  transition: all .15s;
}
.cookie-banner .btn-a {
  color: #fff;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 20px -8px var(--accent-glow);
}
.cookie-banner .btn-a:hover { filter: brightness(1.08); }
.cookie-banner .btn-b {
  background: var(--surface); color: var(--text-1);
  border-color: var(--border-strong);
}
.cookie-banner .btn-b:hover { background: var(--surface-2); border-color: var(--accent-lo); }
@media (max-width: 560px) {
  .cookie-banner { left: 14px; right: 14px; max-width: none; bottom: 14px; }
}

/* ==== v4 — Platform tier (Fix 5) ====
   6+3 homepage split. Primary pillars (P1-P6) live in .pillar-grid above;
   platform pillars (P7-P9) live in this demoted banner. Distinct visual
   weight: darker surface, horizontal mini-cards, smaller title, no
   per-card module-list foot. */

.platform-tier {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
}
.platform-tier-head {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: var(--space-5);
  max-width: 640px;
}
.platform-tier-head .eyebrow { color: var(--text-4); }
.platform-tier-head .eyebrow::before { background: var(--border-strong); box-shadow: none; }
.platform-tier-head h2 {
  margin: 6px 0 0;
  font: 600 22px/1.2 var(--font-display); letter-spacing: -0.02em;
  color: var(--text-1);
}
.platform-tier-head p {
  margin: 4px 0 0; font-size: 14px; color: var(--text-3); line-height: 1.55;
}
.platform-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.platform-pillar-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  color: inherit; text-decoration: none;
  transition: border-color .18s, transform .18s;
}
.platform-pillar-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.platform-pillar-card .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pillar-c, var(--accent-hi));
  box-shadow: 0 0 8px var(--pillar-c, var(--accent));
  flex-shrink: 0;
}
.platform-pillar-card .pp-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.platform-pillar-card .pp-name {
  font: 600 17px/1.2 var(--font-display); letter-spacing: -0.015em;
  color: var(--text-1);
}
.platform-pillar-card .pp-desc {
  font-size: 13px; color: var(--text-3); line-height: 1.45;
}
.platform-pillar-card .arrow {
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em;
  color: var(--pillar-c, var(--accent-hi));
}
.platform-tier-foot {
  margin-top: var(--space-5);
  display: flex; justify-content: flex-end;
}
.platform-tier-foot a {
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em;
  color: var(--text-3);
}
.platform-tier-foot a:hover { color: var(--text-1); }

@media (max-width: 980px) {
  .platform-tier-grid { grid-template-columns: 1fr; }
}

/* ==== v4 — Nav dropdown platform group ==== */
.nav-menu.is-pillars.has-platform { min-width: 380px; max-height: 80vh; overflow-y: auto; }
.nav-menu-section-label {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-4);
  padding: 6px 10px 4px;
}
.nav-menu-divider {
  height: 1px; margin: 8px 10px 4px;
  background: var(--border);
}
.nav-menu-item.is-platform .t { color: var(--text-2); }
.nav-menu-item.is-platform .d { color: var(--text-4); }

/* ==== v4 — Platform pillar eyebrow modifier ====
   Used on stub pillar pages (/code, /ai, /deploy) to visually distinguish
   them from primary pillar pages. Dotted leading bar instead of a solid line. */
.eyebrow.is-pillar.is-platform::before {
  background: transparent;
  border-top: 1px dotted var(--pillar-c, var(--accent));
  box-shadow: none;
}

/* ==== v4 — Commissioned-story placeholder ====
   Replaces .story-strip on stub pillar pages until anchor stories ship. */
.proof-commissioned {
  padding: var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-3);
  background: transparent;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  max-width: 720px;
}
.proof-commissioned .label {
  font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.12em;
  color: var(--text-4); text-transform: uppercase;
}
.proof-commissioned p {
  margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55;
}
.proof-commissioned p strong { color: var(--text-1); font-weight: 600; }
.proof-commissioned .cta {
  margin-top: 4px;
  font: 500 13px/1 var(--font-mono); color: var(--pillar-c, var(--accent-hi));
  letter-spacing: 0.02em;
}
.proof-commissioned .cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ========================================================================
   v6 — Persona chip on pillar cards (Home).
   Persona chip sits on the left, "Learn more →" arrow on the right —
   single horizontal row inside the existing .pillar-card-foot. Adds
   gap + flex-wrap so long chips on narrow viewports collapse cleanly.
   ======================================================================== */
.pillar-card .pillar-card-foot {
  gap: 10px;
  flex-wrap: wrap;
}
.pillar-card .pillar-card-foot-row {
  display: contents;
}
.persona-tag {
  font: 600 10.5px/1 var(--font-mono);
  color: var(--pillar-c, var(--accent-hi));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 35%, transparent);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 8%, transparent);
  white-space: nowrap;
}

/* ========================================================================
   v6 — "Four answers, not forty" why-us 4-up strip on Home.
   Section sits between #pillars and #stories. Governance amendment
   approved 2026-04-30: home cap expands from 5 to 6 content blocks.
   ======================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.why-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.why-icon {
  font-size: 28px;
  color: var(--accent-hi);
  line-height: 1;
}
.why-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}
.why-card p {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 980px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   v6 — Demoted "Log in" CTA in nav (was btn-ghost btn-sm).
   Restores 1+1 primary CTA hierarchy: Book demo + Start free remain
   visually primary; Log in becomes a quiet text-link, hidden on mobile
   to recover attention budget on small viewports.
   ======================================================================== */
.nav-login {
  font: 500 13px/1 var(--font-sans);
  color: var(--text-3);
  text-decoration: none;
  padding: 6px 10px;
  transition: color var(--t-fast) var(--ease);
}
.nav-login:hover,
.nav-login:focus-visible { color: var(--text-1); }
@media (max-width: 768px) {
  .nav-login { display: none; }
}

/* ========================================================================
   v6.5 — Canvas viz family (Raycast-inspired, 2026).
   Promoted from index.html inline. Reused by home + 6 pillar pages.

   Anatomy: chrome bar (frosted) + dot-grid backplate + bespoke SVG
   geometry inside. Each instance overrides --viz-aspect and supplies its
   own SVG paths + nodes. Pillar tinting flows through --pillar-c (set on
   <body data-pillar="…"> per CLAUDE.md §4); home uses default accent.

   Animation budget: ≤5 simultaneous loops per instance. All GPU-only
   (transform, opacity). Reduced-motion neutralizes everything.
   ======================================================================== */
.canvas-viz {
  position: relative;
  aspect-ratio: var(--viz-aspect, 1.2 / 1);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 12%, transparent), transparent 60%),
    var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.9),
              0 0 0 1px color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 12%, transparent);
  overflow: hidden;
}
.canvas-viz::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* Aurora — three drifting gradient blobs. Add child element <div class="viz-aurora">
   to opt in (home doesn't use it; pillar full-section viz does). */
.viz-aurora {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.viz-aurora::before,
.viz-aurora::after {
  content: '';
  position: absolute;
  width: 60%; height: 70%;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  will-change: transform;
}
.viz-aurora::before {
  top: -10%; left: -5%;
  background: var(--pillar-c, var(--accent-hi));
  animation: aurora-drift 18s ease-in-out infinite;
}
.viz-aurora::after {
  bottom: -15%; right: -10%;
  background: var(--cyan, #22D3EE);
  opacity: 0.12;
  animation: aurora-drift 22s ease-in-out infinite reverse;
}

/* Chrome — frosted Raycast-style header */
.canvas-viz .chrome {
  position: absolute; top: 0; left: 0; right: 0;
  height: 34px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  display: flex; align-items: center; padding: 0 12px; gap: 8px;
  font: 500 11px/1 var(--font-mono); color: var(--text-4);
  z-index: 2;
}
.canvas-viz .chrome .tl { display: flex; gap: 6px; }
.canvas-viz .chrome .tl span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong);
}
.canvas-viz .chrome .tl span:nth-child(1) { background: #ff5f57; }
.canvas-viz .chrome .tl span:nth-child(2) { background: #febc2e; }
.canvas-viz .chrome .tl span:nth-child(3) { background: #28c840; }
.canvas-viz .chrome .path { flex: 1; text-align: center; opacity: 0.75; }
.canvas-viz .chrome .live { color: var(--emerald, #10B981); }

/* Mono command pill — Raycast cmd-K affordance in chrome bar */
.viz-cmd {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 10.5px/1 var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.viz-cmd kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  font: 600 9.5px/1 var(--font-mono);
  color: var(--text-2);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
}

/* Nodes — positioned cards inside the SVG layer */
.viz-node {
  position: absolute;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 8px 10px;
  min-width: 116px;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.8);
  font-size: 11px;
  z-index: 3;
}
.viz-node .head { display: flex; gap: 7px; align-items: center; }
.viz-node .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.viz-node .t {
  font: 600 11.5px/1.1 var(--font-sans); color: var(--text-1);
  letter-spacing: -0.01em;
}
.viz-node .m {
  font: 500 9.5px/1 var(--font-mono); color: var(--text-4);
  margin-top: 3px; letter-spacing: 0.05em;
}
.viz-node.hot {
  border-color: var(--pillar-c, var(--accent-hi));
  box-shadow: 0 0 0 1px var(--pillar-c, var(--accent-hi)),
              0 8px 22px -6px color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 45%, transparent);
  animation: pulse-glow 2.4s ease-in-out infinite;
}
.viz-node.hot .dot { box-shadow: 0 0 10px currentColor; }

/* Pulses — traveling dots along bezier paths */
.viz-pulse {
  --pulse-c: var(--pillar-c, var(--accent-hi));
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pulse-c);
  box-shadow: 0 0 12px var(--pulse-c),
              0 0 24px color-mix(in srgb, var(--pulse-c) 55%, transparent);
  transform: translate(-50%, -50%);
  animation: flow 3s linear infinite;
  opacity: 0;
  z-index: 4;
}

/* Status pills — LIVE / DRAFT / SIGNED / MERGED / SCHEDULED / REJECT */
.viz-status {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: var(--r-1, 4px);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-3);
  white-space: nowrap;
}
.viz-status::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.viz-status.live {
  color: var(--emerald, #10B981);
  border-color: color-mix(in srgb, var(--emerald, #10B981) 40%, transparent);
  background: color-mix(in srgb, var(--emerald, #10B981) 8%, transparent);
}
.viz-status.draft {
  color: var(--text-3);
  border-style: dashed;
}
.viz-status.scheduled {
  color: var(--text-4);
  border-color: var(--border);
}
.viz-status.signed,
.viz-status.merged {
  color: var(--pillar-c, var(--accent-hi));
  border-color: color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 40%, transparent);
  background: color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 10%, transparent);
}
.viz-status.reject {
  color: #FB7185;
  border-color: color-mix(in srgb, #FB7185 35%, transparent);
  background: color-mix(in srgb, #FB7185 8%, transparent);
}

/* === Metaphor extensions === */

/* viz-zones — Realm hex grid */
.viz-zones {
  position: absolute; inset: 34px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  padding: 22px;
  z-index: 2;
}
.viz-zone {
  position: relative;
  background: color-mix(in srgb, var(--zone-c, var(--pillar-c, var(--accent-hi))) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--zone-c, var(--pillar-c, var(--accent-hi))) 35%, transparent);
  border-radius: var(--r-2, 6px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px;
  font: 500 10px/1.2 var(--font-mono);
  color: color-mix(in srgb, var(--zone-c, var(--pillar-c, var(--accent-hi))) 70%, var(--text-2));
  letter-spacing: 0.05em;
}
.viz-zone .zone-label { font-weight: 600; text-transform: uppercase; }
.viz-zone .zone-meta { color: var(--text-4); font-size: 9px; }

/* viz-timeline — Stage swim lanes */
.viz-timeline {
  position: absolute; inset: 50px 22px 22px 22px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0;
  z-index: 2;
}
.viz-tl-row {
  display: contents;
}
.viz-tl-name {
  font: 600 10px/1 var(--font-mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 8px;
  border-top: 1px solid var(--border);
}
.viz-tl-track {
  position: relative;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  padding: 8px 0;
}
.viz-tl-event {
  position: absolute;
  height: 22px;
  padding: 0 9px;
  display: inline-flex; align-items: center;
  font: 500 10px/1 var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-1, 4px);
  color: var(--text-2);
  white-space: nowrap;
}
.viz-tl-event.is-live {
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border-color: color-mix(in srgb, var(--emerald, #10B981) 50%, transparent);
  color: var(--emerald, #10B981);
}
.viz-tl-event.is-draft {
  background: transparent;
  border-style: dashed;
  color: var(--text-3);
}
.viz-tl-event.is-flipping {
  animation: status-flip 4.5s ease-in-out infinite;
}

/* viz-ledger — Vault receipt chain */
.viz-ledger {
  position: absolute; inset: 50px 22px 22px 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  z-index: 2;
}
.viz-ledger-step {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3, 10px);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.viz-ledger-step.is-signed {
  border-color: var(--pillar-c, var(--accent-hi));
  box-shadow: 0 0 0 1px var(--pillar-c, var(--accent-hi)),
              0 12px 30px -12px color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 40%, transparent);
  animation: pulse-glow 2.4s ease-in-out infinite;
}
.viz-ledger-step .step-num {
  font: 600 9px/1 var(--font-mono); color: var(--text-4);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.viz-ledger-step .step-title {
  font: 600 13px/1.2 var(--font-display); color: var(--text-1);
}
.viz-ledger-hash {
  font: 500 10px/1 var(--font-mono); color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  letter-spacing: 0.05em;
  align-self: flex-start;
}

/* viz-merge — Passport identity convergence */
.viz-merge {
  position: absolute; inset: 50px 22px 22px 22px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px;
  align-items: center;
  z-index: 2;
}
.viz-merge-sources {
  display: flex; flex-direction: column; gap: 12px;
}
.viz-merge-source {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2, 6px);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-2);
}
.viz-merge-source .src-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--src-c, var(--text-4));
  box-shadow: 0 0 8px var(--src-c, var(--text-4));
}
.viz-merge-target {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 20%, var(--bg-2)),
    var(--bg-2));
  border: 1px solid var(--pillar-c, var(--accent-hi));
  border-radius: var(--r-3, 10px);
  padding: 16px;
  text-align: center;
  box-shadow: 0 0 0 1px var(--pillar-c, var(--accent-hi)),
              0 14px 36px -10px color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 40%, transparent);
  animation: pulse-glow 3s ease-in-out infinite;
}
.viz-merge-target .target-id {
  font: 600 12px/1 var(--font-mono); color: var(--pillar-c, var(--accent-hi));
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 6px;
}
.viz-merge-target .target-handle {
  font: 600 18px/1 var(--font-display); color: var(--text-1);
}

/* viz-waterfall — Signals cross-module event drops */
.viz-waterfall {
  position: absolute; inset: 50px 22px 22px 22px;
  display: grid;
  grid-template-columns: 130px 1fr 220px;
  gap: 16px;
  z-index: 2;
}
.viz-waterfall-rows {
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center;
}
.viz-waterfall-row {
  display: flex; align-items: center; gap: 6px;
  font: 500 10px/1 var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.06em;
  /* Tappable row — padding gives 28px+ touch target without altering layout */
  padding: 8px 6px;
  border-radius: var(--r-1, 4px);
  border: 1px solid transparent;
}
.viz-waterfall-row .row-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--row-c, var(--text-4));
  box-shadow: 0 0 8px var(--row-c, var(--text-4));
  flex-shrink: 0;
}
.viz-dash {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3, 10px);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.viz-dash .dash-label {
  font: 600 9.5px/1 var(--font-mono); color: var(--text-4);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.viz-dash .dash-value {
  font: 600 26px/1 var(--font-display); color: var(--text-1);
  letter-spacing: -0.02em;
  animation: counter-tick 2s ease-in-out infinite;
}

/* === Keyframes === */
@keyframes flow {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(8%, -6%) scale(1.1); }
}
@keyframes pulse-glow {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.025); filter: brightness(1.15); }
}
@keyframes status-flip {
  0%, 60%   { background-color: transparent;
              border-style: dashed;
              color: var(--text-3);
              transform: scale(0.96); }
  70%       { transform: scale(1.04); }
  80%, 100% { background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
              border-color: color-mix(in srgb, var(--emerald, #10B981) 50%, transparent);
              border-style: solid;
              color: var(--emerald, #10B981);
              transform: scale(1); }
}
@keyframes counter-tick {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); filter: brightness(1.1); }
}
@keyframes path-draw {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

/* === Pillar hero 2-col grid (compact viz beside hero text) ===
   Used on Sync, Vault, Passport, Signals where the metaphor compresses
   into a teaser. Realm and Stage keep the full-width text-only hero. */
.pillar-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
/* Match Tailwind `lg` breakpoint so the column collapse aligns with the
   `hidden lg:block` rule on the teaser viz (PillarPageLayout). */
@media (max-width: 1023px) {
  .pillar-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* === Reduced motion fallback === */
@media (prefers-reduced-motion: reduce) {
  .canvas-viz *,
  .viz-pulse,
  .viz-aurora,
  .viz-aurora::before,
  .viz-aurora::after,
  .viz-node.hot,
  .viz-tl-event.is-flipping,
  .viz-ledger-step.is-signed,
  .viz-merge-target,
  .viz-dash .dash-value {
    animation: none !important;
    transition: none !important;
  }
  /* Hide animated SMIL orbs that travel along bezier paths */
  .canvas-viz .viz-orb { display: none; }
  /* Keep "hot" semantically visible without animation */
  .viz-node.hot,
  .viz-ledger-step.is-signed,
  .viz-merge-target {
    border-color: var(--pillar-c, var(--accent-hi));
  }
}

/* ========================================================================
   v6.6 — Pillar viz polish pass (alignment + density + interactivity)
   - .viz-inspector-strip: 4-cell metrics row beneath full-section viz
   - .node-field: extra mono key/value rows inside .viz-node
   - .node-pop: hover/focus popover revealing extended context
   ======================================================================== */
.viz-inspector-strip {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3, 10px);
  overflow: hidden;
}
.insp-cell {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.insp-cell:last-child { border-right: none; }
.insp-cell-label {
  font: 600 9.5px/1 var(--font-mono);
  color: var(--text-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.insp-cell-value {
  font: 500 12px/1.45 var(--font-mono);
  color: var(--text-2);
  letter-spacing: 0.02em;
  word-break: break-word;
}
.insp-cell-value .kk { color: var(--cyan, #22D3EE); }
.insp-cell-value .pillar { color: var(--pillar-c, var(--accent-hi)); }
.insp-cell-emit {
  background: color-mix(in srgb, var(--pillar-c, var(--accent-hi)) 6%, transparent);
}
@media (max-width: 720px) {
  .viz-inspector-strip { grid-template-columns: 1fr 1fr; }
  .insp-cell { border-bottom: 1px solid var(--border); }
  .insp-cell:nth-child(2n) { border-right: none; }
  .insp-cell:nth-last-child(-n+2) { border-bottom: none; }
}

/* Node-field rows inside .viz-node */
.viz-node .node-field {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed var(--border);
  font: 500 10px/1.3 var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.viz-node .node-field .nf-v { color: var(--text-2); }

/* Hover/focus popover on viz-node */
.viz-node {
  cursor: default;
  transition: border-color 200ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.viz-node:hover,
.viz-node:focus-visible {
  outline: none;
  border-color: var(--pillar-c, var(--accent-hi));
  box-shadow: 0 0 0 1px var(--pillar-c, var(--accent-hi)),
              0 12px 30px -10px rgba(0,0,0,0.7);
  z-index: 5;
}
.node-pop {
  position: absolute;
  bottom: calc(100% + 8px); left: 0;
  min-width: 200px; max-width: 300px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2, 6px);
  padding: 9px 11px;
  font: 500 10.5px/1.5 var(--font-mono);
  color: var(--text-2);
  letter-spacing: 0.02em;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  /* pointer-events: auto always — visibility-hidden popovers are
     non-interactive anyway, so this is safe. When shown, popover
     immediately becomes hover-catchable (incl. its ::before bridge). */
  pointer-events: auto;
  transform: translateY(4px);
  /* On HIDE: opacity fades 200ms, visibility waits 200ms then flips to
     hidden — gives the cursor a grace period to reach the popover after
     leaving the trigger. On SHOW: visibility flips instantly. */
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
  z-index: 20;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,0.8);
}
/* Invisible bridge across the 8px gap below the popover. Anchored to
   .node-pop so it inherits pointer-events: auto and catches the cursor
   when traversing the gap from trigger to popover. */
.node-pop::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -10px;
  height: 10px;
}
.node-pop .pop-k {
  display: block;
  font: 600 9.5px/1 var(--font-mono);
  color: var(--text-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.node-pop .pop-em { color: var(--pillar-c, var(--accent-hi)); }
.viz-node:hover .node-pop,
.viz-node:focus-visible .node-pop,
.viz-node:has(.node-pop:hover) .node-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* On SHOW path: visibility flips instantly (no delay), opacity fades in. */
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s 0s;
}
/* Pops near the right edge flip to anchor right side */
.viz-node.is-right-edge .node-pop { left: auto; right: 0; }

/* Generalized popover trigger — same hover/focus behaviour for all
   metaphor children (zones, timeline events, ledger steps, merge cells,
   waterfall rows). Each element owns the same .node-pop child markup. */
.viz-zone,
.viz-tl-event,
.viz-ledger-step,
.viz-merge-source,
.viz-merge-target,
.viz-waterfall-row {
  position: relative;
  cursor: default;
  transition: border-color 200ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1),
              background-color 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.viz-zone:hover, .viz-zone:focus-visible,
.viz-tl-event:hover, .viz-tl-event:focus-visible,
.viz-ledger-step:hover, .viz-ledger-step:focus-visible,
.viz-merge-source:hover, .viz-merge-source:focus-visible,
.viz-merge-target:hover, .viz-merge-target:focus-visible,
.viz-waterfall-row:hover, .viz-waterfall-row:focus-visible {
  outline: none;
  border-color: var(--pillar-c, var(--accent-hi));
  box-shadow: 0 0 0 1px var(--pillar-c, var(--accent-hi)),
              0 12px 30px -10px rgba(0,0,0,0.7);
  z-index: 5;
}
.viz-zone:hover .node-pop, .viz-zone:focus-visible .node-pop,
.viz-zone:has(.node-pop:hover) .node-pop,
.viz-tl-event:hover .node-pop, .viz-tl-event:focus-visible .node-pop,
.viz-tl-event:has(.node-pop:hover) .node-pop,
.viz-ledger-step:hover .node-pop, .viz-ledger-step:focus-visible .node-pop,
.viz-ledger-step:has(.node-pop:hover) .node-pop,
.viz-merge-source:hover .node-pop, .viz-merge-source:focus-visible .node-pop,
.viz-merge-source:has(.node-pop:hover) .node-pop,
.viz-merge-target:hover .node-pop, .viz-merge-target:focus-visible .node-pop,
.viz-merge-target:has(.node-pop:hover) .node-pop,
.viz-waterfall-row:hover .node-pop, .viz-waterfall-row:focus-visible .node-pop,
.viz-waterfall-row:has(.node-pop:hover) .node-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s 0s;
}
.viz-zone.is-right-edge .node-pop,
.viz-tl-event.is-right-edge .node-pop,
.viz-ledger-step.is-right-edge .node-pop,
.viz-waterfall-row.is-right-edge .node-pop {
  left: auto; right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .node-pop { transition: none; }
}

/* ========================================================================
   CANVAS LIVING PIPELINE (cv2-*) — home/components/CanvasViz.tsx
   Renders inside the Canvas Featured card on /platform (modules hub) and
   in the home hero. Self-contained namespace; does NOT touch the existing
   .canvas-viz / .viz-node / .viz-pulse rules above (those still drive the
   pillar SignatureViz components for Realm, Stage, Vault, Sync, etc.).

   Composition: diverge-converge 7 nodes. Trigger → Vault → Branch ⇒
   {true: Market → Sync} / {false: Shield} ⇒⇒ Lens (shared sink).
   Each wire has a typed payload pill + animated packet (animateMotion).
   Status footer carries ticking counter + scrolling log line.

   Animation budget: 7 packets + 7 node-rings + 4 status pulses, all GPU.
   Reduced-motion freezes everything to a static, fully-readable state.
   ======================================================================== */
.cv2-frame {
  position: relative;
  aspect-ratio: 6 / 5;
  background: var(--bg-1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.9),
              0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  font-family: var(--font-sans);
  color: var(--text-1);
}

/* Chrome — frosted Raycast-style header */
.cv2-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-4);
  letter-spacing: 0.02em;
}
.cv2-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv2-path .sep { color: var(--text-5, var(--text-4)); margin: 0 4px; }
.cv2-path .file { color: var(--text-2); }
.cv2-deployed {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 38%, transparent);
  color: var(--emerald, #10B981);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.cv2-deployed-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: cv2-deployed-breathe 1.6s ease-in-out infinite;
}

/* Stage — dot-grid background + ambient glow blobs */
.cv2-stage {
  position: absolute; top: 36px; left: 0; right: 0; bottom: 50px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg-1);
  overflow: hidden;
}
.cv2-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.cv2-glow-1 { top: -60px; left: 14%; width: 280px; height: 280px; background: var(--accent); opacity: 0.20; }
.cv2-glow-2 { bottom: -80px; right: 4%; width: 240px; height: 240px; background: var(--cyan, #22D3EE); opacity: 0.12; }

/* Wires */
.cv2-wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.cv2-wire { fill: none; stroke-width: 2; stroke-linecap: round; opacity: 0.85; }
.cv2-wire.is-dashed { stroke-dasharray: 5 4; opacity: 0.75; }
.cv2-type-pill {
  font: 600 9.5px/1 var(--font-mono);
  fill: var(--text-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  paint-order: stroke fill;
  stroke: var(--bg-1);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.cv2-packet { pointer-events: none; }
.cv2-static-dot { fill: var(--accent-hi); opacity: 0; }

/* Nodes — positioned on 600x466 design grid via CSS custom props */
.cv2-node {
  position: absolute;
  left:  calc(var(--x) / 600 * 100%);
  top:   calc(var(--y) / 466 * 100%);
  width: calc(116 / 600 * 100%);
  min-width: 102px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.6);
  z-index: 2;
}
.cv2-node.is-selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent),
    0 10px 24px -10px rgba(0,0,0,0.6);
}
.cv2-stripe { height: 3px; background: var(--c, var(--accent)); border-radius: 9px 9px 0 0; }
.cv2-head { display: flex; gap: 8px; padding: 8px 9px 6px; align-items: center; }
.cv2-icon {
  width: 20px; height: 20px; border-radius: 5px;
  background: color-mix(in srgb, var(--c, var(--accent)) 18%, transparent);
  color: var(--c-hi, var(--accent-hi));
  display: grid; place-items: center;
  font: 600 11px/1 var(--font-mono);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 28%, transparent);
  flex-shrink: 0;
}
.cv2-text { flex: 1; min-width: 0; }
.cv2-title {
  font: 600 12px/1.15 var(--font-sans);
  color: var(--text-1);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv2-sub {
  font: 500 8.5px/1.3 var(--font-mono);
  color: var(--text-4);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv2-meta {
  padding: 0 9px 8px;
  font: 500 9.5px/1.3 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv2-meta .ok { color: var(--emerald, #10B981); }
.cv2-meta .nok { color: #FB7185; }
.cv2-meta .live { display: inline-flex; align-items: center; gap: 4px; color: var(--emerald, #10B981); }
.cv2-meta .live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
.cv2-ring {
  position: absolute; inset: -2px;
  border-radius: 11px;
  border: 2px solid var(--c, var(--accent));
  opacity: 0;
  animation: cv2-node-ring 4s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--pulse-delay, 0s);
  pointer-events: none;
}

/* Per-node module color + pulse stagger (synchronized with packet flow) */
.cv2-node.cv2-n-trigger { --c: var(--m-seasons); --c-hi: var(--m-seasons-hi); --pulse-delay: 0.05s; }
.cv2-node.cv2-n-vault   { --c: var(--m-vault);   --c-hi: var(--m-vault-hi);   --pulse-delay: 0.45s; }
.cv2-node.cv2-n-branch  { --c: var(--accent);    --c-hi: var(--accent-hi);    --pulse-delay: 0.90s; }
.cv2-node.cv2-n-market  { --c: var(--m-market);  --c-hi: var(--m-market-hi);  --pulse-delay: 1.40s; }
.cv2-node.cv2-n-sync    { --c: var(--m-sync);    --c-hi: var(--m-sync-hi);    --pulse-delay: 1.90s; }
.cv2-node.cv2-n-shield  { --c: var(--m-shield);  --c-hi: var(--m-shield-hi);  --pulse-delay: 1.55s; }
.cv2-node.cv2-n-lens    { --c: var(--m-lens);    --c-hi: var(--m-lens-hi);    --pulse-delay: 2.55s; }

/* Status footer */
.cv2-status {
  position: absolute; bottom: 0; left: 0; right: 0; height: 50px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 8px 14px 9px;
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-3);
  z-index: 4;
}
.cv2-status-line {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cv2-status .cv2-dim { color: var(--text-4); }
.cv2-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: cv2-status-breathe 1.5s ease-in-out infinite;
  flex: 0 0 auto;
}
.cv2-counter { color: var(--text-2); }
.cv2-counter::after { content: "47/min"; animation: cv2-counter 5.2s steps(1, end) infinite; }
.cv2-regions { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); }
.cv2-region-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 6px color-mix(in srgb, var(--emerald, #10B981) 50%, transparent);
  flex: 0 0 auto;
}
.cv2-log {
  margin-top: 4px;
  font: 500 10.5px/1.4 var(--font-mono);
  color: var(--text-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: cv2-log-in 4s ease-in-out infinite;
}
.cv2-log .ts { color: var(--text-4); margin-right: 8px; }
.cv2-log .mod { color: var(--accent-hi); }
.cv2-log .arr { color: var(--text-4); margin: 0 4px; }
.cv2-log .ok { color: var(--emerald, #10B981); }
.cv2-log .meta { color: var(--text-4); margin-left: 8px; }

/* Keyframes */
@keyframes cv2-deployed-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes cv2-status-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes cv2-node-ring {
  0%, 8%   { opacity: 0; transform: scale(0.98); }
  12%      { opacity: 0.85; transform: scale(1); }
  22%      { opacity: 0; transform: scale(1.06); }
  100%     { opacity: 0; transform: scale(0.98); }
}
@keyframes cv2-counter {
  0%   { content: "47/min"; }
  20%  { content: "48/min"; }
  40%  { content: "49/min"; }
  60%  { content: "50/min"; }
  80%  { content: "49/min"; }
  100% { content: "47/min"; }
}
@keyframes cv2-log-in {
  0%, 18%  { opacity: 0; transform: translateY(6px); }
  30%, 88% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .cv2-frame *,
  .cv2-frame *::before,
  .cv2-frame *::after {
    animation: none !important;
    transition: none !important;
  }
  .cv2-wire { opacity: 0.85; }
  .cv2-packet { display: none; }
  .cv2-static-dot { opacity: 1; }
  .cv2-counter::after { content: "47/min"; }
  .cv2-log { opacity: 0.85; transform: none; }
}

/* ========================================================================
   SYNC PILLAR · TOP VIZ — "Code → Live" (sync-code-*)
   Used by SyncHeroTeaser in home/app/_components/pillar-viz/SyncSignatureViz.tsx
   Code editor on left, ticking live values on right. Annotation-driven sync.
   ======================================================================== */
.sync-code-frame {
  position: relative;
  aspect-ratio: 8 / 5;
  background: var(--bg-1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,0.9),
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  font-family: var(--font-sans);
  color: var(--text-1);
}

.sync-code-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 32px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
}
.sync-code-chrome .file { color: var(--text-2); }
.sync-code-chrome .mod { color: var(--accent-hi); }
.sync-code-chrome .dim { color: var(--text-4); margin: 0 1px; }
.sync-code-chrome .spacer { flex: 1; }
.sync-code-chrome .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 36%, transparent);
  color: var(--emerald, #10B981);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.sync-code-chrome .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: sync-code-breathe 1.6s ease-in-out infinite;
}

.sync-code-body {
  position: absolute; top: 32px; left: 0; right: 0; bottom: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sync-code-editor {
  position: relative;
  padding: 14px 0 14px 0;
  border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 90%, var(--accent) 8%) 0%, var(--bg-1) 60%);
  overflow: hidden;
}
.sync-code-line {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  height: 22px;
  padding-right: 14px;
  font: 500 12.5px/1 var(--font-mono);
  color: var(--text-2);
}
.sync-code-line .ln {
  text-align: right; padding-right: 10px;
  color: var(--text-5, var(--text-4));
  font-size: 10.5px;
}
.sync-code-line .body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-code-line.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.sync-code-line.is-active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent-hi);
}
.tk-kw   { color: #C792EA; }
.tk-id   { color: var(--text-1); }
.tk-annot{ color: var(--accent-hi); font-weight: 600; }
.tk-type { color: var(--cyan, #67E8F9); }
.tk-pun  { color: var(--text-4); }
.tk-comm { color: var(--text-4); font-style: italic; }

.sync-code-live-pane {
  position: relative;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.sync-code-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  font: 500 11.5px/1.1 var(--font-mono);
  color: var(--text-2);
  transition: background 240ms var(--ease, cubic-bezier(.2,.8,.2,1));
}
.sync-code-row .lbl { color: var(--text-3); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-code-row .val { color: var(--text-1); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.sync-code-row .trend { font-size: 12px; width: 14px; text-align: center; }
.sync-code-row .trend.up { color: var(--emerald, #10B981); }
.sync-code-row .trend.down { color: #FB7185; }
.sync-code-row .trend.flat { color: var(--text-4); }
.sync-code-row.is-flashing {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-hi) 30%, transparent);
}
.sync-code-spark {
  margin-top: auto; padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  display: flex; align-items: center; gap: 10px;
  font: 500 10.5px/1 var(--font-mono);
  color: var(--text-4);
}
.sync-code-spark svg { width: 80px; height: 18px; flex-shrink: 0; }
.sync-code-spark .sl-stroke { fill: none; stroke: var(--accent-hi); stroke-width: 1.4; }
.sync-code-spark .sl-fill { fill: url(#sl-grad); opacity: 0.45; }

.sync-code-status {
  position: absolute; bottom: 0; left: 0; right: 0; height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap; overflow: hidden;
}
.sync-code-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: sync-code-breathe 1.5s ease-in-out infinite;
  flex: 0 0 auto;
}
.sync-code-status .sep { color: var(--text-4); }
.sync-code-status .ccu::after { content: "12.4k"; animation: sync-code-ccu 6s steps(1, end) infinite; }

/* Keyframes for top viz */
@keyframes sync-code-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes sync-code-line-flash {
  0%, 4%   { background: transparent; }
  6%, 16%  { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  24%, 100%{ background: transparent; }
}
@keyframes sync-code-row-flash {
  0%, 4%   { background: transparent; }
  6%, 18%  { background: color-mix(in srgb, var(--accent) 18%, transparent); transform: translateX(1px); }
  28%, 100%{ background: transparent; transform: translateX(0); }
}
@keyframes sync-code-ccu {
  0%   { content: "12.4k"; }
  25%  { content: "12.5k"; }
  50%  { content: "12.6k"; }
  75%  { content: "12.5k"; }
  100% { content: "12.4k"; }
}
@keyframes sync-code-val-pos {
  0%, 18%  { content: "14.5"; }
  20%, 38% { content: "14.8"; }
  40%, 58% { content: "15.1"; }
  60%, 78% { content: "15.0"; }
  80%, 100%{ content: "14.5"; }
}
@keyframes sync-code-val-health {
  0%, 38%  { content: "98"; }
  40%, 58% { content: "92"; }
  60%, 78% { content: "87"; }
  80%, 100%{ content: "98"; }
}
@keyframes sync-code-val-vel {
  0%, 18%  { content: "2.1"; }
  20%, 38% { content: "2.4"; }
  40%, 58% { content: "2.8"; }
  60%, 78% { content: "2.4"; }
  80%, 100%{ content: "2.1"; }
}
@keyframes sync-code-val-state {
  0%, 28%   { content: "idle"; }
  30%, 60%  { content: "moving"; }
  62%, 90%  { content: "moving"; }
  92%, 100% { content: "idle"; }
}

/* Per-line/row animations (staggered, 4s loop) */
.sync-code-line.is-active.la-pos    { animation: sync-code-line-flash 4s linear infinite; animation-delay: 0s; }
.sync-code-line.is-active.la-health { animation: sync-code-line-flash 4s linear infinite; animation-delay: 1s; }
.sync-code-line.is-active.la-vel    { animation: sync-code-line-flash 4s linear infinite; animation-delay: 2s; }
.sync-code-line.is-active.la-state  { animation: sync-code-line-flash 4s linear infinite; animation-delay: 3s; }
.sync-code-row.ra-pos    { animation: sync-code-row-flash 4s linear infinite; animation-delay: 0s; }
.sync-code-row.ra-pos .val::after    { content: "14.5"; animation: sync-code-val-pos 4s steps(1, end) infinite; }
.sync-code-row.ra-health { animation: sync-code-row-flash 4s linear infinite; animation-delay: 1s; }
.sync-code-row.ra-health .val::after { content: "98";   animation: sync-code-val-health 4s steps(1, end) infinite; }
.sync-code-row.ra-vel    { animation: sync-code-row-flash 4s linear infinite; animation-delay: 2s; }
.sync-code-row.ra-vel .val::after    { content: "2.1";  animation: sync-code-val-vel 4s steps(1, end) infinite; }
.sync-code-row.ra-state  { animation: sync-code-row-flash 4s linear infinite; animation-delay: 3s; }
.sync-code-row.ra-state .val::after  { content: "idle"; animation: sync-code-val-state 4s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) {
  .sync-code-frame *,
  .sync-code-frame *::before,
  .sync-code-frame *::after {
    animation: none !important;
    transition: none !important;
  }
  .sync-code-line.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .sync-code-row.ra-pos    .val::after { content: "14.5"; }
  .sync-code-row.ra-health .val::after { content: "98"; }
  .sync-code-row.ra-vel    .val::after { content: "2.1"; }
  .sync-code-row.ra-state  .val::after { content: "idle"; }
  .sync-code-status .ccu::after { content: "12.4k"; }
}

/* ========================================================================
   SYNC PILLAR · BOTTOM VIZ — "Authoritative Arena" (sync-arena-*)
   Used by SyncSignatureViz in home/app/_components/pillar-viz/SyncSignatureViz.tsx
   4 player tokens on the left, large server card on the right, animated
   intent + δ-state packets between them, ticking simulation counter.
   ======================================================================== */
.sync-arena-frame {
  position: relative;
  aspect-ratio: 12 / 5;
  background: var(--bg-1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,0.9),
    0 0 0 1px color-mix(in srgb, var(--cyan, #22D3EE) 14%, transparent);
  font-family: var(--font-sans);
  color: var(--text-1);
}

.sync-arena-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
}
.sync-arena-chrome .file { color: var(--text-2); }
.sync-arena-chrome .sep  { color: var(--text-4); margin: 0 4px; }
.sync-arena-chrome .spacer { flex: 1; }
.sync-arena-chrome .tick {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--cyan, #22D3EE) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan, #22D3EE) 30%, transparent);
  border-radius: 999px;
  color: var(--cyan, #22D3EE);
}
.sync-arena-chrome .tick .label { color: var(--text-4); font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; }
.sync-arena-chrome .tick .num   { font-weight: 600; font-variant-numeric: tabular-nums; }
.sync-arena-chrome .tick .num::after { content: "1843"; animation: sync-arena-tick 4s steps(1, end) infinite; }
.sync-arena-chrome .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 36%, transparent);
  color: var(--emerald, #10B981);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.sync-arena-chrome .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: sync-arena-breathe 1.6s ease-in-out infinite;
}

.sync-arena-stage {
  position: absolute; top: 36px; left: 0; right: 0; bottom: 36px;
  background:
    radial-gradient(ellipse at 78% 50%, color-mix(in srgb, var(--cyan, #22D3EE) 8%, transparent), transparent 55%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg-1);
  overflow: hidden;
}

.sync-arena-wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.sync-arena-wire { fill: none; stroke-width: 1.6; stroke-linecap: round; opacity: 0.5; }
.sync-arena-wire.is-outbound { stroke-dasharray: 4 4; }
.sync-arena-packet { pointer-events: none; }
.sync-arena-packet-core { opacity: 1; }
.sync-arena-packet-halo { opacity: 0.3; }
.sync-arena-static-dot { fill: var(--cyan, #67E8F9); opacity: 0; }

.sync-arena-player {
  position: absolute;
  left:  calc(var(--x) / 600 * 100%);
  top:   calc(var(--y) / 360 * 100%);
  width: calc(168 / 600 * 100%);
  min-width: 132px;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6);
  z-index: 2;
}
.sync-arena-player .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c, var(--cyan, #67E8F9));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--cyan, #67E8F9)) 20%, transparent),
              0 0 10px color-mix(in srgb, var(--c, var(--cyan, #67E8F9)) 55%, transparent);
  flex-shrink: 0;
}
.sync-arena-player .text { flex: 1; min-width: 0; }
.sync-arena-player .name {
  font: 600 11.5px/1.1 var(--font-mono);
  color: var(--text-1);
  letter-spacing: 0.02em;
}
.sync-arena-player .region {
  font: 500 9.5px/1.3 var(--font-mono);
  color: var(--text-4);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 2px;
}
.sync-arena-player .rtt {
  font: 500 10px/1 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sync-arena-player.is-rejected .reject-flag {
  position: absolute; right: 6px; top: -10px;
  padding: 2px 6px;
  background: color-mix(in srgb, #F87171 16%, transparent);
  border: 1px solid color-mix(in srgb, #F87171 50%, transparent);
  border-radius: 4px;
  color: #F87171;
  font: 600 8.5px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0;
  animation: sync-arena-reject-flash 3s ease-out infinite;
  animation-delay: 2.4s;
}
.sync-arena-player.is-rejected {
  animation: sync-arena-reject-border 3s ease-out infinite;
  animation-delay: 2.4s;
}

.sync-arena-server {
  position: absolute;
  left:  calc(var(--x) / 600 * 100%);
  top:   calc(var(--y) / 360 * 100%);
  width: calc(132 / 600 * 100%);
  min-width: 116px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent),
    0 14px 28px -12px rgba(0,0,0,0.7);
  padding: 12px 14px;
  z-index: 3;
  text-align: center;
}
.sync-arena-server .title {
  font: 600 13px/1.2 var(--font-sans);
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.sync-arena-server .label {
  font: 500 9px/1.3 var(--font-mono);
  color: var(--accent-hi);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 3px;
}
.sync-arena-server .icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-hi);
  display: grid; place-items: center;
  font: 600 14px/1 var(--font-mono);
  margin: 6px auto 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.sync-arena-server .tick {
  margin-top: 8px;
  font: 500 10px/1.2 var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.05em;
}
.sync-arena-server .tick::after { content: "tick 1843"; animation: sync-arena-tick-long 4s steps(1, end) infinite; }
.sync-arena-server.is-pulsing { animation: sync-arena-server-pulse 4s ease-in-out infinite; }

.sync-arena-status {
  position: absolute; bottom: 0; left: 0; right: 0; height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap; overflow: hidden;
  z-index: 5;
}
.sync-arena-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: sync-arena-breathe 1.5s ease-in-out infinite;
  flex: 0 0 auto;
}
.sync-arena-status .sep { color: var(--text-4); }
.sync-arena-status .cheats::after { content: "12"; animation: sync-arena-cheats 6s steps(1, end) infinite; }

/* Per-player module colors */
.sync-arena-player.p-1 { --c: #67E8F9; }
.sync-arena-player.p-2 { --c: #22D3EE; }
.sync-arena-player.p-3 { --c: #A78BFA; }
.sync-arena-player.p-4 { --c: #FB923C; }

/* Keyframes for bottom viz */
@keyframes sync-arena-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes sync-arena-tick {
  0%   { content: "1843"; }
  25%  { content: "1844"; }
  50%  { content: "1845"; }
  75%  { content: "1846"; }
  100% { content: "1847"; }
}
@keyframes sync-arena-tick-long {
  0%   { content: "tick 1843"; }
  25%  { content: "tick 1844"; }
  50%  { content: "tick 1845"; }
  75%  { content: "tick 1846"; }
  100% { content: "tick 1847"; }
}
@keyframes sync-arena-cheats {
  0%   { content: "12"; }
  33%  { content: "13"; }
  66%  { content: "14"; }
  100% { content: "15"; }
}
@keyframes sync-arena-server-pulse {
  0%, 45%, 60%, 100% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent),
      0 14px 28px -12px rgba(0,0,0,0.7);
  }
  50% {
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--accent) 28%, transparent),
      0 0 28px color-mix(in srgb, var(--accent) 35%, transparent),
      0 14px 28px -12px rgba(0,0,0,0.7);
  }
}
@keyframes sync-arena-reject-flash {
  0%, 75% { opacity: 0; transform: translateY(2px); }
  82%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}
@keyframes sync-arena-reject-border {
  0%, 75% { box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6); border-color: var(--border); }
  82%, 92% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, #F87171 30%, transparent),
      0 8px 18px -8px rgba(0,0,0,0.6);
    border-color: #F87171;
  }
  100% { box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6); border-color: var(--border); }
}

@media (prefers-reduced-motion: reduce) {
  .sync-arena-frame *,
  .sync-arena-frame *::before,
  .sync-arena-frame *::after {
    animation: none !important;
    transition: none !important;
  }
  .sync-arena-wire { opacity: 0.7; }
  .sync-arena-packet { display: none; }
  .sync-arena-static-dot { opacity: 1; }
  .sync-arena-chrome .tick .num::after { content: "1843"; }
  .sync-arena-server .tick::after { content: "tick 1843"; }
  .sync-arena-status .cheats::after { content: "12"; }
}

/* ========================================================================
   STAGE PILLAR · TOP VIZ — "Event Pulse" (stage-event-*)
   Used by StageHeroTeaser in home/app/_components/pillar-viz/StageSignatureViz.tsx
   Single event detail view: metrics + sparkline + ticking remaining time.
   ======================================================================== */
.stage-event-frame {
  position: relative;
  aspect-ratio: 7 / 5;
  background: var(--bg-1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,0.9),
    0 0 0 1px color-mix(in srgb, #F472B6 14%, transparent);
  font-family: var(--font-sans);
  color: var(--text-1);
}

.stage-event-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 32px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
}
.stage-event-chrome .path { color: var(--text-3); }
.stage-event-chrome .sep { color: var(--text-5, var(--text-4)); margin: 0 4px; }
.stage-event-chrome .slug { color: var(--text-1); }
.stage-event-chrome .spacer { flex: 1; }
.stage-event-chrome .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 36%, transparent);
  color: var(--emerald, #10B981);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.stage-event-chrome .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: stage-event-breathe 1.6s ease-in-out infinite;
}

.stage-event-body {
  position: absolute; top: 32px; left: 0; right: 0; bottom: 32px;
  padding: 18px 20px 14px;
  display: flex; flex-direction: column;
  gap: 14px;
}

.stage-event-head .title {
  font: 600 20px/1.15 var(--font-display, var(--font-sans));
  color: var(--text-1);
  letter-spacing: -0.015em;
}
.stage-event-head .meta {
  margin-top: 8px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font: 500 10.5px/1.4 var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.stage-event-head .meta .dot-sep::before {
  content: '·'; color: var(--text-5, var(--text-4));
}
.stage-event-head .status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 4px;
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.stage-event-head .status-pill.live {
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 40%, transparent);
  color: var(--emerald, #10B981);
}
.stage-event-head .sched { color: var(--text-2); }
.stage-event-head .aud { color: var(--text-3); }

.stage-event-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.stage-event-tile {
  display: flex; flex-direction: column;
  padding: 9px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 64px;
}
.stage-event-tile .lbl {
  font: 600 8.5px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-4);
}
.stage-event-tile .val {
  margin-top: 8px;
  font: 600 17px/1.1 var(--font-mono);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.stage-event-tile .delta {
  margin-top: 4px;
  font: 500 10px/1 var(--font-mono);
  display: flex; align-items: center; gap: 3px;
  letter-spacing: 0.02em;
}
.stage-event-tile .delta.up   { color: var(--emerald, #10B981); }
.stage-event-tile .delta.flat { color: var(--text-4); }
.stage-event-tile .delta.down { color: #FB7185; }

.stage-event-spark {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.stage-event-spark .lbl {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-4);
}
.stage-event-spark .spark-wrap {
  position: relative;
  width: 100%;
  height: 36px;
}
.stage-event-spark svg { width: 100%; height: 100%; display: block; }
.stage-event-spark .sl-stroke {
  fill: none; stroke: var(--accent-hi); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.stage-event-spark .sl-fill { stroke: none; }
.stage-event-spark .sl-marker {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-hi);
  border: 1.5px solid var(--bg-1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-hi) 70%, transparent);
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  animation: stage-event-marker-slide 8s ease-in-out infinite;
  pointer-events: none;
}

.stage-event-status {
  position: absolute; bottom: 0; left: 0; right: 0; height: 32px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap; overflow: hidden;
}
.stage-event-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: stage-event-breathe 1.5s ease-in-out infinite;
  flex: 0 0 auto;
}
.stage-event-status .sep { color: var(--text-4); }
.stage-event-status .remaining { color: var(--text-2); font-variant-numeric: tabular-nums; }
.stage-event-status .remaining::after { content: "2h 14m"; animation: stage-event-remaining 5.2s steps(1, end) infinite; }

/* Per-tile value/delta keyframes */
.stage-event-tile.m-impr  .val::after   { content: "124,210"; animation: stage-event-val-impr  4s steps(1, end) infinite; }
.stage-event-tile.m-impr  .delta-pct::after { content: "+4.2%"; animation: stage-event-delta-impr 4s steps(1, end) infinite; }
.stage-event-tile.m-ctr   .val::after   { content: "3.4%";    animation: stage-event-val-ctr   4s steps(1, end) infinite; }
.stage-event-tile.m-ctr   .delta-pct::after { content: "+0.6%"; animation: stage-event-delta-ctr  4s steps(1, end) infinite; }
.stage-event-tile.m-conv  .val::after   { content: "12.1%";   animation: stage-event-val-conv  4s steps(1, end) infinite; }
.stage-event-tile.m-conv  .delta-pct::after { content: "0.0%"; }
.stage-event-tile.m-rev   .val::after   { content: "$18,214"; animation: stage-event-val-rev   4s steps(1, end) infinite; }
.stage-event-tile.m-rev   .delta-pct::after { content: "+7.1%"; animation: stage-event-delta-rev  4s steps(1, end) infinite; }

@keyframes stage-event-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes stage-event-val-impr {
  0%   { content: "124,210"; }
  25%  { content: "124,540"; }
  50%  { content: "124,780"; }
  75%  { content: "124,910"; }
  100% { content: "125,140"; }
}
@keyframes stage-event-delta-impr {
  0%   { content: "+4.2%"; }
  50%  { content: "+4.5%"; }
  100% { content: "+4.8%"; }
}
@keyframes stage-event-val-ctr {
  0%   { content: "3.4%"; }
  33%  { content: "3.5%"; }
  66%  { content: "3.5%"; }
  100% { content: "3.6%"; }
}
@keyframes stage-event-delta-ctr {
  0%   { content: "+0.6%"; }
  50%  { content: "+0.7%"; }
  100% { content: "+0.8%"; }
}
@keyframes stage-event-val-conv {
  0%, 60%   { content: "12.1%"; }
  62%, 100% { content: "12.2%"; }
}
@keyframes stage-event-val-rev {
  0%   { content: "$18,214"; }
  25%  { content: "$18,356"; }
  50%  { content: "$18,490"; }
  75%  { content: "$18,612"; }
  100% { content: "$18,790"; }
}
@keyframes stage-event-delta-rev {
  0%   { content: "+7.1%"; }
  50%  { content: "+7.4%"; }
  100% { content: "+7.7%"; }
}
@keyframes stage-event-remaining {
  0%   { content: "2h 14m"; }
  25%  { content: "2h 13m"; }
  50%  { content: "2h 12m"; }
  75%  { content: "2h 11m"; }
  100% { content: "2h 10m"; }
}
@keyframes stage-event-marker-slide {
  0%   { left: 0%;    top: 67%; }
  6%   { left: 6.25%; top: 61%; }
  12%  { left: 12.5%; top: 72%; }
  18%  { left: 18.75%; top: 50%; }
  24%  { left: 25%;   top: 61%; }
  30%  { left: 31.25%; top: 44%; }
  36%  { left: 37.5%; top: 56%; }
  42%  { left: 43.75%; top: 33%; }
  48%  { left: 50%;   top: 50%; }
  54%  { left: 56.25%; top: 28%; }
  60%  { left: 62.5%; top: 39%; }
  66%  { left: 68.75%; top: 22%; }
  72%  { left: 75%;   top: 33%; }
  78%  { left: 81.25%; top: 17%; }
  84%  { left: 87.5%; top: 28%; }
  92%  { left: 93.75%; top: 11%; }
  100% { left: 0%;    top: 67%; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-event-frame *,
  .stage-event-frame *::before,
  .stage-event-frame *::after {
    animation: none !important;
    transition: none !important;
  }
  .stage-event-tile.m-impr .val::after { content: "124,210"; }
  .stage-event-tile.m-ctr  .val::after { content: "3.4%"; }
  .stage-event-tile.m-conv .val::after { content: "12.1%"; }
  .stage-event-tile.m-rev  .val::after { content: "$18,214"; }
  .stage-event-tile.m-impr .delta-pct::after { content: "+4.2%"; }
  .stage-event-tile.m-ctr  .delta-pct::after { content: "+0.6%"; }
  .stage-event-tile.m-rev  .delta-pct::after { content: "+7.1%"; }
  .stage-event-status .remaining::after { content: "2h 14m"; }
}

/* ========================================================================
   STAGE PILLAR · BOTTOM VIZ — "Season Gantt" (stage-gantt-*)
   Used by StageSignatureViz in home/app/_components/pillar-viz/StageSignatureViz.tsx
   Multi-lane horizontal Gantt timeline with day headers, NOW indicator,
   event bars styled per status (live/scheduled/draft/ended) + selected outline.
   ======================================================================== */
.stage-gantt-frame {
  position: relative;
  aspect-ratio: 16 / 5;
  min-height: 320px;
  background: var(--bg-1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,0.9),
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  font-family: var(--font-sans);
  color: var(--text-1);
}

.stage-gantt-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
}
.stage-gantt-chrome .path { color: var(--text-3); }
.stage-gantt-chrome .sep  { color: var(--text-5, var(--text-4)); margin: 0 4px; }
.stage-gantt-chrome .spacer { flex: 1; }
.stage-gantt-chrome .counters {
  font: 500 10.5px/1 var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.stage-gantt-chrome .counters .live-count {
  color: var(--emerald, #10B981);
  font-weight: 600;
}
.stage-gantt-chrome .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 36%, transparent);
  color: var(--emerald, #10B981);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.stage-gantt-chrome .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: stage-gantt-breathe 1.6s ease-in-out infinite;
}

.stage-gantt-days {
  position: absolute; top: 36px; left: 80px; right: 0; height: 28px;
  display: grid; grid-template-columns: repeat(7, 1fr);
  align-items: center;
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  z-index: 4;
}
.stage-gantt-days .day {
  text-align: center;
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-4);
}

.stage-gantt-now {
  position: absolute;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent-hi) 8%,
    var(--accent-hi) 92%,
    transparent 100%);
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-hi) 50%, transparent);
  animation: stage-gantt-now-drift 12s ease-in-out infinite;
}
.stage-gantt-now .now-label {
  position: absolute; top: 4px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 7px;
  background: var(--accent);
  color: #FFFFFF;
  font: 700 9px/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 55%, transparent);
  white-space: nowrap;
}

.stage-gantt-stage {
  position: absolute; top: 64px; left: 0; right: 0; bottom: 36px;
  padding: 14px 0 16px 0;
  display: flex; flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.stage-gantt-lane {
  position: relative;
  display: grid; grid-template-columns: 80px 1fr;
  align-items: center;
  flex: 1 1 0;
  min-height: 42px;
  max-height: 64px;
  padding-right: 8px;
}
.stage-gantt-lane .lane-label {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
  padding-left: 14px;
}
.stage-gantt-lane .lane-track {
  position: relative;
  height: 100%;
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(100%/7 - 1px),
      color-mix(in srgb, var(--border) 60%, transparent) calc(100%/7 - 1px),
      color-mix(in srgb, var(--border) 60%, transparent) calc(100%/7),
      transparent calc(100%/7)
    );
  background-size: calc(100%/7) 100%;
}
.gantt-event {
  position: absolute;
  top: 6px; bottom: 6px;
  left:  calc(var(--start) / 7 * 100%);
  width: calc((var(--end) - var(--start) + 1) / 7 * 100% - 4px);
  margin-left: 2px;
  border-radius: 6px;
  padding: 0 10px;
  display: flex; align-items: center;
  font: 600 11.5px/1 var(--font-sans);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid transparent;
}
.gantt-event.is-live {
  background: linear-gradient(90deg, #F472B6 0%, var(--accent-hi) 100%);
  color: #FFFFFF;
  box-shadow: 0 0 0 1px color-mix(in srgb, #F472B6 50%, transparent),
              0 4px 12px color-mix(in srgb, #F472B6 25%, transparent);
  animation: stage-gantt-live-pulse 2.4s ease-in-out infinite;
}
.gantt-event.is-scheduled {
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, #F472B6 22%, var(--surface)) 0,
      color-mix(in srgb, #F472B6 22%, var(--surface)) 5px,
      color-mix(in srgb, #F472B6 8%, var(--surface)) 5px,
      color-mix(in srgb, #F472B6 8%, var(--surface)) 10px);
  border-color: color-mix(in srgb, #F472B6 35%, var(--border));
  color: var(--text-1);
}
.gantt-event.is-draft {
  background: var(--surface);
  border: 1px dashed color-mix(in srgb, var(--accent-hi) 45%, var(--border));
  color: var(--text-3);
}
.gantt-event.is-ended {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-5, var(--text-4));
  opacity: 0.72;
}
.gantt-event.is-selected {
  outline: 1.5px solid var(--accent-hi);
  outline-offset: 2px;
  z-index: 2;
}
.gantt-event.is-selected::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 9px;
  background-image:
    linear-gradient(90deg, var(--accent-hi) 50%, transparent 50%),
    linear-gradient(0deg,  var(--accent-hi) 50%, transparent 50%),
    linear-gradient(90deg, var(--accent-hi) 50%, transparent 50%),
    linear-gradient(0deg,  var(--accent-hi) 50%, transparent 50%);
  background-size:
    8px 1.5px,
    1.5px 8px,
    8px 1.5px,
    1.5px 8px;
  background-position:
    0 0,
    100% 0,
    0 100%,
    0 0;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  animation: stage-gantt-ants 1.2s linear infinite;
  pointer-events: none;
}

.stage-gantt-status {
  position: absolute; bottom: 0; left: 0; right: 0; height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap; overflow: hidden;
}
.stage-gantt-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: stage-gantt-breathe 1.5s ease-in-out infinite;
  flex: 0 0 auto;
}
.stage-gantt-status .sep { color: var(--text-4); }
.stage-gantt-status .next-label { color: var(--text-2); }
.stage-gantt-status .next-label::after {
  content: "Fri 12:00 — Whale-end";
  animation: stage-gantt-next 9s steps(1, end) infinite;
}

@keyframes stage-gantt-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes stage-gantt-now-drift {
  0%, 100% { left: calc(50% + 40px); }
  50%      { left: calc(50% + 60px); }
}
@keyframes stage-gantt-live-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, #F472B6 50%, transparent),
                0 4px 12px color-mix(in srgb, #F472B6 22%, transparent);
  }
  50% {
    box-shadow: 0 0 0 1px color-mix(in srgb, #F472B6 70%, transparent),
                0 6px 18px color-mix(in srgb, #F472B6 38%, transparent);
  }
}
@keyframes stage-gantt-ants {
  0%   { background-position: 0 0, 100% 0, 0 100%, 0 0; }
  100% { background-position: 16px 0, 100% 16px, -16px 100%, 0 -16px; }
}
@keyframes stage-gantt-next {
  0%   { content: "Fri 12:00 — Whale-end"; }
  33%  { content: "Sat 18:00 — Tier-2-start"; }
  66%  { content: "Sun 09:00 — Founders-launch"; }
  100% { content: "Fri 12:00 — Whale-end"; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-gantt-frame *,
  .stage-gantt-frame *::before,
  .stage-gantt-frame *::after {
    animation: none !important;
    transition: none !important;
  }
  .stage-gantt-now { left: calc(50% + 40px); }
  .stage-gantt-status .next-label::after { content: "Fri 12:00 — Whale-end"; }
}

/* ========================================================================
   REALM PILLAR · TOP VIZ — "Stitch Frame" (realm-stitch-*)
   Used by RealmHeroTeaser. Close-up of a single zone-stitch event:
   two shard cards + animated entity crossing the boundary + 3 metric tiles.
   ======================================================================== */
.realm-stitch-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  background: var(--bg-1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,0.9),
    0 0 0 1px color-mix(in srgb, var(--m-edge, #F59E0B) 16%, transparent);
  font-family: var(--font-sans);
  color: var(--text-1);
}

.realm-stitch-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 32px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
}
.realm-stitch-chrome .sep { color: var(--text-5, var(--text-4)); margin: 0 4px; }
.realm-stitch-chrome .entity { color: var(--m-edge-hi, #FCD34D); }
.realm-stitch-chrome .spacer { flex: 1; }
.realm-stitch-chrome .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 36%, transparent);
  color: var(--emerald, #10B981);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.realm-stitch-chrome .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: realm-stitch-breathe 1.6s ease-in-out infinite;
}

.realm-stitch-body {
  position: absolute; top: 32px; left: 0; right: 0; bottom: 32px;
  padding: 22px 18px 18px;
  display: flex; flex-direction: column;
  gap: 22px;
  justify-content: space-between;
}

.realm-stitch-arena {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  align-items: center;
  gap: 0;
  min-height: 140px;
}

.realm-shard-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 5px;
  position: relative;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.6);
}
.realm-shard-card .shard-id {
  font: 700 16px/1.2 var(--font-sans);
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.realm-shard-card .region {
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}
.realm-shard-card .owner-count {
  margin-top: 10px;
  font: 600 13px/1.1 var(--font-mono);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.realm-shard-card .owner-count .ents-label {
  color: var(--text-4); font-weight: 500;
  margin-left: 4px;
  font-size: 11px;
}
.realm-shard-card .auth-tag {
  position: absolute; top: 12px; right: 14px;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
}
.realm-shard-card[data-side="left"]  .auth-tag {
  background: color-mix(in srgb, var(--m-edge-hi, #FCD34D) 16%, transparent);
  color: var(--m-edge-hi, #FCD34D);
  border: 1px solid color-mix(in srgb, var(--m-edge-hi, #FCD34D) 38%, transparent);
}
.realm-shard-card[data-side="right"] .auth-tag {
  background: color-mix(in srgb, var(--m-passport-hi, #2DD4BF) 14%, transparent);
  color: var(--m-passport-hi, #2DD4BF);
  border: 1px solid color-mix(in srgb, var(--m-passport-hi, #2DD4BF) 38%, transparent);
}

.realm-boundary {
  position: relative;
  height: 130px;
  display: flex; align-items: center; justify-content: center;
}
.realm-boundary .boundary-line {
  position: absolute; top: 8px; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--m-edge-hi, #FCD34D) 30%, transparent) 12%,
    var(--m-edge-hi, #FCD34D) 30%,
    var(--m-passport-hi, #2DD4BF) 70%,
    color-mix(in srgb, var(--m-passport-hi, #2DD4BF) 30%, transparent) 88%,
    transparent 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--m-edge-hi, #FCD34D) 40%, transparent);
  animation: realm-stitch-boundary-pulse 5s ease-in-out infinite;
}
.realm-boundary .boundary-label {
  position: absolute; bottom: 6px; left: 50%;
  transform: translateX(-50%);
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--text-4);
  white-space: nowrap;
  pointer-events: none;
}
.realm-boundary .entity-dot {
  position: absolute; top: 35%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-1);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--m-edge-hi, #FCD34D) 60%, transparent),
    0 0 16px color-mix(in srgb, var(--m-edge-hi, #FCD34D) 80%, transparent);
  animation: realm-stitch-entity-fly 5s ease-in-out infinite;
  z-index: 3;
}
.realm-boundary .entity-trail {
  position: absolute; top: 35%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-3);
  opacity: 0.6;
  animation: realm-stitch-entity-fly 5s ease-in-out infinite;
  animation-delay: -0.18s;
  z-index: 2;
}
.realm-boundary .authority-bar {
  position: absolute; bottom: -2px; left: -40%; right: -40%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--m-edge-hi, #FCD34D) 0%,
    var(--m-edge-hi, #FCD34D) 45%,
    color-mix(in srgb, var(--m-edge-hi, #FCD34D) 50%, var(--m-passport-hi, #2DD4BF) 50%) 50%,
    var(--m-passport-hi, #2DD4BF) 55%,
    var(--m-passport-hi, #2DD4BF) 100%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  animation: realm-stitch-authority 5s ease-in-out infinite;
  opacity: 0.85;
  box-shadow: 0 0 12px color-mix(in srgb, var(--m-edge-hi, #FCD34D) 35%, transparent);
}

.realm-stitch-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.realm-stitch-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.realm-stitch-tile .lbl {
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-4);
}
.realm-stitch-tile .val {
  font: 700 17px/1.1 var(--font-mono);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.realm-stitch-tile.rs-transfer  .val::after  { content: "3.2 ms"; animation: realm-stitch-transfer 5s steps(1, end) infinite; }
.realm-stitch-tile.rs-daytotal  .val::after  { content: "1,247 ents"; animation: realm-stitch-daytotal 10s steps(1, end) infinite; }

.realm-stitch-status {
  position: absolute; bottom: 0; left: 0; right: 0; height: 32px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap; overflow: hidden;
}
.realm-stitch-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: realm-stitch-breathe 1.5s ease-in-out infinite;
  flex: 0 0 auto;
}
.realm-stitch-status .sep { color: var(--text-4); }
.realm-stitch-status .rs-avg::after { content: "3.4 ms"; animation: realm-stitch-avg 5s steps(1, end) infinite; }

@keyframes realm-stitch-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes realm-stitch-entity-fly {
  0%, 5%   { left: 14%;  opacity: 0; }
  10%      { left: 18%;  opacity: 1; }
  45%, 55% { left: 50%;  opacity: 1; }
  88%      { left: 82%;  opacity: 1; }
  95%, 100%{ left: 86%;  opacity: 0; }
}
@keyframes realm-stitch-boundary-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}
@keyframes realm-stitch-authority {
  0%, 8%   { background-position: 0% 0%; }
  45%      { background-position: 50% 0%; }
  88%, 100%{ background-position: 100% 0%; }
}
@keyframes realm-stitch-transfer {
  0%   { content: "3.2 ms"; }
  25%  { content: "3.5 ms"; }
  50%  { content: "3.1 ms"; }
  75%  { content: "3.4 ms"; }
  100% { content: "3.2 ms"; }
}
@keyframes realm-stitch-daytotal {
  0%   { content: "1,247 ents"; }
  20%  { content: "1,248 ents"; }
  40%  { content: "1,249 ents"; }
  60%  { content: "1,250 ents"; }
  80%  { content: "1,251 ents"; }
  100% { content: "1,252 ents"; }
}
@keyframes realm-stitch-avg {
  0%   { content: "3.4 ms"; }
  33%  { content: "3.3 ms"; }
  66%  { content: "3.5 ms"; }
  100% { content: "3.4 ms"; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-stitch-frame *,
  .realm-stitch-frame *::before,
  .realm-stitch-frame *::after {
    animation: none !important;
    transition: none !important;
  }
  .realm-stitch-frame .entity-dot,
  .realm-stitch-frame .entity-trail { left: 50%; opacity: 1; }
  .realm-stitch-frame .authority-bar { background-position: 50% 0%; }
  .realm-stitch-frame .rs-transfer .val::after  { content: "3.2 ms"; }
  .realm-stitch-frame .rs-daytotal .val::after  { content: "1,247 ents"; }
  .realm-stitch-frame .rs-avg::after { content: "3.4 ms"; }
}

/* ========================================================================
   REALM PILLAR · BOTTOM VIZ — "Region Mesh" (realm-mesh-*)
   Used by RealmSignatureViz. 5 region cards positioned on a 600x250 design
   grid + SVG arcs + animated entity packets traveling along corridors.
   ======================================================================== */
.realm-mesh-frame {
  position: relative;
  aspect-ratio: 14 / 5;
  min-height: 300px;
  background: var(--bg-1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,0.9),
    0 0 0 1px color-mix(in srgb, var(--m-edge, #F59E0B) 16%, transparent);
  font-family: var(--font-sans);
  color: var(--text-1);
}

.realm-mesh-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
}
.realm-mesh-chrome .sep { color: var(--text-5, var(--text-4)); margin: 0 4px; }
.realm-mesh-chrome .spacer { flex: 1; }
.realm-mesh-chrome .counters {
  font: 500 10.5px/1 var(--font-mono); color: var(--text-3);
}
.realm-mesh-chrome .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 36%, transparent);
  color: var(--emerald, #10B981);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.realm-mesh-chrome .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: realm-mesh-breathe 1.6s ease-in-out infinite;
}
.realm-mesh-chrome .ent-count { font-variant-numeric: tabular-nums; }
.realm-mesh-chrome .ent-count::after { content: "4,862"; animation: realm-mesh-ent-count 5s steps(1, end) infinite; }

.realm-mesh-stage {
  position: absolute; top: 36px; left: 0; right: 0; bottom: 36px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg-1);
  overflow: hidden;
}
.realm-mesh-glow {
  position: absolute;
  top: 30%; left: 40%;
  width: 380px; height: 240px;
  border-radius: 50%;
  filter: blur(90px);
  background: var(--m-edge, #F59E0B);
  opacity: 0.10;
  pointer-events: none;
}

.realm-mesh-arcs {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.realm-mesh-arc {
  fill: none; stroke-width: 1.8; stroke-linecap: round; opacity: 0.78;
}
.realm-mesh-arc.is-dashed { stroke-dasharray: 5 5; opacity: 0.5; }
.realm-mesh-packet { pointer-events: none; }
.realm-mesh-static-dot { fill: var(--m-edge-hi, #FCD34D); opacity: 0; }

.realm-mesh-region {
  position: absolute;
  left:  calc(var(--x) / 600 * 100%);
  top:   calc(var(--y) / 250 * 100%);
  transform: translate(-50%, -50%);
  width: 124px;
  padding: 7px 9px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid color-mix(in srgb, var(--c, var(--m-edge-hi, #FCD34D)) 30%, var(--border));
  border-radius: 8px;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.7);
  z-index: 3;
}
.realm-mesh-region .code {
  display: inline-block;
  font: 700 9px/1 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c, var(--m-edge-hi, #FCD34D));
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--c, var(--m-edge-hi, #FCD34D)) 40%, transparent);
  border-radius: 3px;
}
.realm-mesh-region .name {
  margin-top: 5px;
  font: 600 11.5px/1.1 var(--font-sans);
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.realm-mesh-region .metrics {
  margin-top: 4px;
  font: 500 9.5px/1.2 var(--font-mono);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.realm-mesh-region .region-dot {
  position: absolute; top: -3px; left: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--m-edge-hi, #FCD34D));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--c, var(--m-edge-hi, #FCD34D)) 24%, transparent),
    0 0 10px color-mix(in srgb, var(--c, var(--m-edge-hi, #FCD34D)) 55%, transparent);
  animation: realm-mesh-region-pulse 2.4s ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}

/* Per-region colors */
.realm-mesh-region.r-naw  { --c: #FCD34D; --pulse-delay: 0s;    }
.realm-mesh-region.r-nae  { --c: #FDE68A; --pulse-delay: 0.4s;  }
.realm-mesh-region.r-euw  { --c: #A78BFA; --pulse-delay: 0.8s;  }
.realm-mesh-region.r-apse { --c: #2DD4BF; --pulse-delay: 1.2s;  }
.realm-mesh-region.r-ape  { --c: #F472B6; --pulse-delay: 1.6s;  }

.realm-mesh-status {
  position: absolute; bottom: 0; left: 0; right: 0; height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap; overflow: hidden;
  z-index: 5;
}
.realm-mesh-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: realm-mesh-breathe 1.5s ease-in-out infinite;
  flex: 0 0 auto;
}
.realm-mesh-status .sep { color: var(--text-4); }
.realm-mesh-status .corridors { font-variant-numeric: tabular-nums; }
.realm-mesh-status .corridors::after { content: "24"; animation: realm-mesh-corridors 6s steps(1, end) infinite; }

@keyframes realm-mesh-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes realm-mesh-region-pulse {
  0%, 100% { box-shadow:
      0 0 0 2px color-mix(in srgb, var(--c, var(--m-edge-hi, #FCD34D)) 24%, transparent),
      0 0 10px color-mix(in srgb, var(--c, var(--m-edge-hi, #FCD34D)) 50%, transparent); }
  50%      { box-shadow:
      0 0 0 4px color-mix(in srgb, var(--c, var(--m-edge-hi, #FCD34D)) 40%, transparent),
      0 0 16px color-mix(in srgb, var(--c, var(--m-edge-hi, #FCD34D)) 75%, transparent); }
}
@keyframes realm-mesh-ent-count {
  0%   { content: "4,862"; }
  25%  { content: "4,890"; }
  50%  { content: "4,915"; }
  75%  { content: "4,888"; }
  100% { content: "4,862"; }
}
@keyframes realm-mesh-corridors {
  0%   { content: "24"; }
  33%  { content: "25"; }
  66%  { content: "23"; }
  100% { content: "24"; }
}

@media (prefers-reduced-motion: reduce) {
  .realm-mesh-frame *,
  .realm-mesh-frame *::before,
  .realm-mesh-frame *::after {
    animation: none !important;
    transition: none !important;
  }
  .realm-mesh-frame .realm-mesh-packet { display: none; }
  .realm-mesh-frame .realm-mesh-static-dot { opacity: 1; }
  .realm-mesh-frame .ent-count::after { content: "4,862"; }
  .realm-mesh-frame .corridors::after { content: "24"; }
}

/* ========================================================================
   VAULT PILLAR · TOP VIZ — "Receipt → Signed" (vault-receipt-*)
   Used by VaultHeroTeaser in home/app/_components/pillar-viz/VaultSignatureViz.tsx
   Forensic close-up of one IAP being verified server-side: a stylized receipt
   card on the left, a 3-step verification list + a decision stamp on the right.
   A 32s master cycle = 4 × 8s sub-cycles. Three sub-cycles VERIFIED (emerald),
   the fourth REJECTED (red-400) — never let rose mean negative, rose IS brand.
   ======================================================================== */
.vault-receipt-frame {
  position: relative;
  aspect-ratio: 8 / 5;
  background: var(--bg-1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,0.9),
    0 0 0 1px color-mix(in srgb, var(--m-vault, #F43F5E) 16%, transparent);
  font-family: var(--font-sans);
  color: var(--text-1);

  /* Master 32s cycle: rotate stamp color/label/icon/reason every 4th sub-cycle.
     Child elements read --stamp-c / --stamp-bg and content::after picks up
     labels/reasons from their own per-property keyframes that share the same
     32s period — phases stay locked. */
  --stamp-c:  var(--emerald, #10B981);
  --stamp-bg: color-mix(in srgb, var(--emerald, #10B981) 12%, transparent);
  --stamp-ring: color-mix(in srgb, var(--emerald, #10B981) 45%, transparent);
  animation: vault-receipt-master 32s steps(1, end) infinite;
}

@keyframes vault-receipt-master {
  0%, 75% {
    --stamp-c:  var(--emerald, #10B981);
    --stamp-bg: color-mix(in srgb, var(--emerald, #10B981) 12%, transparent);
    --stamp-ring: color-mix(in srgb, var(--emerald, #10B981) 45%, transparent);
  }
  75%, 100% {
    --stamp-c:  #F87171;
    --stamp-bg: color-mix(in srgb, #F87171 12%, transparent);
    --stamp-ring: color-mix(in srgb, #F87171 50%, transparent);
  }
}

.vault-receipt-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 32px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
}
.vault-receipt-chrome .path { color: var(--text-3); }
.vault-receipt-chrome .path .slug { color: var(--m-vault-hi, #FB7185); }
.vault-receipt-chrome .sep { color: var(--text-5, var(--text-4)); margin: 0 4px; }
.vault-receipt-chrome .spacer { flex: 1; }
.vault-receipt-chrome .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 36%, transparent);
  color: var(--emerald, #10B981);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.vault-receipt-chrome .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: vault-receipt-breathe 1.6s ease-in-out infinite;
}

.vault-receipt-body {
  position: absolute; top: 32px; left: 0; right: 0; bottom: 36px;
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 14px;
  padding: 16px 18px;
}

/* ── LEFT — receipt card ─────────────────────────────────────────────── */
.vault-receipt-paper {
  position: relative;
  padding: 18px 14px 12px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 100%, transparent) 0%,
      var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,0.5);
  animation: vault-receipt-paper-in 8s ease-out infinite;
}
/* Perforation: a dashed tear-line at ~22px from the top of the paper */
.vault-receipt-paper .perf {
  position: absolute; left: 8px; right: 8px; top: 11px;
  height: 1px;
  background-image:
    radial-gradient(circle, var(--bg-1) 1.6px, transparent 1.8px),
    linear-gradient(90deg,
      color-mix(in srgb, var(--text-5, var(--text-4)) 70%, transparent) 50%,
      transparent 50%);
  background-size: 14px 100%, 5px 1px;
  background-repeat: repeat-x, repeat-x;
  background-position: 0 50%, 0 50%;
  opacity: 0.55;
}
.vault-receipt-paper .row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1.2 var(--font-mono);
  color: var(--text-2);
}
.vault-receipt-paper .row:last-child { border-bottom: none; }
.vault-receipt-paper .row.sig { grid-template-columns: 36px 1fr; }
.vault-receipt-paper .lbl {
  color: var(--text-4);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 9px;
}
.vault-receipt-paper .val { color: var(--text-1); font-variant-numeric: tabular-nums; }
.vault-receipt-paper .price {
  color: var(--m-vault-hi, #FB7185);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vault-receipt-paper .region {
  color: var(--text-4);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 9px;
}

/* Signature shimmer strip */
.vault-receipt-sig {
  display: block;
  width: 100%; height: 14px;
  border-radius: 3px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--m-vault-hi, #FB7185) 8%, var(--bg-1)) 0%,
      color-mix(in srgb, var(--m-vault-hi, #FB7185) 28%, var(--bg-1)) 50%,
      color-mix(in srgb, var(--m-vault-hi, #FB7185) 8%, var(--bg-1)) 100%);
  background-size: 200% 100%;
  border: 1px solid color-mix(in srgb, var(--m-vault, #F43F5E) 18%, var(--border));
  position: relative;
  overflow: hidden;
  animation: vault-receipt-sig-shimmer 8s linear infinite;
}
.vault-receipt-sig::before {
  content: "3a8c · f9d4 · 4b21 · b801 · 7c5e";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--m-vault-hi, #FB7185) 90%, var(--text-2));
  opacity: 0.85;
}

/* Cycling content (8s loop) — store, item, price, tx_id */
.vault-receipt-paper .store-label::after { content: "App Store"; animation: vault-receipt-store-name 8s steps(1, end) infinite; }
.vault-receipt-paper .item-id::after     { content: "gem_pack_500"; animation: vault-receipt-item-id 8s steps(1, end) infinite; }
.vault-receipt-paper .price::after       { content: "$4.99 USD"; animation: vault-receipt-price 8s steps(1, end) infinite; }
.vault-receipt-paper .tx-id::after       { content: "0x91…7c"; animation: vault-receipt-tx-id 8s steps(1, end) infinite; }

/* ── RIGHT — verify rows + stamp ─────────────────────────────────────── */
.vault-receipt-decision {
  display: flex; flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.vault-receipt-rows {
  display: flex; flex-direction: column;
  gap: 6px;
}
.vault-receipt-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 500 11px/1.1 var(--font-mono);
  color: var(--text-3);
  position: relative;
  overflow: hidden;
}
.vault-receipt-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
}
.vault-receipt-row .ind {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-5, var(--text-4));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-5, var(--text-4)) 18%, transparent);
}
.vault-receipt-row .text {
  color: var(--text-2);
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-receipt-row .ms {
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

/* Each row goes idle → checking → ok over its 8s sub-cycle, staggered by 0.6s.
   Triangular animation: gray (idle) → rose (checking) → emerald (ok), then
   held until the next cycle fade-out, then back to idle. */
.vault-receipt-row.vr-sig { animation: vault-receipt-row-state 8s steps(1, end) infinite; animation-delay: 0.6s; }
.vault-receipt-row.vr-vel { animation: vault-receipt-row-state 8s steps(1, end) infinite; animation-delay: 1.4s; }
.vault-receipt-row.vr-pol { animation: vault-receipt-row-state 8s steps(1, end) infinite; animation-delay: 2.2s; }

/* Decision stamp */
.vault-receipt-stamp {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px 12px;
  background: var(--stamp-bg);
  border: 1.5px solid var(--stamp-c);
  border-radius: 10px;
  box-shadow:
    0 0 0 3px var(--stamp-ring),
    0 14px 30px -12px color-mix(in srgb, var(--stamp-c) 50%, transparent);
  transform-origin: center;
  animation: vault-receipt-stamp-drop 8s ease-out infinite;
}
.vault-receipt-stamp .stamp-icon {
  grid-row: 1 / span 2;
  width: 38px; height: 38px; border-radius: 8px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--stamp-c) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--stamp-c) 50%, transparent);
  color: var(--stamp-c);
  font: 700 22px/1 var(--font-mono);
}
.vault-receipt-stamp .stamp-icon::after {
  content: "✓";
  animation: vault-receipt-stamp-icon 32s steps(1, end) infinite;
}
.vault-receipt-stamp .stamp-label {
  font: 700 14px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stamp-c);
}
.vault-receipt-stamp .stamp-label::after {
  content: "VERIFIED";
  animation: vault-receipt-stamp-label 32s steps(1, end) infinite;
}
.vault-receipt-stamp .stamp-reason {
  margin-top: 4px;
  font: 500 11px/1.3 var(--font-mono);
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.vault-receipt-stamp .stamp-reason::after {
  content: "+500 gems · cross-pl.";
  animation: vault-receipt-stamp-reason 32s steps(1, end) infinite;
}

/* Status footer */
.vault-receipt-status {
  position: absolute; bottom: 0; left: 0; right: 0; height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap; overflow: hidden;
  z-index: 4;
}
.vault-receipt-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: vault-receipt-breathe 1.5s ease-in-out infinite;
  flex: 0 0 auto;
}
.vault-receipt-status .sep { color: var(--text-4); }
.vault-receipt-status .ver-pm { color: var(--text-1); font-variant-numeric: tabular-nums; }
.vault-receipt-status .ver-pm::after { content: "1,247"; animation: vault-receipt-ver-pm 5s steps(1, end) infinite; }
.vault-receipt-status .blk-pm { color: var(--text-1); font-variant-numeric: tabular-nums; }
.vault-receipt-status .blk-pm::after { content: "12"; animation: vault-receipt-blk-pm 6s steps(1, end) infinite; }

/* ── Keyframes for top viz ───────────────────────────────────────────── */
@keyframes vault-receipt-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes vault-receipt-paper-in {
  0%, 4%   { transform: translateY(6px); opacity: 0; }
  10%, 92% { transform: translateY(0);    opacity: 1; }
  100%     { transform: translateY(-3px); opacity: 0.6; }
}
@keyframes vault-receipt-sig-shimmer {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}
@keyframes vault-receipt-row-state {
  /* before delay: row stays idle from the previous cycle */
  0%, 1%   { background: var(--surface); }
  /* checking: rose tint, indicator turns rose */
  2%, 8%   { background: color-mix(in srgb, var(--m-vault, #F43F5E) 8%, var(--surface)); }
  /* ok: emerald tint, indicator turns emerald */
  9%, 90%  { background: color-mix(in srgb, var(--emerald, #10B981) 7%, var(--surface)); }
  /* fade out at end of cycle */
  91%, 100%{ background: var(--surface); }
}
.vault-receipt-row.vr-sig .ind { animation: vault-receipt-ind 8s steps(1, end) infinite; animation-delay: 0.6s; }
.vault-receipt-row.vr-vel .ind { animation: vault-receipt-ind 8s steps(1, end) infinite; animation-delay: 1.4s; }
.vault-receipt-row.vr-pol .ind { animation: vault-receipt-ind 8s steps(1, end) infinite; animation-delay: 2.2s; }
@keyframes vault-receipt-ind {
  0%, 1%   {
    background: var(--text-5, var(--text-4));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-5, var(--text-4)) 18%, transparent);
  }
  2%, 8%   {
    background: var(--m-vault-hi, #FB7185);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--m-vault, #F43F5E) 30%, transparent),
      0 0 8px var(--m-vault-hi, #FB7185);
  }
  9%, 90%  {
    background: var(--emerald, #10B981);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--emerald, #10B981) 30%, transparent),
      0 0 8px var(--emerald, #10B981);
  }
  91%, 100%{
    background: var(--text-5, var(--text-4));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-5, var(--text-4)) 18%, transparent);
  }
}
/* Default ::after content + per-row animation. Each row uses the SAME timing
   (idle 0–8%, ok 9–100%) but a different value; the row's animation-delay
   matches its .ind delay so the text + indicator color flip together. */
.vault-receipt-row .ms::after { content: "— ms"; color: var(--text-5, var(--text-4)); }
.vault-receipt-row.vr-sig .ms::after { animation: vault-receipt-ms-sig 8s steps(1, end) infinite; animation-delay: 0.6s; }
.vault-receipt-row.vr-vel .ms::after { animation: vault-receipt-ms-vel 8s steps(1, end) infinite; animation-delay: 1.4s; }
.vault-receipt-row.vr-pol .ms::after { animation: vault-receipt-ms-pol 8s steps(1, end) infinite; animation-delay: 2.2s; }
@keyframes vault-receipt-ms-sig {
  0%, 8%   { content: "— ms"; color: var(--text-5, var(--text-4)); }
  9%, 100% { content: "8 ms"; color: var(--emerald, #10B981); }
}
@keyframes vault-receipt-ms-vel {
  0%, 8%   { content: "— ms"; color: var(--text-5, var(--text-4)); }
  9%, 100% { content: "11 ms"; color: var(--emerald, #10B981); }
}
@keyframes vault-receipt-ms-pol {
  0%, 8%   { content: "— ms"; color: var(--text-5, var(--text-4)); }
  9%, 100% { content: "14 ms"; color: var(--emerald, #10B981); }
}

@keyframes vault-receipt-stamp-drop {
  /* invisible while verify rows tick (0–2.56s of 8s cycle) */
  0%, 30%  { transform: scale(0.6) rotate(-4deg); opacity: 0; }
  /* bouncy entrance once all 3 verifies have settled */
  36%      { transform: scale(1.06) rotate(0deg); opacity: 1; }
  42%, 92% { transform: scale(1) rotate(0deg); opacity: 1; }
  /* fade out at the very end so the next receipt can slide in */
  97%, 100%{ transform: scale(1) rotate(0deg); opacity: 0; }
}

/* 32s master cyclers: stamp label/icon/reason rotate every 4th sub-cycle. */
@keyframes vault-receipt-stamp-label {
  0%, 75%   { content: "VERIFIED"; }
  75%, 100% { content: "REJECTED"; }
}
@keyframes vault-receipt-stamp-icon {
  0%, 75%   { content: "✓"; }
  75%, 100% { content: "✗"; }
}
@keyframes vault-receipt-stamp-reason {
  0%, 25%    { content: "+500 gems · cross-pl."; }
  25%, 50%   { content: "+1,200 coins · grant"; }
  50%, 75%   { content: "+1 skin · battle pass"; }
  75%, 100%  { content: "velocity_exceeded"; }
}

/* Store / item / price / tx_id cyclers — 8s loop, in sync with receipt slide */
@keyframes vault-receipt-store-name {
  0%, 100% { content: "App Store"; }
}
@keyframes vault-receipt-item-id {
  0%, 25%   { content: "gem_pack_500"; }
  25%, 50%  { content: "season_pass_q2"; }
  50%, 75%  { content: "skin_legendary"; }
  75%, 100% { content: "gem_pack_100"; }
}
@keyframes vault-receipt-price {
  0%, 25%   { content: "$4.99 USD"; }
  25%, 50%  { content: "$9.99 USD"; }
  50%, 75%  { content: "$14.99 USD"; }
  75%, 100% { content: "$0.99 USD"; }
}
@keyframes vault-receipt-tx-id {
  0%, 25%   { content: "0x91…7c"; }
  25%, 50%  { content: "0xb4…71"; }
  50%, 75%  { content: "0xc9…04"; }
  75%, 100% { content: "0xe7…6c"; }
}
@keyframes vault-receipt-ver-pm {
  0%   { content: "1,247"; }
  25%  { content: "1,251"; }
  50%  { content: "1,255"; }
  75%  { content: "1,258"; }
  100% { content: "1,262"; }
}
@keyframes vault-receipt-blk-pm {
  0%   { content: "12"; }
  33%  { content: "11"; }
  66%  { content: "13"; }
  100% { content: "12"; }
}

@media (prefers-reduced-motion: reduce) {
  .vault-receipt-frame *,
  .vault-receipt-frame *::before,
  .vault-receipt-frame *::after {
    animation: none !important;
    transition: none !important;
  }
  .vault-receipt-frame {
    --stamp-c:  var(--emerald, #10B981);
    --stamp-bg: color-mix(in srgb, var(--emerald, #10B981) 12%, transparent);
    --stamp-ring: color-mix(in srgb, var(--emerald, #10B981) 45%, transparent);
  }
  .vault-receipt-row .ind {
    background: var(--emerald, #10B981);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--emerald, #10B981) 30%, transparent),
      0 0 6px var(--emerald, #10B981);
  }
  .vault-receipt-row .ms { color: var(--emerald, #10B981); }
  .vault-receipt-row { background: color-mix(in srgb, var(--emerald, #10B981) 7%, var(--surface)); }
  .vault-receipt-stamp .stamp-icon::after  { content: "✓"; }
  .vault-receipt-stamp .stamp-label::after { content: "VERIFIED"; }
  .vault-receipt-stamp .stamp-reason::after{ content: "+500 gems · cross-pl."; }
  .vault-receipt-paper .store-label::after { content: "App Store"; }
  .vault-receipt-paper .item-id::after     { content: "gem_pack_500"; }
  .vault-receipt-paper .price::after       { content: "$4.99 USD"; }
  .vault-receipt-paper .tx-id::after       { content: "0x91…7c"; }
  .vault-receipt-status .ver-pm::after     { content: "1,247"; }
  .vault-receipt-status .blk-pm::after     { content: "12"; }
}

/* ========================================================================
   VAULT — shared store glyph (used by both top + bottom viz)
   data-store="apple|google|steam|web". For top, also is-cycling animates
   the color + letter every 8s in sync with the receipt sub-cycle.
   No real brand marks — typographic monogram to avoid trademark issues.
   ======================================================================== */
.vault-store-glyph {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  font: 700 10px/1 var(--font-mono);
  color: #FFF;
  letter-spacing: 0;
  flex-shrink: 0;
  --c: var(--text-4);
  background: color-mix(in srgb, var(--c) 85%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--c) 60%, var(--border));
  position: relative;
  vertical-align: middle;
}
.vault-store-glyph[data-store="apple"]  { --c: #A8A8AD; }
.vault-store-glyph[data-store="google"] { --c: #4285F4; }
.vault-store-glyph[data-store="steam"]  { --c: #4D6E8C; }
.vault-store-glyph[data-store="web"]    { --c: var(--text-3); }
.vault-store-glyph[data-store="apple"]::before  { content: "a"; }
.vault-store-glyph[data-store="google"]::before { content: "g"; }
.vault-store-glyph[data-store="steam"]::before  { content: "s"; }
.vault-store-glyph[data-store="web"]::before    { content: "w"; }

/* Larger glyph in the receipt top viz */
.vault-receipt-paper .vault-store-glyph {
  width: 20px; height: 20px;
  font-size: 11px;
}
.vault-receipt-paper .vault-store-glyph.is-cycling {
  animation: vault-store-cycle-c 8s steps(1, end) infinite;
}
.vault-receipt-paper .vault-store-glyph.is-cycling::before {
  animation: vault-store-cycle-letter 8s steps(1, end) infinite;
}
@keyframes vault-store-cycle-c {
  0%, 25%    { --c: #A8A8AD; }
  25%, 50%   { --c: #4285F4; }
  50%, 75%   { --c: #4D6E8C; }
  75%, 100%  { --c: var(--text-3); }
}
@keyframes vault-store-cycle-letter {
  0%, 25%    { content: "a"; }
  25%, 50%   { content: "g"; }
  50%, 75%   { content: "s"; }
  75%, 100%  { content: "w"; }
}
@keyframes vault-receipt-store-name-sync {
  0%, 25%    { content: "App Store"; }
  25%, 50%   { content: "Google Play"; }
  50%, 75%   { content: "Steam"; }
  75%, 100%  { content: "Web"; }
}
/* override store-label animation with the synced variant so the label
   matches the cycling glyph */
.vault-receipt-paper .store-label::after { animation: vault-receipt-store-name-sync 8s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) {
  .vault-receipt-paper .vault-store-glyph.is-cycling { --c: #A8A8AD !important; }
  .vault-receipt-paper .vault-store-glyph.is-cycling::before { content: "a" !important; }
}

/* ========================================================================
   VAULT PILLAR · BOTTOM VIZ — "Live Ledger" (vault-ledger-*)
   Used by VaultSignatureViz in home/app/_components/pillar-viz/VaultSignatureViz.tsx
   Header agg tiles + horizontal flowing ledger track (duplicated block array,
   translate3d 0 → -50% for seamless loop) + sparkline + status footer.
   ======================================================================== */
.vault-ledger-frame {
  position: relative;
  aspect-ratio: 16 / 5;
  min-height: 300px;
  background: var(--bg-1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,0.9),
    0 0 0 1px color-mix(in srgb, var(--m-vault, #F43F5E) 16%, transparent);
  font-family: var(--font-sans);
  color: var(--text-1);
}

.vault-ledger-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 36px; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
}
.vault-ledger-chrome .path { color: var(--text-3); }
.vault-ledger-chrome .path .slug { color: var(--m-vault-hi, #FB7185); }
.vault-ledger-chrome .sep { color: var(--text-5, var(--text-4)); margin: 0 4px; }
.vault-ledger-chrome .spacer { flex: 1; }
.vault-ledger-chrome .root {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--m-vault, #F43F5E) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--m-vault, #F43F5E) 30%, transparent);
  border-radius: 999px;
  color: var(--m-vault-hi, #FB7185);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.vault-ledger-chrome .root .root-hash {
  font: 600 9.5px/1 var(--font-mono);
  color: var(--m-vault-hi, #FB7185);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0.02em;
}
.vault-ledger-chrome .root .root-hash::after { content: ""; }
.vault-ledger-chrome .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--emerald, #10B981) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 36%, transparent);
  color: var(--emerald, #10B981);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.vault-ledger-chrome .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: vault-ledger-breathe 1.6s ease-in-out infinite;
}

/* ── Aggregate tile strip ────────────────────────────────────────────── */
.vault-ledger-agg {
  position: absolute; top: 36px; left: 0; right: 0; height: 76px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 12px 16px 8px;
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}
.vault-ledger-tile {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 8px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
  position: relative;
}
.vault-ledger-tile .lbl {
  font: 600 8.5px/1 var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-4);
}
.vault-ledger-tile .val {
  font: 600 16px/1.05 var(--font-mono);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.vault-ledger-tile.vt-verified .val::after { content: "47,231"; animation: vault-ledger-val-ver 5s steps(1, end) infinite; }
.vault-ledger-tile.vt-blocked  .val::after { content: "184";    animation: vault-ledger-val-blk 6s steps(1, end) infinite; }
.vault-ledger-tile.vt-rev      .val::after { content: "$284K";  animation: vault-ledger-val-rev 5s steps(1, end) infinite; }
.vault-ledger-tile.vt-fraud    .val::after { content: "0.18%";  animation: vault-ledger-val-fraud 7s steps(1, end) infinite; }
.vault-ledger-tile.vt-fraud    .val         { color: var(--m-vault-hi, #FB7185); }

.vault-ledger-tile.vt-fraud .bar {
  position: relative;
  margin-top: 2px;
  height: 4px; width: 100%;
  background: color-mix(in srgb, var(--m-vault-hi, #FB7185) 14%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.vault-ledger-tile.vt-fraud .bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 18%;
  background: linear-gradient(90deg, var(--m-vault, #F43F5E), var(--m-vault-hi, #FB7185));
  border-radius: 999px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--m-vault-hi, #FB7185) 70%, transparent);
  animation: vault-ledger-fraud-bar 7s ease-in-out infinite;
}

/* ── Main ledger lane (horizontal flowing track) ─────────────────────── */
.vault-ledger-lane {
  position: absolute;
  top: 116px; left: 0; right: 0;
  bottom: 76px; /* sit on top of the sparkline strip (36) + status (36) + 4 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  overflow: hidden;
  display: flex; align-items: center;
}
/* Subtle ambient backdrop so the lane doesn't read as a void of black */
.vault-ledger-lane-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%,
      color-mix(in srgb, var(--m-vault, #F43F5E) 8%, transparent) 0%,
      transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0) 0 0 / 22px 22px;
}
.vault-ledger-track {
  position: relative;
  display: flex; align-items: stretch;
  gap: 12px;
  padding: 0 14px;
  width: max-content;
  will-change: transform;
  animation: vault-ledger-scroll 22s linear infinite;
}
@keyframes vault-ledger-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.vault-ledger-block {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px 14px 11px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: 500 11.5px/1.2 var(--font-mono);
  min-width: 248px;
  box-shadow: 0 14px 28px -14px rgba(0,0,0,0.55);
  position: relative;
}

/* Block sub-rows */
.vault-ledger-block .b-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.vault-ledger-block .b-body {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 2px 0;
  border-block: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.vault-ledger-block .b-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.vault-ledger-block .hash {
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.vault-ledger-block .store-name {
  color: var(--text-3);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 8.5px;
}
.vault-ledger-block .ms {
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  font-size: 9.5px;
}
.vault-ledger-block .item {
  color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px;
}
.vault-ledger-block .amount {
  color: var(--text-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.vault-ledger-block .extra {
  color: var(--text-4);
  letter-spacing: 0.02em;
  font-size: 9.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-ledger-block .pill {
  display: inline-flex; align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  font: 700 9px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.vault-ledger-block.is-ok      .pill {
  color: var(--emerald, #10B981);
  background: color-mix(in srgb, var(--emerald, #10B981) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #10B981) 38%, transparent);
}
.vault-ledger-block.is-blocked .pill {
  color: #F87171;
  background: color-mix(in srgb, #F87171 12%, transparent);
  border: 1px solid color-mix(in srgb, #F87171 45%, transparent);
}
.vault-ledger-block.is-refund  .pill {
  color: #FBBF24;
  background: color-mix(in srgb, #FBBF24 10%, transparent);
  border: 1px solid color-mix(in srgb, #FBBF24 40%, transparent);
}
.vault-ledger-block.is-blocked {
  border-color: color-mix(in srgb, #F87171 30%, var(--border));
  box-shadow:
    0 14px 28px -14px rgba(0,0,0,0.55),
    inset 0 0 0 1px color-mix(in srgb, #F87171 12%, transparent);
}
.vault-ledger-block.is-refund {
  border-color: color-mix(in srgb, #FBBF24 22%, var(--border));
}

/* ── Sparkline + footer ──────────────────────────────────────────────── */
.vault-ledger-spark {
  position: absolute;
  bottom: 36px; left: 0; right: 0;
  height: 36px;
  display: flex; align-items: center; gap: 12px;
  padding: 4px 16px 8px;
}
.vault-ledger-spark .spark-wrap {
  position: relative;
  flex: 1;
  height: 28px;
}
.vault-ledger-spark svg { width: 100%; height: 100%; display: block; }
.vault-ledger-spark .sl-stroke {
  fill: none;
  stroke: var(--m-vault-hi, #FB7185);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vault-ledger-spark .sl-fill { stroke: none; }
.vault-ledger-spark .sl-marker {
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--m-vault-hi, #FB7185);
  border: 1.5px solid var(--bg-1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--m-vault-hi, #FB7185) 70%, transparent);
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  animation: vault-ledger-marker-slide 12s ease-in-out infinite;
  pointer-events: none;
}
.vault-ledger-spark .sl-lbl {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-4);
  flex-shrink: 0;
}

.vault-ledger-status {
  position: absolute; bottom: 0; left: 0; right: 0; height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font: 500 11px/1.4 var(--font-mono);
  color: var(--text-3);
  white-space: nowrap; overflow: hidden;
  z-index: 5;
}
.vault-ledger-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald, #10B981);
  box-shadow: 0 0 8px var(--emerald, #10B981);
  animation: vault-ledger-breathe 1.5s ease-in-out infinite;
  flex: 0 0 auto;
}
.vault-ledger-status .sep { color: var(--text-4); }
.vault-ledger-status .ok { color: var(--emerald, #10B981); font-weight: 700; }
.vault-ledger-status .head-hash {
  color: var(--m-vault-hi, #FB7185);
  font-variant-numeric: tabular-nums;
}
.vault-ledger-status .head-hash::after {
  content: "#4456…9c";
  animation: vault-ledger-head-hash 6s steps(1, end) infinite;
}

/* ── Keyframes for bottom viz ────────────────────────────────────────── */
@keyframes vault-ledger-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes vault-ledger-val-ver {
  0%   { content: "47,231"; }
  25%  { content: "47,318"; }
  50%  { content: "47,402"; }
  75%  { content: "47,489"; }
  100% { content: "47,571"; }
}
@keyframes vault-ledger-val-blk {
  0%   { content: "184"; }
  33%  { content: "186"; }
  66%  { content: "188"; }
  100% { content: "191"; }
}
@keyframes vault-ledger-val-rev {
  0%   { content: "$284K"; }
  25%  { content: "$285K"; }
  50%  { content: "$286K"; }
  75%  { content: "$287K"; }
  100% { content: "$288K"; }
}
@keyframes vault-ledger-val-fraud {
  0%, 100% { content: "0.18%"; }
  33%      { content: "0.21%"; }
  66%      { content: "0.16%"; }
}
@keyframes vault-ledger-fraud-bar {
  0%, 100% { width: 18%; }
  33%      { width: 21%; }
  66%      { width: 16%; }
}
@keyframes vault-ledger-marker-slide {
  0%   { left: 0%;   top: 64%; }
  10%  { left: 10%;  top: 60%; }
  20%  { left: 20%;  top: 70%; }
  30%  { left: 30%;  top: 52%; }
  40%  { left: 40%;  top: 60%; }
  50%  { left: 50%;  top: 42%; }
  60%  { left: 60%;  top: 48%; }
  70%  { left: 70%;  top: 32%; }
  80%  { left: 80%;  top: 38%; }
  90%  { left: 90%;  top: 22%; }
  100% { left: 100%; top: 28%; }
}
@keyframes vault-ledger-head-hash {
  0%, 16%  { content: "#4456…9c"; }
  17%, 33% { content: "#3344…1e"; }
  34%, 50% { content: "#22ef…71"; }
  51%, 66% { content: "#1182…df"; }
  67%, 83% { content: "#f0a4…b8"; }
  84%, 100%{ content: "#e770…6c"; }
}

@media (prefers-reduced-motion: reduce) {
  .vault-ledger-frame *,
  .vault-ledger-frame *::before,
  .vault-ledger-frame *::after {
    animation: none !important;
    transition: none !important;
  }
  /* show a representative slice of the ticker, not the start */
  .vault-ledger-track { transform: translate3d(-14%, 0, 0); }
  .vault-ledger-tile.vt-verified .val::after { content: "47,231"; }
  .vault-ledger-tile.vt-blocked  .val::after { content: "184"; }
  .vault-ledger-tile.vt-rev      .val::after { content: "$284K"; }
  .vault-ledger-tile.vt-fraud    .val::after { content: "0.18%"; }
  .vault-ledger-tile.vt-fraud    .bar .fill  { width: 18%; }
  .vault-ledger-status .head-hash::after     { content: "#4456…9c"; }
}