.hero-demo.has-mobile-hero{--mh-header-h: 60px;--mh-art-h: 270px;--mh-caption-h: 30px;--mh-ratio: .687;--mh-indigo: #022662;--mh-orange: #f68b1f;--mh-page: #f5f7fa;--mh-well: #0d1f3c;--mh-muted: #58616f;--mh-hairline: #e0e0e0;--mh-tint: #fff1e6;display:block;height:auto;min-height:0;margin-top:0;padding-top:0;overflow:visible}.hero-demo.has-mobile-hero .hero-demo__content{display:none}.mobile-hero__pinned{position:sticky;top:var(--mh-header-h, 60px);z-index:10;background:var(--mh-indigo);box-shadow:0 6px 14px #00000040}.mobile-hero__pinned-inner{display:flex;flex-direction:column;gap:12px;align-items:center;box-sizing:border-box;width:100%;padding:14px 16px 12px;transition:gap .25s ease,padding .25s ease}.mobile-hero__text{flex:0 0 auto;min-width:0;text-align:center}.mobile-hero__text .info-panel__title{margin:0 0 6px;font-family:var(--font-heading, "Montserrat", sans-serif);font-size:22px;font-weight:700;font-style:normal;line-height:1.15;color:#fff;transition:font-size .25s ease}.mobile-hero__text .info-panel__divider{width:60px;height:2px;margin:0 auto 8px;background:var(--mh-orange)}.mobile-hero__text .info-panel__subtitle,.mobile-hero__text .info-panel__detail{margin:0 0 2px;font-family:var(--font-body, "Poppins", sans-serif);font-size:12px;font-weight:400;line-height:1.45;color:#ffffffd9}.mobile-hero__text .info-panel__subtitle{letter-spacing:normal;text-transform:none}.mobile-hero__text .info-panel__detail a{color:var(--mh-orange)}.mobile-hero__preview{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:flex-start;box-sizing:border-box;max-width:100%;padding-bottom:var(--mh-caption-h)}.mobile-hero__frame{position:relative;flex:0 0 auto;width:min(calc(var(--mh-art-h) * var(--mh-ratio)),calc(100vw - 48px));height:min(var(--mh-art-h),calc((100vw - 48px) / var(--mh-ratio)));border-radius:4px;transition:width .25s ease,height .25s ease}.mobile-hero__caption{position:absolute;bottom:0;left:50%;display:flex;justify-content:center;align-items:center;width:min(88vw,340px);height:var(--mh-caption-h);overflow:hidden;font-family:var(--font-body, "Poppins", sans-serif);font-size:11px;font-weight:500;line-height:1.3;text-align:center;color:#fffc;transform:translate(-50%)}.mobile-hero__frame .demo-wrapper__layers,.mobile-hero__frame .layer-animation,.mobile-hero__frame .layer-animation__container{position:absolute;display:block;width:100%;min-width:0;max-width:none;height:100%;min-height:0;max-height:none;margin:0;padding:0;transform:none;perspective:none;inset:0}.mobile-hero__frame .layer-animation{overflow:hidden;border-radius:4px}.mobile-hero__frame .layer{position:absolute;width:auto;min-width:0;max-width:none;height:auto;margin:0;border-radius:4px;box-shadow:none;opacity:1;transform:none;transition:opacity .28s ease;will-change:opacity;inset:0}.mobile-hero__frame .layer.is-layer-hidden{opacity:0}.mobile-hero__frame .layer img,.mobile-hero__frame .layer canvas{width:100%;height:100%;object-fit:cover}.mobile-hero__frame .layer__label{display:none}.mobile-hero__pinned .hero-demo__controls{flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 16px 12px}.mobile-hero__pinned .controls-strip__toggle{gap:8px;padding:0;background:none;border-radius:0}.mobile-hero__pinned .controls-strip__toggle-label{padding:7px 14px;font-family:var(--font-body, "Poppins", sans-serif);font-size:12px;font-weight:600;color:#ffffffe6;background:#ffffff14;border:1px solid rgb(255,255,255,.3);border-radius:4px;transition:background-color .2s ease,color .2s ease}.mobile-hero__pinned .controls-strip__toggle-input:checked+.controls-strip__toggle-label,.mobile-hero__pinned .controls-strip__toggle-input:checked+.controls-strip__toggle-label:hover{color:var(--mh-indigo);background:var(--mh-orange);border-color:var(--mh-orange);box-shadow:none}.mobile-hero__pinned .controls-strip__grid{gap:8px;max-width:100%;overflow-x:auto}.mobile-hero__pinned .controls-strip__grid-item img{width:52px}.hero-demo.has-mobile-hero.is-shrunk{--mh-art-h: 120px}.is-shrunk .mobile-hero__pinned-inner{gap:10px;padding:8px 14px}.is-shrunk .mobile-hero__text .info-panel__title{margin:0;font-size:16px}.is-shrunk .mobile-hero__text .info-panel__divider,.is-shrunk .mobile-hero__text .info-panel__detail,.is-shrunk .mobile-hero__caption{display:none}.is-shrunk .mobile-hero__preview{padding-bottom:0}.is-shrunk .mobile-hero__pinned .hero-demo__controls{padding-bottom:8px}.mobile-hero__list{box-sizing:border-box;padding:16px 14px 40px;background:var(--mh-page)}.mobile-hero__list-head{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-bottom:4px}.mobile-hero__eyebrow{font-family:var(--font-heading, "Montserrat", sans-serif);font-size:clamp(10px,2.82vw,11px);font-weight:700;line-height:1;letter-spacing:.8px;text-transform:uppercase;color:var(--mh-muted)}.mobile-hero__modes{display:flex;flex:0 0 auto;gap:0;align-items:center}.mobile-hero__mode{display:flex;flex:0 0 auto;align-items:center;min-height:44px;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.mobile-hero__mode-face{display:block;padding:6px 11px;font-family:var(--font-body, "Poppins", sans-serif);font-size:11px;font-weight:600;line-height:1;white-space:nowrap;color:var(--mh-indigo);background:#fff;border:1px solid var(--mh-indigo)}.mobile-hero__mode:first-child .mobile-hero__mode-face{border-radius:4px 0 0 4px;border-right-width:0}.mobile-hero__mode:last-child .mobile-hero__mode-face{border-radius:0 4px 4px 0}.mobile-hero__mode.is-selected .mobile-hero__mode-face{color:#fff;background:var(--mh-indigo)}.mobile-hero__cards{display:flex;flex-direction:column;gap:8px}.mobile-hero__card{display:flex;gap:12px;align-items:center;box-sizing:border-box;width:100%;min-height:64px;padding:10px;text-align:left;background:#fff;border:1px solid var(--mh-hairline);border-radius:6px;box-shadow:0 2px 10px #0000000d;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent}.mobile-hero__card.is-active{background:var(--mh-tint);border-color:var(--mh-orange)}.mobile-hero__badge{display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:22px;height:22px;font-family:var(--font-heading, "Montserrat", sans-serif);font-size:11px;font-weight:700;line-height:1;color:#fff;background:var(--mh-indigo);border-radius:50%}.mobile-hero__card.is-active .mobile-hero__badge{color:var(--mh-indigo);background:var(--mh-orange)}.mobile-hero__thumb{position:relative;display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:42px;height:44px;overflow:hidden;background:var(--mh-well);border-radius:4px}.mobile-hero__thumb-stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;min-width:0;height:100%;min-height:0;padding:0;overflow:visible}.mobile-hero__thumb-stage .layer{position:relative;display:block;flex:0 0 auto;width:auto;min-width:0;max-width:100%;height:100%;margin:0;border-radius:2px;box-shadow:none;opacity:1;transform:none;transition:none;inset:auto}.mobile-hero__thumb-stage .layer img{width:100%;height:100%;border-radius:2px;object-fit:cover}.mobile-hero__card-text{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}.mobile-hero__card-label{font-family:var(--font-body, "Poppins", sans-serif);font-size:14px;font-weight:600;line-height:1.25;color:var(--mh-indigo)}.mobile-hero__card-kind{font-family:var(--font-body, "Poppins", sans-serif);font-size:12px;font-weight:400;line-height:1.3;color:var(--mh-muted)}.mobile-hero__pill{flex:0 0 auto;margin-left:auto;font-family:var(--font-body, "Poppins", sans-serif);font-size:10px;font-weight:600;line-height:1;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;color:var(--mh-indigo);border-radius:999px}.mobile-hero__card.is-active .mobile-hero__pill{padding:4px 9px;background:var(--mh-orange)}.mobile-hero__hint{margin:14px 0 0;font-family:var(--font-body, "Poppins", sans-serif);font-size:12px;font-weight:400;line-height:1.5;color:var(--mh-muted)}.mobile-hero__list .demo-wrapper__info{display:block;flex:0 0 auto;width:100%;margin-top:16px;padding:14px 0 0;text-align:left;border-top:1px solid var(--mh-hairline);opacity:1}.mobile-hero__list .demo-wrapper__info:empty{margin:0;padding:0;border-top:none}.mobile-hero__list .info-panel__sample-number{display:inline-block;margin:0 0 8px}.mobile-hero__list .info-panel__description-wrap{margin:0;padding:0;border-top:none}.mobile-hero__list .info-panel__detail,.mobile-hero__list .info-panel__detail strong,.mobile-hero__list .layer-list,.mobile-hero__list .layer-list__item{color:#363636}.mobile-hero__list .info-panel__detail{margin:0 0 6px;font-family:var(--font-body, "Poppins", sans-serif);font-size:13px;line-height:1.5}.mobile-hero__list .info-panel__description,.mobile-hero__list .info-panel__credit{max-width:none;margin:0;padding:0;font-family:var(--font-body, "Poppins", sans-serif);font-size:13px;line-height:1.6;color:#363636;border-top:none}.mobile-hero__list .info-panel__credit{margin-top:10px;font-size:12px;color:var(--mh-muted)}.mobile-hero__list .info-panel__description-toggle{color:var(--mh-indigo);background:#fff;border-color:#c9d4e4}.hero-demo.has-mobile-hero.is-landscape{--mh-art-h: 220px}.is-landscape .mobile-hero{display:flex;align-items:stretch;height:calc(100dvh - var(--mh-header-h, 60px))}.is-landscape .mobile-hero__pinned{position:static;display:flex;flex:0 0 46%;flex-direction:column;justify-content:center;box-sizing:border-box;height:100%;box-shadow:4px 0 14px #00000040}.is-landscape .mobile-hero__pinned-inner{flex-direction:row;gap:16px;align-items:center;padding:10px 14px}.is-landscape .mobile-hero__text{flex:1 1 0;text-align:left}.is-landscape .mobile-hero__text .info-panel__divider{margin:0 0 8px}.is-landscape .mobile-hero__caption{right:0;left:auto;justify-content:flex-end;width:min(38vw,240px);text-align:right;transform:none}.is-landscape .mobile-hero__pinned .hero-demo__controls{padding:0 14px 12px}.is-landscape .mobile-hero__list{flex:1 1 0;min-width:0;height:100%;padding:14px 14px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(prefers-reduced-motion:reduce){.hero-demo.has-mobile-hero .mobile-hero__pinned-inner,.hero-demo.has-mobile-hero .mobile-hero__frame,.hero-demo.has-mobile-hero .mobile-hero__text .info-panel__title{transition:none}.hero-demo.has-mobile-hero .layer,.hero-demo.has-mobile-hero .layer:before,.hero-demo.has-mobile-hero .layer:after,.hero-demo.has-mobile-hero .layer img{animation:none}}
/*# sourceMappingURL=mobile-hero.css.map */