/* Demo-specific proof treatment within the shared conversion hero. */
.demo-proof {
  --signal-accent: var(--conversion-blue);
  --signal-accent-rgb: 90, 116, 255;
}

.demo-proof__duration {
  display: flex;
  align-items: baseline;
  margin: -0.25rem 0 1.2rem;
  color: var(--conversion-text);
  line-height: 0.78;
}

.demo-proof__duration strong {
  font-size: clamp(6rem, 10vw, 8.8rem);
  font-weight: 760;
  letter-spacing: -0.1em;
}

.demo-proof__duration span {
  margin-left: 0.45rem;
  color: var(--color-brand-on-dark);
  font-family: var(--conversion-mono);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.demo-proof__wave {
  display: flex;
  gap: 0.28rem;
  align-items: center;
  width: 8rem;
  height: 1.35rem;
  margin: 0 0 1.25rem;
}

.demo-proof__wave i {
  width: 2px;
  height: 24%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-brand-on-dark), var(--signal-accent));
}

.demo-proof__wave i:nth-child(2),
.demo-proof__wave i:nth-child(8) {
  height: 42%;
}

.demo-proof__wave i:nth-child(3),
.demo-proof__wave i:nth-child(7) {
  height: 66%;
}

.demo-proof__wave i:nth-child(4),
.demo-proof__wave i:nth-child(6) {
  height: 88%;
}

.demo-proof__wave i:nth-child(5) {
  height: 100%;
}

.demo-proof .conversion-proof__title {
  max-width: 16ch;
  font-size: clamp(1.45rem, 2.35vw, 2rem);
  font-weight: 690;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

@media (max-width: 768px) {
  .demo-proof__duration {
    margin-bottom: 0.95rem;
  }

  .demo-proof__duration strong {
    font-size: 5.4rem;
  }

  .demo-proof__wave {
    margin-bottom: 1rem;
  }
}