/* Featured demos QA17. Isolated from the validated tools catalogue. */
section#tools.tw2-tool-section .tw2-scroll-story.tw2-switchboard.tw4-story.tw11-track {
  display: block !important;
  position: relative !important;
  width: min(1380px, calc(100% - 96px)) !important;
  height: 670vh !important;
  height: 670svh !important;
  padding: 0 !important;
  margin-inline: auto !important;
  overflow: visible !important;
}
section#tools.tw2-tool-section .tw11-sticky-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: 76px 0 28px;
  isolation: isolate;
}
section#tools.tw2-tool-section .tw11-sticky-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5% -5% 0 22%;
  background: radial-gradient(circle at 68% 48%, rgba(255,255,255,.05) 0%, rgba(255,255,255,.018) 31%, transparent 70%);
  pointer-events: none;
}
section#tools.tw2-tool-section .tw11-sticky-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 72% 8% -8%;
  background: radial-gradient(ellipse at 45% 42%, rgba(225,242,255,.12) 0%, rgba(255,255,255,.04) 38%, transparent 74%);
  filter: blur(14px);
  pointer-events: none;
}
section#tools.tw2-tool-section .tw11-track .tw2-tool-steps.tw4-feature-list {
  display: grid !important;
  gap: 16px !important;
  position: relative !important;
  top: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-list::before {
  content: "";
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: -12px;
  width: 2px;
  background: rgba(225,240,255,.12);
  pointer-events: none;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-list::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 25px;
  left: -12px;
  width: 2px;
  height: var(--tw11-fill, 0px);
  max-height: calc(100% - 50px);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,49,91,.55), #ff315b);
  box-shadow: 0 0 10px rgba(255,49,91,.16);
  pointer-events: none;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-step,
section#tools.tw2-tool-section .tw11-track .tw4-feature-step:first-child,
section#tools.tw2-tool-section .tw11-track .tw4-feature-step:last-child {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  position: relative;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-sizing: border-box;
  overflow: visible;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-step.is-active {
  background: linear-gradient(145deg, rgba(238,248,255,.13), rgba(255,255,255,.065)) !important;
  border-color: rgba(210,235,255,.22) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: 0 16px 42px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.10);
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-step::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 28px;
  left: -15px;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(220,238,255,.38);
  border-radius: 50%;
  background: #0b0c11;
  box-sizing: border-box;
  pointer-events: none;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-step.is-past::after {
  border-color: rgba(255,49,91,.7);
  background: #ff315b;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-step.is-active::after {
  top: 39px;
  border-color: #ffd0da;
  background: #ff315b;
  box-shadow: 0 0 0 4px rgba(255,49,91,.12), 0 0 14px rgba(255,49,91,.52);
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-step > button {
  display: grid !important;
  grid-template-columns: 23px 26px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 62px !important;
  padding: 15px 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(226,240,252,.62) !important;
  text-align: left !important;
  font: 600 22px/1.2 Georgia, serif !important;
  cursor: pointer;
  transition: color .2s, background .2s;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-step > button:hover {
  color: rgba(246,251,255,.90) !important;
  background: rgba(225,242,255,.05) !important;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-step.is-active > button {
  grid-template-columns: 26px minmax(0,1fr) !important;
  color: #fffefd !important;
  min-height: 86px !important;
  background: transparent !important;
  padding-bottom: 8px !important;
}
section#tools.tw2-tool-section .tw11-track .tw12-step-space {
  min-height: 1.2em; /* Preserve the row rhythm after removing the ordinal text. */
  color: inherit !important;
  font: 500 11px/1.2 'JetBrains Mono', monospace !important;
  letter-spacing: .06em;
}
section#tools.tw2-tool-section .tw11-track .is-active .tw12-step-space { grid-column: 1 / -1; color: rgba(223,241,255,.82) !important; }
section#tools.tw2-tool-section .tw11-track button:focus-visible,
section#tools.tw2-tool-section .tw12-open-tool:focus-visible {
  outline: 2px solid #9fc6ef !important;
  outline-offset: -3px;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-icon {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 30px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-icon svg {
  width: 25px !important;
  height: 25px !important;
}
section#tools.tw2-tool-section .tw11-track .tw4-feature-step > .tw11-step-detail {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  height: 184px !important;
  padding: 8px 18px 18px !important;
  margin: 0 !important;
  border: 0 !important;
}
section#tools.tw2-tool-section .tw11-track .tw11-step-detail[hidden] { display: none !important; }
section#tools.tw2-tool-section .tw11-track .tw11-step-detail p {
  margin: 0 0 10px !important;
  color: #f5faff !important;
  font: 600 15px/1.45 Inter, system-ui, sans-serif !important;
}
section#tools.tw2-tool-section .tw11-track .tw11-step-detail em {
  display: block !important;
  margin: 0 !important;
  color: rgba(228,240,250,.72) !important;
  font: 400 13px/1.55 Inter, system-ui, sans-serif !important;
}
section#tools.tw2-tool-section .tw12-open-tool {
  display: inline-flex !important;
  box-sizing: border-box;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 40px;
  padding: 0 14px;
  margin-top: auto;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 9px;
  background: #fff !important;
  color: #0b0f19 !important;
  font: 650 13px/1.2 Inter, system-ui, sans-serif;
  text-decoration: none !important;
  transition: background .2s;
}
section#tools.tw2-tool-section .tw12-open-tool:hover { background: #edf3fa !important; }
section#tools.tw2-tool-section .tw12-open-tool[hidden] { display: none !important; }
section#tools.tw2-tool-section .tw11-track .tw12-demo-label {
  color: #778594 !important;
  font: 500 11px/1.2 'JetBrains Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}
section#tools.tw2-tool-section .tw11-track .tw2-visual-column {
  min-width: 0 !important;
  align-self: center !important;
}
section#tools.tw2-tool-section .tw11-track .tw2-visual-sticky {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
}
section#tools.tw2-tool-section .tw11-track .tw2-stage {
  width: 100% !important;
  height: min(710px, calc(100svh - 104px)) !important;
  min-height: 0 !important;
}
section#tools.tw2-tool-section .tw11-track .tw2-stage-head.tw4-stage-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 12px 20px !important;
  box-sizing: border-box;
}
section#tools.tw2-tool-section .tw11-track .tw11-source-count {
  color: #527da8 !important;
  font: 600 11px/1.3 'JetBrains Mono', monospace !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}
section#tools.tw2-tool-section .tw11-track .tw2-scene { inset: 64px 0 0 !important; }
section#tools.tw2-tool-section .tw11-sticky-frame:not(.is-in-view) .tw2-scene * {
  animation-play-state: paused !important;
}
section#tools.tw2-tool-section .tw11-mobile-summary { display: none; }
@media (min-width: 821px) and (max-width: 1100px) {
  section#tools.tw2-tool-section .tw11-sticky-frame { grid-template-columns: 280px minmax(0,1fr); gap: 24px; }
}
@media (min-width: 821px) and (max-height: 760px) {
  section#tools.tw2-tool-section .tw11-sticky-frame { padding: 28px 0 16px; }
  section#tools.tw2-tool-section .tw11-track .tw2-stage { height: calc(100svh - 44px) !important; }
}
@media (max-width: 820px), (max-height: 639px), (prefers-reduced-motion: reduce) {
  section#tools.tw2-tool-section .tw2-scroll-story.tw2-switchboard.tw4-story.tw11-track { height: auto !important; padding-bottom: 64px !important; }
  section#tools.tw2-tool-section .tw11-sticky-frame { position: relative; top: auto; height: auto; padding: 24px 0; }
}
@media (max-width: 820px) {
  section#tools.tw2-tool-section .tw11-sticky-frame::before,
  section#tools.tw2-tool-section .tw11-sticky-frame::after,
  section#tools.tw2-tool-section .tw11-track .tw4-feature-list::before,
  section#tools.tw2-tool-section .tw11-track .tw4-feature-list::after,
  section#tools.tw2-tool-section .tw11-track .tw4-feature-step::after {
    display: none;
  }
  section#tools.tw2-tool-section .tw4-mobile-picker {
    flex-wrap: wrap !important;
    overflow: visible !important;
    justify-content: center !important;
  }
  section#tools.tw2-tool-section .tw2-scroll-story.tw2-switchboard.tw4-story.tw11-track { width: calc(100% - 32px) !important; }
  section#tools.tw2-tool-section .tw11-sticky-frame { display: block; padding: 0; }
  section#tools.tw2-tool-section .tw11-track .tw2-tool-steps.tw4-feature-list { display: none !important; }
  section#tools.tw2-tool-section .tw11-track .tw2-stage { height: 680px !important; }
  section#tools.tw2-tool-section .tw11-mobile-summary {
    display: block;
    width: calc(100% - 40px);
    margin: 12px auto 20px;
    color: #b8d7fa;
    font: 500 14px/1.5 Inter, system-ui, sans-serif;
  }
  section#tools.tw2-tool-section .tw11-mobile-summary p { margin: 0 0 12px; }
  section#tools.tw2-tool-section .tw11-mobile-summary .tw12-open-tool { min-height: 44px; }
  section#tools.tw2-tool-section .tw11-track .tw2-stage-head.tw4-stage-head { padding: 12px 14px !important; }
}