/* SCENE direction banner, directly below home search. */
.scene-roadmap-promo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  box-sizing: border-box;
  padding: 10px var(--gutter, 40px);
  overflow: hidden;
  border-bottom: 1px solid #af8cdb29;
  background: #201c2b;
  color: #f6f2fc;
  text-decoration: none;
}
.scene-roadmap-promo[hidden] { display: none; }
.scene-roadmap-promo::before,
.scene-roadmap-promo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.scene-roadmap-promo::before {
  left: 44%;
  background: url('/assets/roadmap/scene-next-stage.webp') 62% 48% / cover no-repeat;
  opacity: .7;
}
.scene-roadmap-promo::after {
  background: linear-gradient(90deg, #201c2b 0%, #201c2bfa 31%, #201c2bd9 55%, #201c2b8c 80%, #201c2bba 100%);
}
.scene-roadmap-promo-copy { min-width: 0; }
.scene-roadmap-promo-copy strong { font-size: 20px; font-weight: 650; line-height: 1.4; letter-spacing: -.035em; }
.scene-roadmap-promo-more { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; color: #e0ccff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.scene-roadmap-promo:hover { border-bottom-color: #b693e866; }
.scene-roadmap-promo:hover .scene-roadmap-promo-more { color: #fff; }
.scene-roadmap-promo:focus-visible { outline: 2px solid #c8a9ff; outline-offset: -4px; }

@media (max-width: 650px) {
  .scene-roadmap-promo { min-height: 76px; padding: 14px 20px; gap: 16px; }
  .scene-roadmap-promo::before { left: 24%; background-position: 63% center; }
  .scene-roadmap-promo::after { background: linear-gradient(90deg, #201c2bfa 0%, #201c2bf2 35%, #201c2bc7 66%, #201c2bad 100%); }
  .scene-roadmap-promo-copy strong { font-size: 19px; }
  .scene-roadmap-promo-more { font-size: 16px; }
}
@media (max-width: 360px) {
  .scene-roadmap-promo { padding-inline: 16px; gap: 12px; }
}