/* New Why Us section in the original landing design. */
.pn-features{padding-block:88px 100px;border-top:1px solid #ffffff10;font-family:"Inter Variable",sans-serif;scroll-margin-top:60px}
.pn-section-heading{margin-bottom:44px}.pn-section-heading>p{font-size:16px;color:#91919d;line-height:1.7;max-width:580px}
.pn-feature-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.pn-feature-list{display:grid}.pn-feature-item{display:flex;gap:22px;padding:24px 0;border-bottom:1px solid #ffffff10}.pn-feature-item:first-child{padding-top:0}.pn-feature-item:last-child{border:0;padding-bottom:0}
.pn-feature-number{font:12px/1.7 "Inter Variable",sans-serif;color:#62626e;padding-top:2px}.pn-feature-item h3{font-size:17px;font-weight:550;line-height:1.5;color:#dedee4;margin:0 0 7px}.pn-feature-item p{font-size:14px;line-height:1.75;color:#9696a2;margin:0;max-width:380px}
.pn-demo{min-width:0;background:radial-gradient(ellipse at 50% 0%,#ffffff06,transparent 70%),#101013;border:1px solid #ffffff0d;border-radius:14px;padding:26px}
.pn-demo-caption{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;color:#bcbcc6;font-size:13px}.pn-demo-dot{width:6px;height:6px;border-radius:50%;background:#9aa99d}
#menucard .mnwrap{padding:0;max-width:none}#menucard .um.mini{height:330px;max-width:none;border-color:#ffffff0a;box-shadow:0 18px 36px #0003}#menucard>p{font-size:13px;line-height:1.7;color:#82828f;margin:22px 0 0;max-width:420px}

#features .pn-index{display:block;font:500 11px/1.4 "Inter Variable",sans-serif;letter-spacing:.16em;color:#71717c;margin-bottom:22px;text-transform:uppercase}
#features .pn-section-heading h2{font-size:clamp(32px,3.7vw,48px);font-weight:550;line-height:1.1;letter-spacing:-.045em;margin:0 0 18px}
@media(max-width:1050px){#features .pn-feature-layout{gap:32px;grid-template-columns:1fr 1.15fr}#features .pn-demo{padding:18px}}
@media(max-width:760px){#features .pn-feature-layout{grid-template-columns:1fr;gap:36px}#features .pn-feature-list{grid-template-columns:1fr 1fr;gap:24px}#features .pn-feature-item{padding:0;border:0;gap:12px}#features{padding-block:60px}}
@media(max-width:560px){#features .pn-feature-list{grid-template-columns:1fr;gap:24px}#features .pn-demo{padding:16px}#menucard .um.mini{height:330px}#menucard .um-hd{padding-inline:10px}#menucard .um-body{padding:10px 8px}#menucard .um-card{padding-inline:8px}#menucard .um-row{gap:7px}#menucard .um-cmb{min-width:84px}#menucard .um-row .lb{font-size:12px}}

/* Demo interactions: no active outlines, restrained motion throughout. */
#umini .um-row .ic,#umini .um-row.on .ic,#umini .um-rb,#umini .um-rb.on{border:0;outline:0;box-shadow:none;background:transparent;transition:color .3s ease,opacity .3s ease}
#umini .um-row .ic{color:#727278}#umini .um-row.on .ic{color:#c9c9ce}
#umini .um-sw,#umini .um-sw.on{border:0;outline:0;box-shadow:none;transition:background-color .3s ease}
#umini .um-sw::after{top:3px;left:3px;box-shadow:none;transition:transform .32s cubic-bezier(.22,1,.36,1),background-color .3s ease}
#umini .um-sw.on::after{transform:translateX(16px)}
#umini button:focus:not(:focus-visible){outline:0;box-shadow:none}
#umini button:focus-visible{outline:0;box-shadow:none;filter:brightness(1.3);text-decoration:underline;text-underline-offset:4px}
#umini .um-sw:focus-visible::after{background:#fff}
#umini .um-row .lb{transition:color .3s ease}
#umini .um-ind{transition:transform .38s cubic-bezier(.22,1,.36,1)}
#umini .um-rb:hover{background:transparent;color:#c9c9ce}
#umini .um-page.fromR{animation:menuEnterRight .38s cubic-bezier(.22,1,.36,1) both}
#umini .um-page.fromL{animation:menuEnterLeft .38s cubic-bezier(.22,1,.36,1) both}
#umini .um-page.outL,#umini .um-page.outR{animation:menuLeave .2s ease both}
#umini .um-page.fromR .um-row,#umini .um-page.fromL .um-row{animation:menuRow .35s ease both;animation-delay:calc(var(--k,0)*25ms)}
#umini .um-btn,#umini .um-cmb,#umini .um-in,#umini .um-pop button{transition:background-color .25s ease,color .25s ease,opacity .25s ease}
#umini .um-btn:hover{background:#29292d;color:#ddd}
#umini .um-btn:active{opacity:.7}
#umini .um-rip{display:none}
#umini .um-in:focus{border-color:transparent;background:#202024}
#umini .um-sl .v.tick{animation:menuValue .24s ease}
#umini .um-rg::-webkit-slider-thumb{box-shadow:none;transition:background-color .25s ease}
#umini .um-rg:hover::-webkit-slider-thumb,#umini .um-rg:focus-visible::-webkit-slider-thumb{box-shadow:none;background:#d0d0d5}
#umini .um-t{border:0;box-shadow:none}
@keyframes menuEnterRight{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:none}}
@keyframes menuEnterLeft{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes menuLeave{to{opacity:0;transform:translateY(-3px)}}
@keyframes menuRow{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes menuValue{from{opacity:.45}to{opacity:1}}


/* Keep rail icons visible: hover must not cancel/restart entrance fades. */
#umini .um-rail .um-rb,#umini .um-rail .um-rb:hover,#umini .um-rail .um-rb.on{animation:none!important;opacity:1;transform:none!important;transition:color .3s ease}
#umini .um-rb svg.mi,#umini .um-row .ic svg.mi{opacity:1;visibility:visible;fill:currentColor;flex-shrink:0}
#umini .um-row .ic{flex-shrink:0;opacity:1;visibility:visible}
