/* The app stays within the viewport, including small phones and the site iframe. */
:root{color-scheme:light}*{box-sizing:border-box}html,body{max-width:100%}.phone{min-width:0}main{overscroll-behavior-y:contain;scrollbar-color:#b7cfc0 transparent}input,textarea,select{font-size:16px}:where(button,a,input,textarea,select,summary):focus-visible{outline:2px solid #528e77;outline-offset:3px}main h2:focus{outline:none}.textbutton,.back{min-height:44px}.avatar.small{min-width:44px;min-height:44px}.row{flex-wrap:wrap}.pill{max-width:100%;line-height:1.5}.tag-art img{object-fit:contain;width:170px;height:170px;transform:rotate(-8deg);filter:drop-shadow(0 12px 12px #152d3020)}.contact-row{transition:background .18s}.phone>nav button{border-radius:12px;min-height:50px}.phone>nav button[aria-current=page]{background:#edf5ef}#toast{pointer-events:none;bottom:max(24px,env(safe-area-inset-bottom))}
@media(max-width:650px){.phone{display:flex;flex-direction:column;height:100dvh;min-height:0}.phone>header{flex:0 0 auto;padding-top:max(18px,env(safe-area-inset-top))}.phone>main{flex:1 1 auto;height:auto;min-height:0}.phone>nav,.phone>.demo{flex:0 0 auto}.phone>.demo{padding-bottom:max(9px,env(safe-area-inset-bottom))}}
@media(max-width:360px){.phone>header,.phone>main{padding-left:18px;padding-right:18px}.connection-filters{grid-template-columns:minmax(0,1fr)}.activation-progress li{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Preserve the designed light palette, including native form controls. */
:root { color-scheme: only light; }
html { background-color: #f7f8f4; }

/* Full-screen app presentation, on phones and in the desktop preview. */
html,body{width:100%;height:100%;overflow:hidden}
body{display:block;padding:0;margin:0;background:var(--cream)}
.presentation{display:none}
.phone{display:flex;flex-direction:column;width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none}
.phone>header{flex:0 0 auto;padding: max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 18px max(24px,env(safe-area-inset-left))}
.phone>main{flex:1 1 auto;height:auto;min-height:0;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.phone>nav{flex:0 0 auto;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
.phone>.demo{flex:0 0 auto;padding-bottom:max(9px,env(safe-area-inset-bottom))}
#toast{bottom:calc(110px + env(safe-area-inset-bottom))}
@media(min-width:768px){.phone>main{padding-left:max(32px,calc((100% - 760px)/2));padding-right:max(32px,calc((100% - 760px)/2))}.phone>nav{padding-left:max(16px,calc((100% - 760px)/2));padding-right:max(16px,calc((100% - 760px)/2))}}
/* Smooth navigation feedback for the standalone demo. */
.phone>nav button{transition:background-color .2s ease,color .2s ease}
@media(prefers-reduced-motion:reduce){.phone>nav button{transition:none}}

/* Compact chrome only inside the mobile presentation. */
@media(max-width:650px){
 body.embedded-demo{padding:0;overflow:hidden}
 .embedded-demo .phone{height:100vh;height:100dvh;border:0;border-radius:0;width:100%;max-width:none}
 .embedded-demo .phone>header{padding:6px 16px;min-height:54px}
 .embedded-demo .phone>main{padding:12px 18px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
 .embedded-demo .phone>nav{padding:5px 8px 3px}
 .embedded-demo .phone>.demo{padding:3px 8px;font-size:8px;line-height:1.4}
 .embedded-demo .hero{padding:16px;margin:14px 0;min-height:0}
 .embedded-demo .hero h3{font-size:21px;line-height:1.25;margin:0 0 8px}
 .embedded-demo .hero p{font-size:14px;line-height:1.5;margin:0 0 8px}
 .embedded-demo .hero button{margin-top:5px;padding:10px 14px;min-height:44px}
 .embedded-demo h2{font-size:27px;margin:6px 0 12px}
 .embedded-demo .contact-row{padding:11px 0}
 .embedded-demo .phone>main>.eyebrow{margin-bottom:10px}
}

@media(max-width:650px){.embedded-demo .phone>main[data-page=qr-perfil]{padding:30px 24px 38px}}