/* Preview only: a little shopfront welcome, using the original high-resolution Chip. */
.preorder-welcome {
  --chip-width: 124px;
  --chip-rise: 55px;
  position: relative;
  isolation: isolate;
  display: inline-block;
  flex: 0 0 auto;
  padding-top: var(--chip-rise);
  padding-bottom: 39px;
  text-align: center;
}
.preorder-chip {
  position: absolute;
  z-index: 0;
  width: var(--chip-width);
  aspect-ratio: 3 / 2;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.preorder-chip img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
/* The two layers share one cached lossless image. Only the raised arm moves. */
.preorder-chip-body {
  z-index: 1;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 48%,17% 48%,17% 12%,0 12%);
}
.preorder-chip-arm {
  z-index: 0;
  clip-path: polygon(0 12%,17% 12%,17% 48%,0 48%);
  transform-origin: 17% 43.5%;
}
.preorder-counter { position: relative; z-index: 1; }
.preorder-counter > a.dp-cta.preorder-link {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 21px;
  white-space: nowrap;
  border-radius: 8px;
  font-size: 14px;
  transform: none;
}
.preorder-counter > a.dp-cta.preorder-link:hover { transform: none; }
.preorder-counter > a.dp-cta.preorder-link:focus-visible { outline: 3px solid #f4dfaa; outline-offset: 5px; }
.preorder-open {
  position: absolute;
  z-index: 3;
  top: calc(100% - 2px);
  left: calc(50% - 37px);
  width: 74px;
  height: 36px;
  padding-top: 12px;
  pointer-events: none;
  transform: rotate(-3deg);
  transform-origin: 50% 0;
}
.preorder-open::before,.preorder-open::after {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 15px;
  background: linear-gradient(#f1dfaa, #b69a5e);
  box-shadow: 1px 0 0 #142a2866;
}
.preorder-open::before { left: 13px; }
.preorder-open::after { right: 13px; }
.preorder-open > span {
  display: block;
  position: relative;
  height: 26px;
  border: 1px solid #d5ba7f;
  border-radius: 3px;
  background: #203d36;
  color: #f4dfaa;
  box-shadow: inset 0 0 0 3px #203d36, inset 0 0 0 4px #d5ba7f40, 0 3px 7px #0003;
  font: 400 14px/24px 'Architects Daughter', cursive;
  letter-spacing: 2px;
  padding-left: 2px;
}
.preorder-welcome.is-waving .preorder-chip-arm { animation: preorder-wave 1.8s ease-in-out 1; }
.preorder-welcome.is-waving .preorder-open { animation: preorder-sign 2.6s ease-out 1; }
.dp-history-home .launch-banner { gap: 12px 30px; padding-block: 9px 8px; overflow: visible; }
.dp-history-home .launch-banner > span { margin-top: 7px; }
.preorder-welcome--banner { --chip-width: 112px; --chip-rise: 50px; }
.preorder-welcome--banner .preorder-counter > a.dp-cta { min-height: 44px; font-size: 13px; }
.dp-history-home .final-cta .cta-row { align-items: center; margin-top: 34px; }
.dp-history-home .final-cta .early-access { margin-top: 14px; }
.preorder-welcome--final { --chip-width: 160px; --chip-rise: 74px; }
.preorder-welcome--final .preorder-counter > a.dp-cta { min-height: 56px; padding-inline: 27px; font-size: 15px; }
.dp-history-home .final-cta .cta-row > .quiet-link { margin-top: 35px; }
@keyframes preorder-wave {
  0%,100% { transform: rotate(0); }
  18%,52% { transform: rotate(9deg); }
  35%,70% { transform: rotate(-8deg); }
  86% { transform: rotate(4deg); }
}
@keyframes preorder-sign {
  0%,100% { transform: rotate(-3deg); }
  22% { transform: rotate(5deg); }
  48% { transform: rotate(-5deg); }
  73% { transform: rotate(1deg); }
}
@media(max-width:650px) {
  .dp-history-home .launch-banner { gap: 0; padding: 11px 18px 9px; }
  .dp-history-home .launch-banner > span { flex-basis: 100%; margin: 0 0 5px; font-size: 12px; }
  .preorder-welcome--banner { --chip-width: 105px; --chip-rise: 47px; }
  .dp-history-home .final-cta .cta-row { gap: 7px; }
  .preorder-welcome--final { width: 100%; max-width: 340px; }
  .dp-history-home .final-cta .cta-row > .quiet-link { margin-top: 0; }
  .dp-history-home .final-cta .early-access { margin-top: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  .preorder-welcome *, .preorder-welcome *::before, .preorder-welcome *::after { animation: none !important; transition: none !important; }
}