/* Upright, stable sample screens with content-driven sizing. */
body.home-page#top .hero-mock,
body.home-page#top .hero-mock .browser,
body.home-page#top .hero-mock:hover .browser{transform:none;rotate:none;perspective:none}
body.home-page#top .hero-mock .browser{padding:0;transition:border-color .2s ease}
body.home-page#top .hero-mock .stage{display:grid;grid-template-columns:minmax(0,1fr);height:auto;min-height:340px;margin:10px 14px 16px;border-radius:12px;isolation:isolate}
body.home-page#top .hero-mock .demo{position:relative;inset:auto;grid-area:1/1;min-width:0;display:grid;grid-template-rows:auto 1fr auto;align-content:start;gap:26px;padding:24px;transform:none}
body.home-page#top .hero-mock .d-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;font:600 13px/1.4 var(--disp)}
body.home-page#top .hero-mock .d-nav{display:flex;flex-wrap:wrap;gap:12px;font:400 10px/1.5 var(--body);color:#b1bbcb}
body.home-page#top .hero-mock .d-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
body.home-page#top .hero-mock .d-title{font:600 clamp(23px,2.1vw,28px)/1.18 var(--disp);letter-spacing:-.035em;text-wrap:initial;margin:0}
body.home-page#top .hero-mock .d-sub{max-width:38ch;margin:0;font:400 12px/1.75 var(--body);letter-spacing:0;opacity:1;color:#c0cad8;text-wrap:pretty}
body.home-page#top .hero-mock .d-btn{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:38px;margin:4px 0 0;padding:9px 15px;font:600 11px/1.5 var(--disp);border-radius:8px;white-space:normal}
body.home-page#top .hero-mock .d-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0}
body.home-page#top .hero-mock .d-card{display:flex;align-items:center;justify-content:center;min-width:0;height:auto;min-height:46px;padding:10px 5px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.045);color:#b6c3d1;font:500 10px/1.5 var(--disp);text-align:center}
@media(max-width:540px){body.home-page#top .hero-mock{padding:10px}body.home-page#top .hero-mock .stage{margin:8px 10px 12px;min-height:360px}body.home-page#top .hero-mock .demo{padding:20px 16px;gap:22px}body.home-page#top .hero-mock .d-top{flex-direction:column;align-items:flex-start;gap:8px}body.home-page#top .hero-mock .d-title{font-size:23px}body.home-page#top .hero-mock .d-cards{gap:6px}body.home-page#top .hero-mock .d-card{font-size:9px;padding:9px 4px}}