/* Authored HubSync layout is in hubsync-source.css. Only hosting, controls and responsive flow are adapted here. */
@font-face{font-family:Caveat;src:url('/assets/hubsync/caveat-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
html,body{margin:0;padding:0}body{background:#fff}.case-close{position:fixed;right:20px;top:16px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#e7e7e7dd;backdrop-filter:blur(12px);color:#000;z-index:20;transition:background .2s,transform .3s}.case-close:hover{background:#ccc;transform:rotate(90deg)}
#hubsync-main{width:100%;max-width:1440px;margin:auto}.ssr-variant{display:contents}.source-columns>*{min-width:0}.source-sketch{font-family:Caveat,cursive!important}.source-hero h2{opacity:1!important;filter:none!important;transform:none!important}.source-hero h2[data-text-style]{color:#000!important}.source-results [data-text-style]{color:white!important}.source-results-core{max-width:100%}.source-footer a{touch-action:manipulation}
.comparison{background:#f3f3f3;border-radius:24px;position:relative;width:100%;height:627px;overflow:hidden}.compare-panel{display:grid;grid-template-columns:minmax(0,1fr) 608px;height:627px}.compare-panel[hidden]{display:none}.notes{padding:56px 0 136px 72px;min-width:0}.notes h3{font-family:Caveat,cursive!important;font-size:34px;font-weight:500;letter-spacing:.02em;line-height:1.75;margin:0 0 2px;transform:rotate(-2deg)}.notes p{font-size:20px;line-height:1.75;letter-spacing:.02em;color:#000;margin:0;max-width:440px}.screens{display:flex;align-items:center;justify-content:center;gap:24px;padding:40px 40px 24px}.screens figure{margin:0;width:264px;flex:none}.screens img{display:block;width:264px;height:510px;object-fit:fill;border-radius:32px}.screens figcaption{text-align:center;font-size:16px;font-weight:500;line-height:1.5;margin-top:16px}.tabs{position:absolute;left:72px;bottom:72px;display:flex;padding:4px;gap:0;border-radius:100px;background:#e0e0e0;z-index:2}.tabs button{border:0;background:none;border-radius:100px;padding:0 24px;height:40px;font-size:16px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .3s,box-shadow .3s}.tabs button[aria-selected=true]{background:white;box-shadow:0 1px 2px #0004}
/* Scale the source's composed artwork as one canvas, preserving its internal geometry. */
.source-art-frame{width:100%;position:relative;overflow:visible}.source-art-frame>.source-qa{width:1240px!important;position:absolute!important;left:0;top:0;transform:scale(var(--source-art-scale,1));transform-origin:top left}.source-art-frame{aspect-ratio:1240/606}.source-qa .framer-8lo6e2-container{cursor:default}.source-qa .framer-8lo6e2-container img{transition:opacity .25s}
@media(max-width:1439px){#hubsync-main .source-hero{padding:100px 48px}#hubsync-main .source-cover{padding:0 48px}#hubsync-main .source-section{padding:80px 48px;gap:64px}#hubsync-main .source-results{padding:80px 24px}#hubsync-main .source-results-core{width:100%}#hubsync-main .framer-36scnl,#hubsync-main .framer-1sp152u,#hubsync-main .framer-np9yf1{width:27%;height:auto;aspect-ratio:332/673}#hubsync-main .framer-1ad3sut{padding:64px 0}#hubsync-main .framer-1jhpat3{padding:48px 48px 0}#hubsync-main .framer-1r1vg2j{padding:0 48px 48px}#hubsync-main .source-footer{padding:80px 48px}.comparison{height:auto;min-height:627px}.compare-panel{grid-template-columns:minmax(0,1fr) 52%;height:627px}.notes{padding:40px 24px 120px 40px}.tabs{left:40px;bottom:40px}.tabs button{padding:0 16px}.screens{padding:32px 24px;gap:16px}.screens figure{width:calc(50% - 8px)}.screens img{width:100%;height:auto;aspect-ratio:264/510}.source-results [data-text-style=heading-1]{--type-size:64px}}
@media(max-width:1099px){#hubsync-main .source-columns{gap:32px}#hubsync-main .source-section h2{--type-size:44px}.compare-panel{grid-template-columns:1fr;height:auto;gap:0}.notes{padding:40px 40px 100px;min-height:270px}.tabs{left:40px;top:210px;bottom:auto}.screens{max-width:608px;width:100%;margin:auto;padding:32px 40px}.source-results [data-text-style=heading-1]{--type-size:52px}#hubsync-main .framer-poee3o{flex-direction:column;gap:64px}#hubsync-main .framer-arcs2o,#hubsync-main .framer-11r6x7h{flex:none;width:100%}}
@media(max-width:699px){#hubsync-main .source-hero{padding:96px 20px 48px;gap:28px}#hubsync-main .source-hero [data-text-style=heading-2]{--type-size:34px;--type-leading:1.2}#hubsync-main .source-hero h2{--framer-text-alignment:left}#hubsync-main .source-hero h2 br{display:none}#hubsync-main .source-hero p{--framer-text-alignment:left}#hubsync-main .source-hero [data-text-style=body-1]{--type-size:18px;--type-leading:1.6;--type-tracking:.005em}#hubsync-main .framer-1mpagxc{justify-content:flex-start;gap:8px}#hubsync-main .framer-fX5g9.framer-k6vrgg{padding:12px 14px}#hubsync-main .source-cover{padding:0 20px}#hubsync-main .source-section{padding:60px 20px;gap:32px}#hubsync-main .source-columns{flex-direction:column;gap:24px}#hubsync-main .source-columns>div{flex:none;width:100%}#hubsync-main .source-section h2{--type-size:32px;--type-leading:1.2}#hubsync-main [data-text-style=body-2],#hubsync-main [data-text-style=body-1]{--type-size:18px;--type-leading:1.6;--type-tracking:.005em}#hubsync-main .source-section>[data-border]{padding-bottom:24px}#hubsync-main .source-results{padding:60px 0}#hubsync-main .source-results-core{border-radius:0;gap:40px}#hubsync-main .framer-1jhpat3{padding:40px 20px 0}#hubsync-main .source-results [data-text-style=heading-1]{--type-size:36px;--type-leading:1.18}#hubsync-main .framer-klrirq{padding:0 8px}#hubsync-main .framer-1ad3sut{padding:32px 0;border-radius:16px}#hubsync-main .framer-1r1vg2j{padding:0 20px 40px}#hubsync-main .framer-poee3o{gap:48px}#hubsync-main .source-results h2{--type-size:32px}#hubsync-main .source-footer{padding:40px 20px 64px}#hubsync-main .framer-ti3y3d{flex-direction:column;gap:32px}#hubsync-main .framer-fnmf0c-container,#hubsync-main .framer-5qn2w-container{flex:none;width:100%}#hubsync-main .framer-1oa02n2{gap:12px;flex-wrap:wrap}#hubsync-main .framer-1oa02n2 p{font-size:24px!important}.case-close{right:16px;top:12px;width:44px;height:44px}.comparison{min-height:0;border-radius:18px}.notes{padding:24px 20px 88px;min-height:300px}.notes p{font-size:18px;line-height:1.6;letter-spacing:.005em}.tabs{left:12px;right:12px;top:236px;justify-content:center}.tabs button{flex:1;padding:0 7px;font-size:13px;white-space:normal;line-height:1.15}.screens{padding:0 16px 24px;gap:12px}.screens figure{width:calc(50% - 6px)}.screens img{border-radius:16px}.screens figcaption{font-size:14px}.source-art-frame{margin:0 -10px;width:calc(100% + 20px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.case-close,.tabs button{transition:none}}
.source-challenge-frame{width:100%;aspect-ratio:1240/558;position:relative}.source-challenge-frame>.source-challenge{width:1240px!important;position:absolute!important;left:0;top:0;transform:scale(var(--source-art-scale,1));transform-origin:top left}.source-hero h1{opacity:1!important;filter:none!important;transform:none!important}.source-hero h1[data-text-style]{color:#000!important}
@media(max-width:699px){#hubsync-main .source-hero h1{--framer-text-alignment:left}#hubsync-main .source-hero h1 br{display:none}}
/* HubSync's published DP Clear presets, scoped to this case only. */
#hubsync-main [data-text-style=heading-2]{--type-tracking:-.01em}#hubsync-main [data-text-style=body-1]{--type-leading:1.55;--type-tracking:.01em}#hubsync-main [data-text-style=heading-1]{--type-weight:500}#hubsync-main .framer-1mpagxc p,#hubsync-main .framer-fX5g9 p,#hubsync-main .framer-1oa02n2 p{font-weight:500}
@media(min-width:1440px){.source-art-frame{height:606px;aspect-ratio:auto}.source-art-frame>.source-qa{width:100%!important;transform:none}.source-results-core{max-width:none}}
@media(max-width:1439px){#hubsync-main .framer-a7p7sn,#hubsync-main .framer-rsgqo6{max-width:100%}#hubsync-main .source-qa{max-width:none}}
@media(max-width:699px){#hubsync-main .framer-a7p7sn,#hubsync-main .framer-rsgqo6{width:100%}#hubsync-main .framer-lsu18w{height:auto;aspect-ratio:1.663}.source-results-core{max-width:100%}#hubsync-main .source-results [data-text-style=heading-1]{--type-weight:500}}
@media(max-width:699px){
 #hubsync-main .framer-rsgqo6{flex:none;width:100%}#hubsync-main .source-hero h1,#hubsync-main .source-hero p{text-align:left!important}
 #hubsync-main .source-art-frame{margin:0;width:100%;height:auto;aspect-ratio:auto}
 #hubsync-main .source-art-frame>.source-qa{position:relative!important;width:100%!important;height:auto;transform:none;display:flex;flex-direction:column}
 #hubsync-main .framer-8lo6e2-container{position:relative;top:auto;left:auto;width:100%;height:auto;aspect-ratio:1292/925}
 #hubsync-main .framer-rx8gxe{position:relative;top:auto;left:auto;width:60%;margin:28px 0 0 7%;height:auto}
 #hubsync-main .framer-o48hln{left:70%;top:48%}#hubsync-main .framer-1svmq3p{left:70%;top:59%}#hubsync-main .framer-1ldqx1g{left:70%;bottom:5%}
 #hubsync-main .source-qa .source-sketch{font-size:18px;line-height:1.15}
 #hubsync-main .framer-2gtifw,#hubsync-main .framer-1wtne1n,#hubsync-main .framer-1udsg40,#hubsync-main .framer-1gqk3ji,#hubsync-main .framer-2v4e42{display:none}
}
@media(max-width:699px){#hubsync-main .source-columns>.ssr-variant>div{width:100%;flex:none;height:auto}}
@media(min-width:1440px){.compare-panel{grid-template-columns:minmax(0,1fr) 632px}.notes{padding-right:72px}.notes p{max-width:none}}
/* The imported root used display:contents inline, discarding its centering box. */
body[data-page=hubsync] #hubsync-main{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1440px;margin-inline:auto;min-height:100vh;box-sizing:border-box}
#hubsync-main .source-sketch,#hubsync-main .source-sketch *,#hubsync-main .notes h3{font-family:Caveat,cursive!important}
#hubsync-main .source-sketch{text-align:center;white-space:normal}#hubsync-main .source-sketch span{display:inline!important}
/* Artwork uses its own local boxes, so notes and marks move with the phone. */
#hubsync-main .source-art-frame{width:100%;height:auto;aspect-ratio:auto;margin:0}
#hubsync-main .source-art-frame>.source-qa{position:relative!important;inset:auto;width:100%!important;height:auto;transform:none;display:grid;grid-template-columns:minmax(0,620fr) 80px minmax(0,522fr);gap:9px;align-items:center;overflow:visible}
#hubsync-main .framer-8lo6e2-container{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1292/925}
#hubsync-main .qa-phone-stage{position:relative;width:100%;aspect-ratio:522/606;min-width:0;justify-self:center}
#hubsync-main .qa-phone-stage .framer-rx8gxe{position:absolute;left:0;top:1%;width:62.84%;height:auto;margin:0;aspect-ratio:.562637}
#hubsync-main .qa-phone-stage .framer-o48hln,#hubsync-main .qa-phone-stage .framer-1svmq3p,#hubsync-main .qa-phone-stage .framer-1ldqx1g{position:absolute;left:68%;width:30%;height:auto;bottom:auto;transform:translateY(-50%)}
#hubsync-main .qa-phone-stage .framer-o48hln{top:16%}#hubsync-main .qa-phone-stage .framer-1svmq3p{top:32.5%}#hubsync-main .qa-phone-stage .framer-1ldqx1g{top:90%}
#hubsync-main .qa-phone-stage .source-sketch{font-size:clamp(18px,1.75vw,25px);line-height:1.2;white-space:normal}
#hubsync-main .qa-phone-stage .framer-2gtifw,#hubsync-main .qa-phone-stage .framer-1wtne1n,#hubsync-main .qa-phone-stage .framer-1udsg40{display:block;position:absolute;left:63.7%;bottom:auto;transform:translateY(-50%)}
#hubsync-main .qa-phone-stage .framer-2gtifw{width:2.5%;top:16%}#hubsync-main .qa-phone-stage .framer-1wtne1n{width:1.55%;top:32.5%}#hubsync-main .qa-phone-stage .framer-1udsg40{width:1.9%;top:90%}
#hubsync-main .qa-bridge{position:relative;height:90%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-width:0;padding:24px 0}
#hubsync-main .qa-bridge .framer-1gqk3ji,#hubsync-main .qa-bridge .framer-2v4e42{display:block;position:relative;inset:auto;width:120px;height:auto;max-width:none;transform:none}
#hubsync-main .source-challenge-frame{width:100%;height:auto;aspect-ratio:auto}
#hubsync-main .source-challenge-frame>.source-challenge{position:relative!important;inset:auto;width:100%!important;height:auto;aspect-ratio:1240/558;transform:none}
#hubsync-main .source-challenge .framer-1ry028w{left:54.76%;bottom:21.5%;width:35.08%;height:auto;aspect-ratio:435/229}
#hubsync-main .source-challenge .framer-tm2c7v{left:50%;bottom:5%;width:80%;white-space:normal;text-align:center;transform:translateX(-50%) rotate(1deg)!important}
#hubsync-main .source-challenge .source-sketch{font-size:clamp(18px,2vw,25px);line-height:1.2}
@media(max-width:1099px){#hubsync-main .source-art-frame>.source-qa{grid-template-columns:1fr;gap:0;max-width:680px;margin-inline:auto}#hubsync-main .framer-8lo6e2-container{max-width:620px;justify-self:center}#hubsync-main .qa-phone-stage{max-width:470px}#hubsync-main .qa-bridge{height:100px;width:100%;padding:0;flex-direction:row;justify-content:center;gap:30px}#hubsync-main .qa-bridge .framer-1gqk3ji,#hubsync-main .qa-bridge .framer-2v4e42{width:64px;transform:rotate(90deg)}#hubsync-main .qa-phone-stage .source-sketch{font-size:22px}}
@media(max-width:699px){
 #hubsync-main .source-hero h1,#hubsync-main .source-hero> .ssr-variant p,#hubsync-main .framer-a7p7sn p{text-align:center!important}#hubsync-main .framer-1mpagxc{justify-content:center}
 #hubsync-main .source-columns{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:24px}#hubsync-main .source-columns>.ssr-variant>div,#hubsync-main .source-columns>div{width:100%;min-width:0;flex:none}
 #hubsync-main .qa-phone-stage{max-width:400px}#hubsync-main .qa-phone-stage .source-sketch{font-size:19px}#hubsync-main .qa-bridge{height:88px}
 #hubsync-main .source-challenge-frame>.source-challenge{aspect-ratio:auto;display:flex;flex-direction:column}
 #hubsync-main .source-challenge .framer-1reqi9f{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:2.22222}
 #hubsync-main .source-challenge .framer-1ry028w{position:absolute;left:55%;top:19%;bottom:auto;width:33%;height:auto}
 #hubsync-main .source-challenge .framer-tm2c7v{position:relative;inset:auto;width:100%;margin:16px auto 0;transform:rotate(1deg)!important}
 #hubsync-main .source-challenge .source-sketch{font-size:21px;line-height:1.2}
}
@media(max-width:699px){#hubsync-main .source-columns>div,#hubsync-main .source-columns>.ssr-variant>div{max-width:none}#hubsync-main .source-challenge .framer-tm2c7v{margin-top:8px}}
/* Case contents: the reference's 28px pills, 12px rhythm and 74px sticky offset. */
.case-toc{display:none}
[data-case-anchor]{scroll-margin-top:74px}
@media(min-width:1280px) and (hover:hover) and (pointer:fine){
 .case-toc{display:block;position:fixed;left:16px;top:74px;width:130px;z-index:10;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
 .case-toc.is-visible{opacity:1;visibility:visible}
 .case-toc ol{display:flex;flex-direction:column;align-items:flex-start;gap:12px;list-style:none;margin:0;padding:0}
 .case-toc li{margin:0;padding:0}
 .case-toc a{display:block;width:max-content;padding:4px 12px;border-radius:1000px;color:#5c5c5c;background:transparent;font-size:14px;font-weight:500;line-height:20px;letter-spacing:normal;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
 .case-toc a:hover{background:#f2f2f2;color:#404040}
 .case-toc a[aria-current=location]{background:#e8e8e8;color:#141414;transition:none}
 .case-toc a:focus-visible{outline:2px solid #141414;outline-offset:3px}
 body[data-page=hubsync] #hubsync-main{width:calc(100% - 320px)}
}
@media(min-width:1280px) and (max-width:1759px) and (hover:hover) and (pointer:fine){
 #hubsync-main .source-hero{padding:100px 48px}
 #hubsync-main .source-cover{padding:0 48px}
 #hubsync-main .source-section{padding:80px 48px;gap:64px}
 #hubsync-main .source-footer{padding:80px 48px}
 #hubsync-main .framer-a7p7sn,#hubsync-main .framer-rsgqo6{max-width:100%}
 #hubsync-main .source-results{padding:80px 24px}
 #hubsync-main .framer-1jhpat3{padding:48px 48px 0}
 #hubsync-main .framer-1r1vg2j{padding:0 48px 48px}
 #hubsync-main .source-results [data-text-style=heading-1]{--type-size:64px}
 #hubsync-main .framer-36scnl,#hubsync-main .framer-1sp152u,#hubsync-main .framer-np9yf1{width:27%;height:auto;aspect-ratio:332/673}
 .compare-panel{grid-template-columns:minmax(0,1fr) 52%}
 .notes{padding:40px 24px 120px 40px}
 .screens{padding:32px 24px;gap:16px}
 .screens figure{width:calc(50% - 8px)}
 .screens img{width:100%;height:auto;aspect-ratio:264/510}
 .tabs{left:40px;bottom:40px}.tabs button{padding:0 12px}
}
@media(prefers-reduced-motion:reduce){.case-toc,.case-toc a{transition:none}}
@media(min-width:1280px) and (max-width:1759px) and (hover:hover) and (pointer:fine){#hubsync-main .source-results-core{width:100%;max-width:100%}#hubsync-main .framer-1ad3sut{padding:64px 0}}

/* Overlapping panels retain one stable layout while text and images crossfade. */
.comparison{display:grid}
.comparison .compare-panel{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s}
.comparison .compare-panel.is-active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease,visibility 0s}
.comparison .screens img{width:100%;height:auto;aspect-ratio:1125/2000;object-fit:contain}
#hubsync-main .framer-36scnl,#hubsync-main .framer-1sp152u,#hubsync-main .framer-np9yf1{height:auto;aspect-ratio:1125/2000}
@media(prefers-reduced-motion:reduce){.comparison .compare-panel,.comparison .compare-panel.is-active{transition:none}}

/* Comparison tabs switch their complete panel in one paint. */
.challenge-ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.has-scroll-ink .framer-1ry028w>div{visibility:hidden}
#hubsync-main .has-scroll-ink .source-sketch span{display:inline-block!important;white-space:pre}
@media(prefers-reduced-motion:reduce){#hubsync-main .has-scroll-ink .source-sketch span{clip-path:none!important;opacity:1!important}}
.comparison .compare-panel,.comparison .compare-panel.is-active{position:relative;background:#f3f3f3;transition:none}
.comparison .tabs button{transition:none}
.comparison .tabs{z-index:3}
/* Heading 3 remains proportionate on tablet and phone. */
@media(max-width:1099px){#hubsync-main .source-section [data-text-style="heading-3"]{--type-size:36px}}
@media(max-width:699px){#hubsync-main .source-section [data-text-style="heading-3"]{--type-size:32px;--type-leading:1.2}}
/* Centered comparisons: screens, scenario tabs, then the matching explanation.
   All panels share the same rows so switching never changes the block height. */
#hubsync-main .comparison{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:28px;height:auto;min-height:0;padding:0;background:transparent;border-radius:0;overflow:visible}
#hubsync-main .comparison .compare-panel{grid-column:1;grid-row:1/4;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;height:auto;min-height:0;gap:inherit;background:transparent}
#hubsync-main .comparison .screens{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,300px));justify-content:center;align-items:start;gap:40px;width:100%;max-width:640px;margin:0 auto;padding:0}
#hubsync-main .comparison .screens figure{width:100%;min-width:0;margin:0}
#hubsync-main .comparison .screens img{display:block;width:100%;height:auto;aspect-ratio:1125/2000;object-fit:contain;border-radius:0}
#hubsync-main .comparison .screens figcaption{margin:16px 0 0;text-align:center}
#hubsync-main .comparison .tabs{grid-column:1;grid-row:2;position:relative;inset:auto;justify-self:center;align-self:start;display:flex;justify-content:center;width:max-content;max-width:100%;margin:0;padding:4px;gap:0}
#hubsync-main .comparison .tabs button{flex:none;padding:0 18px;white-space:nowrap}
#hubsync-main .comparison .notes{grid-column:1;grid-row:3;justify-self:center;width:100%;max-width:660px;min-height:0;margin:0;padding:0;text-align:center}
#hubsync-main .comparison .notes h3{display:none}
#hubsync-main .comparison .notes p{max-width:none;margin:0;text-align:center}
@media(max-width:699px){
 #hubsync-main .comparison{row-gap:24px}
 #hubsync-main .comparison .screens{gap:16px}
 #hubsync-main .comparison .screens figcaption{margin-top:12px;font-size:14px}
 #hubsync-main .comparison .tabs button{height:40px;padding:0 10px;font-size:14px;line-height:1.2}
}
@media(max-width:380px){#hubsync-main .comparison .tabs button{padding:0 6px;font-size:13px}}

/* Keep the authored timeline at a readable scale inside a mobile scroll region. */
.challenge-scroll{display:contents}
.challenge-scroll-hint{display:none}
#hubsync-main .source-sketch{text-wrap:balance}
#hubsync-main p[data-text-style="body-1"],#hubsync-main p[data-text-style="body-2"]{text-wrap:pretty}
@media(max-width:699px){
 #hubsync-main .source-challenge{overflow:visible;gap:0}
 #hubsync-main .challenge-scroll{display:block;position:relative;width:calc(100% + 40px);max-width:none;margin-inline:-20px;padding:0 20px 12px;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#c9c9c9 #fff;opacity:var(--challenge-reveal,1);-webkit-overflow-scrolling:touch}
 #hubsync-main .challenge-scroll:focus-visible{outline:2px solid #0055ff;outline-offset:3px}
 #hubsync-main .source-challenge .framer-1reqi9f{display:block;position:relative;inset:auto;width:960px;max-width:none;height:320px;aspect-ratio:auto;overflow:hidden}
 #hubsync-main .challenge-scroll .framer-1reqi9f>div:first-child{height:432px!important;bottom:auto!important}
 #hubsync-main .source-challenge .framer-1ry028w{left:55%;top:44%;bottom:auto;width:33%;height:auto;aspect-ratio:606/319;opacity:0!important;pointer-events:none}
 #hubsync-main .challenge-scroll-hint{display:block;margin:10px 0 24px;padding:0;text-align:center;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:.02em;color:#707070}
 #hubsync-main .source-challenge .framer-tm2c7v{display:flex;flex-direction:column;gap:14px;max-width:30ch;margin:0 auto;transform:none!important}
 #hubsync-main .source-challenge .source-sketch{font-size:23px;line-height:1.3;margin:0;text-wrap:balance}
}
@media(max-width:699px){
 #hubsync-main .source-cover{padding:0}
 #hubsync-main .source-cover .framer-lsu18w{border-radius:0}
 #hubsync-main .source-cover img{border-radius:0!important}
}

/* Mobile introductions read from a consistent left edge. */
@media(max-width:699px){
 #hubsync-main .source-hero{align-items:flex-start}
 #hubsync-main .source-hero h1.framer-text,#hubsync-main .source-hero p.framer-text{text-align:left!important;--framer-text-alignment:left!important}
 #hubsync-main .framer-1mpagxc{justify-content:flex-start;align-self:stretch;width:100%}
}