.niwa-hero-scroll{--hero-inset:84px;position:relative;height:310svh}
.niwa-hero-scroll .pt-hero{position:sticky;top:var(--hero-inset);height:calc(100svh - var(--hero-inset));min-height:0;padding:0;overflow:hidden}
.niwa-phone{position:absolute;inset:0;z-index:1;touch-action:pan-y}
.niwa-phone__fallback{position:absolute;top:68%;left:50%;width:min(85vw,320px);height:auto;transform:translateX(-50%);border:6px solid #f4f3ef;border-radius:36px}
.niwa-phone[data-ready] .niwa-phone__fallback{display:none}
.niwa-hero-scroll > .pt-hero__copy{position:absolute;z-index:2;top:clamp(112px,18svh,180px);left:24px;right:24px;width:auto;text-align:center;pointer-events:none}
.niwa-hero-scroll .niwa-button{background:var(--niwa-button-surface)}
.niwa-hero-scroll .niwa-button:is(:hover,:focus-visible){background:var(--niwa-button-hover)}
.niwa-hero-scroll .niwa-actions{pointer-events:auto}
.niwa-phone-shell{position:absolute;left:50%;top:0;width:min(380px,calc((100svh - 122px)*.46));padding:7px;border:1px solid #d6d9dc;border-radius:clamp(32px,5vw,47px);background:linear-gradient(100deg,#cdd1d4 0%,#fff 3%,#f3f2ee 9%,#fff 93%,#c7cbce 100%);box-shadow:inset 0 0 0 1px #fff,3px 1px 0 #a9afb4,5px 2px 0 #dfe2e4,0 16px 32px #33353c16;transform-origin:50% 0;will-change:transform}
.niwa-phone-glass{position:relative;aspect-ratio:589/1280;overflow:hidden;border-radius:clamp(26px,4vw,39px);background:#f2efe9;box-shadow:0 0 0 2px #202124;isolation:isolate;transform:translateZ(0)}
.niwa-phone-pixels{position:absolute;inset:0}
.niwa-phone-pixels canvas{display:block;width:100%}
.niwa-phone-top{position:absolute;top:0;left:0;height:12.109375%}
.niwa-phone-bottom{position:absolute;top:91.40625%;left:0;height:8.59375%}
.niwa-phone-chat{position:absolute;top:12.109375%;left:0;width:100%;height:79.296875%;overflow:hidden;contain:paint}
.niwa-phone-wallpaper{position:absolute;inset:0;height:100%}
.niwa-phone-messages{position:relative;height:auto;will-change:transform}
.niwa-phone-island{position:absolute;top:2%;left:38%;width:24%;height:3%;border-radius:30px;background:#111215;box-shadow:inset -5px 0 5px #20222a}
.niwa-phone-home{position:absolute;bottom:1.4%;left:36%;width:28%;height:3px;border-radius:4px;background:#161719}
.niwa-phone-hardware i{position:absolute;left:-3px;top:16%;width:3px;height:4%;border-radius:2px;background:linear-gradient(90deg,#b9bec2,#f6f7f7)}
.niwa-phone-hardware i:nth-child(2){top:25%;height:6%}
.niwa-phone-hardware i:nth-child(3){top:33%;height:6%}
.niwa-phone-hardware i:nth-child(4){left:auto;right:-5px;top:29%;height:9%}
.niwa-phone-hardware i:nth-child(5){left:auto;right:-5px;top:62%;height:6%}
@media(max-width:980px){.niwa-hero-scroll{--hero-inset:60px}}
@media(max-width:640px){
 .niwa-hero-scroll{height:300svh}
 .niwa-hero-scroll > .pt-hero__copy{top:clamp(94px,15svh,130px);left:20px;right:20px}
 .niwa-phone-shell{width:min(92vw,calc((100svh - 106px)*.46));border-radius:39px}
 .niwa-phone-glass{border-radius:32px}
}
@media(max-width:980px) and (max-height:500px) and (orientation:landscape){
 .niwa-hero-scroll > .pt-hero__copy{top:24px;gap:16px}
 .pt-hero__copy h1{font-size:min(var(--niwa-type-h1),8svh)}
}

/* The compositor owns scroll progress; these are static textures translated once. */
.niwa-hero-native{view-timeline:--niwa-hero block;view-timeline-inset:var(--hero-inset) 0}
.niwa-hero-native .niwa-phone-shell{animation:niwa-phone-enter 1s cubic-bezier(.333333,1,.666667,1) both;animation-timeline:--niwa-hero;animation-range:contain 0% contain 30%}
.niwa-hero-native .niwa-phone-messages{animation:niwa-chat-read 1s linear both;animation-timeline:--niwa-hero;animation-range:contain 0% contain 92%}
.niwa-hero-native > .pt-hero__copy{animation:niwa-copy-exit 1s linear both;animation-timeline:--niwa-hero;animation-range:contain 0% contain var(--copy-end)}
@keyframes niwa-phone-enter{from{transform:translate3d(-50%,var(--phone-from),0)}to{transform:translate3d(-50%,var(--phone-to),0)}}
@keyframes niwa-chat-read{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-54.382022472%,0)}}
@keyframes niwa-copy-exit{from{transform:translate3d(0,0,0);opacity:1;visibility:visible}to{transform:translate3d(0,var(--copy-lift),0);opacity:0;visibility:hidden}}
@media(hover:none),(pointer:coarse){.niwa-phone-shell{box-shadow:inset 0 0 0 1px #fff,3px 1px 0 #a9afb4,5px 2px 0 #dfe2e4}.niwa-motion-toggle{backdrop-filter:none}}