/* Proposed only. Both placements share this certificate at its native 902:487 ratio. */
.certificate[data-certificate] {
  --cu: calc(100cqi / 902);
  aspect-ratio: 902 / 487;
  color: #101b2a;
  font-family: Onest, Arial, sans-serif;
  font-synthesis: none;
}

.certificate[data-certificate] .certificate-top,
.certificate[data-certificate] .certificate-bottom {
  left: 7.3%;
  right: 6%;
  gap: calc(10 * var(--cu));
}
.certificate[data-certificate] .certificate-top { top: 21.4%; }
.certificate[data-certificate] .certificate-top > strong {
  font-family: inherit;
  font-size: calc(36 * var(--cu));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.certificate[data-certificate] .certificate-top > span {
  font-family: inherit;
  font-size: calc(27 * var(--cu));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
}

/* The same columns and logo bounds apply to every region and viewport. */
.certificate[data-certificate] .certificate-body {
  inset-inline: 6.7%;
  top: 36.5%;
  bottom: 26.5%;
  grid-template-columns: minmax(0, 48.5fr) minmax(0, 51.5fr);
}
.certificate[data-certificate] .certificate-body > strong {
  display: block;
  min-width: 0;
  font-family: inherit;
  font-size: calc(200 * var(--cu));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.certificate[data-certificate][data-long="true"] .certificate-body > strong {
  font-size: calc(130 * var(--cu));
}
.certificate[data-certificate][data-compact="true"] .certificate-body > strong {
  font-size: calc(100 * var(--cu));
}
.certificate[data-certificate] .face-value,
.certificate[data-certificate] .currency {
  font: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  margin: 0;
  transform: none;
}
.certificate[data-certificate] .certificate-body > img {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  justify-self: stretch;
  transform: translate(calc(-10 * var(--cu)), calc(25 * var(--cu)));
  filter: drop-shadow(0 5px 3px #53637e24);
}
.certificate[data-certificate] .certificate-bottom {
  left: 7.6%;
  bottom: 9.5%;
  align-items: baseline;
  font-family: inherit;
  font-size: calc(24 * var(--cu));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}
.certificate[data-certificate] .certificate-bottom > span:last-child {
  max-width: none;
  font-family: inherit;
  font-size: calc(18 * var(--cu));
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

/* Closing placement: a compact certificate replaces the oversized square mark. */
.final-mark {
  display: block;
  min-width: 0;
  width: 100%;
  transform: none;
}
.final-mark .certificate-wrap--final {
  width: min(100%, 500px);
  margin: 0 auto;
  transform: rotate(-6deg);
  filter: drop-shadow(0 10px 14px #0004) drop-shadow(0 24px 32px #0003);
}
.final-mark .certificate { margin-block-start: 0; }

@media (max-width: 760px) {
  .final-mark { display: block; }
  .final-mark .certificate-wrap--final {
    width: min(88%, 360px);
    transform: rotate(-4deg);
  }
}