/* Interactive homepage demo. The surrounding institutional design is preserved. */
.phone-screen { display:block; isolation:isolate; }
.home-demo-frame { position:absolute; top:0; left:0; border:0; margin:0; width:390px; height:880px; max-width:none; transform-origin:top left; background:#000; opacity:0; }
.home-demo-frame.is-ready { opacity:1; }
.home-demo-loading { position:absolute; inset:0; display:grid; place-items:center; padding:20px; text-align:center; color:#f3ddd1; font:500 12px/1.5 Montserrat,Arial,sans-serif; pointer-events:none; }
.home-demo-loading[hidden] { display:none; }
.home-demo-tools { position:absolute; top:calc(50% + 272px); left:50%; transform:translateX(-50%); width:290px; text-align:center; z-index:4; display:grid; gap:8px; color:#b8aaa2; font:500 10px/1.4 Montserrat,Arial,sans-serif; }
.home-demo-tools a { justify-self:center; color:#f0b393; padding:8px 15px; border:1px solid #705044; border-radius:20px; background:#100c0a; font-size:11px; }
.home-demo-tools a:focus-visible { outline:2px solid #f0b393; outline-offset:3px; }
.hero-visual { min-height:700px; }
.hero-visual .visual-caption { bottom:6px; }
.hero-visual .float-card { pointer-events:none; }
@media(max-width:600px) {
  .hero-visual { min-height:700px; }
  /* Decorative badges must not cover the interactive footer on small screens. */
  .hero-visual .float-card { display:none; }
}