/* Sao motion and mobile-native layer, shared by every prototype */
html{-webkit-tap-highlight-color:transparent}body{overscroll-behavior-y:none}
button,a,.option,.fund,.pcard,.method,.launch,.tab,.pt,.amt,.size,.chip,.checklist .it{touch-action:manipulation;user-select:none;-webkit-user-select:none}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideL{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,221,0,.55)}70%{box-shadow:0 0 0 22px rgba(255,221,0,0)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes tick{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
/* dashboards: each block rises in, staggered */
.main>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.main>*:nth-child(2){animation-delay:.05s}.main>*:nth-child(3){animation-delay:.1s}.main>*:nth-child(4){animation-delay:.15s}.main>*:nth-child(5){animation-delay:.2s}.main>*:nth-child(6){animation-delay:.25s}.main>*:nth-child(7){animation-delay:.3s}.main>*:nth-child(n+8){animation-delay:.35s}
.grid>.card,.grid>.launch{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.grid>*:nth-child(2){animation-delay:.06s}.grid>*:nth-child(3){animation-delay:.12s}.grid>*:nth-child(4){animation-delay:.18s}.grid>*:nth-child(5){animation-delay:.24s}.grid>*:nth-child(n+6){animation-delay:.3s}
.table tbody tr{animation:fade .4s both}.table tbody tr:nth-child(2){animation-delay:.04s}.table tbody tr:nth-child(3){animation-delay:.08s}.table tbody tr:nth-child(4){animation-delay:.12s}.table tbody tr:nth-child(5){animation-delay:.16s}.table tbody tr:nth-child(n+6){animation-delay:.2s}
.bars .c i{transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.7,.2,1) both}.bars .c:nth-child(odd) i{animation-delay:.05s}.bars .c:nth-child(3n) i{animation-delay:.1s}
.progress>span{transform-origin:left;animation:growX .9s cubic-bezier(.2,.7,.2,1) both;transition:width .6s}
.sparkline i{transform-origin:bottom;animation:grow .7s both}
.toast.show{animation:toastIn .28s cubic-bezier(.2,.7,.2,1) both}
.modal-bg.open{animation:fade .2s both}.modal-bg.open .modal{animation:pop .4s cubic-bezier(.2,.7,.2,1) both}
.sheet.open{animation:sheetUp .38s cubic-bezier(.2,.7,.2,1) both}
.sidebar .item{transition:background .18s,color .18s,transform .12s}.sidebar .item:active{transform:scale(.98)}
.btn,.option,.fund,.pcard,.method,.launch,.tab,.pt,.amt,.size,.checklist .it,.chip,.cat,.prof,.mth,.keypad button{transition:transform .12s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .18s,border-color .18s,color .18s}
.btn:active,.option:active,.fund:active,.pcard:active,.method:active,.launch:active,.pt:active,.amt:active,.size:active,.checklist .it:active,.cat:active,.prof:active,.mth:active,.keypad button:active{transform:scale(.96)}
.pop{animation:pop .55s cubic-bezier(.2,.7,.2,1) both}.pulse{animation:pulse 1.6s infinite}.rise{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.skeleton{background:linear-gradient(90deg,var(--surface2) 25%,#fff 50%,var(--surface2) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:10px}
.tickmark{width:22px;height:22px}.tickmark path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;animation:tick .5s .2s cubic-bezier(.2,.7,.2,1) both}
/* phone flows: screens slide, content staggers */
.screen.active{animation:slideL .34s cubic-bezier(.2,.7,.2,1) both}.screen.active.back{animation-name:slideR}
.screen.active .body>*{animation:rise .42s cubic-bezier(.2,.7,.2,1) both}
.screen.active .body>*:nth-child(2){animation-delay:.04s}.screen.active .body>*:nth-child(3){animation-delay:.08s}.screen.active .body>*:nth-child(4){animation-delay:.12s}.screen.active .body>*:nth-child(5){animation-delay:.16s}.screen.active .body>*:nth-child(6){animation-delay:.2s}.screen.active .body>*:nth-child(7){animation-delay:.24s}.screen.active .body>*:nth-child(n+8){animation-delay:.28s}
.hrow{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px 4px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}.hrow::-webkit-scrollbar{display:none}.hrow>*{flex:none;scroll-snap-align:start}
.phone{min-height:100dvh}
.phone .hdr{position:sticky;top:0;z-index:6;background:rgba(250,250,248,.86);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}
.phone .hdr.dark{background:rgba(11,11,11,.86);color:#fff}
.back-btn{width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:transparent}
@media(max-width:599px){
  .phone{border:0;border-radius:0;box-shadow:none;margin:0}
  .phone .hdr{padding-top:calc(12px + env(safe-area-inset-top))}
  .phone .bottom{position:fixed;left:0;right:0;bottom:0;padding-bottom:calc(14px + env(safe-area-inset-bottom));z-index:6}
  .screen.active .body{padding-bottom:120px}
  .sheet{position:fixed;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .sheet-bg{position:fixed}
}
.sheet-bg{position:absolute;inset:0;background:rgba(11,11,11,.5);z-index:29;display:none}.sheet-bg.open{display:block;animation:fade .2s both}
@media(hover:none){.btn:hover{box-shadow:none}.launch:hover{box-shadow:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}