/* The approved raster is visible immediately; logos and curved Canvas light
   trails share the monogram's square coordinate system without an entrance. */
.hero-circuit.hero-signature {
  width: calc(100% + 90px);
  max-width: 520px;
  margin: 0 -45px;
  justify-self: center;
  filter: none;
  contain: layout style;
}
.hero-circuit.hero-signature::before { content: none; }
.hero-signature__plate,
.hero-signature__plate > img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-signature__plate {
  position: absolute;
  inset: 0;
  /* The feather blends the source background into the existing starfield. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-signature__plate > img {
  object-fit: contain;
  /* Recover the fine copper highlights at the smaller on-page display size. */
  filter: brightness(1.9) contrast(1.04) saturate(1.08);
}
.hero-signature__repair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-signature__repair > img {
  /* Local crop of the corrected artwork: x350/y305/w170/h155 in the
     original 960px square. The calibrated raster and all corners stay intact. */
  position: absolute;
  left: 36.458333%;
  top: 31.770833%;
  width: 17.708333%;
  height: 16.145833%;
  filter: brightness(1.9) contrast(1.04) saturate(1.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-signature__occlusion {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.hero-signature__node-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
/* Full-artboard wrappers keep clipping fixed to the physical bridge while
   their children move. The same edge also trims each rear light and its glow. */
.hero-signature__node-layer.is-rear,
.hero-signature__light--rear {
  clip-path: url(#hero-signature-rear-clip);
}
.hero-signature__node {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.hero-signature__node {
  z-index: 3;
  display: grid;
  width: 50px;
  height: 32px;
  place-items: center;
  transform: translate(-50%, -50%);
}
.hero-signature__node img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 5px #08090e);
}
.hero-signature__node--agents img { width: 42px; height: 27px; }
.hero-signature__node--notebook img { width: 30px; height: 27px; }
/* The no-JS / reduced-motion composition keeps every mark at a separate corner. */
.hero-signature__node--claude { left: 18.453%; top: 22.782%; }
.hero-signature__node--chatgpt { left: 21.482%; top: 71.563%; }
.hero-signature__node--agents { left: 80.781%; top: 21.027%; }
.hero-signature__node--notebook { left: 81.375%; top: 68.262%; }
.hero-signature.is-ready .hero-signature__node { left: 0; top: 0; }
.hero-signature__light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}
.hero-signature__light--rear { z-index: 1; }
.hero-signature__light--front { z-index: 3; }
.hero-signature__node--chatgpt { --signal-rgb: var(--cover-chatgpt); }
.hero-signature__node--claude { --signal-rgb: var(--cover-claude); }
.hero-signature__node--agents { --signal-rgb: var(--cover-agents); }
.hero-signature__node--notebook { --signal-rgb: var(--cover-notebook); }
.hero-signature.is-playing .hero-signature__node { will-change: transform, opacity; }
.hero-signature__core {
  position: absolute;
  z-index: 1;
  left: 50%;
  /* Keep the wordmark in its original position after removing the 27px icon. */
  top: calc(61% + 17px);
  display: flex;
  align-items: center;
  transform: translate(-50%, -50%);
}
.hero-signature__core strong {
  color: #f5f2ec;
  font: 500 12px/1 var(--f-display);
  letter-spacing: .19em;
  white-space: nowrap;
}
@media (max-width: 960px) {
  /* Expose the copy's children to keep the eyebrow before the mobile artwork. */
  .starscape .hero-v2__center {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin-top: 0;
  }
  .hero-v2 .hero-v2__copy { display: contents; }
  .hero-v2__copy > .trust-pill {
    order: -2;
    margin-bottom: 12px;
  }
  .hero-circuit.hero-signature {
    order: -1;
    width: min(90vw, 360px);
    /* Trim only the raster's transparent overscan around the visible circuit. */
    margin: -28px 0 -12px;
  }
}
@media (max-width: 560px) {
  .hero-signature__node { width: 45px; height: 29px; }
  .hero-signature__node img { width: 29px; height: 29px; }
  .hero-signature__node--agents img { width: 38px; height: 24px; }
  .hero-signature__node--notebook img { width: 28px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-signature__node { will-change: auto !important; }
  .hero-signature__light { display: none; }
}