/* A slim, landscape browser preview shared by the homepage CTA and Vision form. */
.marketingCta--vision .marketingCta__image,
.vision-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: .5rem;
  background: radial-gradient(circle at 65% 19%, #806dff 0, #4738f8 28%, #2418df 65%, #1200b7 100%);
  container-type: inline-size;
  perspective: 620px;
  isolation: isolate;
}
.vision-preview {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 0 auto 26px;
}
.marketingCta--vision .marketingCta__image::after,
.vision-preview::after {
  content: "";
  position: absolute;
  width: 72%;
  height: 12%;
  left: 14%;
  bottom: 4%;
  border-radius: 50%;
  background: #08006f;
  filter: blur(14px);
  opacity: .72;
}
.vision-rotator {
  position: relative;
  z-index: 1;
  width: 84cqw;
  aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
  animation: vision-website-turn 12s linear infinite;
}
.vision-rotator::before,
.vision-rotator::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 4px;
  background: linear-gradient(90deg, #151137, #50447a 55%, #1d173f);
  border: 1px solid #17112e;
  backface-visibility: hidden;
}
.vision-rotator::before {
  right: -2px;
  transform: rotateY(90deg);
}
.vision-rotator::after {
  left: -2px;
  transform: rotateY(-90deg);
}
.vision-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid #201938;
  border-radius: 5px;
  background: #f9f7f1;
  color: #27243b;
  box-shadow: 0 20px 26px #08006a91, inset 2px 2px 0 #ffffffc4, inset -2px -2px 0 #2b234249;
  backface-visibility: hidden;
  transform: translateZ(2px);
}
.vision-page--back { transform: rotateY(180deg) translateZ(2px); }
.vision-browser {
  height: 6cqw;
  padding: 0 3cqw;
  display: flex;
  align-items: center;
  gap: 1.7cqw;
  background: linear-gradient(#3d3654, #211b35);
  color: #d8d3ed;
  font: 3cqw/1 Archivo, sans-serif;
}
.vision-browser i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #ff786c; }
.vision-browser i:nth-child(2) { background: #f5dd65; }
.vision-browser i:nth-child(3) { background: #85cda0; }
.vision-browser span { margin-left: auto; opacity: .75; }
.vision-page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2cqw 4cqw;
  border-bottom: 1px solid #dcd7d0;
  font: 3cqw/1 Archivo, sans-serif;
}
.vision-page-nav strong { font-size: 3.6cqw; letter-spacing: .08em; }
.vision-page-nav span { font-size: 2.6cqw; white-space: nowrap; }
.vision-page-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 47%;
  padding: 2.5cqw 4cqw;
  background: linear-gradient(125deg, #ebe6dc 48%, transparent 48%), linear-gradient(145deg, #d1af83, #98755f 52%, #e1d3b9);
}
.vision-page--back .vision-page-hero {
  background: linear-gradient(125deg, #e6e3f6 48%, transparent 48%), linear-gradient(145deg, #aaa2d8, #51418f 52%, #e7d69e);
}
.vision-page-hero small { font: 2.3cqw/1.1 Archivo, sans-serif; letter-spacing: .08em; }
.vision-page-hero b { margin-top: 2cqw; font: 700 8cqw/.95 Georgia, serif; letter-spacing: -.06em; }
.vision-page-hero em { margin-top: auto; padding: 1.5cqw 2.5cqw; background: #29243e; color: white; font: normal 2.5cqw/1 Archivo, sans-serif; }
.vision-page-tiles { display: flex; gap: 2.5cqw; padding: 2cqw 4cqw; }
.vision-page-tiles span { flex: 1; height: 7cqw; background: #d5c6b7; }
.vision-page-tiles span:nth-child(2) { background: #978bac; }
.vision-page-tiles span:nth-child(3) { background: #b3c6af; }
@keyframes vision-website-turn {
  from { transform: rotateY(-18deg) rotateX(4deg); }
  to { transform: rotateY(342deg) rotateX(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vision-rotator { animation: none; transform: rotateY(-18deg) rotateX(4deg); }
}
@media (max-width: 760px) {
  .vision-preview { width: min(100%, 260px); margin-bottom: 20px; }
}