/* One scroll contract across every marketing page. The look row scrolls away;
   the navigation row remains pinned. Native sticky also works without JS. */
html:has([data-sticky-navigation]),html:has([data-sticky-navigation]) body{overflow-x:clip!important;overflow-y:visible!important}
[data-sticky-navigation]{position:sticky!important;top:-60px!important;z-index:1000!important;width:100%!important;margin:0!important;padding:0!important;transform:none!important;background:var(--bg)!important;overflow:visible!important}
[data-sticky-navigation]>:is(.header-inner,.rf-header-inner){display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:60px 76px!important;align-items:center!important;gap:0 16px!important;min-height:0!important;height:136px!important;padding:0!important;width:80%!important;max-width:1600px!important;margin-inline:auto!important}
[data-sticky-navigation] :is(.looks,.rf-looks){grid-column:1/-1!important;grid-row:1!important;justify-self:center!important;align-self:center!important;display:flex!important;justify-content:center!important;align-items:center!important;margin:0!important;padding:0!important;transform:none!important}
[data-sticky-navigation] :is(.brand,.rf-brand){grid-column:1!important;grid-row:2!important;min-width:0}
[data-sticky-navigation] :is(.header-actions,.rf-actions){grid-column:2!important;grid-row:2!important;justify-self:end!important;margin:0!important}
html:has([data-sticky-navigation]){scroll-padding-top:90px!important}
@media(max-width:900px){[data-sticky-navigation]>:is(.header-inner,.rf-header-inner){width:90%!important}}
@media(max-width:600px){[data-sticky-navigation]>:is(.header-inner,.rf-header-inner){grid-template-rows:60px 70px!important;height:130px!important;gap:0 8px!important}[data-sticky-navigation] :is(.brand,.rf-brand){font-size:14px!important;gap:7px!important}[data-sticky-navigation] :is(.brand,.rf-brand) img{width:28px!important;height:28px!important}[data-sticky-navigation] :is(.brand,.rf-brand) span{max-width:100px!important;font-size:12px!important}}

/* Banderoles always bleed to the viewport edges, independently of content width. */
body:has([data-sticky-navigation]) main :is(.x-ribbon,.ribbon-window,.ribbon-transition,.brain-ribbon,.ribbon,.ticker){width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;left:auto!important;right:auto!important;box-sizing:border-box}
html[data-family-review] .ribbon-window{overflow:clip;background:transparent}
html[data-family-review] .ribbon-window>.launch-ribbon{width:130%!important;max-width:none!important;margin-left:-15%!important;margin-right:0!important}
[data-band-loop]{overflow:hidden!important;display:block!important}
[data-band-loop] .edge-band-track{display:flex!important;width:max-content!important;gap:0!important;animation:none!important;will-change:transform}
[data-band-loop] .edge-band-group{display:flex!important;align-items:center;flex:none;gap:clamp(28px,4vw,70px);width:max-content;min-width:100vw;padding-right:clamp(28px,4vw,70px);white-space:nowrap}
[data-band-loop] .edge-band-group>:is(span,div){flex-shrink:0}
[data-band-loop] .edge-band-group :is(.ribbon-track,.ribbon-group){animation:none!important;transform:none!important}
html[data-family-review] .launch-ribbon[data-band-loop]{transform:rotate(-3deg)!important}
html[data-family-review] .launch-ribbon.reverse[data-band-loop]{transform:rotate(3deg)!important}
[data-band-loop].ribbon-track{animation:none!important}
@media(prefers-reduced-motion:reduce){[data-band-loop] .edge-band-track{transform:none!important;will-change:auto}}