/* Product screenshots stay available as ordinary articles before enhancement. */
.home-page .product-tour {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 96px 0;
  overflow: clip;
  color: #f3f4ff;
  background:
    radial-gradient(ellipse at 12% 10%, #5f8fff4a, transparent 42%),
    radial-gradient(ellipse at 86% 14%, #ed75ba3d, transparent 43%),
    radial-gradient(ellipse at 50% 100%, #51409b35, transparent 54%),
    linear-gradient(135deg, #070b1a, #181128 58%, #100d22);
}
.home-page .product-tour::before,
.home-page .product-tour::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.home-page .product-tour::before {
  width: 54vw;
  height: 54vw;
  top: -42vw;
  right: -17vw;
  border: 1px solid #b9a6ff29;
  border-radius: 50%;
  box-shadow: 0 0 0 55px #7b6ac50a, 0 0 0 110px #88b9ed08;
}
.home-page .product-tour::after {
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(#c6bdff99 .7px, transparent .8px);
  background-size: 27px 27px;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.product-tour-intro,
.product-tour-stage { position: relative; z-index: 1; }
.product-tour-intro { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.product-tour .section-heading { margin-bottom: 36px; }
.product-tour .section-heading h2 { color: #fbfaff; }
.product-tour .section-heading h2 > span { color: #c5b5ff; }
.product-tour .section-heading > p { color: #c2c6dc; }
.product-tour .eyebrow { color: #f0b8e0; }
.product-tour .eyebrow > span { background: #e59dd1; box-shadow: 0 0 13px #df91cc99; }
.product-tour-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 42px;
}
.product-tour-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid #c7bee04d;
  border-radius: 999px;
  color: #d7d8eb;
  background: #201a353d;
  box-shadow: inset 0 1px 0 #fff1;
  font-size: 11px;
  font-weight: 750;
}
.product-tour-tabs .icon { width: 15px; height: 15px; }
.product-tour-tabs a:is(:hover, :focus-visible) { border-color: #e2ceff; color: #fff; background: #79629b47; box-shadow: 0 0 19px #c293df3b, inset 0 1px 0 #fff3; }
.product-tour-tabs a[aria-selected='true'] { color: #151329; border-color: #ede5ff; background: linear-gradient(100deg, #d3c5ff, #f1b8dd 52%, #b5ddff); box-shadow: 0 0 28px #c896df52, inset 0 1px 0 #fff9; }
.product-tour-stage { width: min(1200px, 82%); margin-inline: auto; }
.product-tour-panels { display: grid; gap: 34px; }
.product-tour-panel { min-width: 0; }
.product-tour .product-window { background: #f8f9ff; }
.product-tour .screenshot-button { background: #101429; }
.product-tour .screenshot-button img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.product-tour .screenshot-button:hover img { transform: none; }
.product-tour .window-bar > button { min-width: 44px; min-height: 44px; }
.product-tour .tour-caption p { color: #d1d3e3; }
.product-tour .tour-caption .text-link { color: #dfe8ff; }
.product-tour .tour-caption .text-link:is(:hover, :focus-visible) { color: #fff; }
.product-tour :is(.product-tour-tabs a, .product-tour-controls button, .tour-caption a, .screenshot-button, .window-bar > button):focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.product-tour .product-window button:focus-visible { outline-color: #6652a5; outline-offset: -4px; }
.product-tour-controls { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 31px; }
.product-tour-controls button {
  min-width: 88px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid #cdc5e770;
  border-radius: 999px;
  color: #f8f7ff;
  background: #29213f99;
  box-shadow: inset 0 1px 0 #fff2;
  font-size: 11px;
  font-weight: 750;
}
.product-tour-controls button:is(:hover, :focus-visible) { border-color: #f0dfff; background: #725188aa; box-shadow: 0 0 20px #c28fe052; }
.product-tour-controls p { min-width: 135px; color: #cbd0e5; font-size: 10px; text-align: center; }

/* JavaScript layers the same complete panels; it never removes their content. */
[data-product-tour-ready='true'] .product-tour-panels { position: relative; display: grid; align-items: center; }
[data-product-tour-ready='true'] .product-tour-panel {
  position: relative;
  grid-area: 1 / 1;
  transform-origin: center;
  transition: transform .3s var(--ease), opacity .3s var(--ease), box-shadow .3s var(--ease);
}
[data-product-tour-ready='true'] .product-tour-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  background: #060817b5;
  transition: opacity .3s var(--ease);
}
[data-product-tour-ready='true'] .product-tour-panel[data-product-tour-active='true'] { z-index: 4; transform: translateX(0) scale(1); opacity: 1; box-shadow: 0 22px 58px #0008; }
[data-product-tour-ready='true'] .product-tour-panel[data-product-tour-active='true']::after { opacity: 0; }
[data-product-tour-ready='true'] .product-tour-panel[data-product-tour-position='-2'] { z-index: 1; transform: translateX(-18%) scale(.76) rotate(-5deg); opacity: .72; }
[data-product-tour-ready='true'] .product-tour-panel[data-product-tour-position='-1'] { z-index: 2; transform: translateX(-12%) scale(.84) rotate(-2.5deg); opacity: .87; }
[data-product-tour-ready='true'] .product-tour-panel[data-product-tour-position='1'] { z-index: 2; transform: translateX(12%) scale(.84) rotate(2.5deg); opacity: .87; }
[data-product-tour-ready='true'] .product-tour-panel[data-product-tour-position='2'] { z-index: 1; transform: translateX(18%) scale(.76) rotate(5deg); opacity: .72; }
html[data-motion='paused'] [data-product-tour-ready='true'] .product-tour-panel,
.motion-suspended [data-product-tour-ready='true'] .product-tour-panel { transition: none; }
html[data-motion='paused'] [data-product-tour-ready='true'] .product-tour-panel::after,
.motion-suspended [data-product-tour-ready='true'] .product-tour-panel::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-product-tour-ready='true'] .product-tour-panel,
  [data-product-tour-ready='true'] .product-tour-panel::after { transition: none; }
}
@media (forced-colors: active) {
  .home-page .product-tour { background: Canvas; color: CanvasText; }
  .product-tour-tabs a, .product-tour-controls button { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  .product-tour-tabs a[aria-selected='true'] { color: HighlightText; background: Highlight; }
  .product-tour :is(a, button):focus-visible,
  .product-tour .product-window button:focus-visible { outline-color: Highlight; }
  [data-product-tour-ready='true'] .product-tour-panel::after { background: Canvas; opacity: .65; }
}
@media (max-width: 700px) {
  .home-page .product-tour { padding-block: 68px; }
  .product-tour .section-heading { display: block; }
  .product-tour .section-heading > p { margin-top: 20px; }
  .product-tour-tabs { justify-content: flex-start; margin-bottom: 30px; }
  .product-tour-tabs a { flex: 1 1 calc(50% - 8px); }
  .product-tour-stage { width: min(92%, 680px); }
  [data-product-tour-ready='true'] .product-tour-panel[data-product-tour-position='-2'] { transform: translateX(-9%) scale(.82) rotate(-3deg); }
  [data-product-tour-ready='true'] .product-tour-panel[data-product-tour-position='-1'] { transform: translateX(-6%) scale(.89) rotate(-1.5deg); }
  [data-product-tour-ready='true'] .product-tour-panel[data-product-tour-position='1'] { transform: translateX(6%) scale(.89) rotate(1.5deg); }
  [data-product-tour-ready='true'] .product-tour-panel[data-product-tour-position='2'] { transform: translateX(9%) scale(.82) rotate(3deg); }
  .product-tour .tour-caption { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 16px; }
  .product-tour-controls { gap: 8px; }
  .product-tour-controls button { min-width: 44px; padding-inline: 12px; }
  .product-tour-controls p { min-width: 0; flex: 1; }
}
