#hubsync-main .comparison.has-callouts{grid-template-rows:auto auto;isolation:isolate}
#hubsync-main .comparison.has-callouts .compare-panel{grid-row:1/3}
#hubsync-main .comparison.has-callouts .notes{display:none}
#hubsync-main .comparison .tabs button{color:#000;-webkit-text-fill-color:#000;appearance:none;-webkit-appearance:none}
.annotated-screen{position:relative;isolation:isolate}
.screen-callout{position:absolute;transform:translate(-50%,-50%);z-index:2;width:44px;height:44px;display:grid;place-items:center}
.screen-callout.is-open{z-index:10}
.callout-trigger{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #d9d9d9;border-radius:50%;background:#fff;color:#000;box-shadow:0 4px 8px #00000026;font-size:18px;font-weight:700;line-height:1;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.screen-callout.is-open .callout-trigger{transform:scale(1.05);box-shadow:0 4px 8px #00000026}
.callout-trigger:focus-visible{outline:2px solid #163fce;outline-offset:3px}
.is-fix .callout-trigger{background:#fff;color:#000;font-size:16px}
.callout-tip{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(calc(-50% + var(--tip-shift,0px)));width:max-content;max-width:calc(100vw - 24px);padding:16px 18px;border:1px solid #e7e7e7;border-radius:12px;background:white;color:#171717;box-shadow:0 6px 24px #0000000d;text-align:left;cursor:default;animation:callout-in .18s ease-out}
.callout-tip[hidden]{display:none}
.callout-tip strong,.callout-tip span{display:block;font-family:'DP Clear',sans-serif!important;letter-spacing:0;white-space:normal}
.callout-tip strong{font-size:16px;font-weight:500;line-height:1.3;margin-bottom:6px}
.callout-tip span{color:#626262;font-size:16px;font-weight:400;line-height:1.65}
.tip-below .callout-tip{bottom:auto;top:calc(100% + 5px)}
@keyframes callout-in{from{opacity:0}to{opacity:1}}
@media(max-width:699px){
 #hubsync-main .comparison.has-callouts{grid-template-rows:auto auto;row-gap:20px;min-width:0}
 #hubsync-main .comparison.has-callouts .compare-panel{grid-row:1;display:grid;grid-template-rows:auto;min-width:0}
 #hubsync-main .comparison.has-callouts .screens{--phone-width:min(300px,calc(100vw - 96px));display:flex;justify-content:flex-start;gap:12px;width:calc(100% + 40px);max-width:none;margin:0 -20px;padding:8px 20px 12px;box-sizing:border-box;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 #hubsync-main .comparison.has-callouts .screens::-webkit-scrollbar{display:none}
 #hubsync-main .comparison.has-callouts .screens figure{flex:0 0 var(--phone-width);width:var(--phone-width);scroll-snap-align:center}
 #hubsync-main .comparison.has-callouts .screens figcaption{display:block;font-size:16px}
 #hubsync-main .comparison.has-callouts .tabs{grid-row:2;width:max-content;max-width:calc(100vw - 24px);padding:4px;gap:0;box-sizing:border-box}
 #hubsync-main .comparison.has-callouts .tabs button{flex:none;height:40px;padding:0 12px;font-size:14px;white-space:nowrap}
 .callout-tip.is-mobile-overlay{position:fixed;inset:auto;transform:none;z-index:60;box-sizing:border-box}
 .case-close,.case-close:hover{z-index:80;transform:translateZ(0);transition:background .2s;isolation:isolate}
}
@media(max-width:380px){#hubsync-main .comparison.has-callouts .tabs button{font-size:13px;padding-inline:10px}}
@media(max-width:340px){#hubsync-main .comparison.has-callouts .tabs button{padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.callout-trigger{transition:none}.callout-tip{animation:none}}
.callout-trigger{position:relative}
.callout-trigger::after{content:"";position:absolute;inset:-2px}
#hubsync-main .comparison .screens figure:has(.is-open){position:relative;z-index:5}

@media(min-width:700px){
 .tip-side .callout-tip{top:50%;bottom:auto;transform:translateY(-50%)}
 .tip-side[data-direction="left"] .callout-tip{left:auto;right:calc(100% + 6px)}
 .tip-side[data-direction="right"] .callout-tip{left:calc(100% + 6px);right:auto}
}

#hubsync-main:has(.has-callouts),#hubsync-main .source-section:has(.has-callouts){overflow:visible}


#hubsync-main .comparison.has-callouts .callout-trigger img{width:20px;height:20px;aspect-ratio:1;object-fit:contain;display:block;pointer-events:none}
.callout-intro-pending .callout-trigger{opacity:0;transform:scale(.55)}
.callout-intro-playing .callout-trigger{animation:callout-pop .42s cubic-bezier(.2,.75,.3,1) var(--pop-delay,0ms) both}
@keyframes callout-pop{0%{opacity:0;transform:scale(.55)}65%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.callout-intro-pending .callout-trigger{opacity:1;transform:none}.callout-intro-playing .callout-trigger{animation:none}}

/* Drift the marker independently of its entrance scale and anchored position. */
.screen-callout:not(.callout-intro-pending):not(.callout-intro-playing){animation:callout-float var(--float-duration,5s) ease-in-out infinite}
.screen-callout.is-open,.screen-callout:focus-within{animation-play-state:paused!important}
@media(hover:hover){.screen-callout:hover{animation-play-state:paused!important}}
.callout-intro-pending,.callout-intro-playing{pointer-events:none}
@keyframes callout-float{0%,100%{translate:0 0}35%{translate:1px -2.5px}70%{translate:-1px -1px}}
@media(prefers-reduced-motion:reduce){.screen-callout{animation:none!important;translate:none}.callout-intro-pending,.callout-intro-playing{pointer-events:auto}}

.callout-tip span{white-space:pre-line;text-wrap:wrap}


#hubsync-main .comparison.has-callouts{padding-top:32px}
#hubsync-main .comparison.has-callouts .screens figure{display:flex;flex-direction:column}
#hubsync-main .comparison.has-callouts .screens figcaption{order:-1;margin:0 0 16px}