@font-face {
  font-family: "Workflow Control";
  src: url("./assets/air/ControlUpright-Regular-Web.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: "Workflow Control TNT";
  src: url("./assets/air/ControlUpright-RegularTNT-Web.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

.request-workflow-showcase {
  position: relative;
  isolation: isolate;
  z-index: 2;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 104px 32px 44px;
  overflow: hidden;
  background: transparent;
  color: #fff;
  font-family: "Workflow Control", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

.request-workflow-showcase__intro {
  margin: 0 auto 48px;
  text-align: center;
}

.request-workflow-showcase__intro h2 {
  max-width: 624px;
  margin: 0 auto;
  font-family: "Workflow Control TNT", Arial, sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.request-workflow-showcase__intro p {
  margin: 24px 0;
  font-size: 16px;
  line-height: 24px;
}

.request-workflow-showcase__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid #fff;
  border-radius: 8px;
  background: #fff;
  color: #1b1b1b;
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  transition: background-color 80ms ease;
}

.request-workflow-showcase__cta:hover { background: #e8e8e8; }

.request-workflow-showcase__prompt-row {
  display: flex;
  justify-content: center;
  min-height: 80px;
  margin-bottom: 40px;
}

.request-workflow-showcase__prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.request-workflow-showcase__prompt-video {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.request-workflow-showcase__grid {
  display: flex;
  width: min(1102px, 100%);
  margin: 0 auto;
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.request-workflow-showcase__grid::-webkit-scrollbar { display: none; }

.request-workflow-showcase__card {
  flex: 0 0 min(350px, calc((100% - 48px) / 3));
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  background: rgb(255 255 255 / 1%);
  opacity: 0.4;
  scroll-snap-align: start;
  transition: opacity 240ms ease, border-color 240ms ease;
}

.request-workflow-showcase__grid > .request-service-card {
  flex: 0 0 min(350px, calc((100% - 48px) / 3));
  scroll-snap-align: start;
}

.request-workflow-showcase__card.is-active {
  border-color: rgb(255 255 255 / 30%);
  opacity: 1;
}

.request-workflow-showcase__card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.request-workflow-showcase__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.request-workflow-showcase__media img { display: block; }

.request-workflow-showcase__layers {
  position: absolute;
  top: 10%;
  left: 19%;
  width: 61%;
  height: 80%;
}

.request-workflow-showcase__layers img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}

.request-workflow-showcase__note {
  position: absolute;
  top: 8%;
  left: 4%;
  z-index: 5;
  width: 72%;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 8px;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
}

.request-workflow-showcase__note img { width: 100%; height: auto; }

.request-workflow-showcase__scan {
  position: absolute;
  top: 29%;
  left: 53%;
  width: 24%;
  height: 35%;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 4px;
  opacity: 0;
}

.request-workflow-showcase__tags {
  position: absolute;
  bottom: 8%;
  right: 4%;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  width: 62%;
  opacity: 0;
}

.request-workflow-showcase__tags img {
  width: auto;
  height: 24px;
  border-radius: 24px;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.request-workflow-showcase__organize-grid {
  position: absolute;
  inset: 4%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.request-workflow-showcase__organize-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
  overflow: hidden;
}

.request-workflow-showcase__organize-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.request-workflow-showcase__organize-slot > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  color: #fff;
  font-size: 13px;
  line-height: 16px;
  opacity: 0;
}

.request-workflow-showcase__asset {
  position: absolute;
  top: 18%;
  left: 29%;
  z-index: 2;
  width: 43%;
  height: 64%;
  overflow: hidden;
  border-radius: 8px;
  transform-origin: center;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 18%);
  will-change: transform, opacity;
}

.request-workflow-showcase__asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.request-workflow-showcase__asset[data-organize-index="0"] { z-index: 2; }
.request-workflow-showcase__asset[data-organize-index="1"] { z-index: 4; }
.request-workflow-showcase__asset[data-organize-index="2"] { z-index: 1; }
.request-workflow-showcase__asset[data-organize-index="3"] { z-index: 3; }
.request-workflow-showcase__asset--video { z-index: 4; }
.request-workflow-showcase__video-ui { position: absolute; inset: 0; }

.request-workflow-showcase__review-tag {
  position: absolute;
  top: 8%;
  left: 7%;
  z-index: 5;
  padding: 4px 5px;
  border-radius: 3px;
  background: rgb(255 255 255 / 22%);
  font-size: 9px;
  line-height: 12px;
}

.request-workflow-showcase__review-tag--approved {
  top: 16%;
  left: 55%;
  background: #2b7fff;
}

.request-workflow-showcase__scale-canvas {
  position: absolute;
  inset: 4%;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 8px;
  background: rgb(255 255 255 / 2%);
}

.request-workflow-showcase__output {
  position: absolute;
  top: 8%;
  left: 2%;
  width: 66%;
  height: 90%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: #b7cdbb;
  opacity: 1;
  transform-origin: center;
  will-change: opacity, transform;
}

.request-workflow-showcase__output img {
  width: 28%;
  height: 70%;
  object-fit: contain;
}

.request-workflow-showcase__scale-variants {
  position: absolute;
  inset: 5% 4%;
  opacity: 0;
  transform: scale(0.96);
  will-change: opacity, transform;
}

.request-workflow-showcase__scale-variant {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 6px;
}

.request-workflow-showcase__scale-variant img {
  width: auto;
  height: 67%;
  max-width: 60%;
  object-fit: contain;
}

.request-workflow-showcase__scale-variant--banner {
  top: 0;
  left: 4%;
  width: 64%;
  height: 31%;
  background: #d6e35c;
}

.request-workflow-showcase__scale-variant--portrait-small {
  top: 0;
  right: 4%;
  width: 28%;
  height: 31%;
  background: #a8c3b4;
}

.request-workflow-showcase__scale-variant--portrait-large {
  top: 34%;
  left: 4%;
  width: 43%;
  height: 62%;
  background: #9ebda9;
}

.request-workflow-showcase__scale-variant--square-left {
  top: 34%;
  left: 49%;
  width: 30%;
  height: 30%;
  background: #f0f1ed;
}

.request-workflow-showcase__scale-variant--square-right {
  top: 34%;
  right: 4%;
  width: 27%;
  height: 30%;
  background: #f0f1ed;
}

.request-workflow-showcase__scale-variant--landscape {
  right: 4%;
  bottom: 0;
  width: 48%;
  height: 30%;
  background: #1f5577;
}

.request-workflow-showcase__resize-panel {
  position: absolute;
  top: 8%;
  right: 4%;
  z-index: 5;
  width: 46%;
  aspect-ratio: 270 / 436;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 8px;
  background: rgb(255 255 255 / 12%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.request-workflow-showcase__resize-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.request-workflow-showcase__resize-panel img + img { opacity: 0.42; }

.request-workflow-showcase__copy { padding: 20px; }

.request-workflow-showcase__copy h3 {
  margin: 0 0 8px;
  font-family: "Workflow Control TNT", Arial, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0;
}

.request-workflow-showcase__copy p {
  margin: 0;
  color: rgb(255 255 255 / 60%);
  font-size: 16px;
  line-height: 24px;
}

.request-workflow-showcase__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 16px auto 0;
}

.request-workflow-showcase__controls[hidden] { display: none; }
.request-workflow-showcase__steps { display: flex; gap: 4px; }
.request-workflow-showcase__controls button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.request-workflow-showcase__steps button::after {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 25%);
  content: "";
  transition: background-color 80ms ease;
}

.request-workflow-showcase__steps button[aria-pressed="true"]::after { background: #fff; }
.request-workflow-showcase__controls button:hover { background: rgb(255 255 255 / 8%); }
.request-workflow-showcase__controls button:focus-visible { outline: 2px solid #fff; }
.request-workflow-showcase__controls button:disabled { opacity: 0.3; cursor: default; }
.request-workflow-showcase__pause span {
  position: relative;
  width: 16px;
  height: 16px;
  background: #fff;
  mask: none !important;
  -webkit-mask: none !important;
  clip-path: polygon(0 0, 32% 0, 32% 100%, 0 100%, 0 0, 68% 0, 68% 100%, 100% 100%, 100% 0);
}
.request-workflow-showcase__pause[aria-pressed="true"] span {
  mask: none !important;
  -webkit-mask: none !important;
  clip-path: polygon(10% 0, 92% 50%, 10% 100%);
}

.request-workflow-showcase__card.is-active .request-workflow-showcase__layers img:nth-child(2) { animation: workflow-layer-desk 6.3s ease-in-out infinite; }
.request-workflow-showcase__card.is-active .request-workflow-showcase__layers img:nth-child(3) { animation: workflow-layer-bowl 6.3s ease-in-out infinite; }
.request-workflow-showcase__card.is-active .request-workflow-showcase__layers img:nth-child(4) { animation: workflow-layer-bottle 6.3s ease-in-out infinite; }
.request-workflow-showcase__card.is-active .request-workflow-showcase__note { animation: workflow-note 6.3s ease-in-out infinite; }
.request-workflow-showcase__card.is-active .request-workflow-showcase__tags,
.request-workflow-showcase__card.is-active .request-workflow-showcase__scan { animation: workflow-tags 6.3s ease-in-out infinite; }
.request-workflow-showcase__card.is-active .request-workflow-showcase__output { animation: workflow-scale-output 6.1s ease-in-out infinite; }
.request-workflow-showcase__card.is-active .request-workflow-showcase__scale-variants { animation: workflow-scale-variants 6.1s ease-in-out infinite; }
.request-workflow-showcase__card.is-active .request-workflow-showcase__resize-panel { animation: workflow-resize 6.1s ease-in-out infinite; }
.request-workflow-showcase.is-motion-paused * { animation-play-state: paused !important; }

@keyframes workflow-prompt-spin { to { transform: rotate(360deg); } }
@keyframes workflow-layer-desk { 0%, 12%, 95%, 100% { transform: none; } 30%, 76% { transform: translate(-5%, 7%); } }
@keyframes workflow-layer-bowl { 0%, 12%, 95%, 100% { transform: none; } 30%, 76% { transform: translate(-12%, 9%); } }
@keyframes workflow-layer-bottle { 0%, 12%, 95%, 100% { transform: none; } 30%, 76% { transform: translate(14%, -6%); } }
@keyframes workflow-note { 0%, 16%, 92%, 100% { opacity: 0; transform: translateY(8px); } 32%, 75% { opacity: 1; transform: none; } }
@keyframes workflow-tags { 0%, 28%, 92%, 100% { opacity: 0; transform: translateY(8px); } 44%, 75% { opacity: 1; transform: none; } }
@keyframes workflow-scale-output {
  0%, 42% { top: 8%; left: 2%; width: 66%; height: 90%; opacity: 1; transform: none; }
  46%, 76% { top: 8%; left: 2%; width: 66%; height: 90%; opacity: 0; transform: scale(.96); }
  82%, 100% { top: 8%; left: 2%; width: 66%; height: 90%; opacity: 1; transform: none; }
}
@keyframes workflow-scale-variants {
  0%, 40% { opacity: 0; transform: scale(.96); }
  47%, 76% { opacity: 1; transform: none; }
  83%, 100% { opacity: 0; transform: scale(.96); }
}
@keyframes workflow-resize { 0%, 38%, 98%, 100% { opacity: 1; transform: none; } 57%, 82% { opacity: 0; transform: translateX(16px); } }

@media (max-width: 920px) {
  .request-workflow-showcase { padding: 88px 0 28px; }
  .request-workflow-showcase__intro { padding: 0 20px; margin-bottom: 36px; }
  .request-workflow-showcase__intro h2 { font-size: 48px; }
  .request-workflow-showcase__prompt-row { min-height: 68px; margin-bottom: 28px; padding: 0 20px; }
  .request-workflow-showcase__prompt,
  .request-workflow-showcase__prompt-video { width: 68px; height: 68px; }
  .request-workflow-showcase__grid { width: 100%; gap: 16px; overflow-x: auto; padding: 0 20px 4px; scroll-padding-inline: 20px; }
  .request-workflow-showcase__card,
  .request-workflow-showcase__grid > .request-service-card { flex-basis: min(360px, 84%); }
  .request-workflow-showcase__card,
  .request-workflow-showcase__grid > .request-service-card { scroll-snap-align: center; }
  .request-workflow-showcase__copy { padding: 18px 20px 24px; }
  .request-workflow-showcase__copy h3 { font-size: 32px; line-height: 36px; }
}

@media (max-width: 480px) {
  .request-workflow-showcase__intro h2 { font-size: 40px; }
  .request-workflow-showcase__organize-grid { gap: 12px; }
  .request-workflow-showcase__organize-slot > span { left: 7px; right: 7px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .request-workflow-showcase * { animation: none !important; transition: none !important; }
}

.request-workflow-showcase ~ .request-base44-hero .request-spectrum-svg-stage {
  animation: none;
  opacity: var(--spectrum-svg-opacity);
  transform: translate3d(0, var(--spectrum-translate-y), 0) scale3d(var(--spectrum-scale-x), var(--spectrum-scale-y), 1);
}
.request-workflow-showcase ~ .request-base44-hero .request-spectrum-scroll-hint { animation: none; opacity: var(--spectrum-scroll-opacity); }