.demo-walkthrough { padding-bottom: 66px; }
.demo-walkthrough .video-frame { width: 68%; max-width: 900px; margin-inline: auto; }
.demo-walkthrough .video-frame video { height: auto; aspect-ratio: auto; }
.demo-walkthrough .video-section { padding-top: 44px; }
.demo-walkthrough .video-section + .video-section { margin-top: 30px; }
.demo-walkthrough .video-heading { position: relative; }
.demo-walkthrough .video-heading .eyebrow { display: inline; }
.demo-duration { display: inline-block; margin-left: 16px; color: #4c665a; font-size: 14px; white-space: nowrap; }
.demo-navigator { gap: 8px 30px; }
.demo-navigator a { border-bottom: 2px solid transparent; padding: 8px 0; text-underline-offset: 6px; }
.demo-navigator a:hover, .demo-navigator a[aria-current="location"] { color: var(--green-dark); border-bottom-color: var(--green); }
.demo-walkthrough video:focus-visible { outline: 3px solid var(--green); outline-offset: -5px; }
@media (min-width: 901px) and (max-width: 1399px) {
  .demo-walkthrough .video-frame { width: 78%; }
}
@media (max-width: 900px) {
  .demo-walkthrough .video-frame { width: 100%; max-width: none; }
}
@media (max-width: 760px) {
  .demo-walkthrough { padding-bottom: 40px; }
  .demo-walkthrough .video-section { padding-top: 28px; }
  .demo-walkthrough .video-section + .video-section { margin-top: 18px; }
  .demo-navigator { gap: 4px 20px; }
  .demo-duration { display: block; margin: 7px 0 0; }
}