.validation-preview {
  position: relative;
  min-width: 0;
  margin-top: 110px;
}

.validation-stamp {
  position: absolute;
  z-index: 2;
  bottom: 100%;
  right: 12px;
  box-sizing: border-box;
  width: clamp(210px, 26vw, 280px);
  margin: 0;
  padding: 12px 16px;
  border: 5px double currentColor;
  border-radius: 5px;
  color: #bd252b;
  background: rgb(255 255 255 / 85%);
  box-shadow: inset 0 0 0 1px rgb(189 37 43 / 25%);
  font: 900 clamp(16px, 1.7vw, 20px)/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(10px) rotate(11deg);
  transform-origin: bottom right;
  pointer-events: none;
}

.validation-stamp span {
  display: block;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed currentColor;
  font-size: .75em;
}

@media (max-width: 900px) {
  .validation-preview {
    width: min(620px, 100%);
  }
}

@media (max-width: 560px) {
  .validation-stamp {
    right: 10px;
    width: 200px;
    padding: 9px 12px;
    font-size: 15px;
    transform: translateY(8px) rotate(7deg);
  }
}

.hero-principle {
  font-size: 18px;
  letter-spacing: .025em;
  line-height: 1.5;
}

.validation-stamp--horizontal {
  position: relative;
  bottom: auto;
  right: auto;
  width: 100%;
  margin-top: 24px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.45;
  transform: none;
}

.validation-features { text-align: left; }
.validation-features p { margin: 0 0 8px; }
.validation-features ul { margin: 0; padding-left: 1.4em; list-style: disc; }
.validation-features li + li { margin-top: 6px; }