/* NOVA Link Studio — accurately scaled device preview v9.
   The embedded page uses an actual 390x780 CSS-pixel viewport.
   The handset is scaled as one coherent preview instead of squeezing the iframe
   to ~200px and causing overlarge profile elements / clipping. */
.hero .hero-demo {overflow:hidden}
.hero .stage {display:grid;place-items:center;min-height:0;height:600px;padding:11px 8px 18px;overflow:visible}
.hero .phone {
 --device-scale:.70;
 position:relative;
 display:block;
 flex:none;
 box-sizing:content-box;
 width:calc(390px * var(--device-scale))!important;
 height:calc(780px * var(--device-scale))!important;
 aspect-ratio:auto!important;
 min-height:0!important;
 max-height:none!important;
 padding:8px!important;
 margin-inline:auto;
 border-radius:40px!important;
 background:linear-gradient(145deg,#414962,#1a2137 47%,#323952);
 box-shadow:0 0 0 1px #b6c9ef50,inset 0 0 0 2px #0a0f1cb3,0 30px 60px -25px #040711,0 0 75px -38px #a6a6f5!important;
 isolation:isolate;
}
.hero .phone-screen{
 position:relative;
 overflow:hidden;
 border-radius:32px;
 height:calc(780px * var(--device-scale));
 width:calc(390px * var(--device-scale));
 background:#08030f;
 overscroll-behavior:contain;
}
.hero .phone-screen iframe{
 position:absolute!important;
 top:0!important;
 left:0!important;
 display:block!important;
 width:390px!important;
 height:780px!important;
 max-width:none!important;
 max-height:none!important;
 border:0!important;
 border-radius:0!important;
 margin:0!important;
 padding:0!important;
 transform:scale(var(--device-scale));
 transform-origin:top left;
 background:#08030f;
}
.hero .phone .notch{
 top:calc(8px + 9px * var(--device-scale))!important;
 left:50%;
 width:calc(108px * var(--device-scale))!important;
 height:calc(27px * var(--device-scale))!important;
 margin-left:calc(-54px * var(--device-scale))!important;
 border-radius:99px;
 background:#03040c;
 box-shadow:0 2px 8px #0008;
 pointer-events:none;
}
.hero .phone .glare{
 inset:8px!important;
 border-radius:32px!important;
 background:linear-gradient(125deg,#ffffff09,transparent 30%)!important;
 pointer-events:none;
}
.hero .phone::before,.hero .phone::after{width:2px;right:-2px}
.hero .phone::before{top:115px;height:52px}
.hero .phone::after{top:192px;height:30px}
.hero .stage .halo {pointer-events:none;opacity:.28;filter:blur(43px)}
.hero .demo-controls {margin-top:0}
.hero .demo-tip {
 display:flex;
 justify-content:center;
 align-items:center;
 gap:8px;
 margin:0 0 9px;
 color:#b9cce8;
 font-size:10px;
 line-height:1.6;
 letter-spacing:.01em;
}
.hero .demo-tip span{font-size:16px;color:#91e2ef}
.hero .switcher {margin-top:0}
.hero .demo-top{padding:0 3px}
.hero .hero-open,.hero .hero-studio{white-space:nowrap}
.hero .demo-counter{font-variant-numeric:tabular-nums}
/* Device view inside the full-screen template preview modal. */
.modal-stage{overflow:hidden}
#mFrame:not(.desktop){width:min(390px,100%);max-width:100%;height:100%;border:8px solid #293750;border-radius:29px;box-shadow:0 0 0 1px #7593ad44,0 21px 40px #0008;background:#080e1a}
#mFrame.desktop{height:100%;width:100%;max-width:none;border:1px solid #385370;border-radius:11px;box-shadow:none}
@media(max-width:1180px) and (min-width:1021px){
 .hero .phone{--device-scale:.64}
 .hero .stage{height:551px}
}
@media(max-width:1020px) and (min-width:741px){
 .hero .phone{--device-scale:.57}
 .hero .stage{height:495px}
 .hero .stage .halo{width:310px;height:370px}
}
@media(max-width:740px){
 .hero .phone{--device-scale:.60;border-radius:33px!important;padding:7px!important}
 .hero .stage{height:505px;padding:9px 6px 12px}
 .hero .phone-screen{border-radius:27px}
 .hero .phone .glare{inset:7px!important;border-radius:27px!important}
 .hero .phone .notch{top:calc(7px + 9px * var(--device-scale))!important}
 .hero .demo-tip{font-size:10px}
}
@media(max-width:440px){
 .hero .phone{--device-scale:.55}
 .hero .stage{height:462px}
}
@media(max-width:360px){
 .hero .phone{--device-scale:.50}
 .hero .stage{height:427px}
 .hero .demo-top{font-size:8px}
 .hero .demo-tip{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .hero .phone-screen iframe{scroll-behavior:auto}
}
/* Prevent the header CTA from creating a 6px horizontal scroll at 375px. */
@media(max-width:390px){
 .nav{gap:7px}
 .nav-mobile{margin-inline-start:auto}
 .nav-cta{font-size:10px;gap:4px;padding-inline:7px;min-height:39px}
 .nav-cta .count{display:none}
 .nav-mobile summary{padding:7px 9px}
}