/* One readable type step, with the original white and slate site palette. */
html{font-size:17px}
.site-public-page .current-workflows,.site-public-page .native-preview-section{background:#f9fafb}
body[data-page="homepage"] .hero .btn-group>.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:60px;font-size:1rem;font-weight:600;line-height:1.6;border-width:1px;border-style:solid}
body.site-public-page .hero .btn-demo{background:#e5c58a;border:1px solid #c9a66a;color:#111a2e;box-shadow:0 5px 15px #8b681d1a}
body.site-public-page .hero .btn-demo:hover,body.site-public-page .hero .btn-demo:active{background:#dabb83;border-color:#b7965e;color:#111a2e}

/* One handset design for the hero and every portrait capture. */
.site-phone-frame,body.site-public-page .hero-phone{box-sizing:border-box;position:relative;display:block;max-width:100%;margin:0 auto;padding:14px 6px 6px;border:1px solid #35435c;border-radius:31px;background:linear-gradient(135deg,#1f2937 0%,#0f172a 100%);box-shadow:0 20px 52px #1e2a4426,inset 0 0 0 1px #ffffff1c;overflow:visible;aspect-ratio:auto;transform:none}
.site-phone-frame{width:min(100%,280px)}
body.site-public-page .hero-phone{width:min(100%,300px)}
.site-phone-frame::before,body.site-public-page .hero-phone::before{content:"";box-sizing:border-box;display:block;position:absolute;z-index:2;top:4px;left:50%;transform:translateX(-50%);width:34px;height:6px;border:1px solid #35435c;border-radius:8px;background:#070d18;box-shadow:none}
.site-phone-frame::after,body.site-public-page .hero-phone::after{content:"";position:absolute;top:87px;right:-4px;width:3px;height:100px;border-radius:2px;background:linear-gradient(to bottom,#26344d 0 34px,transparent 34px 54px,#26344d 54px 98px,transparent 98px)}
.site-phone-frame>picture,.site-phone-frame>.hero-motion{display:block;width:100%;margin:0;overflow:hidden;border-radius:25px}
.site-phone-frame img,body.site-public-page .hero-phone img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;padding:0!important;margin:0!important;border:0!important;border-radius:25px!important;box-shadow:none!important;background:transparent!important}
.site-phone-screen{display:block;width:100%;aspect-ratio:9/19.5;overflow:auto;border-radius:25px;scrollbar-width:thin}
.site-screen-link{display:block;color:inherit;text-decoration:none;max-width:100%;border-radius:31px}
.site-screen-link:focus-visible{outline:3px solid #5578b1;outline-offset:7px}
.site-public-page .current-workflow-grid article>a:first-child:has(.site-phone-frame){background:transparent;border:0;overflow:visible}
.site-public-page .shot-frame:has(.site-phone-frame){padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
.site-public-page .native-feature-shot{max-width:280px}
.site-public-page .hero-shot figcaption{text-align:center;margin-top:17px}
.site-phone-frame--thumb{width:82px;padding:8px 3px 3px;border-radius:13px;box-shadow:0 7px 16px #1e2a4426}
.site-phone-frame--thumb img{border-radius:9px!important}
.site-phone-frame--thumb::before{width:12px;height:3px;top:2px}
.site-phone-frame--thumb::after{width:2px;height:44px;right:-2px;top:36px;background:linear-gradient(to bottom,#26344d 0 15px,transparent 15px 23px,#26344d 23px 42px,transparent 42px)}
.blog-card-thumb--native{display:flex;align-items:center;justify-content:center}
@media(min-width:701px){.site-phone-frame--mobile{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.site-phone-frame--mobile::before,.site-phone-frame--mobile::after{display:none}.site-phone-frame--mobile>picture{border-radius:0}.site-phone-frame--mobile img{border-radius:0!important}.site-phone-frame--mobile>.site-phone-screen{aspect-ratio:auto;overflow:visible;border-radius:0}}
@media(max-width:700px){.site-phone-frame--mobile img{aspect-ratio:var(--site-screen-ratio)!important}}
@media(max-width:600px){body.site-public-page .hero-phone{width:min(90%,270px)}.site-public-page .hero-screenshots{grid-template-columns:1fr;max-width:300px;gap:35px}.site-public-page .hero-shot.featured{transform:none}.site-public-page .native-feature-shot{max-width:260px}}
@media(max-width:600px){.site-public-page .dual-role-callout{padding:24px!important;flex-direction:column;align-items:flex-start!important}.site-public-page .dual-role-callout>div:last-child{min-width:0!important;width:100%}}
@media(max-width:360px){.site-public-page .roles-grid{grid-template-columns:1fr}}