#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:58px;height:58px;display:grid;place-items:center;--callout-fill:rgb(255 156 0 / .55)}
.screen-callout.is-open{z-index:10}
.callout-trigger{display:grid;place-items:center;width:58px;height:58px;padding:0;border:0;border-radius:50%;background:transparent;color:#553400;box-shadow:none;isolation:isolate;font-size:18px;font-weight:700;line-height:1;cursor:pointer;transition:none}
.callout-trigger:focus-visible{outline:2px solid #163fce;outline-offset:3px}
.screen-callout.is-fix{--callout-fill:rgb(187 255 0 / .55)}
.is-fix .callout-trigger{color:#425900;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 span{display:block;font-family:'DP Clear',sans-serif!important;letter-spacing:0;white-space:normal;--type-color:#000;color:#000;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 .callout-icon{width:calc(100% * 20 / 58);height:calc(100% * 20 / 58);aspect-ratio:1;display:block;pointer-events:none;position:relative;z-index:1}
/* Keep the backdrop and color layers aligned beneath a sharp vector mark. */
/* A filter on the parent would prevent backdrop blur from sampling the phone. */
.callout-halo{position:absolute;top:50%;left:50%;width:calc(100% * 48 / 58);height:calc(100% * 48 / 58);transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none}
.callout-halo::before{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:radial-gradient(circle,#000 50%,transparent 72%);mask-image:radial-gradient(circle,#000 50%,transparent 72%)}
.callout-halo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--callout-fill);filter:blur(8px)}
#hubsync-main .comparison.has-callouts .screen-callout:not(.is-fix) .callout-trigger .callout-icon{width:calc(100% * 28 / 58);height:calc(100% * 28 / 58)}
.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}}

.callout-intro-pending,.callout-intro-playing{pointer-events:none}
@media(prefers-reduced-motion:reduce){.callout-intro-pending,.callout-intro-playing{pointer-events:auto}}

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


#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}

/* Inactive scenarios keep their images out of layout and lazy-load detection. */
#hubsync-main .comparison.has-callouts .compare-panel[hidden]{display:none}