.build-line {
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.build-invitation {
  position: relative;
  min-height: clamp(25rem, 34vw, 27rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.build-invitation__canvas {
  position: absolute;
  inset: 0 0 auto;
  height: 50%;
  overflow: hidden;
  pointer-events: none;
}

.build-invitation__canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.build-invitation__content {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, 70rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-block: clamp(3.25rem, 5vw, 4.5rem);
  text-align: center;
}

.build-invitation__content h2 {
  max-width: 22ch;
  font-size: var(--zl-type-section-heading-size);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-section);
}

.build-invitation__typed {
  min-height: 2.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.25rem 0.45rem 1rem;
  border-bottom: 1px dashed var(--zl-line-strong);
  color: var(--zl-body);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.35;
}

.build-invitation__typed::before {
  width: 2px;
  height: 2.1rem;
  flex: 0 0 auto;
  background: var(--zl-cobalt);
  content: "";
}

.build-invitation__typed i {
  width: 0.09em;
  height: 1.15em;
  flex: 0 0 auto;
  background: var(--zl-cobalt);
  animation: build-cursor 0.9s steps(1) infinite;
}

@keyframes build-cursor { 50% { opacity: 0; } }

.build-source {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 0.87fr);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.build-source__copy,
.build-source__visual {
  min-width: 0;
  min-height: clamp(36rem, 43vw, 44rem);
}

.build-lottie-visual {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--zl-paper);
}

.build-lottie-visual svg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.build-lottie-visual--source {
  min-height: 100%;
  background: var(--zl-surface);
}

.build-lottie-visual--source svg {
  transform: scale(1.2) !important;
  transform-origin: center bottom !important;
}

.build-lottie-visual--tab {
  min-height: clamp(22rem, 27vw, 30rem);
  border-left: 1px solid var(--zl-line);
}

.build-source__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(3.5rem, 6vw, 6rem) clamp(1.25rem, 5.25vw, 5rem);
}

.build-source__copy h2 {
  max-width: 14.5ch;
  font-size: var(--zl-type-section-heading-size);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-section);
}

.build-source__lead {
  max-width: 36rem;
  margin-top: 2rem;
  color: var(--zl-body);
  font-size: var(--zl-type-lead-size);
  line-height: var(--zl-leading-lead);
}

.build-source__checks {
  width: 100%;
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.build-source__checks li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 1.15rem 0;
  border-bottom: 1px dotted var(--zl-line-strong);
  color: var(--zl-ink);
  line-height: 1.4;
}

.build-source__checks li::before {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 1px dashed var(--zl-cobalt);
  background: var(--zl-cobalt-wash);
  color: var(--zl-cobalt);
  font-family: var(--zl-font-mono);
  font-size: 0.85rem;
  content: "✓";
}

.build-source__cta {
  width: min(100%, 14rem);
  margin-top: 2.5rem;
}

.build-source__visual {
  display: flex;
  align-items: stretch;
  background: var(--zl-surface);
}

.build-coverage-console {
  width: min(100%, 45rem);
  overflow: hidden;
  border: 1px solid var(--zl-cobalt);
  background: var(--zl-surface);
  box-shadow: 1rem 1rem 0 var(--zl-cobalt-wash);
}

.build-coverage-console__bar,
.build-demo__bar {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--zl-line);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  letter-spacing: 0.035em;
}

.build-coverage-console__bar b {
  color: var(--zl-cobalt);
  text-transform: uppercase;
}

.build-coverage-console__pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.build-coverage-console__pills span {
  min-height: 4.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px dashed var(--zl-line-strong);
  color: var(--zl-muted-text);
  font-size: var(--zl-text-sm);
}

.build-coverage-console__pills span:last-child {
  grid-column: 1 / -1;
}

.build-coverage-console__pills strong {
  color: var(--zl-cobalt);
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-weight: var(--zl-weight-medium);
  letter-spacing: -0.04em;
}

.build-coverage-console__routes {
  height: 4rem;
  display: flex;
  justify-content: space-around;
  padding-inline: 12%;
}

.build-coverage-console__routes i {
  width: 1px;
  height: 100%;
  position: relative;
  background: var(--zl-cobalt);
}

.build-coverage-console__routes i::after {
  position: absolute;
  right: -2px;
  bottom: 0;
  width: 5px;
  height: 5px;
  background: var(--zl-vermilion);
  content: "";
}

.build-coverage-console__search {
  display: grid;
  gap: 0.45rem;
  margin: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
  padding: 1.25rem;
  border: 1px solid var(--zl-cobalt);
  background: var(--zl-cobalt-wash);
}

.build-coverage-console__search small,
.build-coverage-console__search span {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
}

.build-coverage-console__search strong {
  color: var(--zl-ink);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
}

.build-proof {
  --build-tab-interval: 16.7s;
  background: var(--zl-surface);
}

.build-proof__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--zl-line);
}

.build-proof__tabs button {
  position: relative;
  min-width: 0;
  min-height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--zl-line);
  background: var(--zl-surface);
  color: var(--zl-body);
  cursor: pointer;
}

.build-proof__tabs button::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--zl-cobalt-wash);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
}

.build-proof__tabs button > svg,
.build-proof__tabs button > span {
  position: relative;
  z-index: 1;
}

.build-proof__tabs button > i { z-index: 2; }

.build-proof__tabs button:last-child { border-right: 0; }

.build-proof__tabs button[aria-selected="true"] {
  background: var(--zl-surface);
  color: var(--zl-cobalt);
}

.build-proof__tabs button[aria-selected="true"]:not(.is-progressing)::before {
  transform: scaleX(1);
}

.build-proof__tabs button.is-progressing::before {
  animation: build-tab-fill var(--build-tab-interval) linear forwards;
}

.build-proof__tabs button[aria-selected="true"] span {
  color: var(--zl-cobalt);
  font-weight: var(--zl-weight-semibold);
}

.build-proof__tabs svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color var(--zl-duration-fast) var(--zl-ease-standard);
}

.build-proof__tabs button[aria-selected="true"] .build-tab-icon > * {
  animation: build-icon-draw 680ms var(--zl-ease-out) both;
}

.build-proof__tabs button[aria-selected="true"] .build-tab-icon > :nth-child(2) { animation-delay: 90ms; }
.build-proof__tabs button[aria-selected="true"] .build-tab-icon > :nth-child(3) { animation-delay: 180ms; }

.build-proof__tabs button[aria-selected="true"] .build-tab-icon--fresh {
  animation: build-icon-pulse 1.8s var(--zl-ease-standard) 720ms infinite;
}

.build-proof__tabs button[aria-selected="true"] .build-tab-icon--complete,
.build-proof__tabs button[aria-selected="true"] .build-tab-icon--accurate {
  animation: build-icon-turn 720ms var(--zl-ease-out) both;
}

.build-proof__tabs button[aria-selected="true"] .build-tab-icon--simple {
  animation: build-icon-shift 720ms var(--zl-ease-out) both;
}

.build-proof__tabs button:hover .build-tab-icon,
.build-proof__tabs button:focus-visible .build-tab-icon {
  animation: build-icon-hover 560ms var(--zl-ease-out) both;
}

@keyframes build-icon-draw {
  from { stroke-dasharray: 48; stroke-dashoffset: 48; opacity: 0.35; }
  to { stroke-dasharray: 48; stroke-dashoffset: 0; opacity: 1; }
}

@keyframes build-icon-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08); }
}

@keyframes build-icon-turn {
  from { transform: rotate(-22deg) scale(0.88); }
  to { transform: rotate(0) scale(1); }
}

@keyframes build-icon-shift {
  from { transform: translate(-2px, 2px); }
  to { transform: translate(0, 0); }
}

@keyframes build-icon-hover {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-2px) rotate(-7deg); }
  70% { transform: translateY(0) rotate(5deg); }
}

.build-proof__tabs button > i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--zl-cobalt);
  transform: scaleX(0);
  transform-origin: left;
}

.build-proof__tabs button.is-progressing > i {
  animation: build-tab-progress var(--build-tab-interval) linear forwards;
}

.build-proof__tabs button[aria-selected="true"]:not(.is-progressing) > i {
  transform: scaleX(1);
}

@keyframes build-tab-progress { to { transform: scaleX(1); } }

@keyframes build-tab-fill { to { transform: scaleX(1); } }

.build-proof__panel {
  display: grid;
  /* Even split so the copy/visual seam lands on the tab strip's middle
     boundary. The tabs are repeat(4, 1fr), so their midpoint is exactly 50%;
     0.92/1.08 put the seam at 46% and left the two rules visibly out of line. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(22rem, 27vw, 30rem);
  animation: build-pane-in var(--zl-duration-reveal) var(--zl-ease-standard) both;
}

.build-proof__panel[hidden] { display: none; }

@keyframes build-pane-in {
  from { opacity: 0; transform: translateY(0.7rem); }
  to { opacity: 1; transform: translateY(0); }
}

.build-proof__copy {
  display: flex;
  flex-direction: column;
  padding: clamp(2.25rem, 3.6vw, 3.5rem) clamp(1.25rem, 4vw, 5rem);
}

.build-proof__label {
  color: var(--zl-cobalt);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  font-weight: var(--zl-weight-bold);
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
}

.build-proof__copy h3 {
  max-width: 20ch;
  margin-top: 1.25rem;
  font-size: clamp(1.9rem, 2.8vw, 2.85rem);
  letter-spacing: var(--zl-tracking-heading);
  line-height: 0.98;
}

.build-proof__copy > p {
  max-width: 35rem;
  margin-top: 1.75rem;
  color: var(--zl-body);
  font-size: var(--zl-type-lead-size);
  line-height: var(--zl-leading-lead);
}

.build-proof__copy ul {
  display: grid;
  gap: 0;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.build-proof__copy li {
  position: relative;
  min-height: 3.15rem;
  display: flex;
  align-items: center;
  padding: 0.7rem 0 0.7rem 2.8rem;
  border-top: 1px dashed var(--zl-line-strong);
  color: var(--zl-ink);
  line-height: 1.45;
  opacity: 0;
  transform: translateY(0.65rem);
}

.build-proof__copy li::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px dashed var(--zl-cobalt);
  background: var(--zl-cobalt-wash);
  content: "";
  transform: translateY(-50%) scale(0.35);
  opacity: 0;
}

.build-proof__copy li::after {
  position: absolute;
  top: 50%;
  /* centre of the 1.7rem box that ::before draws */
  left: 0.85rem;
  display: grid;
  place-items: center;
  color: var(--zl-cobalt);
  font-family: var(--zl-font-mono);
  font-size: 0.85rem;
  line-height: 1;
  content: "\2713";
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transform-origin: center;
}

.build-proof__panel.is-active .build-proof__copy li {
  animation: build-check-row-in 520ms var(--zl-ease-out) both;
}

.build-proof__panel.is-active .build-proof__copy li::before {
  animation: build-check-box-in 360ms var(--zl-ease-out) both;
}

.build-proof__panel.is-active .build-proof__copy li::after {
  animation: build-check-mark-in 300ms var(--zl-ease-out) both;
}

.build-proof__panel.is-active .build-proof__copy li:nth-child(1),
.build-proof__panel.is-active .build-proof__copy li:nth-child(1)::before { animation-delay: 180ms; }
.build-proof__panel.is-active .build-proof__copy li:nth-child(1)::after { animation-delay: 390ms; }
.build-proof__panel.is-active .build-proof__copy li:nth-child(2),
.build-proof__panel.is-active .build-proof__copy li:nth-child(2)::before { animation-delay: 420ms; }
.build-proof__panel.is-active .build-proof__copy li:nth-child(2)::after { animation-delay: 630ms; }
.build-proof__panel.is-active .build-proof__copy li:nth-child(3),
.build-proof__panel.is-active .build-proof__copy li:nth-child(3)::before { animation-delay: 660ms; }
.build-proof__panel.is-active .build-proof__copy li:nth-child(3)::after { animation-delay: 870ms; }

@keyframes build-check-row-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes build-check-box-in {
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes build-check-mark-in {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.build-demo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 4rem);
  border-left: 1px solid var(--zl-line);
  background:
    linear-gradient(var(--zl-on-dark-a08) 1px, transparent 1px),
    linear-gradient(90deg, var(--zl-on-dark-a08) 1px, transparent 1px),
    var(--zl-ink);
  background-size: 2.5rem 2.5rem;
  color: var(--zl-on-dark);
}

.build-demo__bar {
  border: 1px solid var(--zl-on-dark-a25);
  background: var(--zl-cobalt-deep);
  color: var(--zl-on-dark);
}

.build-demo__bar span {
  color: var(--zl-vermilion);
  text-transform: uppercase;
}

.build-signal-feed {
  display: grid;
  gap: 1rem;
  margin-block: auto;
}

.build-signal-feed div {
  position: relative;
  display: grid;
  gap: 0.45rem;
  padding: 1.2rem 1.2rem 1.2rem 3rem;
  border: 1px dashed var(--zl-on-dark-a30);
  background: var(--zl-on-dark-a06);
}

.build-signal-feed div::before {
  position: absolute;
  top: 1.45rem;
  left: 1.2rem;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--zl-vermilion);
  box-shadow: 0 0 0 0 var(--zl-vermilion-a24);
  content: "";
  animation: build-signal-pulse 2.2s var(--zl-ease-out) infinite;
}

.build-signal-feed div:nth-child(2)::before { animation-delay: 0.45s; }
.build-signal-feed div:nth-child(3)::before { animation-delay: 0.9s; }

@keyframes build-signal-pulse {
  65%, 100% { box-shadow: 0 0 0 0.75rem var(--zl-vermilion-a00); }
}

.build-signal-feed time,
.build-signal-feed span {
  color: var(--zl-on-dark-a62);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
}

.build-search-query {
  margin-top: auto;
  padding: 1.25rem;
  border: 1px solid var(--zl-on-dark-a25);
  background: var(--zl-surface);
  color: var(--zl-ink);
  line-height: 1.45;
}

.build-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--zl-on-dark-a25);
  border-top: 0;
  background: var(--zl-cobalt-deep);
}

.build-search-result strong { color: var(--zl-on-dark); font-size: 1.55rem; }
.build-search-result b { color: var(--zl-vermilion); font-family: var(--zl-font-mono); font-size: var(--zl-text-xs); }

.build-result-rows {
  display: grid;
  gap: 0.8rem;
  margin-bottom: auto;
  padding: 1.25rem;
  border: 1px solid var(--zl-on-dark-a25);
  border-top: 0;
}

.build-result-rows i {
  height: 2.3rem;
  background: linear-gradient(90deg, var(--zl-on-dark-a18) 0 20%, transparent 20% 23%, var(--zl-on-dark-a12) 23% 69%, transparent 69%);
}

.build-confidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: auto;
}

.build-confidence-grid div {
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.5rem;
  border: 1px solid var(--zl-on-dark-a25);
  background: var(--zl-cobalt-deep);
}

.build-confidence-grid small,
.build-confidence-grid span,
.build-demo--accurate > p {
  color: var(--zl-on-dark-a62);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
}

.build-confidence-grid strong { margin-top: 1rem; font-size: 1.35rem; }

.build-confidence-grid b {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--zl-on-dark-a30);
  color: var(--zl-vermilion);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-sm);
}

.build-demo--accurate > p { margin-top: 1rem; text-align: right; }

.build-demo--simple pre {
  margin: auto 0 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: auto;
  border: 1px solid var(--zl-on-dark-a25);
  background: var(--zl-cobalt-deep);
  color: var(--zl-on-dark);
  font-family: var(--zl-font-mono);
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  line-height: 1.75;
}

.build-delivery-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: auto;
  border: 1px solid var(--zl-on-dark-a25);
  border-top: 0;
}

.build-delivery-chips span {
  min-height: 4rem;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--zl-on-dark-a25);
  color: var(--zl-vermilion);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
}

.build-delivery-chips span:last-child { border-right: 0; }

.build-proof__close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: clamp(1.5rem, 2.4vw, 2.5rem) clamp(1.25rem, 4vw, 5rem);
  border-top: 1px solid var(--zl-line);
}

.build-proof__close > p {
  max-width: none;
  color: var(--zl-ink);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: var(--zl-weight-regular);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-heading);
  text-wrap: balance;
}

@media (max-width: 64rem) {
  .build-source__copy h2 { font-size: clamp(2.5rem, 5vw, 3.8rem); }
  .build-proof__panel { min-height: 30rem; }
  .build-proof__copy h3 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
}

@media (max-width: 52rem) {
  .build-source { grid-template-columns: 1fr; }
  .build-source__copy,
  .build-source__visual { min-height: auto; }
  .build-source__visual { min-height: 36rem; border-top: 1px solid var(--zl-line); }
  .build-proof__tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .build-proof__tabs::-webkit-scrollbar { display: none; }
  .build-proof__tabs button { min-width: 10rem; flex: 1 0 10rem; }
  .build-proof__panel { grid-template-columns: 1fr; }
  /* Panels stack below 52rem, so there is nothing beside the copy to match
     -- a 608px floor here only padded it out. */
  .build-proof__copy { min-height: auto; }
  .build-demo { min-height: 35rem; border-top: 1px solid var(--zl-line); border-left: 0; }
  .build-lottie-visual--tab { min-height: 35rem; border-top: 1px solid var(--zl-line); border-left: 0; }
  .build-proof__close { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 32rem) {
  .build-invitation__content { align-items: flex-start; text-align: left; }
  .build-invitation__content h2 { font-size: var(--zl-type-section-heading-mobile-size); }
  .build-invitation__typed { width: 100%; min-height: 5.5rem; align-items: flex-start; }
  .build-source__copy { padding: 3.5rem 1.25rem; }
  .build-source__copy h2 { font-size: var(--zl-type-section-heading-mobile-size); }
  .build-source__checks li { grid-template-columns: 2rem minmax(0, 1fr); }
  .build-source__visual { min-height: 30rem; }
  .build-coverage-console { box-shadow: 0.5rem 0.5rem 0 var(--zl-cobalt-wash); }
  .build-coverage-console__pills { gap: 0.5rem; padding: 1rem; }
  .build-coverage-console__pills span { min-height: 3.75rem; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.65rem; }
  .build-proof__copy { min-height: auto; padding: 3.5rem 1.25rem; }
  .build-proof__copy h3 { font-size: var(--zl-type-section-heading-mobile-size); }
  .build-proof__copy ul { margin-top: 2rem; }
  .build-demo { min-height: 30rem; padding: 1.25rem; }
  .build-lottie-visual--source,
  .build-lottie-visual--tab { min-height: 22rem; }
  .build-lottie-visual--source { min-height: 28rem; }
  .build-confidence-grid { grid-template-columns: 1fr; }
  .build-confidence-grid div { min-height: 10rem; }
  .build-delivery-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .build-delivery-chips span:nth-child(3) { border-right: 0; }
  .build-delivery-chips span:nth-child(n + 4) { border-top: 1px solid var(--zl-on-dark-a25); }
  .build-proof__close { padding: 2.5rem 1.25rem; }
  .build-proof__close .zl-button-row,
  .build-proof__close .zl-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .build-invitation__typed i,
  .build-proof__tabs button.is-progressing > i,
  .build-proof__tabs button.is-progressing::before,
  .build-signal-feed div::before,
  .build-proof__panel,
  .build-proof__tabs button[aria-selected="true"] .build-tab-icon,
  .build-proof__tabs button[aria-selected="true"] .build-tab-icon > *,
  .build-proof__panel.is-active .build-proof__copy li,
  .build-proof__panel.is-active .build-proof__copy li::before,
  .build-proof__panel.is-active .build-proof__copy li::after { animation: none; }

  .build-proof__copy li { opacity: 1; transform: none; }
  .build-proof__copy li::before { opacity: 1; transform: translateY(-50%); }
  .build-proof__copy li::after { opacity: 1; transform: translate(-50%, -50%); }
}

/* ------------------------------------------------------------------
   Build cases — "What enterprises use the graph for."
   Six panels, one shared row primitive. Devices are capped and centred
   so a label and its status stay a readable pair instead of stretching
   to the full card width. Cobalt-led: vermilion belongs to Grow.
   ------------------------------------------------------------------ */
.build-cases {
  border-top: 1px solid var(--zl-line);
  background: var(--zl-surface);
}
.build-cases__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 4vw, 5rem);
}
.build-cases__head h2 {
  max-width: 16ch;
  margin-top: .9rem;
  font-size: var(--zl-type-section-heading-size);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-heading);
}
.build-cases__head > p {
  max-width: 46ch;
  color: var(--zl-body);
  font-size: var(--zl-type-lead-size);
  line-height: var(--zl-leading-lead);
}

/* The 1px-gap trick paints the separator lines by letting the container show
   through. That only works while the cards are opaque -- these fade in on
   scroll, so before the reveal the whole line colour showed as a grey block.
   The container now sits on the section's own surface and each card draws its
   own separators, so the pre-reveal area is indistinguishable from the page. */
.build-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--zl-line);
  background: var(--zl-surface);
}
.build-cases__grid > article {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--zl-line);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}
/* No double edge on the last column or the closing row. */
.build-cases__grid > article:nth-child(3n) { border-right: 0; }
.build-cases__grid > article:nth-last-child(-n+3) { border-bottom: 0; }
.build-cases__grid h3 {
  margin: clamp(1.4rem, 2.4vw, 2rem) clamp(1.25rem, 2.4vw, 2.2rem) 0;
  font-size: var(--zl-type-card-heading-size);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-card);
}
.build-cases__grid > article > p {
  margin: .7rem clamp(1.25rem, 2.4vw, 2.2rem) clamp(1.8rem, 3vw, 2.6rem);
  color: var(--zl-body);
  font-size: var(--zl-type-card-body-size);
  line-height: var(--zl-leading-copy);
}

/* The panel is a stage; the device inside it is capped so rows read as pairs.
   Grid paper is masked away from the edges so it reads as texture, not a table. */
.build-cases__panel {
  position: relative;
  min-height: clamp(12.5rem, 16vw, 15rem);
  display: grid;
  grid-template-columns: min(18.5rem, 100%);
  align-content: center;
  justify-content: center;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-paper);
  overflow: hidden;
}
.build-cases__panel::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--zl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--zl-line) 1px, transparent 1px);
  background-size: 3.2rem 3.2rem;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%);
  opacity: .7;
  content: "";
}
.build-cases__panel > * {
  position: relative;
  display: grid;
  gap: .42rem;
}

.build-cases__panel b,
.build-cases__panel em,
.build-cases__panel small,
.build-cases__panel .bc-note,
.build-cases__panel .bc-query__line,
.build-cases__panel .bc-agent__req { font-family: var(--zl-font-mono); font-style: normal; }

/* Shared row primitive — every device is built from this. */
.bc-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .42rem .6rem;
  border: 1px solid var(--zl-line-strong);
  background: var(--zl-surface);
}
.bc-row b { flex: 1; font-size: .78rem; font-weight: var(--zl-weight-medium); }
.bc-row small { color: var(--zl-muted-text); font-size: .68rem; }
.bc-row em { color: var(--zl-muted-text); font-size: .68rem; }
.bc-row--live { border-color: var(--zl-cobalt); }
.bc-row--live em { color: var(--zl-cobalt); }
.bc-row--stale { border-style: dashed; }
.bc-row--muted { opacity: .5; }

.bc-note {
  margin: .15rem 0 0;
  color: var(--zl-muted-text);
  font-size: .68rem;
}
.bc-note--flag {
  justify-self: start;
  padding: .26rem .5rem;
  border: 1px solid var(--zl-cobalt);
  color: var(--zl-cobalt);
}

/* 1 — go-to-market: the contact crosses between accounts */
.bc-move__lane { margin-bottom: .08rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .35rem; }
.bc-move__co {
  display: flex; align-items: center; gap: .35rem;
  padding: .42rem .5rem; border: 1px solid var(--zl-line-strong);
  background: var(--zl-surface); font-family: var(--zl-font-mono); font-size: .72rem;
}
.bc-move__co i { width: .42rem; height: .42rem; flex: 0 0 auto; background: var(--zl-muted); }
.bc-move__co--to { border-color: var(--zl-cobalt); }
.bc-move__co--to i { background: var(--zl-cobalt); }
.bc-move__track { position: relative; display: grid; place-items: center; min-width: 2.8rem; }
.bc-move__track::before {
  position: absolute; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--zl-line-strong) 0 3px, transparent 3px 6px);
  content: "";
}
.bc-move__track b {
  position: relative; display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  background: var(--zl-cobalt); color: var(--zl-on-dark); font-size: .62rem;
}

/* 3 — talent: the query above its matches */
.bc-query__line {
  margin: 0 0 .1rem;
  padding: .34rem .5rem;
  border: 1px dashed var(--zl-line-strong);
  color: var(--zl-muted-text);
  font-size: .68rem;
}

/* 4 — investment: events on a company timeline */
.bc-axis__line { display: flex; align-items: center; padding: 0 .1rem; }
.bc-axis__line i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--zl-line-strong); }
.bc-axis__line i.is-now { background: var(--zl-cobalt); }
.bc-axis__line u { flex: 1; height: 1px; background: var(--zl-line-strong); }
.bc-axis__pills { display: flex; justify-content: space-between; gap: .3rem; }
.bc-axis__pills span {
  padding: .26rem .45rem; border: 1px solid var(--zl-line-strong);
  background: var(--zl-surface); font-family: var(--zl-font-mono); font-size: .68rem;
}

/* 5 — AI grounding: the call, then what came back */
.bc-agent__req {
  margin: 0;
  justify-self: start;
  padding: .34rem .55rem;
  border: 1px solid var(--zl-ink);
  background: var(--zl-ink);
  color: var(--zl-on-dark);
  font-size: .68rem;
  overflow-wrap: anywhere;
}

/* ---- reveal: panel first, then its parts, once ---- */
.build-cases__panel > * > * { opacity: 0; transform: translateY(.35rem); }
.build-cases.is-visible .build-cases__panel > * > * {
  animation: bc-rise 420ms var(--zl-ease-out) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 180ms + var(--i, 0) * 110ms);
}
.build-cases.is-visible .bc-move__lane > * {
  animation: bc-rise 420ms var(--zl-ease-out) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 220ms);
}
.bc-move__lane > * { opacity: 0; transform: translateY(.35rem); }
.build-cases.is-visible .bc-move__track b {
  animation: bc-cross 620ms var(--zl-ease-out) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 420ms);
}
.build-cases.is-visible .bc-axis__pills span,
.build-cases.is-visible .bc-axis__line i {
  animation: bc-rise 380ms var(--zl-ease-out) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 300ms + var(--i, 0) * 120ms);
}
.bc-axis__pills span, .bc-axis__line i { opacity: 0; }
@keyframes bc-rise { to { opacity: 1; transform: none; } }
@keyframes bc-cross {
  0%   { opacity: 0; transform: translateX(-1.1rem); }
  55%  { opacity: 1; transform: translateX(.12rem); }
  100% { opacity: 1; transform: none; }
}

.build-cases__grid > article:nth-child(1) .build-cases__panel { --p: 0; }
.build-cases__grid > article:nth-child(2) .build-cases__panel { --p: 1; }
.build-cases__grid > article:nth-child(3) .build-cases__panel { --p: 2; }
.build-cases__grid > article:nth-child(4) .build-cases__panel { --p: 3; }
.build-cases__grid > article:nth-child(5) .build-cases__panel { --p: 4; }
.build-cases__grid > article:nth-child(6) .build-cases__panel { --p: 5; }

@media (max-width: 1280px) {
  .build-cases__head { grid-template-columns: 1fr; align-items: start; }
  .build-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build-cases__grid > article { border-right: 1px solid var(--zl-line); border-bottom: 1px solid var(--zl-line); }
  .build-cases__grid > article:nth-child(3n) { border-right: 1px solid var(--zl-line); }
  .build-cases__grid > article:nth-child(2n) { border-right: 0; }
  .build-cases__grid > article:nth-last-child(-n+3) { border-bottom: 1px solid var(--zl-line); }
  .build-cases__grid > article:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 680px) {
  .build-cases__grid { grid-template-columns: 1fr; }
  .build-cases__grid > article { border-right: 0; border-bottom: 1px solid var(--zl-line); }
  .build-cases__grid > article:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .build-cases__panel > * > *,
  .bc-move__lane > *,
  .bc-axis__pills span,
  .bc-axis__line i { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Equal panel height on desktop. The four tabs' copy differs enough that their
   natural heights spread ~90px, so switching tabs shifted everything below the
   section. The tallest lands near 585px across 1025-1920, so one flat floor
   above that pins all four to the same height and the switch is static.
   Left to content below 64rem, where the panels stack and nothing shifts. */
@media (min-width: 64.0625rem) {
  .build-proof__panel { min-height: 38rem; }
}

/* The buttons hold a fixed ~420px, so beside them the sentence only clears one
   line above ~1440 -- at 1280 it missed by 2px, and holding one line at 1030
   would need 15px type. Below that it stacks, where the full width makes one
   line comfortable at heading size instead. */
@media (max-width: 90rem) {
  .build-proof__close {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.75rem;
  }
}

/* ------------------------------------------------------------------
   Use-case panels — a signature beat each.

   All six already inherit the generic bc-rise entrance. Only go-to-market and
   diligence had a beat that showed what the card is actually about; the other
   four just appeared. Each now gets one short move that demonstrates its use
   case, in the same vocabulary as the two that worked: one-shot, ease-out,
   sequenced after the entrance, and offset per panel by --p so the row reads
   left to right rather than firing all at once.
   ------------------------------------------------------------------ */

/* 2 — CRM: records decay, then re-resolve at the source */
.build-cases.is-visible .bc-decay .bc-row--stale {
  animation: bc-fade-stale 900ms var(--zl-ease-standard) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 620ms + var(--i, 0) * 140ms);
}
.build-cases.is-visible .bc-decay .bc-row--live {
  animation: bc-refresh 900ms var(--zl-ease-standard) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 1000ms);
}
@keyframes bc-fade-stale {
  to { opacity: .45; }
}
@keyframes bc-refresh {
  0%   { background: transparent; }
  35%  { background: var(--zl-cobalt-wash); }
  100% { background: transparent; }
}

/* 3 — talent: the segment query runs, then the people match */
.build-cases.is-visible .bc-query__line { position: relative; overflow: hidden; }
.build-cases.is-visible .bc-query__line::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--zl-cobalt-wash);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  animation: bc-scan 700ms var(--zl-ease-out) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 520ms);
}
.build-cases.is-visible .bc-query .bc-row em {
  opacity: 0;
  animation: bc-pop 420ms var(--zl-ease-out) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 900ms + var(--i, 0) * 170ms);
}
@keyframes bc-scan {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes bc-pop {
  from { opacity: 0; transform: translateX(.25rem); }
  to   { opacity: 1; transform: none; }
}

/* 4 — agents: the call resolves, context comes back current */
.build-cases.is-visible .bc-agent__req { position: relative; overflow: hidden; }
.build-cases.is-visible .bc-agent__req::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 18%), transparent);
  content: "";
  transform: translateX(-100%);
  animation: bc-sweep 900ms var(--zl-ease-in-out) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 520ms);
}
.build-cases.is-visible .bc-agent .bc-row--live em {
  opacity: 0;
  animation: bc-pop 420ms var(--zl-ease-out) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 1020ms + var(--i, 0) * 200ms);
}
@keyframes bc-sweep {
  to { transform: translateX(320%); }
}

/* 5 — developers: activity accumulates, the org behind it surfaces */
.build-cases.is-visible .bc-repo .bc-hit {
  opacity: 0;
  animation: bc-pop 420ms var(--zl-ease-out) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 720ms + var(--i, 0) * 200ms);
}
.build-cases.is-visible .bc-repo .bc-note--flag {
  animation: bc-flag-in 700ms var(--zl-ease-standard) forwards;
  animation-delay: calc(var(--p, 0) * 90ms + 1240ms);
}
@keyframes bc-dot-in {
  to { opacity: 1; transform: none; }
}
@keyframes bc-flag-in {
  0%   { background: transparent; }
  40%  { background: var(--zl-cobalt-wash); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .build-cases.is-visible .bc-decay .bc-row--stale,
  .build-cases.is-visible .bc-decay .bc-row--live,
  .build-cases.is-visible .bc-query__line::after,
  .build-cases.is-visible .bc-query .bc-row em,
  .build-cases.is-visible .bc-agent__req::after,
  .build-cases.is-visible .bc-agent .bc-row--live em,
  .build-cases.is-visible .bc-repo .bc-hit,
  .build-cases.is-visible .bc-repo .bc-note--flag { animation: none; }
  .build-cases.is-visible .bc-query .bc-row em,
  .build-cases.is-visible .bc-agent .bc-row--live em,
  .build-cases.is-visible .bc-repo .bc-hit { opacity: 1; transform: none; }
  .build-cases.is-visible .bc-query__line::after,
  .build-cases.is-visible .bc-agent__req::after { display: none; }
  .build-cases.is-visible .bc-decay .bc-row--stale { opacity: .45; }
}

/* A positive result has to look different from a label. .bc-row em was muted
   grey on these rows, so "match" read the same as "Head of Payments" and the
   card looked like a list rather than a search returning hits. */
.bc-hit {
  padding: .12rem .38rem;
  border: 1px solid var(--zl-cobalt);
  background: var(--zl-cobalt-wash);
  color: var(--zl-cobalt) !important;
  font-family: var(--zl-font-mono);
  font-size: .62rem;
  letter-spacing: .02em;
}
/* The searched criteria, called out inside the query line */
.bc-query__line span { color: var(--zl-ink); font-weight: var(--zl-weight-medium); }
/* Where the developer signal comes from -- the dots had no legend at all */
.bc-repo__src {
  margin: 0 0 .1rem;
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}