.template-contract-preview {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  color: white;
  font-family: 'Montserrat', sans-serif;
  background-color: #111827;
  background-image: linear-gradient(155deg, #1f2937 0%, #0b1020 50%, #05070d 100%);
}
.template-contract-preview .template-preview-badge {
  position: absolute;
  z-index: 5;
  padding: 3px 5px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background-color: rgba(255, 255, 255, 0.14);
  top: 7px;
  right: 7px;
}
.template-contract-preview .template-preview-logo {
  display: flex;
  z-index: 4;
  align-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 6px;
  font-weight: 800;
}
.template-preview-logo > div {
  width: 6px;
  height: 6px;
  border-radius: 2px;
}
.template-contract-preview .template-preview-hero {
  z-index: 1;
  border: solid rgba(255, 255, 255, 0.1) 1px;
  border-radius: 7px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.055);
}
.template-preview-hero .hero-glow {
  position: absolute;
  width: 52%;
  height: 52%;
  border-radius: 999px;
  opacity: 0.34;
  filter: blur(16px);
  left: 28%;
  top: 18%;
}
.template-preview-hero .hero-object {
  position: absolute;
  z-index: 2;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.34);
  background-color: #D1D5DB;
  background-image: linear-gradient(145deg, rgba(255,255,255,.95), rgba(148,163,184,.72));
}
.template-preview-hero .hero-object-main {
  width: 40%;
  height: 54%;
  left: 31%;
  top: 22%;
}
.template-preview-hero .hero-object-side {
  width: 20%;
  height: 33%;
  opacity: 0.72;
  left: 65%;
  top: 42%;
}
.template-preview-hero .hero-base {
  position: absolute;
  width: 70%;
  height: 5%;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.16);
  left: 16%;
  bottom: 10%;
}
.template-contract-preview .template-preview-copy {
  display: flex;
  z-index: 3;
  padding: 4px;
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background-color: rgba(2, 6, 23, 0.62);
}
.template-preview-copy.align-center {
  align-items: center;
}
.template-preview-copy.align-left {
  align-items: start;
}
.template-preview-copy .copy-line {
  height: 6px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.92);
}
.template-preview-copy .copy-kicker {
  width: 21%;
  height: 3px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.42);
}
.template-preview-copy .copy-line-main {
  width: 78%;
}
.template-preview-copy .copy-line-short {
  width: 58%;
}
.template-preview-copy .copy-line-support {
  width: 68%;
  height: 3px;
  opacity: 0.56;
}
.template-contract-preview .template-preview-cta {
  z-index: 4;
  padding: 2px;
}
.template-preview-cta > div {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  opacity: 0.92;
}
.template-infographic .template-preview-hero {
  display: flex;
  padding: 5px;
  flex-direction: column;
  gap: 4px;
}
.template-preview-hero .info-row {
  display: flex;
  padding: 3px;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 0.08);
}
.info-row > span {
  display: flex;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 6px;
  font-weight: 800;
}
.info-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-grow: 1;
}
.info-row > div > div {
  width: 88%;
  height: 3px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.55);
}
.template-auto-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: radial-gradient(circle at 50% 38%, rgba(227,0,132,.30), transparent 38%), linear-gradient(155deg,#111827,#05070d);
}
.auto-preview-mark {
  display: flex;
  z-index: 4;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: white;
  text-align: center;
}
.auto-preview-mark span {
  opacity: 0.64;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 2px;
}
.auto-preview-mark strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
}
.auto-preview-mark small {
  opacity: 0.62;
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.auto-layout-chip {
  position: absolute;
  z-index: 2;
  width: 27px;
  height: 38px;
  padding: 3px;
  border: solid rgba(255, 255, 255, 0.16) 1px;
  border-radius: 4px;
  transform: rotate(-9deg);
  background-color: rgba(255, 255, 255, 0.1);
}
.auto-layout-chip > div {
  width: 100%;
  height: 42%;
  margin-bottom: 3px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.24);
}
.auto-layout-chip.chip-one {
  left: 10px;
  top: 18px;
}
.auto-layout-chip.chip-two {
  transform: rotate(10deg);
  right: 10px;
  top: 26px;
}
.auto-layout-chip.chip-three {
  opacity: 0.62;
  transform: rotate(5deg);
  right: 16px;
  bottom: 13px;
}
.auto-orbit {
  position: absolute;
  border: solid rgba(255, 255, 255, 0.1) 1px;
  border-radius: 999px;
}
.auto-orbit-one {
  width: 112px;
  height: 112px;
}
.auto-orbit-two {
  width: 76px;
  height: 76px;
}