/* Room-seeker story: the illustration takes the canvas and the product demo
   only comes into view once the patient sits down (~73% of 22 seconds).
   Keep the timeline consistent with --rm-dur in RalphRoomHeroAnimation.astro. */
html body main.page > #room-manager.product-screenshot.surface {
  gap:clamp(6px,1.3vh,16px)!important;
  padding:clamp(12px,2vh,25px) clamp(10px,2vw,28px)!important;
}
html body main.page > #room-manager .product-screenshot-heading {
  order:1!important;
  flex:0 0 auto!important;
}
html body main.page > #room-manager .ralph-room-visual {
  position:relative!important;
  display:block!important;
  isolation:isolate;
  order:3;
  flex:0 1 auto!important;
  width:min(1360px,calc(100vw - 28px),calc((100dvh - var(--ralph-nav-height) - 175px)*1.8))!important;
  max-width:100%!important;
  min-width:0;
  min-height:0;
  aspect-ratio:9/5;
  margin:0 auto!important;
}
html body main.page > #room-manager .ralph-room-slot {
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  aspect-ratio:9/5;
  margin:0!important;
}
html body main.page > #room-manager .ralph-room-visual .product-screenshot-figure {
  position:absolute!important;
  z-index:4;
  top:clamp(85px,18%,150px);
  right:clamp(8px,2.5%,34px);
  width:clamp(210px,28%,365px)!important;
  max-width:36%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(76,119,167,.25);
  border-radius:clamp(9px,1vw,16px);
  box-shadow:0 18px 46px rgba(18,51,91,.20);
  background:#f8fbff;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
html body main.page > #room-manager .ralph-room-visual .product-screenshot-figure a {
  display:block;
  min-width:0;
}
html body main.page > #room-manager .ralph-room-visual .product-demo-visual {
  display:block!important;
  width:100%!important;
  aspect-ratio:2640/1690!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}
html body main.page > #room-manager .ralph-room-visual .product-demo-visual > :is(img,video) {
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
html body main.page > #room-manager.ralph-room-motion-loaded .product-screenshot-figure {
  animation:ralph-room-demo-window 22s linear infinite both;
}
@keyframes ralph-room-demo-window {
  /* The patient sits at 73.2%: reveal the heading after a short pause, then the product UI. */
  0%,83.8% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(9px) scale(.98)}
  /* Visibility becomes active at zero opacity, so nothing flashes into view. */
  84% {opacity:0;visibility:visible;pointer-events:none;transform:translateY(9px) scale(.98);animation-timing-function:ease-out}
  /* Gently fade the product UI in after both heading lines appear. */
  88%,94.5% {opacity:1;visibility:visible;pointer-events:auto;transform:none;animation-timing-function:ease-in-out}
  98.8% {opacity:0;visibility:visible;pointer-events:none;transform:translateY(-5px) scale(.98)}
  99%,100% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px) scale(.98)}
}
html body main.page > #room-manager .ralph-room-slot .ralph-illustration-toggle {
  right:clamp(4px,1vw,12px);
  bottom:clamp(4px,1vw,12px);
}
html body main.page > #room-manager.ralph-room-story-paused .product-screenshot-figure {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  animation:none;
  transform:none;
}
/* Keep the complete people-logo on the left of the fixed navigation. */
#top.site-nav-global .site-title {order:0!important;margin:0 auto 0 0!important}
#top.site-nav-global .site-nav-links {order:1!important;margin:0 0 0 auto!important}
#top.site-nav-global .site-nav-mobile {order:2!important;margin-left:auto!important}
@media(max-width:750px) {
  html body main.page > #room-manager.product-screenshot.surface {
    gap:clamp(8px,1.5vh,14px)!important;
    padding:clamp(12px,2vh,20px) 10px!important;
  }
  html body main.page > #room-manager .ralph-room-visual {
    width:min(100%,600px)!important;
    max-width:600px!important;
    flex:0 0 auto!important;
  }
  html body main.page > #room-manager .ralph-room-visual .product-screenshot-figure {
    top:19%;
    right:1%;
    width:min(46%,225px)!important;
    max-width:46%!important;
    border-radius:9px;
  }
  .hero .site-nav .site-title,#top.site-nav-global .site-title {
    order:0!important;margin:0 auto 0 0!important;
  }
  .hero .site-nav .site-nav-mobile,#top.site-nav-global .site-nav-mobile {
    order:2!important;margin:0 0 0 auto!important;
  }
}
@media(max-height:560px) and (min-width:751px){
  html body main.page > #room-manager .ralph-room-visual {
    width:min(100%,calc((100dvh - var(--ralph-nav-height) - 175px)*1.8))!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html body main.page > #room-manager .ralph-room-visual .product-screenshot-figure {
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    animation:none!important;
    transform:none!important;
  }
}