/* Product tour: shared studio rhythm, with a stable canvas for all five scenes. */
.communication-layout .hero-product-tour {
  margin: 48px calc(24px - var(--frame-pad)) 0;
}
.hero-product-tour .tour-tabs {
  gap: 0;
  width: 100%;
  min-width: 0;
}
.hero-product-tour .tour-tab-list {
  display: grid;
  grid-template-columns: repeat(var(--tour-slide-count, 5), minmax(0, 1fr));
  width: 100%;
  height: auto;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  align-items: stretch;
  justify-content: normal;
}
.hero-product-tour .tour-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  height: auto;
  min-height: 92px;
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid transparent;
  border-radius: var(--kit-radius-hero-tab);
  text-align: left;
  white-space: normal;
  color: #a0a0a7;
  background: transparent;
  box-shadow: none;
  transition:
    color var(--motion-feedback) var(--motion-ease),
    border-color var(--motion-feedback) var(--motion-ease);
}
.hero-product-tour .tour-tab::after {
  display: none;
}
.hero-product-tour .tour-tab[data-active] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* The existing shared glass supplies the material and measured 350ms travel.
   Only its radius changes to match the approved hero cards. */
.hero-product-tour .tour-tab-list .liquid-tab-indicator {
  border-radius: var(--kit-radius-hero-tab);
}
.hero-product-tour .liquid-tab-indicator .tour-card-progress {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  color: #aaaab4;
  pointer-events: none;
}
.hero-product-tour .tour-tab > span {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  letter-spacing: normal;
  transition: color var(--motion-feedback) var(--motion-ease);
}
.hero-product-tour .tour-tab > :is(.tour-tab-title, .tour-tab-copy) {
  transition:
    color var(--motion-feedback) var(--motion-ease),
    opacity var(--motion-feedback) var(--motion-ease),
    filter var(--motion-feedback) var(--motion-ease);
}
.hero-product-tour .tour-tab > .tour-tab-title {
  color: #92929b;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
}
.hero-product-tour .tour-tab > .tour-tab-copy {
  display: grid;
  width: 100%;
  min-height: 36px;
  align-items: start;
}
.hero-product-tour .tour-tab-copy > span {
  grid-area: 1 / 1;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  transition:
    opacity var(--motion-feedback) var(--motion-ease),
    color var(--motion-feedback) var(--motion-ease);
}
.hero-product-tour .tour-tab .tour-tab-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #a0a0a8;
}
.hero-product-tour .tour-tab[data-active] > .tour-tab-title,
.hero-product-tour .tour-tab:hover > .tour-tab-title {
  color: #777780;
}
.hero-product-tour .tour-tab[data-active] .tour-tab-description,
.hero-product-tour .tour-tab:hover .tour-tab-description {
  color: #85858e;
}
.hero-product-tour .tour-tab > .tour-tab-confirmation {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #777780;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
}
.hero-product-tour
  .tour-tab[data-feedback='true']
  > :is(.tour-tab-title, .tour-tab-copy) {
  filter: blur(5px);
  opacity: 0.06;
  transition-duration: var(--motion-press);
}
.hero-product-tour .tour-tab:focus-visible {
  outline: 2px solid #aaaab2;
  outline-offset: -3px;
}
.tour-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 330px;
  border-radius: 22px;
}
@media (min-width: 768px) {
  .hero-product-tour[data-services-only='true'] .tour-stage {
    min-height: 440px;
  }
}
/* Both trays use the exact same material; the large background never fades. */
.hero-product-tour :is(.tour-stage, .client-logo-shell) {
  border: 1px solid #eeeeef;
  background: #f7f7f8;
  box-shadow:
    0 12px 28px -24px #25252b38,
    inset 0 1px 0 #ffffffd9;
}
.hero-product-tour .tour-panel {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: inherit;
  opacity: 1;
  filter: blur(0);
  transition:
    opacity calc(var(--motion-layout) / 2) var(--motion-ease),
    filter calc(var(--motion-layout) - var(--motion-feedback) / 2)
      var(--motion-ease);
  transition-delay:
    calc(var(--motion-feedback) / 2),
    var(--motion-press);
}
/* Base UI owns the exit lifecycle and makes the outgoing panel inert. The
   stationary frame softly loses and regains focus; no scene translates or
   scales, and the incoming content resolves within the shared layout rhythm. */
.hero-product-tour .tour-panel[data-starting-style],
.hero-product-tour .tour-panel[data-ending-style] {
  opacity: 0;
  filter: blur(3px);
}
.hero-product-tour .tour-panel[data-ending-style] {
  transition-duration:
    calc(var(--motion-feedback) / 2),
    calc(var(--motion-feedback) / 2);
  transition-delay: 0ms, 0ms;
}
.hero-product-tour .tour-panel[hidden] {
  display: none;
}
.tour-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: clamp(24px, 4vw, 52px);
  border-radius: inherit;
  background: transparent;
}
.hero-product-tour[data-services-only='true'] .tour-scene-website {
  display: block;
  padding: 0;
}
.hero-product-tour[data-services-only='true'][data-tour-running='false']
  [data-website-track] {
  animation-play-state: paused !important;
}
.tour-play-control {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  color: #9999a1;
  border: 1px solid #eeeeef;
  box-shadow:
    0 1px 2px #25252b0a,
    inset 0 1px 0 #fff;
  transition:
    color var(--motion-feedback) var(--motion-ease),
    box-shadow var(--motion-feedback) var(--motion-ease);
}
.tour-play-control:hover {
  color: #777780;
}
.tour-play-control:active {
  box-shadow: inset 0 1px 3px #25252b12;
  transition-duration: var(--motion-press);
}
.tour-play-glyph {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}
.tour-play-control:focus-visible {
  outline: 2px solid #aaaab2;
  outline-offset: 3px;
}
@media (max-width: 767px) {
  .communication-layout .hero-product-tour {
    margin-top: 40px;
  }
  .hero-product-tour .tour-tab-list {
    grid-template-columns: repeat(var(--tour-slide-count, 5), 128px);
    overflow-x: auto;
    padding: 5px 0 9px;
  }
  .hero-product-tour .tour-tab {
    min-height: 106px;
  }
}
@media (max-width: 640px) {
  .tour-scene {
    padding: 42px 16px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-product-tour .tour-panel {
    transition: none;
    filter: none;
  }
  .hero-product-tour .tour-tab > :is(.tour-tab-title, .tour-tab-copy) {
    transition: none;
  }
  .hero-product-tour
    .tour-tab[data-feedback='true']
    > :is(.tour-tab-title, .tour-tab-copy) {
    filter: none;
    opacity: 0;
  }
}
@media (forced-colors: active) {
  .hero-product-tour .liquid-tab-indicator .tour-card-progress {
    color: Highlight;
  }
  .hero-product-tour .tour-tab[data-active] {
    border-color: Highlight;
  }
}

/* Sandbox material variant belongs to the tour shell, not its scene images.
   The pause control and service tabs stay outside the masked display field. */
.hero-product-tour[data-material='soft-focus'] .tour-stage {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.hero-product-tour[data-material='soft-focus'] .tour-material-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  mask-image: var(--tour-material-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.hero-product-tour[data-material='soft-focus'] .tour-material-diffusion {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image:
    linear-gradient(to right, #000, transparent 7%, transparent 93%, #000),
    linear-gradient(to bottom, #000, transparent 9%, transparent 91%, #000);
  mask-composite: add;
}
.hero-product-tour[data-material='soft-focus'] .tour-stage > [data-tour-play] {
  z-index: 2;
  background: #ffffff8c;
  border-color: #ffffffa6;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero-product-tour[data-material='soft-focus'] .client-logo-shell {
  position: relative;
  z-index: 2;
  margin: 8px 16px 0;
  border-color: #ffffffb3;
  background: linear-gradient(145deg, #ffffff80, #ffffff38);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  box-shadow: inset 0 1px 0 #fff, 0 12px 32px -26px #25252b38;
}
.hero-product-tour[data-material='soft-focus'] .tour-tab-list .liquid-tab-indicator {
  background: linear-gradient(145deg, #ffffff9e, #ffffff52);
  border-color: #ffffffb3;
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px -10px #25252b38;
}
@media (max-width: 767px) {
  .hero-product-tour[data-material='soft-focus'] .client-logo-shell { margin-inline: 4px; }
  .hero-product-tour[data-material='soft-focus'] .tour-material-diffusion {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
@media (forced-colors: active) {
  .hero-product-tour[data-material='soft-focus'] .tour-material-field { mask-image: none; }
  .hero-product-tour[data-material='soft-focus'] .tour-material-diffusion { display: none; }
  .hero-product-tour[data-material='soft-focus'] .client-logo-shell { border-color: CanvasText; background: Canvas; }
}