/* Integration only. The approved twin, food and offer components retain their styles. */
:root{--header-clearance:82px}
html{scroll-padding-top:var(--header-clearance)}
.site-header{position:fixed;z-index:50;padding:12px 24px;pointer-events:none}
.site-header>*{pointer-events:auto}
.header-actions{display:flex;align-items:center;gap:10px}
.header-price{font-size:13px;padding:14px 18px;border:1px solid #ffffffb8;border-radius:28px;background:#f5f7eed9;backdrop-filter:blur(20px);white-space:nowrap}
.site-header .nav-island{background:#f8f7f1d9}
.site-header .header-cta{transition:background .2s,box-shadow .2s,transform .2s}
.site-header .header-cta:hover{background:#386758;box-shadow:0 5px 20px #234c4224;transform:translateY(-1px)}
#molecular-experience{--world-viewport:calc(100svh - var(--header-clearance));font-family:Arial,Helvetica,sans-serif;color:#173f36;background:#f1f2eb;position:relative}
#molecular-experience .world-sticky{top:var(--header-clearance);height:var(--world-viewport);min-height:0}
#molecular-experience .world{scroll-margin-top:0}
#molecular-experience .mobile-intro{scroll-margin-top:0}
.world-connected{background:#f1f2eb;padding:20px 0 42px}
.world-connected .premium-connected{margin-top:0}
@media(max-width:900px){
 :root{--header-clearance:68px}
 .site-header{padding:8px 12px;gap:8px}
 .site-header .nav-island{padding:10px 12px;min-height:48px}
 .header-actions{gap:7px}
 .header-price{font-size:11px;padding:12px}
 .site-header .header-cta{min-height:48px;font-size:11px;padding:10px 13px;gap:8px}
 #molecular-experience .phone-wrap{min-height:0;height:clamp(340px,calc(var(--world-viewport) - 285px),535px)}
 #molecular-experience .world-footer{bottom:0}
}
@media(max-width:599px){
 .site-header .brand{font-size:0;gap:0}
 .site-header .brand img{width:22px;height:29px}
 .site-header .nav-island{padding:8px 12px}
 .header-actions{flex:1;justify-content:flex-end}
 .header-price{padding:11px 9px;font-size:10px}
 .site-header .header-cta{font-size:11px;padding:10px 11px}
 #molecular-experience .phone-wrap{top:146px;height:calc(var(--world-viewport) - 290px);max-height:535px;min-height:335px}
}
@media(max-width:599px) and (max-height:740px){
 #molecular-experience .phone-wrap{top:123px;height:calc(var(--world-viewport) - 242px);min-height:0}
 #molecular-experience .incoming-life{top:112px}
 #molecular-experience .incoming-diary{max-height:245px}
}
@media(prefers-reduced-motion:reduce){.site-header .header-cta{transition:none}}
/* Reset the legacy app-preview screen geometry inside this independent scene. */
#molecular-experience .phone-screen{left:0;top:0;width:100%;padding:0;gap:0;display:block;color:inherit}
@media(max-width:599px) and (max-height:740px){
 #molecular-experience .phone-wrap{aspect-ratio:.63}
 #molecular-experience .twin-portrait{width:150%;left:-25%;top:8%}
 #molecular-experience .user-bubble,#molecular-experience .twin-bubble,#molecular-experience .twin-bubble p{font-size:10.5px;line-height:1.35}
}
@media(max-width:599px) and (max-height:740px){
 #molecular-experience .twin-portrait{top:0}
}